/* De homepage. De basis (lettertypes, tokens, reset, woordmerk, knoppen,
   sectiekop, slot, toegankelijkheid) komt uit module.css, net als op de
   modulepagina's; hier alleen wat de homepage zelf heeft.
   Nacht eerst (sinds 2 sept 2026): de pagina begint in de avond — een KOEL
   blauwzwart, geen warm bruin — en wordt onderaan pas ochtend. Amber is het
   enige warme licht in beeld. De nacht staat op <body class="nacht">; de
   tokens daarvoor staan in module.css. */
:root{--gloed-op:.06}
body.wisselt *{transition:background-color var(--m-duur-traag) var(--m-curve), color var(--m-duur-traag) var(--m-curve), border-color var(--m-duur-traag) var(--m-curve), box-shadow var(--m-duur-traag) var(--m-curve)}

.horizon{position:fixed;inset:auto 0 0 0;height:55vh;pointer-events:none;z-index:0;
  background:linear-gradient(to top, color-mix(in srgb, var(--amber) calc(var(--gloed-op) * 100%), transparent), transparent 75%)}
main,nav,footer{position:relative;z-index:1}

/* daglijn — tijdrail rechts, 18:30 → 10:00 de volgende ochtend (alleen bij vrije marge) */
.daglijn{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:var(--m-laag-sticky);display:none;flex-direction:column;align-items:center;height:52vh}
@media (min-width:1320px){/* geraamte: de tijdrail staat vast in de vrije marge naast de inhoud */.daglijn{display:flex}}
.daglijn .rail{width:2px;flex:1;background:linear-gradient(to bottom, var(--lijn), var(--amber), var(--lijn));border-radius:var(--m-radius-xs);opacity:.7}
.daglijn .zon{position:absolute;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:var(--m-radius-rond);background:var(--amber);box-shadow:0 0 18px var(--amber-gloed),0 0 36px var(--amber-gloed)}
.daglijn .tijd{position:absolute;right:26px;transform:translateY(-50%);font-size:var(--m-tekst-xs);color:var(--stil);white-space:nowrap;font-weight:600;letter-spacing:var(--m-spatie-kapitaal)}
.daglijn .eind,.daglijn .begin{font-size:var(--m-tekst-xs);color:var(--stil);letter-spacing:var(--m-spatie-kapitaal);padding:var(--m-ruimte-6) 0}

/* nav: de zwevende bovenbalk uit het beheer (sinds 22 sep 2026) — een losse
   kaart met ronde hoeken die meeschuift, in plaats van een balk over de volle
   breedte. Zelfde maatvoering als .morris-nav in de app: 16px radius, rand,
   zachte schaduw, glas. Het woordmerk heeft de amber punt bovenaan, op
   kaphoogte, zoals in de app. */
nav{position:sticky;top:12px;z-index:var(--m-laag-nav);margin:var(--m-ruimte-12) auto 0;max-width:1160px;width:calc(100% - 48px);
  background:color-mix(in srgb, var(--vlak) 92%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--lijn);border-radius:var(--m-radius-l);box-shadow:0 8px 28px color-mix(in srgb, var(--nacht-vlak) 8%, transparent)}
nav .wrap{display:flex;align-items:center;gap:var(--m-ruimte-24);height:60px;max-width:none;padding:0 var(--m-ruimte-16)}
nav .links{display:flex;align-items:center;gap:var(--m-ruimte-20);margin-left:auto;font-size:var(--m-tekst-l);color:var(--stil)}
/* Links en knoppen zijn 44px hoog (aanraakvlak). Zonder flex stond de tekst
   bovenin dat vak, en dus hoger dan de knoppen ernaast. */
nav .links a,nav .btn{display:inline-flex;align-items:center}
nav .links a:hover{color:var(--tekst)}
/* Modules klapt open onder de muis of met Tab. De lijst komt uit
   scripts/site-gegevens.mjs; site-bouwen.mjs zet hem in elke pagina. Op een
   telefoon blijft Modules een gewone link naar de tegels. */
.navmenu{display:contents}
.navmenu-lijst{display:none}
@media (min-width:901px){
  /* geraamte: het uitklapmenu van de bovenbalk, alleen als de links in de balk staan */
  .navmenu{display:block;position:relative}
  .navmenu > a::after{content:"";width:6px;height:6px;margin:calc(-1 * var(--m-ruimte-4)) 0 0 var(--m-ruimte-8);border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
  .navmenu:hover > a,.navmenu:focus-within > a{color:var(--tekst)}
  .navmenu-lijst{display:grid;grid-template-columns:repeat(2,auto);gap:var(--m-ruimte-2) var(--m-ruimte-4);
    position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);padding:var(--m-ruimte-8);
    background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);box-shadow:0 14px 36px color-mix(in srgb, var(--nacht-vlak) 18%, transparent);
    visibility:hidden;opacity:0;transition:opacity var(--m-duur-snel),visibility var(--m-duur-snel)}
  /* brug over de ruimte tussen balk en lijst: de muis laat onderweg niet los */
  .navmenu-lijst::before{content:"";position:absolute;left:0;right:0;top:-17px;height:17px}
  .navmenu:hover .navmenu-lijst,.navmenu:focus-within .navmenu-lijst{visibility:visible;opacity:1}
  /* Escape (toegankelijkheid.js) sluit de lijst zonder de muis te verplaatsen */
  .navmenu.dicht .navmenu-lijst{visibility:hidden;opacity:0}
  /* alleen met muis of toetsenbord te openen, dus compacter dan de 44px van een aanraakvlak */
  nav .links .navmenu-lijst a{min-height:38px;padding:0 var(--m-ruimte-12);border-radius:var(--m-radius-s);color:var(--tekst);white-space:nowrap}
  nav .links .navmenu-lijst a:hover{background:var(--kaart2)}
  .navmenu-lijst svg{flex:none;width:17px;height:17px;margin-right:var(--m-ruimte-10);color:var(--amber)}
}

/* hero — de dag, met carrousel */
.hero{padding:var(--m-ruimte-48) 0 var(--m-ruimte-48)}
.hero .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--m-ruimte-48);align-items:center}
/* gridkolommen mogen smaller dan hun inhoud: de chiprij scrolt zelf (telefoon) */
.hero .wrap > div{min-width:0}
.moment{font-size:var(--m-tekst-m);color:var(--stil);font-weight:600;letter-spacing:var(--m-spatie-kapitaal);margin-bottom:var(--m-ruimte-16);text-transform:uppercase}
.moment b{color:var(--amber)}
/* Syne 700 in plaats van 800: de extra-vette snede loopt zo breed uit dat een
   kop van vier regels op een telefoon uit elkaar valt. 700 is dezelfde letter,
   maar smaller en rustiger; de maat is een stap kleiner. */
h1{font-size:var(--m-display-l);font-weight:700;line-height:var(--m-regel-kop);letter-spacing:var(--m-spatie-kop);margin:0 0 var(--m-ruimte-20)}
h1 em{font-style:normal;color:var(--amber)}
.hero p.lead{font-size:var(--m-tekst-xl);color:var(--stil);max-width:48ch}
.hero .knoppen{display:flex;gap:var(--m-ruimte-12);margin-top:var(--m-ruimte-24);flex-wrap:wrap}

/* carrousel — beheer op de Mac, medewerker op de iPhone */
.hc{position:relative}
.hc::before{content:"";position:absolute;inset:-10% -8%;background:radial-gradient(ellipse 46% 42% at 50% 45%, var(--amber-gloed), transparent 70%);opacity:.5;pointer-events:none;filter:blur(8px)}
.hc-viewport{position:relative;aspect-ratio:2150/1285;touch-action:pan-y;cursor:grab}
.hc-slide{position:absolute;inset:0;opacity:0;transform:scale(.97) translateY(10px);filter:blur(3px);pointer-events:none;
  transition-property:opacity,transform,filter;transition-duration:var(--m-duur-traag);transition-timing-function:var(--m-curve)}
.hc-slide.actief{opacity:1;transform:none;filter:blur(0);pointer-events:auto;transition-duration:var(--m-duur-lang)}
.hc-slide img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 44px color-mix(in srgb, var(--nacht-vlak) 18%, transparent))}
body.nacht .hc-slide img{filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.hc-chips{display:flex;flex-wrap:wrap;gap:var(--m-ruimte-6);justify-content:center;margin-top:var(--m-ruimte-12)}
.hc-chip{position:relative;display:inline-flex;align-items:center;gap:var(--m-ruimte-6);border:1px solid var(--lijn);background:color-mix(in srgb, var(--kaart) 70%, transparent);color:var(--stil);border-radius:var(--m-radius-l);padding:var(--m-ruimte-8) var(--m-ruimte-12) var(--m-ruimte-8) var(--m-ruimte-10);font-size:var(--m-tekst-s);font-weight:500;font-family:var(--f-body);cursor:pointer;overflow:hidden;
  transition-property:color,border-color,transform;transition-duration:var(--m-duur-basis),var(--m-duur-basis),var(--m-duur-snel);transition-timing-function:var(--m-curve-uit)}
.hc-chip:hover{color:var(--tekst)}
.hc-chip svg{width:14px;height:14px;flex:none;color:var(--stil);transition:color var(--m-duur-basis)}
.hc-chip.actief svg,.hc-chip:hover svg{color:var(--amber)}
.hc-chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hc-onder{text-align:center;font-size:var(--m-tekst-l);color:var(--stil);margin-top:var(--m-ruimte-12);min-height:1.6em;transition:opacity var(--m-duur-traag)}
.hc-onder.wissel{opacity:0}
.hc-chip:active{transform:scale(.96)}
.hc-chip.actief{color:var(--tekst);border-color:color-mix(in srgb, var(--amber) 55%, var(--lijn))}
.hc-chip.actief::after{content:"";position:absolute;left:0;bottom:0;height:2px;background:var(--amber);width:100%;transform-origin:left;transform:scaleX(var(--vg,0))}

/* secties: ritme en sectiekop komen uit module.css */
.h2klein{font-size:var(--m-display-s);font-weight:700;line-height:var(--m-regel-kop);margin:var(--m-ruimte-16) 0 var(--m-ruimte-12)}

/* één systeem: weetjes */
.weetjes{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-ruimte-16)}
.weet{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24) var(--m-ruimte-24);transition:border-color var(--m-duur-basis)}
.weet:hover{border-color:color-mix(in srgb, var(--teal) 45%, var(--lijn))}
.weet .van-naar{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);text-transform:uppercase;color:var(--teal);margin-bottom:var(--m-ruimte-8)}
.weet h3{font-size:var(--m-tekst-xl);font-weight:700;margin-bottom:var(--m-ruimte-6)}
.weet p{font-size:var(--m-tekst-l);color:var(--stil)}

/* ketens */
.ketenlabel{font-size:var(--m-tekst-s);font-weight:600;letter-spacing:var(--m-spatie-kapitaal);color:var(--stil);margin:var(--m-ruimte-24) 0 var(--m-ruimte-12)}
.keten{display:flex;gap:0;flex-wrap:wrap}
.stap{flex:1;min-width:170px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-16) var(--m-ruimte-16);position:relative}
.stap+.stap{margin-left:var(--m-ruimte-24)}
.stap+.stap::before{content:"";position:absolute;left:-27px;top:50%;width:28px;height:1px;background:linear-gradient(90deg, var(--lijn), var(--amber))}
.stap b{display:block;font-size:var(--m-tekst-l);font-weight:600;margin-bottom:var(--m-ruimte-4)}
.stap span{font-size:var(--m-tekst-s);color:var(--stil)}

/* kassa + app + kpi's */
.kassa .wrap,.app .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-ruimte-48);align-items:start}
.app .wrap{align-items:center}
.kassa ul,.rlijst{list-style:none;display:grid;gap:var(--m-ruimte-12);margin-top:var(--m-ruimte-8)}
.kassa li,.rlijst li{font-size:var(--m-tekst-l);color:var(--stil);display:flex;gap:var(--m-ruimte-12);align-items:baseline}
.kassa li b,.rlijst li b{color:var(--tekst);font-weight:600}
.kassa li::before,.rlijst li::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--m-radius-rond);background:var(--amber);align-self:flex-start;margin-top:.55em}
/* de kpi-tegel zelf komt uit module.css; hier altijd twee kolommen */
.kpis{grid-template-columns:1fr 1fr}
.chips{display:flex;flex-wrap:wrap;gap:var(--m-ruimte-10);margin-top:var(--m-ruimte-20)}
.chip{border:1px solid var(--lijn);background:var(--kaart);border-radius:var(--m-radius-l);padding:var(--m-ruimte-8) var(--m-ruimte-12);font-size:var(--m-tekst-m);color:var(--stil)}

/* kassa-vloerplan met levende tafel */
.vloerkaart{background:linear-gradient(165deg, var(--kaart), var(--kaart2));border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24)}
.vk-kop{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--lijn);padding-bottom:var(--m-ruimte-12);margin-bottom:var(--m-ruimte-16)}
.vk-kop b{font-family:var(--f-display);font-weight:700;font-size:var(--m-tekst-xl)}
.vk-kop span{font-size:var(--m-tekst-m);color:var(--stil);font-weight:600}
.vk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-ruimte-12)}
.vk-tafel{position:relative;border-radius:var(--m-radius-m);padding:var(--m-ruimte-12) var(--m-ruimte-16);min-height:76px;transition:background-color var(--m-duur-lang) var(--m-curve),border-color var(--m-duur-lang) var(--m-curve),box-shadow var(--m-duur-lang) var(--m-curve)}
.vk-tafel b{display:block;font-size:var(--m-tekst-m);font-weight:700;margin-bottom:var(--m-ruimte-4)}
.vk-tafel span{font-size:var(--m-tekst-s);color:var(--stil)}
.vk-tafel .wie{display:block;font-size:var(--m-tekst-s);font-weight:600;color:var(--tekst)}
.vk-tafel.vrij{border:1.5px dashed var(--lijn);background:transparent}
.vk-tafel.bezet{border:1px solid color-mix(in srgb, var(--amber) 55%, var(--lijn));background:linear-gradient(150deg, color-mix(in srgb, var(--amber) 14%, var(--kaart)), color-mix(in srgb, var(--amber) 4%, var(--kaart)))}
.vk-tafel.bezet i,.vk-tafel.hero i{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:var(--m-radius-rond);background:var(--amber);animation:adem 2.6s ease-in-out infinite}
.vk-tafel.klaar{border:1px solid color-mix(in srgb, var(--groen) 45%, var(--lijn));background:color-mix(in srgb, var(--groen) 8%, var(--kaart))}
.vk-tafel.klaar span{color:var(--groen)}
/* de levende tafel: vrij → reservering-verwacht (koel blauw) → aan tafel (amber) */
.vk-tafel.hero{border:1.5px dashed var(--lijn)}
.vk-tafel.hero .st-res,.vk-tafel.hero .st-zit,.vk-tafel.hero i{opacity:0;transition:opacity var(--m-duur-lang) var(--m-curve)}
.vk-tafel.hero span{display:block}
.vk-tafel.hero .st-res{color:var(--blauw);font-weight:600;margin-top:calc(-1 * var(--m-ruimte-16))}
.vk-tafel.hero .st-zit{margin-top:calc(-1 * var(--m-ruimte-16))}
.vk-tafel.hero .st-zit em{font-style:normal;font-family:var(--f-display);font-weight:700;color:var(--tekst);display:block;font-size:var(--m-tekst-l)}
.vk-tafel.hero.res{border:1.5px solid color-mix(in srgb, var(--blauw) 55%, var(--lijn));background:color-mix(in srgb, var(--blauw) 7%, var(--kaart));box-shadow:0 0 18px color-mix(in srgb, var(--blauw) 22%, transparent)}
.hero.res .st-vrij{opacity:0}
.hero.res .st-res{opacity:1}
.vk-tafel.hero.zit{border:1px solid color-mix(in srgb, var(--amber) 60%, var(--lijn));background:linear-gradient(150deg, color-mix(in srgb, var(--amber) 16%, var(--kaart)), color-mix(in srgb, var(--amber) 5%, var(--kaart)));box-shadow:0 0 20px var(--amber-gloed)}
.hero.zit .st-vrij,.hero.zit .st-res{opacity:0}
.hero.zit .st-zit,.hero.zit i{opacity:1}
.vk-tafel.hero .st-vrij{transition:opacity var(--m-duur-traag) var(--m-curve)}
.vk-gast{margin-top:var(--m-ruimte-12);font-size:var(--m-tekst-s);color:var(--stil);background:color-mix(in srgb, var(--amber) 8%, var(--kaart));border:1px solid color-mix(in srgb, var(--amber) 35%, var(--lijn));border-radius:var(--m-radius-m);padding:var(--m-ruimte-12) var(--m-ruimte-16);opacity:0;transform:translateY(4px);transition:opacity var(--m-duur-lang) var(--m-curve),transform var(--m-duur-lang) var(--m-curve)}
.vk-gast b{color:var(--tekst);font-weight:600}
.vk-gast.zichtbaar{opacity:1;transform:none}
.vk-voet{display:flex;justify-content:space-between;gap:var(--m-ruimte-8);flex-wrap:wrap;border-top:1px solid var(--lijn);margin-top:var(--m-ruimte-16);padding-top:var(--m-ruimte-12);font-size:var(--m-tekst-xs);font-weight:600;letter-spacing:var(--m-spatie-kapitaal);color:var(--stil);text-transform:uppercase}

/* weekrooster-visual */
.weekkaart{background:linear-gradient(165deg, var(--kaart), var(--kaart2));border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24)}
.wk-kop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--m-ruimte-10);flex-wrap:wrap;border-bottom:1px solid var(--lijn);padding-bottom:var(--m-ruimte-12);margin-bottom:var(--m-ruimte-16)}
.wk-kop b{font-family:var(--f-display);font-weight:700;font-size:var(--m-tekst-xl)}
.wk-kop>span{font-size:var(--m-tekst-s);color:var(--stil)}
.wk-badge{white-space:nowrap;font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);color:var(--groen);background:color-mix(in srgb, var(--groen) 12%, var(--kaart));border:1px solid color-mix(in srgb, var(--groen) 40%, var(--lijn));padding:var(--m-ruimte-4) var(--m-ruimte-10);border-radius:var(--m-radius-l);margin-left:var(--m-ruimte-10);vertical-align:2px}
.wk-drukte{display:grid;grid-template-columns:86px 1fr;gap:var(--m-ruimte-10);align-items:end;margin-bottom:var(--m-ruimte-6)}
.wk-label{font-size:var(--m-tekst-xs);font-weight:600;letter-spacing:var(--m-spatie-kapitaal);text-transform:uppercase;color:var(--stil);line-height:var(--m-regel-tekst)}
.wk-label i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:var(--stil)}
.wk-balkjes{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--m-ruimte-8);align-items:end;height:44px}
.wk-balkjes span{display:block;height:var(--h);background:color-mix(in srgb, var(--teal) 45%, var(--kaart));border-radius:var(--m-radius-xs) var(--m-radius-xs) var(--m-radius-xs) var(--m-radius-xs);transition:height var(--m-duur-lang) var(--m-curve)}
.wk-balkjes span.hoog{background:linear-gradient(to top, color-mix(in srgb, var(--amber) 55%, var(--kaart)), var(--amber));box-shadow:0 0 14px var(--amber-gloed)}
.wk-dagen{display:grid;grid-template-columns:86px repeat(7,1fr);gap:var(--m-ruimte-8);font-size:var(--m-tekst-xs);font-weight:600;letter-spacing:var(--m-spatie-kapitaal);text-transform:uppercase;color:var(--stil);text-align:center;padding:var(--m-ruimte-6) 0 var(--m-ruimte-8);border-bottom:1px solid var(--lijn);margin-bottom:var(--m-ruimte-10)}
.wk-dagen .nu{color:var(--amber)}
.wk-band{display:grid;grid-template-columns:86px repeat(7,1fr);gap:var(--m-ruimte-8);align-items:center;padding:var(--m-ruimte-4) 0}
.wk-fk{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);text-transform:uppercase;color:var(--fk)}
.wk-cel{position:relative;height:34px;border-radius:var(--m-radius-s);background:color-mix(in srgb, var(--lijn) 22%, transparent)}
.wk-cel.krap{outline:1px solid color-mix(in srgb, var(--amber) 60%, var(--lijn));outline-offset:-1px;box-shadow:0 0 16px var(--amber-gloed)}
.wk-dienst{position:absolute;inset:3px;border-radius:var(--m-radius-s);display:grid;grid-auto-flow:column;place-items:center;justify-content:center;font-style:normal;font-size:var(--m-tekst-s);font-weight:700;color:var(--fk);border-left:3px solid var(--fk);
  background:linear-gradient(150deg, color-mix(in srgb, var(--fk) 16%, var(--kaart)), color-mix(in srgb, var(--fk) 5%, var(--kaart)))}
.wk-dienst em{font-style:normal;color:var(--amber);margin-left:var(--m-ruimte-4);animation:adem 2.2s ease-in-out infinite;border-radius:var(--m-radius-rond)}
.wk-alert{display:flex;gap:var(--m-ruimte-12);align-items:center;margin-top:var(--m-ruimte-16);background:color-mix(in srgb, var(--amber) 9%, var(--kaart));border:1px solid color-mix(in srgb, var(--amber) 40%, var(--lijn));border-radius:var(--m-radius-m);padding:var(--m-ruimte-12) var(--m-ruimte-16)}
.wk-alert i{flex:none;width:9px;height:9px;border-radius:var(--m-radius-rond);background:var(--amber);animation:adem 2.2s ease-in-out infinite}
.wk-alert b{display:block;font-size:var(--m-tekst-m);font-weight:600}
.wk-alert div span{font-size:var(--m-tekst-s);color:var(--stil)}
.wk-fix{flex:none;font-size:var(--m-tekst-xs);font-weight:700;color:var(--amber);border:1px dashed color-mix(in srgb, var(--amber) 55%, var(--lijn));border-radius:var(--m-radius-l);padding:var(--m-ruimte-6) var(--m-ruimte-10);white-space:nowrap}

/* stappen */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--m-ruimte-16)}
.stapkaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24) var(--m-ruimte-20)}
.stapkaart .nr{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);color:var(--amber);margin-bottom:var(--m-ruimte-10)}
.stapkaart h3{font-size:var(--m-tekst-xl);font-weight:700;margin-bottom:var(--m-ruimte-8)}
.stapkaart p{font-size:var(--m-tekst-m);color:var(--stil)}

/* dageraad — hier komt de zon op (overgangssectie) */
.dageraad{padding:var(--m-ruimte-64) 0}
.dageraad .sectiekop p{color:var(--tekst)}
.console{background:linear-gradient(165deg, var(--kaart), var(--kaart2));border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24) var(--m-ruimte-24) var(--m-ruimte-12);max-width:640px;margin:0 auto}
.console .kop{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--lijn);padding-bottom:var(--m-ruimte-12);margin-bottom:var(--m-ruimte-4)}
.console .kop .t{font-family:var(--f-display);font-weight:700;font-size:var(--m-tekst-xl)}
.console .kop span{font-size:var(--m-tekst-m);color:var(--stil)}
.feed{list-style:none}
.feed li{position:relative;display:grid;grid-template-columns:44px 14px 1fr;gap:var(--m-ruimte-12);padding:var(--m-ruimte-10) 0;align-items:start}
.feed .tijd{font-size:var(--m-tekst-s);color:var(--stil);padding-top:var(--m-ruimte-2);text-align:right}
.feed .dot{position:relative;top:7px;width:8px;height:8px;border-radius:var(--m-radius-rond);background:var(--teal);box-shadow:0 0 10px color-mix(in srgb, var(--teal) 30%, transparent);justify-self:center}
.feed li.ai .dot{background:var(--amber);box-shadow:0 0 12px var(--amber-gloed);animation:adem 2.6s ease-in-out infinite}
.feed li::after{content:"";position:absolute;left:calc(44px + 11px + 6px);top:25px;bottom:-4px;width:1px;background:var(--lijn)}
.feed li:last-child::after{display:none}
.feed .wat b{display:block;font-size:var(--m-tekst-l);font-weight:600}
.feed .wat span{font-size:var(--m-tekst-s);color:var(--stil)}
.feed .wat .tag{display:inline-block;font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);color:var(--amber);margin-left:var(--m-ruimte-6);vertical-align:1px}
@keyframes adem{0%,100%{box-shadow:0 0 6px var(--amber-gloed)}50%{box-shadow:0 0 20px var(--amber-gloed),0 0 36px var(--amber-gloed)}}
.console .voet{border-top:1px solid var(--lijn);margin-top:var(--m-ruimte-6);padding-top:var(--m-ruimte-12);font-size:var(--m-tekst-s);color:var(--stil);text-align:center}

/* reserveringen-uitlicht (avond) */
.reserveringen{background:var(--kaart);border-block:1px solid var(--lijn)}
.reserveringen .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-ruimte-48);align-items:center}
.reserveringen ul{list-style:none;display:grid;gap:var(--m-ruimte-12);margin-top:var(--m-ruimte-8)}
.reserveringen li{font-size:var(--m-tekst-l);color:var(--stil);display:flex;gap:var(--m-ruimte-12);align-items:baseline}
.reserveringen li b{color:var(--tekst);font-weight:600}
.reserveringen li::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--m-radius-rond);background:var(--amber);align-self:flex-start;margin-top:.55em}
.avond{background:linear-gradient(165deg, var(--kaart2), var(--kaart));border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24)}
.avond .kop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--m-ruimte-16)}
.avond .kop b{font-family:var(--f-display);font-weight:700;font-size:var(--m-tekst-xl)}
.avond .kop span{font-size:var(--m-tekst-s);color:var(--stil)}
.tafelrij{display:grid;grid-template-columns:64px 1fr;gap:var(--m-ruimte-12);align-items:center;padding:var(--m-ruimte-8) 0}
.tafelrij .naam{font-size:var(--m-tekst-s);color:var(--stil);text-align:right}
.balkbaan{position:relative;height:26px;background:color-mix(in srgb, var(--lijn) 40%, transparent);border-radius:var(--m-radius-s)}
.balk{position:absolute;top:3px;bottom:3px;border-radius:var(--m-radius-xs);font-size:var(--m-tekst-xs);font-weight:600;display:flex;align-items:center;padding:0 var(--m-ruimte-8);white-space:nowrap;overflow:hidden}
.balk.zit{background:linear-gradient(150deg, color-mix(in srgb, var(--amber) 45%, var(--kaart)), color-mix(in srgb, var(--amber) 22%, var(--kaart)));color:var(--tekst)}
.balk.zit::after{content:"";width:7px;height:7px;border-radius:var(--m-radius-rond);background:var(--amber);margin-left:var(--m-ruimte-8);box-shadow:0 0 8px var(--amber-gloed);animation:adem 2.6s ease-in-out infinite}
.balk.komt{border:1px dashed color-mix(in srgb, var(--blauw) 65%, var(--lijn));color:var(--blauw)}
.balk.klaar{background:color-mix(in srgb, var(--lijn) 55%, transparent);color:var(--stil)}
.ster{display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;fill:currentColor}
.balk .ster{flex:none;color:var(--amber);margin-right:var(--m-ruimte-6)}
.avond .nu{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);box-shadow:0 0 10px var(--amber-gloed);border-radius:var(--m-radius-xs)}
.avond .voet{margin-top:var(--m-ruimte-16);padding-top:var(--m-ruimte-12);border-top:1px solid var(--lijn);font-size:var(--m-tekst-s);color:var(--stil);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--m-ruimte-8)}
.avond .voet b{color:var(--tekst)}

/* morris 's nachts */
.nachtwerk .kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-ruimte-16)}
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24) var(--m-ruimte-24);transition:border-color var(--m-duur-basis)}
.kaart:hover{border-color:color-mix(in srgb, var(--amber) 45%, var(--lijn))}
.kaart .tijdstip{font-size:var(--m-tekst-s);font-weight:600;letter-spacing:var(--m-spatie-kapitaal);color:var(--amber);margin-bottom:var(--m-ruimte-12)}
.kaart h3{font-size:var(--m-tekst-xl);font-weight:700;margin-bottom:var(--m-ruimte-8)}
.kaart p{font-size:var(--m-tekst-l);color:var(--stil)}
.regelbalk{margin-top:var(--m-ruimte-24)}

/* ochtendrapport (vooruitblik, in de nacht) */
.rapport{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-32);max-width:720px;margin:0 auto}
.rapport .kop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--m-ruimte-6)}
.rapport .kop h3{font-size:var(--m-tekst-3xl);font-weight:800}
.rapport .kop span{font-size:var(--m-tekst-m);color:var(--stil)}
.rapport>p{font-size:var(--m-tekst-xl);color:var(--stil);margin-bottom:var(--m-ruimte-20)}
.rapport .cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-ruimte-12)}
.rapport .cijfer{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-16)}
.rapport .cijfer b{display:block;font-family:var(--f-display);font-size:var(--m-tekst-4xl);font-weight:800;line-height:var(--m-regel-kop)}
.rapport .cijfer span{font-size:var(--m-tekst-s);color:var(--stil)}
.rapport .cijfer.aandacht{border-color:color-mix(in srgb, var(--amber) 55%, var(--lijn))}
.rapport .cijfer.aandacht b{color:var(--amber)}

/* over */
.over .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--m-ruimte-48);align-items:center}
.over p.body{color:var(--stil);font-size:var(--m-tekst-xl);margin-bottom:var(--m-ruimte-16)}
.maurice{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-24)}
.maurice blockquote{font-family:var(--f-display);font-weight:700;font-size:var(--m-tekst-2xl);line-height:var(--m-regel-ui);margin-bottom:var(--m-ruimte-20)}
.maurice .wie{display:flex;align-items:center;gap:var(--m-ruimte-12)}
.maurice .wie i{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--m-radius-rond);background:var(--amber);color:var(--actie-tekst);font-style:normal;font-family:var(--f-display);font-weight:800}
.maurice .wie b{display:block;font-size:var(--m-tekst-l)}
.maurice .wie span{font-size:var(--m-tekst-s);color:var(--stil)}

/* prijs */
.prijs .wrap{grid-template-columns:1fr 1fr;gap:var(--m-ruimte-48);align-items:center;display:block}
.prijsnoot{margin-top:var(--m-ruimte-16);font-size:var(--m-tekst-s);color:var(--stil)}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--lijn);padding:var(--m-ruimte-4) 0}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--m-tekst-xl);padding:var(--m-ruimte-16) var(--m-ruimte-32) var(--m-ruimte-16) 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;color:var(--amber);font-size:var(--m-tekst-3xl);font-weight:600;transition:transform var(--m-duur-basis)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--m-ruimte-16);font-size:var(--m-tekst-l);color:var(--stil);max-width:64ch}

/* ── demoformulier ─────────────────────────────────────────────── */
.demo{max-width:660px;margin:var(--m-ruimte-32) auto 0;text-align:left;display:grid;gap:var(--m-ruimte-16)}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-ruimte-16)}
.veld{display:grid;gap:var(--m-ruimte-8)}
.veld.breed{grid-column:1/-1}
.veld > span{font-size:var(--m-tekst-s);font-weight:600;color:var(--stil)}
.veld > span i{font-style:normal;color:var(--amber)}
.demo input[type=text],.demo input[type=email],.demo input[type=tel],
.demo input[type=date],.demo select,.demo textarea{
  width:100%;font:inherit;font-size:var(--m-tekst-xl);color:var(--tekst);
  background:var(--kaart);border:1px solid var(--stil);border-radius:var(--m-radius-s);padding:var(--m-ruimte-12) var(--m-ruimte-12);
  transition-property:border-color,box-shadow;transition-duration:var(--m-duur-basis)}
.demo textarea{resize:vertical;min-height:82px}
.demo input:focus,.demo select:focus,.demo textarea:focus{
  outline:0;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-gloed)}
.demo input[aria-invalid="true"]{border-color:var(--rood);box-shadow:0 0 0 3px color-mix(in srgb, var(--rood) 22%, transparent)}
/* datumveld in de nacht leesbaar houden */


.tijdvakken{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-ruimte-8)}
.tijdvakken label{position:relative;cursor:pointer}
.tijdvakken input{position:absolute;opacity:0;width:0;height:0}
.tijdvakken span{display:block;border:1px solid var(--stil);background:var(--kaart);border-radius:var(--m-radius-s);
  padding:var(--m-ruimte-10) var(--m-ruimte-12);font-size:var(--m-tekst-m);font-weight:600;line-height:var(--m-regel-kop);
  transition-property:border-color,background-color,box-shadow;transition-duration:var(--m-duur-basis)}
.tijdvakken span i{display:block;font-style:normal;font-size:var(--m-tekst-xs);font-weight:400;color:var(--stil);margin-top:var(--m-ruimte-2)}
.tijdvakken label:hover span{border-color:var(--stil)}
.tijdvakken input:checked + span{border-color:var(--tekst);border-width:2px;
  background:color-mix(in srgb, var(--amber) 10%, var(--kaart));box-shadow:0 0 16px var(--amber-gloed)}
.tijdvakken input:focus-visible + span{outline:3px solid var(--focus-kleur);outline-offset:3px}

.lokaas{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.verstuurrij{display:flex;align-items:center;gap:var(--m-ruimte-16);flex-wrap:wrap;margin-top:var(--m-ruimte-2)}
.demo button.btn-primary{border:0;cursor:pointer;font-family:var(--f-body)}
.demo button.btn-primary[disabled]{opacity:.6;cursor:progress}
.kleinelettertjes{font-size:var(--m-tekst-s);color:var(--stil);max-width:34ch;text-align:left}
.formmelding{margin:0;font-size:var(--m-tekst-l);min-height:1px}
.formmelding.fout{color:var(--rood)}
.formmelding.goed{color:var(--groen)}
.demo.verzonden{place-items:center;text-align:center;gap:var(--m-ruimte-10)}

/* ══ Elementen naar 21st.dev (magicui en shadcnspace), vertaald naar losse
   HTML/CSS in de Morris-tokens: Animated Shiny Text, Animated Beam,
   Marquee, Border Beam en de prijstabel met uitgelicht pakket. Geen
   React, geen Tailwind; alles hieronder leunt op --amber/--teal/--kaart. ══ */

/* knooppunt: alle modules met lichtbundels naar de kern (Animated Beam) */
.hub{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:var(--m-ruimte-24) var(--m-ruimte-64);align-items:center;margin:var(--m-ruimte-8) 0 var(--m-ruimte-32);padding:var(--m-ruimte-32) var(--m-ruimte-32);background:radial-gradient(ellipse 40% 55% at 50% 50%, color-mix(in srgb, var(--amber) 9%, transparent), transparent 70%), var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);overflow:hidden}
.hub svg.bundels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hub .kol{display:grid;gap:var(--m-ruimte-12);position:relative;z-index:1}
.hub .kol.rechts{justify-items:end}
.hub .knoop{display:inline-flex;align-items:center;gap:var(--m-ruimte-10);background:var(--kaart2);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-10) var(--m-ruimte-12) var(--m-ruimte-10) var(--m-ruimte-10);font-size:var(--m-tekst-m);font-weight:600;width:max-content;max-width:100%;transition:border-color var(--m-duur-traag), box-shadow var(--m-duur-traag)}
.kol.rechts .knoop{flex-direction:row-reverse;padding:var(--m-ruimte-10) var(--m-ruimte-10) var(--m-ruimte-10) var(--m-ruimte-12)}
.hub .knoop svg{flex:none;width:28px;height:28px;padding:var(--m-ruimte-6);border-radius:var(--m-radius-s);background:color-mix(in srgb, var(--teal) 14%, var(--kaart));color:var(--teal)}
.hub .knoop small{display:block;font-size:var(--m-tekst-xs);font-weight:500;color:var(--stil)}
.hub .knoop.aan{border-color:color-mix(in srgb, var(--amber) 60%, var(--lijn));box-shadow:0 0 22px var(--amber-gloed)}
.hub .kern{position:relative;z-index:1;display:grid;place-items:center;text-align:center;width:168px;height:168px;border-radius:var(--m-radius-rond);background:transparent;cursor:pointer;touch-action:pan-y;transform:translate(var(--kx,0px),var(--ky,0px));transition:transform var(--m-duur-lang) var(--m-curve-uit);border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);box-shadow:0 0 70px var(--amber-gloed)}
.hub .kern::before{content:"";position:absolute;inset:-22px;border-radius:var(--m-radius-rond);border:1px dashed color-mix(in srgb, var(--amber) 35%, transparent);animation:draai 38s linear infinite}
/* levende bol: puntjes op een bol die draait, kantelt naar de muis en uitwijkt bij de cursor */
.hub .kern canvas{position:absolute;left:50%;top:50%;width:320px;height:320px;transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.hub .kern > div{position:relative;padding:var(--m-ruimte-16) var(--m-ruimte-12);border-radius:var(--m-radius-rond);background:radial-gradient(circle, color-mix(in srgb, var(--vlak) 88%, transparent) 42%, transparent 74%)}
.hub .kern b{font-family:var(--f-display);font-weight:800;font-size:var(--m-tekst-4xl);letter-spacing:var(--m-spatie-kop);display:inline-flex;align-items:flex-start;line-height:var(--m-regel-strak)}
.hub .kern b i{display:inline-block;width:8px;height:8px;border-radius:var(--m-radius-rond);background:var(--amber);margin:.1em 0 0 var(--m-ruimte-4);animation:adem 2.6s ease-in-out infinite}
.hub .kern span{display:block;font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);color:var(--amber);margin-top:var(--m-ruimte-6)}
.hub .kern em{display:block;font-style:normal;font-size:var(--m-tekst-xs);color:var(--stil);margin:var(--m-ruimte-4) auto 0;max-width:12ch;line-height:var(--m-regel-ui)}
@keyframes draai{to{transform:rotate(360deg)}}
.bundel-basis{fill:none;stroke:var(--lijn);stroke-width:1.5}
.bundel-licht{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 86;filter:drop-shadow(0 0 4px var(--amber));animation:bundel var(--duur,4.5s) cubic-bezier(.16,1,.3,1) infinite;animation-delay:var(--wacht,0s)}
.bundel-knoop{fill:var(--kaart);stroke:color-mix(in srgb, var(--amber) 70%, var(--lijn));stroke-width:1.5}
.bundel-licht.terug{stroke:var(--teal);filter:drop-shadow(0 0 4px var(--teal));animation-direction:reverse}
@keyframes bundel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.hubnoot{text-align:center;font-size:var(--m-tekst-m);color:var(--stil);margin:calc(-1 * var(--m-ruimte-20)) 0 var(--m-ruimte-32)}
.hubnoot b{color:var(--tekst)}

/* mini-schermen in het voorraadblok */
.stroom{display:flex;align-items:center;gap:var(--m-ruimte-8);flex-wrap:wrap}
.stroom span{font-size:var(--m-tekst-s);font-weight:600;border:1px solid var(--lijn);background:var(--kaart);border-radius:var(--m-radius-s);padding:var(--m-ruimte-8) var(--m-ruimte-10)}
.stroom span small{display:block;font-size:var(--m-tekst-xs);font-weight:500;color:var(--stil)}
.stroom i{flex:none;width:22px;height:2px;background:linear-gradient(90deg, var(--lijn), var(--amber));border-radius:var(--m-radius-xs)}
.voorraadbalk{display:grid;grid-template-columns:96px 1fr 58px;gap:var(--m-ruimte-10);align-items:center;font-size:var(--m-tekst-s)}
.voorraadbalk .baan{height:8px;border-radius:var(--m-radius-xs);background:color-mix(in srgb, var(--lijn) 60%, transparent);overflow:hidden}
.voorraadbalk .baan i{display:block;height:100%;width:var(--v);border-radius:var(--m-radius-xs);background:var(--teal);transition:width var(--m-duur-lang) var(--m-curve)}
.voorraadbalk.laag .baan i{background:var(--amber)}
.voorraadbalk b{font-weight:600;text-align:right}
.voorraadbalk.laag b{color:var(--amber)}
.voorraadkaart{display:grid;gap:var(--m-ruimte-12)}
.spaarteller{display:flex;align-items:baseline;gap:var(--m-ruimte-10)}
.spaarteller b{font-family:var(--f-display);font-size:var(--m-tekst-5xl);font-weight:800;letter-spacing:var(--m-spatie-kop);line-height:var(--m-regel-strak);color:var(--amber)}
.spaarteller span{font-size:var(--m-tekst-m);color:var(--stil)}
.voorraadkaart .wk-kop{margin-bottom:var(--m-ruimte-2)}
.pakbon{display:grid;gap:var(--m-ruimte-6);font-size:var(--m-tekst-s)}
.pakbon div{display:flex;justify-content:space-between;gap:var(--m-ruimte-10);padding:var(--m-ruimte-6) var(--m-ruimte-10);border-radius:var(--m-radius-s);background:var(--kaart);border:1px solid var(--lijn)}
.pakbon div.stijg{border-color:color-mix(in srgb, var(--amber) 50%, var(--lijn))}
.pakbon div.stijg b{color:var(--amber)}
.pakbon div span small{color:var(--stil);margin-left:var(--m-ruimte-6)}

/* koppelingen als lopende band (Marquee) */
.band{position:relative;overflow:hidden;margin-top:var(--m-ruimte-32);padding:var(--m-ruimte-4) 0;-webkit-mask-image:linear-gradient(90deg, transparent, var(--tekst) 12%, var(--tekst) 88%, transparent);mask-image:linear-gradient(90deg, transparent, var(--tekst) 12%, var(--tekst) 88%, transparent)}
.band .rij{display:flex;gap:var(--m-ruimte-12);padding-right:var(--m-ruimte-12);width:max-content;animation:band 42s linear infinite}
.band:hover .rij{animation-play-state:paused}
.band span{white-space:nowrap;font-size:var(--m-tekst-m);font-weight:600;color:var(--stil);border:1px solid var(--lijn);border-radius:var(--m-radius-l);padding:var(--m-ruimte-8) var(--m-ruimte-16);background:var(--kaart)}
.band span b{color:var(--tekst);font-weight:700}
@keyframes band{to{transform:translateX(-50%)}}
.bandlabel{font-size:var(--m-tekst-s);font-weight:600;letter-spacing:var(--m-spatie-kapitaal);color:var(--stil);margin-top:var(--m-ruimte-32);text-align:center}

/* prijs in drie pakketten (prijstabel + Border Beam op het middelste) */
.pakketten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--m-ruimte-16);align-items:stretch;margin-top:var(--m-ruimte-8)}
.pakketten.in .pakket{opacity:1;transform:none}
.pakketten.in > :nth-child(2){transition-delay:.18s}
.pakketten.in > :nth-child(3){transition-delay:.36s}
.pakket .naam{display:flex;justify-content:space-between;align-items:center;gap:var(--m-ruimte-10)}
.pakket .naam h3{font-size:var(--m-tekst-3xl);font-weight:700}
.pakket .omzet{font-size:var(--m-tekst-m);color:var(--stil)}
.pakket .omzet b{color:var(--tekst);font-weight:600}
.pakket .bedrag{font-family:var(--f-display);font-weight:800;font-size:var(--m-tekst-6xl);line-height:var(--m-regel-strak);letter-spacing:var(--m-spatie-kop);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--m-ruimte-4) var(--m-ruimte-10)}
/* Met de schakelaar per maand/per jaar (betaalkeuze.css) heeft het bedrag centen
   en wordt het breder. De kaart is een container: het jaarbedrag schaalt mee met
   de echte kaartbreedte ("€539,10" is ±6,7× de lettergrootte breed, dus 15cqi
   past altijd), en "/ maand" schuift eronder als het er niet naast past. */
.pakket{position:relative;display:flex;flex-direction:column;gap:var(--m-ruimte-16);background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);padding:var(--m-ruimte-32) var(--m-ruimte-24);opacity:0;transform:translateX(-24px);transition:opacity var(--m-duur-lang) var(--m-curve), transform var(--m-duur-lang) var(--m-curve);container-type:inline-size}
.pakket .bedrag span{white-space:nowrap}
.pakket .bedrag span.per-jaar{font-size:min(1em,15cqi)}
.pakket .bedrag small{font-family:var(--f-body);font-size:var(--m-tekst-l);font-weight:600;color:var(--stil);letter-spacing:0}
.pakket hr{border:0;border-top:1px solid var(--lijn)}
.pakket ul{list-style:none;display:grid;gap:var(--m-ruimte-10);flex:1}
.pakket li{font-size:var(--m-tekst-l);color:var(--stil);display:flex;gap:var(--m-ruimte-10);align-items:baseline}
.pakket li::before{content:"";flex:none;width:12px;height:7px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg) translateY(-2px)}
.pakket .btn{text-align:center;display:block}
.pakket .tip{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);color:var(--amber);border:1px solid color-mix(in srgb, var(--amber) 50%, var(--lijn));border-radius:var(--m-radius-l);padding:var(--m-ruimte-4) var(--m-ruimte-10);white-space:nowrap}
.pakket.uitgelicht{border-color:transparent;z-index:1}
@property --beamhoek{syntax:'<angle>';inherits:false;initial-value:0deg}
.pakket.uitgelicht::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:var(--m-ruimte-2);pointer-events:none;
  background:conic-gradient(from var(--beamhoek), var(--lijn) 0deg, var(--lijn) 250deg, var(--teal) 300deg, var(--amber) 350deg, var(--lijn) 360deg);
  -webkit-mask:linear-gradient(var(--tekst) 0 0) content-box, linear-gradient(var(--tekst) 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 6s linear infinite}
@keyframes beam{to{--beamhoek:360deg}}


@media (max-width:900px){
  /* geraamte: de bovenbalk klapt in */
  nav .links{display:none}
  nav{top:8px;margin:var(--m-ruimte-8) auto 0;width:calc(100% - 20px);border-radius:var(--m-radius-m)}
  nav .wrap{gap:var(--m-ruimte-8);height:56px;padding:0 var(--m-ruimte-12)}
  nav .btn-ghost{margin-left:auto}
  /* knoppen in de balk blijven op één regel en houden een aanraakvlak van 40px */
  nav .btn{padding:var(--m-ruimte-8) var(--m-ruimte-12);font-size:var(--m-tekst-m);white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
}
@media (max-width:599px){
  /* geraamte: de bovenbalk op een telefoon.
     Op een telefoon passen woordmerk + drie tekstknoppen niet naast elkaar.
     Help wordt het icoon (het vraagteken spreekt voor zich) en Inloggen
     verdwijnt uit de balk — die staat ook in de voettekst. Wat overblijft
     is waar de bezoeker voor komt: help en een demo aanvragen.
     Het icoon zelf (.btn-ghost.met-icoon) staat in module.css. */
  nav .btn-ghost[href="/login"]{display:none}
  nav .btn{padding-left:var(--m-ruimte-12);padding-right:var(--m-ruimte-12)}
  nav .wrap{gap:var(--m-ruimte-8)}
}

/* ══ Toegankelijkheid en reparaties van de homepage (tot 20 okt 2026 in het
   losse toegankelijkheid.css; het gedeelde deel staat nu in module.css).
   Bewust onderaan: dit gaat voor de regels hierboven. ══ */
.menu-knop{display:none;font:inherit;font-size:var(--m-tekst-m);padding:var(--m-ruimte-10) var(--m-ruimte-12);
  min-height:44px;cursor:pointer;border:1px solid var(--lijn);border-radius:var(--m-radius-s);
  background:var(--kaart);color:var(--tekst)}
nav a.alleen-mobiel{display:none}
nav .brand,nav .btn,nav .links a{min-height:44px;align-items:center}
nav .brand{display:inline-flex}
nav .brand .stip{align-self:flex-start;margin-top:var(--m-ruimte-12)}
/* Donkere tekst op het merkaccent haalt ook overdag 4,5:1; wit doet dat niet. */
body.nacht .ochtend .btn-primary{color:var(--actie-tekst)}
.ochtend .pakket .tip,
.ochtend .prijsnoot a,.ochtend .feed .tag,.ochtend .regelbalk b,
.ochtend .kaart .tijdstip,.ochtend .cijfer.aandacht b,
.ochtend .formmelding a{color:var(--tekst)}
.ochtend .wk-badge,.ochtend .wk-dagen .nu,.ochtend .wk-dienst,
.ochtend .wk-dienst em,.ochtend .wk-fk,.ochtend .wk-fix,
.ochtend .stapkaart .nr,.ochtend .veld > span i{color:var(--tekst)}
body.nacht footer a[href="/login"]{color:var(--tekst)}
.hc,.rapport,.band span,.wk-label{min-width:0;overflow-wrap:anywhere}
.verder{font-weight:600;color:var(--tekst);text-decoration:underline;text-underline-offset:3px}
/* de prijs bij jaarbetaling, direct onder het maandbedrag op de pakketkaart */
.pakket .jaarprijs{font-size:var(--m-tekst-m);color:var(--stil);margin-top:calc(-1 * var(--m-ruimte-8))}
/* dezelfde lichte kaart als de tegels erboven */
.hardware-uitleg,.support-uitleg,.apps-uitleg,.kosten-uitleg{margin-top:var(--m-ruimte-24);background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);
  padding:var(--m-ruimte-24);grid-column:1/-1;text-align:left}
.support-uitleg + .hardware-uitleg,.hardware-uitleg + .apps-uitleg{margin-top:var(--m-ruimte-16)}
.maurice .wie + .wie{margin-top:var(--m-ruimte-12)}
.hardware-uitleg p,.support-uitleg p,.apps-uitleg p,.kosten-uitleg p{margin-top:var(--m-ruimte-12);color:var(--stil);font-size:var(--m-tekst-xl)}
.winkelgroepen{display:flex;flex-wrap:wrap;gap:var(--m-ruimte-20) var(--m-ruimte-48);margin-top:var(--m-ruimte-16)}
.winkelgroepen .winkels-kop{margin:0;font-size:var(--m-tekst-l);font-weight:600;color:var(--tekst)}
.winkelgroepen .winkels{margin-top:var(--m-ruimte-10)}
.slot .verplicht-uitleg{font-size:var(--m-tekst-m);margin-top:var(--m-ruimte-24)}
@container inhoud (min-width:901px){.pakket .omzet{min-height:3.2em}}
@media(max-width:900px){
  /* geraamte: het menu van de ingeklapte bovenbalk */
  .menu-knop{display:inline-flex;align-items:center}
  nav[aria-label="Hoofdnavigatie"] .wrap{position:relative}
  nav .links{display:flex;flex-wrap:wrap;gap:var(--m-ruimte-6) var(--m-ruimte-16);justify-content:center;
    position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;padding:var(--m-ruimte-12);
    background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--m-radius-m);z-index:calc(var(--m-laag-nav) + 1)}
  .menu-knop[aria-expanded="false"] + .links{display:none}
  nav .links a{display:inline-flex;padding:var(--m-ruimte-4)}
  nav .links a.alleen-mobiel{display:inline-flex}
  nav .wrap{gap:var(--m-ruimte-8)}
  nav .btn-ghost.met-icoon{display:none}
  nav .btn-primary{font-size:var(--m-tekst-m);padding:var(--m-ruimte-10) var(--m-ruimte-12)}
  nav .btn-ghost[href="/login"]{display:none}
}
@container inhoud (max-width:900px){
  .hub .kern{grid-column:1/-1;order:-1;justify-self:center;width:140px;height:140px;margin:var(--m-ruimte-32) 0 var(--m-ruimte-32)}
  .hub .kern canvas{width:240px;height:240px}
  /* het woordmerk moet binnen de bol blijven (bol ≈140px breed) */
  .hub .kern > div{padding:var(--m-ruimte-12) var(--m-ruimte-10)}
  .hub .kern b{font-size:var(--m-tekst-3xl)}
  .hub .kern b i{width:6px;height:6px}
  .hub .kern span{font-size:var(--m-tekst-xs);letter-spacing:var(--m-spatie-kapitaal)}
  .hub .kern em{font-size:var(--m-tekst-xs);max-width:16ch}
  .hub .kol.rechts{justify-items:start}
  .kol.rechts .knoop{flex-direction:row;padding:var(--m-ruimte-10) var(--m-ruimte-12) var(--m-ruimte-10) var(--m-ruimte-10)}
  .hub .knoop{font-size:var(--m-tekst-s);width:100%;min-height:52px;line-height:var(--m-regel-kop)}
  /* beide kolommen van boven, zodat de rijen gelijk lopen met de lichtbaan ertussen */
  .hub{grid-template-columns:1fr 1fr;gap:var(--m-ruimte-12) var(--m-ruimte-32);padding:var(--m-ruimte-24) var(--m-ruimte-16);align-items:start}
  .pakketten{grid-template-columns:minmax(0,1fr)}
  .hero .wrap,.prijs .wrap,.kassa .wrap,.app .wrap,.over .wrap,.reserveringen .wrap{grid-template-columns:1fr;gap:var(--m-ruimte-32)}
  .weetjes{grid-template-columns:1fr}
  .nachtwerk .kaarten,.rapport .cijfers{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .stappen{grid-template-columns:1fr 1fr}
  .wk-drukte{grid-template-columns:56px 1fr}
  .wk-dagen,.wk-band{grid-template-columns:56px repeat(7,1fr);gap:var(--m-ruimte-6)}
  .wk-fk{font-size:var(--m-tekst-xs)}
  .wk-fix{display:none}
  .stap+.stap{margin-left:0;margin-top:var(--m-ruimte-12)}
  .stap+.stap::before{display:none}
  .keten{flex-direction:column}
  .hero{padding-top:var(--m-ruimte-48)}
  .veldrij,.tijdvakken{grid-template-columns:1fr}
  .verstuurrij{flex-direction:column;align-items:stretch}
  .kleinelettertjes{max-width:none;text-align:center}
  .hardware-uitleg,.support-uitleg,.apps-uitleg,.kosten-uitleg{padding:var(--m-ruimte-20)}
  .rapport .kop{flex-wrap:wrap;gap:var(--m-ruimte-8)}
  .rapport .kop h3{min-width:0}
}
@container inhoud (max-width:599px){
  .hub{gap:var(--m-ruimte-8) var(--m-ruimte-24);padding:var(--m-ruimte-20) var(--m-ruimte-12)}
  .hub .kol{gap:var(--m-ruimte-8)}
  .hub .knoop{padding:var(--m-ruimte-8) var(--m-ruimte-10);gap:var(--m-ruimte-8);font-size:var(--m-tekst-s);min-height:46px}
  .kol.rechts .knoop{padding:var(--m-ruimte-8) var(--m-ruimte-10)}
  .hub .knoop small{display:none}
  .hub .knoop svg{width:24px;height:24px;padding:var(--m-ruimte-6)}
  .voorraadbalk{grid-template-columns:80px 1fr 50px}
  .pakket .bedrag{font-size:var(--m-tekst-5xl)}
  /* tijdlijnbalkjes: afkappen met puntjes in plaats van midden in een woord */
  .balk{display:block;line-height:20px;text-overflow:ellipsis}
  .balk.zit::after{display:none}
  /* weekkaart-pil op één regel, onder de titel */
  .wk-badge{display:inline-block;margin:var(--m-ruimte-6) 0 0}
  .vk-grid{grid-template-columns:1fr 1fr}
  /* carrousel: één scrollbare rij chips in plaats van vier regels */
  .hc-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:var(--m-ruimte-2) var(--m-ruimte-16);margin-inline:calc(-1 * var(--m-ruimte-16));
    -webkit-mask-image:linear-gradient(90deg, transparent, var(--tekst) 16px, var(--tekst) calc(100% - 16px), transparent);mask-image:linear-gradient(90deg, transparent, var(--tekst) 16px, var(--tekst) calc(100% - 16px), transparent)}
  .hc-chips::-webkit-scrollbar{display:none}
  .hc-chip{flex:none}
  .stappen{grid-template-columns:minmax(0,1fr)}
  .pakketten{grid-template-columns:minmax(0,1fr)}
  .pakket{min-width:0;padding:var(--m-ruimte-24) var(--m-ruimte-20)}
  .rapport{padding:var(--m-ruimte-20)}
  .kern em{overflow-wrap:anywhere}
  /* weekrooster: "Verwachte" brak midden in het woord, het uitroepteken viel onder het cijfer */
  .wk-drukte{grid-template-columns:70px 1fr}
  .wk-dagen,.wk-band{grid-template-columns:70px repeat(7,1fr);gap:var(--m-ruimte-4)}
  .wk-label{font-size:var(--m-tekst-xs);letter-spacing:0;overflow-wrap:normal}
  .wk-dienst{white-space:nowrap;font-size:var(--m-tekst-xs)}
  .wk-dienst em{margin-left:var(--m-ruimte-2)}
}
@media(max-width:360px){
  /* geraamte: de bovenbalk op de smalste telefoons */
  nav .wrap{padding:0 var(--m-ruimte-8);gap:var(--m-ruimte-6)}
  nav .btn-primary{white-space:normal;max-width:100px;text-align:center;justify-content:center;line-height:var(--m-regel-kop)}
}
/* Alleen wie "minder beweging" heeft aangezet, krijgt het stilstaande beeld:
   geen lopende strook, geen draaiende kern en geen vanzelf wisselende
   productbeelden. Animaties en overgangen zet module.css al uit. */
@media(prefers-reduced-motion:reduce){
  .pakket,.pakketten.in .pakket{opacity:1;transform:none}
  .pakket.uitgelicht::before{display:none}
  .band{mask-image:none;-webkit-mask-image:none}
  .band span{white-space:normal}
  .band .rij{flex-wrap:wrap;width:auto;padding-right:0}
  .band .rij [aria-hidden="true"]{display:none}
  .hc-slide{filter:none;transform:none}
  .hc-slide:not(.actief){display:none}
  .hc-chip.actief::after{display:none}
  .hub .kern{cursor:default}
}