/* =====================================================================
   Demo F - "Uithangbord" voor Kapsalon Mus'ab
   Richting 3 uit design/tokens-3nieuw.md.

   Zeven verlichte borden aan een donkere straat. Wat nu open is brandt,
   wat dicht is staat uit, en wat onbekend is krijgt een derde toestand.

   Elke correctie hoort HIER of in build.js te staan, nooit los ernaast,
   anders draait een herbouw hem terug. (WERKWIJZE-DEMOS.md punt 5)
   ===================================================================== */

/* ---------------------------------------------------------- letters
   Lokaal als woff2, geen enkel verzoek naar fonts.googleapis.com.
   latin-ext staat erbij voor de s-cedille in Mus'ab. */
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/zillaslab-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/zillaslab-600-latinext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/zillaslab-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/zillaslab-700-latinext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/publicsans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/publicsans-latinext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------- tokens
   Elke verhouding hieronder is met de hand nagerekend met de WCAG 2.1 formule. */
:root{
  /* Ondergrond, petrol uit hun eigen campagnebeeld */
  --nacht:      #0D191E;
  --nacht-2:    #142831;
  --staal:      #24404A;   /* 1,62:1 als LIJN, dus uitsluitend decoratief.
                              Als VLAK mag het wel: --licht erop is 9,91:1 */

  /* Tekst */
  --licht:      #EEF4F5;   /* 16,08:1 op nacht, 13,72:1 op nacht-2 */
  --licht-2:    #A7BEC5;   /*  9,20:1 op nacht,  7,85:1 op nacht-2 */
  --gedempt:    #7C929A;   /*  5,48:1 op nacht. ALLEEN op --nacht gebruiken */
  --gedempt-2:  #93A8AF;   /*  6,14:1 op nacht-2, 7,20:1 op nacht.
                              Toegevoegd aan de tokens: --gedempt haalt op
                              --nacht-2 nog maar 4,67:1 en dat is te weinig
                              marge voor de tekst van een dicht bord. */

  /* Het licht */
  --amber:      #F2AC52;   /*  9,19:1 op nacht, 7,84:1 op nacht-2 */

  /* Merk */
  --rood-merk:  #ED1F25;   /*  4,11:1 op nacht = ALLEEN 24px of groter */
  --rood-licht: #FF5A5F;   /*  5,86:1 op nacht, 4,99:1 op nacht-2 */
  --rood-knop:  #B3131A;   /*  --licht erop 6,25:1 */

  /* Waschips uit hun eigen productlijn, uitsluitend als vlak */
  --was-orange: #F08A1E;
  --was-blue:   #2E6FD4;
  --was-silver: #B9C3C7;
  --was-zwart:  #68939F;

  --rand-bediening:#547A87; /* 3,84:1 op nacht, de norm voor randen is 3:1 */

  --kop:   "Zilla Slab", Georgia, "Times New Roman", serif;
  --tekst: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --basis:  17px;
  --breed:  1280px;
  --bord-b: 300px;   /* vaste bordbreedte */
  --bord-h: 412px;   /* vaste bordhoogte. De tokens noemen 380; het werd 408
                        omdat de volledige week op het bord staat. Zonder
                        JavaScript is dat de enige plek met de tijden. */
  --gloed:     .85;
  --gloed-uit: .06;
  --gloed-onb: .20;  /* de derde toestand: Emmeloord, niet aan en niet uit */
  --soepel: cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------- grondslag */
*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--basis);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nacht);color:var(--licht);
  font-family:var(--tekst);font-weight:400;font-size:1rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* de gloedlagen steken buiten hun sectie uit */
}
img{display:block;max-width:100%;height:auto}
a{color:var(--amber)}
a:hover{color:var(--licht)}
h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:1.1;margin:0;
  letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.overslaan{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--amber);color:var(--nacht);padding:12px 20px;font-weight:700;
  border-radius:0 0 10px 0;text-decoration:none}
.overslaan:focus{left:0}
.wrap{width:min(100% - 40px,var(--breed));margin-inline:auto}
.tabnum{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- kop van de site */
.sitekop{border-bottom:1px solid var(--staal);background:var(--nacht)}
.sitekop__in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 0;flex-wrap:wrap}
/* Het logo heeft een zwarte contour en zwart schrijfschrift en valt op petrol
   weg (tokens 3.7). Daarom hangt het hier op een LICHT plaatje: precies wat
   een uithangbord is. Een lichte logovariant blijft een vraag aan de klant. */
.merkbord{display:inline-block;background:var(--licht);padding:7px 13px;
  border-radius:7px;line-height:0}
.merkbord img{width:196px;height:89px}
.hoofdnav{display:flex;gap:4px;flex-wrap:wrap}
.hoofdnav a{color:var(--licht-2);text-decoration:none;font-weight:600;
  font-size:.94rem;padding:11px 14px;border-radius:8px;min-height:44px;
  display:inline-flex;align-items:center;
  transition:color .25s var(--soepel),background-color .25s var(--soepel)}
.hoofdnav a:hover{color:var(--licht);background:var(--nacht-2)}
.hoofdnav a[aria-current="page"]{color:var(--amber);background:var(--nacht-2)}

/* ---------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;padding:78px 0 84px}
/* Eén warme lichtplas van CSS, geen foto. Deze richting heeft er ook geen:
   er bestaat geen enkele foto van een van de zeven zaken. */
.hero__plas{position:absolute;inset:-25% -10% auto;height:160%;pointer-events:none;
  background:radial-gradient(44% 44% at 62% 30%,rgba(242,172,82,.20),rgba(242,172,82,.06) 46%,transparent 72%)}
.hero__in{position:relative;display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.eyebrow{font-family:var(--tekst);font-weight:700;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
.eyebrow--rood{color:var(--rood-licht)}
.hero h1{font-size:clamp(2.15rem,5vw,3.7rem);color:var(--licht)}
.hero__zin{margin-top:20px;font-size:1.13rem;color:var(--licht-2);max-width:34em}
.hero__acties{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* Het uithangbord van de zaak zelf, als hero-beeld. */
.uithang{position:relative;justify-self:center;width:min(100%,392px)}
/* Het beugeltje waaraan het bord hangt: twee stangen en een dwarsbalk. */
.uithang__arm{position:absolute;left:18%;right:18%;top:-52px;height:52px;pointer-events:none;
  border:2px solid var(--rand-bediening);border-bottom:0;border-radius:8px 8px 0 0}
/* De gloed is een eigen element met zowel een verloop als een slagschaduw.
   Alleen de DEKKING ervan verandert; er wordt nooit een box-shadow of filter
   geanimeerd, want dat laat de browser opnieuw tekenen. (tokens 3.8) */
.uithang__gloed{position:absolute;inset:-10px;pointer-events:none;border-radius:26px;
  background:radial-gradient(62% 58% at 50% 42%,rgba(242,172,82,.34),transparent 74%);
  box-shadow:0 0 84px 20px rgba(242,172,82,.44),0 34px 96px 0 rgba(242,172,82,.26);
  opacity:0;transition:opacity 900ms var(--soepel)}
.uithang.aan .uithang__gloed{opacity:1}
.uithang__paneel{position:relative;background:var(--licht);border-radius:14px;
  padding:30px 26px 24px;text-align:center;
  box-shadow:0 0 0 4px #0D191E,0 0 0 5px var(--staal);
  transform:rotate(-.6deg)}
.uithang__paneel img{width:100%;height:auto;aspect-ratio:620/282}
.uithang__regel{margin-top:15px;padding-top:14px;border-top:1px solid #C8D2D4;
  font-weight:700;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;
  color:#7A1116} /* 9,84:1 op #EEF4F5, nagerekend met _werk/contrast.py */
.uithang__lamp{position:absolute;left:26px;right:26px;top:-9px;height:5px;pointer-events:none;
  border-radius:3px;background:var(--amber);opacity:.22;
  transition:opacity 900ms var(--soepel)}
.uithang.aan .uithang__lamp{opacity:1}

/* ---------------------------------------------------------- knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 24px;border-radius:10px;font-weight:700;
  font-size:.98rem;text-decoration:none;border:1px solid transparent;
  transition:transform .3s var(--soepel),background-color .3s var(--soepel),
             color .3s var(--soepel),border-color .3s var(--soepel)}
.knop--licht{background:var(--amber);color:var(--nacht)}       /* 9,19:1 */
.knop--licht:hover{background:#FFC077;color:var(--nacht);transform:translateY(-2px)}
.knop--rand{border-color:var(--rand-bediening);color:var(--licht);background:transparent}
.knop--rand:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}
.knop--rood{background:var(--rood-knop);color:var(--licht)}    /* 6,25:1 */
.knop--rood:hover{background:#CE1720;color:var(--licht);transform:translateY(-2px)}
.knopje{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;flex:1 1 0;padding:9px 10px;border-radius:8px;font-weight:600;
  font-size:.87rem;text-decoration:none;color:var(--licht);
  border:1px solid var(--rand-bediening);background:transparent;
  transition:border-color .3s var(--soepel),color .3s var(--soepel)}
.knopje:hover{border-color:var(--amber);color:var(--amber)}
.knopje svg{flex:none}

/* ---------------------------------------------------------- de telstrook */
.telstrook{border-block:1px solid var(--staal);background:var(--nacht-2);
  padding:18px 0}
.telstrook__in{display:flex;gap:8px 30px;align-items:baseline;flex-wrap:wrap;
  min-height:56px}
.telstrook__nu{font-family:var(--kop);font-weight:700;font-size:1.3rem;
  color:var(--amber);margin:0}
.telstrook__noot{color:var(--licht-2);font-size:.93rem;margin:0}

/* ---------------------------------------------------------- de straat */
.straat{position:relative;overflow:hidden}
.straat__verte,.straat__midden{position:absolute;top:0;bottom:0;left:-30%;right:-30%;pointer-events:none;
  will-change:transform}
/* Verre lantaarns, laag 1. Uitsluitend decoratief. */
.straat__verte{
  background-image:radial-gradient(90px 62px at 60px 40%,rgba(167,190,197,.10),transparent 70%);
  background-repeat:repeat-x;background-size:250px 100%}
/* De stoeprand, laag 2. */
.straat__midden{
  background-image:linear-gradient(var(--staal),var(--staal));
  background-repeat:repeat-x;background-size:300% 1px;background-position:0 84%}
/* De strook loopt van rand tot rand, maar het eerste bord staat precies op de
   linkerkantlijn van de container. Daarom hetzelfde inspringen als .wrap. */
.straat__spoor{position:relative;display:flex;gap:0;overflow-x:auto;
  scroll-snap-type:x mandatory;
  --kantlijn:calc((100% - min(100% - 40px,var(--breed))) / 2);
  padding-block:92px 112px;padding-inline:var(--kantlijn);
  scroll-padding-inline-start:var(--kantlijn);
  scrollbar-width:thin;scrollbar-color:var(--rand-bediening) var(--nacht)}
.straat__spoor::-webkit-scrollbar{height:9px}
.straat__spoor::-webkit-scrollbar-track{background:var(--nacht)}
.straat__spoor::-webkit-scrollbar-thumb{background:var(--rand-bediening);border-radius:5px}
.groep{display:flex;gap:26px;position:relative;flex:none}
.groep+.groep{margin-left:28px;padding-left:28px;border-left:1px dashed var(--staal)}
.groep+.groep .groep__plaat{left:28px}
.groep__plaat{position:absolute;top:-40px;left:0;background:var(--staal);
  color:var(--licht);font-weight:700;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;padding:5px 11px;border-radius:4px}  /* 9,91:1 */
.straat__stuur{display:flex;gap:10px;justify-content:flex-end;padding-top:4px}
.pijl{width:46px;height:46px;border-radius:50%;background:transparent;
  border:1px solid var(--rand-bediening);color:var(--licht);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .3s var(--soepel),color .3s var(--soepel)}
.pijl:hover{border-color:var(--amber);color:var(--amber)}
.pijl[disabled]{opacity:.35;cursor:default}
.pijl[disabled]:hover{border-color:var(--rand-bediening);color:var(--licht)}

/* ---------------------------------------------------------- het bord */
.bord{position:relative;flex:none;width:var(--bord-b);scroll-snap-align:start;
  transform:rotate(-.4deg);transition:transform .45s var(--soepel)}
/* De gloed ligt ACHTER het ondoorzichtige paneel en licht de muur eromheen op,
   niet de tekst. Zo blijft het contrast op het bord precies wat de tokentabel
   zegt, ook als het licht op vol vermogen brandt. */
.bord__gloed{position:absolute;inset:-9px;pointer-events:none;border-radius:22px;
  background:radial-gradient(62% 56% at 50% 40%,rgba(242,172,82,.30),transparent 74%);
  box-shadow:0 0 60px 12px rgba(242,172,82,.46),0 22px 64px 0 rgba(242,172,82,.28);
  opacity:0;transition:opacity 800ms var(--soepel)}
.bord__paneel{position:relative;height:var(--bord-h);display:flex;
  flex-direction:column;background:var(--nacht-2);border-radius:13px;
  border:1px solid var(--staal);padding:22px 20px 18px;overflow:hidden;
  transition:border-color .6s var(--soepel)}
/* De tl-buis boven in het bord. Alleen dit smalle strookje wordt lichter, en
   daar staat geen tekst. */
.bord__lamp{position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--amber);opacity:.16;transition:opacity 800ms var(--soepel)}
.bord__lamp::after{content:"";position:absolute;left:0;right:0;top:3px;height:22px;
  background:linear-gradient(rgba(242,172,82,.26),transparent)}
/* Leesvolgorde is ook de kijkvolgorde: naam, adres, status, week. Geen
   order-truc, zodat een schermlezer precies hoort wat een ziende ziet. */
.bord__stad{font-family:var(--kop);font-weight:700;font-size:1.6rem;
  color:var(--licht);line-height:1.05}
.bord__stad a{color:inherit;text-decoration:none;display:inline-block;padding:4px 0}
.bord__stad a:hover{color:var(--amber)}
.bord[data-licht="aan"] .bord__stad a:hover{color:var(--licht)}
.bord--nieuw .bord__stad{padding-right:64px}
.bord__adres{margin-top:5px;font-size:.87rem;color:var(--licht-2);min-height:48px}
.bord__status{display:flex;align-items:flex-start;gap:9px;min-height:52px;
  margin-top:8px;font-weight:700;font-size:.96rem;line-height:1.3;
  color:var(--licht-2)}
.stip{flex:none;width:11px;height:11px;border-radius:50%;margin-top:5px;
  background:var(--gedempt-2);transition:background-color .6s var(--soepel)}
.bord__week{margin-top:4px;padding-top:9px;border-top:1px solid var(--staal);flex:1}
.bord__week li{display:flex;justify-content:space-between;gap:10px;
  font-size:.84rem;line-height:1.52;color:var(--licht-2);
  font-variant-numeric:tabular-nums}
.bord__week li b{font-weight:600;color:var(--gedempt-2)}
/* Vandaag wordt met twee signalen aangeduid, niet alleen met kleur: vet plus
   kleur, en in de HTML aria-current="date". Op een DICHT bord is die regel
   licht in plaats van amber, want amber betekent hier "het licht brandt". */
.bord__week li.vandaag{font-weight:700}
.bord__week li.vandaag,.bord__week li.vandaag b{color:var(--licht)}
.bord[data-licht="aan"] .bord__week li.vandaag,
.bord[data-licht="aan"] .bord__week li.vandaag b{color:var(--amber)}
.bord__onbekend{flex:1;margin-top:4px;padding:12px 14px;border-radius:9px;
  border:1px dashed var(--amber);background:rgba(242,172,82,.07);
  color:var(--amber);font-size:.87rem;line-height:1.45;
  display:flex;align-items:center}
.bord__knoppen{display:flex;gap:9px;margin-top:14px}
.bord__nieuw{position:absolute;top:0;right:0;background:var(--rood-knop);
  color:var(--licht);font-size:.69rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-bottom-left-radius:9px;z-index:2}

/* De drie toestanden. Zonder JavaScript staat er geen data-licht, en dan geldt
   de nachtstand hierboven: bord leesbaar, week compleet, en geen bewering
   over open of gesloten die we niet kunnen waarmaken. */
.bord[data-licht="aan"] .bord__gloed{opacity:var(--gloed)}
.bord[data-licht="aan"] .bord__lamp{opacity:1}
.bord[data-licht="aan"] .bord__paneel{border-color:rgba(242,172,82,.5)}
.bord[data-licht="aan"] .bord__status{color:var(--amber)}

.bord[data-licht="uit"] .bord__gloed{opacity:var(--gloed-uit)}
.bord[data-licht="uit"] .bord__lamp{opacity:.09}
.bord[data-licht="uit"] .bord__status{color:var(--gedempt-2)}
.bord[data-licht="uit"] .bord__stad{color:var(--licht-2)}

.bord[data-licht="onbekend"] .bord__gloed{opacity:var(--gloed-onb)}
.bord[data-licht="onbekend"] .bord__lamp{opacity:.5}
.bord[data-licht="onbekend"] .bord__paneel{border-color:rgba(242,172,82,.35);
  border-style:dashed}
.bord[data-licht="onbekend"] .bord__status{color:var(--amber)}

/* De stip hoort bij de TOESTAND, niet bij het soort kaart. Zo geldt hij ook
   op de vestigingpagina; daar stond eerder een grijze stip bij Emmeloord. */
[data-licht="aan"] .stip{background:var(--amber)}
[data-licht="uit"] .stip{background:var(--gedempt-2)}
[data-licht="onbekend"] .stip{background:transparent;
  box-shadow:inset 0 0 0 2px var(--amber)}

@media (hover:hover) and (pointer:fine){
  .bord:hover{transform:perspective(900px) rotateY(4deg) translateY(-6px)}
}

/* ---------------------------------------------------------- secties */
.sectie{padding:74px 0}
.sectie--paneel{background:var(--nacht-2);border-block:1px solid var(--staal)}
.sectiekop{max-width:44rem;margin-bottom:38px}
.sectiekop h2{font-size:clamp(1.7rem,3.2vw,2.45rem);color:var(--licht)}
.sectiekop p{margin-top:14px;color:var(--licht-2);font-size:1.05rem}

.troeven{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.troef{background:var(--nacht-2);border:1px solid var(--staal);border-radius:13px;
  padding:26px 22px;position:relative;overflow:hidden}
.sectie--paneel .troef{background:var(--nacht)}
.troef::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--amber);opacity:.55}
.troef h3{font-size:1.2rem;color:var(--licht);margin-bottom:9px}
.troef p{color:var(--licht-2);font-size:.96rem}
.troef__nr{font-family:var(--kop);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;color:var(--amber);display:block;margin-bottom:12px}

.belofte{display:grid;gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center}
.belofte__beelden{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.belofte__beelden figure{margin:0}
.belofte__beelden img{width:100%;height:auto;aspect-ratio:1;border-radius:12px;
  border:1px solid var(--staal)}
.belofte__beelden figcaption{margin-top:9px;font-size:.83rem;color:var(--licht-2)}
.belofte h2{font-size:clamp(1.7rem,3.2vw,2.45rem)}
.belofte p{margin-top:16px;color:var(--licht-2);font-size:1.05rem}
.citaat{margin:0;font-family:var(--kop);font-weight:600;font-size:1.26rem;
  line-height:1.4;color:var(--licht);border-left:3px solid var(--amber);
  padding-left:20px}

.wax{display:grid;gap:40px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center}
.wax__kader{border:1px solid var(--staal);border-radius:14px;overflow:hidden;
  background:var(--nacht-2);margin:0}
.wax__kader img{width:100%;height:auto;aspect-ratio:1230/870}
.wax__kader figcaption{padding:12px 16px;font-size:.83rem;color:var(--licht-2)}
.wax__strook{margin:26px 0 0;border:1px solid var(--staal);border-radius:12px;
  overflow:hidden;background:var(--nacht-2)}
.wax__strook img{width:100%;height:auto;aspect-ratio:812/270}
.potten{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.pot{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--staal);
  border-radius:999px;padding:7px 15px 7px 9px;font-size:.87rem;color:var(--licht)}
.pot i{width:18px;height:18px;border-radius:50%;flex:none;display:block}

.actieblok{border:1px solid rgba(242,172,82,.45);border-radius:16px;
  background:var(--nacht-2);overflow:hidden;max-width:640px}
.actieblok__kop{background:var(--rood-knop);color:var(--licht);padding:18px 24px}
.actieblok__kop h2,.actieblok__kop h3{font-size:1.5rem;color:var(--licht)}
.actieblok__kop p{margin-top:5px;font-size:.95rem;color:#FFE4E5} /* 5,78:1 op #B3131A */
.actieblok__lijst{padding:6px 24px 18px}
.actieblok__lijst li{display:flex;justify-content:space-between;gap:16px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--staal);
  font-size:1.02rem}
.actieblok__lijst li:last-child{border-bottom:0}
.actieblok__lijst b{font-family:var(--kop);font-weight:700;font-size:1.5rem;
  color:var(--amber);font-variant-numeric:tabular-nums}
.actieblok__voet{padding:0 24px 22px;color:var(--licht-2);font-size:.9rem}

/* Voetnoot. Bewust display:block en geen flex: bij demo E raakte een losse
   punt achter een link los omdat elk tekstknooppunt een eigen flexitem werd. */
.noot{display:block;margin-top:12px;color:var(--licht-2);font-size:.88rem;
  line-height:1.55;max-width:62em}
.onaf{border:1px dashed var(--amber);border-radius:12px;padding:18px 20px;
  background:rgba(242,172,82,.06);color:var(--licht-2);font-size:.95rem}
.onaf b{display:block;color:var(--amber);font-family:var(--kop);font-size:1.05rem;
  margin-bottom:5px}
/* Het tikdoel is 24 bij 24 (WCAG 2.2, 2.5.8). De negatieve marge houdt de
   optische afstand tot de tijd gelijk aan wat hij zonder padding zou zijn. */
.ster{color:var(--amber);text-decoration:none;font-weight:700;
  display:inline-block;padding:2px 8px;margin:0 -3px}

.jaren{display:grid;gap:34px;grid-template-columns:auto minmax(0,1fr);
  align-items:center}
.jaren__cijfer{font-family:var(--kop);font-weight:700;
  font-size:clamp(3.6rem,10vw,7rem);line-height:.9;color:var(--amber);
  font-variant-numeric:tabular-nums}
.jaren__cijfer span{display:block;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--licht-2);font-family:var(--tekst);
  font-weight:700;margin-top:12px}

/* ---------------------------------------------------------- vestigingpagina */
.kruimel{padding:22px 0 0;font-size:.88rem;color:var(--licht-2)}
/* Tikdoel 24px hoog (WCAG 2.2, 2.5.8). Zonder deze regel is een kruimel 17px. */
.kruimel a{color:var(--licht-2);display:inline-block;padding:4px 0}
.kruimel a:hover{color:var(--amber)}
.kruimel span[aria-hidden]{color:var(--licht-2);padding:0 6px}
.pagkop{padding:32px 0 6px}
.pagkop h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.pagkop__zin{margin-top:14px;color:var(--licht-2);font-size:1.08rem;max-width:38em}
.pagkop__acties{margin-top:26px;display:flex;gap:13px;flex-wrap:wrap}

.vestiging{display:grid;gap:38px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;padding-top:42px}
.tijdenkaart{background:var(--nacht-2);border:1px solid var(--staal);
  border-radius:14px;padding:26px 24px;position:relative}
.tijdenkaart__lamp{position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:14px 14px 0 0;
  background:var(--amber);opacity:.16;transition:opacity 800ms var(--soepel)}
.tijdenkaart[data-licht="aan"] .tijdenkaart__lamp{opacity:1}
.tijdenkaart[data-licht="onbekend"] .tijdenkaart__lamp{opacity:.5}
/* Dezelfde gloed als op een bord, want het is hetzelfde bord. */
.tijdenkaart__gloed{position:absolute;inset:-9px;pointer-events:none;
  border-radius:22px;z-index:-1;
  background:radial-gradient(62% 56% at 50% 30%,rgba(242,172,82,.26),transparent 74%);
  box-shadow:0 0 60px 12px rgba(242,172,82,.40),0 22px 64px 0 rgba(242,172,82,.24);
  opacity:0;transition:opacity 800ms var(--soepel)}
.tijdenkaart[data-licht="aan"] .tijdenkaart__gloed{opacity:1}
.tijdenkaart[data-licht="uit"] .tijdenkaart__gloed{opacity:var(--gloed-uit)}
.tijdenkaart[data-licht="onbekend"] .tijdenkaart__gloed{opacity:var(--gloed-onb)}
.tijdenkaart h2{font-size:1.38rem;margin-bottom:8px}
.tijdenkaart__status{display:flex;gap:9px;align-items:flex-start;
  min-height:46px;font-weight:700;color:var(--licht-2)}
.tijdenkaart[data-licht="aan"] .tijdenkaart__status{color:var(--amber)}
.tijdenkaart[data-licht="onbekend"] .tijdenkaart__status{color:var(--amber)}
.week{margin-top:6px}
.week li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--staal);font-variant-numeric:tabular-nums;
  color:var(--licht)}
.week li:last-child{border-bottom:0}
.week li b{font-weight:600;color:var(--licht-2)}
.week li.dicht,.week li.dicht b{color:var(--gedempt-2)}
.week li.vandaag{font-weight:700}
.week li.vandaag,.week li.vandaag b{color:var(--licht)}
.tijdenkaart[data-licht="aan"] .week li.vandaag,
.tijdenkaart[data-licht="aan"] .week li.vandaag b{color:var(--amber)}
.gegevens li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--staal);
  color:var(--licht)}
.gegevens li:last-child{border-bottom:0}
.gegevens b{flex:none;width:8.5rem;color:var(--licht-2);font-weight:600}
.gegevens a{display:inline-block;padding:5px 0}
.kaartbeeld{border:1px solid var(--staal);border-radius:14px;overflow:hidden;
  margin:30px 0 0}
.kaartbeeld img{width:100%;height:auto;aspect-ratio:1000/560}
.kaartbeeld figcaption{padding:11px 16px;font-size:.82rem;color:var(--licht-2)}

/* Drie kolommen, niet vier: Flevoland vult daarmee een hele regel en de
   provincies met één zaak laten geen halve lege regel achter. */
.bordenraster{display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.bordenraster .bord{width:auto;transform:none}
.provincie{margin-top:50px}
.provincie:first-of-type{margin-top:0}
.provincie__kop{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.provincie__kop h2{font-size:1.32rem;color:var(--licht)}
.provincie__lijn{flex:1;height:1px;background:var(--staal)}

.andere{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.andere a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border:1px solid var(--rand-bediening);border-radius:999px;color:var(--licht);
  text-decoration:none;font-size:.92rem;font-weight:600;
  transition:border-color .3s var(--soepel),color .3s var(--soepel)}
.andere a:hover{border-color:var(--amber);color:var(--amber)}

.tekstblok{max-width:38rem}
.tekstblok p{margin-top:18px;color:var(--licht-2);font-size:1.05rem}
.tekstblok h2{margin-top:42px;font-size:1.55rem;color:var(--licht)}
.tekstblok h2:first-child{margin-top:0}

/* ---------------------------------------------------------- voet */
.voet{border-top:1px solid var(--staal);background:var(--nacht-2);
  padding:54px 0 26px;margin-top:20px}
.voet__in{display:grid;gap:36px;grid-template-columns:repeat(3,minmax(0,1fr))}
.voet__kop{font-family:var(--kop);font-size:1.05rem;color:var(--licht);
  margin-bottom:14px}
.voet__lijst li{padding:0}
/* Tikdoel minstens 24px hoog (WCAG 2.2, 2.5.8). Was 20px. */
.voet__lijst a{color:var(--licht-2);text-decoration:none;display:inline-block;padding:7px 0}
.voet__lijst a:hover{color:var(--amber)}
.voet__lijst--plat li{color:var(--licht-2);font-size:.88rem;line-height:1.5;
  padding:8px 0;border-bottom:1px solid var(--staal)}
.voet__lijst--plat li:last-child{border-bottom:0}
.voet__claim{margin-top:16px;color:var(--licht-2);font-size:.94rem;max-width:26em}
.voet__onder{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:38px;padding-top:20px;border-top:1px solid var(--staal);font-size:.85rem}
.voet__onder p{color:var(--licht-2)}
.voet__demo{max-width:44em}

/* ---------------------------------------------------------- smalle schermen */
@media (max-width:1080px){
  .troeven{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voet__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:40px}
  /* Het beugeltje steekt 52px boven het bord uit en lag daardoor precies
     over de twee heroknoppen zodra de hero onder elkaar valt. Gezien op een
     schermafdruk op 768 en 375 px, niet in een meting. */
  .uithang{justify-self:start;width:min(100%,360px);margin-top:60px}
  .belofte,.wax,.vestiging{grid-template-columns:1fr;gap:30px}
  .belofte__beelden{max-width:440px}
}
/* De straat wordt een stapel. Horizontaal scrollen naast verticaal scrollen
   is op een telefoon vervelend (tokens 3.6). */
@media (max-width:820px){
  .straat__spoor{display:block;overflow:visible;padding:44px 0 20px;
    scroll-snap-type:none}
  .groep{display:block;margin-bottom:48px}
  .groep:last-child{margin-bottom:0}
  .groep+.groep{border-left:0;margin-left:0;padding-left:0;
    border-top:1px dashed var(--staal);padding-top:44px}
  .groep+.groep .groep__plaat{left:auto}
  .groep__plaat{position:static;display:inline-block;margin-bottom:20px}
  .bord{width:100%;max-width:430px;transform:none;margin-bottom:34px}
  .groep .bord:last-child{margin-bottom:0}
  .straat__stuur{display:none}
  .straat__verte,.straat__midden{display:none}
}
@media (max-width:760px){
  .voet__in{grid-template-columns:1fr;gap:28px}
  .jaren{grid-template-columns:1fr;gap:14px}
  .sectie{padding:54px 0}
  .hero{padding:50px 0 58px}
  .bordenraster{grid-template-columns:1fr}
}
@media (max-width:560px){
  .troeven{grid-template-columns:1fr}
  .belofte__beelden{grid-template-columns:1fr 1fr}
  .merkbord img{width:152px;height:69px}
  /* Het menu paste net niet naast het logo en brak op de vierde link af.
     Nu een eigen regel; dan past het wel. */
  .sitekop__in{flex-direction:column;align-items:flex-start;gap:4px}
  .hoofdnav{margin-left:-8px}
  .hoofdnav a{padding:11px 8px;font-size:.88rem}
  .gegevens b{width:100%}
  .gegevens li{flex-direction:column;gap:2px}
  .bord{max-width:none}
  .hero__acties .knop,.pagkop__acties .knop{flex:1 1 100%}
}

/* ---------------------------------------------------------- beweging uit
   Alles staat stil, en er blijft niets onzichtbaar. Een brandend bord staat
   meteen op zijn eindstand en knippert niet. (opdracht + tokens 3.8) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .bord:hover{transform:rotate(-.4deg)}
  .bordenraster .bord:hover{transform:none}
  .straat__verte,.straat__midden{transform:none!important}
}

/* ---------------------------------------------------------- prijzenpagina
   Twee blokken naast elkaar, en de poster in een eigen band met een vaste
   maximumbreedte. Zonder deze regels stond het actieblok alleen op een halve
   regel en liep de poster over de volle 1280 px. Gezien op een schermafdruk. */
.prijsraster{display:grid;gap:44px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.prijsraster .actieblok{max-width:none}
.posterraster{display:grid;gap:48px;
  grid-template-columns:minmax(0,1fr) minmax(0,.66fr);align-items:center}
.posterraster .kaartbeeld{margin:0;max-width:440px;justify-self:end}
@media (max-width:900px){
  .prijsraster,.posterraster{grid-template-columns:1fr;gap:34px}
  .posterraster .kaartbeeld{justify-self:start;max-width:420px}
}

/* Tussen 561 en 820 px staan de borden twee naast elkaar. Onder elkaar met
   een maximum van 430 px liet op 768 px een derde van de regel leeg staan.
   Deze regel staat ACHTER de stapelregel, want media queries hebben dezelfde
   specificiteit en dan wint de laatste. */
@media (min-width:561px) and (max-width:820px){
  .groep{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .groep__plaat{grid-column:1 / -1;justify-self:start}
  .bord{max-width:none;margin-bottom:0}
}