/* ============================================================================
   MORRAPARK v2 — SHARED CHROME
   Reset, layout primitives, header, nav, buttons, footer. Tokens uit theme.css.
   Bevat de critique-fixes: body 400 (geen 300 light body meer), leesbare leads,
   één ingehouden kicker-cadans i.p.v. eyebrow-boven-elke-sectie.
   Variant-specifieke opmaak staat in variant-a/b/c.css.
   ============================================================================ */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Decoratieve animaties uit; niet-bewegende feedback (kleur/rand/schaduw)
     op transitions blijft bestaan. We doden hier dus niet blind ELKE transition. */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Alleen de verplaatsing (translate) uitzetten; hover-kleur blijft leesbaar. */
  .btn:hover, .btn:active,
  .room-item:hover, .room-card:hover, .info-links a:hover { transform: none !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);           /* was 300 — nu 400 voor leesbaarheid */
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }
a { color: var(--site-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Accent dat meeschakelt met de modus: diepgroen overdag, champagne 's nachts. */
:root, [data-theme="day"] { --site-accent: var(--brand); --ink-lead: #3c4a43; }
[data-theme="night"]      { --site-accent: var(--accent); --ink-lead: #b9c7bd; }

/* Semantische z-index-schaal */
:root {
  --z-header: 100;
  --z-nav: 90;
  --z-skip: 200;
  --z-consent: 150;
}

.container { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: 84rem; }
/* Voor lopende tekst en de FAQ: 76rem geeft regels van ~120 tekens, te breed
   om comfortabel te lezen. */
.container--narrow { max-width: 58rem; }

/* Focus */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: .18rem solid var(--site-accent);
  outline-offset: .18rem;
  border-radius: .2rem;
}

/* Skip-link */
.skip {
  position: absolute; left: -999px; top: 0; z-index: var(--z-skip);
  background: var(--brand); color: var(--color-on-primary);
  padding: .7rem 1.1rem; border-radius: 0 0 .4rem 0;
}
.skip:focus { left: 0; text-decoration: none; }

/* Alleen voor screenreaders. Gebruikt om een knop met korte zichtbare
   tekst ("Nieuw tabblad") toch een unieke toegankelijke naam te geven
   als hij twaalf keer op een pagina staat. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   TYPOGRAFIE
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--ink); margin: 0; }
h1, h2, h3 { line-height: 1.06; letter-spacing: -.018em; text-wrap: balance; }
h1 { font-weight: var(--weight-light); font-size: var(--text-3xl); }
h1 strong { font-weight: var(--weight-semibold); color: var(--site-accent); }
h2 { font-weight: var(--weight-light); font-size: var(--text-2xl); }
h3 { font-weight: var(--weight-medium); font-size: var(--text-xl); letter-spacing: -.01em; }
p { text-wrap: pretty; }

.lead {
  font-size: var(--text-lg);
  line-height: 1.55; color: var(--ink-lead);
  font-weight: var(--weight-regular);
}

/* Eén ingehouden kicker — bewust, niet boven elke sectie. */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  color: var(--site-accent); letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 1rem;
}
.kicker::before {
  content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: .6;
}

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-base);
  padding: .85rem 1.5rem; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: transform .16s cubic-bezier(.22,1,.36,1),
    background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 .4rem 1rem rgba(13,46,34,.16); }
.btn--primary:hover { background: #14412f; box-shadow: 0 .7rem 1.5rem rgba(13,46,34,.22); }
[data-theme="night"] .btn--primary { background: var(--accent); color: #14231c; box-shadow: none; }
[data-theme="night"] .btn--primary:hover { background: #e4d0a8; }
.btn--accent { background: var(--accent); color: #16241d; }
.btn--accent:hover { background: #d8c19b; }
.btn--ghost { background: transparent; color: var(--site-accent); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--site-accent); }
/* 40% gaf #9BA7A0 op --canvas = 2,34:1 en dat haalt de 3:1 van WCAG 1.4.11
   voor de rand van een bedieningselement niet. 55% zit op 3,2:1. */
.btn--onlight { background: transparent; color: var(--site-accent); border-color: color-mix(in srgb, var(--site-accent) 55%, transparent); }
.btn--onlight:hover { border-color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 6%, transparent); }
.nav .login-pill { border-color: transparent; box-shadow: none; padding-inline: .5rem; }

/* Accountmenu rechtsboven (Mijn profiel / Instellingen / Uitloggen).
   Zwevend paneel onder de knop, zelfde stijl als AQQO's eigen menu. */
.nav__account { position: relative; display: flex; align-items: center; }
.acct__trigger { gap: .45rem; }
.acct__trigger .nav__chev { margin-left: .1rem; }
.acct__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: var(--z-nav);
  min-width: 12.5rem; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.acct__menu[hidden] { display: none; }
/* Uitloggen alleen als site-v2.js heeft gemeten dat iemand bij AQQO is ingelogd. */
html:not([data-login="ja"]) [data-account-view="uitloggen"] { display: none; }
.acct__menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .75rem; border-radius: calc(var(--radius) - .15rem);
  color: var(--ink); font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
}
.acct__menu a:hover, .acct__menu a:focus-visible { background: var(--canvas); color: var(--brand); text-decoration: none; }
.acct__menu svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; }
.acct__menu a + a:last-child { border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--radius) - .15rem) calc(var(--radius) - .15rem); margin-top: .3rem; padding-top: .8rem; }
.btn--ondark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ondark:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* Login-entree in de header (alleen op verhuur/reserveren-pagina's).
   Gebruikt .btn.btn--onlight; icoon erft de champagne/groen accentkleur. */
.ico-user { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; flex: none; }
/* Geen eigen padding: naast "Reserveer direct" viel de inlogknop 8px lager
   uit, en twee knoppen op één rij horen even hoog te zijn. Beide gebruiken nu
   de padding van .btn. */
.btn--lg { padding: 1rem 1.8rem; font-size: var(--text-base); }
@media (max-width: 560px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .cta-band__actions { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   HEADER + NAV
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Direct kind: het mega-menu heeft binnenin een eigen .container die géén
   flexrij mag worden. */
.site-header > .container { display: flex; align-items: center; gap: 1.25rem; min-height: 4.75rem; }
/* flex: none op beide niveaus. Het logo is het enige item in deze rij met een
   auto-breedte, dus zonder dit is het ook het enige dat inkrimpt zodra de nav
   niet meer past — en dan wordt het horizontaal platgedrukt in plaats van
   meegeschaald (de hoogte staat immers vast). Nu geeft de nav mee en gaat de
   header onder --bp-nav over op het hamburgermenu. */
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; flex: none; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 1.9rem; width: auto; flex: none; display: block; object-fit: contain; }
.brand__logo--night { display: none; }
[data-theme="night"] .site-header .brand__logo--day { display: none; }
[data-theme="night"] .site-header .brand__logo--night { display: block; }

.nav { display: flex; align-items: center; gap: 1.15rem; }
.nav > a:not(.btn) {
  color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-regular);
  padding: .4rem 0; position: relative; white-space: nowrap;
}
.nav > a:not(.btn):hover { color: var(--brand); text-decoration: none; }
.nav > a[aria-current="page"] { color: var(--site-accent); font-weight: var(--weight-medium); }
.nav > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem;
  height: 2px; background: var(--site-accent);
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); cursor: pointer; padding: 0; transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--brand); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; }

.nav-toggle { display: none; background: transparent; border: 0; cursor: pointer;
  width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; }
.nav-toggle svg { width: 1.6rem; height: 1.6rem; stroke: var(--brand); }

/* ---------------------------------------------------------------------------
   MEGA-MENU (Ruimtes)
   De header staat sinds scripts/build_header.py als statieke HTML in de pagina.
   De :empty-regel die hier stond hield de hoogte vast tot JavaScript de nav
   binnenbracht; die situatie bestaat niet meer, dus hij is weg.
   --------------------------------------------------------------------------- */

/* Statisch, zodat het paneel zich absoluut kan positioneren t.o.v. de sticky
   header en niet t.o.v. de knop — het paneel loopt over de volle breedte. */
.nav__group { position: static; display: flex; align-items: center; }

.nav__trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: 0; padding: .4rem 0; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-regular);
  color: var(--ink); position: relative;
}
.nav__trigger:hover { color: var(--brand); }
.nav__chev { width: .95rem; height: .95rem; stroke: currentColor; fill: none; transition: transform .2s; }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__trigger.is-current { color: var(--site-accent); font-weight: var(--weight-medium); }
.nav__trigger.is-current::after {
  content: ""; position: absolute; left: 0; right: 1.3rem; bottom: -.15rem;
  height: 2px; background: var(--site-accent);
}

.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.megamenu .container { padding-top: 1.5rem; padding-bottom: 1.25rem; }

.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mm-card {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--canvas); overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.mm-card:hover { border-color: var(--site-accent); text-decoration: none; transform: translateY(-2px); }
.mm-card--wide { grid-column: 1 / -1; }

/* Vaste hoogte op het mediavlak: zonder dat valt de foto terug op zijn eigen
   verhouding (800×700) en wordt de kaart drie keer zo hoog als bedoeld. */
.mm-card__media { width: 9rem; height: 6.5rem; flex: none; background: var(--line); }
.mm-card--wide .mm-card__media { width: 21rem; height: 9rem; }
.mm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mm-card__body { display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: 1rem 1.25rem; margin-right: auto; }
.mm-card__title { font-family: var(--font-display, inherit); font-size: var(--text-lg); line-height: 1.2; color: var(--ink); }
.mm-card__cap { font-size: var(--text-sm); color: var(--ink-lead); }
.mm-card__arrow { display: flex; align-items: center; padding-right: 1.25rem; }
.mm-card__arrow svg { width: 1.35rem; height: 1.35rem; stroke: var(--site-accent); fill: none; }

.mm-foot {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--ink-lead);
}
.mm-foot__icon svg { width: 1.35rem; height: 1.35rem; stroke: var(--site-accent); fill: none; display: block; }
.mm-foot a { font-weight: var(--weight-medium); color: var(--site-accent); }

/* ---------------------------------------------------------------------------
   USP-STRIP (vier gelijke troeven)
   Champagne-crème band, gebruikt op de home én op de ruimtepagina's. Stond
   eerst in home.css; hier omdat inmiddels zes pagina's hem laden.

   De strip draagt de warmte, niet de troeven zelf: die staan als open kolommen
   op de band, met een champagne haarlijn als kop. Een doos per troef zou hier
   een container beloven waar niets in te klikken valt.

   De 18% is gemeten, niet gekozen: de band moet duidelijk van --canvas
   verschillen, want anders wordt de .band-green erboven een losse streep in
   plaats van een naad (zie subpage.css, "GROENE BALK"). Wit gaf 1.061
   luminantiecontrast met --canvas, 18% champagne geeft 1.059 — even veel
   scheiding, maar warm. Lichter mengen loopt mis: 7% zit op 1.016 en dan valt
   de naad wél weg. --site-accent kan hier sowieso niet: dat is overdag groen
   (zie regel 43) en levert koel groengrijs op.
   --------------------------------------------------------------------------- */
.usps-wrap {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.usps-wrap .container { padding-top: clamp(2.8rem,5vw,4rem); padding-bottom: clamp(2.8rem,5vw,4rem); }
/* Zonder kaders moet de witruimte het kolomonderscheid maken, vandaar de
   ruimere gap dan bij de vorige kaartversie. */
.usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.usp {
  display: flex; flex-direction: column;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
/* Ronde tegel: zachter dan een vierkant met .7rem radius, dat als tech-chip
   las. Champagne draagt de warmte, het groene icoon blijft de leesbare vorm. */
.usp__icon {
  width: 3rem; height: 3rem; border-radius: var(--radius-pill); margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 50%, var(--surface));
}
.usp__icon svg { width: 1.5rem; height: 1.5rem; stroke: var(--site-accent); fill: none; }
/* 's Nachts is --canvas (#0a1310) juist dónkerder dan --surface (#142019), dus
   de dagformule zou de band de verkeerde kant op duwen. Zelfde aanpak als
   [data-theme="night"] .btn--primary hierboven. */
[data-theme="night"] .usps-wrap {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-theme="night"] .usp { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
[data-theme="night"] .usp__icon { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.usp h3 { margin-bottom: .4rem; }
.usp p { margin: 0; color: var(--ink-lead); font-size: var(--text-sm); }
/* Een link in een USP (het telefoonnummer op contact.html) erft anders de
   standaard --brand: donkergroen op een donkergroene band leest 's nachts als
   niets. --site-accent wisselt mee: groen overdag, champagne 's nachts. */
.usp p a:not(.btn) { color: var(--site-accent); font-weight: var(--weight-medium); }
/* Open kolommen hebben meer lucht nodig dan kaarten: daar deed de rand het
   scheiden, hier de witruimte. */
@media (max-width: 900px) { .usps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.8rem; } }
@media (max-width: 520px) { .usps { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------------------------------------------------------------------------
   FOTO-SLOT (placeholder — vervang later door echte foto)
   --------------------------------------------------------------------------- */
.photo {
  position: relative; overflow: hidden; height: 100%; min-height: 100%;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(203,177,142,.28), transparent 55%),
    linear-gradient(155deg, #14402f 0%, #0c2a1f 55%, #081d15 100%);
  color: #d8c39c;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; text-align: center;
}
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(60deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px);
  mix-blend-mode: overlay;
}
.photo svg { width: 2.2rem; height: 2.2rem; stroke: currentColor; opacity: .7; }
.photo span { font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; opacity: .82; position: relative; }

/* Echte kamerfoto (vervangt placeholder wanneer een foto beschikbaar is).
   Radius/clipping komt van de container (.room-item, .room-card,
   .split__media, .hero-home__media, .green-home__media). */
.room-photo {
  display: block; width: 100%; height: 100%; min-height: 100%;
  object-fit: cover; object-position: center;
}

/* Rouleer-carousel (crossfade) voor kamerkaarten op de homepage.
   Alle foto's liggen op elkaar; de actieve heeft opacity 1. */
.room-carousel { position: relative; }
.room-carousel .room-photo {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s ease;
}
.room-carousel .room-photo.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .room-carousel .room-photo { transition: none; }
}

/* ---------------------------------------------------------------------------
   FOOTER (gedeeld)
   --------------------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: 3.5rem 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer h3 { color: var(--footer-strong); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1.1rem; font-weight: var(--weight-medium); }
.site-footer a:not(.btn) { color: var(--footer-ink); }
.site-footer a:hover { color: var(--footer-strong); }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: var(--text-sm); }
/* Raakvlak i.p.v. kale regel: 21px hoog haalde de 24px-ondergrens van WCAG
   2.5.8 alleen via de afstands-uitzondering. Met .3rem lucht boven en onder is
   het vlak ~32px en blijft de kolom even hoog, want de gap krimpt mee. */
.footer-links a, .footer-contact a { display: inline-block; padding: .3rem 0; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact svg { width: 1.05rem; height: 1.05rem; stroke: var(--accent); flex: none; margin-top: .2rem; }
.footer-hours { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: var(--text-sm); }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; color: var(--footer-ink); }
.footer-hours li span:last-child { color: var(--footer-ink-2); }
.footer-brand p { margin: 1rem 0 0; font-size: var(--text-sm); max-width: 22rem; color: var(--footer-ink-soft); }
.socials { display: flex; gap: .7rem; margin-top: 1.2rem; }
.socials a { width: 2.75rem; height: 2.75rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; background: var(--footer-tile); transition: background .2s; }
.socials svg { width: 1.15rem; height: 1.15rem; stroke: var(--footer-ink); }
.socials a:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.footer-bottom { margin-top: 3rem; border-top: 1px solid var(--footer-line); padding: 1.4rem 0; font-size: var(--text-sm); color: var(--footer-ink-2); }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Een gemaakte keuze moet terug te draaien zijn, anders is het geen keuze.
   Knop en geen link, want hij navigeert niet -- hij wist de opgeslagen keuze. */
.footer-consent {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--footer-ink); text-decoration: underline;
}
.footer-consent:hover { color: var(--footer-strong); }

/* ---------------------------------------------------------------------------
   GEDEELDE COMPONENTEN (home + subpagina's)
   --------------------------------------------------------------------------- */

/* Naam-badge / spec-tag */
.tag {
  font-size: var(--text-2xs); color: var(--ink-lead); background: var(--canvas);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .3rem .8rem;
}

/* Feiten-lijst met vinkjes */
.facts { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .85rem; }
/* min-width:0 omdat .facts een grid is: zonder dat staan de <li>'s op
   min-width:auto en krimpen ze niet onder hun langste woord. Eén lang
   Nederlands samengesteld woord in een smalle kolom duwde de pagina op
   360px dan 18px buiten beeld. */
.facts li { display: flex; gap: .75rem; align-items: flex-start; color: var(--ink);
  min-width: 0; overflow-wrap: break-word; }
.facts svg { width: 1.3rem; height: 1.3rem; stroke: var(--site-accent); flex: none; margin-top: .15rem; }

/* Review-kaart */
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.review__quote { font-size: var(--text-lg); line-height: 1.6; color: var(--ink); margin: 0 0 1.4rem; }
.review__quote::before { content: "\201C"; color: var(--accent); font-size: 2.6rem; line-height: 0; vertical-align: -.45em; margin-right: .15rem; }
.review__by { margin-top: auto; font-size: var(--text-sm); color: var(--ink-lead); }
.review__by strong { color: var(--ink); font-weight: var(--weight-medium); display: block; }

/* CTA-band (groen) */
.cta-band { background: var(--brand); color: #fff; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-top: clamp(2.6rem,5vw,4rem); padding-bottom: clamp(2.6rem,5vw,4rem); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfe0d5; margin: .6rem 0 0; max-width: 34rem; }
.cta-band__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.cta-band .btn--primary { background: var(--accent); color: #16241d; box-shadow: none; }
.cta-band .btn--primary:hover { background: #d8c19b; }

/* ---------------------------------------------------------------------------
   TOESTEMMING (cookiebalk, categorieen, geblokkeerde embeds)

   Vorm: een vol-breedte band onderaan in de accentkleur, met de keuzes meteen
   zichtbaar en de knoppen als pillen naast elkaar in een kolom rechts. Geen
   kaartje met een schaduw: dit is een onderbreking, en die mag er als een
   onderbreking uitzien. Weinig tekst -- twee regels en door naar het
   privacybeleid, want daar hoort de uitleg en niet in een blok waar niemand
   doorheen komt op het moment dat hij iets anders kwam doen.

   Kleur draait mee met de modus: overdag champagne met diepgroene tekst,
   's nachts diepgroen met champagne. In beide standen is de band het luidste
   vlak op het scherm t.o.v. zijn eigen canvas -- dezelfde logica als
   --site-accent elders.

   De vormgeving doet hier mee aan de naleving. "Weigeren moet even makkelijk
   zijn als accepteren" is vooral een opmaakregel: daarom zijn "Alles
   accepteren" en "Alleen noodzakelijk" exact dezelfde knop in dezelfde maat.
   Wie er ooit een van tweeen wil laten opvallen verandert de juridische
   houdbaarheid, niet alleen het uiterlijk.
   --------------------------------------------------------------------------- */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-consent);
  background: var(--accent); color: #16241d;
  box-shadow: 0 -.75rem 2rem rgba(13,46,34,.22);
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  --consent-ink: #16241d;
  --consent-fill: var(--brand);
  --consent-fill-ink: #fff;
}
[data-theme="night"] .consent-bar {
  background: var(--brand); color: #eaf3ec;
  --consent-ink: #eaf3ec;
  --consent-fill: var(--accent);
  --consent-fill-ink: #14231c;
}
.consent-bar[hidden] { display: none; }

.consent-bar form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem;
  align-items: start;
  padding-top: 1rem; padding-bottom: 1rem;
}
.consent-bar__body { min-width: 0; max-width: 42rem; }
.consent-bar__title {
  margin: 0 0 .5rem; color: var(--consent-ink);
  font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1.25;
}
.consent-bar p { margin: 0; font-size: var(--text-sm); color: var(--consent-ink); opacity: .85; }
.consent-bar a { color: var(--consent-ink); text-decoration: underline; font-weight: var(--weight-medium); }
.consent-bar a:hover { opacity: .7; }

/* Twee kolommen keuzes, zoals de rest van de band: vier korte labels lezen
   sneller naast elkaar dan als lijst van vier regels. */
.consent-cats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 14rem));
  gap: .2rem 1.5rem; margin: 1.1rem 0 1rem;
}
.consent-cat {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem 0; cursor: pointer;
  font-size: var(--text-sm); color: var(--consent-ink);
  /* position:relative hoort hier: het verborgen vakje eronder staat absoluut,
     en zonder anker zou het zich richten op .consent-bar (position:fixed) en
     dus linksboven in de balk belanden, over andere bediening heen. */
  position: relative;
}
.consent-cat:has(input:disabled) { cursor: default; }
/* Eigen rondje i.p.v. het systeemvinkje: de band heeft een eigen kleurwereld en
   een blauw OS-vinkje valt daar buiten. De input blijft een echte checkbox --
   alleen onzichtbaar -- zodat toetsenbord en screenreader gewoon werken. */
.consent-cat input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.consent-cat__box {
  width: 1.15rem; height: 1.15rem; flex: none; border-radius: var(--radius-pill);
  border: 2px solid var(--consent-ink); position: relative;
  transition: background-color .15s;
}
.consent-cat__box::after {
  content: ""; position: absolute; inset: .2rem; border-radius: var(--radius-pill);
  background: var(--consent-ink); transform: scale(0); transition: transform .15s;
}
.consent-cat input:checked + .consent-cat__box::after { transform: scale(1); }
.consent-cat input:disabled + .consent-cat__box { opacity: .55; }
.consent-cat input:focus-visible + .consent-cat__box {
  outline: .18rem solid var(--consent-ink); outline-offset: .2rem;
}
@media (prefers-reduced-motion: reduce) {
  .consent-cat__box, .consent-cat__box::after { transition: none; }
}

.consent-bar__links { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: var(--text-2xs); }

/* Pillen onder elkaar, allemaal even breed. */
.consent-bar__actions {
  display: flex; flex-direction: column; gap: .6rem; align-items: stretch;
}
.consent-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15rem; min-height: 3rem; padding: .85rem 1.6rem;
  border-radius: var(--radius-pill); border: 2px solid var(--consent-fill);
  background: var(--consent-fill); color: var(--consent-fill-ink);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer; transition: opacity .15s;
}
.consent-btn:hover { opacity: .88; }
.consent-bar [hidden] { display: none; }
@media (min-width: 1100px) {
  .consent-bar__actions { flex-direction: row; align-items: center; }
  .consent-btn { min-width: 0; white-space: nowrap; padding: .65rem 1rem; }
}
/* Bewaren is een ander soort actie dan de twee keuzeknoppen -- het hoort bij de
   vinkjes -- dus die mag afwijken. De symmetrie die telt is die tussen
   accepteren en weigeren, en die zijn identiek. */
.consent-btn--save {
  background: transparent; color: var(--consent-ink); border-color: var(--consent-ink);
}
.consent-btn:focus-visible { outline: .18rem solid var(--consent-ink); outline-offset: .25rem; }

@media (max-width: 900px) {
  .consent-bar form { grid-template-columns: 1fr; gap: .65rem; }
  .consent-bar__actions { flex-direction: row; flex-wrap: wrap; }
  .consent-btn { flex: 1 1 13rem; min-width: 0; }
}
@media (max-width: 900px) {
  /* Twee kolommen aanhouden tot heel smal: vier labels onder elkaar maakte de
     balk 605px hoog op een scherm van 800 -- driekwart van het beeld voor een
     vraag die je in een seconde beantwoordt. De labels zijn kort genoeg. */
  .consent-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent-btn { flex-basis: 100%; }
  .consent-btn { min-height: 44px; padding: .5rem 1rem; }
  .consent-bar__actions { gap: .4rem; }
}
@media (max-width: 340px) {
  .consent-cats { grid-template-columns: 1fr; }
}

/* Geblokkeerde embed: het vlak houdt de plek vast en legt uit waarom er niets
   staat, in plaats van een gat te laten vallen. */
.consent-embed { position: relative; min-height: 14rem; display: flex; }
.consent-embed__ask {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: 1.4rem; width: 100%;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--site-accent) 35%, transparent);
  border-radius: var(--radius);
}
.consent-embed__ask svg { width: 1.6rem; height: 1.6rem; stroke: var(--site-accent); fill: none; }
.consent-embed__ask p { margin: 0; font-size: var(--text-sm); color: var(--ink-lead); }
.consent-embed__ask p strong { color: var(--ink); font-size: var(--text-base); }
.consent-embed__ask .btn { margin-top: .3rem; }
.consent-embed__alt a { color: var(--site-accent); font-weight: var(--weight-medium); }
.consent-embed iframe { display: block; width: 100%; height: 100%; min-height: 14rem; border: 0; }

/* ---------------------------------------------------------------------------
   ENTRANCE MOTION (verrijkt zichtbare default; nooit content verbergen)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
  .rise-1 { animation-delay: .06s; }
  .rise-2 { animation-delay: .14s; }
  .rise-3 { animation-delay: .22s; }
  .rise-4 { animation-delay: .3s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Scroll-reveal. Het inline script in de <head> van elke pagina zet
   `reveal-armed` op <html> vóór de eerste paint, en alleen als er een
   IntersectionObserver is en de bezoeker beweging wil. Pas dan starten de
   blokken verborgen en is de rise-animatie de enige weg naar zichtbaar.

   Zonder dat vlaggetje — geen JS, oude browser, of site-v2.js die niet
   draait (het script disarmt zichzelf na 1,5s) — blijft alles gewoon
   zichtbaar. De pagina is dus nooit blanco; de animatie is een verrijking.

   Eerder stond de content altijd zichtbaar en werd de animatie er pas op
   geplakt als de observer vuurde. Omdat die pas vuurt als het blok al ~12%
   in beeld staat, sprong de tekst van zichtbaar naar opacity:0 en fadete
   daarna terug: een flits in plaats van een entree. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-armed [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }

  .js [data-reveal].is-in { animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
  .js [data-reveal].is-in[data-reveal-delay="1"] { animation-delay: .08s; }
  .js [data-reveal].is-in[data-reveal-delay="2"] { animation-delay: .16s; }
  .js [data-reveal].is-in[data-reveal-delay="3"] { animation-delay: .24s; }

  /* Al in beeld bij het laden: site-v2.js markeert die als `is-in--instant`.
     Zonder arming meteen stabiel tonen (anders springt de bovenkant na elke
     navigatie); mét arming staan ze toch al verborgen, dus mogen ze gewoon
     meerijzen in plaats van zichtbaar te poppen zodra site-v2.js draait. */
  .js [data-reveal].is-in.is-in--instant { animation: none; opacity: 1; transform: none; }
  .reveal-armed [data-reveal].is-in.is-in--instant {
    animation: rise .7s cubic-bezier(.22,1,.36,1) both;
  }
  /* De shorthand hierboven nult animation-delay, dus de stagger opnieuw zetten. */
  .reveal-armed [data-reveal].is-in.is-in--instant[data-reveal-delay="1"] { animation-delay: .08s; }
  .reveal-armed [data-reveal].is-in.is-in--instant[data-reveal-delay="2"] { animation-delay: .16s; }
  .reveal-armed [data-reveal].is-in.is-in--instant[data-reveal-delay="3"] { animation-delay: .24s; }
}

/* ---------------------------------------------------------------------------
   MOBIEL NAV (gedeeld)
   --------------------------------------------------------------------------- */
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* De volledige nav (zes items + twee knoppen) heeft naast het logo ~1142px
   nodig. Daaronder paste hij niet meer en werd het logo platgedrukt; daarom
   klapt hij nu al naar het hamburgermenu in plaats van pas op 900px.
   1215px is bewust gekozen: vanaf 1216px zit .container op zijn max-width en
   is de beschikbare breedte constant 1168px — dus altijd 26px speling, ook als
   een fallback-font iets breder uitvalt. */
@media (max-width: 1215px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 4.75rem 0 auto 0; z-index: var(--z-nav);
    background: var(--surface);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-120%); transition: transform .25s cubic-bezier(.22,1,.36,1);
    visibility: hidden;
  }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; }
  .nav > a:not(.btn) { padding: .95rem 0; border-bottom: 1px solid var(--line); }
  .nav > a[aria-current="page"]::after { display: none; }
  .nav .btn { margin-top: .9rem; }
  /* Accountmenu op mobiel: geen zwevend paneel, de drie links staan open
     onder "Mijn account" in het uitgeklapte menu. */
  .nav__account { display: block; margin-top: .9rem; }
  .nav__account .acct__trigger { width: 100%; justify-content: flex-start; margin-top: 0; pointer-events: none; }
  .nav__account .acct__trigger .nav__chev { display: none; }
  .acct__menu, .acct__menu[hidden] { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 .5rem; min-width: 0; background: transparent; }
  .acct__menu a { padding: .8rem .5rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .acct__menu a + a:last-child { border-top: 0; margin-top: 0; padding-top: .8rem; border-radius: 0; }

  /* Op mobiel geen zwevend paneel maar een accordeon in het menu zelf.
     Het menu kan hoger worden dan het scherm, dus het scrollt mee. */
  .nav { max-height: calc(100dvh - 4.75rem); overflow-y: auto; overscroll-behavior: contain; }
  .nav__group { display: block; }
  .nav__trigger {
    width: 100%; justify-content: space-between;
    padding: .95rem 0; border-bottom: 1px solid var(--line);
  }
  .nav__trigger.is-current::after { display: none; }

  .megamenu { position: static; box-shadow: none; border-bottom: 1px solid var(--line); background: transparent; }
  .megamenu .container { padding: .75rem 0 1rem; max-width: none; }
  .mm-grid { grid-template-columns: 1fr; gap: 0; }
  .mm-card, .mm-card:hover { border: 0; border-radius: 0; background: transparent; transform: none; }
  .mm-card + .mm-card { border-top: 1px solid var(--line); }
  /* height: auto is nodig — anders blijft de vaste desktophoogte staan en is de
     thumbnail hoger dan breed in plaats van vierkant. */
  .mm-card__media, .mm-card--wide .mm-card__media {
    width: 4.5rem; height: auto; align-self: center;
    border-radius: .45rem; overflow: hidden;
  }
  .mm-card__media img { height: auto; aspect-ratio: 1 / 1; }
  .mm-card__body { padding: .8rem 0 .8rem 1rem; }
  .mm-card__title { font-size: var(--text-base); }
  .mm-card__cap { font-size: var(--text-sm); }
  .mm-card__arrow { display: none; }
  .mm-foot { margin-top: .9rem; padding-top: .9rem; font-size: var(--text-sm); }
}
@media (max-width: 560px) {
  .container { padding-inline: min(6.15vw, 24px); overflow-wrap: anywhere; }
  .container > *, .footer-grid > * { min-width: 0; }
  .site-header .container { gap: 8px; }
  .site-header .brand { min-width: 0; flex: 1; }
  .site-header .brand__logo { max-width: 100%; width: 170px; height: auto; }
  .theme-toggle, .nav-toggle { width: 44px; height: 44px; flex: none; }
  .theme-toggle svg, .nav-toggle svg { width: 22px; height: 22px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-hours li { flex-wrap: wrap; gap: .25rem 1rem; }
  .btn { padding-inline: min(1.5rem, 20px); }
  .tag { white-space: normal; }
  .facts li { display: block; }
  .facts li svg { display: inline-block; margin-right: .5rem; vertical-align: middle; }
  .nav > a { white-space: normal; }
}