/* ==========================================================================
   Het Huis Hiernaast — één stijlblad voor de vier taalpagina's.
   Geen bibliotheek, geen framework. Alles hieronder is met de hand geschreven.

   Kleuren zijn nagemeten (verhouding tegen hun achtergrond staat erbij).
   Onder 4,5:1 gebruiken we een kleur niet voor kleine tekst — die grens is
   waar tekst voor mensen met minder scherp zicht wegvalt.
   ========================================================================== */

@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-roman.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
/* De cursieve Fraunces staat er bewust NIET bij: geen enkel element gebruikt
   hem, en een lettertype dat je meelevert maar nooit gebruikt is 42 kB dat de
   klant voor niets host. Nodig je hem later: bestand terugzetten uit
   ../../../site/fonts/ en hier een @font-face met font-style:italic. */
@font-face{font-family:'Inter';src:url('/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* ⚠ 09/09 — dit stond nergens, en dat verklaart waarom de site op een telefoon
     in darkmode anders was dan op een laptop in lightmode. Zonder deze regel
     beslist de browser zelf hoe hij tekent wat WIJ niet tekenen, en hij volgt
     daarvoor de systeeminstelling van het toestel:
       · het kalendericoon en de datumtekst in `aankomst` en `vertrek`
       · de pijltjes in `personen`
       · de achtergrond die de browser bij automatisch invullen opdringt
       · de schuifbalk van de pagina
     Onze eigen velden hebben wél kleuren (`--licht` met `--inkt`), dus in
     darkmode tekende de browser een LICHT icoon op onze LICHTE achtergrond.
     `light` en niet `dark`: het formulier staat op een lichte sectie, dus de
     widgets van de browser horen daarbij te passen. Onze donkere secties hebben
     hier niets van te vrezen — die kleuren zetten we allemaal zelf.
     Dit zet ook Chrome's automatische verdonkering stil, die pagina's zonder
     deze verklaring op eigen initiatief herkleurt. */
  color-scheme:light;

  --nacht:#141a16;      /* donkere secties                                   */
  --diep:#1c241e;       /* tweede donkere toon                               */
  --steen:#ece5d8;      /* lichte secties — warm, geen wit                   */
  --licht:#f6f2e9;

  --inkt:#20261f;       /* tekst op licht          12,3:1                    */
  --grijs:#4e5a4a;      /* bijtekst op licht        5,8:1                    */
  --mos:#a3b09b;        /* bijtekst op donker       7,0:1                    */

  --vuur:#c86a34;       /* accent, grote tekst                               */
  --vlam:#e29a5e;       /* accent op donker. ⚠ Was #d4813f (5,3:1 op --diep).
                           De achtergrondlaag met de pentekening licht de sectie
                           op tot #3a403b op haar dichtste arceringen, en daar
                           zakte #d4813f naar 3,55:1 — te weinig voor de labels
                           van 12 px. Dekking verlagen loste het niet op (zelfs
                           op 0,06 nog 4,45). Deze kleur haalt 4,56 op de laag,
                           6,83 op de gewone sectie, en 7,58 voor donkere inkt
                           op de reserveerknop.                              */
  --roest:#a04f1f;      /* accent op licht          4,6:1                    */
  --lijn:rgba(236,229,216,.18);
  --lijn-licht:rgba(32,38,31,.16);

  --display:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --tekst:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:52px; --s6:84px;
  --rand:clamp(16px,4.5vw,64px);   /* zijmarge, overal dezelfde              */
  --kop:64px;                      /* hoogte van de vaste balk               */
}

*,*::before,*::after{box-sizing:border-box}
/* ⚠ Hier stond `html{scroll-behavior:smooth}`. Dat leest goed op een korte
   pagina, maar deze is 20.000 px hoog: op "Reserveren" klikken werd een
   vloeiende reis van 18.000 px waarin de bezoeker een halve minuut door zijn
   eigen foto's suist en niet meer weet waar hij is. Bovendien maakte het elke
   programmatische sprong asynchroon, waardoor een pagina die met #prijzen in de
   adresbalk werd geopend nooit aankwam. Instant springen is hier de dienst. */
body{
  margin:0;background:var(--nacht);color:var(--steen);
  font-family:var(--tekst);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.06;
  letter-spacing:-.005em}
h1{font-variation-settings:'opsz' 144}
h2{font-variation-settings:'opsz' 120}
h3{font-variation-settings:'opsz' 48}
p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
img{display:block;max-width:100%}
a{color:inherit}

/* Eén grade over alle foto's. Ze komen uit tien jaar telefoons en camera's;
   zonder deze correctie leest de reeks als een mapje downloads. */
.foto{filter:saturate(.92) contrast(1.04)}

/* ------------------------------------------------ toegankelijkheid */
.overslaan{position:absolute;left:-9999px;top:0;z-index:99;background:var(--steen);
  color:var(--nacht);padding:14px 20px;font-weight:600}
.overslaan:focus{left:0}
:focus-visible{outline:3px solid var(--vlam);outline-offset:3px;border-radius:2px}
.enkel-tekst{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* De korrel ligt over alles, ook over de foto's. Hij verdoezelt dat de
   originelen klein zijn: hun scherpte houdt op rond 1100 px breed. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ------------------------------------------------ kicker / labels */
.kicker{font-family:var(--tekst);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--vlam);display:flex;align-items:center;gap:12px;margin:0 0 var(--s3);font-weight:600}
.kicker::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.licht .kicker{color:var(--roest)}

/* ------------------------------------------------ vaste kopbalk */
.balk{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
  gap:var(--s3);padding:0 var(--rand);min-height:var(--kop);
  /* ⚠ Hier stond ook `background .3s ease` in de overgang. Weggehaald, en dat is
     een bewuste ruil: de balk draagt lichte tekst, en boven een lichte sectie is
     die alleen leesbaar dankzij de donkere achtergrond die `.vast` geeft. Een
     achtergrond die zich invádet, hangt af van een overgang die kan blijven
     hangen — Chrome pauzeert overgangen in een tabblad op de achtergrond
     (nagemeten: na 210 s stond hij nog op 0,537 in plaats van 0,94). Zo'n
     faalpad wil je niet in de belangrijkste balk van de site. Nu staat hij er
     meteen. Niemand mist die 0,3 seconde. */
  transition:box-shadow .3s ease}
.balk.vast{background:rgba(20,26,22,.94);box-shadow:0 1px 0 var(--lijn);
  backdrop-filter:blur(8px)}
.merk{font-family:var(--display);font-size:clamp(19px,2.4vw,24px);color:var(--steen);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  font-variation-settings:'opsz' 36;white-space:nowrap}
.balk nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.balk nav a{color:var(--steen);text-decoration:none;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:11px 12px;min-height:44px;
  display:inline-flex;align-items:center;border-radius:2px}
.balk nav a:hover{background:rgba(236,229,216,.12)}
/* Donkere inkt op vlam haalt 7,6:1. Wit op vlam haalt 2,3 en dat is veel te
   weinig voor de belangrijkste knop van de pagina — vandaar donker op licht,
   niet omgekeerd. */
.balk nav a.res{background:var(--vlam);color:var(--nacht);font-weight:700}
.balk nav a.res:hover{background:#eaa870}
.balk .talen{display:flex;gap:1px;align-items:center;margin-left:var(--s2)}
.balk .talen a{padding:11px 8px;font-size:12px;letter-spacing:.06em;color:var(--mos);
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.balk .talen a:hover{color:var(--steen)}
.balk .talen a[aria-current]{color:var(--steen);text-decoration:underline;
  text-underline-offset:4px}
@media (max-width:900px){
  .balk nav a:not(.res){display:none}
  .merk{font-size:18px}
}

/* ------------------------------------------------ onderbalk op de telefoon
   Op 375 px past merk + menu + taalkeuze + reserveerknop niet in één balk
   (nagemeten: 482 px nodig). In plaats van alles kleiner te wringen gaan de
   twee dingen die iemand écht wil doen naar onderen, waar de duim zit. */
.onderbalk{display:none}
@media (max-width:700px){
  .balk nav a.res{display:none}
  .onderbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:1px;
    background:var(--lijn);box-shadow:0 -1px 12px rgba(0,0,0,.4)}
  .onderbalk a{flex:1;display:inline-flex;align-items:center;justify-content:center;
    gap:8px;min-height:58px;text-decoration:none;font-weight:700;font-size:15px;
    letter-spacing:.03em}
  .onderbalk .bel{background:var(--diep);color:var(--steen)}
  .onderbalk .res{background:var(--vlam);color:var(--nacht)}
  body{padding-bottom:58px}
}

/* ------------------------------------------------ hero */
.hero{height:230vh;position:relative}
.hero-plak{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-beeld{position:absolute;inset:0;will-change:transform}
.hero-beeld img{width:100%;height:100%;object-fit:cover}
/* ⚠ Dit was fout en alleen met het oog te zien: de eerste versie legde .78 / .34
   / .94 zwart over de foto, plus een vlek van .58 in het midden. Op een lichte
   foto (de NOORD-demo had een opspattende golf) werkt dat; op een donkere
   Ardense hoeve om zes uur 's avonds blijft er een grijze plaat over en zie je
   het huis niet. Het huis IS waar zij haar geld mee verdient.
   Nu: donker waar tekst staat (boven voor de balk, onder voor de lead), en
   nagenoeg open in het midden waar de hoeve staat. */
.hero-sluier{position:absolute;inset:0;background:
  linear-gradient(180deg,
    rgba(20,26,22,.62) 0%,
    rgba(20,26,22,.10) 26%,
    rgba(20,26,22,.14) 46%,
    rgba(20,26,22,.80) 74%,
    rgba(20,26,22,.94) 100%)}
/* Alles onderaan in één blok, links uitgelijnd — dezelfde as als de rest van de
   pagina. De vorige versie zette een gecentreerde titel boven een links
   uitgelijnde lead; dat leest als twee ontwerpen in één beeld. */
.hero-inhoud{position:relative;height:100%;display:grid;
  grid-template-rows:1fr auto auto;padding:calc(var(--kop) + 20px) var(--rand) 24px;z-index:2}
/* ⚠ Hier stond `max-width:min(20ch,100%)`. Bij Fraunces op opsz 144 is één `ch`
   veel smaller dan de letters die je ziet, dus 20ch was krapper dan "Het Huis"
   en de titel viel over drie regels — met de plaatsnaam erboven over twee.
   Geen max-width: de clamp op de lettergrootte houdt hem al binnen het scherm. */
.hero-titel{align-self:end;justify-self:start;text-align:left;will-change:transform;
  margin-bottom:var(--s3)}
/* ⚠ 132 px zette "Het Huis Hiernaast" over drie regels en duwde de lead tegen de
   onderrand. 96 px houdt het op twee regels tot ver onder 1440 px. */
.hero-titel h1{font-size:clamp(38px,6.6vw,96px);
  text-shadow:0 4px 40px rgba(20,26,22,.6)}
.hero-titel .plaats{margin:0 0 var(--s2);font-size:clamp(11px,1.4vw,14px);letter-spacing:.28em;
  text-transform:uppercase;font-weight:700;color:var(--vlam);
  text-shadow:0 1px 12px rgba(20,26,22,.95),0 0 4px rgba(20,26,22,.85)}
.hero-lead{max-width:44ch;font-size:clamp(16px,1.8vw,21px);margin:0 0 var(--s4);
  font-family:var(--display);font-variation-settings:'opsz' 30;line-height:1.4;
  text-shadow:0 1px 16px rgba(20,26,22,.9)}
.hero-voet{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  border-top:1px solid var(--lijn);padding-top:14px;margin:0;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.hero-voet .rol{margin-left:auto;color:var(--mos);font-weight:400}
@media (max-width:600px){ .hero-voet .rol{display:none} }

/* ------------------------------------------------ secties */
section.licht{background:var(--steen);color:var(--inkt);padding:var(--s6) var(--rand)}
section.donker{background:var(--diep);padding:var(--s6) var(--rand)}
section.licht h2,section.donker h2{font-size:clamp(30px,5.4vw,66px);max-width:26ch}
.midden{max-width:1180px;margin:0 auto}
.lood{font-size:clamp(18px,2.2vw,23px);line-height:1.5;max-width:34ch;
  font-family:var(--display);font-variation-settings:'opsz' 32}
.tweekolom{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;margin-top:var(--s5)}
@media (max-width:860px){ .tweekolom{grid-template-columns:1fr;gap:var(--s4)} }

/* kerncijfers */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--s3);margin-top:var(--s5);border-top:1px solid var(--lijn-licht);
  padding-top:var(--s4)}
.cijfers div b{display:block;font-family:var(--display);font-size:clamp(34px,5vw,54px);
  line-height:1;font-variation-settings:'opsz' 72}
.cijfers div span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grijs);font-weight:600}

/* ------------------------------------------------ fotostrip: horizontaal op
   verticale scroll. Dit is de beweging waar de opdracht om vroeg. */
/* 09/09 HERZIEN — het scroll-jacking is eruit.

   Zo werkte het: de sectie werd ~2.700 px hoog gemaakt, bleef plakken (sticky) en
   de rij schoof met translate3d opzij terwijl je naar beneden scrolde. Twee
   redenen om dat weg te doen, beide van buiten:

   1. Heleen stuurde een filmpje. Zij kent dat soort sites niet en zocht naar de
      manier om eróver heen te komen. Een techniek die uitgelegd moet worden aan
      de eigenaar, moet ook uitgelegd worden aan haar gasten.
   2. Op iPhone Safari werden de zijkanten wit tijdens het slepen. Dat is geen
      Apple-eigenaardigheid: `will-change:transform` maakt een eigen tekenlaag, en
      Safari tekent tijdens een snelle veeg niet buiten de grenzen van die laag.

   Nu doet de browser het zelf met `overflow-x:auto`. Verticaal scrollen blijft
   verticaal scrollen — er is niets meer om te kapen. En er is geen tekenlaag
   meer, dus die witte randen kunnen niet meer terugkomen.

   `overscroll-behavior-x:contain`: zonder dat roept een horizontale veeg aan het
   einde van de rij de terug-knop van de browser op, op Safari en op een trackpad.

   De schuifbalk blijft ZICHTBAAR en is met de hand gestyled. Dat is bewust: voor
   iemand die zo'n rij niet kent, is dat het enige dat zegt "hier gaat het opzij". */
.strook{position:relative;background:var(--nacht)}
.strook-plak{display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s6) 0 var(--s5)}
.strook-kop{padding:0 var(--rand);flex:none}
.strook-kop h2{font-size:clamp(28px,5vw,58px);max-width:22ch}
.strip{display:flex;gap:clamp(12px,2vw,26px);padding:0 var(--rand);
  align-items:flex-end;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  scrollbar-color:var(--vuur) var(--lijn);scrollbar-width:thin}
.strip:active{cursor:grabbing}
/* Zelf getekende schuifbalk voor WebKit/Blink; Firefox gebruikt de twee regels
   hierboven. Dun, maar zichtbaar — het is hier een aanwijzing, geen sierrand. */
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-track{background:var(--lijn);border-radius:4px}
.strip::-webkit-scrollbar-thumb{background:var(--vuur);border-radius:4px}
.strip img{user-select:none;-webkit-user-drag:none}
/* ⚠ Hier stond scroll-snap (`scroll-snap-type:x proximity` + `scroll-snap-align:start`).
   Nagemeten en weer weggehaald, om twee redenen:
     1. De rij kon niet meer op 0 rusten: snap duwde scrollLeft naar 64 en dat is
        precies de zijmarge (--rand). De eerste foto kleefde dus aan de rand terwijl
        de rest van de pagina 64 px marge houdt, en het balkje stond bij stilstand
        op 0,6 % in plaats van 0 %.
     2. Snappen trekt de rij na élke sleep naar een kaartrand terug. Voor iemand die
        net klaagde dat het scrollen niet lekker liep, is dat weer een beweging die
        zij niet gevraagd heeft. Vrij schuiven is hier het minst verrassende. */
/* Vaste hoogte, vrije breedte: staande en liggende foto's staan naast elkaar
   zonder dat er iets wordt afgesneden. Dat is precies waarom hier geen
   object-fit staat. */
.kaartje{margin:0;flex:0 0 auto}
.kaartje img{height:clamp(210px,44vh,420px);width:auto;max-width:none;
  background:var(--diep)}
.strookvoet{padding:0 var(--rand);flex:none;display:flex;align-items:center;
  gap:var(--s3);flex-wrap:wrap}
.strooktip{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mos);font-weight:600;margin:0}
.strookbalk{flex:1;height:2px;background:var(--lijn);min-width:60px}
.strookbalk i{display:block;height:100%;width:0;background:var(--vuur)}
.strookaantal{font-size:12px;letter-spacing:.14em;color:var(--mos);font-weight:600;
  font-variant-numeric:tabular-nums}
/* ⚠ 09/09: hier stond `@media (max-width:600px){ .strookbalk{display:none} }`.
   Dat kon toen de paginascroll de rij bewoog: het balkje was sier. Nu de rij
   zijwaarts schuift, is het balkje op een telefoon juist het enige dat zegt dat
   er nog meer foto's rechts staan — iOS toont zijn eigen schuifbalk alleen
   tijdens het schuiven. Dus blijft hij staan; de voet mag in plaats daarvan
   afbreken naar een tweede regel (flex-wrap hierboven). */
@media (max-width:600px){
  .strooktip{flex:1 1 100%}
  .strookbalk{min-width:0}
}

/* ------------------------------------------------ parallaxband met citaat */
.band{position:relative;height:68vh;min-height:360px;overflow:hidden;
  display:grid;place-items:center}
.band-beeld{position:absolute;inset:-16% 0;will-change:transform}
.band-beeld img{width:100%;height:100%;object-fit:cover}
.band-sluier{position:absolute;inset:0;background:rgba(20,26,22,.66)}
.band blockquote{position:relative;z-index:2;margin:0;padding:0 var(--rand);
  max-width:26ch;text-align:center;font-family:var(--display);
  font-size:clamp(26px,4.6vw,54px);line-height:1.08;font-variation-settings:'opsz' 96}
.band cite{display:block;margin-top:var(--s3);font-family:var(--tekst);font-style:normal;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mos);
  font-weight:600}

/* ------------------------------------------------ indeling van het huis */
.verdieping{margin-bottom:var(--s5)}
.verdieping h3{font-size:clamp(20px,2.6vw,28px);color:var(--steen);margin-bottom:var(--s2)}
.donker .verdieping h3{color:var(--vlam)}
/* ⚠ 10/09 — lichte tegenhanger. De basiskleur hierboven is `--steen`, gemaakt voor
   een donkere sectie. Staat deze kop op een LICHTE sectie, dan is hij licht op licht
   en dus onzichtbaar. Dat was een latente fout: hij kwam pas boven toen Heleen vroeg
   of haar tekening andersom kon en die sectie licht moest worden. */
.licht .verdieping h3{color:var(--roest)}
.lijst{list-style:none;margin:0;padding:0}
.lijst li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--lijn)}
.lijst li::before{content:"";position:absolute;left:2px;top:20px;width:9px;height:1px;
  background:var(--vuur)}
.licht .lijst li{border-bottom-color:var(--lijn-licht)}
.grondplan{background:var(--licht);padding:var(--s3);border:1px solid var(--lijn)}
.grondplan img{width:100%;height:auto}
.grondplan figcaption{margin-top:var(--s2);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grijs);font-weight:600}

/* ------------------------------------------------ prijzen */
.prijstabel{margin-top:var(--s5);border-top:1px solid var(--lijn-licht)}
.prijsrij{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);
  align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--lijn-licht)}
.prijsrij h3{font-size:clamp(20px,2.6vw,27px)}
.prijsrij .wanneer{display:block;font-size:15px;color:var(--grijs);margin-top:4px;
  font-family:var(--tekst)}
.prijsrij .erbij{grid-column:1/-1;margin:0;font-size:15px;color:var(--grijs);max-width:62ch}
.prijsrij .bedrag{font-family:var(--display);font-size:clamp(24px,3.4vw,38px);
  white-space:nowrap;font-variation-settings:'opsz' 60}
.js .prijsrij{opacity:0;transform:translateY(16px)}
.js .prijsrij.in{opacity:1;transform:none;
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.9,.25,1)}
.noten{margin-top:var(--s4);padding:0;list-style:none;font-size:15px;color:var(--grijs);
  max-width:70ch}
.noten li{padding:6px 0 6px 18px;position:relative}
.noten li::before{content:"·";position:absolute;left:4px;color:var(--roest);font-weight:700}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:13px 26px;
  background:var(--vuur);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  letter-spacing:.04em;border:0;cursor:pointer;font-family:var(--tekst);
  transition:background .15s ease,transform .12s ease}
.knop:hover{background:#b25c2b}
.knop:active{transform:translateY(1px)}
.knop.rand{background:transparent;color:var(--roest);box-shadow:inset 0 0 0 2px var(--roest)}
.knop.rand:hover{background:var(--roest);color:#fff}
.donker .knop.rand{color:var(--vlam);box-shadow:inset 0 0 0 2px var(--vlam)}
.donker .knop.rand:hover{background:var(--vlam);color:var(--nacht)}
.knoprij{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4)}
.knoprij p{margin:0;font-size:15px;color:var(--grijs);max-width:34ch}
.donker .knoprij p{color:var(--mos)}

/* ------------------------------------------------ omgeving */
.omg-raster{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:var(--s5)}
.omg-raster h3{font-family:var(--tekst);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grijs);margin-bottom:var(--s2);font-weight:700}
.donker .omg-raster h3{color:var(--mos)}
.eetlijst{list-style:none;margin:0;padding:0}
.eetlijst li{padding:10px 0;border-bottom:1px solid var(--lijn-licht)}
.eetlijst b{font-weight:600}
.eetlijst span{display:block;font-size:14px;color:var(--grijs)}
/* Deze telefoonnummers waren 17 px hoge tikdoelen — te klein om op een
   telefoon te raken, en dit is nu juist waar iemand een restaurant belt.
   De negatieve marge houdt de lijst compact terwijl het raakvlak 44 px wordt. */
.eetlijst a{color:var(--roest);text-decoration:none;font-variant-numeric:tabular-nums;
  display:inline-block;padding:13px 5px;margin:-12px -5px}
.eetlijst a:hover{text-decoration:underline}
.linklijst{list-style:none;margin:0;padding:0;columns:230px;column-gap:var(--s4)}
.linklijst li{break-inside:avoid}
/* Deze links waren 17 px hoge tikdoelen. De negatieve marge houdt de lijst
   visueel compact terwijl het aanraakvlak op 44 px komt. */
.linklijst a{display:inline-block;padding:12px 6px;margin:-9px -6px;color:var(--roest);
  text-decoration:none;font-size:15px}
.linklijst a:hover{text-decoration:underline}

/* ------------------------------------------------ route */
.route details{border-top:1px solid var(--lijn);padding:0}
.route details:last-of-type{border-bottom:1px solid var(--lijn)}
.route summary{cursor:pointer;padding:var(--s3) 0;font-family:var(--display);
  font-size:clamp(19px,2.4vw,26px);display:flex;align-items:center;gap:var(--s2);
  min-height:56px;list-style:none}
.route summary::-webkit-details-marker{display:none}
.route summary::after{content:"+";margin-left:auto;font-size:26px;color:var(--vlam);
  line-height:1}
.route details[open] summary::after{content:"–"}
.route ol{margin:0 0 var(--s4);padding-left:26px;color:var(--steen)}
/* ⚠ 10/09 — zelfde latente fout, maar erger: dit is de routebeschrijving zelf.
   `--steen` op een lichte sectie is de hele wegwijzer in onleesbaar licht. */
.licht.route ol{color:var(--inkt)}
.licht.route details{border-top-color:var(--lijn-licht)}
.licht.route details:last-of-type{border-bottom-color:var(--lijn-licht)}
.licht.route summary::after{color:var(--roest)}
/* De stapnummers zijn tekst, geen sier: een gast leest "stap 5". `--vuur` haalt op
   een lichte grond maar 3,01:1 en achter de tekening 2,43:1 — dus hier `--roest`,
   dat in deze variant al op #8b441b staat. */
.licht.route ol li::marker{color:var(--roest)}
.route-intro{margin-top:var(--s3)}
.donker .route-intro{color:var(--mos)}
.licht .route-intro{color:var(--grijs)}
.licht .grondplan{border-color:var(--lijn-licht)}
.route ol li{padding:5px 0;max-width:66ch}
.route ol li::marker{color:var(--vuur);font-size:14px}
.adresblok{font-family:var(--display);font-size:clamp(20px,2.6vw,28px);line-height:1.3;
  font-variation-settings:'opsz' 42}

/* ------------------------------------------------ formulier */
.formulier{margin-top:var(--s5);max-width:640px}
.veldrij{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
@media (max-width:560px){ .veldrij{grid-template-columns:1fr} }
.veld{margin-bottom:var(--s3);display:block}
.veld > span{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;margin-bottom:7px;color:var(--grijs)}
.veld em{font-style:normal;color:var(--roest);font-weight:400;letter-spacing:0;
  text-transform:none}
.veld input,.veld textarea{width:100%;font:inherit;font-size:16px;color:var(--inkt);
  background:var(--licht);border:1px solid rgba(32,38,31,.28);border-radius:0;
  padding:13px 14px;min-height:50px}
.veld textarea{min-height:140px;resize:vertical;line-height:1.55}
.veld input:focus,.veld textarea:focus{border-color:var(--roest);outline:0;
  box-shadow:0 0 0 3px rgba(160,79,31,.22)}
.hint{font-size:14px;color:var(--grijs);margin:-6px 0 var(--s3)}
.klein{font-size:14px;color:var(--grijs);margin-top:var(--s3);max-width:52ch}
.honing{position:absolute;left:-9999px}

/* ------------------------------------------------ colofon */
.colofon{background:var(--nacht);padding:var(--s6) var(--rand) var(--s5);
  border-top:1px solid var(--lijn)}
.colofon-raster{display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:1180px;margin:0 auto}
.colofon h3{font-family:var(--tekst);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mos);margin-bottom:var(--s2);font-weight:700}
.colofon p{margin:0}
.colofon a.tel{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);color:var(--vlam);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  font-variation-settings:'opsz' 42}
.colofon a.tel:hover{text-decoration:underline}
.colofon a.mail{color:var(--vlam);text-decoration:none;word-break:break-all;
  display:inline-block;padding:12px 4px;margin:-12px -4px;min-height:44px}
.colofon a.mail:hover{text-decoration:underline}
.colofon .talen{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.colofon .talen a{color:var(--steen);text-decoration:none;padding:11px 0;
  display:inline-flex;min-height:44px;align-items:center;font-size:15px}
.colofon .talen a:hover{text-decoration:underline}
.colofon .talen a[aria-current]{color:var(--mos)}
.onderrand{max-width:1180px;margin:var(--s5) auto 0;padding-top:var(--s3);
  border-top:1px solid var(--lijn);font-size:13px;color:var(--mos);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.onderrand a{color:var(--mos);display:inline-block;padding:14px 5px;margin:-13px -5px}

/* ------------------------------------------------ bedankpagina */
.dank{min-height:100vh;min-height:100svh;display:grid;place-items:center;
  padding:var(--kop) var(--rand) var(--s6);text-align:center}
.dank h1{font-size:clamp(34px,6vw,72px);margin-bottom:var(--s3)}
.dank p{max-width:38ch;margin-left:auto;margin-right:auto;color:var(--mos)}

/* ==========================================================================
   De pentekening van de hoeve — "Chapelier, 91".

   Zij vroeg hem als achtergrond. Dat gebeurt hieronder, maar hij staat ook één
   keer op ware grootte in zijn eigen sectie: een tekening op 12 % dekking is
   een tekening die niemand ziet, en dit is het mooiste stuk van de site.

   ⚠ De handtekening is van een derde. Zie NEEDS_HUMAN — dat is een vraag, geen
   technische kwestie. Uitzetten is één regel: TEKENING_AAN = False in bouw.py.
   ========================================================================== */

/* ---- de eigen sectie ---- */
/* Staat onderaan, onder het formulier. De streep bovenaan scheidt hem van de
   lichte formuliersectie, anders lopen twee lichte blokken in elkaar over. */
.tekening-sectie{background:var(--licht);border-top:1px solid var(--lijn-licht)}
/* ⚠ Hier stond `display:grid; justify-items:center`. Dat brak de tekening
   volledig: in een grid met `justify-items:center` krimpt een blok naar
   max-content, en de max-content van een <picture> met `img{width:100%}` is
   nul — dus stond er een wit vierkantje van 55 px op de pagina. Gewoon
   `margin:auto` op een blok met een maximumbreedte doet wat bedoeld was. */
.tekening{margin:var(--s5) auto 0;max-width:1100px}
/* Papierwit met een dunne rand en een zachte schaduw: het leest als een blad
   dat op tafel ligt, niet als een plaatje in een kader. */
.tekening picture{display:block;width:100%;
  background:#fff;padding:clamp(10px,2vw,26px);
  box-shadow:0 1px 2px rgba(32,38,31,.14),0 14px 40px -18px rgba(32,38,31,.4)}
.tekening img{display:block;width:100%;height:auto}
.tekening figcaption{margin:var(--s4) auto 0;max-width:52ch;text-align:center}
.tekening-bron{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grijs);font-weight:600}

/* ---- de achtergrondlaag ---- */
/* ⚠ Hier stond eerst `tekening-2400.png` met `mix-blend-mode:screen`. Dat was
   fout, en het is nooit aan gestaan dus niemand heeft het gezien: die tekening
   is zwarte inkt op WIT papier, en `screen` laat juist het lichte door. Op een
   donkere sectie kreeg je dus een oplichtende witte rechthoek met donkere
   lijnen — het negatief van wat je wil.
   Nu gebruiken we het omgekeerde bestand (witte inkt op zwart papier): `screen`
   laat het zwarte papier wegvallen en zet alleen de inkt er zacht op. */
/* 10/09 — Heleen: "de tekening als ondergrond is nu als negatief, kan dat andersom
   of is dan de tekst niet leesbaar?" Zij heeft gelijk, en het antwoord is niet
   "omdraaien" maar "verhuizen": op een DONKERE sectie is een lichte lijn de enige
   manier waarop een tekening zichtbaar wordt. Haar eigen zwarte inkt kan alleen op
   een LICHTE sectie. Vandaar twee varianten, geschakeld met TEKENING_OP in bouw.py.

   Nagemeten met de donkerste 1 % van de inkt (grijswaarde 6) op --steen:
     dekking .06  bijtekst --grijs 5,13:1   ok
     dekking .10  bijtekst --grijs 4,69:1   ok  <- gekozen
     dekking .13  bijtekst --grijs 4,37:1   zakt door 4,5:1
     dekking .18  bijtekst --grijs 3,90:1   te laag
   De grote tekst --inkt zit bij .10 op 9,97:1 en heeft nergens last van. Daarom
   staat de lichte variant op .10 en niet op de .13 van de donkere. */
.tekening-laag{display:none}
html.met-tekening .tekening-laag{
  display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center 38%;
  background-repeat:no-repeat}
html.met-tekening .donker,html.met-tekening .licht{position:relative;overflow:hidden}
html.met-tekening .donker > *:not(.tekening-laag),
html.met-tekening .licht > *:not(.tekening-laag){position:relative;z-index:1}

/* variant "donker" (nu aan): het OMGEKEERDE bestand — witte inkt op zwart papier.
   ⚠ Hier stond eerst `tekening-2400.png` met `screen`. Dat was fout: die tekening
   is zwarte inkt op WIT papier, en `screen` laat juist het lichte door. Op een
   donkere sectie kreeg je een oplichtende witte rechthoek met donkere lijnen — het
   negatief van wat je wil. Met het omgekeerde bestand valt het zwarte papier weg en
   blijft alleen de inkt zacht staan. Dát is wat Heleen nu ziet, en zij heeft gelijk
   dat het tegenover haar blad een negatief is. */
/* ⚠ 10/09 — hier stond `:not(.tekening-licht)`. Dat was fout zodra er een DERDE
   variant kwam: bij "blad" matchte deze regel ook, en `display:none` bleef staan
   omdat de blad-regel alleen `background-image` en `opacity` zet, niet `display`.
   Gevolg: de variant bouwde, alle controles slaagden, en er was geen tekening te
   zien. Gevonden door ernaar te kijken, niet door te meten. */
html.met-tekening:not(.tekening-licht):not(.tekening-blad) .licht > .tekening-laag{display:none}
html.met-tekening:not(.tekening-licht) .donker > .tekening-laag{
  background-image:url('/beeld/tekening-omgekeerd-1600.webp');
  opacity:.13;mix-blend-mode:screen}

/* ⚠ In de lichte variant MOET het accent donkerder. --roest #a04f1f staat op de
   kale --steen al op 4,62:1 — net boven de grens — en achter de tekening zakt hij
   naar 3,73:1. Die kleur is de linkkleur en staat in de omgevingssectie 37 keer:
   alle winkels, restaurants en links van Heleen. #8b441b is dezelfde tint (22°) en
   dezelfde verzadiging (68 %), alleen 5 % donkerder: 4,61:1 achter de tekening en
   5,70:1 kaal. --grijs haalt het net (4,69:1) en blijft ongewijzigd.
   Dit geldt alleen in deze variant; de donkere variant houdt haar palet. */
html.met-tekening.tekening-licht{--roest:#8b441b}

/* variant "blad": wat Heleen letterlijk vroeg. Haar tekening blijft op de plek waar
   zij hem kent (Het huis en Routebeschrijving), maar die secties worden licht — want
   haar zwarte inkt is op donker onzichtbaar. Zelfde bestand en zelfde blendmodus als
   de variant "licht"; alleen de secties zijn anders, en dat regelt bouw.py. */
html.met-tekening.tekening-blad .licht > .tekening-laag{
  background-image:url('/beeld/tekening-1200.webp');
  opacity:.10;mix-blend-mode:multiply}
html.met-tekening.tekening-blad{--roest:#8b441b}
/* Bij "blad" hoort de laag NIET in welkom en omgeving — daar lag hij nooit. Alleen de
   twee secties die hem eerst droegen, en die heten nu ook `licht`. */
html.met-tekening.tekening-blad #welkom > .tekening-laag,
html.met-tekening.tekening-blad #omgeving > .tekening-laag{display:none}

/* variant "licht": haar eigen blad, zwarte inkt, op de twee lichte secties. */
html.met-tekening.tekening-licht .donker > .tekening-laag{display:none}
html.met-tekening.tekening-licht .licht > .tekening-laag{
  background-image:url('/beeld/tekening-1200.webp');
  opacity:.10;mix-blend-mode:multiply}

/* ==========================================================================
   Smalle schermen
   ========================================================================== */
@media (max-width:700px){
  body{font-size:16px}
  /* ⚠ 09/09 — de tekeninglaag op een telefoon: geen tekening, wel dezelfde kleur.

     Eerst het probleem. De tekening is 1600x1053, dus liggend (1,52:1). De donkere
     secties zijn op 375 px juist staand: 375x1670 en 375x1240 (0,22:1 en 0,30:1).
     `background-size:cover` moest de tekening daarom tot 2537 px opblazen om de
     hoogte te vullen — je zag nog 15 % van de breedte, op 6,8x. Ruis achter de tekst.

     Toen schaalde ik hem op de breedte (`150% auto`). Dat loste het inzoomen op en
     brak de kleur: deze laag ligt er met `mix-blend-mode:screen` op en TILT de
     donkere secties op met +9 per kanaal (nagemeten met de gemiddelde inkt van het
     bestand, rgb 76: #141a16 -> #1d231f en #1c241e -> #252c27). Dekte hij eerst de
     hele sectie, dan lag die lift er overal; met een band van 370 px in een sectie
     van 1670 px stond er boven één donker en onder een ander — en beide anders dan
     op een laptop.

     Dus nu op smalle schermen geen tekening, maar wél precies dezelfde lift. Waarom
     rgb(76,76,76) exact klopt: bij `screen` met dekking d is de opgetelde waarde
     d*(1-basis)*laag. Vul je daar de gemiddelde inkt van de tekening in, dan komt er
     hetzelfde uit als wanneer de tekening er ligt — en die gemiddelde inkt IS 76.
     De kleur is dus niet gekozen maar berekend uit het bestand zelf.

     Bijkomend: `background-image` is hier `none`, dus een telefoon haalt die 477 kB
     niet meer op. Dat was een open punt in OPLEVERING.md en het lost zich hier op.

     ⚠ Wie de tekening ook op een telefoon wil zien, moet niet terug naar `cover`
     (dat is het inzoomen) en niet naar `150% auto` (dat is deze kleurfout). De enige
     weg is een laag die de hoogte vult zonder te vervormen, en dat betekent tegelen:
     `background-image` terugzetten met `background-size:100% auto` en
     `background-repeat:repeat-y`. Dan herhaalt het huis zich vier keer onder elkaar.
     Op 13 % dekking is dat misschien textuur, misschien wallpaper — dat moet iemand
     met een echt toestel bekijken voordat het erin gaat. */
  html.met-tekening .tekening-laag{background-image:none}
  /* omgekeerd bestand: gemiddelde inkt rgb 76 -> zelfde lift als de tekening */
  html.met-tekening:not(.tekening-licht) .donker > .tekening-laag{
    background-color:rgb(76,76,76)}
  /* haar eigen blad: gemiddelde inkt rgb 178 -> zelfde demping bij `multiply` */
  html.met-tekening.tekening-licht .licht > .tekening-laag,
  html.met-tekening.tekening-blad .licht > .tekening-laag{
    background-color:rgb(178,178,178)}
  section.licht,section.donker{padding:var(--s5) var(--rand)}
  .hero{height:200vh}
  .kaartje img{height:clamp(190px,36vh,300px)}
}

/* ==========================================================================
   Wie beweging heeft uitgezet, krijgt geen beweging — maar wel alles te lezen.
   De gepinde blokken worden gewone blokken, de strips gewone schuifbalken die
   ook met het toetsenbord werken.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero-plak{position:static;height:auto;min-height:82vh}
  /* ⚠ 09/09: hier stond de terugval die de stroken tot gewone schuifrijen maakte
     (`.strook-plak{position:static}`, `.strip{overflow-x:auto; scroll-snap-type:x
     mandatory}`, `.kaartje{scroll-snap-align:start}`). Die is nu overbodig: dát
     is sinds vandaag het normale gedrag. Erger nog, hij was tegenstrijdig — hij
     zette `scroll-snap` terug, en juist die zorgde ervoor dat de rij niet op 0
     kon rusten en na elke sleep terugtrok. Wie beweging uitzet, hoorde dus de
     fout te krijgen die iedereen anders niet meer had. */
  .band-beeld{inset:0;transform:none !important}
  .js .prijsrij{opacity:1 !important;transform:none !important}
  .balk{transition:none}
}

/* ==========================================================================
   Papier. Een gast die naar de Ardennen rijdt print de routebeschrijving —
   dat was op de oude site de enige manier om hem mee te nemen. Dan hoeft er
   geen zwarte achtergrond door de printer.
   ========================================================================== */
@media print{
  body{background:#fff;color:#000;font-size:11pt;padding:0}
  .balk,.onderbalk,.overslaan,.strook,.band,.formulier,.knop,.knoprij,
  .linklijst,body::after{display:none !important}
  .hero{height:auto}
  .hero-plak{position:static;height:auto}
  .hero-beeld,.hero-sluier{display:none}
  .hero-inhoud{padding:0;color:#000}
  .hero-titel h1{font-size:24pt}
  section.licht,section.donker{background:#fff;color:#000;padding:0 0 12pt}
  section.licht h2,section.donker h2{font-size:16pt}
  .route details{border:0}
  .route details:not([open]) ol{display:block}   /* alles op papier, ook dicht */
  .route summary::after{content:""}
  .route ol,.lijst li,.noten li,.adresblok{color:#000}
  .colofon{background:#fff;border-top:1px solid #000;padding:12pt 0 0}
  .colofon h3,.colofon p,.colofon a{color:#000}
  a[href^="tel:"]::after{content:""}
  .grondplan{border:1px solid #000;break-inside:avoid}
  section{break-inside:avoid}
}

/* De regel die zegt wat er bij elk verblijf inbegrepen is. Stond eerst als
   eerste "noot" onder de tabel, maar dat is geen voetnoot — het geldt voor
   elke prijs erboven, dus hoort het pal onder de tabel te staan. */
.prijzen-incl{margin:var(--s3) 0 0;font-family:var(--display);
  font-variation-settings:'opsz' 28;font-size:clamp(16px,1.8vw,19px);
  color:var(--inkt);max-width:52ch}