/* ============================================================================
   MORRAPARK v2 — SUBPAGINA'S
   Compacte hero + ruimtelijst + contactformulier. Bouwt op base.css / theme.css.
   ============================================================================ */

/* ---- COMPACTE HERO ---- */
.hero-sub { background: var(--brand); color: #fff; position: relative; overflow: hidden; }
.hero-sub::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 130% at 90% 0%, rgba(203,177,142,.16), transparent 55%);
}
/* max-width stond hier op 62rem terwijl elke sectie eronder de standaard
   .container van 76rem gebruikt: de <h1> begon dan 112px verder naar binnen dan
   elke <h2> daaronder. Voor .hero-sub--light was dat verderop al rechtgezet,
   maar juist de drie pagina's met de groene hero — reserveren, beschikbaarheid
   en mijn-account — hielden de sprong. Nu overal dezelfde linkermarge; de lead
   houdt zijn eigen leesbreedte van 46rem, dus de regellengte verandert niet. */
.hero-sub .container { position: relative; padding-top: clamp(2.4rem,5vw,3.6rem); padding-bottom: clamp(2.4rem,5vw,3.6rem); }
.breadcrumb { font-size: var(--text-sm); color: rgba(255,255,255,.7); margin: 0 0 1rem; }
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { color: #fff; }
.hero-sub h1 { color: #fff; margin: 0 0 1rem; }
.hero-sub h1 strong { color: var(--accent); }
.hero-sub__lead { color: rgba(255,255,255,.9); font-size: var(--text-lg); line-height: 1.5; max-width: 46rem; margin: 0 0 1.6rem; }
.hero-sub__cta { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---- LICHTE HERO (.hero-sub--light) ----
   Zelfde idioom als de home (assets/home-hero.css): warm papier-canvas als
   grondvlak, wit als paneel, groen alleen als smalle structuurbalk. Staat op de
   inhoudelijke subpagina's (ruimtes, faciliteiten, over ons, contact); de
   functionele pagina's — beschikbaarheid, zo-werkt-het, reserveren en
   mijn-account — houden de groene hero, dus alles hangt onder de modifier.

   Kleurdiscipline: geen losse hex-waarden, alles via de tokens uit theme.css.
   Champagne (--accent) mag NIET als tekst op --canvas (~1.9:1) — daar doet
   --site-accent het werk: groen overdag, champagne 's nachts. */
.hero-sub--light { background: var(--canvas); color: var(--ink); }

/* De champagne-gloed hierboven doodleggen. Op #faf8f4 rendert
   rgba(203,177,142,.16) als niets — een effect dat je alleen in de code ziet.
   In nachtmodus is er wél een donker vlak om op te gloeien (zie onderaan). */
.hero-sub--light::before { content: none; }

/* De champagne-overrides van .hero-sub terugdraaien zodat --site-accent wint. */
.hero-sub--light h1 { color: var(--ink); }
.hero-sub--light h1 strong { color: var(--site-accent); }
.hero-sub--light .hero-sub__lead { color: var(--ink-lead); }
.hero-sub--light .breadcrumb { color: var(--ink-2); }
.hero-sub--light .breadcrumb a { color: var(--site-accent); }
.hero-sub--light .breadcrumb a:hover { color: var(--ink); }

/* Tekst links, beeld rechts — exact hetzelfde raster als de home-hero
   (home.css:15-19 + home-hero.css:38-42), zodat de drie ruimtepagina's bovenaan
   in hetzelfde formaat openen als index.html. De 62rem van .hero-sub is een
   eigen, smallere maat; terug naar de standaard .container (76rem) zodat de
   linkerrand van de kop op één lijn staat met de secties eronder. De lead houdt
   zijn eigen leesbreedte van 46rem — die bindt in deze kolom toch niet. */
.hero-sub--light .container {
  max-width: 76rem;                       /* = .container, base.css:53 */
  display: grid;
  grid-template-columns: 1.02fr .98fr;    /* = .hero-home .container, home.css:16 */
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  padding-top: clamp(3.4rem, 6.5vw, 5.4rem);
  padding-bottom: clamp(3.4rem, 6.5vw, 5.4rem);
}

/* De tekstkolom heeft een eigen wrapper nodig: zonder die zouden breadcrumb,
   h1, lead en knoppen ieder een losse gridcel pakken. */
.hero-sub__text { min-width: 0; }

/* Kader en formaat 1-op-1 van .hero-home__media (home.css:32-35 +
   home-hero.css:44-49): witte passe-partout, dezelfde radius, dezelfde
   aspect-ratio 4/3.3. Wordt het beeld een carousel, dan levert
   .room-carousel (base.css:220) de absolute stapeling. */
.hero-sub__media {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3.3;
  border: .5rem solid var(--surface);
  box-shadow: 0 1rem 2.4rem rgba(13,46,34,.12);
}

/* NACHT — op #faf8f4 rendert de champagne-gloed als niets, op een donker canvas
   wél. Daar mag hij dus terug. */
[data-theme="night"] .hero-sub--light::before {
  content: "";
  background: radial-gradient(90% 130% at 90% 0%, rgba(203,177,142,.14), transparent 55%);
}

/* NACHT — alléén de kleur van de passe-partout wisselt, nooit de breedte.
   Met box-sizing:border-box (base.css:9) rekent aspect-ratio over de border-box,
   dus een dunnere rand levert een grótere foto: dan verspringt het beeld bij
   het omschakelen van dag naar nacht. Daarom blijft de .5rem staan en verandert
   hier uitsluitend border-color.

   's Nachts is --surface bijna --canvas, dus een witte passe-partout zou
   verdwijnen. In plaats daarvan champagne dóór het paneelvlak: donker genoeg om
   niet te schreeuwen, licht genoeg om als kader te lezen. De hairline eromheen
   scheidt het kader van het canvas. Die staat bewust in box-shadow en niet in de
   rand — een spread-schaduw ligt buiten de border-box en telt dus niet mee in de
   aspect-ratio. Zelfde afweging als home-hero.css:70-73. Zelfde afweging als home-hero.css:59-63. */
[data-theme="night"] .hero-sub__media {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}

/* Onder 900px stapelt de hero, met het beeld boven de tekst — gelijk aan
   home.css:74-75. Breder liggend formaat, want in volle kolombreedte zou
   4/3.3 het halve scherm vullen voordat de kop in beeld komt. */
@media (max-width: 900px) {
  .hero-sub--light .container { grid-template-columns: 1fr; gap: 2rem; }
  .hero-sub__media { order: -1; aspect-ratio: 16/10; }
}

/* ---- GROENE BALK ----
   Smalle, lege band direct onder de lichte hero. Speelt de rol van de
   huurdersbalk op de home: het groen als structuurelement tussen het canvas
   van de hero en het witte vlak eronder. Dat witte vlak is wat de band tot
   naad maakt — tussen twee stukken canvas zou hij als een losse streep lezen.
   Meestal is dat de USP-strip (.usps-wrap); op over-ons.html, dat geen strip
   heeft, doet de eerste .section--tint hetzelfde werk. Zet de band dus nooit
   neer zonder wit vlak eronder. Puur decoratief, dus zonder inhoud. */
.band-green { height: clamp(2.2rem, 4vw, 3.2rem); background: var(--brand); }

/* ---- SECTIEKOP ---- */
.section { padding: clamp(3rem,6vw,5rem) 0; }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 44rem; margin: 0 0 2.4rem; }
.section-head .lead { margin-top: .9rem; }

/* ---- SPLIT (tekst + beeld) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 2rem; } .split__media { order: -1; } }

/* ---- RUIMTE-LIJST ---- */
.room-list { display: grid; gap: 1.2rem; }
.room-item {
  display: grid; grid-template-columns: 16rem 1fr 14.5rem; gap: 1.8rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.room-item:hover { transform: translateY(-2px); box-shadow: 0 .9rem 2rem rgba(13,46,34,.14); }
.room-item__media { align-self: stretch; min-height: 11rem; }
.room-item__body { padding: 1.6rem 0; }
.room-item__body h3 { margin: 0 0 .3rem; }
.room-item__body p { color: var(--ink-lead); margin: .4rem 0 0; font-size: var(--text-sm); }
.room-item__specs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.room-item__action { padding-right: 1.6rem; text-align: right; }
/* De knoptekst wisselt tussen "Boek deze kamer" en "Sluiten". Met een
   auto-brede derde kolom kromp die kolom bij het openen mee, en herwikkelde de
   omschrijving in de middenkolom — de hele kaart verspringt dan. Vandaar twee
   dingen: de kolom heeft hierboven een vaste breedte (de middenkolom ligt dus
   sowieso vast), en de knop zelf een min-width, zodat ook de knop niet krimpt.
   12rem past ruim om "Boek deze kamer" heen en binnen de 14,5rem-kolom. */
.room-item__action .room-book__toggle { min-width: 12rem; }
/* Het tarief stond hier eerder als "v.a. per uur" — een zin met het getal eruit.
   De bedragen bleken gewoon openbaar te staan op de kamerpagina's van het
   reserveringssysteem, dus ze staan er nu echt, met de voorwaarden één keer
   boven de lijst in plaats van half op elke kaart. */
.room-list__tariff {
  margin: 0 0 1.6rem; padding: .9rem 1.1rem;
  border-left: 1px solid color-mix(in srgb, var(--site-accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm); color: var(--ink-lead); max-width: 46rem;
}

/* Prijs onder de knop: het bedrag draagt gewicht, de eenheid en de btw-noot
   niet. Drie regels, aflopend in nadruk, zodat het één blok blijft. */
.room-item__price {
  margin: .7rem 0 0; font-size: var(--text-sm); color: var(--ink-lead);
  line-height: 1.35; text-align: center;
}
.room-item__price strong {
  display: block; color: var(--ink); font-size: var(--text-base);
  font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
}
.room-item__excl { display: block; font-size: var(--text-2xs); color: var(--ink-2); }
.note { font-size: var(--text-sm); color: var(--ink-lead); }
.note a:not(.btn) { color: var(--site-accent); font-weight: var(--weight-medium); }

/* ---- KEUZEHULP: filteren op groepsgrootte ----
   [hidden] verliest het van de display-regels hierboven, dus expliciet nullen. */
.room-book[hidden], .room-item[hidden] { display: none; }
/* Valt een hele lijst weg, dan gaat het kopje erboven mee (zie site-v2.js). */
.room-list[hidden], .section-head[hidden] { display: none; }

.roomfilter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem;
  margin-bottom: 1.6rem; padding: 1.1rem 1.3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.roomfilter__label { margin: 0; font-weight: var(--weight-medium); color: var(--ink); font-size: var(--text-sm); }
.roomfilter__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.roomfilter__btn {
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  padding: .6rem 1.05rem; border-radius: 999px;
  /* --line is rgba(13,46,34,.08) = ~1,05:1 op --canvas: de chip had in rust
     geen zichtbare rand. 32% accent geeft een leesbare begrenzing en laat de
     sprong naar de gevulde .is-active als toestandswissel lezen. */
  border: 1px solid color-mix(in srgb, var(--site-accent) 32%, transparent);
  background: var(--canvas); color: var(--ink-lead);
  transition: border-color .16s, color .16s, background .16s;
}
.roomfilter__btn:hover { border-color: var(--site-accent); color: var(--ink); }
.roomfilter__btn.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.roomfilter__count { margin: 0; margin-left: auto; font-size: var(--text-sm); color: var(--ink-lead); }
@media (max-width: 620px) {
  .roomfilter__count { margin-left: 0; flex-basis: 100%; }
}

/* ---- VIEW-SWITCH (Per ruimte boeken ↔ Volledig planbord) ----
   Gedeeld door reserveren.html en beschikbaarheid.html. */
.viewswitch {
  display: inline-flex; gap: .25rem; padding: .3rem; margin: 0 0 1.6rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); box-shadow: var(--shadow);
  scroll-margin-top: 6.5rem;
}
.viewswitch a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.2rem;
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--ink-lead); line-height: 1.2; transition: color .2s, background .2s;
}
.viewswitch a svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; flex: none; }
.viewswitch a:hover { color: var(--ink); text-decoration: none; }
.viewswitch a[aria-current="page"] { background: var(--brand); color: #fff; }
[data-theme="night"] .viewswitch a[aria-current="page"] { background: var(--accent); color: #16241d; }
@media (max-width: 520px) {
  .viewswitch { width: 100%; }
  .viewswitch a { flex: 1; justify-content: center; padding: .6rem .6rem; }
}

/* ---- BOEK-PER-KAMER (uitklapbaar planbord-iframe) ---- */
.room-book { display: grid; scroll-margin-top: 6rem; }
.room-book + .room-book { margin-top: 1.2rem; }
.room-book .room-item { margin: 0; }
.room-book.is-open .room-item {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: none; transform: none;
}
.room-book__panel {
  border: 1px solid var(--line); border-top: 0;
  border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.room-book__panel[hidden] { display: none; }
/* Vaste hoogte 877px (mobiel 617px): de AQQO-CSS herkent hieraan dat hij in onze iframe staat en verbergt dan z'n eigen header/footer. Niet wijzigen zonder aqqo-css-maker.css mee te nemen. */
.room-book__frame {
  display: block; width: 100%; border: 0;
  height: 877px;
}
/* .room-book__panelfoot is vervangen door de gedeelde .embed__foot: dezelfde
   opmaak, maar nu ook onder het planbord en het inlogscherm, met een hulpregel
   in plaats van een excuus vooraf. */

@media (max-width: 820px) {
  /* 78vh liet altijd een strook pagina onder het frame staan: twee scrolbare
     vlakken tegelijk in beeld, en op een telefoon raak je dan steeds het
     verkeerde. Bijna het hele scherm plus scroll-margin onder de plakkende
     header maakt het planbord het enige dat onder je duim beweegt. */
  .room-book__frame { height: 617px; }
  .room-book__panel { scroll-margin-top: 5rem; }
}

/* ---- INGEBEDDE PLANBORDEN: laad- en faaltoestand ----
   Het planbord, het inlogscherm en elk kamerpaneel zijn iframes naar
   reserveren.morrapark.nl. Die kunnen om redenen buiten deze site blokkeren
   (frame-ancestors, een extensie, een cookie-instelling) en dan rendert het
   frame als niets — geen melding, geen uitleg.

   Eerder ondervingen we dat met tekst die er altijd stond: "Komt je
   reservering hier niet verder? ..." Dat is een excuus vooraf: het zegt tegen
   iedereen dat het misschien niet werkt, ook tegen de 99% bij wie het gewoon
   werkt, en het is nog steeds geen foutmelding als het écht misgaat.

   Nu drie toestanden. Laden en fout zijn overlays; het frame zelf blijft
   staan, zodat een traag ladend planbord alsnog gewoon doorkomt. */
[data-embed] { position: relative; }

.embed__status {
  position: absolute; inset: 0; z-index: 1;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 2rem; text-align: center;
  background: var(--surface); color: var(--ink-lead); font-size: var(--text-sm);
}
[data-embed].is-loading .embed__status--loading,
[data-embed].is-failed  .embed__status--failed { display: flex; }
/* Zichtbaar of hard bevestigd: overlays weg. */
[data-embed].is-ready .embed__status,
[data-embed].is-shown .embed__status { display: none; }

/* Onbevestigd: geen melding over het frame heen -- bij de meeste bezoekers zou
   die liegen -- maar een regel eronder die de uitweg noemt. Verschijnt pas na
   8 seconden zonder bevestiging en verdwijnt zodra die er wel is. */
.embed__hint { display: none; margin: .6rem 0 0; font-size: var(--text-sm); color: var(--ink-lead); flex-basis: 100%; }
.embed__hint a { color: var(--site-accent); font-weight: var(--weight-medium); }

.embed__spinner {
  width: 1.6rem; height: 1.6rem; border-radius: var(--radius-pill);
  border: 2px solid color-mix(in srgb, var(--site-accent) 25%, transparent);
  border-top-color: var(--site-accent);
  animation: embed-spin .9s linear infinite;
}
@keyframes embed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Geen draaiing, maar wel een teken van leven: de ring pulseert zacht in
     dekking. Alleen de animatie doden zou een stilstaand streepje opleveren
     dat niets meer betekent. */
  .embed__spinner { animation: embed-pulse 1.6s ease-in-out infinite; }
  @keyframes embed-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

.embed__status--failed strong { display: block; color: var(--ink); font-size: var(--text-base); }
.embed__status--failed p { margin: 0; max-width: 34rem; }

/* Voettekst onder een frame: een gewone hulpregel, geen excuus. */
.embed__foot {
  margin: 0; padding: .85rem 1.2rem; font-size: var(--text-sm);
  color: var(--ink-lead); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
}
.embed__foot .btn { margin-left: auto; }
/* De hint hangt in de voettekst; de selector staat hier omdat de klasse op
   het frame-omhulsel zit en de hint een broer van dat omhulsel is. */
[data-embed].is-unconfirmed ~ .embed__foot .embed__hint,
.embed__foot .embed__hint.is-on { display: block; }
@media (max-width: 560px) { .embed__foot .btn { margin-left: 0; width: 100%; justify-content: center; } }

/* ---- JURIDISCHE / TEKSTPAGINA (prose) ---- */
/* Tweekoloms op desktop: vaste inhoudsopgave-rail + leeskolom (max 50rem).
   Vult de anders lege ruimte rechts van de meetkolom op grote schermen.
   Onder 960px klapt alles terug naar één kolom (rail bovenaan). */
.legal-doc {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 50rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  justify-content: center;
  align-items: stretch;          /* rail even hoog als de leeskolom → sticky heeft loopruimte */
}
.legal-rail__sticky { position: sticky; top: calc(4.75rem + 1.5rem); }

.legal { max-width: 50rem; }
.legal__print-title { display: none; }   /* alleen zichtbaar in print/PDF */
.legal__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 0 0 2rem; padding: 0 0 1.4rem; border-bottom: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--ink-lead);
}
.legal__meta .btn { font-size: var(--text-sm); padding: .55rem 1.1rem; }
.legal__meta .btn svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; }
.legal__intro {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.3rem 1.5rem; margin: 0 0 2rem;
  color: var(--ink-lead); font-size: var(--text-sm); line-height: 1.6;
}
.legal__intro strong { color: var(--ink); }
.legal h2 {
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  letter-spacing: -.01em; margin: 2.8rem 0 .9rem;
  padding-top: 1.7rem; border-top: 1px solid var(--line); scroll-margin-top: 6.5rem;
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: var(--text-base); margin: 1.8rem 0 .6rem; }
.legal p { color: var(--ink-lead); line-height: 1.75; margin: 0 0 1rem; }
.legal ul, .legal ol { color: var(--ink-lead); line-height: 1.75; margin: 0 0 1.1rem; padding-left: 1.3rem; }
.legal li { margin: 0 0 .5rem; padding-left: .2rem; }
.legal li::marker { color: var(--site-accent); }
.legal li > ul, .legal li > ol { margin-top: .5rem; }
.legal strong { color: var(--ink); }
.legal a:not(.btn) { color: var(--site-accent); font-weight: var(--weight-medium); }
.legal__table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.legal th, .legal td {
  text-align: left; padding: .6rem .8rem;
  border-bottom: 1px solid var(--line); color: var(--ink-lead);
}
.legal th { color: var(--ink); font-weight: var(--weight-medium); background: color-mix(in srgb, var(--site-accent) 8%, transparent); }
.legal tr:last-child td { border-bottom: 0; }

/* ---- Genummerde bepalingen ----
   Gegenereerd door scripts/build_legal_pages.py uit de Markdown-bronnen.
   Hangende inspring: het nummer staat links, doorlopende regels lijnen uit
   met de tekst erboven in plaats van met het nummer. */
.legal__clause {
  margin: 0 0 .85rem;
  padding-left: 3.1rem;
  text-indent: -3.1rem;
}
.legal__nr {
  display: inline-block; width: 3.1rem; text-indent: 0;
  color: var(--site-accent); font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 30rem) {
  .legal__clause { padding-left: 2.6rem; text-indent: -2.6rem; }
  .legal__nr { width: 2.6rem; }
}

/* ---- Colofon onderaan een document ---- */
.legal__colofon {
  margin: 3rem 0 0; padding-top: 1.4rem;
  border-top: 1px solid var(--line); font-size: var(--text-sm);
}
.legal__colofon-line { margin: 0 0 .4rem; }
.legal__version { color: var(--ink); font-weight: var(--weight-medium); margin: 0; }

/* ---- Voorwaarden-hub (algemene-voorwaarden.html) ----
   Drie diensten, drie sets voorwaarden. De hub verwijst, hij bevat zelf geen
   bepalingen: zo blijft elk document zelfstandig leesbaar en ter hand te
   stellen. */
.doc-group { margin: 0 0 2.8rem; }
.doc-group > h2 {
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  letter-spacing: -.01em; margin: 0 0 .4rem;
}
.doc-group > p { color: var(--ink-lead); margin: 0 0 1.2rem; max-width: 44rem; }
.doc-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem; list-style: none; margin: 0; padding: 0;
}
.doc-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.3rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.doc-card h3 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.doc-card p { margin: 0; color: var(--ink-lead); font-size: var(--text-sm); line-height: 1.6; }
.doc-card__links {
  margin-top: auto; padding-top: .8rem; display: flex; flex-wrap: wrap; gap: 1.1rem;
  font-size: var(--text-sm);
}
.doc-card__links a:not(.btn) { color: var(--site-accent); font-weight: var(--weight-medium); }

/* ---- Inhoudsopgave (JS vult 'm; verschijnt alleen met JS) ----
   In de rail: compacte, verticale lijst met een actief-item-markering
   (scroll-spy in site-v2.js). */
.legal__toc {
  margin: 0; padding: 1.2rem 1.3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  max-height: calc(100vh - 8rem); overflow-y: auto; overscroll-behavior: contain;
}
.legal__toc[hidden] { display: none; }
.legal__toc-box { margin: 0; }
.legal__toc-title {
  margin: 0 0 .9rem; font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-lead);
  list-style: none; cursor: default;
}
.legal__toc-title::-webkit-details-marker { display: none; }
.legal__toc-title::marker { content: ""; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; }
.legal__toc li { margin: 0; }
.legal__toc a {
  display: block; padding: .38rem .65rem; margin: 0 0 .1rem;
  font-size: var(--text-sm); line-height: 1.4; color: var(--ink-lead);
  text-decoration: none; border-radius: calc(var(--radius) - .15rem);
  overflow-wrap: anywhere; hyphens: auto;
  transition: color .15s, background .15s;
}
.legal__toc a:hover { color: var(--ink); background: color-mix(in srgb, var(--site-accent) 7%, transparent); }
.legal__toc a.is-active {
  color: var(--ink); font-weight: var(--weight-medium);
  background: color-mix(in srgb, var(--site-accent) 12%, transparent);
}

/* Onder 960px: één kolom, rail niet meer plakkend. De inhoudsopgave wordt een
   inklapbare disclosure (standaard dicht) zodat de lange lijst de pagina niet
   domineert; open klapt 'm uit in twee kolommen. */
@media (max-width: 960px) {
  .legal-doc { grid-template-columns: 1fr; gap: 0; }
  .legal-rail { margin: 0 0 2.4rem; }
  .legal-rail__sticky { position: static; }
  .legal__toc { max-height: none; overflow: visible; }
  .legal__toc-title {
    cursor: pointer; margin: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .legal__toc-box[open] .legal__toc-title { margin: 0 0 .9rem; }
  .legal__toc-title::after {
    content: ""; width: .5rem; height: .5rem; flex: none;
    border-right: 2px solid var(--ink-lead); border-bottom: 2px solid var(--ink-lead);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .legal__toc-box[open] .legal__toc-title::after { transform: rotate(-135deg); }
  .legal__toc ol { columns: 2; column-gap: 1.6rem; }
  .legal__toc li { break-inside: avoid; }
}
@media (max-width: 560px) { .legal__toc ol { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .legal__toc-title::after { transition: none; } }

/* ---- Terug naar boven (JS voegt de knop toe op legal-pagina's) ---- */
.legal__backtop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 30; width: 2.8rem; height: 2.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border: 0; border-radius: 999px;
  box-shadow: 0 .4rem 1rem rgba(13,46,34,.25); cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.legal__backtop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.legal__backtop svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; fill: none; }
[data-theme="night"] .legal__backtop { background: var(--accent); color: #14231c; box-shadow: 0 .4rem 1rem rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .legal__backtop { transition: opacity .25s ease; transform: none; } }

/* ---- PRINT / PDF (legal-pagina's) ----
   Alleen de tekst; site-chrome (header, hero, footer, download-knop) weg.
   Gebruikt door browser-print én de Playwright PDF-generatie. */
@media print {
  .site-header, .site-footer, .hero-sub, .legal__meta, .legal__toc, .legal-rail, .legal__backtop, .skip { display: none !important; }
  body { background: #fff !important; }
  .section { padding: 0 !important; }
  .legal-doc { display: block; }
  .legal { max-width: none; }
  .legal__print-title { display: block; margin: 0 0 1.6rem; }
  .legal__print-h { font-size: 20pt; font-weight: 600; color: #0d2e22; margin: 0 0 .2rem; }
  .legal__print-title p { color: #555; margin: 0; font-size: 10pt; }
  .legal p, .legal li, .legal ul, .legal ol, .legal th, .legal td { color: #1a1a1a; }
  .legal h2, .legal h3 { color: #0d2e22; break-after: avoid; }
  .legal li, .legal tr, .legal__intro { break-inside: avoid; }
  .legal__intro { box-shadow: none; }
  .legal a:not(.btn) { color: #0d2e22 !important; text-decoration: none; }
}

/* ---- CONTACTFORMULIER ---- */
.hero-sub--compact .container { display: block; padding-top: 1.8rem; padding-bottom: 1.8rem; }
.hero-sub--compact h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.hero-sub--compact .hero-sub__lead { font-size: var(--text-base); margin-bottom: 1rem; }
.hero-sub--compact + .section { padding-top: 2rem; }
.contact-quick { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; }
.contact-quick a { color: var(--site-accent); min-height: 44px; display: inline-flex; align-items: center; }
#kiezen, #contactform { scroll-margin-top: 6rem; }
.room-book__summary { padding: 1rem 1.25rem; background: var(--canvas); border-bottom: 1px solid var(--line); }
.room-book__summary h4 { margin: 0; color: var(--ink); font-size: var(--text-lg); }
.room-book__summary p { margin: .3rem 0 0; color: var(--ink-lead); font-size: var(--text-sm); }
.field[hidden] { display: none; }
.form-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); }
.field .req { color: var(--site-accent); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-lead); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--site-accent); outline: none; box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--site-accent) 35%, transparent); }
.field textarea { min-height: 8rem; resize: vertical; }
.field__error { font-size: var(--text-sm); color: var(--error); min-height: 1.1em; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }

.form__status { border-radius: var(--radius); padding: .9rem 1.1rem; font-size: var(--text-sm); }
.form__status[hidden] { display: none; }
.form__status--ok { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.form__status--err { background: color-mix(in srgb, var(--error) 8%, transparent); color: var(--error-strong); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); }
/* Bezig-toestand: neutraal, zodat het niet als bevestiging of als fout leest. */
.form__status--busy { background: var(--canvas); color: var(--ink-lead); border: 1px solid var(--line); }
[data-theme="night"] .form__status--ok { color: var(--ink); }

.muted { color: var(--ink-lead); font-size: var(--text-sm); }
.contact-aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.contact-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-list svg { width: 1.2rem; height: 1.2rem; stroke: var(--site-accent); flex: none; margin-top: .2rem; }
.contact-list a { color: var(--ink); }
.contact-aside__map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; margin-top: 1.6rem; box-shadow: var(--shadow); }
/* Een iframe is inline, en dat levert onderin de afgeronde hoek een strookje
   regelhoogte op; display:block haalt dat weg. De hoogte komt van de
   aspect-ratio hierboven, niet van het frame zelf. */
.contact-aside__map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Kaart achter toestemming: het consent-blok moet de hele aspect-ratio vullen,
   anders hield het frame zijn min-height van 14rem en bleef er onder de kaart
   een witte strook over. Zolang de vraag nog staat geen vaste verhouding: dan
   bepaalt de tekst de hoogte en valt de knop op mobiel niet buiten beeld. */
.contact-aside__map .consent-embed { height: 100%; min-height: 0; }
.contact-aside__map:has(.consent-embed:not([data-consent-loaded])) { aspect-ratio: auto; box-shadow: none; }
/* NACHT — Google levert alleen lichte tegels; ongefilterd is dat een fel wit
   vlak in een donker paneel. Alleen dempen, niet inverteren: een omgekeerde
   kaart komt niet meer overeen met wat de bezoeker in de Maps-app ziet. */
[data-theme="night"] .contact-aside__map iframe { filter: brightness(.86) saturate(.92); }
.contact-aside__route { margin: .8rem 0 0; }

/* ---- Info-links (Goed om te weten: kaart-links naar zo-werkt-het) ---- */
/* grid-auto-rows: 1fr — alle rijen even hoog, zodat een kaart die alleen op de
   laatste rij staat niet lager uitvalt dan de rest. */
.info-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-auto-rows: 1fr; gap: .9rem; }
.info-links li { margin: 0; }
/* height:100% — de li rekt als grid-item mee met de hoogste rij, maar de kaart
   zelf is de <a>. Zonder dit krijgt een label dat over twee regels loopt een
   hogere kaart dan de rest en oogt de rij ongelijk. */
.info-links a {
  display: flex; align-items: center; gap: .6rem; padding: 1.05rem 1.3rem; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-weight: var(--weight-medium); box-shadow: var(--shadow);
  transition: transform .16s cubic-bezier(.22,1,.36,1), border-color .2s;
}
.info-links a::after {
  content: ""; width: .5rem; height: .5rem; margin-left: auto; flex: none;
  border-right: 2px solid var(--site-accent); border-top: 2px solid var(--site-accent); transform: rotate(45deg);
}
.info-links a:hover { transform: translateY(-2px); border-color: var(--site-accent); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .info-links a { transition: border-color .2s; } }

/* ---- Statistiek-kaartjes (Over ons: "in cijfers") ----
   Eigen class i.p.v. .facts: die naam is al in gebruik voor de leesbare
   checklist (svg + volle zin) uit base.css — anders botsen de twee patronen. */
.room-layouts { margin-top: 1rem; font-size: var(--text-sm); }
.room-layouts summary { cursor: pointer; color: var(--ink); font-weight: var(--weight-medium); }
.room-layouts summary:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 4px; }
.room-layouts p { font-size: inherit; }
.setup-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0 1rem; list-style: none; padding: 0; margin: 1rem 0; }
.setup-list li { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.setup-icon { display: block; flex: none; width: 4.5rem; height: 4.5rem; color: var(--site-accent); }
.setup-label { display: grid; gap: .1rem; font-size: var(--text-sm); }
.setup-label strong { font-weight: var(--weight-medium); color: var(--ink); }
.setup-label > span { color: var(--ink-lead); font-variant-numeric: tabular-nums; }
.setup-list--overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; margin: 1.5rem 0 0; }
.setup-list--overview li { flex-direction: row; align-items: center; gap: 1rem; padding: 1.5rem 0; }
.setup-list--overview .setup-icon { width: 6rem; height: 6rem; }
.setup-list--overview .setup-label strong { font-size: var(--text-lg); }
.setup-legend { margin: .75rem 0 0; font-size: var(--text-sm); color: var(--ink-lead); }
@media (max-width: 800px) {
  .setup-list--overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
  .setup-list--overview li { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem 0; }
  .setup-list--overview .setup-icon { width: 5rem; height: 5rem; }
}
.booking-guidance { max-width: 65rem; margin-bottom: 1.5rem; }
.stat-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .9rem; }
.stat-cards li {
  margin: 0; padding: 1.2rem 1.3rem; color: var(--ink-lead); font-size: var(--text-sm);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat-cards strong { display: block; color: var(--ink); font-size: var(--text-base); margin-bottom: .2rem; }

/* ---- FAQ (gegenereerd door scripts/build_faq.py uit content/faq.md) ----
   <details>/<summary> i.p.v. een JS-accordion: het antwoord staat dan altijd
   in de DOM (crawlers, AI-bots, zoeken-in-pagina met Ctrl+F) en het klapt
   ook open zonder JavaScript. De eigen marker vervangt de driehoek van de
   browser; die verschilt per platform en past nergens bij. */
.faq { display: grid; gap: .7rem; }
.faq__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .2s;
}
.faq__item[open] { border-color: var(--site-accent); }
.faq__item > summary {
  display: flex; align-items: flex-start; gap: .9rem; cursor: pointer;
  padding: 1.05rem 1.3rem; color: var(--ink);
  font-weight: var(--weight-medium); line-height: 1.45;
  list-style: none;                       /* Firefox */
}
.faq__item > summary::-webkit-details-marker { display: none; }   /* Safari */
.faq__item > summary:hover { color: var(--site-accent); }
.faq__item > summary:focus-visible { outline: .18rem solid var(--site-accent); outline-offset: 2px; }
/* Plus dat een min wordt: één pseudo-element voor de horizontale streep, het
   andere voor de verticale die bij [open] wegdraait. */
.faq__item > summary::after {
  content: ""; flex: none; margin-left: auto; position: relative;
  width: .8rem; height: .8rem; margin-top: .35rem;
  background:
    linear-gradient(var(--site-accent), var(--site-accent)) center/100% 2px no-repeat,
    linear-gradient(var(--site-accent), var(--site-accent)) center/2px 100% no-repeat;
  transition: transform .2s, background-size .2s;
}
.faq__item[open] > summary::after { background-size: 100% 2px, 0 100%; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .faq__item > summary::after { transition: none; } }

.faq__answer { padding: 0 1.3rem 1.15rem; color: var(--ink-lead); }
.faq__answer > :first-child { margin-top: 0; }
.faq__answer > :last-child { margin-bottom: 0; }
.faq__answer p { margin: 0 0 .8rem; line-height: 1.65; }
.faq__answer ul { margin: 0 0 .8rem; padding-left: 1.1rem; }
.faq__answer li { margin: .35rem 0; line-height: 1.6; }
.faq__answer li::marker { color: var(--site-accent); }
.faq__answer a:not(.btn) { color: var(--site-accent); font-weight: var(--weight-medium); }
.faq__answer strong { color: var(--ink); font-weight: var(--weight-semibold); }
.faq__more { margin: 1.1rem 0 0; font-size: var(--text-sm); color: var(--ink-lead); }
.faq__more a:not(.btn) { color: var(--site-accent); font-weight: var(--weight-medium); }

/* Hub-pagina: sprongnavigatie + categorieblokken. */
.faq__jump {
  margin: 0 0 2.6rem; padding: 1.3rem 1.5rem;
  background: var(--zebra); border: 1px solid var(--line); border-radius: var(--radius);
}
.faq__jump-title {
  margin: 0 0 .7rem; font-size: var(--text-2xs); color: var(--site-accent);
  letter-spacing: .16em; text-transform: uppercase; font-weight: var(--weight-semibold);
}
.faq__jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.faq__jump li { margin: 0; }
.faq__jump a {
  display: inline-block; padding: .4rem .85rem; font-size: var(--text-sm);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.faq__jump a:hover { border-color: var(--site-accent); color: var(--site-accent); text-decoration: none; }
.faq__cat + .faq__cat { margin-top: 3rem; }
.faq__cat h2 { margin: 0 0 1.2rem; }
/* Anker-sprong niet onder de vaste header laten eindigen. */
.faq__item[id] { scroll-margin-top: 7rem; }
.faq__cat[id] { scroll-margin-top: 6rem; }
.faq__closing { margin-top: 2.6rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 520px) {
  /* Samen zijn de twee knoppen breder dan het scherm, dus ze stapelen.
     flex-basis 100% maakt die stapeling expliciet i.p.v. een toevallig gevolg
     van wrappen; ze lijnen dan links én rechts uit met de tekst erboven. */
  .hero-sub--light .hero-sub__cta .btn { flex: 1 0 100%; }
}
@media (max-width: 820px) {
  .room-item { grid-template-columns: 1fr; }
  .room-item__media { min-height: 9rem; aspect-ratio: 16/9; }
  .room-item__body { padding: 0 1.5rem; }
  .room-item__action { padding: 0 1.5rem 1.5rem; text-align: left; }
  .form-grid { grid-template-columns: 1fr; gap: 2rem; }
}