@charset "UTF-8";
/* Schieck & Smeets - responsive nabouw van de Xara-site (zelfde look, meegroeiend tot 1280px)
   Maten en kleuren overgenomen van het origineel (pagina 851px breed). */

@font-face { font-family: 'Futura Md BT'; src: url('../fonts/futura-md-bt-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Albertus Medium'; src: url('../fonts/albertus-medium.woff') format('woff'); font-weight: 400; font-display: swap; }
/* Reserve-lettertypen met nagemeten maten, zodat de tekst niet verspringt als het lettertype binnenkomt */
@font-face { font-family: 'Futura-reserve'; src: local('Century Gothic'), local('Trebuchet MS'), local('Arial'); size-adjust: 96%; }

:root {
  --groen: #49a942;
  --groen-donker: #3a8a34;   /* scheidingslijnen in de menubalk */
  --rood: #ef3e42;
  --zwart: #000;
  --wit: #fff;
  --grijs-vak: #e6e6e6;      /* lege fotovakken op de teampagina */
  --tekst: 'Futura Md BT', 'Futura-reserve', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --titel: 'Albertus Medium', 'Futura Md BT', serif;
  --breed: 1280px;
}

/* Rustige paginawissel: de browser laat de pagina staan en vervaagt alleen de inhoud (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
.kop { view-transition-name: kop; }
.menu { view-transition-name: menu; }
::view-transition-group(kop), ::view-transition-group(menu) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Ruimte voor de schuifbalk altijd vasthouden: anders verspringt de pagina bij korte pagina's */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; color: var(--zwart); background: #ddd;
  font: italic 400 15px/1.55 var(--tekst);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--groen); }
a:hover { color: var(--rood); }
:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }
p { margin: 0 0 .8em; }
h1, h2, h3 { font-weight: 400; margin: 0 0 .4em; line-height: 1.3; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.overslaan { position: absolute; left: 12px; top: -60px; background: #000; color: #fff; padding: 8px 14px; z-index: 100; font-style: normal; }
.overslaan:focus { top: 8px; color: #fff; }
.rood { color: var(--rood); }
.groen { color: var(--groen); }
.klein { font-size: 13px; }

/* Achtergrondfoto per pagina, vast op de achtergrond zoals in het origineel */
.achtergrond { position: fixed; inset: 0; z-index: -1; background-color: #ddd; background-position: center; background-size: cover; background-repeat: no-repeat; }

/* Witte pagina met zwarte rand */
.pagina {
  width: min(100% - 2 * clamp(0px, 4vw, 50px), var(--breed)); margin: 70px auto 0; background: var(--wit);
  border: 1px solid var(--zwart); position: relative;
}

/* Kop: watermeloen links, naam in het midden, foto rechts (beide steken boven de rand uit) */
.kop { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; }
.kop-logo { position: absolute; left: 20px; top: -17px; width: 174px; height: 133px; background: var(--wit); display: grid; place-items: center; }
.kop-logo img { width: 150px; height: auto; }
.kop-titel { text-align: center; padding: 0 230px; }
.kop-naam { display: block; font: 400 30px/1.2 var(--titel); font-style: normal; color: var(--zwart); text-decoration: none; letter-spacing: .01em; }
.kop-naam:hover { color: var(--zwart); }
.kop-sub { display: block; color: var(--groen); font-size: 17px; margin-top: 10px; }
.kop-foto { position: absolute; right: 0; top: -17px; width: 201px; height: 134px; object-fit: cover; }
.kop-foto.vrij { object-fit: contain; background: transparent; }

/* Menubalk */
.menu { background: var(--groen); border-top: 1px solid var(--zwart); border-bottom: 1px solid var(--zwart); position: relative; z-index: 20; }
.menu-knop { display: none; }
.menu > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); }
.menu > ul > li { position: relative; border-left: 1px solid var(--groen-donker); }
.menu > ul > li:first-child { border-left: 0; }
.menu a, .menu .sub-knop {
  display: flex; align-items: center; justify-content: center; height: 62px; color: var(--wit); text-decoration: none;
  font: italic 400 17px/1.1 var(--tekst); text-align: center; padding: 0 4px; background: none; border: 0; width: 100%; cursor: pointer;
}
.menu a:hover, .menu .sub-knop:hover, .menu li:focus-within > .sub-knop { background: rgba(255, 255, 255, .14); color: var(--wit); }
/* Huidige pagina: rode streep onderaan en kleinere letter, zoals in het origineel */
.menu > ul > li.actief > a, .menu > ul > li.actief > .sub-knop { font-size: 14px; box-shadow: inset 0 -4px 0 var(--rood); }
/* Submenu bij Kids */
.submenu { list-style: none; margin: 0; padding: 0; position: absolute; left: -1px; top: 100%; min-width: calc(100% + 2px); background: var(--groen); border: 1px solid var(--zwart); display: none; }
.menu li:hover > .submenu, .menu li:focus-within > .submenu, .menu li.open > .submenu { display: block; }
.submenu a { height: auto; padding: 11px 16px; justify-content: flex-start; white-space: nowrap; font-size: 16px; border-top: 1px solid var(--groen-donker); }
.submenu li:first-child a { border-top: 0; }
.submenu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--rood); }

/* Inhoud: tekst links, contactkolom rechts met een zwarte lijn ertussen */
.inhoud { display: grid; grid-template-columns: minmax(0, 2.03fr) minmax(0, 1fr); }
.hoofd { padding: 26px 20px 30px; min-width: 0; }
.zij { border-left: 1px solid var(--zwart); display: flex; flex-direction: column; }
.zij-blok { padding: 26px 12px 22px; text-align: center; }
.zij-blok + .zij-blok, .zij-lijn { border-top: 1px solid var(--zwart); }
.zij-blok p { margin: 0 0 1.25em; line-height: 1.55; }
.zij-naam { color: var(--groen); font-size: 23px; margin-bottom: 18px; }
.zij-mail { font-size: 17px; line-height: 1.35; }
.zij-mail img { display: inline-block; vertical-align: -2px; width: 31px; height: 20px; margin-right: 12px; }
.zij-mail a { font-size: 17px; }
.zij-kop { color: var(--groen); font-size: 19px; text-align: left; margin: 0 0 12px; }
.zij-foto { margin: 0 auto; }
.tel { color: inherit; text-decoration: none; white-space: nowrap; }
.tel:hover { color: var(--groen); }

/* Koppen en accenten in de tekst */
.kop-zwart { font-size: 21px; line-height: 1.6; margin-bottom: 4px; }
.kop-groen { color: var(--groen); font-size: 19px; margin: 1.2em 0 .5em; }
.kop-rood { color: var(--rood); font-size: 19px; margin: .2em 0 .6em; }
.hoofd > .kop-groen:first-child, .hoofd > .kop-rood:first-child { margin-top: 0; }
.melding { color: var(--rood); font: 700 14px/1.4 Arial, sans-serif; font-style: normal; margin-top: 2.2em; }
.tijden { border-collapse: collapse; margin: 0 0 .6em; }
.tijden td { padding: 0 0 2px; vertical-align: top; }
.tijden td:first-child { padding-right: 36px; }
.streepjes { list-style: none; padding: 0; margin: 0 0 .8em; }
.streepjes li::before { content: '- '; }
.groot { font-size: 17px; }
.hoofd.groot { font-size: 17px; }
.hoofd.klein { font-size: 14px; }
.hoofd.klein .kop-rood { font-size: 19px; }
.tussenkop { font-size: inherit; margin: 1.3em 0 .2em; }
.hoofd ul:not(.streepjes) { margin: 0 0 .9em; padding-left: 1.3em; }
.band { border-top: 1px solid var(--zwart); padding: 26px 20px; text-align: center; font-size: 19px; }

/* Foto's en vakken naast de tekst */
.met-foto { display: grid; grid-template-columns: minmax(0, 1fr) 135px; gap: 14px; align-items: start; margin-bottom: 1.4em; }
.met-foto.links { grid-template-columns: 135px minmax(0, 1fr); }
.foto-vak { width: 135px; height: 154px; background: var(--grijs-vak); object-fit: cover; }
.naast-elkaar { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; margin: 1.5em 0; }

/* Knoppen in de zijkolom (tarieven) */
.knopje {
  display: inline-block; background: var(--groen); color: var(--wit); text-decoration: none; font: 400 11px/1 Arial, sans-serif;
  padding: 6px 10px; border: 1px solid var(--groen-donker); margin: 4px 0;
}
.knopje:hover { background: var(--rood); color: var(--wit); }

/* Links-pagina: groene pijltjes */
.pijl { display: inline-grid; place-items: center; width: 22px; height: 18px; background: var(--groen); color: var(--wit); font: 700 13px/1 Arial, sans-serif; text-decoration: none; margin-right: 8px; vertical-align: 1px; }
.pijl:hover { background: var(--rood); color: var(--wit); }

/* Kaart achter de cookievraag */
.extern-wrap { position: relative; background: #eef3ed; aspect-ratio: 4 / 3; max-width: 600px; display: grid; place-items: center; text-align: center; border: 1px solid #ccc; }
.extern-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.extern-vraag { padding: 20px; max-width: 380px; }
.extern-vraag p { font-size: 14px; }
.knop { display: inline-block; background: var(--groen); color: var(--wit); border: 0; padding: 9px 18px; font: italic 400 15px/1.2 var(--tekst); cursor: pointer; text-decoration: none; }
.knop:hover { background: var(--rood); color: var(--wit); }
.knop-licht { background: var(--wit); color: var(--zwart); border: 1px solid #999; }
.knop-licht:hover { background: #eee; color: var(--zwart); }

/* Onder de pagina: keurmerken en voetregel */
.onder { width: min(100% - 2 * clamp(0px, 4vw, 50px), var(--breed)); margin: 22px auto 40px; }
.keurmerken img { width: min(845px, 100%); margin: 0 auto; }
.voetregel { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 12px/1.4 Arial, sans-serif; font-style: normal; margin-top: 18px; padding: 0 4px; }
.voetregel a, .voetregel button { color: var(--zwart); }
.voetregel nav { display: flex; gap: 28px; }
.voetregel button { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.voetregel nav { flex-wrap: wrap; row-gap: 6px; }
.taal-link { display: inline-flex; align-items: center; gap: 6px; }
.taal-link img { width: 16px; height: 16px; }

/* Blok op 'Me and my mission' naar de Engelse website */
.taal-blok { display: flex; gap: 18px; align-items: flex-start; border: 2px solid var(--groen); padding: 18px 20px; margin-top: 2em; background: #f4faf3; }
.taal-blok img { flex: none; width: 57px; height: 57px; }
.taal-blok p { margin-bottom: .5em; }
.taal-blok .knop { margin-top: 6px; }
@media (max-width: 520px) { .taal-blok { flex-direction: column; } }

/* Pdf in een venster over de pagina */
.pdf-venster { width: min(1000px, 94vw); height: 90vh; max-height: 90vh; padding: 0; border: 1px solid #000; overflow: hidden; }
.pdf-venster[open] { display: flex; flex-direction: column; }
.pdf-venster::backdrop { background: rgba(0, 0, 0, .65); }
.pdf-balk { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 18px; background: var(--groen); color: var(--wit); }
.pdf-titel { flex: 1; font-size: 16px; }
.pdf-nieuw { color: var(--wit); font-size: 14px; }
.pdf-sluit { width: 34px; height: 34px; border: 1px solid var(--wit); background: transparent; color: var(--wit); cursor: pointer; font-size: 15px; }
.pdf-venster iframe { flex: 1; width: 100%; border: 0; background: #525659; }

/* Cookiemelding */
.cookie-balk { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; justify-content: center; }
.cookie-balk.zichtbaar { display: flex; }
.cookie-inhoud { background: var(--wit); border: 1px solid var(--zwart); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); padding: 16px 20px; max-width: 760px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.cookie-inhoud p { margin: 0; flex: 1 1 300px; }
.cookie-knoppen { display: flex; gap: 10px; }

/* Tablet en telefoon: één kolom, menu achter een knop */
@media (max-width: 880px) {
  .pagina { margin-top: 24px; width: calc(100% - 20px); }
  .kop { height: auto; min-height: 96px; justify-content: flex-start; padding: 10px 12px 10px 128px; }
  .kop-logo { top: -10px; left: 8px; width: 112px; height: 90px; }
  .kop-logo img { width: 100px; }
  .kop-titel { padding: 0; text-align: left; }
  .kop-naam { font-size: 24px; }
  .kop-sub { font-size: 15px; margin-top: 6px; }
  .kop-foto { display: none; }
  .menu-knop {
    display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; height: 50px; background: none; border: 0;
    color: var(--wit); font: italic 400 18px/1 var(--tekst); cursor: pointer;
  }
  .menu-knop svg { width: 22px; height: 22px; }
  .menu > ul { display: none; grid-template-columns: 1fr; border-top: 1px solid var(--zwart); }
  .menu.open > ul { display: grid; }
  .menu > ul > li { border-left: 0; border-top: 1px solid var(--groen-donker); }
  .menu > ul > li:first-child { border-top: 0; }
  .menu a, .menu .sub-knop { height: 46px; justify-content: flex-start; padding: 0 18px; }
  .menu > ul > li.actief > a, .menu > ul > li.actief > .sub-knop { font-size: 17px; box-shadow: inset 5px 0 0 var(--rood); }
  .submenu { position: static; border: 0; border-top: 1px solid var(--groen-donker); background: var(--groen-donker); }
  .menu li:hover > .submenu { display: none; }
  .menu li.open > .submenu { display: block; }
  .submenu a { padding-left: 36px; }
  .inhoud { grid-template-columns: 1fr; }
  .zij { border-left: 0; border-top: 1px solid var(--zwart); }
  .onder { width: calc(100% - 20px); }
}
@media (max-width: 520px) {
  .met-foto, .met-foto.links { grid-template-columns: 1fr; }
  .met-foto .foto-vak, .met-foto img { order: -1; }
  .foto-vak.leeg { display: none; }
  .kop-naam { font-size: 21px; }
  .tijden td:first-child { padding-right: 14px; }
}
@media print { .menu, .onder, .cookie-balk, .achtergrond { display: none !important; } .pagina { border: 0; margin: 0; width: 100%; } }