@charset "UTF-8";
/* ==========================================================================
   Z1 Verhuur — site_v2 — main.css
   Ontwerpconcept "Warm Welkom" (Design B).
   Eén handgeschreven stylesheet, geen frameworks, geen build-step.

   Inhoud
   ------
    1. Fonts (self-hosted woff2)
    2. Tokens (:root)
    3. Reset + basis
    4. Hulpklassen
    5. Layout: secties en containers
    6. Typografie
    7. Knoppen
    8. Header + navigatie (variant B+D: zwevend plateau/pill -> crème balk)
    9. Hero
   9b. Subhero (compacte fotohero voor subpagina's) + kruimelpad
   10. Categorietegels
   11. USP-rij
   12. Ons verhaal (beeld naast tekst)
   13. Tarieven-teaser
   14. Testimonials (carrousel)
   15. Contact + formulier
  15b. Subpaginacomponenten (team, tarieftabel, catering, weetjes, FAQ, CTA-band)
  15c. Zaalblokken (/zalen/)
  15d. Dienstenblokken (/aanvullende-diensten/)
  15e. Tekstpagina (/privacyverklaring/)
  15f. Prijsband (/evenementen/, /vergaderen/, /ontmoeten/)
   16. Footer
   17. Responsive (<=1024 tablet, <=767 mobiel)

   Kleurcontrast (WCAG 2.1 AA) — zie BOUW-NOTITIES.md
   ---------------------------------------------------
   wit op #007bff  = 3,98:1  -> ZAKT voor tekst <18,66px bold. Niet gebruiken
                               als vlakkleur achter tekst.
   wit op #0056b3  = 7,04:1  -> knopvlakken en links (AAA).
   wit op #004085  = 10,1:1  -> hero, footer, tegel Evenementen.
   wit op #8a5a30  = 5,86:1  -> tegel Ontmoeten.
   #333 op #ede2d0 = 9,9:1   -> tegel Vergaderen / testimonialband.
   ========================================================================== */


/* ==========================================================================
   1. FONTS — self-hosted variable fonts (woff2), latin + latin-ext
   --------------------------------------------------------------------------
   Bewuste afwijking van de stijlgids (die noemt Helvetica Neue): Z1 gebruikt
   al jaren Montserrat, dus dat blijft de merkletter. Omschakelen kan door
   alleen --font-kop / --font-tekst hieronder aan te passen.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;          /* variable font: één bestand, alle gewichten */
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
  /* --- kleuren: stijlgids "Warm Welkom" --- */
  --z1-donkerblauw:   #004085;  /* primaire merkkleur: hero, footer, koppen  */
  --z1-helderblauw:   #007bff;  /* accent: hover, focusring, iconen op wit   */
  --z1-knopblauw:     #0056b3;  /* vlakkleur achter witte tekst (AA-proof)   */
  --z1-knopblauw-op:  #003d80;  /* hover van een primaire knop               */
  --z1-creme:         #fdfcf8;  /* warme paginachtergrond                    */
  --z1-zand:          #ede2d0;  /* warme accentband (tegel, testimonials)    */
  --z1-zand-licht:    #f6efe4;
  --z1-warmbruin:     #8a5a30;  /* derde categorietegel                      */

  --grijs-donker:     #333333;  /* bodytekst                                 */
  --grijs-midden:     #555555;  /* bijschriften, secundaire tekst            */
  --grijs-licht:      #cccccc;  /* randen van velden en tabellen             */
  --grijs-lijn:       #e6e2da;  /* zachte scheidingslijn op crème            */
  --wit:              #ffffff;

  /* --- typografie --- */
  --font-kop:   "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-tekst: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --tekst-basis:  1rem;        /* 16px — stijlgids                            */
  --tekst-lead:   1.0625rem;   /* 17px — introparagrafen                      */
  --tekst-klein:  0.875rem;    /* 14px — bijschriften                         */

  /* --- ruimte: alles een veelvoud van 8px --- */
  --ruimte-xs: 0.5rem;   /*  8px */
  --ruimte-s:  1rem;     /* 16px */
  --ruimte-m:  2rem;     /* 32px */
  --ruimte-l:  4rem;     /* 64px */
  --ruimte-xl: 6rem;     /* 96px */

  /* --- vorm --- */
  --radius:        4px;
  --radius-groot:  6px;
  --schaduw:       0 1px 3px rgba(0, 0, 0, 0.10);
  --schaduw-op:    0 6px 18px rgba(0, 64, 133, 0.16);
  --breedte:       1200px;
  --breedte-smal:  760px;

  --overgang: 160ms ease-out;
}


/* ==========================================================================
   3. RESET + BASIS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* plakkende header niet over het anker heen */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--z1-creme);
  color: var(--grijs-donker);
  font-family: var(--font-tekst);
  font-size: var(--tekst-basis);
  line-height: 1.6;
  overflow-x: hidden;          /* vangnet tegen horizontale overflow */
}

img, picture, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-kop); margin: 0; }
p, ul, ol { margin: 0; }

a { color: var(--z1-knopblauw); }
a:hover { color: var(--z1-donkerblauw); }

button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--z1-helderblauw);
  outline-offset: 2px;
  border-radius: 2px;
}
/* op donkerblauwe vlakken is helderblauw te weinig contrast */
.hero :focus-visible,
.subhero :focus-visible,
.sectie--blauw :focus-visible,
.ctaband :focus-visible,
.site-footer :focus-visible,
.tegel--evenementen :focus-visible,
.tegel--ontmoeten :focus-visible { outline-color: var(--wit); }


/* ==========================================================================
   4. HULPKLASSEN
   ========================================================================== */

.visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.sla-over {
  position: absolute;
  left: var(--ruimte-s); top: -100px;
  z-index: 200;
  background: var(--wit);
  color: var(--z1-donkerblauw);
  font-family: var(--font-kop);
  font-weight: 600;
  padding: var(--ruimte-xs) var(--ruimte-s);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-op);
  transition: top var(--overgang);
}
.sla-over:focus { top: var(--ruimte-s); }

/* gecentreerde losse regel (bijv. een pijllink onder een blok) */
.midden { text-align: center; }

/* verticale ruimte in stappen van 8px — voorkomt inline styles in de HTML */
.ruimte-boven-xs { margin-top: var(--ruimte-xs); }
.ruimte-boven-s  { margin-top: var(--ruimte-s); }
.ruimte-boven-m  { margin-top: var(--ruimte-m); }


/* ==========================================================================
   5. LAYOUT: SECTIES EN CONTAINERS
   ========================================================================== */

.sectie { padding: var(--ruimte-xl) 0; }
.sectie--strak  { padding: var(--ruimte-l) 0; }
.sectie--wit    { background: var(--wit); }
.sectie--creme  { background: var(--z1-creme); }
.sectie--zand   { background: var(--z1-zand); }
.sectie--blauw  { background: var(--z1-donkerblauw); color: var(--wit); }

.omhulsel {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--ruimte-m);
}

.sectie__kop { max-width: var(--breedte-smal); margin-bottom: var(--ruimte-m); }
.sectie__kop--midden { margin-inline: auto; text-align: center; }


/* ==========================================================================
   6. TYPOGRAFIE
   ========================================================================== */

.opschrift {                       /* het "eyebrow"-regeltje boven een kop */
  font-family: var(--font-kop);
  font-size: var(--tekst-klein);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z1-knopblauw);
  margin-bottom: var(--ruimte-xs);
}
.sectie--blauw .opschrift,
.hero .opschrift { color: #bcd7f2; }

.titel-hero {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.75rem);   /* 32 – 44px */
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.titel {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.875rem);  /* 24 – 30px */
  line-height: 1.25;
  font-weight: 600;
  color: var(--z1-donkerblauw);
}
.sectie--blauw .titel { color: var(--wit); }

.titel-klein {
  font-size: 1.125rem;   /* 18px */
  line-height: 1.3;
  font-weight: 600;
  color: var(--z1-donkerblauw);
}

.tekst > * + * { margin-top: var(--ruimte-s); }
.tekst { color: var(--grijs-donker); }
.tekst--lead { font-size: var(--tekst-lead); }
.tekst--smal { max-width: var(--breedte-smal); }
.tekst--klein { font-size: var(--tekst-klein); color: var(--grijs-midden); }
.sectie--blauw .tekst, .sectie--blauw .tekst--klein { color: rgba(255, 255, 255, 0.92); }

.tekst ul { padding-left: 1.25em; }
.tekst li + li { margin-top: var(--ruimte-xs); }


/* ==========================================================================
   7. KNOPPEN
   ========================================================================== */

.knop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  font-family: var(--font-kop);
  font-size: var(--tekst-basis);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--overgang), color var(--overgang),
              border-color var(--overgang), transform var(--overgang);
}
.knop:hover { transform: translateY(-1px); }

.knop--primair {
  background: var(--z1-knopblauw);
  border-color: var(--z1-knopblauw);
  color: var(--wit);
}
.knop--primair:hover { background: var(--z1-knopblauw-op); border-color: var(--z1-knopblauw-op); color: var(--wit); }

.knop--secundair {
  background: transparent;
  border-color: var(--z1-knopblauw);
  color: var(--z1-knopblauw);
}
.knop--secundair:hover { background: var(--z1-knopblauw); color: var(--wit); }

/* secundaire knop op een donker vlak */
.knop--licht {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--wit);
}
.knop--licht:hover { background: var(--wit); color: var(--z1-donkerblauw); border-color: var(--wit); }

.knop--klein { padding: 8px 16px; font-size: var(--tekst-klein); }

/* tekstlink met pijl */
.pijllink {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  font-family: var(--font-kop);
  font-weight: 600;
  text-decoration: none;
  color: var(--z1-knopblauw);
}
.pijllink svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--overgang); }
.pijllink:hover { text-decoration: underline; }
.pijllink:hover svg { transform: translateX(3px); }


/* ==========================================================================
   8. HEADER + NAVIGATIE — variant "B+D"
   --------------------------------------------------------------------------
   Bovenaan de pagina (scrollY < 60): GEEN balk. Het logo staat op een klein
   crème plateau, het menu + CTA + vlag zitten in een zwevende pill. Allebei
   zweven ze over de hero-foto, die tot de bovenrand van de pagina doorloopt.
   (= variant D)

   Na ~60 px scrollen zet site.js de klasse .is-vast op .site-header: plateau
   en pill verliezen hun eigen achtergrond en schaduw, en de header zelf wordt
   één doorlopende crème balk met blur. (= variant B)

   De navtekst zit ALTIJD op crème (pill of balk) en is dus altijd donker op
   licht — er is bewust geen fase met transparante tekst over de foto.
   #333 op rgba(253,252,248,.88) haalt ruim AA.

   De header is `position: fixed`; de hero (en de compacte .subhero op
   subpagina's) loopt eronderdoor en reserveert zelf ruimte met padding-top.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  box-shadow: none;
}

.site-header__binnen {
  display: flex;
  align-items: center;
  gap: var(--ruimte-m);
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding: 12px var(--ruimte-m);
}

/* --- logo op een crème plateau --- */
.site-header__logo {
  flex: 0 0 auto;
  line-height: 0;
  background: rgba(253, 252, 248, 0.95);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: 0 6px 20px -10px rgba(0, 25, 55, 0.5);
}
.site-header__logo img { width: auto; height: 40px; }

/* --- zwevende pill: menu + CTA + taalwissel --- */
.site-header__rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--ruimte-s);
  background: rgba(253, 252, 248, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 6px 12px 6px 26px;
  box-shadow: 0 8px 26px -12px rgba(0, 25, 55, 0.55);
}

/* --- gescrolde staat: één rustige crème balk --- */
.site-header.is-vast,
.site-header.is-menu-open {
  background: rgba(253, 252, 248, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px -12px rgba(0, 30, 65, 0.35);
}
.site-header.is-vast .site-header__logo,
.site-header.is-menu-open .site-header__logo,
.site-header.is-vast .site-header__rechts,
.site-header.is-menu-open .site-header__rechts {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Alle bewegingen van de header staan bewust binnen deze query, zodat
   "verminder beweging" een harde, directe omschakeling geeft. */
@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .site-header__logo,
  .site-header__rechts,
  .site-header .taalwissel,
  .site-header .menu-knop {
    transition: background-color 250ms ease, box-shadow 250ms ease,
                backdrop-filter 250ms ease, -webkit-backdrop-filter 250ms ease;
  }
}

.hoofdmenu {
  display: flex;
  align-items: center;
  gap: var(--ruimte-m);
  list-style: none;
  margin: 0; padding: 0;
}
.hoofdmenu__link {
  font-family: var(--font-kop);
  font-size: var(--tekst-basis);
  font-weight: 600;
  text-decoration: none;
  color: var(--grijs-donker);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.hoofdmenu__link:hover { color: var(--z1-donkerblauw); border-bottom-color: var(--z1-helderblauw); }
/* .hoofdmenu__link--actief wordt door site.js gezet op basis van het pad,
   zodat het headerblok op elke pagina byte-identiek kan blijven. */
.hoofdmenu__link--actief { color: var(--z1-donkerblauw); border-bottom-color: var(--z1-donkerblauw); }

.hoofdmenu__cta { display: none; }   /* alleen in het mobiele uitklapmenu */

/* de CTA in de pill is zelf ook een pill */
.site-header__cta {
  border-radius: 999px;
  padding: 10px 20px;
  letter-spacing: 0.06em;
}
.site-header__cta:hover { transform: none; }

.taalwissel { display: inline-flex; line-height: 0; border-radius: 50%; }
.taalwissel img { width: 24px; height: 24px; border-radius: 50%; }

.menu-knop {
  display: none;
  background: none;
  border: 0;
  padding: var(--ruimte-xs);
  cursor: pointer;
  color: var(--z1-donkerblauw);
}
.menu-knop svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.menu-knop .menu-knop__sluiten { display: none; }
.menu-knop[aria-expanded="true"] .menu-knop__openen { display: none; }
.menu-knop[aria-expanded="true"] .menu-knop__sluiten { display: block; }


/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 560px;
  color: var(--wit);
  background: var(--z1-donkerblauw);
  overflow: hidden;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}
.hero__waas {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(0, 64, 133, 0.96)   0%,
      rgba(0, 64, 133, 0.90)  32%,
      rgba(0, 64, 133, 0.55)  62%,
      rgba(0, 64, 133, 0.28) 100%),
    linear-gradient(0deg, rgba(0, 22, 46, 0.45) 0%, rgba(0, 22, 46, 0) 45%);
}
/* de header zweeft eroverheen (position: fixed), dus bovenin extra ruimte */
.hero__binnen { padding-block: calc(var(--ruimte-xl) + 32px) var(--ruimte-xl); }
.hero__tekst { max-width: 700px; }
.hero__intro {
  font-size: var(--tekst-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  margin-top: var(--ruimte-s);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-m);
}
.hero__feiten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-xs) var(--ruimte-m);
  list-style: none;
  margin: var(--ruimte-m) 0 0;
  padding: 0;
  font-size: var(--tekst-klein);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.hero__feiten li { display: flex; align-items: center; gap: var(--ruimte-xs); }
.hero__feiten svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }


/* ==========================================================================
   9b. SUBHERO — compacte fotohero voor subpagina's
   --------------------------------------------------------------------------
   Elke subpagina begint met dit blok, zodat het zwevende headergedrag (B+D)
   overal hetzelfde werkt: er is altijd een donkere foto onder de pill.
   Hoogte ~340 px desktop / ~300 px mobiel.
   ========================================================================== */

.subhero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  color: var(--wit);
  background: var(--z1-donkerblauw);
  overflow: hidden;
}
.subhero__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  z-index: -2;
}
.subhero__waas {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(0, 22, 46, 0.62)   0%,
      rgba(0, 40, 85, 0.55)  38%,
      rgba(0, 64, 133, 0.88) 100%);
}
.subhero__binnen { padding-block: calc(var(--ruimte-l) + 48px) var(--ruimte-m); }
.subhero__tekst { max-width: 720px; }
.subhero .titel-hero { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem); }  /* 28 – 38px */
.subhero__intro {
  font-size: var(--tekst-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  margin-top: var(--ruimte-xs);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* kruimelpad in de subhero — zichtbare tegenhanger van de BreadcrumbList */
.kruimelpad {
  font-family: var(--font-kop);
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--ruimte-xs);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.kruimelpad ol { display: flex; flex-wrap: wrap; gap: var(--ruimte-xs); list-style: none; margin: 0; padding: 0; }
.kruimelpad li + li::before { content: "›"; margin-right: var(--ruimte-xs); color: rgba(255, 255, 255, 0.6); }
.kruimelpad a { color: var(--wit); text-decoration: none; }
.kruimelpad a:hover { color: var(--wit); text-decoration: underline; }
.kruimelpad [aria-current="page"] { color: rgba(255, 255, 255, 0.85); font-weight: 500; }


/* ==========================================================================
   10. CATEGORIETEGELS
   ========================================================================== */

.tegels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-m);
}

.tegel {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw);
  background: var(--wit);
  transition: box-shadow var(--overgang), transform var(--overgang);
}
.tegel:hover { box-shadow: var(--schaduw-op); transform: translateY(-2px); }

.tegel__beeld { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grijs-lijn); }
.tegel__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease-out; }
.tegel:hover .tegel__beeld img { transform: scale(1.04); }

.tegel__lijf {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  padding: var(--ruimte-m);
}
.tegel__titel {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tegel__tekst { font-size: var(--tekst-basis); margin: 0; }
.tegel__link {
  margin-top: auto;
  padding-top: var(--ruimte-s);
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--tekst-klein);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}
.tegel__link svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--overgang); }
.tegel:hover .tegel__link svg { transform: translateX(3px); }
/* de hele tegel is klikbaar, de link houdt het toetsenbordanker */
.tegel__link::after { content: ""; position: absolute; inset: 0; }
.tegel { position: relative; }

.tegel--evenementen .tegel__lijf { background: var(--z1-donkerblauw); color: var(--wit); }
.tegel--vergaderen  .tegel__lijf { background: var(--z1-zand);        color: var(--grijs-donker); }
.tegel--vergaderen  .tegel__titel { color: var(--z1-donkerblauw); }
.tegel--ontmoeten   .tegel__lijf { background: var(--z1-warmbruin);   color: var(--wit); }


/* ==========================================================================
   11. USP-RIJ
   ========================================================================== */

.usps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-m);
  list-style: none;
  margin: 0; padding: 0;
}
.usp { display: flex; flex-direction: column; gap: var(--ruimte-xs); }
.usp__icoon {
  width: 40px; height: 40px;
  fill: var(--z1-donkerblauw);
  flex: 0 0 auto;
}
.usp__titel { font-family: var(--font-kop); font-weight: 600; font-size: var(--tekst-basis); color: var(--z1-donkerblauw); }
.usp__tekst { font-size: var(--tekst-klein); color: var(--grijs-midden); margin: 0; }


/* ==========================================================================
   12. ONS VERHAAL (beeld naast tekst)
   ========================================================================== */

.beeldtekst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ruimte-l);
  align-items: center;
}
.beeldtekst__beeld { margin: 0; }
.beeldtekst__beeld img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.beeldtekst__bijschrift {
  font-size: var(--tekst-klein);
  color: var(--grijs-midden);
  text-align: center;
  margin-top: var(--ruimte-xs);
}
.beeldtekst__acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); margin-top: var(--ruimte-m); }

.citaat-missie {
  margin: var(--ruimte-m) 0 0;
  padding: var(--ruimte-s) var(--ruimte-m);
  border-left: 4px solid var(--z1-helderblauw);
  background: var(--z1-zand-licht);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.citaat-missie p { font-size: var(--tekst-lead); font-style: italic; color: var(--grijs-donker); }


/* ==========================================================================
   13. TARIEVEN-TEASER
   ========================================================================== */

.tarieven {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ruimte-m);
  align-items: stretch;
}
.tariefkaart {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-top: 4px solid var(--z1-donkerblauw);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-m);
}
.tariefkaart--maatschappelijk { border-top-color: var(--z1-warmbruin); }
.tariefkaart__titel { font-size: 1.25rem; font-weight: 600; color: var(--z1-donkerblauw); }
.tariefkaart--maatschappelijk .tariefkaart__titel { color: var(--z1-warmbruin); }
.tariefkaart__voor { font-size: var(--tekst-klein); color: var(--grijs-midden); }
.tariefkaart__vanaf {
  font-family: var(--font-kop);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--grijs-donker);
  margin-top: var(--ruimte-xs);
}
.tariefkaart__vanaf small { display: block; font-size: var(--tekst-klein); font-weight: 500; color: var(--grijs-midden); }

.tariefkaart__staffel {
  list-style: none;
  margin: var(--ruimte-s) 0 0;
  padding: 0;
  border-top: 1px solid var(--grijs-lijn);
  font-size: var(--tekst-klein);
}
.tariefkaart__staffel li {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-s);
  padding: var(--ruimte-xs) 0;
  border-bottom: 1px solid var(--grijs-lijn);
}
.tariefkaart__staffel dfn, .tariefkaart__staffel span:first-child { font-style: normal; color: var(--grijs-midden); }
.tariefkaart__staffel span:last-child { font-weight: 600; white-space: nowrap; }
.tariefkaart__noot { font-size: var(--tekst-klein); color: var(--grijs-midden); margin-top: auto; padding-top: var(--ruimte-s); }

.tarieven__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-m);
}


/* ==========================================================================
   14. TESTIMONIALS (carrousel)
   ========================================================================== */

.stemmen { position: relative; max-width: 860px; margin-inline: auto; text-align: center; }

.carrousel { position: relative; overflow: hidden; }
.carrousel__spoor { display: flex; transition: transform 400ms ease-out; }
.carrousel__dia { flex: 0 0 100%; min-width: 100%; padding-inline: 56px; }

.stem { margin: 0; }
.stem__teken {
  display: block;
  font-family: var(--font-kop);
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--z1-helderblauw);
  margin-bottom: var(--ruimte-xs);
}
.stem__tekst {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--grijs-donker);
  margin: 0;
}
.stem__bron {
  display: block;
  margin-top: var(--ruimte-s);
  font-family: var(--font-kop);
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--z1-donkerblauw);
  font-style: normal;
}
.stem__bron span { display: block; font-weight: 400; color: var(--grijs-midden); }

.carrousel__knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: 50%;
  box-shadow: var(--schaduw);
  cursor: pointer;
  color: var(--z1-donkerblauw);
  transition: background-color var(--overgang), color var(--overgang);
}
.carrousel__knop:hover { background: var(--z1-donkerblauw); color: var(--wit); }
.carrousel__knop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.carrousel__knop--vorige   { left: -8px; }
.carrousel__knop--volgende { right: -8px; }

.carrousel__punten { display: flex; justify-content: center; gap: var(--ruimte-xs); margin-top: var(--ruimte-m); }
.carrousel__punt {
  width: 10px; height: 10px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: #c8bda9;
  cursor: pointer;
}
.carrousel__punt[aria-current="true"] { background: var(--z1-donkerblauw); }


/* ==========================================================================
   15. CONTACT + FORMULIER
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ruimte-l);
  align-items: start;
}

.gastheer {
  display: flex;
  align-items: center;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-m);
}
.gastheer img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gastheer__naam { font-family: var(--font-kop); font-weight: 600; color: var(--z1-donkerblauw); }
.gastheer__rol  { font-size: var(--tekst-klein); color: var(--grijs-midden); }

.nap { list-style: none; margin: var(--ruimte-m) 0 0; padding: 0; }
.nap li { display: flex; gap: var(--ruimte-s); padding: var(--ruimte-xs) 0; }
.nap svg { width: 20px; height: 20px; fill: var(--z1-donkerblauw); flex: 0 0 auto; margin-top: 2px; }
.nap a { text-decoration: none; font-weight: 600; }
.nap a:hover { text-decoration: underline; }

.kaart {
  width: 100%;
  height: 260px;
  margin-top: var(--ruimte-m);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
}

/* --- formulier --- */
.formulierkaart {
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-m);
}
.formulier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-m);
}
.veldgroep { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
.veldgroep--half { grid-column: auto; }
.veldgroep__label { font-family: var(--font-kop); font-size: var(--tekst-klein); font-weight: 600; color: var(--grijs-donker); }
.veldgroep__label .optioneel { font-weight: 400; color: var(--grijs-midden); }

.veld {
  font-family: var(--font-tekst);
  font-size: var(--tekst-basis);
  color: var(--grijs-donker);
  background: var(--wit);
  border: 1px solid var(--grijs-licht);
  border-radius: var(--radius);
  padding: 10px 12px;
  width: 100%;
}
.veld:focus-visible { border-color: var(--z1-helderblauw); }
.veld[aria-invalid="true"] { border-color: #b3261e; background: #fdf4f3; }
textarea.veld { resize: vertical; min-height: 120px; }

.honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulier__voet { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-s); }
.formulier__belofte { font-size: var(--tekst-klein); color: var(--grijs-midden); grid-column: 1 / -1; margin: 0; }
.formulier__verzenden { border: 0; }

#formulier-status:empty { display: none; }
.formulier-melding {
  margin-top: var(--ruimte-s);
  padding: var(--ruimte-s);
  border-radius: var(--radius);
  border-left: 4px solid var(--z1-knopblauw);
  background: var(--z1-zand-licht);
}
.formulier-melding h3 { font-size: 1.125rem; color: var(--z1-donkerblauw); margin-bottom: var(--ruimte-xs); }
.formulier-melding p + p { margin-top: var(--ruimte-xs); }
.formulier-melding--fout { border-left-color: #b3261e; background: #fdf4f3; }
.formulier-melding--succes { border-left-color: #2e7d32; background: #f2f9f3; }


/* ==========================================================================
   15b. SUBPAGINA-COMPONENTEN
        (over-z1: team, usp-rij van drie · tarieven: tabellen, catering,
         weetjes, FAQ · beide: CTA-band)
   ========================================================================== */

/* --- usp-rij met drie in plaats van vier items --- */
.usps--drie { grid-template-columns: repeat(3, 1fr); }

/* --- missiecitaat op een donkerblauw vlak --- */
.sectie--blauw .citaat-missie {
  background: rgba(255, 255, 255, 0.10);
  border-left-color: #7ec0e8;
}
.sectie--blauw .citaat-missie p { color: var(--wit); }

/* het citaat als losse kolom naast de tekst (over-z1, missieblok) */
.citaat-missie--groot { margin-top: 0; padding: var(--ruimte-m); }
.citaat-missie--groot p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; }

/* --- teamblok --- */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ruimte-m);
}
.teamlid {
  display: flex;
  gap: var(--ruimte-s);
  align-items: flex-start;
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-m);
}
.teamlid__portret,
.teamlid__initialen {
  width: 96px; height: 96px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.teamlid__portret { object-fit: cover; }
/* de picture-wrapper is het flex-item; zonder deze regel krimpt hij en drukt max-width het ronde portret plat */
.teamlid > picture { flex: 0 0 auto; display: block; }
.teamlid__initialen {
  display: grid;
  place-items: center;
  background: var(--z1-donkerblauw);
  color: var(--wit);
  font-family: var(--font-kop);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.teamlid__naam { font-family: var(--font-kop); font-size: 1.125rem; font-weight: 600; color: var(--z1-donkerblauw); }
.teamlid__rol  { font-size: var(--tekst-klein); font-weight: 600; color: var(--z1-warmbruin); text-transform: uppercase; letter-spacing: 0.06em; }
.teamlid__tekst { font-size: var(--tekst-basis); margin-top: var(--ruimte-xs); }

/* --- tarieventabellen --- */
.tariefblokken {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ruimte-m);
  align-items: start;
}
.tariefblok {
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-top: 4px solid var(--z1-donkerblauw);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-m);
  height: 100%;
  min-width: 0;   /* anders duwt de tabel de grid-kolom breder dan het scherm */
}
.tariefblok--maatschappelijk { border-top-color: var(--z1-warmbruin); }
.tariefblok__titel { font-size: 1.25rem; font-weight: 600; color: var(--z1-donkerblauw); }
.tariefblok--maatschappelijk .tariefblok__titel { color: var(--z1-warmbruin); }
.tariefblok__voor { font-size: var(--tekst-klein); color: var(--grijs-midden); margin-top: 2px; }

/* smalle schermen: de tabel mag horizontaal scrollen binnen zijn eigen kader,
   de pagina zelf nooit */
.tabelomhulsel { overflow-x: auto; margin-top: var(--ruimte-s); min-width: 0; max-width: 100%; }

.tarieftabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tekst-basis);
}
.tarieftabel caption {
  text-align: left;
  font-size: var(--tekst-klein);
  color: var(--grijs-midden);
  padding-bottom: var(--ruimte-xs);
}
.tarieftabel th,
.tarieftabel td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--grijs-lijn);
}
.tarieftabel thead th {
  font-family: var(--font-kop);
  font-size: var(--tekst-klein);
  font-weight: 600;
  color: var(--grijs-midden);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--grijs-lijn);
  white-space: nowrap;
}
.tarieftabel tbody th { font-weight: 500; color: var(--grijs-donker); white-space: nowrap; }
.tarieftabel td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarieftabel th + th,
.tarieftabel td { text-align: right; }
.tarieftabel tbody tr:last-child th,
.tarieftabel tbody tr:last-child td { border-bottom: 0; }
.tariefblok__noot { font-size: var(--tekst-klein); color: var(--grijs-midden); margin-top: auto; padding-top: var(--ruimte-s); }
.tariefblok__noot + .tariefblok__noot { padding-top: var(--ruimte-xs); }

/* --- cateringkaarten --- */
.catering {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-m);
}
.cateringkaart {
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-m);
}
.cateringkaart__titel { font-family: var(--font-kop); font-size: 1.125rem; font-weight: 600; color: var(--z1-donkerblauw); }
.cateringkaart__prijs {
  font-family: var(--font-kop);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--grijs-donker);
  margin-top: var(--ruimte-xs);
}
.cateringkaart__prijs small { display: block; font-size: var(--tekst-klein); font-weight: 500; color: var(--grijs-midden); }
.cateringkaart__lijst {
  list-style: none;
  margin: var(--ruimte-s) 0 0;
  padding: var(--ruimte-s) 0 0;
  border-top: 1px solid var(--grijs-lijn);
  font-size: var(--tekst-klein);
  color: var(--grijs-midden);
}
.cateringkaart__lijst li { display: flex; gap: var(--ruimte-xs); padding: 2px 0; }
.cateringkaart__lijst li::before { content: "•"; color: var(--z1-helderblauw); flex: 0 0 auto; }

/* --- "goed om te weten" --- */
.weetjes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ruimte-m);
  list-style: none;
  margin: 0; padding: 0;
}
.weetje {
  display: flex;
  gap: var(--ruimte-s);
  align-items: flex-start;
}
/* lijniconen (stijlgids §4.5) — bewust stroke i.p.v. fill, zodat een ring
   een ring blijft en niet als gevulde schijf rendert */
.weetje svg {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: none;
  stroke: var(--z1-donkerblauw);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.weetje__titel { font-family: var(--font-kop); font-weight: 600; color: var(--z1-donkerblauw); }
.weetje__tekst { font-size: var(--tekst-klein); color: var(--grijs-midden); margin: 0; }

/* --- FAQ: native <details>, werkt zonder JS --- */
.faq { max-width: var(--breedte-smal); margin-inline: auto; }
.faq__item {
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-s) var(--ruimte-m);
}
.faq__item + .faq__item { margin-top: var(--ruimte-s); }
.faq__vraag {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ruimte-s);
  font-family: var(--font-kop);
  font-size: var(--tekst-lead);
  font-weight: 600;
  color: var(--z1-donkerblauw);
  cursor: pointer;
  list-style: none;
  padding: var(--ruimte-xs) 0;
}
.faq__vraag::-webkit-details-marker { display: none; }
.faq__vraag::after {
  content: "";
  width: 12px; height: 12px;
  flex: 0 0 auto;
  margin-top: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.faq__item[open] .faq__vraag::after { transform: rotate(-135deg); margin-top: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .faq__vraag::after { transition: transform var(--overgang); }
}
.faq__antwoord { padding: var(--ruimte-xs) 0 var(--ruimte-s); border-top: 1px solid var(--grijs-lijn); margin-top: var(--ruimte-xs); }

/* --- afsluitende CTA-band --- */
.ctaband {
  background: var(--z1-donkerblauw);
  color: var(--wit);
  padding: var(--ruimte-l) 0;
}
.ctaband__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-m);
}
.ctaband__tekst { max-width: 620px; }
.ctaband .titel { color: var(--wit); }
.ctaband p { color: rgba(255, 255, 255, 0.92); margin-top: var(--ruimte-xs); }
.ctaband__acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); }
.ctaband .knop--primair { background: var(--wit); border-color: var(--wit); color: var(--z1-donkerblauw); }
.ctaband .knop--primair:hover { background: #e7f0fa; border-color: #e7f0fa; color: var(--z1-donkerblauw); }


/* ==========================================================================
   15c. ZAALBLOKKEN (/zalen/)
        Per zaal één blok: foto('s) links of rechts, tekst ernaast. De foto's
        zitten in de generieke carrousel uit site.js ([data-carrousel]); die
        werkt met willekeurige dia-inhoud, dus hier met <picture> in plaats
        van citaten. Autoplay staat op deze pagina uit (data-autoplay="uit"):
        vier tegelijk bewegende blokken maakt de pagina onrustig.
   ========================================================================== */

.zaal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ruimte-l);
  align-items: center;
}
/* even zalen: foto rechts. Op smalle schermen valt dit weg (zie 17). */
.zaal--gespiegeld .zaal__beeld { order: 2; }

.zaal__beeld { margin: 0; min-width: 0; }
.zaal__beeld .carrousel {
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  background: var(--grijs-lijn);
}
/* de dia's van de citatencarrousel houden ruimte vrij voor de pijlen;
   bij een fotocarrousel staan de pijlen ín de foto */
.zaal__beeld .carrousel__dia { padding-inline: 0; }
.zaal__beeld .carrousel__knop--vorige   { left: 12px; }
.zaal__beeld .carrousel__knop--volgende { right: 12px; }
.zaal__beeld .carrousel__punten { margin-top: var(--ruimte-s); }

/* alle zaalfoto's op dezelfde verhouding, anders springt de hoogte per dia */
.zaal__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.zaal__bijschrift {
  font-size: var(--tekst-klein);
  color: var(--grijs-midden);
  margin-top: var(--ruimte-xs);
}

.zaal__lijf { min-width: 0; }
.zaal__lijf .tekst { margin-top: var(--ruimte-s); }

.zaal__geschikt {
  margin-top: var(--ruimte-m);
  padding: var(--ruimte-xs) var(--ruimte-s);
  background: var(--z1-zand-licht);
  border-left: 4px solid var(--z1-warmbruin);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--tekst-klein);
  color: var(--grijs-donker);
}
.zaal__geschikt b {
  display: block;
  font-family: var(--font-kop);
  color: var(--z1-warmbruin);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.zaal__faciliteiten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ruimte-xs) var(--ruimte-s);
  list-style: none;
  margin: var(--ruimte-s) 0 0;
  padding: 0;
  font-size: var(--tekst-klein);
  color: var(--grijs-donker);
}
.zaal__faciliteiten li { display: flex; align-items: flex-start; gap: var(--ruimte-xs); }
.zaal__faciliteiten svg {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  fill: var(--z1-knopblauw);
}

/* --- keuzehulp "welke zaal past bij jou?" --- */
.keuzehulp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-m);
  list-style: none;
  margin: 0; padding: 0;
}
.keuzekaart {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-top: 4px solid var(--z1-donkerblauw);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-m);
}
.keuzekaart__vraag { font-family: var(--font-kop); font-size: 1.125rem; font-weight: 600; color: var(--z1-donkerblauw); }
.keuzekaart__lijst {
  list-style: none;
  margin: var(--ruimte-xs) 0 0;
  padding: 0;
  font-size: var(--tekst-klein);
  color: var(--grijs-midden);
}
.keuzekaart__lijst li { padding: 4px 0; }
.keuzekaart__lijst li + li { border-top: 1px solid var(--grijs-lijn); }
.keuzekaart__lijst strong { color: var(--grijs-donker); }
.keuzekaart__lijst a { text-decoration: none; font-weight: 600; }
.keuzekaart__lijst a:hover { text-decoration: underline; }


/* ==========================================================================
   15d. DIENSTENBLOKKEN (/aanvullende-diensten/)
        Vier kaarten in 2 x 2: icoon + kop + tekst + afvinklijst. Dezelfde
        kaartvorm als .tariefblok en .keuzekaart, zodat de subpagina's één
        familie blijven. De prijsstrip eronder toont alléén de bedragen; de
        inhoud van de arrangementen staat op /tarieven/ en wordt hier bewust
        niet herhaald.
   ========================================================================== */

.diensten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ruimte-m);
  list-style: none;
  margin: 0; padding: 0;
}
.dienst {
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-top: 4px solid var(--z1-donkerblauw);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-m);
  min-width: 0;
}
.dienst__kop { display: flex; align-items: center; gap: var(--ruimte-s); }
/* lijnicoon, net als bij .weetje: stroke i.p.v. fill */
.dienst__icoon {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--z1-donkerblauw);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dienst__titel { font-family: var(--font-kop); font-size: 1.125rem; font-weight: 600; color: var(--z1-donkerblauw); }
.dienst .tekst { margin-top: var(--ruimte-s); }

.dienst__lijst {
  display: grid;
  gap: var(--ruimte-xs);
  list-style: none;
  margin: var(--ruimte-s) 0 0;
  padding: var(--ruimte-s) 0 0;
  border-top: 1px solid var(--grijs-lijn);
  font-size: var(--tekst-klein);
  color: var(--grijs-donker);
}
.dienst__lijst li { display: flex; align-items: flex-start; gap: var(--ruimte-xs); }
.dienst__lijst svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; fill: var(--z1-knopblauw); }
.dienst__noot { font-size: var(--tekst-klein); color: var(--grijs-midden); margin-top: auto; padding-top: var(--ruimte-s); }

/* --- prijsstrip: alleen de bedragen, met een link naar de volledige
       arrangementen op /tarieven/ --- */
.arrangementen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ruimte-m) var(--ruimte-l);
  list-style: none;
  margin: 0; padding: 0;
  text-align: center;
}
.arrangement__prijs {
  font-family: var(--font-kop);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--z1-donkerblauw);
}
.arrangement__naam { font-size: var(--tekst-klein); color: var(--grijs-midden); }

/* drie weetjes naast elkaar (op /tarieven/ staan er zes in twee kolommen) */
.weetjes--drie { grid-template-columns: repeat(3, 1fr); }


/* ==========================================================================
   15e. TEKSTPAGINA (/privacyverklaring/)
        Eén rustige leeskolom van ongeveer 70 tekens, met een dunne lijn
        tussen de hoofdstukken. Geen kaarten, geen kleurvlakken: het is een
        juridische tekst die van boven naar beneden gelezen wordt.
   ========================================================================== */

/* compacte kop zonder foto: het enige subherotype waar geen beeld bij hoort */
.subhero--effen { min-height: 220px; background: var(--z1-donkerblauw); }
.subhero--effen .titel-hero,
.subhero--effen .subhero__intro,
.subhero--effen .kruimelpad { text-shadow: none; }

.tekstpagina { max-width: 68ch; margin-inline: auto; }
.tekstpagina > section + section {
  margin-top: var(--ruimte-m);
  padding-top: var(--ruimte-m);
  border-top: 1px solid var(--grijs-lijn);
}
.tekstpagina .titel { font-size: 1.25rem; }   /* rustiger dan elders: 10 koppen onder elkaar */
.tekstpagina .tekst { margin-top: var(--ruimte-s); }
.tekstpagina .tekst ul { padding-left: 1.25em; }
.tekstpagina__voet { margin-top: var(--ruimte-m); }


/* ==========================================================================
   15f. PRIJSBAND (/evenementen/, /vergaderen/, /ontmoeten/)
        Eén rustige band met een korte prijszin en een link naar /tarieven/.
        De doelgroeppagina's herhalen de staffels bewust NIET: /tarieven/ is
        en blijft de bron (zie BOUW-NOTITIES.md §12 punt 7). Daarom geen
        tabel en geen kaarten, maar één gecentreerde leesregel.
   ========================================================================== */

.prijsband { max-width: var(--breedte-smal); margin-inline: auto; text-align: center; }
.prijsband .tekst { margin-top: var(--ruimte-xs); }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer { background: var(--z1-donkerblauw); color: var(--wit); }
.site-footer a { color: var(--wit); }

.site-footer__kolommen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-l);
  padding: var(--ruimte-l) 0;
}
.site-footer__titel {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--ruimte-s);
}
.site-footer__lijst { list-style: none; margin: 0; padding: 0; }
.site-footer__lijst li { padding: 4px 0; }
.site-footer__lijst a { text-decoration: none; color: rgba(255, 255, 255, 0.9); }
.site-footer__lijst a:hover { color: var(--wit); text-decoration: underline; }
.site-footer__lijst svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; margin-top: 3px; }
.site-footer__lijst--contact li { display: flex; gap: var(--ruimte-s); align-items: flex-start; }
.site-footer p { color: rgba(255, 255, 255, 0.9); }

.site-footer__missie {
  display: flex;
  align-items: center;
  gap: var(--ruimte-s);
  padding: var(--ruimte-m) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--tekst-klein);
}
.site-footer__missie img { width: 56px; height: 56px; flex: 0 0 auto; }
/* de anker is het flex-item; zonder deze regel krimpt hij op mobiel en drukt max-width het ronde logo tot een ovaal */
.site-footer__missie > a { flex: 0 0 auto; }

.site-footer__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-s);
  padding: var(--ruimte-s) 0 var(--ruimte-m);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--tekst-klein);
}
.site-footer__balk nav { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); }
.site-footer__balk a { color: rgba(255, 255, 255, 0.9); }
.site-footer__sociaal { display: inline-flex; align-items: center; gap: var(--ruimte-xs); text-decoration: none; }
.site-footer__sociaal svg { width: 22px; height: 22px; fill: currentColor; }


/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  :root { --ruimte-xl: 4.5rem; --ruimte-l: 3rem; }

  .site-header__binnen { gap: var(--ruimte-s); }
  .hoofdmenu { gap: var(--ruimte-s); }
  .hoofdmenu__link { font-size: var(--tekst-klein); }
  /* CTA past er niet meer netjes bij; hij staat prominent in de hero.
     De pill krijgt daardoor rondom dezelfde padding. */
  .site-header__cta { display: none; }
  .site-header__rechts { padding: 8px 18px; }

  .tegels { grid-template-columns: 1fr; }
  .usps   { grid-template-columns: repeat(2, 1fr); }

  .beeldtekst { grid-template-columns: 1fr; gap: var(--ruimte-m); }
  .beeldtekst__beeld { order: -1; }

  .contact { grid-template-columns: 1fr; gap: var(--ruimte-m); }

  .tariefblokken { grid-template-columns: 1fr; }
  .weetjes,
  .weetjes--drie { grid-template-columns: 1fr; }
  .diensten { grid-template-columns: 1fr; }

  /* zaalblokken: foto altijd boven de tekst, ook in het gespiegelde blok */
  .zaal { grid-template-columns: 1fr; gap: var(--ruimte-m); }
  .zaal__beeld,
  .zaal--gespiegeld .zaal__beeld { order: -1; }
  .keuzehulp { grid-template-columns: 1fr; }

  .site-footer__kolommen { grid-template-columns: 1fr 1fr; gap: var(--ruimte-m); }

  .carrousel__knop--vorige   { left: 0; }
  .carrousel__knop--volgende { right: 0; }
}

/* ---------- mobiel ---------- */
@media (max-width: 767px) {
  :root { --ruimte-xl: 3.5rem; --ruimte-l: 2.5rem; --ruimte-m: 1.5rem; }

  .omhulsel { padding-inline: var(--ruimte-s); }

  /* --- header op mobiel: logo-plateau links, twee ronde crème knoppen rechts.
         Na scrollen landen ze op dezelfde crème balk als op desktop. --- */
  .site-header__binnen { padding: 10px var(--ruimte-s); position: relative; }
  .site-header__logo { padding: 6px 10px; }
  .site-header__logo img { height: 34px; }

  .site-header__rechts {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    gap: var(--ruimte-xs);
  }
  .taalwissel,
  .menu-knop {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(253, 252, 248, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px -10px rgba(0, 25, 55, 0.5);
  }
  .site-header.is-vast .taalwissel,
  .site-header.is-vast .menu-knop,
  .site-header.is-menu-open .taalwissel,
  .site-header.is-menu-open .menu-knop {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hoofdmenu {
    display: none;
    position: absolute;
    left: var(--ruimte-s); right: var(--ruimte-s); top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* bewust volledig dekkend: de foto eronder is wit-op-donker en schemert
       zelfs bij 98% nog hinderlijk door */
    background: var(--z1-creme);
    border-radius: 12px;
    box-shadow: 0 14px 30px -14px rgba(0, 25, 55, 0.55);
    padding: var(--ruimte-xs) var(--ruimte-s) var(--ruimte-s);
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
  .hoofdmenu.is-open { display: flex; }
  .hoofdmenu li { border-bottom: 1px solid var(--grijs-lijn); }
  .hoofdmenu li:last-child { border-bottom: 0; }
  .hoofdmenu__link {
    display: block;
    font-size: var(--tekst-basis);
    padding: 12px 0;
    border-bottom: 0;
  }
  .hoofdmenu__link--actief { border-bottom: 0; }
  .hoofdmenu__cta { display: block; border-bottom: 0; margin-top: var(--ruimte-s); }
  .hoofdmenu__cta .knop { display: flex; justify-content: center; width: 100%; }

  .hero { min-height: 460px; }
  .hero__waas {
    background:
      linear-gradient(180deg, rgba(0, 64, 133, 0.86) 0%, rgba(0, 64, 133, 0.94) 100%),
      linear-gradient(0deg, rgba(0, 22, 46, 0.35) 0%, rgba(0, 22, 46, 0) 60%);
  }
  .hero__acties .knop { flex: 1 1 100%; justify-content: center; }

  .usps { grid-template-columns: 1fr; gap: var(--ruimte-s); }
  .usp { flex-direction: row; align-items: flex-start; gap: var(--ruimte-s); }
  .usp__icoon { width: 32px; height: 32px; }

  .tarieven { grid-template-columns: 1fr; }
  .formulier { grid-template-columns: 1fr; }
  .veldgroep--half { grid-column: 1 / -1; }

  .subhero { min-height: 300px; }
  .subhero--effen { min-height: 200px; }   /* zonder foto hoeft de kop niet hoog */
  .subhero__binnen { padding-block: calc(var(--ruimte-l) + 40px) var(--ruimte-m); }
  .subhero__waas {
    background:
      linear-gradient(180deg,
        rgba(0, 22, 46, 0.68)   0%,
        rgba(0, 40, 85, 0.62)  32%,
        rgba(0, 64, 133, 0.92) 100%);
  }

  /* de staffel moet op 390 px hélemaal passen, zonder zijwaarts scrollen:
     smallere padding en koppen die mogen afbreken */
  .tariefblok { padding: var(--ruimte-s); }
  .tarieftabel { font-size: var(--tekst-klein); }
  .tarieftabel th,
  .tarieftabel td { padding: 10px 6px; }
  .tarieftabel thead th { white-space: normal; }

  /* drie prijzen naast elkaar past niet op 390 px zonder de labels af te
     breken; onder elkaar leest rustiger dan 2 + 1 */
  .arrangementen { flex-direction: column; gap: var(--ruimte-s); }

  .team { grid-template-columns: 1fr; }
  .teamlid { flex-direction: column; }
  .zaal__faciliteiten { grid-template-columns: 1fr; }
  .catering { grid-template-columns: 1fr; }
  .ctaband__binnen { flex-direction: column; align-items: flex-start; }
  .ctaband__acties .knop { flex: 1 1 100%; justify-content: center; }

  /* pijlen blijven staan, maar kleiner en met ruimte naast de tekst */
  .carrousel__knop { width: 36px; height: 36px; }
  .carrousel__knop--vorige   { left: 0; }
  .carrousel__knop--volgende { right: 0; }
  .carrousel__dia { padding-inline: 44px; }
  .stem__teken { font-size: 2.25rem; }

  .site-footer__kolommen { grid-template-columns: 1fr; gap: var(--ruimte-m); }
  .site-footer__balk { flex-direction: column; align-items: flex-start; }
}