/* De avondservice uit de Facebook-omslag, met de bestaande inhoud en daglijn.
   Alleen de landingspagina laadt dit bestand. De levende kassatafel heet ook
   .hero; de fotografie en kopopmaak zijn daarom op .landing-hero begrensd.
   Responsief (DESIGN-STANDAARD §12): wat in <main> staat, meet de inhoud
   (container inhoud, zie module.css); alleen de bovenbalk, de voet en de
   paginamarge (--home-ruimte) zijn geraamte en houden een @media. */
body.landingspagina{
  --home-ruimte:clamp(24px,4vw,56px);
  --home-radius:18px;
}
.landingspagina .wrap{max-width:1240px;padding-inline:var(--home-ruimte)}
.landingspagina > nav{max-width:1184px;border-color:color-mix(in srgb,var(--lijn) 80%,var(--amber));border-radius:var(--home-radius)}
.landingspagina > nav .wrap{padding-inline:var(--m-ruimte-16)}
.landingspagina > nav .brand{font-size:var(--m-tekst-4xl)}
.landingspagina > nav .links{gap:var(--m-ruimte-16)}

.landingspagina .landing-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,7vw,108px) 0;margin-top:var(--m-ruimte-16)}
.landing-sfeer{position:absolute;inset:0;z-index:-2;background:var(--vlak);pointer-events:none}
.landing-sfeer img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% center}
.landing-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--vlak) 96%,transparent),color-mix(in srgb,var(--vlak) 77%,transparent) 33%,color-mix(in srgb,var(--vlak) 12%,transparent) 70%),linear-gradient(0deg,var(--vlak),transparent 24%)}
.landingspagina .landing-hero .wrap{display:block;position:relative;z-index:1}
.landing-verhaal{max-width:610px;width:56%}
/* De heldkop is groter dan de displayschaal (--m-display-l tot 46px): hij is de
   enige kop van die maat op de site, dus geen token. */
.landingspagina .landing-hero h1{font-size:clamp(38px,4.4vw,60px);font-weight:700;line-height:var(--m-regel-kop);letter-spacing:var(--m-spatie-kop);margin-bottom:var(--m-ruimte-24);text-wrap:balance}
.landing-hero h1 em{color:var(--tekst)}
.landingspagina .landing-hero p.lead{font-size:var(--m-tekst-xl);line-height:var(--m-regel-lang);max-width:49ch;color:var(--tekst)}
.landingspagina .landing-hero .knoppen{gap:var(--m-ruimte-12);margin-top:var(--m-ruimte-32)}
.landing-hero .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--m-ruimte-12) var(--m-ruimte-16)}
.landing-hero .btn-ghost{border-color:color-mix(in srgb,var(--tekst) 40%,transparent);background:color-mix(in srgb,var(--vlak) 70%,transparent)}

/* De echte productbeelden krijgen een eigen podium bij Modules.
   De hele carrousel blijft één element: pauze, vegen en pijltjestoetsen werken
   met dezelfde bestaande code. */
.producttour{padding:0 0 var(--m-ruimte-32)}
.producttour .hc{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:center}
.producttour .hc::before{inset:0 30% 0 0;opacity:.25}
.producttour .voorbeeld-label{grid-column:1;grid-row:1;text-align:center}
.producttour .hc-viewport{grid-column:1;grid-row:2;min-width:0}
.producttour .hc-onder{grid-column:1;grid-row:3;min-height:3.2em;padding-inline:var(--m-ruimte-16);font-size:var(--m-tekst-m)}
.producttour .hc-chips{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-ruimte-8);margin:0;align-content:center;overflow:visible}
.producttour .hc-chip{justify-content:flex-start;min-height:44px;padding:var(--m-ruimte-10) var(--m-ruimte-12);border-radius:var(--m-radius-m);font-size:var(--m-tekst-s);background:color-mix(in srgb,var(--kaart) 80%,transparent)}
.producttour .hc-chip.actief{background:color-mix(in srgb,var(--amber) 10%,var(--kaart));border-color:var(--amber)}
.producttour .hc-chip svg{width:16px;height:16px}

@media(max-width:1100px){
  /* geraamte: de bovenbalk wordt compacter voordat hij inklapt */
  .landingspagina > nav .wrap{gap:var(--m-ruimte-12)}
  .landingspagina > nav .links{gap:var(--m-ruimte-12);font-size:var(--m-tekst-m)}
  .landingspagina > nav .btn{padding-inline:var(--m-ruimte-12)}
}
@media(max-width:599px){
  /* geraamte: smallere paginamarge en woordmerk op een telefoon */
  body.landingspagina{--home-ruimte:22px}
  .landingspagina > nav .brand{font-size:var(--m-tekst-3xl)}
  body.landingspagina footer .wrap{padding-inline:var(--m-ruimte-20)}
}
@media(max-width:360px){
  /* geraamte: de bovenbalk op de smalste telefoons */
  .landingspagina > nav .wrap{gap:var(--m-ruimte-8);padding-inline:var(--m-ruimte-10)}
  .landingspagina > nav .brand{font-size:var(--m-tekst-3xl)}
  .landingspagina > nav .btn-primary{font-size:var(--m-tekst-s);padding-inline:var(--m-ruimte-10);white-space:nowrap}
}

/* Homepage: dezelfde werkdag, met rustigere typografie en zorgvuldig belichte vlakken. */
body.landingspagina main > section{padding-block:clamp(64px,7vw,104px)}
body.landingspagina main > section > .wrap{max-width:1240px}
body.landingspagina main > section .eyebrow{font-size:var(--m-tekst-xs);font-weight:700;letter-spacing:var(--m-spatie-kapitaal)}
body.landingspagina main > section :is(.sectiekop h2,.h2klein){font-size:var(--m-display-m);line-height:var(--m-regel-kop);letter-spacing:var(--m-spatie-kop);font-weight:600}
body.landingspagina .sectiekop{max-width:none;margin-bottom:var(--m-ruimte-48)}
body.landingspagina .sectiekop:not(.midden){display:grid;grid-template-columns:1.1fr 1fr;gap:var(--m-ruimte-12) var(--m-ruimte-64);align-items:start}
body.landingspagina .sectiekop > .eyebrow{grid-column:1}
body.landingspagina .sectiekop:not(.midden) > h2{grid-column:1;margin:0;max-width:24ch}
body.landingspagina .sectiekop:not(.midden) > p{grid-column:2;grid-row:2;margin:var(--m-ruimte-4) 0 0;font-size:var(--m-tekst-xl);line-height:var(--m-regel-lang)}
body.landingspagina .sectiekop.midden{max-width:780px;margin-inline:auto;margin-bottom:var(--m-ruimte-48)}
body.landingspagina .sectiekop.midden h2{margin-block:var(--m-ruimte-16)}
body.landingspagina .sectiekop.midden p{max-width:64ch;margin-inline:auto;line-height:var(--m-regel-lang)}
body.landingspagina main > section .h2klein{margin-block:var(--m-ruimte-16) var(--m-ruimte-20);max-width:24ch}
body.landingspagina :is(.reserveringen,.kassa,.app,.over) > .wrap{gap:clamp(36px,6vw,82px)}
body.landingspagina :is(.reserveringen,.kassa,.app) li{line-height:var(--m-regel-lang)}
body.landingspagina .reserveringen{background:linear-gradient(130deg,color-mix(in srgb,var(--amber) 3%,var(--kaart)),var(--kaart));border-block-color:color-mix(in srgb,var(--amber) 15%,var(--lijn))}
/* De schermvoorbeelden blijven echte werkvoorbeelden; de beweging blijft in home.js. */
body.landingspagina :is(.hub,.vloerkaart,.weekkaart,.avond,.console,.rapport){border-radius:var(--m-radius-l);border-color:color-mix(in srgb,var(--amber) 17%,var(--lijn));box-shadow:0 20px 64px color-mix(in srgb,var(--tekst) 5%,transparent)}
body.landingspagina.nacht :is(.hub,.vloerkaart,.weekkaart,.avond,.console,.rapport){box-shadow:0 22px 68px color-mix(in srgb,var(--vlak) 80%,transparent)}
body.landingspagina :is(.vloerkaart,.weekkaart,.avond,.console,.rapport){background:linear-gradient(140deg,color-mix(in srgb,var(--amber) 3%,var(--kaart)),var(--kaart2));padding:clamp(22px,2.8vw,34px)}
body.landingspagina :is(.vk-kop,.wk-kop,.avond .kop,.console .kop){padding-bottom:var(--m-ruimte-16);margin-bottom:var(--m-ruimte-16)}
body.landingspagina .vk-tafel{border-radius:var(--m-radius-m)}
body.landingspagina .hub{padding:var(--m-ruimte-48) var(--m-ruimte-32);background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--amber) 9%,transparent),transparent 65%),var(--kaart)}
body.landingspagina .hub .knoop{border-radius:var(--m-radius-m);background:color-mix(in srgb,var(--kaart2) 88%,var(--kaart));box-shadow:none}
body.landingspagina .hubnoot{margin-block:calc(-1 * var(--m-ruimte-16)) var(--m-ruimte-32);max-width:70ch;margin-inline:auto;line-height:var(--m-regel-lang)}
body.landingspagina .weetjes{gap:var(--m-ruimte-16)}
body.landingspagina :is(.weet,.kaart,.stapkaart,.kpi,.maurice){border-radius:var(--m-radius-l);border-color:color-mix(in srgb,var(--lijn) 82%,var(--kaart));background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 2%,var(--kaart)),var(--kaart));box-shadow:none}
body.landingspagina :is(.weet,.kaart){padding:var(--m-ruimte-24)}
body.landingspagina .weet h3{font-size:var(--m-tekst-2xl);line-height:var(--m-regel-ui);margin-bottom:var(--m-ruimte-10)}
body.landingspagina .weet p{line-height:var(--m-regel-lang)}
body.landingspagina .weet .van-naar{font-size:var(--m-tekst-xs);letter-spacing:var(--m-spatie-kapitaal);margin-bottom:var(--m-ruimte-12)}
body.landingspagina .ketenlabel{font-size:var(--m-tekst-xs);letter-spacing:var(--m-spatie-kapitaal);margin-top:var(--m-ruimte-32)}
body.landingspagina .stap{border-radius:var(--m-radius-m);padding:var(--m-ruimte-16)}
body.landingspagina .stap b{line-height:var(--m-regel-ui);margin-bottom:var(--m-ruimte-6)}
body.landingspagina .console .feed li{padding-block:var(--m-ruimte-12)}
body.landingspagina .console .voet{padding-top:var(--m-ruimte-16)}
body.landingspagina .kaart h3{font-size:var(--m-tekst-2xl);line-height:var(--m-regel-ui);margin-bottom:var(--m-ruimte-12)}
body.landingspagina .kaart p{line-height:var(--m-regel-lang)}
body.landingspagina .regelbalk{border-radius:var(--m-radius-m);padding:var(--m-ruimte-20) var(--m-ruimte-24);line-height:var(--m-regel-lang);flex-wrap:wrap;gap:var(--m-ruimte-4) var(--m-ruimte-10)}
body.landingspagina .rapport{max-width:800px}
body.landingspagina .rapport .cijfer{border-radius:var(--m-radius-m);padding:var(--m-ruimte-20)}
body.landingspagina .bandlabel{font-size:var(--m-tekst-xs);letter-spacing:var(--m-spatie-kapitaal);margin-top:var(--m-ruimte-48)}
body.landingspagina .stapkaart{padding:var(--m-ruimte-24) var(--m-ruimte-24)}
body.landingspagina .stapkaart h3{font-size:var(--m-tekst-2xl);margin-bottom:var(--m-ruimte-12)}
body.landingspagina .stapkaart p{line-height:var(--m-regel-lang)}
body.landingspagina :is(.support-uitleg,.hardware-uitleg,.apps-uitleg,.kosten-uitleg){border-radius:var(--m-radius-l);padding:var(--m-ruimte-24) var(--m-ruimte-32);box-shadow:none}
body.landingspagina :is(.support-uitleg,.hardware-uitleg,.apps-uitleg,.kosten-uitleg) > h3{font-size:var(--m-tekst-3xl)}
body.landingspagina .over .body{line-height:var(--m-regel-lang)}
body.landingspagina .maurice{padding:var(--m-ruimte-32)}
body.landingspagina .makersnoot{font-family:var(--f-display);font-weight:600;font-size:var(--m-tekst-3xl);line-height:var(--m-regel-tekst);letter-spacing:var(--m-spatie-kop);margin-bottom:var(--m-ruimte-24)}
body.landingspagina .pakket{padding:var(--m-ruimte-32) var(--m-ruimte-24);border-radius:var(--m-radius-l);border-color:color-mix(in srgb,var(--amber) 16%,var(--lijn));gap:var(--m-ruimte-20)}
body.landingspagina .pakket .naam h3{font-weight:600;font-size:var(--m-tekst-4xl)}
/* een bedrag, geen kop: blijft buiten de displayschaal */
body.landingspagina .pakket .bedrag{font-size:clamp(40px,4vw,52px);letter-spacing:var(--m-spatie-kop)}
body.landingspagina .pakket li{line-height:var(--m-regel-lang)}
body.landingspagina .pakket.uitgelicht{box-shadow:0 16px 42px color-mix(in srgb,var(--amber) 12%,transparent)}
body.landingspagina .prijsnoot{line-height:var(--m-regel-lang)}
body.landingspagina .faq{max-width:900px}
body.landingspagina .faq summary{font-size:var(--m-tekst-xl);font-weight:500;padding-block:var(--m-ruimte-24);line-height:var(--m-regel-tekst)}
body.landingspagina .faq summary::after{top:21px}
body.landingspagina .faq details p{font-size:var(--m-tekst-xl);line-height:var(--m-regel-lang);padding-bottom:var(--m-ruimte-24);max-width:75ch}
body.landingspagina .faq + .prijsnoot{max-width:900px;margin:var(--m-ruimte-24) auto 0}
body.landingspagina .slot h2{font-size:var(--m-display-l);font-weight:600;letter-spacing:var(--m-spatie-kop);line-height:var(--m-regel-kop)}
body.landingspagina .slot > .wrap > p{line-height:var(--m-regel-lang)}
body.landingspagina .slot .demo{max-width:760px;padding:var(--m-ruimte-32);border:1px solid var(--lijn);border-radius:var(--m-radius-l);background:var(--kaart);gap:var(--m-ruimte-20)}
body.landingspagina .slot .verplicht-uitleg{margin-bottom:0}
body.landingspagina .slot :is(input,select,textarea){background:var(--vlak);border-radius:var(--m-radius-m)}
body.landingspagina footer{padding-block:var(--m-ruimte-32);font-size:var(--m-tekst-s);line-height:var(--m-regel-lang)}
body.landingspagina footer .wrap{gap:var(--m-ruimte-16) var(--m-ruimte-32)}
body.landingspagina footer .wrap > span{max-width:85ch}
/* Drie volledige processen laten zien waarom gedeelde gegevens ertoe doen. */
.praktijkflow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);overflow:hidden;border:1px solid var(--lijn);border-radius:var(--m-radius-l);background:var(--kaart)}
.flow-beeld{min-width:0;margin:0;position:relative;background:var(--kaart2)}
.flow-beeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% center}
.flow-inhoud{min-width:0;padding:var(--m-ruimte-32) var(--m-ruimte-32)}
.flow-keten{font-size:var(--m-tekst-xs);line-height:var(--m-regel-tekst);font-weight:700;letter-spacing:var(--m-spatie-kapitaal);text-transform:uppercase;color:var(--amber);margin-bottom:var(--m-ruimte-12)}
.flow-inhoud h2{font-size:var(--m-display-s);font-weight:700;line-height:var(--m-regel-kop);letter-spacing:var(--m-spatie-kop);margin-bottom:var(--m-ruimte-12)}
.flow-intro{font-size:var(--m-tekst-l);line-height:var(--m-regel-lang);color:var(--stil);max-width:60ch}
.flow-stappen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-ruimte-16) var(--m-ruimte-24);padding-left:var(--m-ruimte-16);margin-top:var(--m-ruimte-24);list-style:decimal}
.flow-stappen li{min-width:0;padding:var(--m-ruimte-10) 0 0 var(--m-ruimte-4);border-top:1px solid var(--lijn)}
.flow-stappen li:last-child{grid-column:1/-1}
.flow-stappen li::marker{font-family:var(--f-body);font-size:var(--m-tekst-s);font-weight:700;color:var(--amber)}
.flow-stappen b{display:block;font-size:var(--m-tekst-m);font-weight:600;line-height:var(--m-regel-tekst);margin-bottom:var(--m-ruimte-4)}
.flow-stappen span{display:block;font-size:var(--m-tekst-s);line-height:var(--m-regel-lang);color:var(--stil)}
.flow-links{display:flex;flex-wrap:wrap;gap:var(--m-ruimte-6) var(--m-ruimte-16);margin-top:var(--m-ruimte-24);padding-top:var(--m-ruimte-16);border-top:1px solid var(--lijn)}
.flow-links a{font-size:var(--m-tekst-s);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.flow-links a:hover{color:var(--amber)}

/* Een eigen pauzekeuze blijft staan, ook na verder scrollen of een andere tab. */
.producttour .hc-bediening{grid-column:1;grid-row:4;display:flex;justify-content:center;padding-top:var(--m-ruimte-10)}
.producttour .hc-pauze{min-height:44px;max-width:100%;padding:var(--m-ruimte-10) var(--m-ruimte-16);border:1px solid var(--lijn);border-radius:var(--m-radius-s);background:var(--kaart);color:var(--tekst);font:600 12px/1.5 var(--f-body);cursor:pointer}
.producttour .hc-pauze:hover{border-color:var(--amber)}
.producttour .hc-pauze:focus-visible{outline:3px solid var(--tekst);outline-offset:4px}

/* Eén AI-uitleg op de landingspagina, met dezelfde dag- en nachttokens. */
.ai-uitleg-blok{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  border:1px solid var(--lijn);
  border-radius:var(--m-radius-l);
  overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 4%,var(--kaart)),var(--kaart));
}
.ai-uitleg-inhoud{padding:clamp(26px,4vw,52px);min-width:0}
.ai-uitleg-inhoud h2{
  margin:var(--m-ruimte-16) 0;
  max-width:18ch;
  font-family:var(--f-display);
  font-size:var(--m-display-m);
  font-weight:600;
  line-height:var(--m-regel-kop);
  letter-spacing:var(--m-spatie-kop);
  color:var(--tekst);
}
.ai-uitleg-lead{
  max-width:52ch;
  margin:0;
  font-size:var(--m-tekst-xl);
  line-height:var(--m-regel-lang);
  color:var(--stil);
}
.ai-uitleg-voorbeelden{display:grid;gap:0;margin:var(--m-ruimte-24) 0 0}
.ai-uitleg-voorbeelden > div{padding:var(--m-ruimte-20) 0;border-top:1px solid var(--lijn)}
.ai-uitleg-voorbeelden dt{
  margin:0 0 var(--m-ruimte-8);
  font-family:var(--f-display);
  font-size:var(--m-tekst-2xl);
  font-weight:600;
  line-height:var(--m-regel-ui);
  letter-spacing:var(--m-spatie-kop);
  color:var(--tekst);
}
.ai-uitleg-voorbeelden dd{margin:0;font-size:var(--m-tekst-l);line-height:var(--m-regel-lang);color:var(--stil)}
.ai-uitleg-regie{
  margin:var(--m-ruimte-8) 0 0;
  padding-left:var(--m-ruimte-16);
  border-left:2px solid var(--amber);
  font-size:var(--m-tekst-m);
  line-height:var(--m-regel-lang);
  color:var(--tekst);
}
.ai-uitleg-beeld{position:relative;min-width:0;margin:0;overflow:hidden;background:var(--kaart2)}
.ai-uitleg-beeld picture{position:absolute;inset:0;display:block}
.ai-uitleg-beeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:80% center}
.ai-uitleg-beeld::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--kaart) 20%,transparent),transparent 40%);
}

/* Moduleoverzicht: dertien kaarten, zo veel naast elkaar als er passen
   (drie op een breed scherm, twee op een tablet, één op een telefoon). */
.moduleoverzicht{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,287px),1fr));gap:var(--m-ruimte-16);align-items:stretch}
.modulekaart{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:var(--m-ruimte-16);min-width:0;padding:var(--m-ruimte-24);border:1px solid var(--lijn);border-radius:var(--m-radius-l);background:var(--kaart);color:var(--tekst);box-shadow:none;text-decoration:none;overflow-wrap:break-word}
.modulekaart-kop{display:flex;align-items:center;gap:var(--m-ruimte-12);min-width:0}
.modulekaart-icoon{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--amber) 24%,var(--lijn));border-radius:var(--m-radius-m);background:color-mix(in srgb,var(--amber) 8%,var(--kaart));color:var(--amber)}
.modulekaart-icoon svg{display:block;width:22px;height:22px}
.modulekaart h3{margin:0;min-width:0;font-family:var(--f-display);font-size:var(--m-tekst-2xl);font-weight:700;line-height:var(--m-regel-kop);letter-spacing:var(--m-spatie-kop);hyphens:auto}
.modulekaart p{max-width:none;margin:0;font-family:var(--f-body);font-size:var(--m-tekst-l);line-height:var(--m-regel-lang);color:var(--stil)}
.modulekaart-actie{display:flex;align-items:center;justify-content:space-between;gap:var(--m-ruimte-16);padding-top:var(--m-ruimte-16);border-top:1px solid var(--lijn);font-family:var(--f-body);font-size:var(--m-tekst-m);font-weight:700;line-height:var(--m-regel-tekst);color:var(--tekst);text-decoration:underline;text-underline-offset:4px}
.modulekaart-actie svg{display:block;flex:none;width:20px;height:20px;color:var(--amber)}
.modulekaart:hover{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 4%,var(--kaart));box-shadow:var(--schaduw-klein,none)}
.modulekaart:focus-visible{outline:3px solid var(--tekst);outline-offset:4px;border-color:var(--amber);background:color-mix(in srgb,var(--amber) 5%,var(--kaart));box-shadow:none}
@media(prefers-reduced-motion:no-preference){
  .modulekaart{transition:border-color var(--m-duur-basis),background-color var(--m-duur-basis),box-shadow var(--m-duur-basis)}
  .modulekaart-actie svg{transition:transform var(--m-duur-basis)}
  .modulekaart:is(:hover,:focus-visible) .modulekaart-actie svg{transform:translateX(3px)}
}

/* Fotoverhalen en modulevoorbeelden wisselen elkaar af in de horecadag. */
.landingspagina .hub .knoop{text-decoration:none;color:var(--tekst)}
.landingspagina .hub .knoop:is(:hover,:focus-visible){border-color:var(--amber)}
.landingspagina .hub .knoop:focus-visible{outline:3px solid var(--tekst);outline-offset:3px}
.landingspagina .praktijkverhaal .praktijkflow{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.landingspagina .landingspagina .module-demo{border-block:1px solid var(--lijn)}
.sfeerbericht-blok{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:1px solid var(--lijn);border-radius:var(--m-radius-l);overflow:hidden;background:var(--kaart)}
.sfeerbericht-blok figure{position:relative;min-width:0;margin:0;min-height:100%}
.sfeerbericht-blok img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% center}
.sfeerbericht-inhoud{padding:clamp(26px,4vw,48px);align-self:center}
.sfeerbericht-inhoud h2{font-family:var(--f-display);font-size:var(--m-display-m);line-height:var(--m-regel-kop);letter-spacing:var(--m-spatie-kop);margin:var(--m-ruimte-16) 0}
.sfeerbericht-inhoud p{font-size:var(--m-tekst-xl);line-height:var(--m-regel-lang);color:var(--stil);margin-bottom:var(--m-ruimte-24)}

/* De avondservice: tekst naast de live-feed. Met main in de selector, zodat
   deze sectie voor de algemene sectiekop-regels gaat (ook in de smalle stand). */
body.landingspagina main .avondfeed > .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--m-ruimte-64);align-items:center}
body.landingspagina main .avondfeed .sectiekop{display:block;text-align:left;margin:0;max-width:none}
body.landingspagina main .avondfeed .eyebrow{justify-content:flex-start}
body.landingspagina main .avondfeed .sectiekop h2{margin-block:var(--m-ruimte-16) var(--m-ruimte-20)}
body.landingspagina main .avondfeed .console{max-width:none;width:100%}

@container inhoud (max-width:1100px){
  .landing-verhaal{width:51%}
  .landingspagina .landing-hero h1{font-size:clamp(38px,4.8vw,54px)}
}
@container inhoud (max-width:1050px){
  body.landingspagina .sectiekop:not(.midden){gap:var(--m-ruimte-12) var(--m-ruimte-32)}
  body.landingspagina .stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.landingspagina main .avondfeed > .wrap{gap:var(--m-ruimte-32)}
}
@container inhoud (max-width:1000px){
  .praktijkflow{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
  .flow-inhoud{padding:var(--m-ruimte-24)}
}
@container inhoud (max-width:900px){
  .landingspagina .landing-hero{display:grid;padding:0 0 var(--m-ruimte-48);row-gap:var(--m-ruimte-24)}
  .landingspagina .landing-hero .wrap{grid-row:2;width:100%}
  .landing-verhaal{width:100%;max-width:650px}
  .producttour .hc{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
  .producttour .hc-chips{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--m-ruimte-6)}
  .producttour .hc-chip{min-height:44px;padding:var(--m-ruimte-10) var(--m-ruimte-12)}
  body.landingspagina main > section{padding-block:var(--m-ruimte-64)}
  body.landingspagina .sectiekop:not(.midden){display:block;max-width:720px}
  body.landingspagina .sectiekop:not(.midden) > h2{margin-block:var(--m-ruimte-16)}
  body.landingspagina .sectiekop:not(.midden) > p{margin:0;max-width:65ch}
  body.landingspagina .hub{padding:var(--m-ruimte-24) var(--m-ruimte-20)}
  .producttour .hc-bediening{grid-row:5}
  .ai-uitleg-blok{grid-template-columns:minmax(0,1fr)}
  .ai-uitleg-beeld{order:-1;aspect-ratio:16/7}
  .ai-uitleg-beeld img{object-position:50% center}
  .ai-uitleg-beeld::after{background:linear-gradient(0deg,color-mix(in srgb,var(--kaart) 35%,transparent),transparent 60%)}
  .ai-uitleg-inhoud h2{max-width:none}
  .landing-sfeer{position:relative;inset:auto;grid-row:1;z-index:0;display:block;width:100%;aspect-ratio:16/7.5}
  .landing-sfeer img{object-position:right center}
  .landing-sfeer::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--vlak),transparent 36%);pointer-events:none}
  .landing-hero::before{background:var(--vlak)}
  body.landingspagina main .avondfeed > .wrap{grid-template-columns:minmax(0,1fr)}
}
@container inhoud (max-width:700px){
  .praktijkflow{grid-template-columns:minmax(0,1fr)}
  .flow-beeld{aspect-ratio:16/8}
  .flow-beeld img{position:absolute;inset:0;object-position:72% 40%}
  .flow-inhoud{padding:var(--m-ruimte-24)}
  .landingspagina .praktijkverhaal .praktijkflow,.sfeerbericht-blok{grid-template-columns:minmax(0,1fr)}
  .sfeerbericht-blok figure{aspect-ratio:16/8}
  .sfeerbericht-blok img{position:absolute;inset:0}
  .landing-sfeer{aspect-ratio:16/9}
}
@container inhoud (max-width:599px){
  .moduleoverzicht{row-gap:var(--m-ruimte-12)}
  .modulekaart{padding:var(--m-ruimte-20)}
  .landingspagina .landing-hero{margin-top:var(--m-ruimte-12);padding:0 0 var(--m-ruimte-32)}
  .landing-verhaal{width:100%}
  .landingspagina .landing-hero h1{max-width:16ch;font-size:clamp(34px,8.8vw,48px);letter-spacing:var(--m-spatie-kop)}
  .landingspagina .landing-hero p.lead{font-size:var(--m-tekst-xl);line-height:var(--m-regel-lang)}
  .landingspagina .landing-hero .knoppen{display:grid;grid-template-columns:1fr;gap:var(--m-ruimte-10);margin-top:var(--m-ruimte-24)}
  .producttour .hc-onder{padding-inline:0}
  .producttour .hc-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;padding:var(--m-ruimte-4) var(--m-ruimte-2) var(--m-ruimte-10);scrollbar-width:thin;scrollbar-color:var(--lijn) transparent}
  .producttour .hc-chip{flex:none;white-space:nowrap}
  body.landingspagina main > section{padding-block:var(--m-ruimte-48)}
  body.landingspagina main > section > .wrap{padding-inline:var(--m-ruimte-20)}
  body.landingspagina :is(.sectiekop,.sectiekop.midden){margin-bottom:var(--m-ruimte-32)}
  body.landingspagina .sectiekop.midden{text-align:left}
  body.landingspagina .midden .eyebrow{justify-content:flex-start}
  body.landingspagina :is(.weet,.kaart,.maurice,.stapkaart){padding:var(--m-ruimte-24)}
  body.landingspagina :is(.vloerkaart,.weekkaart,.avond,.console,.rapport){padding:var(--m-ruimte-20);border-radius:var(--m-radius-l)}
  body.landingspagina .hub{padding:var(--m-ruimte-20) var(--m-ruimte-12);gap:var(--m-ruimte-8) var(--m-ruimte-24);grid-template-columns:repeat(2,minmax(0,1fr))}
  body.landingspagina .hub .kol{min-width:0}
  body.landingspagina .hub .knoop > span{min-width:0;hyphens:auto;overflow-wrap:anywhere}
  body.landingspagina :is(.kpis,.stappen){grid-template-columns:minmax(0,1fr)}
  body.landingspagina :is(.support-uitleg,.hardware-uitleg,.apps-uitleg,.kosten-uitleg,.regelbalk){padding:var(--m-ruimte-24)}
  body.landingspagina .rapport .kop{align-items:start;gap:var(--m-ruimte-12);flex-wrap:wrap}
  body.landingspagina .rapport .cijfer{padding:var(--m-ruimte-16)}
  body.landingspagina .pakket{padding:var(--m-ruimte-24) var(--m-ruimte-24)}
  body.landingspagina .faq summary{font-size:var(--m-tekst-xl)}
  body.landingspagina .slot .demo{padding:var(--m-ruimte-20) var(--m-ruimte-16);gap:var(--m-ruimte-20)}
  body.landingspagina .slot .veldrij{gap:var(--m-ruimte-20)}
  .ai-uitleg-inhoud{padding:var(--m-ruimte-24) var(--m-ruimte-20)}
  .ai-uitleg-beeld{aspect-ratio:16/9}
  .ai-uitleg-voorbeelden > div{padding-block:var(--m-ruimte-16)}
}
@container inhoud (max-width:420px){
  .flow-inhoud{padding:var(--m-ruimte-20)}
  .flow-stappen{grid-template-columns:minmax(0,1fr);gap:var(--m-ruimte-12)}
  .flow-stappen li:last-child{grid-column:auto}
}