/* Gegenereerd door bouw.js voor Bed and Breakfast 1691 — niet met de hand aanpassen.
   Kleur en thema komen uit klant.json; layout uit template/styles.css. */
:root{
  --accent:#a9603a;
  --accent-600:hsl(20.5 48.9% 38.5%);
  --accent-300:hsl(20.5 48.9% 40.5%);
  --accent-dark:hsl(20.5 52.9% 28.5%);
  --accent-glow:rgba(169,96,58,0.4);
  --accent-ring:rgba(169,96,58,0.22);
  --accent-border:rgba(169,96,58,0.45);
  --accent-wash:rgba(169,96,58,0.1);
  --accent-soft:rgba(169,96,58,0.32);
  --on-accent:#ffffff;
  --accent-ink:hsl(20.5 26.9% 13.0%);
  --accent-ink-2:hsl(20.5 24.4% 19.0%);
  --accent-ink-3:hsl(20.5 26.9% 27.0%);
  --accent-on-ink:hsl(20.5 48.9% 69.5%);
  --head:"Cormorant Garamond",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ============================================================
   styles.css van het B&B-sjabloon (Bed and Breakfast 1691, 14-10-2026).
   Eigen, complete opmaak, koppen in Cormorant Garamond, tekst in Figtree, grote cijfers in Bodoni Moda.
   Sinds 21-10-2026 in de kleuren van het logo (Anne's palet): bruin #6a5445, bruin zacht #796655, licht #e8ded5,
   greige #b9a99a. Blok om blok: lichte vlakken en bruine vlakken (.sectie--donker) wisselen elkaar af.
   Het koper van eerst is weg; de oude namen (--koper...) wijzen nu naar het bruin, zodat alles meeging.
   Eerst de telefoon, daarna de bredere schermen (min-width).
   ============================================================ */
:root {
  --zand: #f2ece6;          /* licht 1: de ondergrond (een tint lichter dan het logo-licht) */
  --zand-2: #e8ded5;        /* licht 2: het licht van het logo */
  --wit: #fbf8f4;           /* kaarten */
  --greige: #cfc3b7;
  --lijn: #ddd2c7;
  --inkt: #2e241e;
  --inkt-2: #574b43;
  --inkt-3: #6b5f57;
  --bruin: #6a5445;         /* het bruin van het logo: knoppen, donkere vlakken */
  --bruin-2: #574539;       /* dieper bruin: hover, de voet */
  --bruin-zacht: #796655;   /* de cijfers van het logo */
  --creme: #e8ded5;         /* tekst en knoppen op bruin */
  --creme-2: #ddd2c7;       /* gewone tekst op bruin (4,8 op 1) */
  --koper: var(--bruin);
  --koper-2: var(--bruin-2);
  --koper-licht: #d9cdc1;
  --koper-tekst: var(--bruin);   /* kleine tekst in bruin: 6 op 1 op licht 1 */
  --cijfer: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat: 1200px;
  --gutter: clamp(18px, 4.5vw, 44px);
  --r: 16px;
  --schaduw: 0 12px 36px rgba(43, 36, 32, .08);
  --overgang: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--zand);
  color: var(--inkt);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open, body.lichtbak-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--koper); outline-offset: 3px; border-radius: 4px; }

/* ---------- letters ---------- */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0 0 .6em; letter-spacing: -.01em; color: var(--inkt); text-wrap: balance; }
/* Cormorant heeft van zichzelf "oude" cijfers (de 3, 4, 7 en 9 hangen onder de regel). Mooi in het merkteken,
   maar jaartallen en tijden moeten gewoon op één lijn staan. */
h1, h2, h3, .h1, .h2, .h3, .tijdlijn__jaar, .ontbijt__cijfers, .score__cijfer, .feit__kop, .kamerkeuze__naam, .voet__gastvrouwen, .quote__tekst, .aanvragen__liever, .formulier__nachten { font-variant-numeric: lining-nums; }
.h1 { font-size: clamp(2.5rem, 7vw, 4.4rem); }
.h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.h3 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); }
.eyebrow { font: 600 .74rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--koper-tekst); margin: 0 0 .9rem; }
.eyebrow--licht { color: rgba(255, 253, 249, .85); }
.lead { font-size: clamp(1.12rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--inkt-2); max-width: 60ch; margin: 0 0 1.4rem; }
.lead--breed { max-width: 70ch; }
.tekst { color: var(--inkt-2); max-width: 62ch; }
.tekst--groot { font-size: 1.125rem; line-height: 1.7; }
.tekst--midden { margin-inline: auto; }
.kruimels { font-size: .9rem; color: var(--inkt-3); margin: 0 0 1.2rem; }
.kruimels a { text-decoration: none; }
.kruimels a:hover { color: var(--koper); }
.kruimels span[aria-hidden] { margin: 0 .35rem; color: var(--greige); }

/* ---------- kader en secties ---------- */
.binnen { width: min(100% - 2 * var(--gutter), var(--maat)); margin-inline: auto; }
.sectie { padding-block: clamp(60px, 9vw, 116px); }
.sectie--zand2 { background: var(--zand-2); }
.sectie--wit { background: var(--wit); }
.sectie__kop { max-width: 64ch; margin-bottom: clamp(32px, 5vw, 56px); }
.sectie__kop .lead { margin-bottom: 0; }
.overslaan { position: absolute; left: -999px; top: 8px; background: var(--inkt); color: var(--zand); padding: .6rem 1rem; border-radius: 8px; z-index: 100; }
.overslaan:focus { left: 8px; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.45rem; border-radius: 999px; border: 1px solid transparent;
  font: 500 .98rem/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang);
}
.knop--vol { background: var(--koper); color: #fff; }
.knop--vol:hover { background: var(--koper-2); }
.knop--licht { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop--licht:hover { background: var(--inkt); color: var(--zand); }
.knop--wit { background: rgba(255, 253, 249, .14); color: #fff; border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.knop--wit:hover { background: #fff; color: var(--inkt); }
.knop--tekst { background: none; border: 0; padding: .85rem .4rem; color: var(--koper-tekst); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.knop--tekst:hover { color: var(--koper-2); }
.knop--groot { padding: 1rem 1.8rem; font-size: 1.04rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.knoppen--midden { justify-content: center; }

/* ---------- kop ---------- */
/* De waas (blur) staat op een laag ACHTER de kopbalk, niet op de kopbalk zelf. Een blur op de kopbalk maakt de kopbalk
   het kader van alles wat erin "vast" staat (position: fixed), en dan krijgt het telefoonmenu de hoogte van de kopbalk
   in plaats van het scherm: Anne zag op 20-10-2026 een menu van 51 px met alleen "Kamers" half in beeld. */
.kop { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: border-color var(--overgang); }
.kop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(242, 236, 230, .9); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); }
.kop.is-stuck { border-bottom-color: var(--lijn); }
.kop__binnen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
/* In de kopbalk het beeldmerk (16/91 met het anker) met de naam ernaast: het hele logo zou hier te klein worden om te
   lezen. Het hele logo staat groot bovenaan op de foto en in de voet. */
.merk { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.merk__beeld { width: auto; height: 44px; }
.merk__tekst { display: flex; flex-direction: column; gap: .2rem; line-height: 1.1; padding-left: .8rem; border-left: 1px solid var(--greige); }
.merk__naam { font: 600 .92rem/1.1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--inkt); }
.merk__plaats { font: 400 .72rem/1.2 var(--sans); letter-spacing: .04em; color: var(--inkt-3); }
.kop__cta { display: none; }
.nav__lijst { list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.nav__lijst a { display: block; padding: .8rem 0; text-decoration: none; font-size: 1.35rem; font-family: var(--serif); font-weight: 500; border-bottom: 1px solid var(--lijn); }
.nav__lijst a.is-actief { color: var(--koper); }
.nav__onder { display: grid; gap: .8rem; margin-top: 1.4rem; }
.nav__tel { color: var(--inkt-2); text-decoration: none; font-size: .95rem; text-align: center; }
.nav { position: fixed; inset: 72px 0 0; background: var(--zand); padding: 1.2rem var(--gutter) 2rem; overflow: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--overgang), transform var(--overgang), visibility 0s linear .25s; }
.nav.is-open { transform: none; opacity: 1; visibility: visible; transition: opacity var(--overgang), transform var(--overgang); }
.burger { width: 44px; height: 44px; border: 0; background: none; display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 22px; height: 2px; background: var(--inkt); border-radius: 2px; transition: transform var(--overgang), opacity var(--overgang); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; height: min(84svh, 820px); min-height: 560px; overflow: hidden; background: var(--bruin-2); }
/* De slideshow: de dia's liggen op elkaar en vloeien in elkaar over; de actieve zoomt heel langzaam uit */
.hero__beeld { position: absolute; inset: 0; }
.dia { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.dia.is-actief { opacity: 1; }
/* 21-10 (Robbie: "heel erg ingezoomd"): geen zoom meer, en ruimere uitsneden in beeld.mjs */
.dia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Heel brede schermen (Robbies scherm is 2560 breed): de foto past dan niet meer zonder dat de helft wegvalt. Dan staat de
   hele foto rechts en loopt hij links zacht over in het bruin, waar het logo en de tekst staan. */
.hero__beeld { container-type: size; }
@container (min-aspect-ratio: 23/10) {
  .dia img { object-fit: contain; object-position: 100% 50%; -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 214cqh), #000 calc(100% - 214cqh + 60cqh)); mask-image: linear-gradient(90deg, transparent calc(100% - 214cqh), #000 calc(100% - 214cqh + 60cqh)); }
}
.dia__knoppen { position: absolute; right: var(--gutter); bottom: 22px; z-index: 3; display: flex; align-items: center; gap: .2rem; padding: 4px 8px 4px 4px; border-radius: 999px; background: rgba(46, 36, 30, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dia__knoppen[hidden] { display: none; }
.dia__pauze { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; display: grid; place-content: center; }
.dia__pauze span { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.dia__pauze.is-stil span { width: 0; height: 0; border-style: solid; border-width: 6.5px 0 6.5px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.dia__pauze:hover { background: rgba(255, 255, 255, .14); }
.dia__stippen { display: flex; align-items: center; }
.dia__stip { width: 24px; height: 36px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-content: center; }
.dia__stip::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55); transition: width var(--overgang), background var(--overgang); }
.dia__stip[aria-current="true"]::before { width: 20px; background: #fff; }
.dia__knoppen :focus-visible { outline-color: #fff; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .dia { transition: none; } }
/* De waas in het bruin van het logo: van onder en van links, zodat het logo en de tekst goed leesbaar zijn */
.hero__waas { position: absolute; inset: 0; background: linear-gradient(to top, rgba(74, 58, 47, .7) 0%, rgba(74, 58, 47, .25) 38%, rgba(74, 58, 47, 0) 62%), linear-gradient(to right, rgba(74, 58, 47, .88) 0%, rgba(74, 58, 47, .74) 30%, rgba(74, 58, 47, .3) 50%, rgba(74, 58, 47, 0) 64%); }
.hero__tekst { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(34px, 7vw, 72px); color: #fff; }
.hero__logo { display: block; width: clamp(250px, 27vw, 380px); height: auto; margin: 0 0 1.6rem; }
.hero__logo--licht { filter: drop-shadow(0 2px 16px rgba(40, 30, 24, .35)); }
.hero__logo--donker { display: none; }
.hero__kop { font-size: clamp(1.8rem, 3.2vw, 2.7rem); color: #fff; margin: 0 0 .5rem; max-width: 20ch; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: rgba(255, 253, 249, .92); max-width: 44ch; margin: 0 0 1.5rem; text-wrap: pretty; }
/* Op de telefoon staat de huisfoto heel in beeld (geen uitsnede) en de tekst eronder, in plaats van erover. */
@media (max-width: 700px) {
  .hero { height: auto; min-height: 0; background: var(--zand); overflow: visible; }
  .hero__beeld { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zand-2); }
  .dia__knoppen { right: 8px; bottom: 8px; padding: 2px 6px 2px 2px; }
  .dia__pauze { width: 30px; height: 30px; }
  .dia__pauze span { width: 8px; height: 10px; border-left-width: 2.5px; border-right-width: 2.5px; }
  .dia__stip { width: 16px; height: 30px; }
  .dia__stip::before { width: 6px; height: 6px; }
  .dia__stip[aria-current="true"]::before { width: 14px; }
  .hero__waas { display: none; }
  .hero__tekst { height: auto; display: block; padding: 30px 0 34px; color: var(--inkt); }
  .hero__logo--licht { display: none; }
  .hero__logo--donker { display: block; width: min(290px, 74vw); margin-bottom: 1.4rem; }
  .hero__tekst .eyebrow--licht { color: var(--koper-tekst); }
  .hero__kop { color: var(--inkt); text-shadow: none; }
  .hero__lead { color: var(--inkt-2); }
  .hero .knop--wit { background: transparent; color: var(--inkt); border-color: var(--inkt); backdrop-filter: none; }
}

/* ---------- welkom ---------- */
/* Welkom: alleen "Welkom" en de tekst (de kop is weg, 21-10-2026); op de computer de twee alinea's naast elkaar */
.welkom__binnen { display: block; }
.welkom__kop { margin-bottom: 1.3rem; font-size: clamp(.95rem, 1.3vw, 1.1rem); letter-spacing: .22em; }   /* 21-10: iets groter (Robbie) */
.welkom__tekst .tekst { max-width: 62ch; font-size: 1.08rem; line-height: 1.7; }
.welkom__tekst .tekst:last-child { margin-bottom: 0; }
/* Vroeger en nu: twee foto's naast elkaar (op de telefoon onder elkaar), met een labeltje; tik om te vergroten */
.paar { display: grid; gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(34px, 5vw, 56px); }
.paar__foto { margin: 0; }
.paar__link { position: relative; display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); aspect-ratio: 4 / 3; background: var(--zand-2); cursor: zoom-in; }
.paar__link img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.paar__link:hover img { transform: scale(1.03); }
.paar__label { position: absolute; left: 14px; top: 14px; padding: .4rem .85rem; border-radius: 999px; background: var(--bruin); color: var(--creme); font: 600 .72rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.paar__foto:last-child .paar__label { background: var(--creme); color: var(--bruin-2); }
.paar__foto figcaption { margin-top: .6rem; font-size: .9rem; color: var(--inkt-3); max-width: 52ch; }
.feiten { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--greige); }
.feit { display: grid; gap: .15rem; }
.feit__kop { font: 500 1.6rem/1.1 var(--serif); color: var(--inkt); }
.feit__tekst { font-size: .9rem; color: var(--inkt-3); }

/* ---------- kaarten (kamers) ---------- */
/* Icoontjes (lijntekeningen uit delen/iconen.html; de verzameling zelf staat onzichtbaar bovenaan de pagina) */
.iconen { display: none; }
.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* De kamerkaarten: als een product dat je verkoopt, maar elegant (Robbie, 15-10-2026): grote foto met een label,
   de eigenschappen met een icoontje, "Kies deze kamer" als de hoofdknop. */
.kaarten { display: grid; gap: clamp(20px, 3vw, 32px); }
.kaart { background: var(--wit); border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; }
.kaart--kamer:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(43, 36, 32, .13); }
.kaart__beeld { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--zand-2); }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.kaart:hover .kaart__beeld img { transform: scale(1.04); }
.kaart__label { position: absolute; left: 14px; top: 14px; padding: .4rem .75rem; border-radius: 999px; background: rgba(255, 253, 249, .94); color: var(--koper-tekst); font: 600 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(43, 36, 32, .12); }
.kaart__fotos { position: absolute; right: 14px; bottom: 14px; padding: .3rem .65rem; border-radius: 999px; background: rgba(43, 36, 32, .6); color: #fff; font-size: .76rem; font-variant-numeric: lining-nums; }
.kaart__tekst { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; flex: 1; }
.kaart__nr { font: 600 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--koper-tekst); margin: 0 0 .4rem; }
.kaart__naam { font-size: 2.1rem; margin: 0 0 .5rem; }
.kaart__naam a { text-decoration: none; }
.kaart__naam a:hover { color: var(--koper); }
.kaart__kort { color: var(--inkt-2); margin: 0 0 1.1rem; font-size: .98rem; }
.specs { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; margin: 0 0 1.4rem; padding: 1rem 0 0; border-top: 1px solid var(--lijn); }
.spec { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; line-height: 1.35; color: var(--inkt-2); }
.spec .ico { width: 1.15rem; height: 1.15rem; color: var(--koper); margin-top: .05rem; }
.kaart__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: auto; }
.kaart__knoppen .knop { flex: 1 1 auto; justify-content: center; }

/* ---------- het huis: de tijdlijn met oude beelden ---------- */
.huis .sectie__kop .lead { margin-bottom: .8rem; }
.huis__onder, .omgeving__onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(28px, 4vw, 44px); }
/* ---------- de film van vroeger (21-10-2026) ----------
   Een donkere filmstrook met perforatie boven en onder (die schuift mee), korrel en een licht flikkerend schijnsel.
   De rol loopt met een CSS-animatie; script.js zet hem dubbel en rekent de duur uit (--duur). */
.huis__kop { margin-bottom: clamp(24px, 3.5vw, 36px); }
.film { position: relative; background: #1d1612; }
.film__venster { position: relative; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.film__venster::-webkit-scrollbar { display: none; }
.film__rol { list-style: none; margin: 0; padding: 34px 0 30px; display: flex; align-items: flex-start; width: max-content; position: relative; }
/* perforatie: lichte gaatjes langs de boven- en onderrand van de rol */
.film__rol::before, .film__rol::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(232, 222, 213, .42) 9px 21px, transparent 21px 32px); border-radius: 2px; pointer-events: none; }
.film__rol::before { top: 11px; }
.film__rol::after { bottom: 9px; }
.film__beeld { flex: 0 0 auto; margin-right: 16px; }
.film__beeld figure { margin: 0; display: flex; flex-direction: column; width: min-content; }
.film__link { display: block; border-radius: 3px; overflow: hidden; cursor: zoom-in; background: #2a201a; }
.film__link img { display: block; height: clamp(170px, 22vw, 290px); width: auto; max-width: none; filter: sepia(.22) contrast(1.05) saturate(.88); transition: filter .4s ease; }
.film__link:hover img, .film__link:focus-visible img { filter: none; }
.film__link:hover { box-shadow: 0 0 0 2px var(--creme); }
.film__beeld figcaption { margin-top: .65rem; min-width: 16ch; font: italic 400 1rem/1.35 var(--serif); color: var(--creme-2); }
/* korrel en flikkering over de hele strook */
.film__venster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/afbeeldingen/korrel.png"); opacity: .1; mix-blend-mode: overlay; animation: film-korrel .6s steps(3) infinite; }
.film__venster::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 140% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%); animation: film-flikker 2.4s steps(1) infinite; }
@keyframes film-korrel { 0% { background-position: 0 0; } 33% { background-position: -60px 40px; } 66% { background-position: 50px -70px; } 100% { background-position: 0 0; } }
@keyframes film-flikker { 0%, 100% { opacity: 1; } 8% { opacity: .82; } 9% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 73% { opacity: .86; } 74% { opacity: 1; } }
/* met JavaScript: de rol loopt vanzelf (zonder naad: de tweede helft is een kopie) */
.film.is-rol .film__venster { overflow: hidden; }
.film.is-rol .film__rol { animation: film-loop var(--duur, 120s) linear infinite; }
/* 21-10 (Robbie): bij de muis erop loopt de film door; hij staat stil met de pauzeknop, of even zolang een foto groot open is */
.film.is-stil .film__rol, .film.is-open .film__rol { animation-play-state: paused; }
@keyframes film-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.film__pauze { position: absolute; right: var(--gutter); bottom: 12px; z-index: 3; display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(232, 222, 213, .16); color: var(--creme); cursor: pointer; place-content: center; }
.film.is-rol .film__pauze { display: grid; }
.film__pauze:hover { background: rgba(232, 222, 213, .28); }
.film__pauze span { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.film.is-stil .film__pauze span { width: 0; height: 0; border-style: solid; border-width: 6.5px 0 6.5px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.film__pauze:focus-visible { outline-color: var(--creme); }
.film-sectie { padding-bottom: 0; }
.film-sectie .film { margin-bottom: 0; }
.huis .film { margin-bottom: 0; }
/* de pagina Het huis: het verhaal in één kolom, aan het eind het huis nu */
.verhaal__tekst { max-width: 70ch; }
.verhaal__links { min-width: 0; }
/* computer: een staande foto (de voordeur) niet hoger dan 400 px, zodat de kolom rechts niet ver onder de foto van nu doorloopt */
@media (min-width: 900px) { .verhaal__link img { max-height: 400px; object-fit: cover; object-position: 50% 55%; } }
.verhaal__nu { margin: clamp(28px, 4vw, 44px) 0 0; }
.verhaal__nulink { position: relative; display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); cursor: zoom-in; }
.verhaal__nulink img { display: block; width: 100%; height: auto; }
.verhaal__nu figcaption { margin-top: .6rem; font-size: .92rem; color: var(--inkt-3); }
.paar__label--licht { background: var(--creme); color: var(--bruin-2); }
/* De tijdlijn: een lijn met een stip per jaartal, het jaartal groot in de serif, de tekst in een kaart ernaast.
   Een foto alleen als die van het huis zelf is (Robbie, 14-10-2026: geen foto's van andere gebouwen of plekken). */
.tijd { list-style: none; position: relative; display: grid; gap: clamp(22px, 3vw, 30px); padding-left: 34px; max-width: 880px; }
.tijd::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--greige); }
.tijd__stap { position: relative; }
.tijd__stap::before { content: ""; position: absolute; left: -30px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--koper); box-shadow: 0 0 0 4px var(--zand); }
.tijd__jaar { margin: 0 0 .5rem; font: 400 2.2rem/1 var(--cijfer); color: var(--koper-tekst); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.tijd__kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: clamp(16px, 2.5vw, 24px); box-shadow: var(--schaduw); }
.tijd__figuur { margin: 0 0 1rem; }
.tijd__figuur img { width: 100%; height: auto; border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 25%; }   /* 25%: de top van de gevel blijft in beeld als een 4:3-foto in 16:10 valt */
.tijd__figuur figcaption { margin-top: .55rem; font-size: .84rem; color: var(--inkt-3); font-style: italic; }
.tijd__figuur--staand img { aspect-ratio: 1 / 1; object-position: center 22%; }
.tijd__tekst { margin: 0; color: var(--inkt-2); font-size: 1rem; line-height: 1.6; }
.tijd--groot .tijd__figuur img { aspect-ratio: 4 / 3; }
.tijd--groot .tijd__tekst { font-size: 1.08rem; }
.tijdlijn { list-style: none; margin: 1.8rem 0 2rem; border-left: 1px solid var(--greige); display: grid; gap: 1.1rem; }
.tijdlijn__stap { position: relative; padding-left: 1.6rem; display: grid; gap: .1rem; }
.tijdlijn__stap::before { content: ""; position: absolute; left: -5px; top: .62rem; width: 9px; height: 9px; border-radius: 50%; background: var(--koper); }
.tijdlijn__jaar { font: 500 1.45rem/1.1 var(--serif); color: var(--inkt); }
.tijdlijn__tekst { font-size: .98rem; color: var(--inkt-2); max-width: 52ch; }
.tijdlijn--breed { border-left: 0; gap: 0; max-width: 820px; }
.tijdlijn--breed .tijdlijn__stap { grid-template-columns: 110px 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--greige); }
.tijdlijn--breed .tijdlijn__stap::before { display: none; }
.tijdlijn--breed .tijdlijn__jaar { font-size: 1.9rem; color: var(--koper); }
.tijdlijn--breed .tijdlijn__tekst { max-width: 62ch; font-size: 1.05rem; }

/* ---------- ontbijt: foto met de tijd erop, lijst ernaast ---------- */
.ontbijt__binnen { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ontbijt__beelden { position: relative; padding-bottom: 22%; }
.ontbijt__beeld { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); aspect-ratio: 4 / 3; }
.ontbijt__beeld img { width: 100%; height: 100%; object-fit: cover; }
.ontbijt__beeld2 { margin: 0; position: absolute; right: 0; bottom: 0; width: 46%; border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); border: 6px solid var(--wit); aspect-ratio: 4 / 3; }
.ontbijt__beeld2 img { width: 100%; height: 100%; object-fit: cover; }
.ontbijt__badge { position: absolute; left: 18px; bottom: 18px; background: rgba(255, 253, 249, .92); backdrop-filter: blur(6px); border-radius: 14px; padding: .8rem 1.1rem .7rem; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(43, 36, 32, .14); }
.ontbijt__cijfers { font: 400 clamp(1.9rem, 3.6vw, 2.4rem)/1 var(--cijfer); color: var(--koper-tekst); letter-spacing: -.01em; }
.ontbijt__uur { font-size: .8rem; color: var(--inkt-3); margin-top: .2rem; }
.ontbijt__feiten { list-style: none; display: grid; gap: .7rem; margin: .4rem 0 1.5rem; }
.ontbijt__feit { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .85rem; align-items: center; padding: .7rem .9rem; background: var(--zand); border: 1px solid var(--lijn); border-radius: 12px; }
.ontbijt__icoon { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; background: var(--koper-licht); color: var(--koper-tekst); display: grid; place-content: center; }
.ontbijt__icoon .ico { width: 1.35rem; height: 1.35rem; }
.ontbijt__feitkop { font: 500 1.15rem/1.15 var(--serif); color: var(--inkt); font-variant-numeric: lining-nums; }
.ontbijt__feittekst { font-size: .85rem; color: var(--inkt-3); }
.ontbijt__lijstkop { margin: 0 0 .6rem; font: 600 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--koper-tekst); }
.ontbijt__lijst { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.ontbijt__lijst li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem .45rem .65rem; border-radius: 999px; background: var(--wit); border: 1px solid var(--greige); color: var(--inkt-2); font-size: .9rem; }
.ontbijt__lijst .ico { color: var(--koper); width: 1.1rem; height: 1.1rem; }

/* ---------- omgeving: kaarten met een foto ---------- */
.plekken { list-style: none; display: grid; gap: clamp(18px, 3vw, 28px); }
.plek { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); display: flex; flex-direction: column; }
.plek__beeld { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--zand-2); }
.plek__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.plek:hover .plek__beeld img { transform: scale(1.04); }
.plek__afstand { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: .35rem .7rem; border-radius: 999px; background: rgba(255, 253, 249, .92); color: var(--koper-tekst); font: 600 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.plek__tekst { padding: clamp(16px, 2.4vw, 22px); }
.plek__naam { font-size: 1.5rem; margin: 0 0 .4rem; }
.plek__uitleg { color: var(--inkt-2); margin: 0; font-size: .95rem; line-height: 1.55; }

/* ---------- de tuin: vier staande foto's van Anne (20-10-2026) ---------- */
/* 21-10-2026 (Robbie): iets groter, en tik om te vergroten. Telefoon: een strook om te vegen (groot, ±80% breed);
   computer: vier naast elkaar, breder dan de rest van de pagina. */
.tuinfotos { list-style: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.tuinfotos::-webkit-scrollbar { display: none; }
.tuinfoto { flex: 0 0 min(80%, 340px); scroll-snap-align: start; }
.tuinfoto figure { margin: 0; }
.tuinfoto__link { position: relative; display: block; border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.tuinfoto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--zand); transition: transform .7s ease; }
.tuinfoto__link:hover img { transform: scale(1.04); }
.vergroot { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(46, 36, 30, .55); color: #fff; display: grid; place-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background var(--overgang); }
.vergroot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tuinfoto__link:hover .vergroot { background: var(--bruin); }
.tuinfoto figcaption { margin-top: .6rem; font-size: .92rem; color: var(--inkt-2); }
@media (min-width: 640px) { .tuinfoto { flex-basis: 44%; } }
@media (min-width: 900px) {
  .tuinfotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; margin-inline: 0; width: min(100vw - 2 * var(--gutter), 1400px); position: relative; left: 50%; transform: translateX(-50%); }
}

/* ---------- gasten: score in een ring, deelscores als balken, citaten met een groot aanhalingsteken ---------- */
.gasten__binnen { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* De score van Booking.com als kaart: de bron staat erboven, de score groot in een kopervlak, de deelscores als
   balken, een link naar alle beoordelingen (Robbie, 15-10-2026: laat duidelijk zien dat het van Booking.com komt). */
.bron { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--schaduw); max-width: 420px; }
.bron__kop { margin: 0 0 1rem; font: 600 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--koper-tekst); }
.bron__rij { display: flex; align-items: center; gap: 1rem; }
.bron__cijfer { flex: 0 0 auto; width: 78px; height: 78px; border-radius: 16px 16px 16px 4px; background: var(--bruin); color: var(--creme); display: grid; place-content: center; font: 400 2.1rem/1 var(--cijfer); font-variant-numeric: lining-nums; box-shadow: 0 10px 24px rgba(74, 58, 47, .3); }
.bron__tekst { display: grid; gap: .15rem; }
.bron__tekst strong { font: 500 1.7rem/1.05 var(--serif); color: var(--inkt); }
.bron__tekst span { font-size: .92rem; color: var(--inkt-3); font-variant-numeric: lining-nums; }
.bron__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--lijn); width: 100%; font-size: .92rem; font-weight: 600; color: var(--inkt); text-decoration: none; }
.bron__link:hover { color: var(--koper-tekst); }
.bron__link .ico { color: var(--koper); }
.bron__datum { margin: .5rem 0 0; font-size: .8rem; color: var(--inkt-3); }
.balken { list-style: none; display: grid; gap: .7rem; margin-top: 1.3rem; }
.balk { display: grid; grid-template-columns: 6.2rem 1fr 2.4rem; align-items: center; gap: .7rem; font-size: .92rem; color: var(--inkt-2); }
.balk__spoor { display: block; height: 8px; border-radius: 999px; background: var(--greige); overflow: hidden; }
.balk__vul { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--koper); transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
.balk__score { text-align: right; color: var(--inkt); font-variant-numeric: lining-nums tabular-nums; }
.quotes { display: grid; gap: clamp(16px, 2.5vw, 24px); }
.quote { margin: 0; position: relative; background: var(--wit); border-radius: var(--r); padding: clamp(26px, 3.4vw, 34px) clamp(22px, 3vw, 30px) clamp(20px, 3vw, 26px); border: 1px solid var(--lijn); box-shadow: var(--schaduw); overflow: hidden; }
.quote::before { content: "\201C"; position: absolute; left: 18px; top: -14px; font: 500 6rem/1 var(--serif); color: var(--koper-licht); pointer-events: none; }
.quote__tekst { position: relative; margin: 0 0 1.1rem; font: 500 1.24rem/1.45 var(--serif); color: var(--inkt); }
.quote__wie { display: flex; align-items: center; gap: .7rem; font-size: .92rem; font-weight: 600; color: var(--inkt); padding-top: .9rem; border-top: 1px solid var(--lijn); }
.quote__naam { display: flex; align-items: baseline; gap: .5rem; line-height: 1.25; }
.quote__naam span { font-weight: 400; color: var(--inkt-3); font-size: .82rem; }
.quote__naam span::before { content: "·"; margin-right: .5rem; color: var(--greige); }

/* ---------- goed om te weten ---------- */
/* Goed om te weten: tegels met een icoontje (Robbie, 15-10-2026) */
.punten { list-style: none; display: grid; gap: clamp(14px, 2vw, 20px); margin: 0; }
.punt { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: clamp(18px, 2.4vw, 24px); box-shadow: var(--schaduw); border-top: 3px solid var(--koper); }

.punt__titel { font: 500 1.4rem/1.15 var(--serif); margin: 0 0 .4rem; }
.punt__tekst { margin: 0; color: var(--inkt-2); font-size: .95rem; line-height: 1.55; }
.colofon__lijst { padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--inkt-2); font-size: .95rem; max-width: 70ch; margin-bottom: 1.6rem; }

/* ---------- aanvragen (formulier): drie stappen en het overzicht "Uw aanvraag" ---------- */
.aanvraag { display: grid; gap: 20px; }
.aanvraag__stappen { display: grid; gap: 20px; min-width: 0; max-width: 100%; }
.stap { border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wit); padding: clamp(18px, 3vw, 30px); margin: 0; min-width: 0; display: grid; gap: 1.1rem; box-shadow: var(--schaduw); }
.stap__kop { padding: 0; margin: 0 0 .2rem; display: flex; align-items: center; gap: .8rem; }
.stap__nr { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--koper); color: #fff; font: 600 1rem/1 var(--sans); display: grid; place-content: center; font-variant-numeric: lining-nums; }
.stap__titel { font: 500 clamp(1.35rem, 2.2vw, 1.7rem)/1.1 var(--serif); color: var(--inkt); }
.kies { display: grid; gap: 16px; min-width: 0; }
.kijker--keuze .kijker__beeld { cursor: zoom-in; }
.kijker__geen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(43, 36, 32, .5); backdrop-filter: blur(2px); }
.kijker__geen p { margin: 0; max-width: 24ch; text-align: center; background: var(--zand); color: var(--inkt); border-radius: 12px; padding: 1rem 1.2rem; font: 500 1.1rem/1.35 var(--serif); }
.kijker.is-geen .kijker__geen { display: flex; }
.kijker.is-geen .kijker__pijl { display: none; }
.kamerrijen { display: grid; gap: .6rem; align-content: start; }
.kamerrij { position: relative; cursor: pointer; }
.kamerrij input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kamerrij__kaart { display: grid; grid-template-columns: 64px minmax(0, 1fr) 26px; gap: .8rem; align-items: center; padding: .55rem .7rem .55rem .55rem; border: 1.5px solid var(--greige); border-radius: 12px; background: var(--zand); transition: border-color var(--overgang), box-shadow var(--overgang), background var(--overgang); }
.kamerrij__kaart img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.kamerrij__icoon { width: 64px; height: 64px; border-radius: 8px; background: var(--zand-2); color: var(--koper-tekst); font: 500 1.8rem/1 var(--serif); display: grid; place-content: center; }
.kamerrij__tekst { display: grid; gap: .1rem; min-width: 0; }
.kamerrij__naam { font: 500 1.2rem/1.1 var(--serif); color: var(--inkt); }
.kamerrij__info { font-size: .82rem; color: var(--inkt-3); line-height: 1.3; }
.kamerrij__vink { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--greige); background: var(--wit); position: relative; transition: background var(--overgang), border-color var(--overgang); }
.kamerrij__vink::after { content: ""; position: absolute; left: 6px; top: 4px; width: 7px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); opacity: 0; }
.kamerrij:hover .kamerrij__kaart { border-color: var(--inkt-3); }
.kamerrij input:checked + .kamerrij__kaart { border-color: var(--koper); background: var(--wit); box-shadow: 0 0 0 3px var(--koper-licht); }
.kamerrij input:checked + .kamerrij__kaart .kamerrij__vink { background: var(--koper); border-color: var(--koper); }
.kamerrij input:checked + .kamerrij__kaart .kamerrij__vink::after { opacity: 1; }
.kamerrij input:focus-visible + .kamerrij__kaart { outline: 2px solid var(--koper); outline-offset: 2px; }
.kamerrijen.is-ongeldig .kamerrij__kaart { border-color: #b4423a; }
.overzicht { background: var(--bruin); color: var(--creme-2); border-radius: var(--r); padding: clamp(22px, 3vw, 30px); display: grid; gap: 1rem; align-content: start; box-shadow: 0 16px 40px rgba(74, 58, 47, .22); }
.overzicht__kop { margin: 0; font: 500 1.6rem/1.1 var(--serif); color: var(--creme); }
.overzicht__lijst { margin: 0; display: grid; }
.overzicht__rij { display: grid; grid-template-columns: 5.5rem 1fr; gap: .6rem; padding: .7rem 0; border-top: 1px solid rgba(232, 222, 213, .2); }
.overzicht__rij:last-child { border-bottom: 1px solid rgba(232, 222, 213, .2); }
.overzicht__rij dt { font: 600 .72rem/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--creme-2); }
.overzicht__rij dd { margin: 0; font: 500 1.05rem/1.4 var(--serif); color: var(--creme); font-variant-numeric: lining-nums; }
.overzicht .formulier__knop { width: 100%; }
.overzicht .knop--vol { background: var(--creme); color: var(--bruin-2); }
.overzicht .knop--vol:hover { background: #fff; }
.overzicht .formulier__status.is-ok { color: #9fd3a6; }
.overzicht .formulier__status.is-fout { color: #f3a99f; }
.overzicht__noot, .overzicht__contact { margin: 0; font-size: .88rem; color: var(--creme-2); }
.overzicht__contact a { color: var(--creme); }
.overzicht :focus-visible { outline-color: var(--creme); }
.veldrij { display: grid; gap: 1.1rem; min-width: 0; }
.veld { display: grid; gap: .35rem; min-width: 0; }
.veld label { font: 600 .85rem/1.3 var(--sans); color: var(--inkt); }
.veld__optioneel { font-weight: 400; color: var(--inkt-3); }
.veld input, .veld select, .veld textarea { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: .8rem .95rem; border: 1.5px solid var(--greige); border-radius: 10px; background: var(--wit); font: inherit; color: var(--inkt); min-height: 48px; transition: border-color var(--overgang), box-shadow var(--overgang); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 0; border-color: var(--koper); box-shadow: 0 0 0 3px var(--koper-licht); }
.veld textarea { resize: vertical; min-height: 110px; }
/* Datumvelden: op een telefoon krijgen ze van de browser een eigen minimumbreedte en steken ze rechts uit het blok
   (Robbie, 18-10-2026). Zonder de browseropmaak houden ze zich aan de breedte van het blok. */
.veld input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; min-height: 48px; }
.veld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.veld .is-ongeldig { border-color: #b4423a; }
.formulier__nachten { margin: -.4rem 0 0; min-height: 1.4em; font: 500 1.05rem/1.3 var(--serif); color: var(--koper-tekst); }
.vinkje { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .9rem; color: var(--inkt-2); }
.vinkje input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--koper); }
.vinkje.is-ongeldig span { color: #b4423a; }
.val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__knop { width: 100%; }
.formulier__status { margin: 0; min-height: 1.4em; font-size: .95rem; }
.formulier__status.is-ok { color: #2f6b3a; font-weight: 600; }
.formulier__status.is-fout { color: #b4423a; font-weight: 600; }

/* ---------- kamerpagina ---------- */
.phero { padding-top: clamp(28px, 4vw, 56px); }
.phero__binnen { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.phero--kamer .kruimels { margin-bottom: 1rem; }
.phero__feiten { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.2rem; margin: 0 0 1.6rem; padding: 1.2rem 0; border-top: 1px solid var(--greige); border-bottom: 1px solid var(--greige); }
.phero__feiten li { display: grid; gap: .1rem; font-size: .98rem; color: var(--inkt); }
.phero__label { font: 600 .7rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-3); }
.phero__beeld { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--schaduw); }
.phero__beeld img { width: 100%; height: 100%; object-fit: cover; }
.phero--tekst { padding-bottom: clamp(28px, 4vw, 56px); }
.kamerinfo__binnen { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.kamerinfo__kenmerken { background: var(--zand); border: 1px solid var(--lijn); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); }
.vinkjes { list-style: none; display: grid; gap: .55rem; margin: 0 0 1.2rem; }
.vinkjes li { position: relative; padding-left: 1.6rem; color: var(--inkt-2); }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--koper); border-bottom: 2px solid var(--koper); transform: rotate(-45deg); }
.kamerinfo__ontbijt { margin: 0; font-size: .95rem; color: var(--inkt-2); padding-top: 1rem; border-top: 1px solid var(--greige); }
/* De fotokijker op de kamerpagina, als een productpagina (Robbie, 14-10-2026): één grote foto, de kleine ernaast
   (op de telefoon eronder in een strook); klik op een kleine en die komt groot. Rechts de titel en de feiten. */
.product { display: grid; gap: clamp(24px, 4vw, 40px); }
.kijker { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "groot" "zij" "tekst"; }
.kijker__groot { grid-area: groot; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--zand-2); box-shadow: var(--schaduw); }
.kijker__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.kijker__beeld { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.kijker__beeld.is-wissel { opacity: 0; }
.kijker__pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 253, 249, .85); color: var(--inkt); font-size: 1.7rem; line-height: 1; display: grid; place-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(43, 36, 32, .18); transition: background var(--overgang); }
.kijker__pijl:hover { background: #fff; }
.kijker__pijl--vorige { left: 12px; }
.kijker__pijl--volgende { right: 12px; }
.kijker__teller { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: .3rem .65rem; border-radius: 999px; background: rgba(43, 36, 32, .62); color: #fff; font-size: .78rem; font-variant-numeric: lining-nums tabular-nums; }
.kijker__zij { grid-area: zij; min-width: 0; }
.kijker__thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; scrollbar-width: thin; }
.kijker__thumbs[hidden] { display: none; }   /* in het formulier: alleen de kleine foto's van de gekozen kamer */
.kijker__thumb { flex: 0 0 68px; aspect-ratio: 4 / 5; border-radius: 9px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--zand-2); cursor: pointer; opacity: .7; scroll-snap-align: start; transition: opacity var(--overgang), border-color var(--overgang); }
.kijker__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kijker__thumb:hover { opacity: 1; }
.kijker__thumb.is-actief { border-color: var(--koper); opacity: 1; }
.kijker__thumb:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; opacity: 1; }
.kijker__onderschrift { grid-area: tekst; margin: 0; font-size: .9rem; color: var(--inkt-3); min-height: 1.4em; }
.product__info .h1 { margin-top: .2rem; }
.product__info .phero__feiten { grid-template-columns: 1fr; gap: .7rem; }
.kaarten--twee { grid-template-columns: 1fr; }

/* ---------- lichtbak ---------- */
.lichtbak { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: rgba(22, 17, 14, .96); color: #fff; }
.lichtbak::backdrop { background: rgba(22, 17, 14, .6); }
.lichtbak__figuur { margin: 0; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 48px; }
.lichtbak__beeld { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lichtbak__tekst { margin-top: .8rem; font-size: .85rem; color: rgba(255, 255, 255, .75); text-align: center; max-width: 60ch; }
.lichtbak__sluit, .lichtbak__pijl { position: absolute; z-index: 2; border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1; display: grid; place-content: center; transition: background var(--overgang); }
.lichtbak__sluit:hover, .lichtbak__pijl:hover { background: rgba(255, 255, 255, .22); }
.lichtbak__sluit { top: 10px; right: 10px; }
.lichtbak__pijl { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lichtbak__pijl--vorige { left: 8px; }
.lichtbak__pijl--volgende { right: 8px; }

/* ---------- pagina het huis ---------- */
.verhaal__binnen { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.verhaal__zij { display: grid; gap: 18px; }
.verhaal__figuur { margin: 0; }
.verhaal__link { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); cursor: zoom-in; }
.verhaal__figuur img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.verhaal__link:hover img { transform: scale(1.03); }
/* telefoon en tablet: de fotootjes klein, twee bij twee, boven het verhaal (anders volgen ze op "Zo ziet het huis er nu uit") */
@media (max-width: 899px) {
  .verhaal__zij { order: -1; grid-template-columns: 1fr 1fr; gap: 12px; }
  .verhaal__link img { aspect-ratio: 4 / 3; object-fit: cover; }
  .verhaal__figuur figcaption { font-size: .78rem; line-height: 1.35; }
}
.verhaal__figuur figcaption { margin-top: .5rem; font-size: .84rem; color: var(--inkt-3); font-style: italic; }
.bronnen__lijst { padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--inkt-2); font-size: .95rem; max-width: 70ch; }
.bronnen__kop2 { margin-top: 2rem; }
.bronnen__noot { margin-top: 1.4rem; color: var(--inkt-2); font-size: .95rem; }
.uitnodiging__binnen { text-align: center; }
.uitnodiging .lead { margin-inline: auto; }
.tekstpagina { max-width: 72ch; }
.tekstpagina .h3 { margin-top: 2rem; }
.tekstpagina .h3:first-child { margin-top: 0; }

/* ---------- voet ---------- */
.voet { background: var(--bruin-2); color: var(--creme-2); padding: clamp(52px, 7vw, 88px) 0 0; }
.voet a { color: inherit; }
.voet :focus-visible { outline-color: var(--creme); }
.voet__binnen { display: grid; gap: clamp(28px, 4vw, 48px); }
.voet__logo { display: block; width: min(250px, 72vw); height: auto; margin: 0 0 1.6rem; }
.voet__slogan { max-width: 40ch; margin: 0 0 .8rem; }
.voet__gastvrouwen { font-family: var(--serif); font-size: 1.25rem; color: var(--creme); margin: 0; }
.voet__kop { font: 600 .74rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--creme); margin: 0 0 1rem; }
.voet__adres { font-style: normal; line-height: 1.75; }
.voet__route { display: inline-block; margin-top: .6rem; font-size: .92rem; }
.voet__lijst { list-style: none; display: grid; gap: .45rem; }
.voet__lijst a { text-decoration: none; }
.voet__lijst a:hover { color: #fff; text-decoration: underline; }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: clamp(32px, 5vw, 56px); padding: 1.2rem 0 1.4rem; border-top: 1px solid rgba(232, 222, 213, .18); font-size: .85rem; color: var(--creme-2); }
.voet__onder p { margin: 0; }

/* ---------- bruine vlakken (blok om blok met de lichte) ---------- */
.sectie--donker { background: var(--bruin); color: var(--creme-2); }
.sectie--donker :is(h2, h3, .h2, .h3) { color: #f6f0ea; }
.sectie--donker :is(.eyebrow, .lead, .tekst) { color: var(--creme-2); }
.sectie--donker :focus-visible { outline-color: var(--creme); }
.sectie--donker .knop--vol { background: var(--creme); color: var(--bruin-2); }
.sectie--donker .knop--vol:hover { background: #fff; }
.sectie--donker .knop--licht { color: var(--creme); border-color: rgba(232, 222, 213, .75); }
.sectie--donker .knop--licht:hover { background: var(--creme); color: var(--bruin-2); }
/* de tijdlijn op bruin: lijn en stippen in crème, de jaartallen groot in Bodoni, de kaarten als een lichte waas */
.sectie--donker .tijd::before { background: rgba(232, 222, 213, .3); }
.sectie--donker .tijd__stap::before { background: var(--creme); box-shadow: 0 0 0 4px var(--bruin); }
.sectie--donker .tijd__jaar { color: var(--creme); }
.sectie--donker .tijd__kaart { background: rgba(255, 253, 249, .06); border-color: rgba(232, 222, 213, .18); box-shadow: none; }
.sectie--donker .tijd__tekst, .sectie--donker .tijd__figuur figcaption { color: var(--creme-2); }
/* de tuin op bruin */
.sectie--donker .tuinfoto figcaption { color: var(--creme-2); }
.sectie--donker .tuinfoto img { box-shadow: 0 14px 34px rgba(30, 22, 17, .3); background: var(--bruin-2); }
/* de gasten op bruin: de kaarten blijven licht */
.sectie--donker :is(.bron, .quote) { border-color: transparent; box-shadow: 0 14px 34px rgba(30, 22, 17, .22); }
/* de kamerpagina: "Zo is het hier" op bruin, het kader "In de kamer" blijft licht */
.sectie--donker .kamerinfo__kenmerken { background: var(--wit); border-color: transparent; box-shadow: 0 14px 34px rgba(30, 22, 17, .22); }
.sectie--donker .kamerinfo__kenmerken :is(h3, .h3) { color: var(--inkt); }

/* ---------- balk onderaan op de telefoon ---------- */
.mobielbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: .6rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: rgba(242, 236, 230, .95); border-top: 1px solid var(--lijn); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform var(--overgang); }
.mobielbalk .knop--vol { flex: 1; }
.mobielbalk.is-weg { transform: translateY(110%); }
body { padding-bottom: 76px; }

/* ---------- binnenkomst ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-zichtbaar { opacity: 1; transform: none; }

/* ============================================================
   Bredere schermen
   ============================================================ */
@media (min-width: 640px) {
  .veldrij { grid-template-columns: 1fr 1fr; }
  .veldrij--drie { grid-template-columns: 1fr 1fr 1fr; }
  .kies { grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); align-items: start; }
  .feiten { grid-template-columns: repeat(3, 1fr); }
  .plekken { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr 1fr; }
  .punten { grid-template-columns: 1fr 1fr; }
  .kaarten--twee { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .mobielbalk { display: none; }
  .kop__cta { display: inline-flex; }
}

@media (min-width: 900px) {
  html { scroll-padding-top: 96px; }
  .kop__binnen { min-height: 84px; }
  .burger { display: none; }
  .nav { position: static; inset: auto; background: none; padding: 0; overflow: visible; transform: none; opacity: 1; visibility: visible; transition: none; }
  .nav__lijst { flex-direction: row; gap: clamp(.6rem, 1.6vw, 1.6rem); }
  .nav__lijst a { padding: .4rem 0; font: 500 .95rem/1.2 var(--sans); border-bottom: 0; position: relative; }
  .nav__lijst a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--koper); transform: scaleX(0); transform-origin: left; transition: transform var(--overgang); }
  .nav__lijst a:hover::after, .nav__lijst a.is-actief::after { transform: scaleX(1); }
  .nav__onder { display: none; }
  .welkom__tekst { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
  .welkom__tekst .tekst { margin: 0; }
  .paar { grid-template-columns: 1fr 1fr; }
  .feiten { grid-template-columns: repeat(5, 1fr); }
  .kaarten { grid-template-columns: repeat(3, 1fr); }
  /* De tijdlijn op de computer: de lijn in het midden, de kaarten om en om links en rechts */
  /* De tijdlijn op de computer: het jaartal links van de lijn, de kaart rechts */
  .tijd { padding-left: 0; }
  .tijd::before { left: 124px; }
  .tijd__stap { display: grid; grid-template-columns: 100px 1fr; column-gap: 50px; align-items: start; }
  .tijd__stap::before { left: 118px; top: 14px; }
  .tijd__jaar { margin: 0; text-align: right; font-size: 2.35rem; padding-top: .1rem; }
  .ontbijt__binnen { grid-template-columns: 1fr 1fr; }
  .ontbijt__lijst { grid-template-columns: 1fr 1fr; }
  .plekken { grid-template-columns: repeat(3, 1fr); }
  .gasten__binnen { grid-template-columns: .8fr 1.2fr; }
  .punten { grid-template-columns: repeat(3, 1fr); }
  .aanvraag { grid-template-columns: minmax(0, 1.75fr) minmax(280px, .85fr); gap: 28px; align-items: start; }
  .overzicht { position: sticky; top: 100px; }
  .kijker--keuze { grid-template-columns: minmax(0, 1fr) 64px; }
  .phero__binnen { grid-template-columns: 1fr 1fr; }
  /* Productpagina: kijker links (grote foto met de kleine in een kolom ernaast), titel en feiten rechts */
  .product { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .9fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; }
  .kijker { grid-template-columns: minmax(0, 1fr) 84px; grid-template-rows: auto auto; grid-template-areas: "groot zij" "tekst tekst"; gap: 10px 12px; }
  .kijker__zij { position: relative; }
  .kijker__thumbs { position: absolute; inset: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; padding: 2px; }
  .kijker__thumb { flex: 0 0 auto; width: 100%; }
  .kamerinfo__binnen { grid-template-columns: 1.2fr .8fr; }
  .verhaal__binnen { grid-template-columns: 1.3fr .7fr; }
  .voet__binnen { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1200px) {
  .hero__tekst { padding-bottom: 88px; }
  .punten { grid-template-columns: repeat(4, 1fr); }
  .kijker { grid-template-columns: minmax(0, 1fr) 96px; }
}

@media print {
  .kop, .mobielbalk, .hero__waas, .knop, .burger { display: none !important; }
  body { background: #fff; color: #000; }
}