/* ============================================================
   DE ZWAAN — merksysteem, Delta Six
   Fraunces voor display, Inter Tight voor alles wat werkt.
   Het merk levert het blauw, het feest levert het amber.
   Engine: ZW v7 scroll-scrub plus de afspraakflow van Baas.
   ============================================================ */

:root{
  --espresso:#0B1116;
  --espresso-2:#111A21;
  --espresso-3:#18242C;
  --goud:#E8A44C;
  --goud-licht:#F6CE96;
  --brons:#B4731F;
  --brons-diep:#7D4E0E;
  --cream:#F3F0E9;
  --linnen:#E5E0D4;
  --inkt:#0B1116;
  --grijs:#5F6B73;
  --lijn:rgba(11,17,22,.14);
  --lijn-licht:rgba(243,240,233,.16);
  --groen:#2F7A55;
  --rood:#A6321F;
  --blauw:#0081C3;
  --blauw-licht:#5FC2F0;
  --blauw-diep:#0A6392;

  --display:'Fraunces','Iowan Old Style',Georgia,serif;
  --body:'Inter Tight','Helvetica Neue',Arial,sans-serif;

  --goot:clamp(1.25rem,5vw,5rem);
  --max:82rem;
  --soep:cubic-bezier(.22,1,.36,1);
  --traag:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x MOET clip blijven, nooit hidden. hidden maakt van body een
   eigen scrollcontainer en dan heeft position:sticky niets om aan vast te
   houden: het filmdoek scrolt gewoon mee weg. */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  background:var(--espresso);color:var(--inkt);
  font-family:var(--body);font-size:17px;line-height:1.62;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
/* overflow-x staat bewust ALLEEN op html. Zet je het ook op body, dan rekent de
   browser overflow-y op body om naar auto, wordt body een eigen scrollcontainer
   en doen Page Down en de pijltjestoetsen niets meer. */
main{background:var(--cream)}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--goud);color:var(--espresso)}

/* ---------------- typografie ---------------- */
h1,h2,h3,.dsp{
  font-family:var(--display);
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  font-weight:600;letter-spacing:-.025em;line-height:.98;
}
.t-xl{font-size:clamp(3rem,8.6vw,9rem)}
.t-l {font-size:clamp(2.5rem,6vw,6rem)}
.t-m {font-size:clamp(2rem,4vw,3.8rem);line-height:1}
.t-s {font-size:clamp(1.45rem,2.3vw,2.2rem);line-height:1.08;font-weight:600}
h1 em,h2 em,.dsp em{font-style:italic;font-weight:600;color:var(--brons)}
.op-nacht h1 em,.op-nacht h2 em,.op-nacht .dsp em{color:var(--goud)}

.oog{
  font-family:var(--body);font-size:.68rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brons);
}
.op-nacht .oog{color:var(--goud)}
.lead{font-size:clamp(1.05rem,1.35vw,1.28rem);color:var(--grijs);max-width:54ch;line-height:1.66}
.op-nacht .lead{color:rgba(245,241,232,.82)}
.klein{font-size:.82rem;color:var(--grijs);line-height:1.6}

/* letterstaarten vrijhouden, altijd */
h1,h2,h3,.dsp,.regel{padding-bottom:.18em;margin-bottom:-.18em}

/* ---------------- raster ---------------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--goot);padding-right:var(--goot);width:100%}
.blok{padding:clamp(4.5rem,10vw,9.5rem) 0;position:relative}
.blok--kort{padding:clamp(3rem,6vw,5.5rem) 0}
.midden{text-align:center}
.midden .lead{margin-left:auto;margin-right:auto}
.op-nacht{background:var(--espresso);color:var(--cream)}
.op-warm{background:var(--espresso-2);color:var(--cream)}
.op-linnen{background:var(--linnen)}

/* ---------------- laadscherm ---------------- */
.laad{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:var(--espresso);color:var(--cream);
  transition:transform 1s var(--soep);
}
.laad[data-fase="uit"]{transform:translate3d(0,-101%,0)}
.laad__merk{display:grid;justify-items:center;gap:1.4rem;position:relative}
/* ============================================================
   LAADANIMATIE: het echte logo tekent zichzelf
   Het woordmerk van De Zwaan is in drie lagen gesneden: het
   zwaanteken, het woord en de regel eronder. Elke laag wordt
   onthuld door een veeg van links naar rechts, met een lichtpunt
   dat op de rand van die veeg meeloopt. Dat leest als een penseel
   dat het merk in een streek neerzet, en het is het echte logo,
   geen nabootsing. Samen 1,14 seconde.
   ============================================================ */
.laad__logo{position:relative;width:min(30rem,74vw);aspect-ratio:516/96;line-height:0}
.ll{position:absolute;display:block;overflow:visible}
.ll img{width:100%;height:100%;display:block}
/* De curve doet het werk: rustig op gang, doorhalen, zacht uitlopen. Een
   tweede controlepunt links van het eerste maakte de veeg eerder vrijwel
   instant, waardoor het logo er meteen stond. */
.ll--mark{left:0;top:0;width:37.209%;height:100%;
  clip-path:inset(0 100% 0 0);animation:logoveeg .60s cubic-bezier(.34,.12,.2,1) .08s forwards}
.ll--woord{left:37.209%;top:0;width:62.791%;height:68.75%;
  clip-path:inset(0 100% 0 0);animation:logoveeg .44s cubic-bezier(.4,.1,.25,1) .56s forwards}
.ll--sub{left:37.209%;top:77.083%;width:62.791%;height:22.917%;
  opacity:0;transform:translate3d(0,7px,0);animation:logosub .34s var(--soep) .92s forwards}
@keyframes logoveeg{to{clip-path:inset(0 0 0 0)}}
@keyframes logosub{to{opacity:1;transform:none}}

/* Een glansveeg over het hele merk is geprobeerd en weer weggehaald: over de
   witte letters kleurde de band het wit grijzig, ook met mix-blend-mode screen.
   De streek en de gloed doen het werk. */

/* het lichtpunt dat op de rand van de veeg meeloopt */
.ll>i{position:absolute;top:-10%;bottom:-10%;left:0;width:2px;background:#fff;opacity:0;
  box-shadow:0 0 16px 6px rgba(95,194,240,.8),0 0 5px 1px rgba(243,240,233,.95);
  pointer-events:none}
.ll--mark>i{animation:logopen .60s cubic-bezier(.34,.12,.2,1) .08s forwards}
.ll--woord>i{animation:logopen .44s cubic-bezier(.4,.1,.25,1) .56s forwards}
@keyframes logopen{
  0%{opacity:0;left:0}
  14%{opacity:1}
  86%{opacity:1;left:100%}
  100%{opacity:0;left:100%}
}

/* gloed achter het zwaanteken op het moment dat de streek af is */
.laad__gloed{
  position:absolute;left:-6%;top:50%;width:48%;height:260%;transform:translateY(-50%);
  background:radial-gradient(ellipse at 42% 50%,rgba(0,129,195,.6),transparent 64%);
  filter:blur(8px);opacity:0;pointer-events:none;
  animation:logogloed 1s ease .3s forwards;
}
@keyframes logogloed{0%{opacity:0}45%{opacity:1}100%{opacity:.3}}
@media (max-width:640px){.laad__logo{width:82vw}}
/* De schaar zakt haaks op het woordmerk naar beneden, knipt het precies in het
   midden door en de rechterhelft kantelt weg. Dat is het handtekeningmoment
   van dit merk, op elke pagina hetzelfde. Het woord staat er drie keer: een
   onzichtbare maatvoerder die de doos opspant, en twee gekliptekopieen die de
   helften vormen. */
/* het oude woordmerk in letters is vervangen door het echte logo hierboven */
.laad__sub{font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(243,240,233,.6)}

/* ---------------- hero met de montage ---------------- */
/* De homepage opent met een edit van alle clips achter elkaar. Die speelt
   vanzelf en loopt rond, zodat de bezoeker de hele zaak binnen dertien
   seconden ziet zonder te scrollen. */
.heroedit{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;background:var(--espresso);color:var(--cream);
  padding:clamp(5.5rem,9vh,7rem) 0 clamp(2.5rem,6vh,4.5rem);
}
.heroedit__doek{position:absolute;inset:0;z-index:0}
.heroedit__doek img,.heroedit__doek video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;
}
.heroedit__doek video{z-index:1;opacity:0;transition:opacity 1.1s ease}
.heroedit__doek video.geverfd{opacity:1}
.heroedit__inhoud{position:relative;z-index:4;width:100%}
.heroedit .hoofdstuk__binnen{gap:1rem}
.heroedit .hoofdstuk__binnen h1{text-shadow:0 2px 26px rgba(8,5,2,.6)}
/* De kop schaalt mee met de hoogte van het scherm, zodat de hele hero op een
   laag venster binnen een schermhoogte blijft en de bewijsbalk zichtbaar is. */
.heroedit .t-xl{font-size:clamp(2.6rem,min(7.6vw,10.5vh),7rem)}
@media (max-width:640px){.heroedit{padding-top:6rem}.heroedit .t-xl{font-size:clamp(2.6rem,10vw,4rem)}}

/* ---------------- eigen muisaanwijzer, de zwaan uit het logo ------- */
.zwaan{
  position:fixed;left:0;top:0;z-index:250;width:40px;height:44px;
  margin:-6px 0 0 -20px;pointer-events:none;
  transform:translate3d(-200px,-200px,0);transform-origin:50% 70%;
  opacity:0;transition:opacity .28s ease;
  filter:drop-shadow(0 6px 12px rgba(3,8,12,.7));
}
.zwaan.aan{opacity:1}
.zwaan svg{width:100%;height:100%;display:block;overflow:visible;transition:transform .45s var(--soep)}
.zwaan.link svg{transform:scale(1.2) rotate(-6deg)}
.zwaan__vleugel{transform-origin:19px 29px;transition:transform .4s var(--soep)}
.zwaan.link .zwaan__vleugel{transform:rotate(-9deg) translateY(-1px)}
.zwaan.klik .zwaan__vleugel{animation:vleugel .62s var(--soep)}
@keyframes vleugel{
  0%{transform:rotate(0)}
  35%{transform:rotate(-22deg) translateY(-3px)}
  100%{transform:rotate(0)}
}
.zwaan__nek{transform-origin:20px 21px;transition:transform .4s var(--soep)}
.zwaan.klik .zwaan__nek{animation:nek .62s var(--soep)}
@keyframes nek{0%{transform:rotate(0)}40%{transform:rotate(-7deg)}100%{transform:rotate(0)}}
html.heeft-zwaan,html.heeft-zwaan a,html.heeft-zwaan button,
html.heeft-zwaan summary,html.heeft-zwaan label{cursor:none}
html.heeft-zwaan input,html.heeft-zwaan textarea{cursor:text}
@media (hover:none),(pointer:coarse){.zwaan{display:none}}

/* ---------------- knoppen met diepte ---------------- */
.knop{
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  min-height:3.1rem;padding:.9rem 1.7rem;border-radius:999px;border:0;
  font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;overflow:hidden;isolation:isolate;
  transform-style:preserve-3d;will-change:transform;text-align:center;
  transition:transform .35s var(--soep),background .3s,color .3s,box-shadow .35s var(--soep);
}
.knop::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(130px 64px at var(--gx,50%) -20%,rgba(255,255,255,.38),transparent 70%);
  transition:opacity .35s;
}
.knop:hover::before{opacity:1}
.knop::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  transform:translateX(-135%);transition:transform .9s var(--soep);
}
.knop:hover::after{transform:translateX(135%)}
.knop i{font-style:normal;display:inline-block;transition:transform .4s var(--soep)}
.knop:hover i{transform:translate3d(6px,0,0)}
.knop:active{transform:translateY(3px) scale(.98) !important;box-shadow:0 1px 0 rgba(0,0,0,.34) !important}

.knop--goud{background:var(--goud);color:#1A1204;
  box-shadow:0 2px 0 var(--brons),0 5px 0 var(--brons-diep),0 16px 30px -12px rgba(30,18,4,.65)}
.knop--goud:hover{background:var(--goud-licht);
  box-shadow:0 3px 0 var(--brons),0 7px 0 var(--brons-diep),0 30px 48px -16px rgba(30,18,4,.78)}
.knop--donker{background:var(--espresso-2);color:var(--cream);
  box-shadow:0 2px 0 #060402,0 5px 0 #000,0 16px 30px -12px rgba(0,0,0,.6)}
.knop--donker:hover{background:var(--espresso-3);
  box-shadow:0 3px 0 #060402,0 7px 0 #000,0 30px 48px -16px rgba(0,0,0,.72)}
.knop--licht{background:var(--cream);color:var(--espresso);
  box-shadow:0 2px 0 #d8d1c2,0 5px 0 #b6ae9c,0 16px 30px -12px rgba(10,7,4,.55)}
.knop--licht:hover{background:#fff;
  box-shadow:0 3px 0 #d8d1c2,0 7px 0 #b6ae9c,0 30px 48px -16px rgba(10,7,4,.7)}
.knop--lijn{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px var(--lijn-licht)}
.knop--lijn:hover{box-shadow:inset 0 0 0 1px var(--goud);color:var(--goud-licht)}
.knop--lijn::after{display:none}
.knop--lijn.op-licht{color:var(--espresso);box-shadow:inset 0 0 0 1px var(--lijn)}
.knop--lijn.op-licht:hover{color:var(--brons);box-shadow:inset 0 0 0 1px var(--brons)}

a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--goud);outline-offset:3px
}

/* ---------------- kop ---------------- */
.kopbalk{
  position:fixed;inset:0 0 auto 0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.8rem var(--goot);color:var(--cream);max-height:80px;
  transition:transform .5s var(--soep),background .4s,backdrop-filter .4s,box-shadow .4s,color .4s;
}
.kopbalk.vast{
  background:rgba(15,11,7,.92);backdrop-filter:blur(16px) saturate(140%);
  color:var(--cream);box-shadow:0 1px 0 rgba(245,241,232,.1);
}
.kopbalk.weg{transform:translateY(-115%)}
.merk{display:flex;align-items:center;gap:.7rem}
/* Het echte woordmerk van De Zwaan, in de witte variant die vooraf als los
   bestand is gemaakt. De kopbalk staat altijd op een donkere ondergrond. */
.merk__logo{display:block;line-height:0}
.merk__logo img{height:30px;width:auto;display:block}
@media (max-width:640px){.merk__logo img{height:24px}}
.merk__mark{width:42px;height:42px;flex:none;border-radius:5px;overflow:hidden;background:var(--espresso)}
.merk__mark img{width:100%;height:100%;object-fit:cover}
.merk__naam{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.2rem;letter-spacing:.1em;line-height:1;color:var(--cream)}
.merk__sub{display:block;font-family:var(--body);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--goud);margin-top:.25rem}
.nav{display:flex;gap:1.6rem;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.nav a{position:relative;padding:.4rem 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--soep)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]{color:var(--goud)}
.kopbalk .knop{min-height:2.6rem;padding:.6rem 1.15rem;font-size:.68rem}
@media (max-width:1000px){.nav{display:none}}

/* ---------------- film met scroll-scrub ---------------- */
.film{position:relative}
.film__toneel{position:sticky;top:0;z-index:0;height:100svh;overflow:hidden;background:var(--espresso)}
.film__laag{position:absolute;inset:0;opacity:0;transition:opacity .25s linear}
/* Beide MOETEN absoluut staan. Zonder position:absolute stapelt de video als
   tweede blok onder de foto, precies een schermhoogte lager, en valt hij
   buiten de overflow:hidden van het doek. Meet altijd getBoundingClientRect. */
.film__laag video,.film__laag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.film__laag video{z-index:1;opacity:0;transition:opacity .6s ease}
.film__laag video.geverfd{opacity:1}
.film__sluier{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,5,2,.55) 0%,rgba(8,5,2,.06) 26%,rgba(8,5,2,.12) 58%,rgba(8,5,2,.78) 100%),
    linear-gradient(90deg,rgba(8,5,2,.88) 0%,rgba(8,5,2,.56) 32%,rgba(8,5,2,.10) 60%,transparent 80%);
}
.film__korrel{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/voorbeeld/dezwaan/></filter><rect width='140' height='140' filter='url(%23n)'/voorbeeld/dezwaan/></svg>");
}
.film__verhaal{position:relative;z-index:4;margin-top:-100svh;pointer-events:none}
.film__verhaal a,.film__verhaal button{pointer-events:auto}
.hoofdstuk{position:relative}
.hoofdstuk__pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:clamp(6rem,10vw,9rem) var(--goot)}
.film__kopijlaag{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.film__kopijlaag a,.film__kopijlaag button{pointer-events:auto}
.film__kopijlaag .hoofdstuk__binnen{max-width:min(46rem,52vw) !important}
/* width:100% uit de basisregel wint van right, waardoor de kopij precies een
   goot te ver naar rechts liep en knoppen op mobiel buiten beeld vielen. */
.film__kopijlaag .hoofdstuk__kopij{
  position:absolute;left:var(--goot);right:var(--goot);top:50%;width:auto;
  transform:translate3d(0,calc(-50% + 26px),0);opacity:0;
  transition:opacity .2s linear,transform .8s var(--soep);
}
.film__kopijlaag .hoofdstuk__kopij.aan{transform:translate3d(0,-50%,0)}
@media (max-width:640px){
  .film__kopijlaag .hoofdstuk__kopij{top:auto;bottom:5.4rem;transform:translate3d(0,26px,0)}
  .film__kopijlaag .hoofdstuk__kopij.aan{transform:none}
}
.hoofdstuk__kopij{position:relative;max-width:min(var(--max),100%);margin:0 auto;width:100%}
.hoofdstuk__kopij::before{
  content:"";position:absolute;inset:-3rem -4rem;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 34% 50%,rgba(8,5,2,.76) 0%,rgba(8,5,2,.44) 48%,transparent 74%);
}
.hoofdstuk__binnen{display:grid;gap:1.4rem;max-width:34ch;color:var(--cream)}
.hoofdstuk__binnen .lead{color:rgba(245,241,232,.86)}
.hoofdstuk__binnen h1,.hoofdstuk__binnen h2{text-shadow:0 2px 26px rgba(8,5,2,.6)}

.film__route{
  position:absolute;left:var(--goot);right:var(--goot);bottom:1.6rem;z-index:6;
  display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,232,.5);
  pointer-events:auto;
}
.film__route button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:.3rem 0;transition:color .3s}
.film__route button .nr{color:var(--goud);margin-right:.5rem}
.film__route button.actief{color:var(--cream)}
.film__voortgang{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(245,241,232,.14);z-index:6}
.film__voortgang span{display:block;height:100%;background:var(--goud);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------------- hero-acties en bewijsbalk ---------------- */
.hero__acties{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem}
.hero__strip{
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;margin-top:1.9rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,232,.7);
}
.hero__strip span{display:flex;align-items:center;gap:.55rem}
.hero__strip span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--goud);flex:none}
.hero__strip .sterren{color:var(--goud);letter-spacing:.1em}

/* ---------------- tekst per regel uit een masker ---------------- */
.regels .regel{display:block;overflow:hidden}
.regels .regel>span{display:block;transform:translate3d(0,112%,0);transition:transform 1.05s var(--soep)}
.regels.in .regel>span{transform:none}
.regels .regel:nth-child(2)>span{transition-delay:.08s}
.regels .regel:nth-child(3)>span{transition-delay:.16s}

.onthul{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--soep),transform 1s var(--soep)}
.onthul.in{opacity:1;transform:none}
.masker{overflow:hidden;position:relative}
.masker img,.masker video{transform:scale(1.14);transition:transform 1.7s var(--soep)}
.masker.in img,.masker.in video{transform:scale(1)}
.masker::after{content:"";position:absolute;inset:0;background:var(--linnen);transform-origin:top;transition:transform 1.1s var(--soep);z-index:3}
.masker.in::after{transform:scaleY(0)}
.op-nacht .masker::after,.op-warm .masker::after{background:var(--espresso)}

/* ---------------- reviewband ---------------- */
.reviewkop{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.reviewkop .score{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--goud);
  font-variant-numeric:tabular-nums;padding-bottom:.06em;
}
.reviewkop .sterren{color:var(--goud);font-size:1.1rem;letter-spacing:.18em}
.reviewkop .telling{font-size:.95rem;color:rgba(245,241,232,.74)}
.rvband{
  overflow:hidden;margin-top:2.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5% 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5% 95%,transparent);
}
.rvspoor{display:flex;gap:1rem;width:max-content;animation:rvloop 62s linear infinite}
.rvband:hover .rvspoor{animation-play-state:paused}
@keyframes rvloop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rv{
  width:16rem;flex:none;padding:1.3rem 1.3rem 1.2rem;border-radius:6px;
  background:var(--espresso-2);border:1px solid rgba(245,241,232,.1);
  display:grid;gap:.6rem;align-content:start;
}
.rv .st{color:var(--goud);font-size:.78rem;letter-spacing:.14em}
.rv p{font-size:.94rem;line-height:1.5;color:rgba(245,241,232,.9);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rv b{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,232,.52)}

/* ---------------- lopende band ---------------- */
.band{overflow:hidden;border-top:1px solid var(--lijn-licht);border-bottom:1px solid var(--lijn-licht);padding:1.4rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent)}
.band__spoor{display:flex;gap:3rem;width:max-content;animation:band 48s linear infinite}
.band:hover .band__spoor{animation-play-state:paused}
.band__spoor span{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(1.5rem,2.8vw,2.6rem);white-space:nowrap;opacity:.84;display:flex;align-items:center;gap:3rem;
}
.band__spoor span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--goud);flex:none}
@keyframes band{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------------- tellers ---------------- */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.2rem;margin-top:3.2rem}
.cijfer b{
  display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--goud);
  font-variant-numeric:tabular-nums;padding-bottom:.08em;
}
/* Een woord in plaats van een getal vraagt om een kleinere maat, anders breekt
   het over drie regels en valt het uit het raster. */
.cijfer--woord b{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.04}
.cijfer span{display:block;font-size:.92rem;color:rgba(245,241,232,.74);margin-top:.5rem;max-width:26ch}

/* ---------------- kaarten en galerij ---------------- */
.galerij{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.kaart{position:relative;overflow:hidden;border-radius:6px;background:var(--espresso-2);display:block}
.kaart img,.kaart video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--soep)}
.kaart video{opacity:0;transition:opacity .8s ease,transform 1.3s var(--soep)}
.kaart video.geverfd{opacity:1}
.kaart:hover img,.kaart:hover video{transform:scale(1.045)}
.kaart__etiket{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.6rem 1.4rem 1.25rem;
  background:linear-gradient(180deg,transparent,rgba(8,5,2,.92));color:var(--cream);
}
.kaart__etiket b{display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.28rem;padding-bottom:.08em}
.kaart__etiket span{font-size:.86rem;color:rgba(245,241,232,.8)}
.kaart__prijs{
  position:absolute;right:.9rem;top:.9rem;z-index:3;padding:.34rem .7rem;border-radius:999px;
  background:var(--goud);color:#1A1204;font-size:.74rem;font-weight:600;letter-spacing:.06em;
}
.k6{grid-column:span 6;aspect-ratio:16/11}
.k4{grid-column:span 4;aspect-ratio:1/1}
.k8{grid-column:span 8;aspect-ratio:16/9}
.k12{grid-column:span 12;aspect-ratio:21/9}

/* ---------------- duo ---------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.duo__beeld{position:relative;overflow:hidden;border-radius:6px;background:var(--espresso-2);aspect-ratio:4/3}
.duo__beeld img,.duo__beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo__beeld video{opacity:0;transition:opacity .8s ease}
.duo__beeld video.geverfd{opacity:1}
.duo__beeld--portret{aspect-ratio:4/5;max-width:22rem}
.duo__tekst{display:grid;gap:1.3rem;align-content:start}
.duo--om .duo__beeld{order:2}

.punten{display:grid;gap:1.3rem;margin-top:.4rem}
.punt{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.punt .nr{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.05rem;color:var(--goud);line-height:1.5;min-width:1.6rem}
.punt strong{display:block;font-weight:600;font-size:1.02rem;margin-bottom:.2rem}
.punt p{color:var(--grijs);font-size:.98rem}
.op-nacht .punt p,.op-warm .punt p{color:rgba(245,241,232,.76)}

/* ---------------- stappen ---------------- */
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-top:3rem}
.stap{
  position:relative;padding:1.9rem 1.5rem 2rem;border:1px solid var(--lijn);border-radius:6px;
  background:var(--cream);overflow:hidden;transition:transform .5s var(--soep),box-shadow .5s var(--soep);
}
.stap:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(10,7,4,.5)}
.stap .nr{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:2.4rem;line-height:1;color:var(--goud);display:block;margin-bottom:.8rem}
.stap b{display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.26rem;padding-bottom:.08em;margin-bottom:.4rem}
.stap p{font-size:.96rem;color:var(--grijs)}

/* ---------------- tarieven ---------------- */
.tarieven{display:grid;gap:.55rem;margin-top:2.6rem;max-width:44rem}
.tarief{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1.05rem 1.3rem;border:1px solid var(--lijn);border-radius:6px;background:var(--cream);
  transition:transform .35s var(--soep),border-color .3s,box-shadow .35s var(--soep);
}
.op-nacht .tarief,.op-warm .tarief{background:var(--espresso-2);border-color:rgba(245,241,232,.12)}
.tarief:hover{transform:translateY(-2px);border-color:var(--goud);box-shadow:0 18px 34px -24px rgba(30,18,4,.6)}
.tarief b{display:block;font-size:1.02rem;font-weight:600}
.tarief span{display:block;font-size:.87rem;color:var(--grijs);margin-top:.15rem}
.op-nacht .tarief span,.op-warm .tarief span{color:rgba(245,241,232,.66)}
.tarief .bedrag{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:1.6rem;color:var(--brons);font-variant-numeric:tabular-nums;padding-bottom:.06em;white-space:nowrap;
}
.op-nacht .tarief .bedrag,.op-warm .tarief .bedrag{color:var(--goud)}

/* ---------------- werkgebied ---------------- */
.plaatsen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.plaats{
  padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--lijn-licht);
  font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--cream);
  transition:border-color .3s,background .3s,color .3s;
}
/* De chips staan standaard op een donkere sectie. Op linnen of cream stond
   cream op cream en was er niets te lezen; daar krijgen ze inkt en een
   zichtbare rand. */
.op-linnen .plaats,
main .blok:not(.op-nacht):not(.op-warm) .plaats{
  border-color:rgba(15,11,7,.26);background:rgba(255,255,255,.55);color:var(--inkt);
}
.plaats:hover,
.op-linnen .plaats:hover,
main .blok:not(.op-nacht):not(.op-warm) .plaats:hover{
  border-color:var(--goud);background:var(--goud);color:#1A1204;
}

/* ---------------- agenda ---------------- */
.agenda{
  position:relative;z-index:2;max-width:56rem;margin:0 auto;overflow:hidden;
  background:var(--cream);color:var(--inkt);border-radius:8px;
  box-shadow:0 60px 110px -46px rgba(0,0,0,.85),0 0 0 1px rgba(245,241,232,.07);
}
.agenda__hoofd{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.05rem clamp(1.2rem,3.4vw,2.4rem);background:var(--linnen);border-bottom:1px solid var(--lijn);
}
.agenda__hoofd .titel{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.1rem;padding-bottom:.06em}
.agenda__hoofd .klok{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brons)}
.agenda__body{padding:clamp(1.3rem,3.4vw,2.4rem)}
.weekrij{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.weekrij b{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.22rem;padding-bottom:.06em}
.weekrij .pijlen{display:flex;gap:.5rem}
.weekrij button{
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--lijn);background:var(--cream);
  cursor:pointer;font-size:1rem;color:var(--inkt);transition:border-color .3s,background .3s,transform .3s}
.weekrij button:hover:not(:disabled){border-color:var(--goud);background:var(--goud);transform:translateY(-2px)}
.weekrij button:disabled{opacity:.3;cursor:not-allowed}
.dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem}
.dag{
  display:grid;gap:.15rem;justify-items:center;padding:.75rem .2rem .8rem;border-radius:6px;
  border:1px solid var(--lijn);background:#fff;cursor:pointer;font:inherit;color:inherit;
  transition:transform .3s var(--soep),border-color .25s,background .25s,box-shadow .3s;
}
.dag em{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs)}
.dag b{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.32rem;line-height:1;padding-bottom:.06em}
.dag i{font-style:normal;font-size:.6rem;color:var(--groen);font-weight:600}
.dag:hover:not(:disabled){transform:translateY(-3px);border-color:var(--goud);box-shadow:0 3px 0 var(--brons)}
.dag[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);box-shadow:0 3px 0 var(--brons)}
.dag[aria-pressed="true"] em{color:var(--goud)}
.dag[aria-pressed="true"] b{color:var(--cream)}
.dag[aria-pressed="true"] i{color:var(--goud-licht)}
.dag:disabled{opacity:.34;cursor:not-allowed;background:var(--linnen)}
.dag:disabled i{color:var(--grijs)}
.sloten{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.5rem;margin-top:1.4rem}
.slot{
  padding:.8rem .5rem;border-radius:6px;border:1px solid var(--lijn);background:#fff;
  font:inherit;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:transform .3s var(--soep),border-color .25s,background .25s,color .25s,box-shadow .3s;
}
.slot:hover:not(:disabled){transform:translateY(-3px);border-color:var(--goud);box-shadow:0 3px 0 var(--brons)}
.slot[aria-pressed="true"]{background:var(--goud);border-color:var(--goud);color:#1A1204;box-shadow:0 3px 0 var(--brons)}
.slot:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.agenda__slot{
  display:grid;gap:1rem;padding:clamp(1.3rem,3.4vw,2.4rem);
  background:var(--linnen);border-top:1px solid var(--lijn);
}
.gekozen{font-size:1.02rem;font-weight:600}
.gekozen span{color:var(--brons)}

/* ---------------- slotbanner ---------------- */
.slotband{position:relative;overflow:hidden;background:var(--espresso-2);color:var(--cream)}
.slotband .wrap{position:relative;z-index:2;display:grid;gap:1.5rem;justify-items:start;padding-top:clamp(4.5rem,9vw,8rem);padding-bottom:clamp(4.5rem,9vw,8rem)}
.slotband::after{content:"";position:absolute;right:-12%;top:-30%;width:60%;height:160%;z-index:1;
  background:radial-gradient(circle at 50% 50%,rgba(201,160,76,.2),transparent 62%)}
.knoprij{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------------- voet ---------------- */
.voet{background:var(--espresso);color:rgba(245,241,232,.78);padding:4.5rem 0 2.4rem}
.voet a{border-bottom:1px solid rgba(245,241,232,.26)}
.voet a:hover{border-bottom-color:var(--goud);color:var(--goud-licht)}
.voet__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.4rem}
.voet h5{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.12rem;color:var(--cream);margin-bottom:.9rem}
.voet ul{list-style:none;display:grid;gap:.55rem;font-size:.95rem}
.voet__rand{margin-top:3.2rem;padding-top:1.4rem;border-top:1px solid rgba(245,241,232,.13);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:rgba(245,241,232,.5)}

/* ---------------- plakker ---------------- */
.plakker{
  position:fixed;left:50%;bottom:1.4rem;z-index:130;
  transform:translateX(-50%) translateY(160%);transition:transform .55s var(--soep);
  background:rgba(15,11,7,.94);backdrop-filter:blur(14px);
  border-radius:999px;padding:.55rem .55rem .55rem 1.5rem;
  display:flex;align-items:center;gap:1.1rem;max-width:calc(100vw - 2rem);
  box-shadow:0 20px 54px rgba(0,0,0,.46);
}
.plakker.aan{transform:translateX(-50%) translateY(0)}
.plakker p{color:var(--cream);font-size:.82rem;letter-spacing:.04em;white-space:nowrap}
.plakker .knop{min-height:2.5rem;padding:.6rem 1.1rem;font-size:.66rem}

/* ============================================================
   BINNENPAGINA'S
   ============================================================ */
.paginakop{
  position:relative;min-height:clamp(26rem,56svh,38rem);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--espresso);color:var(--cream);
}
.paginakop__media{position:absolute;inset:0;z-index:0}
.paginakop__media img,.paginakop__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.paginakop__media video{z-index:1;opacity:0;transition:opacity 1.2s ease}
.paginakop__media video.geverfd{opacity:1}
.paginakop::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,5,2,.78) 0%,rgba(8,5,2,.2) 34%,rgba(8,5,2,.94) 100%),
    linear-gradient(90deg,rgba(8,5,2,.7) 0%,rgba(8,5,2,.06) 62%,transparent 100%);
}
.paginakop__inhoud{position:relative;z-index:2;width:100%;padding:8rem 0 clamp(2.8rem,6vw,4.6rem)}
.paginakop__inhoud .wrap{display:grid;gap:1.2rem}
.kruimel{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,232,.55)}
.kruimel a{border-bottom:1px solid rgba(245,241,232,.28)}
.kruimel a:hover{color:var(--goud);border-bottom-color:var(--goud)}

/* ---------------- gereedschap: funnel en agenda ---------------- */
.tool--direct{padding:6.2rem 0 clamp(3.2rem,6vw,5.5rem)}
.tool__kop{position:relative;z-index:2;max-width:56rem;margin:0 auto 1.6rem;display:grid;gap:.6rem}
.tool__kop h1{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  letter-spacing:-.024em;line-height:1;color:var(--cream);padding-bottom:.08em}
.tool__kop h1 em{font-style:italic;color:var(--goud)}
.tool__kop .lead{color:rgba(245,241,232,.8);max-width:54ch}
.tool__gerust{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:.5rem;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,232,.62)}
.tool__gerust span{display:flex;align-items:center;gap:.5rem}
.tool__gerust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--goud)}
@media (max-width:640px){
  .tool--direct{padding-top:5.2rem}
  .tool__gerust{gap:.35rem 1rem;font-size:.6rem}
}
.tool{position:relative;overflow:hidden;background:var(--espresso);color:var(--cream)}
.tool::before{
  content:"";position:absolute;left:50%;top:-14%;width:86rem;max-width:160%;height:74%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,160,76,.17),transparent 66%);
}
.kaartje{
  position:relative;z-index:2;max-width:56rem;margin:0 auto;overflow:hidden;
  background:var(--cream);color:var(--inkt);border-radius:8px;
  box-shadow:0 60px 110px -46px rgba(0,0,0,.85),0 0 0 1px rgba(245,241,232,.07);
}
.kaartje__balk{height:3px;background:rgba(15,11,7,.1)}
.kaartje__balk i{display:block;height:100%;width:0;background:var(--goud);transition:width .7s var(--soep)}
.kaartje__hoofd{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem clamp(1.3rem,3.6vw,2.6rem);background:var(--linnen);border-bottom:1px solid var(--lijn);
}
.kaartje__hoofd .titel{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.08rem;padding-bottom:.06em}
.kaartje__hoofd .teller{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brons);opacity:0;transition:opacity .4s}
.kaartje__hoofd .teller.aan{opacity:1}

.stapblad{padding:clamp(1.5rem,3.8vw,2.8rem)}
.scherm{display:none}
.scherm.aan{display:block;animation:schuifIn .6s var(--soep) both}
@keyframes schuifIn{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
.scherm h3{
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.022em;line-height:1.04;padding-bottom:.1em;
}
.scherm h3 em{font-style:italic;color:var(--brons)}
.scherm .hint{margin-top:.7rem;max-width:52ch;font-size:.97rem;color:var(--grijs)}

.keuzes{display:grid;gap:.7rem;margin-top:1.7rem}
.keuzes.twee{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.keuze{
  display:flex;align-items:flex-start;gap:1rem;width:100%;text-align:left;
  padding:1.05rem 1.15rem;background:#fff;border:1px solid var(--lijn);border-radius:6px;
  font:inherit;color:inherit;cursor:pointer;
  transition:transform .35s var(--soep),box-shadow .35s var(--soep),border-color .3s;
}
.keuze .icoon{
  flex:none;width:2.3rem;height:2.3rem;border-radius:5px;display:grid;place-items:center;
  background:var(--linnen);color:var(--brons);
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:.95rem;
  transition:background .3s,color .3s;
}
.keuze b{display:block;font-weight:600;font-size:1rem;line-height:1.3}
.keuze>span>span{display:block;margin-top:.15rem;font-size:.87rem;color:var(--grijs);line-height:1.45}
.keuze:hover{transform:translateY(-3px);border-color:var(--goud);
  box-shadow:0 3px 0 var(--brons),0 20px 36px -22px rgba(30,18,4,.55)}
.keuze:hover .icoon{background:var(--goud);color:#1A1204}
.keuze:active{transform:translateY(1px);box-shadow:0 1px 0 var(--brons)}

.veld{margin-top:1.8rem;max-width:26rem}
.veld label{display:block;margin-bottom:.55rem;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brons)}
.veld input{
  width:100%;font:inherit;font-size:1.1rem;padding:.95rem 1.05rem;
  background:#fff;color:var(--inkt);border:1px solid var(--lijn);border-radius:6px;
  transition:border-color .3s,box-shadow .3s;
}
.veld input:focus{outline:0;border-color:var(--goud);box-shadow:0 0 0 3px rgba(201,160,76,.26)}
.fout{display:none;margin-top:.55rem;font-size:.85rem;color:var(--rood)}
.fout.aan{display:block}
.gerust{display:flex;align-items:center;gap:.55rem;margin-top:.95rem;font-size:.82rem;color:var(--grijs)}
.gerust::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--goud);flex:none}
.slot-rij{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.terug{background:none;border:0;padding:.5rem 0;font:inherit;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);cursor:pointer;transition:color .3s}
.terug:hover{color:var(--brons)}

.uitkomst{display:none}
.uitkomst.aan{display:block;animation:schuifIn .75s var(--soep) both}
.uit-hoofd{position:relative;overflow:hidden;background:var(--espresso);color:var(--cream);
  padding:clamp(2rem,5vw,3.2rem) clamp(1.3rem,3.6vw,2.6rem)}
.uit-hoofd::after{content:"";position:absolute;right:-12%;top:-70%;width:64%;height:240%;
  background:radial-gradient(circle at 50% 50%,rgba(201,160,76,.3),transparent 62%)}
.uit-hoofd .oog{position:relative;z-index:2;color:var(--goud)}
.uit-hoofd .bedrag{
  position:relative;z-index:2;margin-top:.7rem;
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.022em;padding-bottom:.08em;
}
.uit-hoofd .bedrag em{font-style:normal;color:var(--goud-licht)}
.uit-hoofd .onderschrift{position:relative;z-index:2;margin-top:.85rem;max-width:52ch;font-size:.97rem;color:rgba(245,241,232,.82)}
.uit-body{padding:clamp(1.5rem,3.8vw,2.6rem)}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem}
.tegel{padding:1.15rem 1.05rem;background:#fff;border:1px solid var(--lijn);border-radius:6px}
.tegel .t-oog{display:block;font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brons)}
.tegel b{display:block;margin:.5rem 0 .3rem;font-family:var(--display);font-variation-settings:'opsz' 144;
  font-weight:600;font-size:1.85rem;line-height:1.1;color:var(--espresso);padding-bottom:.06em}
.tegel>span:last-child{display:block;font-size:.83rem;color:var(--grijs);line-height:1.5}
.staafkop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:2.4rem 0 1rem;padding-bottom:.65rem;border-bottom:1px solid var(--lijn)}
.staafkop h4{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.22rem;padding-bottom:.06em}
.staafkop small{font-size:.76rem;color:var(--grijs)}
.staven{display:grid;gap:.7rem}
.staaf,.vgl{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr auto;gap:1rem;align-items:center;font-size:.92rem}
.staaf .spoor,.vgl .spoor{display:block;height:10px;border-radius:5px;background:var(--linnen);overflow:hidden}
.staaf .spoor i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--brons),var(--goud));transition:width 1.2s var(--soep)}
.bedragje{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.vergelijk{display:grid;gap:.9rem}
.vgl .spoor{height:16px;border-radius:4px}
.vgl .spoor i{display:block;height:100%;width:0;border-radius:4px;transition:width 1.3s var(--soep)}
.vgl.markt .spoor i{background:var(--grijs)}
.vgl.eigen .spoor i{background:linear-gradient(90deg,var(--brons),var(--goud))}
.vgl b{font-weight:600}
.tijdlijn{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem}
.tl{position:relative;padding:1.15rem 1rem 1.05rem;background:#fff;border:1px solid var(--lijn);border-radius:6px}
.tl::before{content:"";position:absolute;left:1rem;top:0;width:26px;height:3px;background:var(--lijn)}
.tl.klaar::before{background:var(--goud)}
.tl b{display:block;font-size:.95rem;font-weight:600}
.tl span{display:block;margin-top:.2rem;font-size:.82rem;color:var(--grijs)}
/* de zin die je tegen je kapper zegt, de kern van de uitkomst */
.zeg{
  position:relative;margin-top:.2rem;padding:1.5rem 1.6rem 1.5rem 3.2rem;border-radius:8px;
  background:var(--espresso);color:var(--cream);
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(1.12rem,2vw,1.5rem);line-height:1.32;letter-spacing:-.012em;
  box-shadow:0 3px 0 var(--brons),0 24px 44px -26px rgba(10,7,4,.7);
}
.zeg::before{
  content:"";position:absolute;left:1.4rem;top:1.55rem;width:3px;height:calc(100% - 3.1rem);
  border-radius:3px;background:linear-gradient(180deg,var(--goud),var(--brons));
}
@media (max-width:640px){.zeg{padding:1.2rem 1.1rem 1.2rem 2.2rem}.zeg::before{left:.9rem}}

.uit-slot{display:grid;gap:1rem;justify-items:start;padding:clamp(1.5rem,3.8vw,2.6rem);
  background:var(--linnen);border-top:1px solid var(--lijn)}
.kleine-letters{font-size:.76rem;color:var(--grijs);line-height:1.62;max-width:72ch}

/* ---------------- steunblokken ---------------- */
.drie{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1.6rem,4vw,3rem);margin-top:3rem}
.drie h4{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.26rem;padding-bottom:.06em;margin-bottom:.5rem}
.drie p{font-size:.96rem;color:var(--grijs)}
.op-nacht .drie p,.op-warm .drie p{color:rgba(245,241,232,.76)}
.drie .nr{display:block;font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:2.2rem;line-height:1;color:var(--goud);margin-bottom:.6rem}

.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:1.14rem}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:.4rem;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:1.6px solid var(--brons);border-bottom:1.6px solid var(--brons);
  transform:rotate(45deg);transition:transform .4s var(--soep)}
.vraag[open] summary::after{transform:rotate(-135deg)}
.vraag p{padding:0 2.5rem 1.5rem 0;color:var(--grijs);font-size:.97rem;max-width:64ch}

/* ---------------- mobiel ---------------- */
@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo--om .duo__beeld{order:0}
  .duo__beeld--portret{max-width:100%}
  .k6,.k4,.k8,.k12{grid-column:span 12}
  .k6,.k8{aspect-ratio:4/3}
  .k12{aspect-ratio:3/2}
  .voet__grid{grid-template-columns:1fr}
  .hoofdstuk__binnen{max-width:100%}
  .hoofdstuk__kopij::before{inset:-2rem -1.5rem}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero__strip{gap:.6rem 1.2rem;font-size:.62rem}
  .hero__acties .knop{width:100%;justify-content:center}
  .plakker p{display:none}
  .film__route{gap:.55rem .9rem;font-size:.58rem;bottom:1.1rem}
  .staaf,.vgl{grid-template-columns:1fr auto;row-gap:.3rem}
  .staaf .spoor,.vgl .spoor{grid-column:1 / -1;order:3}
  .paginakop__inhoud{padding-top:6.6rem}
  .uit-slot .knoprij .knop,.agenda__slot .knop{width:100%;justify-content:center}
  .merk__sub{display:none}
  .merk__naam{font-size:1.02rem}
  .merk__mark{width:34px;height:34px}
  .kopbalk{gap:.7rem;padding:.65rem var(--goot)}
  .kopbalk .knop{min-height:2.3rem;padding:.5rem .85rem;font-size:.58rem;letter-spacing:.05em}
  .film__kopijlaag .hoofdstuk__binnen{max-width:none !important;width:100%}
  .film__kopijlaag .knop{width:100%;justify-content:center;font-size:.66rem;letter-spacing:.05em}
  .dagen{gap:.3rem}
  .dag{padding:.6rem .1rem .65rem}
  .dag b{font-size:1.1rem}
  .dag em{font-size:.55rem}
  .dag i{font-size:.52rem}
  .rv{width:14rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .regels .regel>span,.onthul{transform:none;opacity:1}
  .masker::after{transform:scaleY(0)}
  .film__laag video{display:none}
  .laad,.zwaan{display:none}
  .scherm.aan,.uitkomst.aan{animation:none}
}

/* ============================================================
   MERKACCENT: het blauw van De Zwaan
   Amber voert de actie, blauw voert het merk. Elke plek waar de
   engine een bronskleur zette en het om herkenning gaat, krijgt
   hier het blauw uit hun eigen logo terug.
   ============================================================ */
.oog{color:var(--blauw-diep)}
.op-nacht .oog,.op-warm .oog,.tool__kop .oog,.uit-hoofd .oog,
.heroedit .oog,.hoofdstuk__binnen .oog,.film__kopijlaag .oog,
.slotband .oog,.paginakop .oog{color:var(--blauw-licht)}
.heroedit .oog,.hoofdstuk__binnen .oog,.paginakop .oog{text-shadow:0 1px 12px rgba(4,8,11,.85)}
/* De hero is een fotorealistisch beeld met veel licht aan de linkerkant. Een
   extra sluier aan die kant houdt de kop en de bewijsbalk leesbaar. */
.heroedit__doek::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,8,11,.82) 0%,rgba(4,8,11,.52) 36%,rgba(4,8,11,.12) 62%,transparent 84%);
}
@media (max-width:900px){
  .heroedit__doek::after{background:linear-gradient(180deg,rgba(4,8,11,.5) 0%,rgba(4,8,11,.3) 34%,rgba(4,8,11,.86) 100%)}
}
h1 em,h2 em,.dsp em{color:var(--blauw-diep)}
.op-nacht h1 em,.op-nacht h2 em,.op-nacht .dsp em,
.op-warm h1 em,.op-warm h2 em,.op-warm .dsp em{color:var(--goud-licht)}
.merk__sub{color:var(--blauw-licht)}
.nav a[aria-current]{color:var(--blauw-licht)}
.scherm h3 em{color:var(--blauw-diep)}
.veld label,.tegel .t-oog,.agenda__hoofd .klok,.kaartje__hoofd .teller{color:var(--blauw-diep)}
.tarief .bedrag{color:var(--blauw-diep)}
.op-nacht .tarief .bedrag,.op-warm .tarief .bedrag{color:var(--goud-licht)}
.punt .nr,.drie .nr,.stap .nr{color:var(--blauw-diep)}
.op-nacht .punt .nr,.op-nacht .drie .nr{color:var(--blauw-licht)}
.vraag summary::after{border-color:var(--blauw-diep)}
::selection{background:var(--blauw);color:#fff}
.keuze .icoon{background:rgba(0,129,195,.12);color:var(--blauw-diep)}
.keuze:hover .icoon{background:var(--blauw);color:#fff}
.dag i{color:var(--groen)}

/* Een vaste rij echte reviews. Bij zevenentwintig beoordelingen waarvan er
   vier letterlijk te citeren zijn, is een oneindige band een lege belofte. */
.rvrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.rvrij .rv{width:auto}
.rvrij .rv p{-webkit-line-clamp:5}

/* ---------------- plattegrond in de tentcheck ---------------- */
.plan{
  position:relative;margin-top:1rem;border:1px solid var(--lijn);border-radius:8px;
  background:#fff;padding:1.1rem;overflow:hidden;
}
.plan__doek{position:relative;width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#F7F5F0,#ECE7DC);
  box-shadow:inset 0 0 0 2px rgba(11,17,22,.12)}
.plan__zone{
  position:absolute;display:grid;align-content:center;justify-items:center;gap:.15rem;
  border-radius:4px;color:#0B1116;text-align:center;padding:.3rem;
  transform:scale(.86);opacity:0;transition:transform .8s var(--soep),opacity .6s ease;
}
.plan.aan .plan__zone{transform:none;opacity:1}
.plan.aan .plan__zone:nth-child(2){transition-delay:.12s}
.plan.aan .plan__zone:nth-child(3){transition-delay:.24s}
.plan.aan .plan__zone:nth-child(4){transition-delay:.36s}
.plan__zone{overflow:hidden}
.plan__zone b{font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;font-size:clamp(.72rem,1.3vw,1.15rem);line-height:1.08;padding-bottom:.06em;hyphens:auto}
.plan__zone span{font-size:.68rem;letter-spacing:.06em;color:rgba(11,17,22,.66);line-height:1.25}
.plan__zone--diner{background:rgba(0,129,195,.16);box-shadow:inset 0 0 0 1.5px rgba(0,129,195,.5)}
.plan__zone--bar{background:rgba(232,164,76,.22);box-shadow:inset 0 0 0 1.5px rgba(180,115,31,.55)}
.plan__zone--dans{background:rgba(11,17,22,.08);box-shadow:inset 0 0 0 1.5px rgba(11,17,22,.28)}
.plan__zone--entree{background:rgba(47,122,85,.14);box-shadow:inset 0 0 0 1.5px rgba(47,122,85,.5)}
.plan__maat{
  position:absolute;left:1.1rem;right:1.1rem;bottom:.35rem;display:flex;justify-content:space-between;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);
}
.plan__legenda{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.9rem;font-size:.74rem;color:var(--grijs)}
.plan__legenda span{display:flex;align-items:center;gap:.4rem}
.plan__legenda i{width:10px;height:10px;border-radius:2px;display:block}

/* ============================================================
   CORRECTIES NA DE QA-RONDE VAN 22-09
   ============================================================ */

/* 1. De twee conversiepagina's hebben een lichte kaart vlak onder de kopbalk.
      Daar moet de balk vanaf de eerste pixel dicht zijn, anders valt het witte
      logo op het cr&egrave;me van de kaart. */
body[data-pagina="tentcheck"] .kopbalk,
body[data-pagina="afspraak"] .kopbalk{
  background:rgba(11,17,22,.95);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(243,240,233,.12);
}

/* 2. Menu op mobiel. De kopbalk had alleen een logo en een knop, dus vanaf een
      telefoon kwam je er niet vandaan. */
.navknop{
  display:none;width:2.6rem;height:2.6rem;flex:none;border:0;border-radius:50%;
  background:rgba(243,240,233,.1);color:var(--cream);cursor:pointer;
  align-items:center;justify-content:center;
}
.navknop span,.navknop span::before,.navknop span::after{
  display:block;width:16px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--soep),opacity .2s;
}
.navknop span{position:relative}
.navknop span::before,.navknop span::after{content:"";position:absolute;left:0}
.navknop span::before{top:-5px}
.navknop span::after{top:5px}
html.menu-open .navknop span{background:transparent}
html.menu-open .navknop span::before{transform:translateY(5px) rotate(45deg)}
html.menu-open .navknop span::after{transform:translateY(-5px) rotate(-45deg)}
.navpaneel{
  position:fixed;inset:0;z-index:119;display:grid;align-content:center;gap:.2rem;
  padding:6rem var(--goot) 3rem;background:rgba(11,17,22,.97);
  backdrop-filter:blur(18px);color:var(--cream);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--soep),transform .45s var(--soep),visibility .35s;
}
html.menu-open .navpaneel{opacity:1;visibility:visible;transform:none}
.navpaneel a{
  display:block;padding:.9rem 0;border-bottom:1px solid rgba(243,240,233,.12);
  font-family:var(--display);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:1.9rem;line-height:1.1;
}
.navpaneel a:last-of-type{border-bottom:0}
.navpaneel .knop{margin-top:1.4rem;width:100%;justify-content:center}
.navpaneel .navtel{font-family:var(--body);font-size:.92rem;border:0;color:var(--blauw-licht);padding-top:1.2rem}
@media (max-width:1000px){ .navknop{display:flex} }

/* 3. De zwevende pil dekte op mobiel knoppen en de voettekst af. Nu een volle
      balk onderaan, met ruimte eronder in de voet. */
@media (max-width:640px){
  .plakker{left:0;right:0;bottom:0;border-radius:0;max-width:none;
    transform:translateY(160%);padding:.6rem .8rem;justify-content:center}
  .plakker.aan{transform:none}
  .plakker .knop{width:100%;justify-content:center}
  .voet{padding-bottom:6.5rem}
}

/* 4. De onthul-animatie duurde zo lang dat een kop seconden onder de lopende
      tekst bleef hangen. */
.onthul{transition:opacity .6s var(--soep),transform .6s var(--soep)}
.regels .regel>span{transition:transform .74s var(--soep)}
.regels .regel:nth-child(2)>span{transition-delay:.06s}
.regels .regel:nth-child(3)>span{transition-delay:.12s}

/* 5. Hoofdstuk twee van de film speelt tegen wit tentdoek. Een zwaardere
      sluier aan de kopzijde houdt de kop leesbaar. */
.film__sluier{
  background:
    linear-gradient(180deg,rgba(4,8,11,.55) 0%,rgba(4,8,11,.10) 26%,rgba(4,8,11,.16) 58%,rgba(4,8,11,.80) 100%),
    linear-gradient(90deg,rgba(4,8,11,.90) 0%,rgba(4,8,11,.70) 26%,rgba(4,8,11,.28) 52%,rgba(4,8,11,.04) 74%,transparent 88%);
}
@media (max-width:640px){
  .film__sluier{background:linear-gradient(180deg,rgba(4,8,11,.5) 0%,rgba(4,8,11,.2) 30%,rgba(4,8,11,.9) 100%)}
}

/* 6. Slotband met beeld op de homepage, zodat vier pagina's niet identiek
      eindigen. */
.slotband--beeld{background:var(--espresso)}
.slotband--beeld::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/foto/05-tafel.jpg") center 58%/cover no-repeat;
  opacity:.34;
}
.slotband--beeld::after{
  background:linear-gradient(90deg,rgba(11,17,22,.96) 0%,rgba(11,17,22,.82) 44%,rgba(11,17,22,.42) 100%);
  right:0;top:0;width:100%;height:100%;
}

/* 7. Een beeldband tussen de prijslijsten op de cateringpagina. */
.beeldband{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-top:2.6rem}
.beeldband figure{position:relative;overflow:hidden;border-radius:6px;background:var(--espresso-2);aspect-ratio:16/10}
.beeldband figure:last-child{aspect-ratio:4/5}
.beeldband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beeldband figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem 1.2rem 1rem;
  background:linear-gradient(180deg,transparent,rgba(4,8,11,.9));color:var(--cream);font-size:.88rem;
}
@media (max-width:760px){.beeldband{grid-template-columns:1fr}.beeldband figure:last-child{aspect-ratio:16/10}}

/* 8. Pictogrammen in de keuzetegels in plaats van losse letters. */
.keuze .icoon svg{width:1.25rem;height:1.25rem;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 9. De kop op het filmdoek volgt de scrollpositie zonder na te lopen. Met een
      overgang op de dekking bleef de vorige kop leesbaar tijdens een flick. */
.film__kopijlaag .hoofdstuk__kopij{transition:transform .8s var(--soep)}

/* 10. Leesbare maten op een telefoon. Alles wat op kapitalen stond zakte
       eerder naar negen of tien pixels. */
@media (max-width:640px){
  .oog{font-size:.72rem;letter-spacing:.22em}
  .hero__strip{font-size:.72rem;letter-spacing:.1em}
  .tool__gerust{font-size:.72rem;letter-spacing:.1em}
  .kopbalk .knop{font-size:.66rem}
  .kruimel{font-size:.7rem;letter-spacing:.16em}
  .voet__rand{font-size:.8rem}
  .klein,.kleine-letters{font-size:.84rem}
  .rv b,.kaart__etiket span{font-size:.8rem}
}

/* 11. Aanraakvlakken van minstens 44 pixels hoog. */
@media (hover:none),(pointer:coarse){
  .voet ul a{display:inline-block;padding:.62rem 0}
  .film__route button{min-height:44px;padding:.7rem 0}
  .nav a{padding:.75rem 0}
  .plaats{padding:.75rem 1.1rem}
}

/* lijstje met het materieel dat uit de berekening rolt */
.lijst{display:grid;gap:.4rem;margin-top:.6rem}
.lijstregel{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.62rem .9rem;background:#fff;border:1px solid var(--lijn);border-radius:6px;font-size:.95rem}
.lijstregel b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--blauw-diep)}
@media (max-width:640px){
  .plan{padding:.7rem}
  .plan__zone span{display:none}
}