/* ALSA Schoonmaakbedrijf
   Handgeschreven CSS. Onderbouwing van het palet staat in DESIGN.md.

   Uitgangspunt: zo min mogelijk dat het brein moet verwerken. Een warme,
   rustige grond, en daarop de twee kleuren uit het logo van ALSA: blauw voor
   alles wat klikbaar is, groen voor alles wat "gedaan" betekent. Meer
   kleuren zijn meer betekenissen om te onthouden. */

/* ── 1. Tokens ─────────────────────────────────────────────── */

:root {
  /* Grond: warm en laag verzadigd. Verlaagt spanning, leest als rust.
     Geen creme (die is warmer en geler), geen klinisch wit. */
  --zand:  #EFEBE5;   /* het lichte vlak */
  --blauw: #1363A6;   /* het blauwe vlak */
  --ivoor: #FAF9F6;   /* kaarten en velden */

  /* Tekst: warm bijna-zwart. Hoog contrast leest moeiteloos, en wat
     moeiteloos leest wordt onbewust als betrouwbaarder beoordeeld. */
  --inkt:  #16150F;
  --zacht: #56524A;   /* 6,54:1 schoon, 4,63:1 diep in de blauwe voet */

  /* Uit het logo. Het gróén is de actiekleur: alles wat deze kleur heeft is
     klikbaar of afgetekend, en niets anders krijgt hem. Het blauw is de kleur
     van de vlakken zelf — de secties, de wolken, de gloed onder een licht vlak.
     Zo staat de knop altijd op een andere kleur dan waar hij op ligt. */
  --secundair:           #00803D;   /* het actievlak, 4,80:1 met ivoor */
  --secundair-diep:      #00401D;   /* de 3D-onderkant, 11,39:1 met ivoor */
  --secundair-tekst:     #005A29;   /* groen als kleine tekst, 7,09:1 op de grond */
  --secundair-op-blauw:  #C6EDD4;   /* groen accent óp een blauw vlak, 4,90:1 */

  /* Blauw blijft het vlak, en de tweede weg naar binnen in de mobiele balk. */
  --primair:      #166AB2;
  --primair-diep: #10538C;

  --op-blauw-zacht: #E4EDF7;   /* 4,75:1 op de lichtste blauwstop */

  --lijn:   #DBD6CC;
  --lijn-2: #C6C0B4;

  /* De wolk wordt met preserveAspectRatio="none" over de volle breedte
     getrokken. Met een vaste hoogte betekent dat: op een telefoon zijn de
     zeepbellen rond, op een breed scherm worden het platgeslagen ellipsen.
     Daarom loopt de hoogte mee met de breedte, in exact de verhouding van de
     tekening (226/1200 = 18,83%). Dan is een cirkel op elk scherm een cirkel.
     --wolk-zicht is het deel met de bulten dat boven de sectie uitsteekt; de
     resterende 40% is een massieve staart die ín de eigen sectie valt. */
  --wolk-h: clamp(71px, 18.83vw, 240px);
  --wolk-zicht: calc(var(--wolk-h) * 0.6);

  --ring: var(--inkt);

  --blad: 70rem;
  --rand: clamp(1.25rem, 5vw, 2.5rem);
  --takt: 1.5rem;
  --r: 10px;
  --r-s: 6px;

  --t-xs:  0.75rem;
  --t-s:   0.875rem;
  --t-m:   1.0625rem;
  --t-l:   clamp(1.1875rem, 1rem + 0.9vw, 1.5rem);
  --t-xl:  clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  --t-2xl: clamp(2rem, 1.1rem + 4.4vw, 3.5rem);

  --schaduw: 0 1px 2px rgba(23, 21, 15, 0.04), 0 8px 24px -12px rgba(23, 21, 15, 0.12);
}

/* ── 2. Basis ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* De achtergrondkleur staat ook op html, zodat overscroll aan de randen niet
   wit oplicht. overflow-x: clip vangt decoratieve pseudo-elementen op die
   bewust buiten hun kader treden zonder een scrollcontainer te maken. */
/* Eén regel die de hele site dekt. Elke eigen display-regel (.knop is
   inline-flex, .vraagstap is grid) wint anders van de browserregel voor
   [hidden], en dan blijft er iets staan wat het script net heeft weggezet.
   Zonder deze regel stonden Terug, Verder en Versturen alle drie tegelijk
   onder vraag 1. */
[hidden] { display: none !important; }

html { background: var(--zand); overflow-x: clip; }

body {
  margin: 0;
  background: transparent;
  color: var(--inkt);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: var(--t-m);
  line-height: 1.6;
  /* GEEN overflow-x hier. html heeft al overflow-x: clip, en dat is genoeg.
     Zet je het ook op body, dan is body's overflow niet meer visible en wordt
     body zelf een scrollbak. Die propageert niet naar het venster zolang html
     niet visible is (en clip is dat niet), dus body vangt de scroll op terwijl
     hij zelf nauwelijks kan scrollen. Met de muis merk je dat niet omdat het
     wiel doorschiet naar het document; met een vinger wel, en dan staat de
     pagina vast. Gemeten: body.scrollTop liep tot 38px en scrollY bleef 0. */
}

h1, h2, h3 {
  font-variation-settings: 'wdth' 108;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  /* Geen afbreekstreepjes en geen break-word: allebei leverden een kapotte kop
     op ("schoon-maakwerk", "schoonmaakw/erk"). In plaats daarvan is de
     bovengrens van --t-2xl zo gekozen dat "schoonmaakwerk" op elke breedte
     op één regel past. Nagemeten, niet geschat. */
  hyphens: manual;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
.h-klein { font-size: var(--t-l); }

p { margin: 0 0 var(--takt); max-width: 62ch; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; width: 100%; }
figure, blockquote, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:where(input, select, textarea, button) { font: inherit; color: inherit; }
table, .uitkomst, input[type="number"] { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

.vzw { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

.overslaan { position: absolute; left: 0; top: -100%; z-index: 100; padding: 0.75rem 1.25rem; background: var(--inkt); color: var(--zand); text-decoration: none; }
.overslaan:focus { top: 0; }

.blad { max-width: var(--blad); margin-inline: auto; padding-inline: var(--rand); }

/* Ruimte is hier het belangrijkste ontwerpmiddel. Elke sectie is één gedachte,
   en er staat genoeg lucht omheen dat je ziet waar de ene ophoudt en de
   volgende begint. Geen scheidingslijnen: die suggereren dat je iets moet
   vergelijken, en dat hoeft niet. */
.sectie { padding-block: clamp(4.5rem, 11vw, 9rem); }
.sectie--smal { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Onderaan hoort ruimte voor de wolk van de sectie eronder. Die steekt
   --wolk-zicht boven zijn eigen sectie uit, en schuift tijdens het scrollen nog
   eens --lift verder omhoog. Zonder deze marge verdwijnt de laatste inhoud van
   een sectie onder het schuim; dat gebeurde met de vergelijkingstabel. */
.sectie, .sectie--smal {
  padding-bottom: max(
    clamp(3.5rem, 8vw, 6.5rem),
    calc(var(--wolk-zicht) + var(--lift) + 1.25rem));
}
.sectie:not(.sectie--smal) {
  padding-bottom: max(
    clamp(4.5rem, 11vw, 9rem),
    calc(var(--wolk-zicht) + var(--lift) + 1.25rem));
}
/* De hero regelt zijn eigen onderkant al via --hero-voet. */
.sectie--hero { padding-bottom: var(--hero-voet); }

/* Gecentreerde sectie: kop, lead, het citaat en de vijf afspraken staan in het
   midden in plaats van links. */
.sectie--midden > .blad { text-align: center; }
/* margin-inline: auto is hier nodig naast text-align. Een <p> heeft een
   max-width van 62ch en blijft dus links in het vlak staan; de tekst centreert
   dan binnen díe 62ch en niet binnen de sectie. */
.sectie--midden .lead,
.sectie--midden .eilanden__kop,
.sectie--midden .dienstjaren,
.sectie--midden .eilanden { margin-inline: auto; }
.sectie--midden .eilanden li { justify-content: center; }

/* Kop, dan lucht, dan pas de inhoud. */
h2 + .lead { margin-top: 1.25rem; }
.lead { font-size: var(--t-l); line-height: 1.5; max-width: 40ch; color: var(--zacht); margin-bottom: 0; }
.fijn { font-size: var(--t-s); color: var(--zacht); }


/* ── 2b. De blauwe voet onder een licht vlak ───────────────────
   Elk licht vlak loopt onderin blauw aan en vervaagt naar boven. Dat trekt het
   oog naar de knop of de wolk die daar staat, en het maakt de sprong naar een
   blauwe sectie kleiner.

   Belangrijk: dit is een achtergrond ván de sectie zelf, geen losse laag over
   de pagina. De vorige opzet was een vaste (viewport-gebonden) gloed achter
   transparante secties; de wolk is een dichte vulling en kreeg die tint dus
   niet mee. Daardoor liep er een zichtbare naad langs de onderrand van elke
   witte wolk, die tijdens het scrollen mee op en neer golfde. Nu heeft elk
   licht vlak een eigen dekkende kleur, en die is bovenaan — waar de wolk zit —
   exact --zand. Een naad kan daar niet meer ontstaan.

   De dekking is zo diep gezet als de leesbaarheid toelaat: op het donkerste
   punt onderin wordt de grond rgb(186, 202, 214). Daar haalt --zacht 4,63:1 en
   het groen 4,71:1. Om zo diep te kunnen gaan zijn --zacht en --secundair-tekst
   allebei een stap donkerder gezet; op een schone grond leest dat ook rustiger.
   Verder opendraaien kan niet zonder onder 4,5:1 te zakken. */

:root {
  --voetgloed: linear-gradient(
    to top,
    rgba(19, 99, 166, 0.24) 0%,
    rgba(19, 99, 166, 0.205) 11%,
    rgba(19, 99, 166, 0.145) 26%,
    rgba(19, 99, 166, 0.082) 43%,
    rgba(19, 99, 166, 0.032) 62%,
    rgba(19, 99, 166, 0) 82%);
}


/* ── 2c. Wolkovergangen ────────────────────────────────────────
   Elke sectie met een eigen achtergrondkleur krijgt bovenaan een wolkrand in
   diezelfde kleur, die in de sectie erboven bult. Zo lopen de kleurvlakken in
   elkaar over in plaats van hard af te snijden. */

.sectie, .band, .voet { position: relative; }

.wolk {
  position: absolute; left: 0; top: 0;
  width: 100%; height: var(--wolk-h);
  /* De onderste 40% van de wolk is massieve kleur die ín de eigen sectie
     valt. Daardoor landt elk compositie-naadje tussen de wolklaag en de
     sectielaag op dezelfde kleur en is het onzichtbaar. In procenten, zodat
     het op elke schermbreedte klopt. */
  transform: translateY(-60%);
  display: block; pointer-events: none;
  filter: drop-shadow(0 -5px 12px rgba(22, 21, 15, 0.16));
  /* De schaduw mag alleen bóven de wolk vallen, en hij moet ruim vóór de
     onderrand ophouden. Dit was de oorzaak van de brekende witte wolken: de
     onderste beeldpuntrij van een geschaalde SVG is maar gedeeltelijk gedekt,
     en door dat restje schemerde de donkere schaduw erachter heen. Dat gaf een
     haarlijn over de volle breedte, precies op de wolkrand. Door 14px eerder af
     te knippen zit er niets donkers meer achter die rand; wat je daar ziet is
     wolkkleur op sectiekleur, en die zijn gelijk. clip-path werkt ná het
     filter, dus dit knipt de schaduw echt weg. */
  clip-path: inset(-60px -24px 14px -24px);
}
.wolk use, .wolk use path, .wolk use circle { fill: currentColor; }
/* De losgeraakte druppels. Half doorzichtig, zodat ze boven de bellen zweven
   in plaats van eraan vast te zitten. Waar ze de wolk zelf overlappen valt dat
   niet op: het is dezelfde kleur. */
.wolk .wolk__druppels { opacity: 0.5; }
.wolk--zand  { color: var(--zand); }
.wolk--blauw { color: var(--blauw); }

/* Elk licht vlak is nu een eigen dekkende grond, niet meer een doorkijkje naar
   de pagina-achtergrond. Zo staat de wolk op precies dezelfde kleur als de
   sectie eronder. De hero valt hier ook onder. */
.sectie:not(.sectie--blauw), .voet {
  background-color: var(--zand);
  background-image: var(--voetgloed);
  background-repeat: no-repeat;
  background-position: bottom center;
  /* De gloed krijgt de sectie minus een wolkhoogte. Zo is de bovenste strook,
     precies waar de wolk ligt, gegarandeerd vlak --zand — ongeacht hoe hoog de
     sectie is. Daarmee is een kleurverschil op de wolkrand uitgesloten in
     plaats van onwaarschijnlijk. */
  background-size: 100% calc(100% - var(--wolk-h));
}

/* Secties met een eigen grond */



/* ── 2d. In beeld komen ────────────────────────────────────────
   De attributen worden door JS gezet, niet in de HTML. Zonder JS staat er dus
   nooit iets onzichtbaar op de pagina. */

[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1), transform .7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--vertraging, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }


/* ── 2e. Secties schuiven over elkaar heen ─────────────────────
   Elke sectie overlapt de vorige al via een negatieve marge, en staat in rust
   met een transform precies weer op zijn plek. Tijdens het scrollen loopt die
   transform naar nul en schuift de sectie — met zijn wolkrand — over de vorige
   heen. Omdat de overlap in de layout zit, valt er nooit een gat tussen twee
   kleurvlakken. */

/* De lift staat in vaste stappen en niet in vw. JS zet de tegenbeweging op
   hele pixels; bij een lift van bijvoorbeeld 55,8px wordt dat 56, en dan staat
   de sectie 0,2px te laag en zie je een haarlijn tussen twee kleurvlakken.
   Hele getallen in, hele getallen uit. */
:root { --lift: 38px; }
@media (min-width: 600px)  { :root { --lift: 54px; } }
@media (min-width: 900px)  { :root { --lift: 66px; } }
@media (min-width: 1200px) { :root { --lift: 74px; } }

@media (prefers-reduced-motion: no-preference) {
  .schuif {
    margin-top: calc(var(--lift) * -1);
    transform: translateY(var(--verschuif, var(--lift)));
    will-change: transform;
  }
}

/* ── 3. Statusbalk en merk ─────────────────────────────────── */

/* Drie blokken: merk links, menu in het midden, en rechts de twee kortste
   wegen naar binnen. Op mobiel schuift de balk weg als je naar beneden leest en
   komt hij terug zodra je omhoog gaat; zie [data-verstopt]. */
.statusbalk {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--zand) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.statusbalk__binnen { max-width: var(--blad); margin-inline: auto; padding: 0.6rem var(--rand); display: flex; align-items: center; justify-content: space-between; gap: clamp(0.5rem, 2vw, 1.5rem); }
.statusbalk__rechts { margin: 0; display: flex; align-items: center; gap: clamp(0.4rem, 1.2vw, 0.9rem); font-size: var(--t-s); color: var(--zacht); }

/* Het ronde icoon. Zelfde maat als in het voorbeeld, met een telefoon erin. */
.rondje {
  display: grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--ivoor); border: 1px solid var(--lijn);
  color: var(--secundair-tekst);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.rondje:hover { border-color: var(--secundair); background: color-mix(in srgb, var(--secundair) 10%, var(--ivoor)); }
.rondje svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.statusbalk__cta { padding: 0.6rem 1.15rem; font-size: var(--t-xs); }

/* Het merkteken van ALSA: de druppels uit hun eigen logo, met de witte
   JPG-achtergrond eruit gesneden zodat hij op het zand staat en niet in een
   wit vlak. De naam ernaast is gezet, want de tekst in het logo is op deze
   hoogte niet te lezen. */
.merk { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.merk__logo { height: 40px; width: auto; flex: none; }
.merk__naam { font-variation-settings: 'wdth' 108; font-weight: 700; letter-spacing: 0.02em; line-height: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.merk__naam span { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht); }

.stip { display: inline-flex; align-items: center; gap: 0.45rem; }
.stip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lijn-2); flex: none; }
.stip[data-status="open"]::before { background: var(--secundair); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secundair) 20%, transparent); }
.tel { color: var(--inkt); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }


/* ── 3b. Het wolkmenu ──────────────────────────────────────────
   Op een breed scherm staan de links in een wolkje in de balk. Wordt het te
   smal, dan wordt datzelfde wolkje een uitklapper achter één knop. Eén stuk
   markup voor allebei; alleen de vorm verschilt. */

.wolkmenu { position: relative; }

/* De knop bestaat alleen op smalle schermen. */
.wolkmenu__knop { display: none; }

.wolkmenu__paneel { position: relative; }

.wolkmenu__lijst {
  display: flex; align-items: center; gap: 0.15rem;
  padding: 0.25rem 0.45rem;
}
.wolkmenu__lijst a {
  display: block; padding: 0.45rem 0.8rem; border-radius: 999px;
  /* Eén regel per link. Breekt er één af, dan wordt het wolkje twee regels hoog
     en groeit de balk mee. */
  white-space: nowrap;
  font-size: var(--t-s); font-weight: 600; color: var(--inkt);
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.wolkmenu__lijst a:hover { background: color-mix(in srgb, var(--secundair) 12%, transparent); color: var(--secundair-tekst); }

/* Het paneel is een gewoon vlak: een pil in de balk, een afgerond paneel in de
   uitklapper. */
.wolkmenu__paneel { background: var(--ivoor); border: 1px solid var(--lijn); border-radius: 999px; box-shadow: var(--schaduw); }

@media (max-width: 1000px) {
  .wolkmenu__knop {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.9rem 0.5rem 0.75rem;
    background: var(--ivoor); color: var(--inkt);
    border: 1px solid var(--lijn); border-radius: 999px;
    box-shadow: var(--schaduw); cursor: pointer;
    font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs);
    letter-spacing: 0.09em; text-transform: uppercase;
  }
  .wolkmenu__streepjes { position: relative; width: 15px; height: 2px; background: currentColor; border-radius: 2px; flex: none; transition: background-color 160ms ease-out; }
  .wolkmenu__streepjes::before,
  .wolkmenu__streepjes::after { content: ''; position: absolute; left: 0; width: 15px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
  .wolkmenu__streepjes::before { top: -5px; }
  .wolkmenu__streepjes::after  { top: 5px; }
  /* Open: de drie streepjes worden een kruis. */
  [aria-expanded="true"] .wolkmenu__streepjes { background: transparent; }
  [aria-expanded="true"] .wolkmenu__streepjes::before { transform: translateY(5px) rotate(45deg); }
  [aria-expanded="true"] .wolkmenu__streepjes::after  { transform: translateY(-5px) rotate(-45deg); }

  /* Het paneel hangt aan de balk, niet aan de knop. De knop staat midden in de
     balk; met right:0 daarop schuift het paneel links het scherm uit. */
  .statusbalk__binnen { position: relative; }
  .wolkmenu { position: static; }

  .wolkmenu__paneel {
    position: absolute; top: calc(100% + 0.9rem); right: var(--rand); left: auto; z-index: 60;
    min-width: 15rem; max-width: calc(100vw - var(--rand) * 2);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97);
    transform-origin: 85% 0;
    transition: opacity 200ms ease-out, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
  }
  .wolkmenu__paneel[data-open] {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    transition: opacity 200ms ease-out, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  .wolkmenu__paneel { border-radius: 18px; }
  .wolkmenu__lijst {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem;
  }
  .wolkmenu__lijst a { padding: 0.7rem 0.9rem; border-radius: 12px; font-size: var(--t-m); }
}

@media (max-width: 1000px) {
  /* Op een telefoon is 57px kopbalk veel van een klein scherm. Hij schuift weg
     zodra je naar beneden leest en komt terug zodra je omhoog gaat: dan wil je
     er meestal ook heen. Op desktop blijft hij gewoon staan. */
  .statusbalk[data-verstopt] { transform: translateY(-100%); }
  /* Twee gevulde knoppen naast elkaar in een balk van 57px is te veel. De
     hamburger is hier de weg naar binnen. Twee klassen in de selector, want
     .knop zet zelf ook display en staat verderop in dit bestand. */
  .statusbalk .statusbalk__cta { display: none; }
  .statusbalk .stip { display: none; }
}

@media (max-width: 620px) {
  /* Naast logo en het ronde icoon past het woord "Menu" er niet meer bij. */
  .wolkmenu__woord { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .wolkmenu__knop { padding: 0.55rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wolkmenu__paneel, .wolkmenu__streepjes::before, .wolkmenu__streepjes::after { transition: none; }
}

/* ── 4. Knoppen — alleen deze kleur is klikbaar ────────────── */

.knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.knoppen--klein { margin-top: 0.75rem; }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: var(--t-s); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}
.knop:active { transform: translateY(1px); }
.knop--primair { background: var(--secundair); color: var(--ivoor); }
.knop--primair:hover { background: var(--secundair-tekst); }
.knop--stil { background: transparent; color: var(--inkt); border-color: var(--lijn-2); }
.knop--stil:hover { border-color: var(--inkt); }

/* WhatsApp is de weg waarop je meteen antwoord krijgt, en dat is precies wat
   het groen hier betekent. In het vlak blijft hij stil — een rand en een letter,
   geen tweede volle knop naast de blauwe. Pas bij aanwijzen loopt hij vol.
   6,10:1 in rust, 4,80:1 gevuld. */
.knop--wa { background: transparent; color: var(--secundair-tekst); border-color: color-mix(in srgb, var(--secundair) 45%, transparent); }
.knop--wa:hover { background: var(--secundair); color: var(--ivoor); border-color: var(--secundair); }
.knop--mini { padding: 0.5rem 0.9rem; font-size: var(--t-xs); }
.knop[disabled] { opacity: 0.35; pointer-events: none; }

/* De duwknop. Een gekleurde onderrand plus een harde schaduw recht eronder
   vormen samen de zijkant; bij indrukken zakt het vlak die zijkant in. De vorm
   blijft de pil van de rest van de site, anders krijg je twee knoptalen op één
   pagina.

   Alleen op de knoppen die er echt toe doen: de stap naar de configurator, het
   versturen van een aanvraag, en de drie in de mobiele balk. Als alles verhoogd
   ligt, ligt niets verhoogd. */
.knop--duw {
  --duw-vlak:  var(--secundair);
  --duw-hover: var(--secundair-tekst);
  --duw-rand:  var(--secundair-tekst);
  --duw-diep:  var(--secundair-diep);
  --duw-ring:  rgba(0, 128, 61, 0.38);

  background: var(--duw-vlak); color: var(--ivoor);
  border: 0; border-bottom: 3px solid var(--duw-rand);
  box-shadow: 0 5px 0 0 var(--duw-diep);
  transition: transform 100ms ease, box-shadow 100ms ease, background-color 150ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.knop--duw:hover  { background: var(--duw-hover); transform: translateY(-1px); box-shadow: 0 7px 0 0 var(--duw-diep); }
.knop--duw:active { transform: translateY(4px); box-shadow: 0 1px 0 0 var(--duw-diep); }
.knop--duw:focus-visible { outline: none; box-shadow: 0 5px 0 0 var(--duw-diep), 0 0 0 4px var(--duw-ring); }

/* Blauw is de uitzondering, niet de regel. Alleen in de mobiele balk, waar drie
   knoppen naast elkaar staan en kleur het onderscheid moet dragen. */
.knop--duw-blauw {
  --duw-vlak:  var(--primair);
  --duw-hover: var(--primair-diep);
  --duw-rand:  var(--primair-diep);
  --duw-diep:  #0C3F6B;
  --duw-ring:  rgba(22, 106, 178, 0.38);
}

/* De schaduw telt niet mee voor de plaatsing, dus onder een duwknop hoort
   handmatig ruimte, anders raakt hij wat eronder staat. */
.knoppen:has(.knop--duw) { padding-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .knop--duw, .knop--duw:hover, .knop--duw:active { transform: none; transition: background-color 150ms ease-out; }
}

/* ── 5. Hero ───────────────────────────────────────────────── */

/* De hero vult één scherm, met de strook onderaan vastgezet. Zo zie je de
   pandtypes zonder te scrollen. Past de inhoud niet, dan groeit de sectie
   gewoon door: liever te hoog dan afgesneden tekst. */
.sectie--hero {
  /* De statusbalk staat in de flow boven de hero, dus die hoort van de
     schermhoogte af. Anders begint de strook precies op de vouw. */
  min-height: calc(100svh - var(--balk, 3.6rem));
  display: grid;
  /* Expliciete kolom: zonder dit bepaalt het breedste kind de breedte, en dat
     is het marquee-spoor (max-content, ruim 1700px). Dan loopt de hele hero
     buiten beeld. */
  grid-template-columns: minmax(0, 1fr);
  /* minmax(0, …) en niet 1fr: anders kan de rij niet onder zijn inhoud
     krimpen en groeit de hero alsnog voorbij het scherm. */
  grid-template-rows: minmax(0, 1fr) auto;
  /* Ruimte onderaan voor de wolk van de volgende sectie plus zijn verschuiving.
     Zonder dit schuift die wolk over de marquee heen. De sectie blijft even
     hoog; de marquee komt alleen wat omhoog. */
  --hero-voet: calc(var(--wolk-zicht) + 34px);
  padding-block: clamp(1.75rem, 4vw, 4rem) var(--hero-voet);
}
.sectie--hero > .blad { align-self: center; }
.sectie--hero .strook { margin-top: clamp(1.5rem, 4vw, 3rem); }
/* Twee kolommen: het verhaal links, de illustratie rechts. Er staan nog maar
   vier dingen in de linkerkolom — pil, kop, twee zinnen, twee knoppen — en de
   ruimte ertussen loopt op naar beneden toe. Zo leest het als één beweging van
   boven naar onder in plaats van als een lijstje blokken. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__beeld img { width: 100%; height: auto; }
.hero__sub { font-size: var(--t-l); line-height: 1.45; max-width: 32ch; margin-top: clamp(1.25rem, 2.2vw, 1.75rem); color: var(--zacht); }
.hero__sub strong { display: block; font-weight: 600; margin-top: 0.75rem; color: var(--inkt); }
.sectie--hero .knoppen { margin-top: clamp(1.75rem, 3.2vw, 2.5rem); }

/* ── 5b. De strook onder de hero ───────────────────────────────
   Zeven pandtypes die voorbijschuiven. Geen klantlogo's: die komen er pas als
   ALSA namen én toestemming aanlevert. Zie README. */

/* Geen eigen vlak meer: de strook loopt door op de paginagrond. */
.strook { position: relative; margin-top: clamp(2.5rem, 6vw, 4rem); }
.strook__venster {
  overflow: hidden;
  /* Goot rechts, zodat de tekst niet onder de pauzeknop door schuift. */
  margin-right: 3rem;
  /* Uitvloeien aan beide randen, zodat de lus geen zichtbaar begin heeft. */
  --masker: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: var(--masker); mask-image: var(--masker);
}
.strook__spoor { display: flex; width: max-content; animation: schuif 46s linear infinite; }
.strook:hover .strook__spoor,
.strook:focus-within .strook__spoor,
.strook[data-pauze="ja"] .strook__spoor { animation-play-state: paused; }
@keyframes schuif { to { transform: translateX(-50%); } }

.strook__reeks { display: flex; align-items: center; }
.strook__reeks li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.1rem clamp(1.25rem, 3vw, 2.25rem);
  white-space: nowrap;
}
.strook__naam { font-variation-settings: 'wdth' 96; font-weight: 600; font-size: var(--t-s); color: var(--inkt); }
.strook__branche {
  font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--zacht);
  padding-left: 0.6rem; margin-left: 0.6rem; border-left: 1px solid var(--lijn);
}
.strook__merk { width: 1.15rem; flex: none; fill: none; stroke: var(--secundair); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Op een breed scherm mag de strook groter. Hij loopt over de volle breedte en
   staat op 14px te verloren onder een kop van 56px; de pandtypes zijn het
   eerste bewijs dat iemand ziet. */
@media (min-width: 900px) {
  .strook__reeks li { padding-block: 1.35rem; gap: 0.9rem; }
  .strook__naam { font-size: var(--t-m); }
  .strook__branche { font-size: var(--t-s); letter-spacing: 0.08em; padding-left: 0.8rem; margin-left: 0.8rem; }
  .strook__merk { width: 1.45rem; }
  .strook__pauze { width: 2.2rem; height: 2.2rem; }
}

.strook__pauze {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 1.85rem; height: 1.85rem; padding: 0;
  display: grid; place-items: center;
  background: var(--ivoor); color: var(--zacht);
  border: 1px solid var(--lijn-2); border-radius: 50%; cursor: pointer;
  transition: color 140ms ease-out, border-color 140ms ease-out;
}
.strook__pauze:hover { color: var(--inkt); border-color: var(--inkt); }
.strook__pauze-icoon { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.strook__pauze[aria-pressed="true"] .strook__pauze-icoon {
  width: 0; height: 0; border: 0;
  border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}


/* ── 5a. Hero-onderdelen naar het voorbeeld ────────────────────
   Overgenomen: het pilletje boven de kop, één gekleurd woord in de H1, en een
   zachte gloed achter het beeld. Niet overgenomen: het sterrenpilletje met
   gezichtjes, want dat cijfer bestaat hier niet. */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1.1rem; padding: 0.45rem 0.95rem;
  border: 1px solid var(--lijn-2); border-radius: 999px;
  background: color-mix(in srgb, var(--ivoor) 70%, transparent);
  font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--zacht);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--secundair); flex: none;
}

/* Eén woordgroep in de actiekleur. Binnen een kop van 56px leest dat als
   nadruk, niet als knop: de knoppen staan er vlak onder en zijn onmiskenbaar. */
/* Eén woordgroep in de actiekleur. 4,26:1 op de grond — ruim boven de 3:1
   die voor tekst van deze grootte geldt. */
.h1__accent { color: var(--secundair); }

/* .staat is vervallen: die regel herhaalde letterlijk de kop van de
   gids-sectie ("Ruim twaalf jaar in Rotterdam") en zette een tweede logo in
   beeld terwijl het eerste al linksboven staat. */

/* De gloed achter de controlekaart, zoals de wolk achter het beeld in het
   voorbeeld. Puur decoratief, dus achter de kaart en zonder eigen inhoud. */
/* ── 6. De controlekaart ───────────────────────────────────── */

.kaart { background: var(--ivoor); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.1rem; box-shadow: var(--schaduw); }
.kaart__kop { display: flex; justify-content: space-between; gap: 1rem; font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht); padding-bottom: 0.75rem; border-bottom: 1px solid var(--lijn); }
.kaart__pand { color: var(--inkt); }
.kaart__voet { font-size: var(--t-s); color: var(--zacht); margin: 0.85rem 0 0; }
.kaart__voet strong { color: var(--inkt); }

.kaart--beloftes { margin-top: var(--takt); }
.beloftes li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; padding: 0.8rem 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-s); }
.beloftes li:last-child { border-bottom: 0; }

/* ── 9b. De vijf beloftes als eilandjes ────────────────────────
   Vijf afspraken, elk op een eigen briefje, recht onder elkaar. Losse kaartjes
   in plaats van één lijst met haarlijnen: dan is elke afspraak een ding op
   zichzelf. Geen kanteling en geen verspringing — die maakten het onrustig
   zonder er iets voor terug te geven. */

.eilanden__kop {
  font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht);
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 clamp(0.9rem, 2.2vw, 1.35rem);
}
.sectie--blauw .eilanden__kop { color: var(--op-blauw-zacht); }

.eilanden {
  display: flex; flex-direction: column;
  gap: 0.6rem;
  max-width: 42rem;
}

.eilanden li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 1rem 1.3rem;
  background: var(--ivoor);
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  box-shadow: var(--schaduw);
  font-size: var(--t-s);
  line-height: 1.45;
  /* .sectie--blauw zet color: ivoor op alles eronder; een briefje is een licht
     vlak, dus daar hoort de tekst weer inkt te zijn. */
  color: var(--inkt);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease-out;
}
.eilanden li:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(23, 21, 15, 0.05), 0 14px 30px -14px rgba(23, 21, 15, 0.2);
}
.eilanden .vink { margin-top: 0.2rem; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .eilanden li, .eilanden li:hover { transform: none; transition: none; }
}

.vink { width: 1.35rem; margin-top: 0.2rem; fill: none; stroke: var(--secundair); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 6b. Tekst naast beeld ─────────────────────────────────────
   Eén patroon voor elke sectie waar een illustratie naast de tekst staat. */

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.duo--omgekeerd { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.duo__beeld img { width: 100%; height: auto; }

/* ── 7. De schurk ──────────────────────────────────────────── */

.intern { font-size: var(--t-l); line-height: 1.45; font-variation-settings: 'wdth' 104; max-width: 36ch; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--lijn); }

/* ── 8. De configurator ────────────────────────────────────── */

.config { margin-top: clamp(2.25rem, 5vw, 3.5rem); background: var(--ivoor); border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: var(--schaduw); overflow: hidden; }
.config__kop { padding: 1.4rem clamp(1.75rem, 4vw, 3rem) 0; }
.config__tel { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht); margin: 0 0 0.6rem; }
.config__balk { height: 3px; background: var(--lijn); border-radius: 2px; overflow: hidden; }
.config__balk span { display: block; height: 100%; background: var(--primair); border-radius: 2px; transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 320ms ease-out; }
/* Vol is groen. Dezelfde afspraak als de vinkjes: groen betekent klaar. */
.config__balk span[data-vol] { background: var(--secundair); }

.config__vensters { padding: clamp(1.75rem, 4vw, 3rem); }
.venster__vraag { font-size: var(--t-xl); margin-bottom: 0.5rem; }
.venster__hint { font-size: var(--t-s); color: var(--zacht); margin-bottom: var(--takt); }
.venster[hidden] { display: none; }

/* Grote keuzeknoppen: één tik, geen nadenken. */
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.keuze {
  padding: 1.1rem 1rem; text-align: left;
  background: var(--zand); border: 1px solid var(--lijn-2); border-radius: var(--r-s);
  font-weight: 600; font-size: var(--t-s); cursor: pointer;
  transition: border-color 140ms ease-out, background-color 140ms ease-out, transform 120ms ease-out;
}
.keuze:hover { border-color: var(--secundair); transform: translateY(-1px); }
.keuze[aria-pressed="true"] { background: var(--secundair); border-color: var(--secundair); color: var(--ivoor); }

.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.schakel { display: flex; align-items: center; gap: 0.65rem; margin-top: 1.25rem; font-size: var(--t-s); cursor: pointer; }
.schakel input { width: 1.15rem; height: 1.15rem; accent-color: var(--secundair); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  background: var(--zand); border: 1px solid var(--lijn-2); border-radius: 100px;
  font-size: var(--t-s); font-weight: 600; cursor: pointer;
  transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}
.chip:hover { border-color: var(--secundair); }
.chip[aria-pressed="true"] { background: var(--secundair); border-color: var(--secundair); color: var(--ivoor); }
.chip__hoe { font-variation-settings: 'wdth' 78; font-size: var(--t-xs); letter-spacing: 0.06em; opacity: 0.75; }

.uitkomst { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 2.75rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.uitkomst__cijfer { padding: 1.25rem; background: var(--zand); border-radius: var(--r-s); }
.uitkomst__uren { font-variation-settings: 'wdth' 108; font-weight: 600; font-size: var(--t-xl); line-height: 1.1; margin: 0; }
.uitkomst__prijs { font-size: var(--t-s); margin: 0.5rem 0 0.75rem; }
.uitkomst__cijfer .fijn { margin: 0; }
.uitkomst__blad { min-width: 0; }
.blad-uit__titel { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht); margin: 0 0 0.5rem; }

.programma { font-size: var(--t-s); }
.programma th, .programma td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.programma thead th { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--zacht); }
.programma tbody th { font-weight: 600; }
.leeg { color: var(--zacht); font-size: var(--t-s); margin: 0; }

.postcode { margin-top: clamp(1.75rem, 4vw, 2.5rem); padding-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--lijn); }
.postcode .veld { max-width: 22rem; }
.postcode__uit { margin: 0.75rem 0 0; font-size: var(--t-s); font-weight: 600; }
.postcode__uit[data-soort="leeg"] { color: var(--zacht); font-weight: 400; }
.postcode__uit[data-soort="ja"] { color: var(--secundair-tekst); }

.config__voet { display: flex; justify-content: space-between; gap: 0.75rem; padding: 1.25rem clamp(1.75rem, 4vw, 3rem); border-top: 1px solid var(--lijn); background: var(--zand); }
.config__voet .knop { flex: 0 0 auto; }
.config__voet [data-config="terug"][hidden] { display: none; }
.config__voet::before { content: ''; flex: 1; order: 1; }
.config__voet [data-config="terug"] { order: 0; }
.config__voet [data-config="verder"] { order: 2; }

/* ── 9. Velden ─────────────────────────────────────────────── */

.veld { display: grid; gap: 0.4rem; }
.veld label, .veld legend { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--zacht); }
.optioneel { text-transform: none; letter-spacing: 0; font-variation-settings: 'wdth' 100; font-weight: 400; }
.veld input, .veld select, .veld textarea {
  width: 100%; padding: 0.7rem 0.8rem;
  background: var(--ivoor); border: 1px solid var(--lijn-2); border-radius: var(--r-s);
  transition: border-color 140ms ease-out;
}
.veld input:hover, .veld textarea:hover { border-color: var(--zacht); }
.veld textarea { resize: vertical; }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] { border-color: var(--inkt); border-width: 2px; }

/* Goedgekeurd. De rand kleurt en er komt een paraaf in het veld te staan; niet
   als losse melding, want een goed ingevuld veld hoeft geen zin uitleg. */
.veld input[data-goed], .veld textarea[data-goed] {
  border-color: color-mix(in srgb, var(--secundair) 55%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='%2300803D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.4c2.1 0 3-3.6 4.6-3.6 2.6 0 2.4 7.2 4.6 7.2 2.4 0 3-9.4 5.2-9.4 1.6 0 1.9 4.6 3.6 4.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.15rem auto;
  padding-right: 2.5rem;
}
.veld--breed { grid-column: 1 / -1; }
.fout:empty { display: none; }
.fout { font-size: var(--t-s); color: var(--inkt); font-weight: 600; margin: 0; }
.fout::before { content: '→ '; }

/* ── 10. Gids en plan ──────────────────────────────────────── */

.dienstjaren { margin: clamp(2rem, 4vw, 3rem) 0; padding: 1.4rem; border-radius: var(--r); background: var(--ivoor); max-width: 34rem; box-shadow: 0 1px 0 var(--lijn-2), 0 10px 26px -18px rgba(22,21,15,.35); }
.dienstjaren p { font-size: var(--t-l); line-height: 1.35; margin: 0; font-variation-settings: 'wdth' 104; }
.dienstjaren footer { font-size: var(--t-xs); color: var(--zacht); margin-top: 0.75rem; }

/* ── 10b. Het scroll-verhaal door de drie stappen ──────────────
   De lijn tekent zichzelf met het scrollen mee, een puntje reist eroverheen en
   elke stap licht op zodra je hem bereikt. Landt op het blauwe vlak, dus alles
   is licht: blauw op blauw zou wegvallen. */

.flow-track {
  --flow-accent: var(--ivoor);
  --flow-accent-glow: rgba(250, 249, 246, 0.45);
  --flow-text: var(--ivoor);
  --flow-text-dim: var(--op-blauw-zacht);
  position: relative; z-index: 1; overflow: hidden;
}
.flow-scroll-inner { position: relative; width: 100%; height: 100%; }
#flowTrailSvg { position: absolute; inset: 0; display: block; pointer-events: none; }
#flowTrailPath { fill: none; stroke: var(--flow-accent); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
#flowMovingDot { fill: var(--flow-accent); filter: drop-shadow(0 2px 8px var(--flow-accent-glow)); }

.flow-big-dot {
  position: absolute; width: 42px; height: 42px; transform: translate(-50%, -50%);
  background: var(--flow-accent); border-radius: 999px; pointer-events: none;
  transition: box-shadow .5s ease-out;
}
.flow-big-dot.active {
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--flow-accent) 22%, transparent),
              0 0 0 22px color-mix(in srgb, var(--flow-accent) 10%, transparent);
}
/* Voorbij = gedaan, en dat is groen. Het lichtgroen is gekozen om op het blauwe
   vlak te blijven lezen; het donkere logogroen valt daar weg. */
.flow-big-dot.gedaan { background: var(--secundair-op-blauw); }

.flow-stappen { position: static; }
.flow-dot-text {
  position: absolute; max-width: 17rem; opacity: 0;
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform; pointer-events: none;
}
.flow-dot-text.left-anchor  { transform: translateY(-50%) translateY(12px); }
.flow-dot-text.right-anchor { transform: translate(-100%, -50%) translateY(12px); }
.flow-dot-text.center-below { transform: translateX(-50%) translateY(12px); text-align: center; }
.flow-dot-text.center-above { transform: translate(-50%, -100%) translateY(-12px); text-align: center; }
.flow-dot-text.show.left-anchor  { opacity: 1; transform: translateY(-50%) translateY(0); }
.flow-dot-text.show.right-anchor { opacity: 1; transform: translate(-100%, -50%) translateY(0); }
.flow-dot-text.show.center-below { opacity: 1; transform: translateX(-50%) translateY(0); }
.flow-dot-text.show.center-above { opacity: 1; transform: translate(-50%, -100%) translateY(0); }

.flow-dot-num {
  display: inline-block; font-variation-settings: 'wdth' 78; font-weight: 600;
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--flow-text-dim); margin: 0 0 0.4rem;
}
.flow-dot-title {
  font-variation-settings: 'wdth' 108; font-weight: 600; letter-spacing: -0.02em;
  font-size: var(--t-l); line-height: 1.15; color: var(--flow-text); margin: 0 0 0.4rem;
}
.flow-dot-desc { font-size: var(--t-s); color: var(--flow-text-dim); line-height: 1.5; margin: 0; }

.flow-cta {
  position: absolute; z-index: 2; text-align: center;
  opacity: 0; transform: translateX(-50%) translateY(16px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.flow-cta.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.flow-cta .knop--primair { background: var(--ivoor); color: var(--blauw); }
.flow-cta .knop--primair:hover { background: #FFFFFF; }

@media (max-width: 768px) {
  .flow-big-dot { width: 30px; height: 30px; }
  .flow-dot-text { max-width: 12.5rem; }
  #flowTrailPath { stroke-width: 9; }
}

/* ── 10c. Gewone stappenlijst ──────────────────────────────────
   Alleen op bedankt.html: daar is geen scroll-verhaal, gewoon drie regels. */

.stappen { display: grid; margin-top: clamp(2rem, 4vw, 3rem); }
.stappen li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); align-items: start; }
.stappen li:last-child { border-bottom: 0; }
.stappen__nr {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--secundair); color: var(--ivoor);
  font-variation-settings: 'wdth' 108; font-weight: 700; font-size: var(--t-s);
}
.stappen h2 { font-size: var(--t-l); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.stappen__duur { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--zacht); }
/* De tekst hoort naast het nummer, niet eronder in de smalle kolom. */
.stappen li h2, .stappen li p { grid-column: 2; }
.stappen p { margin: 0.35rem 0 0; color: var(--zacht); font-size: var(--t-s); }

/* ── 11. Falen-band ────────────────────────────────────────── */


/* ── 12. Succes ────────────────────────────────────────────── */

.vannaar { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.vannaar td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-s); }
.vannaar td:first-child { color: var(--zacht); }
.vannaar td:last-child { font-weight: 600; }

/* ── 13. Bewijs ────────────────────────────────────────────── */

/* Slepen mag geen tekstselectie worden: dan kleurt de helft blauw op. */
.vergelijker { -webkit-user-select: none; user-select: none; position: relative; overflow: hidden; border: 1px solid var(--lijn); border-radius: var(--r); touch-action: none; cursor: ew-resize; background: var(--lijn); aspect-ratio: 3 / 2; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.vergelijker__img { width: 100%; height: 100%; object-fit: cover; }
/* clip-path in plaats van een tweede container: minder markup, en de foto
   hoeft niet mee te schalen met een container query. */
.vergelijker__na { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--scheiding)) 0 0); }
.vergelijker__na .vergelijker__img { width: 100%; height: 100%; object-fit: cover; }

.vergelijker__greep {
  position: absolute; top: 0; bottom: 0; left: var(--scheiding);
  width: 3px; margin-left: -1.5px;
  background: color-mix(in srgb, var(--ivoor) 88%, transparent);
  cursor: ew-resize; display: grid; place-items: center;
}
.vergelijker__knop {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--ivoor); display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(22, 21, 15, 0.28);
  transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .2s ease-out;
}
.vergelijker__knop svg { width: 22px; height: 22px; fill: none; stroke: var(--inkt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vergelijker__greep:hover .vergelijker__knop,
.vergelijker__greep:focus-visible .vergelijker__knop,
.vergelijker[data-sleept="ja"] .vergelijker__knop { transform: scale(1.12); box-shadow: 0 6px 22px rgba(22, 21, 15, 0.34); }
.vergelijker__merk { position: absolute; bottom: 0.7rem; font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; background: var(--inkt); color: var(--zand); padding: 0.25rem 0.55rem; border-radius: 3px; }
.vergelijker__merk--voor { right: 0.7rem; }
.vergelijker__merk--na { left: 0.7rem; background: var(--secundair); color: var(--ivoor); }

/* De drie reviewkaarten lopen rond, met dezelfde lus als de strook: twee
   identieke reeksen en een verschuiving over de halve baan. */
.reviews { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.reviews__venster {
  overflow: hidden;
  --uitvloei: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: var(--uitvloei); mask-image: var(--uitvloei);
}
/* Marge per kaart in plaats van gap: bij zes gelijke kaarten is de halve baan
   dan exact één reeks, en springt de lus niet op het overgangspunt. */
/* Twaalf kaarten: twee identieke helften van zes. Eén helft is 107rem breed en
   dus breder dan elk gangbaar scherm. Bij zes kaarten totaal liep de band op
   een breed scherm rechts leeg vóórdat hij herhaalde, en dat is de sprong die
   je zag. De duur is meegegroeid met de afstand én opgevoerd: 30s over 107rem
   is bijna vier keer zo snel als 52s over 53rem. */
.reviews__spoor { display: flex; width: max-content; padding-block: 0.25rem; animation: schuif 30s linear infinite; }
.reviews__spoor .review { margin-right: 0.85rem; }
.reviews:hover .reviews__spoor,
.reviews:focus-within .reviews__spoor,
.reviews[data-pauze="ja"] .reviews__spoor { animation-play-state: paused; }
.reviews__spoor .review { width: 17rem; flex: none; }
.reviews__pauze { top: auto; bottom: -1.25rem; right: 0; transform: none; }
.bewijs__kop { margin-top: clamp(2.5rem, 6vw, 4rem); }
.review {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem;
  padding: 1.25rem;
  border: 1px dashed var(--lijn-2); border-radius: var(--r);
  background: var(--ivoor); color: var(--zacht);
}
.review__quote { font-size: var(--t-s); margin: 0; line-height: 1.5; }
.review__wie { display: flex; align-items: center; gap: 0.7rem; }
/* Ronde plek voor de foto. Gestippeld, zodat het leeg oogt en niet af. */
/* Initialen in plaats van een foto. Er zijn geen portretten, en een gestippelde
   lege cirkel naast een naam leest als een ontbrekend plaatje. */
.review__foto {
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--secundair) 14%, var(--ivoor));
  color: var(--secundair-tekst);
  font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.04em;
}
.review__naam { display: flex; flex-direction: column; font-size: var(--t-s); font-weight: 600; color: var(--inkt); }
.review__rol { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--zacht); margin-top: 0.15rem; }

/* ── 14. Slot en formulier ─────────────────────────────────── */

/* De blauwe vlakken. Herbruikbaar, want er zijn er drie: de configurator, het
   bewijsblok en het slot. Alles wat er direct op staat wordt licht; wat in een
   kaart zit houdt gewoon zijn eigen kleuren. */
.sectie--blauw { --ring: var(--ivoor); background: var(--blauw); color: var(--ivoor); }
.sectie--blauw .lead { color: var(--ivoor); }           /* 5,34:1 */
.sectie--blauw .fijn { color: var(--op-blauw-zacht); }  /* 4,75:1 */
.sectie--blauw .veld label { color: var(--ivoor); }
/* De sectiekleur erft door tot in alles wat erin staat. Lichte vlakken binnen
   een blauwe sectie moeten hun tekstkleur dus terugzetten, anders staat er
   ivoor op ivoor. */
.sectie--blauw .config,
.sectie--blauw .review { color: var(--inkt); }
.sectie--blauw .config .lead,
.sectie--blauw .config .fijn,
.sectie--blauw .review { color: var(--zacht); }
.sectie--blauw .veld input,
.sectie--blauw .veld select,
.sectie--blauw .veld textarea { background: var(--ivoor); border-color: transparent; color: var(--inkt); }
.sectie--blauw .fout { color: var(--ivoor); }
.sectie--blauw .vergelijker { border-color: color-mix(in srgb, var(--ivoor) 45%, transparent); }
.sectie--blauw .vannaar td { border-bottom-color: color-mix(in srgb, var(--ivoor) 32%, transparent); }
.sectie--blauw .vannaar td:first-child { color: var(--op-blauw-zacht); }
.sectie--blauw .vannaar td:last-child { color: var(--ivoor); }
/* Het lijnwerk van de illustraties gebruikt blauw en groen als accent; op een
   blauw vlak haalt dat 1,01 en verdwijnt het. Daarom een ivoren paneel eronder. */
/* Geen kaart om de illustratie op een blauw vlak: die las als een venster dat
   op de sectie was geplakt. De tekening staat er nu zelf in, met lichte lijnen
   in plaats van donkere. Zie illustratie-draaideur-op-blauw.svg. */
.sectie--blauw .duo__beeld { padding: 0; }
.sectie--blauw .review { border-color: color-mix(in srgb, var(--ivoor) 50%, transparent); }
.sectie--blauw .intern { border-top-color: color-mix(in srgb, var(--ivoor) 30%, transparent); }
/* Het spoor door de stappen: op blauw wordt de lijn licht in plaats van blauw,
   anders valt hij weg tegen het vlak. */
/* FAQ op blauw */
.sectie--blauw .faq, .sectie--blauw .faq details { border-color: color-mix(in srgb, var(--ivoor) 26%, transparent); }
.sectie--blauw .faq summary::after { color: var(--op-blauw-zacht); }
.sectie--blauw .faq p { color: var(--op-blauw-zacht); }
/* De dienstjaren-plek en de kaarten houden hun eigen lichte vlak */
.sectie--blauw .dienstjaren { background: var(--ivoor); border-color: color-mix(in srgb, var(--ivoor) 55%, transparent); color: var(--inkt); }
.sectie--blauw .dienstjaren footer { color: var(--zacht); }
.sectie--blauw .kaart { color: var(--inkt); }

/* Op blauw draait de primaire knop om: licht vlak, blauwe tekst. Zo blijft
   "blauw betekent klikbaar" overeind, ook als het vlak zelf blauw is. */
.sectie--blauw > .blad .knop--primair { background: var(--ivoor); color: var(--secundair-tekst); }
.sectie--blauw > .blad .knop--primair:hover { background: #FFFFFF; }
.sectie--blauw > .blad .knop--stil { border-color: color-mix(in srgb, var(--ivoor) 55%, transparent); color: var(--ivoor); }
.sectie--blauw > .blad .knop--stil:hover { border-color: var(--ivoor); background: color-mix(in srgb, var(--ivoor) 12%, transparent); }
/* Binnen de configuratorkaart geldt het gewone systeem weer: die kaart is licht. */
.sectie--blauw .config .knop--primair { background: var(--secundair); color: var(--ivoor); }
.sectie--blauw .config .knop--primair:hover { background: var(--secundair-tekst); }
.sectie--blauw .config .knop--stil { border-color: var(--lijn-2); color: var(--inkt); }
.sectie--blauw .config .knop--stil:hover { border-color: var(--inkt); background: transparent; }
.rondgang { margin-top: clamp(2rem, 4vw, 3rem); }
.rondgang__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
/* Vraag voor vraag: één kolom, want er staat toch maar één vraag tegelijk in
   beeld. De kop met de teller staat los boven het raster, net als bij de
   configurator, zodat de twee blokken hetzelfde aanvoelen. */
.rondgang--stappen .rondgang__raster { grid-template-columns: 1fr; }
.rondgang--stappen .config__kop { margin-bottom: 1.5rem; }
.vraagstap { display: grid; gap: 1rem; }

.vraagstap label { font-size: var(--t-l); line-height: 1.3; }
.rondgang--stappen .knoppen { margin-top: 1.5rem; }
.rondgang input, .rondgang textarea { background: var(--zand); }

/* ── 15. FAQ ───────────────────────────────────────────────── */

.faq { margin-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { padding: 0.95rem 0; cursor: pointer; font-weight: 600; font-size: var(--t-s); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; color: var(--zacht); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 1rem; color: var(--zacht); font-size: var(--t-s); max-width: 58ch; }

/* ── 16. Footer ────────────────────────────────────────────── */

.voet { color: var(--inkt); padding-block: clamp(3.5rem, 7vw, 5rem); }
.voet address { font-style: normal; font-size: var(--t-s); color: var(--zacht); }
.voet address a { color: var(--inkt); }
.voet__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; }
.voet__raster p { font-size: var(--t-s); color: var(--zacht); }
.voet__kop { font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht); margin-bottom: 0.5rem; }
.voet__links { display: grid; gap: 0.5rem; font-size: var(--t-s); }
.voet__slot { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--lijn); font-size: var(--t-xs); color: var(--zacht); }
/* In de voet past het volledige logo wel. Op een ivoren vlak, want het blauw
   van "Schoonmaakbedrijf" haalt op bijna-zwart de leesbaarheid niet. */
.voet__logo { display: inline-block; margin: 0 0 1.25rem; padding: 0; }
.voet__logo img { height: 88px; width: auto; }
.voet .knop--stil { border-color: var(--lijn-2); color: var(--inkt); }
.voet .knop--stil:hover { border-color: var(--inkt); }

/* ── 17. Mobiele actiebalk ─────────────────────────────────── */

/* Drie wegen naar binnen, elk als losse duwknop, zodat je met je duim niet
   hoeft te lezen om te mikken. Bellen en de rondgang zijn blauw (de actiekleur),
   WhatsApp is groen. Alle drie nagemeten met ivoor: 7,56:1, 4,80:1 en 5,33:1.
   De balk zelf is een matglazen strook, geen gekleurd vlak: de knoppen moeten
   het werk doen. */
.actiebalk {
  position: fixed; inset: auto 0 0 0; z-index: 50; display: none;
  gap: 0.5rem; align-items: center;
  padding: 0.6rem var(--rand) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  /* Geen balk, alleen de knoppen. Ze zijn zelf dekkend en hebben hun eigen
     3D-rand, dus ze blijven leesbaar over wat er ook onder doorschuift. */
  background: transparent;
  transform: translateY(0); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.actiebalk[data-verborgen="ja"] { transform: translateY(150%); }
.actiebalk a {
  flex: 1; min-width: 0; text-align: center;
  padding: 0.75rem 0.4rem; font-size: var(--t-xs); letter-spacing: 0.01em;
  border-radius: 999px; white-space: nowrap;
}
/* Even specifiek als .actiebalk a, anders wint die en worden alle drie gelijk. */
.actiebalk a.actiebalk__cta { flex: 1.5; }

.controlelijst { display: none; }

/* ── 18. Responsive ────────────────────────────────────────── */


@media (max-width: 900px) {
  .hero, .uitkomst, .duo, .duo--omgekeerd { grid-template-columns: minmax(0, 1fr); }
  /* Op mobiel eerst lezen, dan pas het plaatje. */
  .duo--omgekeerd .duo__beeld { order: 2; }
  .duo__beeld { width: 100%; max-width: 26rem; margin-inline: auto; }
  /* width is nodig naast margin-inline: auto — auto-marges zetten het
     uitrekken van een grid-item uit, waarna de div naar de standaardmaat van
     de afbeelding krimpt. */
  .hero__beeld { width: 100%; max-width: 17rem; margin-inline: auto; }
}

@media (max-width: 720px) {
  .statusbalk .tel { display: none; }
  .actiebalk { display: flex; }
  /* Ruimte voor de zwevende knoppen zit in de voet zelf, zodat het lichte
     vlak doorloopt tot de onderrand van de pagina en er niets leegs onder
     de site overblijft. */
  .voet { padding-bottom: calc(clamp(3.5rem, 7vw, 5rem) + 4.75rem); }
  /* --balk is alles wat vast op het scherm staat en dus niet voor de hero is:
     de statusbalk boven en de actiebalk onder. Nagemeten: 57 + 69 = 126px. */
  .sectie--hero { --balk: 7.9rem; padding-top: 1.25rem; }
  .hero__beeld { max-width: 16rem; }
  .hero__sub { margin-top: 1rem; }
  .knoppen { margin-top: 1.25rem; gap: 0.5rem; }
}

@media (max-width: 620px) {
  /* Logo plus naam plus openingsstatus past niet op één regel. Het logo zegt
     "Schoonmaakbedrijf" zelf al, dus die regel kan hier weg. */
  .merk__naam span { display: none; }
  .merk__logo { height: 34px; }
  .statusbalk__rechts { font-size: var(--t-xs); text-align: right; }
}

@media (max-width: 560px) {
  h1, h2 { font-variation-settings: 'wdth' 100; }

  /* Op de telefoon is de hero één beeld met drie lagen boven elkaar: de
     illustratie bovenin, de strook onderaan tegen de vouw, en daartussen de
     kop met de twee knoppen. De illustratie krijgt de ruimte die overblijft
     (1fr) in plaats van een vaste maat; op een korte telefoon krimpt zij, en
     de tekst blijft heel. Andersom zou de kop afbreken, en dat is het enige
     wat hier echt gelezen moet worden. */
  /* De hero krijgt een vaste hoogte in plaats van een ondergrens, want de
     opdracht is dat je alle drie de lagen in één beeld ziet. De hele keten
     krijgt min-height: 0, anders houdt de eigen hoogte van de illustratie de
     rij open en groeit de sectie er alsnog doorheen. */
  /* De hoogte is het zichtbare deel plús de wolkvoet. Die voet valt daardoor
     onder de vouw, en de strook komt precies tegen de actiebalk te liggen in
     plaats van er 80px boven te blijven zweven. */
  .sectie--hero { height: calc(100svh - var(--balk) + var(--hero-voet)); min-height: 0; padding-top: 0.6rem; }
  .sectie--hero > .blad { align-self: stretch; display: grid; min-height: 0; }
  /* De illustratie gaat er op de telefoon uit. Ze zei niets wat de kop niet al
     zegt, en een half scherm is te duur voor decor. Op tablet en desktop blijft
     ze gewoon staan. */
  .hero__beeld { display: none; }

  /* Zonder beeld hoeft de hero het scherm niet meer vol te maken: hij krijgt de
     hoogte van zijn eigen inhoud. De strook sluit dan direct op de knoppen aan
     in plaats van er 200px onder te zweven, en wat daarna komt piept net onder
     de vouw uit. Dat laatste is precies het duwtje om te gaan scrollen. */
  .sectie--hero { height: auto; padding-bottom: 0; }
  .hero { grid-template-rows: auto; gap: 0; min-height: 0; }
  .hero > div:not(.hero__beeld) { align-self: start; min-height: 0; }

  /* Er is nu ruimte, dus de kop mag terug naar zijn eigen maat in plaats van de
     ingehouden variant die de illustratie moest ontzien. */
  .sectie--hero h1 { font-size: clamp(2rem, 8.8vw, 2.5rem); }
  /* Het pilletje zegt hier hetzelfde als de zin eronder ("schoonmaak … in
     Rotterdam"). Op een telefoon is die herhaling 43px die de illustratie
     beter kan gebruiken. */
  .sectie--hero .eyebrow { display: none; }
  .hero__sub { font-size: var(--t-m); line-height: 1.4; margin-top: 0.7rem; }
  .hero__sub strong { margin-top: 0.4rem; }
  .sectie--hero .knoppen { margin-top: 0.9rem; }
  .sectie--hero .knop { padding-block: 0.7rem; }
  .sectie--hero .strook { margin-top: clamp(0.75rem, 3vw, 1.25rem); }

  .keuzes { grid-template-columns: 1fr 1fr; }
  .programma thead { display: none; }
  .programma tr { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--lijn); }
  .programma th, .programma td { border: 0; padding: 0.1rem 0; }
  .programma tbody th { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .knoppen .knop { width: 100%; }
  .config__voet .knop { flex: 1; }
}

/* ── 19. Reduced motion ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* De strook mag hier niet "instant afspelen" naar het eindpunt, dus de
     animatie gaat helemaal uit en de reeks wordt een gewone opsomming. */
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .strook__spoor { animation: none; width: 100%; }
  .reviews__spoor { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .reviews__spoor .review[aria-hidden="true"] { display: none; }
  .reviews__venster { -webkit-mask-image: none; mask-image: none; }
  .reviews__pauze { display: none; }
  .strook__reeks { flex-wrap: wrap; justify-content: center; }
  .strook__reeks[aria-hidden="true"] { display: none; }
  .strook__venster { -webkit-mask-image: none; mask-image: none; }
  .strook__pauze { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── 20. Het kaartje ───────────────────────────────────────────
   Waar we zitten, als tekening in plaats van als ingesloten kaartdienst. Dat
   scheelt een cookiemelding, een externe verbinding die de bezoeker volgt, en
   een halve megabyte. Wat een bezoeker hier nodig heeft is "waar ongeveer" en
   het adres; navigeren doet hij toch in zijn eigen app.

   Overgezet uit een React/Tailwind-component. Dit project heeft geen build, dus
   het spring-gedrag van de kanteling is hier een cubic-bezier-overgang, en de
   in-view-animaties lopen op CSS-overgangen die aan [data-open] hangen. */

/* Het kaartje staat op elke breedte in het midden onder de vragen. De
   uitlijning zit op de flexbox en niet op text-align, want de aanhef is een <p>
   met een max-breedte van 62ch en zou anders links blijven staan, met de tekst
   netjes gecentreerd binnen díe 62ch. */
.kaartje-blok { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-direction: column; align-items: center; }
.kaartje__aanhef { text-align: center; }

.kaartje__aanhef {
  font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--op-blauw-zacht); margin: 0 0 0.9rem;
}

.kaartje {
  display: block; padding: 0; border: 0; background: none;
  cursor: pointer; perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
}

.kaartje__vlak {
  position: relative; display: block; overflow: hidden;
  width: 300px; height: 176px;
  background: var(--ivoor);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  transform-style: preserve-3d;
  transform: rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg));
  transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1),
              height 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms ease-out;
  box-shadow: 0 2px 6px rgba(23, 21, 15, 0.06), 0 18px 40px -20px rgba(23, 21, 15, 0.35);
}
/* Geen percentage hier: de knop past zich aan zijn inhoud aan, dus 100% zou
   verwijzen naar een breedte die dit vlak zelf bepaalt. Dat wordt nul. */
.kaartje[aria-expanded="true"] .kaartje__vlak { width: min(440px, calc(100vw - var(--rand) * 2)); height: 336px; }
.kaartje:hover .kaartje__vlak { box-shadow: 0 2px 6px rgba(23, 21, 15, 0.08), 0 26px 54px -22px rgba(23, 21, 15, 0.45); }
.kaartje:focus-visible .kaartje__vlak { outline: 2px solid var(--ivoor); outline-offset: 3px; }

/* Ruitjes, alleen als het kaartje dicht is. */
.kaartje__raster {
  position: absolute; inset: 0; opacity: 0.05;
  background-image:
    linear-gradient(to right, var(--inkt) 1px, transparent 1px),
    linear-gradient(to bottom, var(--inkt) 1px, transparent 1px);
  background-size: 20px 20px;
  transition: opacity 300ms ease-out;
}
.kaartje[aria-expanded="true"] .kaartje__raster { opacity: 0; }

/* ── het stratenplan ── */
.kaartje__plan {
  position: absolute; inset: 0; opacity: 0;
  background: color-mix(in srgb, var(--zand) 70%, var(--ivoor));
  transition: opacity 300ms ease-out;
}
.kaartje[aria-expanded="true"] .kaartje__plan { opacity: 1; }

.kaartje__wegen { position: absolute; inset: 0; width: 100%; height: 100%; }
.kaartje__wegen line {
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 700ms ease-out;
}
.kaartje__hoofdweg line { stroke: color-mix(in srgb, var(--inkt) 22%, transparent); stroke-width: 5; }
.kaartje__zijweg  line { stroke: color-mix(in srgb, var(--inkt) 17%, transparent); stroke-width: 3.5; }
.kaartje__steeg   line { stroke: color-mix(in srgb, var(--inkt) 9%, transparent);  stroke-width: 1.5; }
.kaartje[aria-expanded="true"] .kaartje__wegen line { stroke-dashoffset: 0; }
.kaartje[aria-expanded="true"] .kaartje__hoofdweg line:nth-child(1) { transition-delay: 120ms; }
.kaartje[aria-expanded="true"] .kaartje__hoofdweg line:nth-child(2) { transition-delay: 200ms; }
.kaartje[aria-expanded="true"] .kaartje__zijweg  line:nth-child(1) { transition-delay: 280ms; }
.kaartje[aria-expanded="true"] .kaartje__zijweg  line:nth-child(2) { transition-delay: 340ms; }
.kaartje[aria-expanded="true"] .kaartje__steeg   line { transition-delay: calc(400ms + var(--beurt, 0) * 60ms); }
.kaartje__steeg line:nth-child(1) { --beurt: 0; }
.kaartje__steeg line:nth-child(2) { --beurt: 1; }
.kaartje__steeg line:nth-child(3) { --beurt: 2; }
.kaartje__steeg line:nth-child(4) { --beurt: 3; }
.kaartje__steeg line:nth-child(5) { --beurt: 4; }
.kaartje__steeg line:nth-child(6) { --beurt: 5; }
.kaartje__steeg line:nth-child(7) { --beurt: 6; }

.kaartje__pand {
  position: absolute; left: var(--x); top: var(--y); width: var(--b); height: var(--h);
  background: color-mix(in srgb, var(--inkt) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--inkt) 9%, transparent);
  border-radius: 2px;
  opacity: 0; transform: scale(0.8);
  transition: opacity 380ms ease-out, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kaartje[aria-expanded="true"] .kaartje__pand {
  opacity: 1; transform: scale(1);
  transition-delay: calc(380ms + var(--beurt) * 55ms);
}

.kaartje__speld {
  position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -34px 0 0 -20px;
  opacity: 0; transform: translateY(-18px) scale(0.4);
  transition: opacity 300ms ease-out, transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kaartje[aria-expanded="true"] .kaartje__speld { opacity: 1; transform: translateY(0) scale(1); transition-delay: 320ms; }
.kaartje__speld svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0, 64, 29, 0.35)); }
.kaartje__speld path { fill: var(--secundair); }
.kaartje__speld circle { fill: var(--ivoor); }

/* ── de vaste laag erboven ── */
.kaartje__kop, .kaartje__voet { position: relative; z-index: 2; display: flex; }
.kaartje__kop {
  position: absolute; inset: 1.15rem 1.15rem auto 1.15rem;
  align-items: flex-start; justify-content: space-between;
}
.kaartje__icoon {
  width: 21px; height: 21px; fill: none; stroke: var(--secundair);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 260ms ease-out;
}
.kaartje[aria-expanded="true"] .kaartje__icoon { opacity: 0; }

.kaartje__pil {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--inkt) 6%, transparent);
  font-variation-settings: 'wdth' 78; font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--zacht);
  transition: transform 200ms ease-out;
}
.kaartje:hover .kaartje__pil { transform: scale(1.05); }
.kaartje__stip { width: 6px; height: 6px; border-radius: 50%; background: var(--secundair); flex: none; }

.kaartje__voet {
  position: absolute; inset: auto 1.15rem 1.15rem 1.15rem;
  flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left;
}
.kaartje__straat {
  font-weight: 600; font-size: var(--t-m); color: var(--inkt); letter-spacing: -0.015em;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kaartje:hover .kaartje__straat { transform: translateX(4px); }
.kaartje__plaats {
  font-size: var(--t-xs); color: var(--zacht);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 260ms ease-out, opacity 260ms ease-out;
}
.kaartje[aria-expanded="true"] .kaartje__plaats { max-height: 2rem; opacity: 1; }
.kaartje__streep {
  width: 100%; height: 1px; margin-top: 0.35rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--secundair) 55%, transparent), transparent);
  transform: scaleX(0.3); transform-origin: 0 50%;
  transition: transform 380ms ease-out;
}
.kaartje:hover .kaartje__streep,
.kaartje[aria-expanded="true"] .kaartje__streep { transform: scaleX(1); }

.kaartje__hint {
  margin: 0.6rem 0 0; font-size: var(--t-xs); color: var(--op-blauw-zacht);
  opacity: 0; transition: opacity 200ms ease-out;
}
.kaartje:hover ~ .kaartje__hint { opacity: 1; }
.kaartje[aria-expanded="true"] ~ .kaartje__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Geen kanteling en geen tekenende lijnen: alleen het uitklappen zelf, want
     dat draagt informatie. */
  .kaartje__vlak { transform: none !important; transition: width 1ms, height 1ms; }
  .kaartje__wegen line, .kaartje__pand, .kaartje__speld,
  .kaartje__plan, .kaartje__raster, .kaartje__streep, .kaartje__plaats { transition: none; }
}