/* =========================================================
   De Lesbrigade
   Warm papier. Navy tekst.
   ========================================================= */

@font-face{font-family:Fredoka;src:url('fonts/fredoka-v17-latin_latin-ext-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fredoka;src:url('fonts/fredoka-v17-latin_latin-ext-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('fonts/nunito-v32-latin_latin-ext-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('fonts/nunito-v32-latin_latin-ext-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* Gemeten uit de papierwereld: warm crèmekarton als rustvlak, perzik en
     terracotta uit de kliffen als accentlagen, de logokleuren als enige
     felle kleur en navy als structuur. De tinten zijn opgelicht ten opzichte
     van de film, anders leest navy tekst er niet goed genoeg op. */
  --canvas:#F3E7D8;
  --panel:#FAF2E7;
  --accent:#EC5615;
  --accent-hover:#C24C10;
  --accent-muted:#EFDCC8;
  --cta:#032867;
  --cta-hover:#021C4A;
  --text-primary:#1B2540;
  --text-secondary:#4A5578;
  --geel:#FEBA02;
  --perzik:#DFC0A2;
  --lijn:#E2D0BA;
  /* oranje voor kleine tekst (fouten, hover, labels over de film):
     --accent-hover haalt op panel maar 4,4 en op canvas 4,0. Deze haalt 7,1
     op panel, 6,4 op canvas en 4,7 op de lichtste plek in de film. */
  --accent-tekst:#8F3508;
  /* randen van dingen waar je op klikt: --lijn is een haarlijn en haalt geen
     3:1; deze haalt 3,7 op canvas en 4,1 op panel */
  --lijn-sterk:#857461;

  --display:Fredoka,'Trebuchet MS',system-ui,sans-serif;
  --brood:Nunito,'Segoe UI',system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-zacht:cubic-bezier(.4,0,.2,1);

  /* warme gloed achter tekst op licht karton, het spiegelbeeld van een donkere scrim */
  --tshadow:0 1px 2px rgba(250,242,231,.9),0 2px 10px rgba(250,242,231,.75),0 8px 34px rgba(250,242,231,.6);

  --rand:clamp(20px,5vw,64px);

  /* De nav staat vast en is 73 px hoog; site.js meet hem na (zoom, grote
     letters). De mededeling staat er vast onder; zonder mededeling is die 0. */
  --nav-hoogte:73px;
  --mededeling-hoogte:0px;
}

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

html,body{overflow-x:hidden;overflow-x:clip}

/* Nav en mededeling samen, plus wat lucht. Deze ruimte telt de browser mee bij
   ankersprongen en bij het in beeld scrollen van de toetsenbordfocus, zodat
   een gefocust veld nooit achter de nav of de strook verdwijnt (WCAG 2.4.11). */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-hoogte) + var(--mededeling-hoogte) + 11px)}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font:400 17px/1.6 var(--brood);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--cta);line-height:1.12;margin:0}
p{margin:0}
a{color:var(--cta)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--cta);color:#fff;padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--accent-hover);outline-offset:3px;border-radius:4px}

.label{
  font-family:var(--brood);font-weight:700;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-secondary);margin:0 0 10px
}

.lede{font-size:19px;color:var(--text-secondary);max-width:58ch;text-wrap:pretty}

/* ---------- de papierkorrel, één vaste laag achter alles ---------- */
/* Eén vaste laag over de hele pagina, zodat scrollen aanvoelt als bewegen
   door één papieren ruimte. Moet BOVEN de secties liggen, anders dekken hun
   eigen achtergronden hem af en is de korrel er wel maar zie je hem niet. */
.korrel{
  position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- knop ----------
   Een lichtveeg loopt er bij hover overheen, de knop komt iets omhoog, en
   onderlangs groeit een gele streep uit het midden. Indrukken duwt hem terug. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-block;background:var(--cta);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:17px;
  padding:14px 26px;border-radius:4px;border:0;cursor:pointer;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  text-shadow:none;
}
.btn::before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 26%,rgba(254,186,2,.34) 48%,transparent 72%);
  transform:translateX(-125%);
  transition:transform .75s var(--ease);
}
.btn::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;
  background:var(--geel);pointer-events:none;
  transition:left .45s var(--ease),right .45s var(--ease);
}
.btn:hover{background:var(--cta-hover);transform:translateY(-2px);box-shadow:0 8px 22px rgba(3,40,103,.22)}
.btn:hover::before{transform:translateX(125%)}
.btn:hover::after,.btn:focus-visible::after{left:0;right:0}
.btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(3,40,103,.18);transition-duration:.08s}
.btn-klein{font-size:15px;padding:10px 18px}
.btn-groot{font-size:19px;padding:16px 30px}

/* tekstlinks krijgen een streep die uit het niets groeit */
.nav-links a:not(.btn),.direct a,.voet-lijst a{
  position:relative;text-decoration:none;
}
.nav-links a:not(.btn)::after,.direct a::after,.voet-lijst a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;
  background:var(--accent);transition:right .4s var(--ease);
}
.nav-links a:not(.btn):hover::after,.direct a:hover::after,.voet-lijst a:hover::after{right:0}
.voet-lijst a:hover{text-decoration:none}

/* ---------- zweefsel: kunstobjecten als watermerk in het papier ----------
   Veertien voorwerpen uit de film (penseel, borduurring, ukelele en de rest,
   getekend in site.js), alleen in de zijmarges naast de inhoudskolom.
   De eigenaar vond ze te druk (13 september): de pagina moet opleuken, maar
   het oog hoort naar de inhoud. Wat uit zichzelf beweegt trekt de blik het
   meest, felle kleur daarna. Daarom:
   - geen eigen beweging: site.js schuift ze alleen mee met scrollen, trager
     dan de pagina, dus hier staat geen animatie;
   - toon op toon: grijs met een warme zweem, lage dekking en multiply, als
     een watermerk in het karton. De vorm blijft herkenbaar, de kleur weg;
   - naar de boven- en onderrand van het scherm lopen ze weg, zodat er nooit
     een voorwerp tegen de nav of de schermrand staat te knippen.
   Ze liggen nooit over inhoud: waar tekst, een kaart, een knop of een beeld
   onder een voorwerp komt, zet site.js de klasse .wijkt en dooft het uit; is
   het weer vrij, dan komt het rustig terug.
   De twee warme plekken die het papier kleuren staan in een eigen laag
   eronder, ook met multiply. Een losse schaduw per voorwerp is bewust
   weggelaten: die maakte er stickers van. */
.zweefsel-gloed{
  position:fixed;inset:0;z-index:29;pointer-events:none;
  mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse 70% 50% at 88% 18%, color-mix(in srgb,var(--perzik) 30%,transparent) 0%, transparent 62%),
    radial-gradient(ellipse 80% 55% at 6% 78%, color-mix(in srgb,var(--perzik) 22%,transparent) 0%, transparent 60%);
}
.zweefsel{
  position:fixed;inset:0;z-index:29;pointer-events:none;overflow:hidden;
  mix-blend-mode:multiply;
  /* onder de nav niets, dan zacht erin en naar de onderrand weer weg */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 72px,#000 30%,#000 68%,transparent 97%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 72px,#000 30%,#000 68%,transparent 97%);
}
/* boven de film hoort het zweefsel niet: daar is het beeld al vol */
.zweefsel,.zweefsel-gloed{transition:opacity .5s var(--ease)}
.zweefsel.in-hero,.zweefsel-gloed.in-hero{opacity:0}
.zweefsel svg{
  position:absolute;top:0;left:0;display:block;
  opacity:var(--dekking,.26);
  /* grijs, minder contrast (anders wordt navy zwart en valt geel weg) en
     pas daarna de warme zweem, zodat de tint die van de schaduw in het
     karton is en niet koel grijs; een fractie zachter, zodat het in het
     papier ligt en niet erop */
  filter:grayscale(1) contrast(.7) sepia(1) saturate(.85) blur(.3px);
  transition:opacity .8s var(--ease-zacht);
  will-change:transform;
}
/* wijken gaat snel, terugkomen rustig; site.js kijkt tijdens het scrollen
   ver genoeg vooruit om dat uitdoven af te maken. Staat een voorwerp toch al
   tegen inhoud aan (.raak, na een sprong), dan is het meteen weg. Dat gaat
   met visibility: een uitdoving die al loopt, stopt niet als je alleen de
   duur verandert. */
.zweefsel svg.wijkt{opacity:0;transition-duration:.22s}
.zweefsel svg.raak{visibility:hidden}
/* een element zonder plek (buiten beeld, of geen marge) tekent niets */
.zweefsel svg.vrij{visibility:hidden}

/* ---------- voortgang en de keuze om de vlucht over te slaan ----------
   De voortgang ligt nooit over de inhoudskolom (1180 px). Alleen waar naast
   die kolom echt ruimte is, staat linksonder een spoor met erboven de naam
   van de sectie. Is die ruimte er niet, dan wordt het een dun staand spoor
   tegen de linkerrand, zonder label. Onder 861 px is er geen rand over en
   valt hij weg. Rechtsonder, zolang de vlucht loopt, de knop om hem over te
   slaan. Escape doet hetzelfde. */
.voortgang{
  position:fixed;left:10px;bottom:22px;z-index:35;pointer-events:none;
  display:flex;flex-direction:column;gap:7px;
}
.voortgang[hidden]{display:none}
.voortgang-label{
  display:none;
  font-family:var(--brood);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-secondary);
}
.voortgang-spoor{
  display:block;width:3px;height:132px;border-radius:2px;
  background:color-mix(in srgb,var(--cta) 16%,transparent);
  overflow:hidden;
}
/* de vulling schaalt (alleen transform); site.js zet --v van 0 tot 1 */
.voortgang-spoor i{
  display:block;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(0deg,var(--geel),var(--accent));
  transform:scaleY(var(--v,0));transform-origin:50% 100%;
  transition:transform .18s linear;
}
/* 1180 kolom + twee keer (64 rand + 132 spoor + 16 lucht) */
@media (min-width:1604px){
  .voortgang{left:var(--rand)}
  .voortgang-label{display:block}
  .voortgang-spoor{width:132px;height:3px}
  .voortgang-spoor i{background:linear-gradient(90deg,var(--geel),var(--accent));transform:scaleX(var(--v,0));transform-origin:0 50%}
}
@media (max-width:860px){
  .voortgang{display:none}
}

.sla-over{
  position:fixed;right:var(--rand);bottom:22px;z-index:35;
  display:inline-flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:blur(8px);
  color:var(--cta);border:1px solid var(--lijn);border-radius:999px;
  font-family:var(--brood);font-weight:700;font-size:13px;
  padding:9px 15px;cursor:pointer;
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s var(--ease),background .3s var(--ease),visibility 0s linear 0s;
}
.sla-over svg{width:12px;height:12px;transition:transform .35s var(--ease)}
.sla-over:hover{border-color:var(--cta);background:var(--panel)}
.sla-over:hover svg{transform:translateY(2px)}
/* weg is ook echt weg: geen tabstop meer, pas na het uitdoven */
.sla-over.weg{
  opacity:0;transform:translateY(8px);pointer-events:none;visibility:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s var(--ease),background .3s var(--ease),visibility 0s linear .4s;
}

@media (max-width:620px){
  .sla-over{font-size:12px;padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  .voortgang-spoor i{transition:none}
}

/* ---------- navigatie ---------- */
/* vast, niet sticky: anders duwt de balk de hero omlaag en valt de knop
   onderaan het scherm weg op lage vensters en telefoons */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--rand);
  background:color-mix(in srgb,var(--canvas) 86%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.nav.vast{border-bottom-color:var(--lijn)}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none}
.merk-mark{width:38px;height:auto;flex:none}
.merk-naam{font-family:var(--display);font-weight:700;font-size:20px;color:var(--cta)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{text-decoration:none;font-weight:700;font-size:15px;color:var(--text-primary)}
.nav-links a:not(.btn):hover{color:var(--accent-tekst)}
/* .nav-links a zet de tekstkleur en wint anders van .btn: navy op navy */
.nav-links a.btn{color:#fff}
.nav-knop{display:none}

/* ---------- mededeling ----------
   Een rustige strook direct onder de vaste nav, op elke pagina (ONTWERP-BEHEER
   4.5). Ook vast, zodat de filmhero niet omlaag schuift: de strook ligt over de
   bovenrand van de film, net als de nav. Op een pagina zonder hero zet site.js
   ruimte boven main (.met-mededeling), zodat de strook geen inhoud bedekt.
   Geen eigen beweging en geen overgang: hij staat er, of hij staat er niet.
   Het menu op de telefoon klapt eroverheen uit (de nav ligt hoger). */
.mededeling{
  position:fixed;top:var(--nav-hoogte);left:0;right:0;z-index:39;
  background:var(--panel);border-bottom:1px solid var(--lijn);
  box-shadow:0 1px 0 rgba(3,40,103,.03);
}
.mededeling-binnen{
  max-width:1180px;margin:0 auto;padding:0 calc(var(--rand) - 10px) 0 var(--rand);
  display:flex;align-items:center;gap:6px 14px;min-height:48px;
}
.mededeling-vlieg{width:26px;height:auto;flex:none;opacity:.8}
.mededeling-tekst{flex:1 1 auto;padding:9px 0;font-size:15px;line-height:1.45;color:var(--text-primary);text-wrap:pretty}
.mededeling-link{
  font-weight:700;color:var(--cta);white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--lijn-sterk);
}
.mededeling-link:hover{text-decoration-color:var(--cta)}
.mededeling-sluit{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;border-radius:4px;background:none;color:var(--cta);cursor:pointer;
}
.mededeling-sluit svg{width:14px;height:14px}
.mededeling-sluit:hover{background:var(--accent-muted)}
.met-mededeling main{padding-top:var(--mededeling-hoogte)}
@media (max-width:620px){
  .mededeling-binnen{gap:4px 10px}
  .mededeling-vlieg{display:none}
  .mededeling-tekst{font-size:14px}
}
@media print{
  .mededeling{display:none}
  .met-mededeling main{padding-top:0}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:1200vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--canvas);
}

.poster{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}

#hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease);
  transform:translateZ(0);will-change:transform;
}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

/* de vaste basis-scrim: een zachte vignettering zodat geen frame rauw is */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 22% 50%,rgba(243,231,216,.5) 0%,rgba(243,231,216,.2) 46%,rgba(243,231,216,0) 74%);
}

.ring{
  position:absolute;left:var(--rand);bottom:var(--rand);width:44px;height:44px;
  color:var(--cta);opacity:.45;transform:rotate(-90deg);pointer-events:none;
}
.stage.video-ready .ring,.stage.video-failed .ring{display:none}

/* ---------- de landing: het logo neemt het over van de film ----------
   Het vliegtuigje uit de video verdwijnt onderuit beeld, en op precies dat
   moment komt dit logo in de plaats. Het merk vliegt van links in en gaat
   op zijn plek liggen, de twee swooshes komen erachteraan, dan het
   woordmerk, dan de regel, dan de knop. Alles hangt aan --k van de band,
   dus de aansluiting is op de scrollpositie exact. */
.logo-mark{
  display:block;width:clamp(118px,13.5vw,205px);height:auto;margin:0 auto 16px;
  overflow:visible;
}
.logo-mark .mark-vlieg{
  --kv:clamp(0,var(--k,0)*2.6,1);
  opacity:var(--kv);
  transform:translate(calc((1 - var(--kv))*-120px),calc((1 - var(--kv))*-34px))
            rotate(calc((1 - var(--kv))*-14deg));
  transform-origin:60% 40%;
}
.logo-mark .swoosh-1{
  --ks1:clamp(0,(var(--k,0) - .26)*3.2,1);
  opacity:var(--ks1);
  transform:translateX(calc((1 - var(--ks1))*26px));
}
.logo-mark .swoosh-2{
  --ks2:clamp(0,(var(--k,0) - .34)*3.2,1);
  opacity:var(--ks2);
  transform:translateX(calc((1 - var(--ks2))*22px));
}

/* het echte woordmerk, scherp, op de plek waar het vliegtuigje landt */
.woordmerk{
  --kw:clamp(0,(var(--k,0) - .44)*3.2,1);
  font-family:var(--display);font-weight:700;color:var(--cta);
  font-size:clamp(30px,4vw,60px);line-height:1;letter-spacing:-.01em;margin:0 0 12px;
  opacity:var(--kw);
  transform:translateY(calc((1 - var(--kw))*16px));
}
[data-entree="land"] .band-sub{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
[data-entree="land"] .band-knop{--kb:clamp(0,(var(--k,0) - .8)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

/* het Duitse woord staat als echte tekst over de film, niet erin */
.duits-bel{
  display:inline-block;background:var(--panel);color:var(--cta);
  border:2px solid var(--cta);border-radius:4px;padding:5px 12px;
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:0;text-transform:none;
}

/* ---------- tekstbanden ---------- */
.banden{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;left:6%;width:34%;top:50%;transform:translateY(-50%);
  opacity:0;text-shadow:var(--tshadow);
}
/* Geen vlak achter de tekst, maar lichtval die de kant op wegloopt waar de
   tekst niet staat. Hij begint ruim buiten beeld links, zodat je die rand nooit
   ziet, dooft naar rechts helemaal uit, en wordt boven en onder weggemaskeerd
   ver voorbij de tekst. Daardoor is er nergens een zichtbare grens. */
.band::before{
  content:"";position:absolute;top:-85%;bottom:-85%;left:-60vw;right:-16%;
  pointer-events:none;z-index:-1;
  opacity:calc(.16 + .84*var(--k,1));
  background:linear-gradient(90deg,
    rgba(250,242,231,.82) 0%,
    rgba(250,242,231,.70) 46%,
    rgba(250,242,231,.32) 74%,
    rgba(250,242,231,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%);
}

/* de settle staat in het midden op een al rustig vlak: daar volstaat een
   heel zachte, brede gloed */
.band-settle::before{
  top:-70%;bottom:-70%;left:-30%;right:-30%;
  background:radial-gradient(ellipse 62% 54% at 50% 50%,
    rgba(250,242,231,.72) 0%,
    rgba(250,242,231,.40) 52%,
    rgba(250,242,231,0) 82%);
  /* De stage knipt de gloed onderaan af en dat gaf een rechte lichte rand
     boven het aanbod. De stage-onderkant ligt op 74 tot 79 procent van dit
     vlak (1366x680 tot 1920x1080), dus de gloed is daarvoor al uitgedoofd.
     De knop onderaan heeft geen gloed nodig, de regel erboven wel. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 72%);
}
.band .label{color:var(--accent-tekst)}
.band-kop{
  position:relative;
  font-family:var(--display);font-weight:700;color:var(--cta);
  font-size:clamp(30px,3.6vw,54px);line-height:1.08;margin:0 0 14px;
  max-width:17ch;
}
.band-sub{font-size:clamp(16px,1.3vw,20px);color:var(--text-primary);max-width:34ch}
.band-knop{margin-top:22px;pointer-events:auto}
.band .btn{text-shadow:none}

/* De settle-band hangt aan de ONDERKANT van het beeld, niet op een percentage.
   De richel in het eindframe verschuift met de cover-crop; de onderkant niet,
   dus zo blijft de knop op elk vensterformaat zichtbaar en onder de richel. */
.band-settle{
  left:50%;right:auto;width:min(52ch,64%);
  top:62%;bottom:auto;                 /* precies onder de richel in het eindframe */
  transform:translateX(-50%);text-align:center;
}
.band-settle .band-kop{
  font-size:clamp(22px,2.4vw,38px);margin:0 auto 10px;max-width:none;
}
.band-settle .band-sub{font-size:clamp(15px,1.05vw,17px);max-width:52ch;margin:0 auto}
.band-settle .band-knop{margin-top:18px}

@media (max-height:760px){
  .band-settle{top:56%}
  .band-settle .logo-mark{width:clamp(72px,7.5vw,110px);margin-bottom:8px}
  .band-settle .woordmerk{font-size:clamp(24px,2.8vw,38px);margin-bottom:8px}
  .band-settle .band-kop{font-size:clamp(20px,2vw,30px)}
  .band-settle .band-sub{font-size:15px}
  .band-settle .band-knop{margin-top:14px}
}

/* woorden en letters, gezet door hero.js */
.w{display:inline-block;white-space:pre}
.c{display:inline-block}

/* (a) splijten, echoot het vel dat over de middenvouw opengaat */
[data-entree="splijt"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))
}
/* (b) zakken, echoot de wereld die stijgt terwijl het vliegtuigje daalt */
[data-entree="zak"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))
}
/* (c) scherp worden, echoot de spotkegel die uitbloeit */
[data-entree="scherp"] .band-kop::before{
  content:attr(data-tekst);position:absolute;inset:0;
  filter:blur(11px);opacity:calc(1 - var(--k,0));
  color:var(--cta);pointer-events:none;
}
[data-entree="scherp"] .w{opacity:var(--k,0)}
/* (d) schuiven, echoot de slinger die strak trekt */
[data-entree="schuif"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))
}
/* (e) springen, echoot de noten die opstuiteren */
[data-entree="spring"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))
}
[data-entree="spring"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (f) landen, drie aankomsten in één band */
[data-entree="land"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px))
}

/* =========================================================
   SECTIES
   ========================================================= */
.sectie{
  position:relative;z-index:2;background:var(--canvas);
  padding:clamp(76px,9vw,132px) var(--rand);
}
/* Alles binnen een sectie zit in dezelfde gecentreerde kolom, zodat de
   inhoud niet tegen de linkerrand plakt met een leeg rechtervlak ernaast.
   De :not houdt dit op twee klassen specificiteit, zodat de eigen marge van
   .stappen en de breedte van .vragen de kolom niet overschrijven. */
.sectie > *:not(.sr){max-width:1180px;margin-left:auto;margin-right:auto}

/* geen los woord op de laatste regel van een kop (de hero zet zijn eigen koppen) */
.sectie h2,.sectie h3{text-wrap:balance}

.sectie-kop{margin:0 auto clamp(36px,4.5vw,60px)}
.sectie-kop h2{font-size:clamp(30px,3.6vw,48px);margin-bottom:16px;max-width:18ch}
.sectie-kop .lede{margin-top:4px}
.kop-midden{text-align:center}
.kop-midden h2,.kop-midden .lede{margin-left:auto;margin-right:auto}
.kop-breed h2{max-width:22ch}

/* entrees van secties */
.op{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.in .op,.op.in{opacity:1;transform:none}

/* ---------- aanbodkaarten ---------- */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(18px,2vw,28px)}
.kaart{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--lijn);border-radius:6px;
  /* opacity hoort erbij: site.js geeft elke tegel .op, en zonder opacity hier
     sprong een binnenkomende tegel in een frame van onzichtbaar naar zichtbaar */
  transition:opacity .5s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.kaart:hover{transform:translateY(-3px);border-color:var(--text-secondary);box-shadow:0 14px 32px rgba(27,37,64,.09)}
.kaart-beeld{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-bottom:1px solid var(--lijn);background:var(--canvas);
}
.kaart-tekst{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.kaart h3{font-size:21px;margin-bottom:12px;max-width:18ch}
.kaart p{color:var(--text-secondary)}
.strook{
  list-style:none;margin:auto 0 0;padding:18px 0 0;border-top:1px dashed var(--lijn);
  display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);
}
/* de strook en "Lees meer" zakken samen naar onderen, zodat "Lees meer" in
   elke tegel op dezelfde hoogte staat */
.kaart-tekst h3 + p{margin-bottom:20px}

/* De hele tegel is een link: de link zit op de kop en spant met ::after over
   de tegel. Zo leest een schermlezer alleen de kop als linktekst. */
.kaart{position:relative}
.kaart-link{color:inherit;text-decoration:none}
.kaart-link::after{content:"";position:absolute;inset:0;z-index:1}
.kaart-meer{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;align-self:flex-start;
  font-family:var(--display);font-weight:600;font-size:16px;color:var(--cta);
}
.kaart-meer svg{width:16px;height:12px;flex:none;transition:transform .35s var(--ease)}
.kaart:hover .kaart-meer svg{transform:translateX(4px)}
/* focus: de rand om de hele tegel, niet om de kop alleen */
@supports selector(:has(a)){
  .kaart-link:focus-visible{outline:none}
  .kaart:has(.kaart-link:focus-visible){outline:3px solid var(--accent-hover);outline-offset:3px}
  .kaart:has(.kaart-link:focus-visible) .kaart-meer svg{transform:translateX(4px)}
}

/* tekstlink met een pijl, voor de vervolgstappen */
.pijl-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--cta);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;
  text-decoration-color:var(--lijn-sterk);
  transition:text-decoration-color .3s var(--ease);
}
.pijl-link svg{width:16px;height:12px;flex:none;transition:transform .35s var(--ease)}
.pijl-link:hover{text-decoration-color:var(--cta)}
.pijl-link:hover svg,.pijl-link:focus-visible svg{transform:translateX(4px)}

/* ---------- voor wie ----------
   Twee kolommen: links de kop, rechts drie regels onder elkaar, gescheiden
   door lijnen. Naam en tekst staan op dezelfde basislijn. */
.sectie-voorwie{background:var(--panel);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.voorwie-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.voorwie-kop h2{font-size:clamp(30px,3.6vw,48px);margin-bottom:16px;max-width:14ch}
.voorwie-kop .lede{max-width:34ch}
.doelgroepen{list-style:none;margin:0;padding:0;border-top:2px solid var(--cta)}
.doelgroep{
  display:grid;grid-template-columns:minmax(128px,.34fr) minmax(0,1fr);gap:8px clamp(20px,3vw,40px);
  align-items:baseline;padding:clamp(22px,2.6vw,32px) 0 clamp(16px,2vw,24px);border-bottom:1px solid var(--lijn);
}
.doelgroep-naam{font-size:clamp(22px,2vw,26px);line-height:1.2}
.doelgroep-tekst p{color:var(--text-secondary);max-width:54ch;margin-bottom:4px}

/* ---------- agenda ----------
   Kop in twee kolommen op één basislijn, daaronder over de volle breedte de
   lijst. Navy voor de structuur, oranje alleen voor de boekknop en focus. */
.agenda-kop{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(32px,6vw,96px);
  align-items:end;align-items:last baseline;margin-bottom:clamp(32px,4vw,52px);
}
.agenda-kop h2{font-size:clamp(30px,3.6vw,48px);max-width:16ch}
.agenda-lijst{border-top:2px solid var(--cta);border-bottom:1px solid var(--lijn)}

.agenda-staat{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(32px,6vw,96px);
  align-items:start;padding:clamp(28px,3.4vw,44px) 0;
}
.agenda-staat h3{font-size:clamp(21px,2vw,26px);margin-bottom:10px}
.agenda-staat-tekst p{color:var(--text-secondary);max-width:48ch}
.agenda-staat-acties{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.agenda-contact{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.agenda-contact a{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;
  background:var(--panel);border:1px solid var(--lijn-sterk);border-radius:999px;
  font-weight:700;font-size:15px;color:var(--cta);text-decoration:none;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.agenda-contact a:hover{border-color:var(--cta)}
.agenda-laden{padding:clamp(28px,3.4vw,44px) 0;color:var(--text-secondary)}

/* de rijen die boeken.js neerzet (opbouw staat als commentaar in index.html) */
.agenda-tabel{width:100%;border-collapse:collapse}
.agenda-tabel th{
  text-align:left;padding:14px 18px 12px 0;border-bottom:1px solid var(--lijn);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);
}
.agenda-rij td{padding:20px 18px 20px 0;border-bottom:1px solid var(--lijn);vertical-align:baseline}
.agenda-rij:last-child td{border-bottom:0}
.agenda-dag{display:block;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;color:var(--cta)}
.agenda-tijd,.agenda-notitie{display:block;font-size:15px;color:var(--text-secondary)}
.agenda-workshop a{
  font-weight:700;color:var(--cta);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--lijn-sterk);
}
.agenda-workshop a:hover{text-decoration-color:var(--cta)}
.agenda-plekken{font-weight:700;white-space:nowrap}
.is-vol .agenda-plekken{color:var(--text-secondary)}
.agenda-rij td.agenda-actie{text-align:right;white-space:nowrap;padding-right:0}
.agenda-knop{min-height:44px;background:var(--accent-hover)}
.agenda-knop:hover{background:#A63F0C;box-shadow:0 8px 22px rgba(166,63,12,.24)}

/* ---------- stappen ---------- */
/* stappen en vragen liggen op het lichtere panel, zodat de secties om en om
   wisselen en niet in één vlak overlopen */
.sectie-stappen{background:var(--panel);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
/* drie naast elkaar, of twee met de derde over de volle breedte: nooit een
   losse stap met een leeg vak ernaast */
.stappen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,48px);
}
@media (max-width:900px){
  .stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stap:nth-child(3){grid-column:1/-1}
  .stap:nth-child(3) p{max-width:58ch}
}
@media (max-width:620px){
  .stappen{grid-template-columns:1fr}
}
.stap{position:relative;padding-top:16px;border-top:2px solid var(--lijn)}
.stap-nr{
  display:block;margin-bottom:14px;color:var(--accent);
  font-family:var(--display);font-weight:700;font-size:38px;line-height:1;
}
.stap h3{font-size:21px;margin-bottom:10px;max-width:22ch}
.stap p{color:var(--text-secondary)}

/* ---------- Luc ---------- */
.luc-grid{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.luc-portret{display:grid;grid-template-columns:1fr;gap:16px}
/* Een foto vult zijn vak (object-position komt uit de focus in team.json). De
   height uit de HTML houdt de plek vrij tijdens het laden; height:auto laat de
   aspect-ratio winnen. */
.portret{display:block;width:100%;height:auto;object-fit:cover;border-radius:6px;background:var(--panel)}
/* Nog geen foto: een vel papier met het vliegtuigje en zijn spoor, toon op toon */
.portret-vel{
  position:relative;overflow:hidden;border:1px solid var(--lijn);
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%,rgba(254,186,2,.08),transparent 70%),
    var(--panel);
}
.portret-tekening{position:absolute;inset:0;width:100%;height:100%}
.portret-spoor{stroke:var(--perzik);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 14}
.portret-vlieg{opacity:.55}
/* Saskia staat in de spotlight, Luc ernaast en kleiner */
.portret-groot{aspect-ratio:4/5}
.portret-klein{aspect-ratio:1/1;width:62%;margin-left:auto}
/* Saskia's eigen woorden, alleen als ze die heeft ingevuld */
.citaat{margin:4px 0 20px;padding-left:18px;border-left:3px solid var(--geel);max-width:52ch}
.luc-tekst .citaat p{margin:0;font-size:19px;line-height:1.5;font-style:italic;color:var(--cta)}
.luc-tekst h2{font-size:clamp(30px,3.6vw,48px);margin-bottom:20px}
.luc-tekst p{color:var(--text-secondary);max-width:56ch;margin-bottom:16px}
.strook-luc{border-top:1px dashed var(--lijn);margin-top:26px}

/* ---------- vragen ---------- */
.sectie-vragen{background:var(--panel);border-top:1px solid var(--lijn)}
.vragen{max-width:76ch;display:grid;gap:0;border-top:1px solid var(--lijn)}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:19px;color:var(--cta);
  transition:color .25s var(--ease);
}
.vraag summary:hover{color:var(--accent-tekst)}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.vraag[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.vraag p{padding:0 0 24px;color:var(--text-secondary);max-width:64ch}

/* ---------- formulier ---------- */
.sectie-voorstel{background:var(--canvas);border-top:1px solid var(--lijn)}
.voorstel-grid{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(300px,1.15fr);gap:clamp(32px,5vw,76px);align-items:start}
.voorstel-kop h2{font-size:clamp(30px,3.6vw,48px);margin-bottom:16px}
.voorstel-agenda{margin-top:14px;color:var(--text-secondary);max-width:46ch;text-wrap:pretty}
.voorstel-agenda a{
  white-space:nowrap;font-weight:700;color:var(--cta);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--lijn-sterk);
}
.voorstel-agenda a:hover{text-decoration-color:var(--cta)}
.direct{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;font-weight:700}
.formulier{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;background:var(--panel);border:1px solid var(--lijn);border-radius:6px;padding:clamp(22px,3vw,36px)}
/* align-content:start, anders rekt een foutregel in de ene kolom het veld ernaast uit */
.veld{display:grid;gap:6px;margin:0;align-content:start}
.veld-breed{grid-column:1/-1}
.veld label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary)}
.opt{text-transform:none;letter-spacing:0;font-weight:400}
.veld input,.veld select,.veld textarea{
  font:400 16px/1.5 var(--brood);color:var(--text-primary);
  background:var(--canvas);border:1px solid var(--text-secondary);border-radius:4px;padding:12px 14px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
  /* bij focus ook het label erboven in beeld, niet half onder de nav */
  scroll-margin-top:32px;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--accent-hover);box-shadow:0 0 0 3px var(--accent-muted);outline:none}
.veld textarea{resize:vertical}
/* de standaardkleur van Chrome haalt maar 3,8 op het veld; deze 6,0 */
.veld ::placeholder{color:var(--text-secondary);opacity:1}
.veld.fout input,.veld.fout textarea,.veld.fout select{border-color:var(--accent-hover)}
.veld .foutregel{font-size:13px;font-weight:700;color:var(--accent-tekst);text-transform:none;letter-spacing:0}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.melding{grid-column:1/-1;font-weight:700;color:var(--cta);min-height:1.6em}

/* ---------- voet ---------- */
.voet{position:relative;z-index:2;background:var(--panel);border-top:1px solid var(--lijn);padding:clamp(48px,6vw,80px) var(--rand) 40px}
.voet-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,3vw,48px);max-width:1180px;margin:0 auto}
.voet-mark{width:46px;height:auto;display:block;margin-bottom:12px}
.voet-naam{font-family:var(--display);font-weight:700;font-size:20px;color:var(--cta)}
.voet-tag{margin-top:8px;color:var(--text-secondary);font-size:15px;max-width:28ch}
.voet-kop{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary);margin-bottom:14px}
.voet-lijst{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:var(--text-secondary);font-size:15px}
.voet-lijst a{color:var(--text-secondary);text-decoration:none}
.voet-lijst a:hover{color:var(--accent-tekst);text-decoration:underline}
/* onderste regel over de volle breedte: links de bedrijfsgegevens (naam, adres,
   KvK, btw-id), rechts de voorwaarden en de privacyverklaring. Rijen op één
   basislijn; bij weinig ruimte breekt elk deel netjes naar een eigen regel. */
.voet-onder{
  max-width:1180px;margin:clamp(36px,4.5vw,56px) auto 0;padding-top:20px;border-top:1px dashed var(--lijn);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px;
}
.voet-bedrijf{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;
  font-size:14px;color:var(--text-secondary);
}
.voet-bedrijf li:not(:last-child)::after{content:"\00B7";margin:0 10px;color:var(--lijn-sterk)}
.voet-onder .voet-juridisch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px}
.voet-juridisch a[aria-current="page"]{color:var(--cta);font-weight:700}

/* =========================================================
   SMALLE SCHERMEN
   ========================================================= */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:16px;
    position:absolute;left:0;right:0;top:100%;
    background:var(--canvas);border-bottom:1px solid var(--lijn);padding:20px var(--rand) 26px;
  }
  .nav-knop{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;align-items:center;
  }
  .nav-streep,.nav-streep::before,.nav-streep::after{
    content:"";display:block;width:24px;height:2px;background:var(--cta);border-radius:2px;
    transition:transform .3s var(--ease),opacity .3s var(--ease);
  }
  .nav-streep::before{transform:translateY(-7px)}
  .nav-streep::after{transform:translateY(5px)}
  .nav-knop[aria-expanded="true"] .nav-streep{background:transparent}
  .nav-knop[aria-expanded="true"] .nav-streep::before{transform:rotate(45deg)}
  .nav-knop[aria-expanded="true"] .nav-streep::after{transform:rotate(-45deg) translateY(-1px)}
  .luc-grid,.voorstel-grid,.voorwie-grid{grid-template-columns:1fr}
  .formulier{grid-template-columns:1fr}
  .voet-grid{grid-template-columns:repeat(2,1fr)}
  /* de portretten naast elkaar in plaats van een smalle kolom met leegte ernaast */
  .luc-portret{grid-template-columns:1.3fr 1fr;align-items:end;max-width:none}
  .portret-klein{width:auto;margin-left:0}
  .voorwie-kop .lede{max-width:58ch}

  .agenda-kop,.agenda-staat{grid-template-columns:1fr}
  .agenda-kop{align-items:start}
  .agenda-staat{gap:22px}
  /* Voor wie (erboven) is hier ook kop, lede en een lijst met een navy lijn.
     De agenda wordt daarom een los panel, zodat de buren niet hetzelfde
     skelet hebben. */
  .agenda-lijst{
    background:var(--panel);border:1px solid var(--lijn);border-radius:6px;
    padding:0 clamp(18px,4vw,28px);
  }

  /* smal: geen tabel meer, maar een blok per datum */
  .agenda-tabel,.agenda-tabel tbody{display:block}
  .agenda-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .agenda-rij{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding:20px 0;border-bottom:1px solid var(--lijn)}
  .agenda-rij:last-child{border-bottom:0}
  .agenda-rij td{display:block;padding:0;border:0}
  .agenda-rij td.agenda-datum,.agenda-rij td.agenda-workshop,.agenda-rij td.agenda-actie{flex:1 1 100%;text-align:left}
  .agenda-rij td.agenda-actie{margin-top:8px}
  .agenda-rij td[data-kop]:not(.agenda-workshop)::before{
    content:attr(data-kop);margin-right:8px;
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);
  }
}

@media (max-width:520px){
  .luc-portret{grid-template-columns:1fr;max-width:320px}
  .portret-klein{width:62%;margin-left:auto}
  .voet-grid{grid-template-columns:1fr}
  .doelgroep{grid-template-columns:1fr;gap:6px}
  .agenda-contact{flex-direction:column;align-items:flex-start}
  .agenda-rij td.agenda-actie .btn{width:100%}
}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .vraag summary{min-height:44px;display:flex;align-items:center}
  /* ook de kleine tekstlinks krijgen 44 px om op te tikken; de lijsten
     schuiven daarom dichter op, zodat de regels niet ver uit elkaar komen */
  .merk{min-height:44px}
  .nav-links a:not(.btn),.direct a,.voet-lijst a{min-height:44px;display:inline-flex;align-items:center}
  .nav-links a:not(.btn)::after,.direct a::after,.voet-lijst a::after{bottom:8px}
  .direct,.voet-lijst{gap:0}
  .voet-lijst li{min-height:44px;display:flex;align-items:center}
  .sla-over{min-height:44px}
}
@media (pointer:coarse) and (max-width:860px){
  .nav-links.open{gap:4px}
}

/* korte vensters: geen ruimte voor kleine overlays */
@media (max-height:560px){
  .ring{display:none}
}

/* =========================================================
   HET STILSTAANDE HERO
   Achter deze vijf voorwaarden speelt de film niet: smalle schermen,
   tablets en telefoons rechtop, lage touchschermen en beperkte beweging.
   Ze staan letterlijk hetzelfde in hero.js; pas je er één aan, pas dan
   beide aan. Hier is de hero één scherm hoog, met het eindbeeld van de
   film als poster, alleen de openingsregel en de knop. Er valt niets over
   te slaan, dus de knop daarvoor is weg.
   ========================================================= */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){

  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end}
  #hero-video,.ring{display:none}
  .poster{position:absolute;inset:0;background-position:center 32%}
  /* het beeld lost onderin op in het papier, zodat de woorden op een rustig
     vlak staan in plaats van over het vliegtuigje */
  .scrim{background:linear-gradient(180deg,rgba(243,231,216,0) 38%,rgba(243,231,216,.70) 60%,var(--canvas) 80%)}

  .banden{position:relative;inset:auto;width:100%;padding:0 var(--rand) clamp(44px,8svh,88px)}
  .band{display:none}

  /* Het logo hoort aan het EIND van de vlucht, niet aan het begin. Wie geen
     vlucht krijgt ziet dus de openingsregel, niet het woordmerk. */
  .band-settle .logo-mark,
  .band-settle .woordmerk,
  .band-settle .band-sub{display:none}

  /* de maat in ch staat op de tekst zelf: een ch van de container is een
     Nunito-ch en perste de Fredoka-kop in drie korte regels */
  .band-intro,.band-settle{
    display:block;position:relative;left:auto;top:auto;bottom:auto;width:min(100%,720px);max-width:none;
    transform:none;opacity:1;margin:0 auto;text-align:center;
  }
  .band-intro::before,.band-settle::before{opacity:1}
  .band-intro .w,.band-intro .c{opacity:1;transform:none}
  .band-intro .band-sub{opacity:1;transform:none;max-width:34ch;margin-left:auto;margin-right:auto}
  .band-intro .band-kop{max-width:17ch;text-wrap:balance;margin-left:auto;margin-right:auto}
  .band-settle{margin-top:26px}
  .band-settle .band-knop{opacity:1;transform:none;margin-top:0}
  .sla-over{display:none}
}

/* =========================================================
   BEPERKTE BEWEGING
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  .op{opacity:1}
  .korrel{display:none}
  /* de settle-band houdt zijn eigen centrering, geen blanket transform:none */
}

/* pauzeer alles op een verborgen tabblad */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}