/* =============================================================
   BOUWHUIS MEDIA — DE HOMEPAGE
   -------------------------------------------------------------
   Alleen wat de herbouwde homepage extra nodig heeft. Alles wat
   de rest van de site al heeft (knoppen, container, section,
   faq, footer) wordt hergebruikt uit style.css en sections.css.

   De pagina wisselt bewust van ondergrond: wit, warm crème en
   heel licht mint. Dat houdt hem rustig en zorgt dat hij niet
   voelt als het zoveelste blauwe B2B-sjabloon.
   ============================================================= */

:root {
  /* Warme en koele vlakken naast het bestaande blauw. Bewust
     laag verzadigd: het beeld en het eten moeten de kleur
     leveren, niet de achtergrond. */
  --warm:        #FBF9F5;
  --warm-2:      #F5F1EA;
  --warm-lijn:   #EAE3D8;
  --mint:        #F2F8F4;
  --mint-2:      #E4F0E9;
  --mint-ink:    #14624A;
}

.section--warm { background: var(--warm); }
.section--mint { background: var(--mint); }

/* =============================================================
   1. HERO
   ============================================================= */

.hero2 {
  position: relative;
  background: var(--warm);
  padding-top: clamp(3.5rem, 1.8rem + 5vw, 8rem);
  padding-bottom: 0;
  overflow: hidden;
}
/* Heel zacht licht achter de kop. Geen harde gradient over de
   hele sectie: dat maakt tekst moeilijker leesbaar. */
.hero2::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: min(1100px, 140vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(27,79,224,.07), rgba(27,79,224,0) 70%);
  pointer-events: none;
}

/* De tekstkolom blijft bewust smal terwijl het product eronder
   juist breed wordt. Dat verschil is het hele punt: compacte,
   leesbare copy boven een productvlak dat de ruimte pakt. */
.hero2__tekst {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.hero2__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
  color: var(--brand-ink);
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Het dominante element van de pagina, en de enige kop op de
   site die buiten de gewone ladder valt: 90px waar een pagina-h1
   64px is. Dat is bewust — hier staat de belofte en verder niets.
   De maat zelf staat in tokens.css als --fs-hero, zodat ook deze
   uitzondering op één plek te vinden is. */
.hero2__kop {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.042em;
  color: var(--ink);
  margin-bottom: var(--space-5);
}
@media (max-width: 560px) {
  .hero2__kop { font-size: clamp(2.6rem, 1rem + 9vw, 3.5rem); line-height: 1; }
}

/* Het kleurverloop op tekst staat in style.css, want het wordt
   op elke pagina gebruikt en niet alleen hier. */

/* --- De wisselende tweede regel ------------------------------
   "Meer reserveringen." en "Meer omzet." lossen elkaar af.

   Het vak krijgt zijn maat van het langste woord, dat onzichtbaar
   meeloopt in de stroom. Zonder dat springt alles eronder bij elke
   wissel op en neer.

   Het oude woord gaat omhoog weg, het nieuwe komt van onderen
   binnen — dezelfde richting, zodat het leest als doorbladeren en
   niet als knipperen. Twaalf pixels en een zachte curve: genoeg om
   te zien, te weinig om af te leiden. */
/* Het vak knipt af wat erbuiten schuift — dat is wat het laten
   doordraaien zijn effect geeft: het oude woord rolt er echt uit
   en het nieuwe komt er echt in.

   Het gevaar daarvan is de staart van de g en de j. Die vielen
   er eerder af. Nu is het vak een fractie hoger dan de regel
   (line-height 1.18 tegen .96 in de kop) en staat het woord
   bovenin, zodat die staart in de overgebleven ruimte past.
   Kom je hieraan, kijk dan altijd even naar de g van
   "reserveringen". */
.wissel {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}
.wissel__maat { visibility: hidden; display: block; line-height: 1.18; }

/* Elk woord staat gecentreerd in het vak, niet links. Het vak is
   zo breed als het langste woord; zonder deze centrering hangt de
   kortere regel scheef onder de eerste.

   Het woord zelf blijft precies zo breed als de tekst, zodat het
   kleurverloop over het wóórd loopt en niet over een leeg vak van
   zevenhonderd pixels. */
.wissel__woord {
  position: absolute;
  top: 0; left: 50%;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 130%);
}
.wissel__woord.is-nu { opacity: 1; transform: translate(-50%, 0); }

/* Alleen bewegen als er iets te wisselen valt; met één woord
   staat het gewoon stil. */
.wissel--aan .wissel__woord {
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.wissel--aan .wissel__woord.is-weg {
  opacity: 0;
  transform: translate(-50%, -130%);
}

/* Wie liever geen beweging ziet krijgt gewoon een overvloeier. */
@media (prefers-reduced-motion: reduce) {
  .wissel--aan .wissel__woord,
  .wissel--aan .wissel__woord.is-weg {
    transition: opacity .3s linear;
    transform: translate(-50%, 0);
  }
}

/* Op een telefoon past "Meer reserveringen." niet op één regel.
   Hij mag daar dus afbreken: het vak wordt een blok over de volle
   breedte en de woorden staan gecentreerd binnen dat blok. Het
   onzichtbare langste woord breekt mee, dus de hoogte klopt nog
   steeds en er verspringt niets.

   Dit stond eerst op nowrap, en dan werd de regel links en rechts
   gewoon afgesneden — precies wat je op een telefoon niet ziet
   als je alleen op een groot scherm kijkt. */
@media (max-width: 620px) {
  .wissel { display: block; }
  .wissel__maat { white-space: normal; }
  .wissel__woord {
    left: 0; right: 0;
    white-space: normal;
    text-align: center;
    transform: translateY(115%);
  }
  .wissel__woord.is-nu { transform: translateY(0); }
  .wissel--aan .wissel__woord.is-weg { transform: translateY(-115%); }
  @media (prefers-reduced-motion: reduce) {
    .wissel--aan .wissel__woord,
    .wissel--aan .wissel__woord.is-weg { transform: none; }
  }
}

.hero2__sub {
  max-width: 46ch;
  margin: 0 auto var(--space-6);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero2__acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: 0;
}

.hero2__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  list-style: none;
  padding: 0;
}
.hero2__pills li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.hero2__pills svg { color: var(--positive-diep); flex-shrink: 0; }

/* =============================================================
   2. DE HEROCOMPOSITIE
   -------------------------------------------------------------
   Eén telefoon in het midden, drie kaarten eromheen die hem
   iets overlappen. Die overlap is het hele punt: losse blokjes
   naast elkaar lezen als losse producten, overlappende kaarten
   lezen als één systeem.

   De onderkant loopt weg in de volgende sectie, zodat je ziet
   dat er meer is en vanzelf doorscrollt.
   ============================================================= */

.toneel {
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
/* De onderkant dooft weg in de volgende sectie. Dat is geen
   versiering: de compositie is met opzet hoger dan het scherm, en
   een harde afsnijding onderaan leest als een fout terwijl een
   vervaging leest als "er komt meer". */
.toneel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(to bottom, rgba(251,249,245,0), var(--warm) 88%);
  pointer-events: none;
  z-index: 5;
}

.toneel__binnen {
  position: relative;
  /* Breder dan de tekst erboven. Op een 27-inch scherm is dit het
     verschil tussen een smalle kolom in een witte vlakte en een
     product dat de ruimte pakt. */
  max-width: 1250px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 640px;
  display: flex;
  justify-content: center;
}

/* --- het podium: het vlak achter de compositie ---------------
   Puur decor, zonder inhoud. Het geeft de telefoon en de kaarten
   massa en houdt ze bij elkaar; zonder dit vlak zweven ze los in
   het wit en lezen ze als drie losse dingen.

   Heel licht blauw links, off-white in het midden, een vleugje
   mint rechts. Geen fel vlak en geen gloed: het eten en de
   interface moeten de kleur leveren. */
/* Centreren met marge en niet met translateX. De scroll-reveal
   zet aan het eind transform op none, en die wint — een centrering
   via transform valt er dan af en het vlak schuift een halve
   breedte naar rechts. Dat is hier één keer gebeurd en op een
   breed scherm zie je het meteen. */
.podium {
  position: absolute;
  left: 0; right: 0;
  margin-inline: auto;
  top: 16%;
  width: min(1150px, 84vw);
  /* Breder mag, hoger niet. De compositie groeit toch al in de
     hoogte door de telefoon; een hoog vlak eronder maakt het
     alleen maar langer zonder dat er iets bij komt. */
  height: clamp(340px, 26vw, 420px);
  border-radius: 32px;
  /* Eén vloeiend vlak. Dit was een verloop van links naar rechts
     met een blauwe en een groene helft, en dat las als twee
     vakken naast elkaar. Nu zijn het twee zachte gloeden die
     elkaar in het midden in bijna-wit ontmoeten — je ziet kleur,
     geen scheidslijn. */
  background:
    radial-gradient(120% 150% at 10% 22%, rgba(27,79,224,.16) 0%, rgba(27,79,224,0) 58%),
    radial-gradient(115% 140% at 93% 82%, rgba(23,160,107,.15) 0%, rgba(23,160,107,0) 60%),
    #FCFBF8;
  /* Dunne rand, zachte schaduw. Meer is niet nodig: een zware
     diffuse schaduw laat een strak ontwerp er meteen sjabloonachtig
     uitzien. */
  box-shadow:
    inset 0 0 0 1px rgba(11,18,32,.045),
    0 10px 30px -24px rgba(11,18,32,.18);
  z-index: 0;
}

/* Een heel fijne korrel over het vlak. Zonder korrel ziet een
   verloop van bijna-witte tinten er op een groot scherm
   gestreept uit (banding); de korrel breekt die banden en geeft
   het vlak tegelijk iets stoffigs in plaats van digitaal.

   Het is een svg met ruis, in de stylesheet zelf — geen bestand
   om kwijt te raken en niets extra's om te laden. */
.podium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .06;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- de telefoon --- */
/* Het dominante object van het productgedeelte, maar bewust niet
   in zijn geheel te zien. Het verhaal zit in het bovenste stuk:
   de zaak, de beoordeling, de reserveerknop. Wat daaronder staat
   hoeft niemand te lezen — en het maakte de hele compositie een
   paar honderd pixels langer.

   Daarom twee dingen:
   - het scherm is korter (9/15 in plaats van 9/18.5), zodat de
     reserveerknop niet meer onderin hangt;
   - de onderkant wordt afgesneden met clip-path.

   clip-path en geen overflow: met negatieve waarden aan drie
   kanten blijft de schaduw naast en boven het toestel gewoon
   staan, terwijl de onderkant er recht af gaat. Met overflow
   zou de zijschaduw meeverdwijnen. */
.toestel {
  position: relative;
  z-index: 2;
  width: clamp(268px, 30vw, 430px);

  /* Hoeveel er onderaan af gaat. Eén waarde, twee keer gebruikt:
     de clip-path snijdt het beeld af en de negatieve marge haalt
     dezelfde hoogte uit de layout. Zonder dat tweede blijft er
     een gat staan onder de telefoon ter grootte van het stuk dat
     je net hebt weggesneden. */
  --knip: clamp(58px, 6.5vw, 96px);
  clip-path: inset(-90px -90px var(--knip) -90px);
  margin-bottom: calc(var(--knip) * -1);
}
.toestel__rand {
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(160deg, #1A2438 0%, #0B1220 55%, #161F31 100%);
  /* Dunner dan hiervoor. Drie gestapelde diffuse schaduwen
     maakten het toestel zwaar; nu draagt de vorm het zelf. */
  box-shadow:
    0 2px 4px rgba(11,18,32,.08),
    0 18px 38px -20px rgba(11,18,32,.24);
}
.toestel__scherm {
  position: relative;
  border-radius: 33px;
  overflow: hidden;
  background: var(--surface);
  /* Korter dan een echte telefoon. Dit is een hero-object, geen
     schermafdruk die tot onderaan leesbaar moet zijn. */
  aspect-ratio: 9 / 15;
}

/* --- de nagemaakte restaurantsite --- */
.mini {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 12px 12px;
  font-size: 11px;
  background: #FEFDFB;
}

.mini__kop { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.mini__merk {
  font-size: 11.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
}
.mini__burger { display: grid; gap: 3px; }
.mini__burger i { display: block; width: 14px; height: 1.5px; border-radius: 2px; background: var(--ink); opacity: .55; }

.mini__beeld {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--surface-3);
}
.mini__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,12,24,.78) 0%, rgba(7,12,24,.18) 45%, rgba(7,12,24,0) 72%);
}
.mini__beeld figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 11px;
  z-index: 1;
  color: #fff;
}
.mini__beeld figcaption strong {
  display: block;
  font-size: 15px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15;
}
.mini__beeld figcaption span { display: block; margin-top: 2px; font-size: 9.5px; color: rgba(255,255,255,.74); }

.mini__rij {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 3px 8px;
  font-size: 9.5px;
}
.mini__score { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); }
.mini__sterren { display: inline-flex; gap: .5px; color: var(--star); }
.mini__sterren svg { width: 8px; height: 8px; }
.mini__score b { color: var(--ink); font-weight: 650; }
.mini__score i { font-style: normal; color: var(--ink-muted); }
.mini__open { color: var(--positive); font-weight: 650; }
.mini__open i { font-style: normal; color: var(--ink-muted); font-weight: 400; }

.mini__knop {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px; font-weight: 650; text-align: center;
  box-shadow: 0 6px 14px -6px rgba(27,79,224,.55);
}

.mini__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.mini__gerecht {
  position: relative;
  display: block;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
}
.mini__gerecht img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini__gerecht em {
  position: absolute; left: 6px; bottom: 5px;
  font-style: normal; font-size: 8.5px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px rgba(7,12,24,.7);
}

/* --- de drie zwevende kaarten --- */
.zwever {
  position: absolute;
  z-index: 4;
  margin: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 16px;
  /* Dunne rand, lichte schaduw. Meer maakt het sjabloonachtig. */
  box-shadow:
    0 1px 2px rgba(11,18,32,.04),
    0 8px 22px -14px rgba(11,18,32,.16);
  padding: 14px;
}
.zwever__titel {
  display: block; margin-bottom: 10px;
  font-size: var(--fs-micro); font-weight: 650;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
}

/* Hier zweefden de kaartjes eindeloos op en neer. Dat is eruit:
   beweging die nooit ophoudt trekt de aandacht weg van de kop en
   van de knoppen, en na de eerste seconde voegt het niets meer
   toe. Ze komen nu één keer rustig binnen met de rest van de
   pagina en staan daarna stil. */

/* Plaatsing op groot scherm, gemeten vanaf het midden en niet
   vanaf de rand. Zo overlappen de kaarten de telefoon op elke
   breedte even veel — en juist die overlap maakt er één geheel
   van in plaats van drie losse blokjes.

   De telefoon is 430px breed, dus zijn rand ligt 215px van het
   midden. De getallen hieronder zijn daarop gekozen: een kaart op
   148px overlapt hem bijna zeventig pixels. Die overlap is met
   opzet ruim — hoe dichter de kaarten om het toestel liggen, hoe
   meer het één systeem is en hoe minder het drie losse blokjes
   zijn. Verander je de breedte van de telefoon, dan moeten deze
   getallen mee.

   Verticaal liggen ze alle drie binnen het podium (dat loopt van
   22% tot 72% van dit vak). Een kaart die daarboven of daaronder
   uitsteekt zweeft los in het wit, en dan is het weer een los
   blokje in plaats van onderdeel van het product. */
.zwever--zoek {
  right: calc(50% + 148px);
  top: 20%;
  width: clamp(250px, 24vw, 340px);
}
.zwever--boeking {
  left: calc(50% + 156px);
  top: 17%;
  width: clamp(224px, 20vw, 292px);
}
/* Deze kaart mag de knop "Reserveer een tafel" niet afdekken —
   het ene ding in de mockup dat heel moet blijven.

   Hij ontwijkt de knop niet in de hoogte maar in de breedte, en
   dat is met opzet. De knop zit niet op een vaste hoogte in de
   telefoon: de teksten in het nagemaakte schermpje zijn in
   pixels, de telefoon schaalt mee met de breedte, en daardoor
   schuift de knop bij een smaller scherm omhoog. Elke oplossing
   met een percentage klopte op de ene breedte en niet op de
   andere.

   De rechterkant van de knop ligt altijd 193 pixels van het
   midden (halve telefoon 215, min 10 rand en 12 marge). Op 206
   staat de kaart daar netjes naast, en overlapt hij nog net de
   rand van het toestel. */
.zwever--cijfers {
  left: calc(50% + 206px);
  bottom: 20%;
  width: clamp(240px, 22vw, 310px);
}

/* --- kaart 1: het zoekresultaat --- */
.zoekregel {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
}
.zoekregel__icoon { display: flex; color: var(--ink-muted); }
.zoekregel__icoon svg { width: 13px; height: 13px; }

.uitslag { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.uitslag__vlak {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
}
.uitslag__vlak svg { width: 15px; height: 15px; }
.uitslag__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uitslag__tekst strong { color: var(--ink); font-size: var(--fs-small); font-weight: 650; }
.uitslag__score { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); color: var(--ink-soft); }
.uitslag__sterren { display: inline-flex; gap: .5px; color: var(--star); }
.uitslag__sterren svg { width: 9px; height: 9px; }
.uitslag__score i { font-style: normal; color: var(--ink-muted); }
.uitslag__meta { font-size: var(--fs-micro); color: var(--ink-muted); }
.uitslag__open { font-size: var(--fs-micro); color: var(--positive); font-weight: 600; }

.zwever__chip {
  display: inline-flex; align-items: center;
  margin-top: 12px;
  padding: .28rem .6rem;
  border-radius: var(--r-full);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: .68rem; font-weight: 650;
}

/* --- kaart 2: de reservering --- */
.zwever--boeking { display: flex; gap: 10px; align-items: flex-start; }
.zwever__stip {
  flex-shrink: 0;
  width: 9px; height: 9px; margin-top: 5px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 4px var(--positive-bg);
}
.zwever--boeking strong { display: block; color: var(--ink); font-size: var(--fs-small); font-weight: 650; }
.zwever__regel { display: block; margin-top: 1px; font-size: var(--fs-small); color: var(--ink-soft); }
.zwever__bron  { display: block; margin-top: 3px; font-size: var(--fs-micro); color: var(--ink-muted); }

/* --- kaart 3: wat het oplevert --- */
.zwever__kop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.zwever__kop span {
  font-size: var(--fs-micro); font-weight: 650;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
}
/* Die getallen zijn verzonnen, en dat staat er ook bij. */
.zwever__kop em {
  font-style: normal;
  padding: .1rem .4rem;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: .6rem; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase;
}

.cijfers { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cijfers li { display: flex; align-items: baseline; gap: 7px; }
.cijfers b {
  color: var(--ink);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cijfers span { font-size: var(--fs-micro); color: var(--ink-soft); }

.groei {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  padding: .28rem .6rem;
  border-radius: var(--r-full);
  background: var(--mint-2);
  color: var(--mint-ink);
  font-size: .68rem; font-weight: 650;
}
.groei svg { width: 12px; height: 12px; }

/* --- mobiel: geen overlap, alles onder elkaar ---
   Drie kaarten die een telefoon overlappen werkt op een breed
   scherm en nergens anders. Op een telefoon staat alles gewoon
   onder elkaar, en het podium wordt een rustige achtergrond
   achter de hele stapel in plaats van een vast vlak. */
@media (max-width: 900px) {
  .toneel__binnen {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    min-height: 0;
  }
  .podium {
    top: 0; bottom: 0;
    height: auto;
    width: min(560px, 94vw);
    border-radius: 24px;
  }
  .zwever {
    position: static;
    width: min(420px, 100%);
    animation: none;
  }
  .zwever--zoek, .zwever--boeking, .zwever--cijfers { width: min(420px, 100%); }
  .toestel { width: min(300px, 74vw); }
  .toneel::after { display: none; }
}

/* =============================================================
   3. LOGOBALK
   ============================================================= */

.logos { padding-block: clamp(2.5rem, 1.8rem + 2vw, 4rem); background: var(--warm); }
.logos__titel {
  text-align: center;
  margin-bottom: var(--space-6);
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.logos__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  list-style: none; padding: 0;
}
.logos__rij img {
  height: clamp(24px, 20px + 1vw, 34px);
  width: auto;
  /* Grijs en rustig: de rij is bewijs, geen kleurenparade. */
  filter: grayscale(1);
  opacity: .55;
  transition: opacity var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.logos__rij img:hover { filter: grayscale(0); opacity: 1; }

/* =============================================================
   4. KLANTVERHALEN — de doorlopende rij
   ============================================================= */

/* Compacter dan een gewone sectie: de kop en de rij horen bij
   elkaar en moeten als één blok lezen. */
.verhalen {
  background: var(--warm);
  overflow: hidden;
  padding-block: clamp(4rem, 2rem + 3.4vw, 6rem);
}

/* Links uitgelijnd, geen bovenlabel. De kop blijft smal genoeg om
   in één oogopslag te lezen; de rij eronder gaat juist breed. */
.verhalen__kop { max-width: 700px; margin-bottom: clamp(2rem, 1.2rem + 2vw, 2.75rem); }
.verhalen__kop h2 { margin: 0 0 .7rem; }
.verhalen__kop p {
  max-width: 600px;
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* De rij loopt buiten de container door tot bijna de
   schermranden. Zo zie je dat er meer klanten zijn dan er passen
   — wat ook zo is. */
.verhalenlus {
  position: relative;
  overflow: hidden;
  /* Een vervaging van 32 pixels, en geen procent. Dit was 6% van
     de schermbreedte; op een breed scherm is dat bijna negentig
     pixels witte waas over de foto's heen, en dan verstopt de
     rand precies het beeld waar de sectie het van moet hebben. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.verhalenlus__baan {
  display: flex;
  width: max-content;
  /* Rustig tempo. Sneller wordt onrustig, langzamer lijkt stuk. */
  animation: verhalenlus 78s linear infinite;
}
/* De rij loopt door, ook als je er met de muis overheen gaat.
   Stoppen bij hover voelt als een hapering: je ziet niet dat je
   hem zelf hebt stilgezet, je ziet alleen dat er iets vastloopt. */

.verhalenlus__groep {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-5);
  padding-right: var(--space-5);
  list-style: none;
  margin: 0;
}

@keyframes verhalenlus {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Geen beweging voor wie daar last van heeft. De rij wordt dan
   een gewone strook die je zelf kunt schuiven. */
@media (prefers-reduced-motion: reduce) {
  .verhalenlus__baan { animation: none; }
  .verhalenlus {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .verhalenlus__groep[aria-hidden="true"] { display: none; }
}

/* --- de kaart --- */
.verhaalkaart {
  position: relative;
  width: clamp(300px, 26vw, 420px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  isolation: isolate;
}

.verhaalkaart__beeld { position: absolute; inset: 0; }
.verhaalkaart__beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Donker verloop van onderen, zodat witte tekst op elke foto
   leesbaar blijft — ook op een lichte lunchfoto. */
.verhaalkaart::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(7,12,24,.86) 0%,
              rgba(7,12,24,.55) 30%,
              rgba(7,12,24,.05) 62%,
              rgba(7,12,24,0) 100%);
  z-index: 1;
}

/* Verschijnt alleen als er een echt resultaat is ingevuld. */
.verhaalkaart__resultaat {
  position: absolute; top: var(--space-4); right: var(--space-4);
  z-index: 2;
  padding: .28rem .65rem;
  border-radius: var(--r-full);
  background: var(--mint-2);
  color: var(--mint-ink);
  font-size: var(--fs-micro);
  font-weight: 650;
}

.verhaalkaart__tekst {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-5);
  color: #fff;
}
.verhaalkaart__quote {
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}
.verhaalkaart__tekst strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -.02em;
}
.verhaalkaart__tekst span {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-micro);
  color: rgba(255,255,255,.68);
}

/* =============================================================
   5. DE REIS VAN DE GAST
   -------------------------------------------------------------
   Drie stappen in één rij met een lijn ertussen. Niet drie
   kaarten naast elkaar: het lijntje en de pijl zijn precies wat
   het verschil maakt tussen "drie dingen die we doen" en "één
   weg die een gast aflegt".

   De vlakken zijn met opzet bijna kleurloos — een dunne rand en
   verder niets. Zodra ze schaduw en vulling krijgen worden het
   weer drie losse kaarten en is de flow weg.
   ============================================================= */

.reis {
  background: var(--warm);
  padding-block: clamp(4.25rem, 2.2rem + 3.8vw, 6.5rem);
}

.reis__kop {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 1.4rem + 1.4vw, 2.5rem);
  text-align: center;
}
/* Deze kop was de maat waar de rest van de site op is gezet:
   hij staat nu in tokens.css als --fs-h2. Hier alleen nog de
   ruimte eronder. */
.reis__kop h2 { margin: 0 0 .8rem; }
.reis__kop p {
  max-width: 650px;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- de rij: stap, pijl, stap, pijl, stap --- */
.reis__rij {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reis__pijl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(.5rem, .2rem + 1vw, 1.5rem);
  color: var(--ink-muted);
  opacity: .55;
}
.reis__pijl svg { width: clamp(22px, 2.4vw, 34px); height: auto; }

.reisstap {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.55);
}

/* De nummers dragen de volgorde, dus ze mogen gezien worden. In
   het merkblauw en niet in een lichte tint: op de warme
   achtergrond viel dat lichtblauw zo goed als weg. */
.reisstap__nr {
  display: block;
  margin-bottom: .65rem;
  font-size: clamp(1.75rem, 1.2rem + 1vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--brand);
}

.reisstap h3 {
  margin: 0 0 .5rem;
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: var(--ls-head);
  color: var(--ink);
}
.reisstap p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* De onderdelen als losse woorden met een punt ertussen. Geen
   pillen: het zijn geen knoppen en geen keuzes, ze laten alleen
   zien wat er onder deze stap valt. */
.reisstap__delen {
  margin-top: auto;
  padding-top: clamp(1rem, .85rem + .6vw, 1.3rem);
  font-size: var(--fs-micro);
  line-height: 1.9;
  color: var(--ink-muted);
}
.reisstap__delen span { white-space: nowrap; }
.reisstap__delen span[aria-hidden] { opacity: .5; }

/* --- het blok over de ondernemer --- */
/* Bewust een ander vlak dan de drie stappen erboven. Die gaan
   over de gast; dit gaat over de eigenaar, en dat verschil moet
   je kunnen zien zonder het te lezen. */
.inzichtblok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(2.25rem, 1.5rem + 1.6vw, 3rem);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.inzichtblok h3 {
  margin: 0 0 .75rem;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 650;
  letter-spacing: var(--ls-head);
  line-height: 1.12;
  color: var(--ink);
}
.inzichtblok p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

.inzichtpaneel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 1rem 1.125rem 1.125rem;
}
.inzichtpaneel__kop {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .75rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--line);
}
.inzichtpaneel__kop strong { font-size: var(--fs-small); font-weight: 650; color: var(--ink); }
.inzichtpaneel__kop span {
  padding: .15rem .5rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
}
.inzichtpaneel ul { list-style: none; margin: 0; padding: 0; }
.inzichtpaneel li {
  display: flex; align-items: baseline; gap: .625rem;
  padding: .48rem 0;
  font-size: var(--fs-small);
}
.inzichtpaneel li + li { border-top: 1px solid var(--line-soft); }
.inzichtpaneel__naam { flex: 1 1 auto; color: var(--ink-soft); }
.inzichtpaneel__waarde { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.inzichtpaneel__trend {
  font-style: normal;
  font-size: var(--fs-micro); font-weight: 600;
  color: var(--positive-diep);
}

/* =============================================================
   6. DE DRIE PRODUCTVERHALEN
   ============================================================= */

.verhaalblok__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}
.verhaalblok--om .verhaalblok__tekst  { order: 2; }
.verhaalblok--om .verhaalblok__visual { order: 1; }

/* HET DASHBOARDBLOK KRIJGT MEER BEELD DAN TEKST.
   1fr / 1.35fr komt neer op ongeveer 43% tekst en 57% beeld. Bij
   de twee blokken hierboven is een tekening in één blik te vatten
   en mag de tekst even zwaar wegen; in een dashboard valt echt
   iets te lézen, en dan is 47/53 te krap.

   Het blok staat ook iets korter: de kop, drie punten en één
   tekening vullen minder dan de blokken erboven, en dan voelt
   dezelfde sectiehoogte leeg. */
/* Alleen op een breed scherm. Zonder deze mediaquery wint deze
   regel van de "alles onder elkaar"-regel verderop — die is één
   klasse minder specifiek — en dan staat het dashboard op een
   telefoon in een kolom van 210px en scrolt de hele pagina
   horizontaal. */
@media (min-width: 981px) {
  .verhaalblok--breed .verhaalblok__grid { grid-template-columns: 1fr 1.35fr; }
}
.verhaalblok--breed { padding-block: clamp(3rem, 1.8rem + 2.6vw, 4.5rem); }

/* Middelste blok krijgt een andere ondergrond, zodat de drie
   secties niet als één lange lap voelen. */
.verhaalblok--om { background: var(--mint); }

.verhaalblok__tekst h2 {
  margin: var(--space-4) 0 var(--space-4);
  max-width: 20ch;
}
.verhaalblok__tekst .lead { max-width: 44ch; }

.verhaalblok__punten { margin-top: var(--space-6); list-style: none; padding: 0; }
.verhaalblok__punten li { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.verhaalblok__punten li:last-child { border-bottom: 1px solid var(--line); }
.verhaalblok__punten strong { display: block; color: var(--ink); font-size: var(--fs-small); font-weight: 650; margin-bottom: .15rem; }
.verhaalblok__punten span   { font-size: var(--fs-small); color: var(--ink-soft); max-width: 46ch; display: block; }

/* --- de vlakken waar de visuals in staan --- */
.vlak {
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
}
.vlak--kaart  { background: var(--brand-tint); }
.vlak--site   { background: transparent; display: grid; place-items: center; }

/* =============================================================
   DE LAPTOP MET DE DOORSCHUIVENDE WEBSITE
   -------------------------------------------------------------
   Er stond hier een <div class="telefoon"> waar nooit stijl bij
   is gekomen — vandaar dat het een kale schermafdruk was.
   ============================================================= */

/* Vult de hele kolom. Een laptop die kleiner is dan de tekst
   ernaast leest als een plaatje, niet als het product. */
.laptop { margin: 0; width: 100%; }

.laptop__deksel {
  padding: 11px 11px 13px;
  border-radius: 14px 14px 5px 5px;
  background: linear-gradient(160deg, #1A2438 0%, #0B1220 55%, #161F31 100%);
  box-shadow:
    0 2px 4px rgba(11,18,32,.08),
    0 18px 40px -22px rgba(11,18,32,.28);
}

.laptop__scherm {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface);
}

/* Het scherm heeft een heel dun glansje, anders leest het als een
   plaatje in een lijstje in plaats van als een beeldscherm. */
.laptop__scherm::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%);
  pointer-events: none;
}

/* De onderkant: de rand van het toetsenbord, en daaronder een
   iets breder voetje. Het inkepinkje in het midden is het
   detail waardoor het als laptop leest. */
.laptop__voet {
  position: relative;
  width: 112%;
  margin-inline: -6%;
  height: 13px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(#DDE1E9 0%, #C2C9D6 55%, #A9B2C2 100%);
  box-shadow: 0 6px 14px -8px rgba(11,18,32,.30);
}
.laptop__voet::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 84px; height: 5px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: rgba(11,18,32,.13);
}

/* --- het doorschuiven --- */
/* object-position en geen transform: bij object-fit: cover
   betekent 0% "bovenkant in beeld" en 100% "onderkant in beeld".
   Daardoor klopt het bij elke verhouding van de afbeelding en
   staat er nergens een hoogte hardgecodeerd.

   De tijden: ruim drie tellen stil bovenaan, tien tellen naar
   beneden, twee tellen stil onderaan, tien tellen terug. Rustig
   genoeg om te volgen, traag genoeg om niet af te leiden. */
.laptop__scherm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
  animation: bladeren 26s ease-in-out infinite;
}

@keyframes bladeren {
  0%,  12%  { object-position: 50% 0%; }
  50%, 58%  { object-position: 50% 100%; }
  96%, 100% { object-position: 50% 0%; }
}

/* Wie geen beweging wil, ziet gewoon de bovenkant van de site. */
@media (prefers-reduced-motion: reduce) {
  .laptop__scherm img { animation: none; }
}
.vlak--paneel { background: var(--warm-2); }

/* --- kaartje met spelden --- */
.kaartje {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: #EDF2FC;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.kaartje__weg { position: absolute; background: #FFFFFF; border-radius: var(--r-full); }
.kaartje__weg--1 { left: -5%; right: -5%; top: 38%; height: 10px; transform: rotate(-4deg); }
.kaartje__weg--2 { top: -10%; bottom: -10%; left: 33%; width: 9px; transform: rotate(7deg); }
.kaartje__weg--3 { left: -5%; right: -5%; top: 72%; height: 7px; transform: rotate(3deg); }
.kaartje__water {
  position: absolute; right: -8%; bottom: -18%;
  width: 55%; aspect-ratio: 1; border-radius: 42% 58% 55% 45%;
  background: #DCE7F8;
}
.kaartje__pin { position: absolute; display: grid; place-items: center; }
.kaartje__pin--jij {
  left: 46%; top: 40%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(27,79,224,.16);
}
.kaartje__pin--stil {
  left: var(--x); top: var(--y);
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #C3D2EC;
}

.positie {
  margin-top: var(--space-4);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.positie__label {
  display: block; margin-bottom: .6rem;
  font-size: var(--fs-micro); font-weight: 650;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
}
.positie__rij {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: .45rem 0;
  font-size: var(--fs-small);
}
.positie__rij + .positie__rij { border-top: 1px solid var(--line-soft); }
.positie__rij em { font-style: normal; color: var(--ink-soft); }
.positie__rij b  { color: var(--brand); font-variant-numeric: tabular-nums; }

/* --- het dashboardpaneel --- */
.paneelkop { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--space-4); }
.paneelkop__punt { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.paneelkop strong { color: var(--ink); font-size: var(--fs-small); font-weight: 650; }

.kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi > div {
  background: var(--surface); border-radius: var(--r-sm);
  padding: var(--space-4);
}
.kpi span   { display: block; font-size: var(--fs-micro); color: var(--ink-muted); margin-bottom: .2rem; }
.kpi strong { color: var(--ink); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.staafjes2 {
  display: flex; align-items: flex-end; gap: 5px;
  height: 88px; margin-bottom: var(--space-5);
  background: var(--surface); border-radius: var(--r-sm);
  padding: var(--space-4);
}
.staafjes2 span { flex: 1; border-radius: 3px 3px 0 0; background: var(--brand); opacity: .82; }

.paneellijst { list-style: none; padding: 0; background: var(--surface); border-radius: var(--r-sm); }
.paneellijst li {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem var(--space-4);
  font-size: var(--fs-small); color: var(--ink-soft);
}
.paneellijst li + li { border-top: 1px solid var(--line-soft); }
.paneellijst b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* =============================================================
   HET DASHBOARD OP DE HOMEPAGE
   -------------------------------------------------------------
   Eén warm vlak met daarin witte kaarten. Geen zware schaduwen:
   het onderscheid komt van de achtergrond en een haarlijn, en
   dat blijft rustig op een off-white pagina.

   De opbouw volgt de vraag die een ondernemer stelt, in die
   volgorde: hoeveel gasten kwamen er in beweging (groot), wat
   deden ze precies (lijst), en staat het er goed voor (status).
   ============================================================= */

.dash {
  background: var(--warm-2);
  border-radius: var(--r-xl);
  padding: clamp(1.1rem, .7rem + 1.4vw, 1.75rem);
}

.dash__kop {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: clamp(.85rem, .7rem + .5vw, 1.1rem);
  padding-inline: .25rem;
}
.dash__punt { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.dash__kop strong { color: var(--ink); font-size: var(--fs-small); font-weight: 650; }

/* De badge staat er niet voor de sier — zie de uitleg in
   visual-dashboard.php. Hij mag opvallen zonder te schreeuwen. */
.dash__voorbeeld {
  margin-left: auto;
  padding: .2rem .5rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- het cijfer waar het om draait --- */
.dash__hoofd {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  margin-bottom: .6rem;
}
.dash__label {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  margin-bottom: .35rem;
}
.dash__cijfer { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.dash__cijfer strong {
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Groen, maar niet fel: het is een geruststelling, geen alarm. */
.dash__cijfer em {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--positive-diep);
}

.dash__balken {
  display: flex; align-items: flex-end; gap: 5px;
  height: clamp(46px, 30px + 2.4vw, 68px);
  margin-top: clamp(.9rem, .7rem + .6vw, 1.25rem);
}
.dash__balken span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
  opacity: .28;
}
/* De laatste drie zijn de recente weken; die mogen vol in kleur
   staan zodat je de beweging ziet zonder een legenda. */
.dash__balken span:nth-last-child(-n+3) { opacity: .9; }

/* --- wat gasten verder deden --- */
.dash__lijst {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border-radius: var(--r-md);
}
.dash__lijst li {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem clamp(1rem, .8rem + .6vw, 1.4rem);
  font-size: var(--fs-small);
}
.dash__lijst li + li { border-top: 1px solid var(--line-soft); }
.dash__naam { color: var(--ink-soft); }
.dash__bij {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--positive-diep);
}
/* margin-left: auto duwt alleen het getal naar rechts, zodat een
   losse opmerking ("2 posities erbij") vlak achter zijn eigen
   regel blijft plakken en niet middenin de rij zweeft. */
.dash__lijst b {
  margin-left: auto;
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Op een telefoon past "Lokale positie · 2 posities deze maand ·
   #3" niet op één regel. In plaats van hem te laten knellen zetten
   we het bijschrift eronder: order 3 met een volle regelbreedte
   houdt de naam en het getal netjes op de eerste regel staan. */
@media (max-width: 620px) {
  .dash__lijst li { flex-wrap: wrap; }
  .dash__bij { order: 3; flex-basis: 100%; }
}

.dash__status {
  display: flex; align-items: center; gap: .45rem;
  margin: .85rem .25rem 0;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}
.dash__status span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--positive);
}

/* =============================================================
   7. PRIJZEN
   -------------------------------------------------------------
   Deze sectie staat op zichzelf: alles is gescoped onder
   .bm-pricing. De kleuren komen wel uit de site-tokens, met de
   losse waarde als terugval — zo blijft er één plek waar je de
   huisstijl verandert.
   ============================================================= */

.bm-pricing {
  --bm-blue:       var(--brand, #1B4FE0);
  --bm-blue-dark:  var(--brand-hover, #163FB4);
  --bm-blue-soft:  var(--brand-tint, #EEF3FF);
  --bm-blue-line:  #D3DFFF;

  --bm-green:      #0E9F6E;
  --bm-green-dark: #0B7F58;
  --bm-green-soft: #ECFBF4;
  --bm-green-line: #BCEBD7;

  --bm-navy:       var(--ink, #0B1220);
  --bm-navy-2:     #1C2637;
  --bm-slate:      var(--ink-soft, #5A6478);
  --bm-muted:      var(--ink-muted, #8A93A6);

  --bm-white:      var(--surface, #FFFFFF);
  --bm-offwhite:   var(--surface-2, #F7F9FC);
  --bm-line:       var(--line, #E6EAF2);

  --bm-r-lg: 16px;
  --bm-r-md: 12px;

  background: var(--bm-white);
  color: var(--bm-navy);
  padding: clamp(4.5rem, 3rem + 4vw, 6.5rem) var(--gutter) clamp(5rem, 3.2rem + 4.5vw, 7rem);
}

.bm-pricing *,
.bm-pricing *::before,
.bm-pricing *::after { box-sizing: border-box; }

.bm-pricing__inner { max-width: 1140px; margin: 0 auto; }

/* --- kop --- */
/* 860 en niet 700: op de nieuwe kopmaat van 54px past "Alles voor
   meer zichtbaarheid" anders niet op één regel, en dan valt het
   gekleurde stuk over twee regels uiteen — dat leest rommelig. */
.bm-head { max-width: 860px; margin: 0 auto 64px; text-align: center; }

.bm-eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bm-blue);
}
/* Het prijsblok heeft een eigen kleurenset (bm-navy, bm-blue),
   maar de kop hoort gewoon bij de rest: maat en gewicht komen uit
   de ladder, alleen de kleur is hier anders. */
.bm-h2 { margin: 0 0 20px; color: var(--bm-navy); }

.bm-sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--bm-slate); }

/* --- raster --- */
.bm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* --- de kaart --- */
.bm-card {
  display: flex;
  flex-direction: column;
  background: var(--bm-white);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-lg);
  padding: 40px 40px 36px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* De uitgelichte kaart. Blauwe rand, een zwaardere schaduw en
   een paar pixels omhoog — dat is genoeg om het oog er als
   eerste heen te sturen zonder dat de andere kaart er zielig bij
   staat. Welke kaart dit is bepaalt 'uitgelicht' in
   config/site.php, niet deze stylesheet. */
.bm-card--uit {
  border-color: var(--bm-blue-line);
  box-shadow: 0 2px 4px rgba(11,18,32,.05), 0 18px 44px -20px rgba(27,79,224,.30);
}
/* Marge en geen transform: de scroll-reveal zet aan het eind
   transform op none, en die wint. Een transform hier zou er dus
   bij de eerste keer scrollen weer afvallen — precies het soort
   fout dat je pas ziet als de pagina al live staat. */
@media (min-width: 861px) {
  .bm-card--uit { margin-top: -12px; margin-bottom: 12px; }
}

@media (hover: hover) and (pointer: fine) {
  .bm-card:hover {
    transform: translateY(-2px);
    border-color: #CFD7E6;
    box-shadow: 0 8px 24px -12px rgba(11,18,32,.14);
  }
  .bm-card--uit:hover {
    border-color: #B9CCFF;
    box-shadow: 0 2px 4px rgba(11,18,32,.05), 0 22px 52px -20px rgba(27,79,224,.36);
  }
}

.bm-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  height: 26px; padding: 0 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
.bm-badge--blue  { background: var(--bm-blue-soft);  color: var(--bm-blue); }
.bm-badge--green { background: var(--bm-green-soft); color: var(--bm-green-dark); }
/* De niet-uitgelichte kaart. Rustig grijs: die moet er netjes bij
   staan, niet meedingen. */
.bm-badge--grijs { background: var(--bm-offwhite); color: var(--bm-slate); }

.bm-name {
  margin: 26px 0 0;
  font-size: 24px; font-weight: 600; letter-spacing: -.015em;
  color: var(--bm-navy);
}
.bm-promise {
  margin: 10px 0 0;
  font-size: 15.5px; line-height: 1.55;
  color: var(--bm-slate);
  max-width: 40ch;
}

.bm-price { display: flex; align-items: baseline; gap: 8px; margin-top: 32px; }
.bm-price__amount {
  font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -.035em;
  color: var(--bm-navy);
}
.bm-price__period { font-size: 16px; font-weight: 500; color: var(--bm-muted); }
.bm-price-note    { margin: 14px 0 0; font-size: 14px; color: var(--bm-muted); }

.bm-features-label { margin: 34px 0 0; font-size: 13px; font-weight: 600; color: var(--bm-navy-2); }

.bm-features { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 15px; }
.bm-features--sub { margin-top: 18px; }
.bm-features li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: 15.5px; line-height: 1.45; color: var(--bm-navy-2);
}
.bm-features svg { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.bm-card       .bm-features svg { color: var(--bm-green); }
.bm-card--uit  .bm-features svg { color: var(--bm-blue); }

/* --- het uitklapblok --- */
.bm-details { margin-top: 26px; }
.bm-details__toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 0;
  background: none; border: 0; font: inherit;
  font-size: 14px; font-weight: 500;
  color: var(--bm-blue);
  cursor: pointer;
  transition: color .2s ease;
}
.bm-details__toggle:hover { color: var(--bm-blue-dark); }
.bm-details__toggle:focus-visible { outline: 2px solid var(--bm-blue); outline-offset: 3px; border-radius: 4px; }
.bm-details__toggle svg { width: 14px; height: 14px; transition: transform .3s ease; }
.bm-details__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Open- en dichtklappen zonder een vaste hoogte te hoeven weten:
   de rij groeit van 0fr naar 1fr. */
.bm-details__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.bm-details__panel[data-open="true"] { grid-template-rows: 1fr; }
.bm-details__clip { overflow: hidden; }

.bm-details__box {
  margin-top: 14px;
  padding: 20px 22px;
  background: var(--bm-offwhite);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-md);
}
.bm-details__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.bm-details__list li {
  break-inside: avoid;
  position: relative;
  padding-left: 15px; margin-bottom: 9px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--bm-slate);
}
.bm-details__list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bm-blue-line);
}

/* De knop staat altijd onderaan, dus beide kaarten eindigen op
   dezelfde hoogte ook als de ene langer is. */
.bm-cta-zone { margin-top: auto; padding-top: 36px; }

.bm-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 54px;
  border-radius: var(--bm-r-md);
  font-size: 15.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bm-btn--primary { background: var(--bm-blue); border: 1px solid var(--bm-blue); color: #fff; }
.bm-btn--primary:hover { background: var(--bm-blue-dark); border-color: var(--bm-blue-dark); }
.bm-btn--ghost { background: var(--bm-white); border: 1px solid #D8DEEA; color: var(--bm-navy); }
.bm-btn--ghost:hover { border-color: var(--bm-navy-2); }
.bm-btn:focus-visible { outline: 2px solid var(--bm-blue); outline-offset: 3px; }

.bm-fine { margin: 14px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--bm-muted); }

/* --- de drie geruststellingen --- */
.bm-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 40px; margin-top: 40px;
}
.bm-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--bm-slate); }
.bm-trust svg  { width: 15px; height: 15px; color: var(--bm-green); flex: none; }

/* --- extra vestigingen --- */
.bm-locations {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px 48px;
  align-items: center;
  margin-top: 56px;
  padding: 30px 36px;
  background: var(--bm-offwhite);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-lg);
}
.bm-locations__eyebrow {
  margin: 0 0 9px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bm-muted);
}
.bm-locations__text { margin: 0 0 8px; font-size: 16px; line-height: 1.55; color: var(--bm-navy-2); }
.bm-locations__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bm-muted); }
.bm-locations__prices { display: grid; gap: 10px; }
.bm-locations__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 18px;
  background: var(--bm-white);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-md);
}
.bm-locations__row b    { font-size: 14.5px; font-weight: 600; color: var(--bm-navy); }
.bm-locations__row span { font-size: 14px; font-weight: 500; color: var(--bm-slate); white-space: nowrap; }

@media (max-width: 940px) {
  .bm-grid { grid-template-columns: 1fr; gap: 20px; }
  .bm-card { padding: 32px 28px 30px; }
  .bm-cta-zone { padding-top: 30px; }
  .bm-locations { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; }
}

@media (max-width: 560px) {
  .bm-head { margin-bottom: 44px; text-align: left; }
  .bm-sub { font-size: 16px; }
  .bm-card { padding: 28px 22px 26px; border-radius: 14px; }
  .bm-price__amount { font-size: 44px; }
  .bm-features { gap: 13px; }
  .bm-features li { font-size: 15px; }
  .bm-details__toggle { padding: 12px 0; }
  .bm-details__list { columns: 1; }
  .bm-trust { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
  .bm-locations__row { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-pricing * { transition-duration: .01ms !important; }
}

/* =============================================================
   8. WAAROM BOUWHUIS MEDIA
   ============================================================= */

/* Een rustige onderbreking na de prijskaarten. Geen kaders, geen
   beeld, geen vlakken: alleen tekst met lucht eromheen. Dat is
   hier niet zuinigheid maar het punt — na drie productsecties en
   een prijs moet dit als een merkstatement lezen en niet als nog
   een blok met functies. */
.waarom {
  background: var(--warm);
  padding-block: clamp(4.5rem, 2.4rem + 4vw, 7rem);
}

.waarom__grid {
  display: grid;
  /* De linkerkolom is net breed genoeg voor "Waarom
     restaurants" op één regel. Smaller en de kop valt in vier
     stukken uiteen; dan is de <br> in de tekst zinloos. */
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 4.5vw, 5rem);
  align-items: stretch;
}

/* De kop staat bovenaan en de foto onderaan, met de leegte
   daartussen. Daarvoor moet de kolom net zo hoog worden als de
   lijst ernaast — vandaar align-items: stretch hierboven — en
   duwt margin-top: auto op de foto de rest naar beneden.

   Dit ging eerder niet samen met position: sticky: dat wil juist
   een kolom die korter is dan de lijst, zodat er iets te
   verschuiven valt. Onderaan verankeren wint, want daar staat de
   ondertekening waar hij hoort: aan het eind van het verhaal. */
.waarom__zij { display: flex; flex-direction: column; }

/* Deze kop staat op de gewone --fs-h2 van 54px. Op die maat is
   "voor Bouwhuis kiezen." 543px breed, en daarom is de linker
   kolom hierboven op .88fr gezet: dat geeft ongeveer 580px. Maak
   je de kolom smaller, dan valt de kop in vier stukken uiteen. */
.waarom__zij h2 { margin: 0 0 var(--space-4); }
.waarom__sub {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Alleen als er een echte foto is. Klein gehouden: het is een
   ondertekening onder het verhaal, geen portret aan de muur.

   De naam staat er strak tegenaan en niet los eronder. Twee
   regels dicht op elkaar lezen als één blokje dat bij de foto
   hoort; met lucht ertussen worden het twee losse dingen.

   De breedte staat op de afbeelding en niet op de figure: de
   functietitel is langer dan de foto breed is en mag daar rustig
   onderuit steken. Zet je de maat op de figure, dan breekt
   "Eigenaar Bouwhuis Media" over twee regels. */
.waarom__beeld {
  margin: auto 0 0;              /* auto = naar de onderkant duwen */
  padding-top: var(--space-6);   /* ondergrens als er niets te duwen valt */
  max-width: 280px;
}
.waarom__beeld img {
  width: 148px; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 18px; display: block;
}
.waarom__beeld figcaption {
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.35;
}
.waarom__beeld strong { display: block; color: var(--ink); font-weight: 550; }
.waarom__beeld span   { display: block; color: var(--ink-soft); }

/* --- de drie redenen --- */
/* Rijen met een dun lijntje ertussen, geen kaartjes. Een kader om
   elk punt maakt er drie losse dingen van; een lijn houdt ze bij
   elkaar en laat de tekst het werk doen. */
.redenen { list-style: none; margin: 0; padding: 0; }

.reden {
  padding-block: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem);
  border-top: 1px solid var(--warm-lijn);
}
.reden:first-child { border-top: 0; padding-top: 0; }

.reden__nr {
  display: block;
  margin-bottom: .55rem;
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: .14em;
  color: var(--brand);
}
.reden h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.35rem, 1.1rem + .6vw, 1.6rem);
  font-weight: 650;
  letter-spacing: var(--ls-head);
  line-height: 1.2;
  color: var(--ink);
}
.reden p {
  margin: 0;
  max-width: 550px;
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* =============================================================
   9. MOBIEL — vanaf nul opgebouwd, niet weggedrukt
   ============================================================= */

@media (max-width: 980px) {


  .verhaalblok__grid { grid-template-columns: 1fr; }
  .verhaalblok--om .verhaalblok__tekst,
  .verhaalblok--om .verhaalblok__visual { order: 0; }
  .verhaalblok__tekst h2 { max-width: none; }

  /* Onder elkaar, alles links uitgelijnd, en het vastzetten van
     de linkerkolom eraf — op een telefoon is er niets om langs
     te schuiven. */
  .waarom__grid { grid-template-columns: 1fr; }
  .waarom__zij  { position: static; }
  .reden:first-child { border-top: 1px solid var(--warm-lijn); padding-top: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); }
}

@media (max-width: 720px) {
  /* Hero: kop, zin, knop, beeld. Meer niet. */
  .hero2 { padding-top: var(--space-7); }
  .hero2__acties { flex-direction: column; align-items: stretch; }
  .hero2__acties .btn { width: 100%; }
  .hero2__pills { gap: .5rem var(--space-4); }

  /* De rij blijft ook op de telefoon doorlopen, alleen met
     smallere kaarten. */
  .verhaalkaart { width: 76vw; }


}

/* Wie liever geen beweging ziet, krijgt die ook niet. */
@media (prefers-reduced-motion: reduce) {
  .verhaalkaart, .logos__rij img { transition: none; }
}

/* Het dashboardpaneel toont voorbeeldcijfers. Dat staat er
   zichtbaar bij: liever een eerlijk plaatje dan een
   indrukwekkend plaatje dat bij de eerste inlog tegenvalt. */
.paneelkop__voorbeeld {
  margin-left: auto;
  padding: .12rem .45rem;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- de reis op een smal scherm ------------------------------
   Drie stappen naast elkaar werkt op een telefoon niet: dan
   worden het drie postzegels. Ze staan onder elkaar met dezelfde
   lijn ertussen, alleen verticaal — de volgorde blijft dus
   zichtbaar. */
@media (max-width: 900px) {
  .reis__rij { grid-template-columns: 1fr; }
  .reis__pijl {
    padding-block: .875rem;
    padding-inline: 0;
  }
  .reis__pijl svg { width: 26px; transform: rotate(90deg); }
  .inzichtblok { grid-template-columns: 1fr; }
}