/* ===========================================================================
   DE GESPREKKENBAND VAN DE HOOFDPAGINA.

   Dezelfde band als onderaan /cyberverzekering/: donker vlak met het
   vloervlak erin, vijf pagina's die over elkaar heen vervagen, twee glazen
   pijlen en een rij stippen. De maten en kleuren hieronder zijn overgenomen
   uit de ontwerpoverdracht van 14 september (design_handoff_landing_cyber,
   §6 en §7) en uit wat daarvan op de landingspagina staat.

   WAAROM DEZE REGELS HIER STAAN EN NIET IN LANDING.CSS
   landing.css zegt in zijn eigen kop: de landingspagina gebruikt niets van
   pagina.css en de hoofdpagina niets van landing.css. Sinds dit verzoek is
   dat voor één component niet meer waar. De twee opties waren: de
   hoofdpagina 1500 regels landingspagina laten laden voor één band, of de
   regels van die band hier herhalen. Dit is de tweede.

   DAT IS EEN SCHULD EN GEEN OPLOSSING. De klassenamen zijn met opzet
   letterlijk die van de landingspagina (lp-carrousel, lp-veld, lp-kanaal),
   zodat het samenvoegen later één diff is en geen zoektocht: verplaats deze
   regels naar een gedeeld bestand, laat landing-glas.css en landing.css ze
   daar weghalen, klaar. Wijzig je hier iets aan de band, wijzig het dan ook
   in landing-glas.css (§carrousel) of landing.css (§10, §13) — en andersom.

   Het script is wél gedeeld: site/landing-vloer.js tekent het vloervlak en
   stuurt de carrousel op beide pagina's, zonder aanpassing.

   VOLGORDE: na pagina.css. Twee regels hieronder overschrijven er een
   (de h2 en de kop van de band).
   =========================================================================== */

/* --- De band -----------------------------------------------------------

   Rechte hoeken en overflow: hidden. De oude band liep met een verloop over
   in het papier; deze staat als een blok in de pagina, zoals op de
   landingspagina.
   ----------------------------------------------------------------------- */
.lp-carrousel {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-text);
  padding: clamp(64px, 7.5vw, 108px) var(--gutter) clamp(48px, 5vw, 72px);
}

/* De lichtkern achter het vloervlak. Zonder deze is de band een vlak zwart
   vak met lijnen erin; hiermee heeft hij een midden. Staat als ::before dus
   vóór de svg in de tekenvolgorde, en de svg ligt er dus overheen. */
.lp-carrousel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 48% at 50% 26%,
              rgba(110, 145, 121, 0.20) 0%, rgba(110, 145, 121, 0) 72%);
}

/* --- Het vloervlak -----------------------------------------------------

   Getekend door landing-vloer.js (stand "band": cy 112, stap 0,6, 24
   dwarsliggers, spanX 15, lijn #93b39c). De maskering dooft hem aan twee
   kanten uit: hij komt op ná de kop en is weg voordat de stippen beginnen.
   Zonder die uitdoving lopen de lijnen achter de tekst door.
   ----------------------------------------------------------------------- */
.lp-vloer {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 34%,
    rgba(0,0,0,0.62) 58%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0) 86%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 34%,
    rgba(0,0,0,0.62) 58%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0) 86%);
}
[data-vloer] { position: relative; overflow: hidden; }

/* --- Het speelveld en de vijf pagina's ---------------------------------

   Eén vaste hoogte, zodat de band niet verspringt bij een paginawissel: de
   ene pagina is een kop van twee regels en de andere een gespreksvenster.

   ALLE VIJF BLIJVEN IN DE BRON. Niet in- en uitschakelen: de vier die niet
   aan de beurt zijn staan absoluut over elkaar met dekking 0, visibility
   hidden (vertraagd, zodat ze eerst wegvagen), pointer-events: none en
   aria-hidden. Reden staat in landing.css §10 bij .lp-gesprek: dit is de
   enige plek waar een crawler het gesprek en de contactwegen leest. Op deze
   pagina staan de drie gesprekken daarbovenop nog als tekst in de
   <noscript>-blokken verderop.
   ----------------------------------------------------------------------- */
.lp-carrousel__veld {
  position: relative; z-index: 2;
  margin: 0 auto; width: 100%; max-width: var(--max-shell);
  min-height: 520px; text-align: center;
}
@media (max-width: 899px) {
  .lp-carrousel__veld { min-height: 460px; }
  /* Ruimte voor de twee pijlen: die staan op 10 van de rand en zijn 48 breed,
     dus zonder deze marge loopt de inhoud eronderdoor. Op een breed scherm is
     ze niet nodig — daar staan de pijlen buiten de schil. */
  .lp-carrousel__pagina { padding-inline: 62px; }
}

.lp-carrousel__pagina {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 44px;
  transition: opacity 380ms var(--ease), transform 520ms var(--ease),
              visibility 0s linear 0.38s;
}
.lp-carrousel__pagina[aria-hidden="true"] {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.lp-carrousel__pagina[aria-hidden="true"].is-voor { transform: translateX(-4%); }
.lp-carrousel__pagina[aria-hidden="true"].is-na   { transform: translateX(4%); }
.lp-carrousel__pagina[aria-hidden="false"] {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .lp-carrousel__pagina { transition: opacity 120ms linear, visibility 0s linear 0.12s; }
  .lp-carrousel__pagina[aria-hidden="true"].is-voor,
  .lp-carrousel__pagina[aria-hidden="true"].is-na { transform: none; }
}

/* De koppen. Ze staan hier en niet bij de band hierboven omdat pagina.css op
   elke h2 een eigen kleur en maat zet, en die winnen van de overerving van
   de band — inkt op inkt, een kop die er wel staat maar niet te zien is. */
.lp-carrousel h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
}
.lp-carrousel__proef h2 { font-size: clamp(26px, 2.6vw, 34px); }

/* --- De kop naast het eerste beeld -------------------------------------

   Sinds 15 september 2026 staan de titelregel van de band en het eerste
   gesprek op één pagina. Dat waren twee pagina's: een kop van twee regels,
   en dan pas een beeld. Wie de band binnenkwam zag dus eerst niets dan een
   kop, en de mockup moest hij zelf gaan zoeken.

   NAAST ELKAAR EN NIET BOVEN ELKAAR. Het speelveld is 520 hoog; een kop van
   twee regels erboven laat voor het beeld zo'n 350 over, en een staande
   mockup van 350 hoog is 250 breed in een band van 1180. Naast elkaar houdt
   het beeld zijn hoogte en krijgt de kop de ruimte die hij toch al nodig
   had.

   FLEX EN GEEN RASTER, met opzet: staat de mockup achter een schakelaar die
   uit is (site/verbergen.js haalt hem dan uit de dom), dan blijft de kop als
   enig kind over en centreert flex die vanzelf. Een raster met twee kolommen
   zou hem in de linkerkolom laten staan met een leeg vak ernaast.
   ----------------------------------------------------------------------- */
.lp-carrousel__intro {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  flex: 1 1 auto; width: 100%; min-height: 0;
}
.lp-carrousel__intro > :first-child {
  flex: 0 1 auto; max-width: 16ch; text-align: left;
  /* Anders staat er een lange eerste regel met twee woorden onder zich. */
  text-wrap: balance;
}
/* De mockup mag niet de hele breedte pakken zoals op een eigen pagina: hier
   volgt zijn breedte uit de hoogte, via de aspect-ratio op het kader. */
.lp-carrousel__intro .gesprek-mockup { flex: 0 1 auto; width: auto; }

@media (max-width: 899px) {
  /* Onder elkaar, en dan staat de kop weer gecentreerd zoals de rest van de
     band. Kleiner ook: hij moet de hoogte delen met het beeld. */
  .lp-carrousel__intro { flex-direction: column; gap: 20px; }
  .lp-carrousel__intro > :first-child { max-width: 24ch; text-align: center; }
  .lp-carrousel__intro h2 { font-size: clamp(26px, 6vw, 34px); }
}

/* --- De pijlen en de stippen ------------------------------------------- */
.lp-carrousel__pijl {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--washi) 24%, transparent);
  background: color-mix(in srgb, var(--washi) 8%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-invert); cursor: pointer;
}
.lp-carrousel__pijl:hover { background: color-mix(in srgb, var(--washi) 16%, transparent); }
.lp-carrousel__pijl:focus-visible { outline: 2px solid var(--washi); outline-offset: 3px; }
.lp-carrousel__pijl--vorige { left: 28px; }
.lp-carrousel__pijl--volgende { right: 28px; }

/* DE TIKZONE IS GROTER DAN DE SCHIJF. Achtenveertig pixels is de ondergrens
   voor een vinger en niet meer dan dat; wie ernaast tikt, ziet niets
   gebeuren. De zone groeit daarom 28 naar boven, 28 naar onderen en 28 naar
   de schermrand toe — allemaal leegte waar toch niets anders staat.

   NAAR BINNEN NIET. Daar begint op de laatste pagina van de band het
   chatveld (.lp-balkrij, max 820 breed en gecentreerd), en rond de
   negenhonderd pixels raakt dat bijna aan de pijl. Een tik die in het veld
   hoort te landen mag geen pagina omslaan.

   Een ::after en geen padding: de schijf zelf blijft 48 bij 48.

   GEVOLG OP EEN MUISPAGINA: :hover vuurt ook vanaf de halo, want die is een
   kind van de knop. De schijf licht dus op zodra de muis in de buurt komt.
   Dat is hier de bedoeling — het wijst de zone aan die je kunt raken. Moet
   het alleen op een vinger gelden, dan hoort dit blok in
   @media (hover: none). */
.lp-carrousel__pijl::after { content: ''; position: absolute; inset: -28px 0; }
.lp-carrousel__pijl--vorige::after   { left: -28px; }
.lp-carrousel__pijl--volgende::after { right: -28px; }
@media (max-width: 899px) {
  .lp-carrousel__pijl--vorige { left: 10px; }
  .lp-carrousel__pijl--volgende { right: 10px; }
}

/* EN OP EEN TELEFOON GROEIT DE ZONE NIET NAAR BOVEN EN ONDEREN, 17 september
   2026. "Allemaal leegte waar toch niets anders staat" hierboven gold voor
   een breed scherm en klopte niet meer op een smal.

   Nagemeten op /bestuurdersaansprakelijkheid/ bij 375 breed, met
   elementFromPoint op de hoeken van elke chip: de bovenkant van "Welk
   verzekerd bedrag heb ik nodig?" gaf .lp-carrousel__pijl terug en niet de
   chip. Die chip is daar 282 breed en de startvragen staan in drie rijen
   onder het veld; de pijlen staan op halve hoogte van de band en hun halo
   van 28 reikt tot in de eerste twee rijen. Wie de vraag aantikte, sloeg een
   pagina om.

   Zes en niet nul: de schijf blijft 48 bij 48 en dat is de ondergrens voor
   een vinger, dus de zone hoeft niet te groeien — zes pixels dekken alleen
   het onnauwkeurige van een tik op de rand af. Zijwaarts blijft de 28 staan:
   daar staat wél niets, en de pijl staat op een telefoon op 10 van de rand.

   Dit blok staat in carrousel.css én in landing-glas.css, byte voor byte
   hetzelfde: de productpagina's laden het tweede bestand en niet het eerste.
   Wijzig je hier iets, wijzig het daar mee. */
@media (max-width: 720px) {
  .lp-carrousel__pijl::after { inset: -6px 0; }

  /* EN OP EEN TELEFOON STAAN DE PIJLEN ONDERAAN, 18 september 2026.

     Op halve hoogte van de band vielen ze midden in het chatveld: op
     /fr/cyberverzekering/ bij 390 breed staat het veld van 511 tot 625 en
     stond de pijl van 605 tot 653 — de schijf lag dus over de onderrand van
     het veld en over de startvragen eronder. Op een breed scherm is daar
     ruimte tussen en hoort de pijl naast de band; hier is er niets tussen.

     Onderaan is die ruimte er wel: de band heeft 48 pixels padding onder de
     stippen, op elke pagina en in elke taal nagemeten. Daarin passen de twee
     schijven van 48 precies, links en rechts van de stippenrij — één rij
     bediening in plaats van twee dingen die elkaar in de weg zitten.

     28 is die padding van 48, plus de helft van de stip (4), min de helft
     van de schijf (24): dan staat de pijl op dezelfde hoogte als de stippen.
     De stippen zelf staan gecentreerd en zijn samen een goede veertig pixels
     breed, dus ze raken de schijven niet.

     Dit blok staat in carrousel.css én in landing-glas.css, byte voor byte
     hetzelfde: de productpagina's laden het tweede bestand en niet het
     eerste. Wijzig je hier iets, wijzig het daar mee. */
  .lp-carrousel__pijl { top: auto; bottom: 28px; transform: none; }
}

.lp-carrousel__stippen {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: 10px; margin-top: 36px;
}
.lp-carrousel__stip {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--washi) 32%, transparent); cursor: pointer;
  transition: width 200ms var(--ease), background-color 200ms var(--ease);
}
.lp-carrousel__stip[aria-selected="true"] { width: 28px; background: var(--accent2); }
.lp-carrousel__stip:focus-visible { outline: 2px solid var(--washi); outline-offset: 3px; }
/* HET TIKOPPERVLAK IS GROTER DAN DE STIP, sinds 18 september 2026.

   De stip is met opzet 8 bij 8: dat is de vormgeving, en die blijft. Maar 8 bij
   8 is als tikdoel te klein — WCAG 2.2 SC 2.5.8 vraagt 24 bij 24, en
   site/pagina.css:2200 doet dezelfde component wél op 32. Vandaar een
   ::after dat het doel oprekt zonder één pixel van de stip te verplaatsen.

   DE MATEN, en waarom precies deze. Verticaal staat er niets naast, dus daar
   kan het vol 24 worden (-8 boven en onder bij een stip van 8). Horizontaal
   is de ruimte per stip haar eigen breedte plus de gap van 10, dus
   `calc(100% + 10px)`: de doelen van twee buren raken elkaar dan en
   overlappen niet. Dat geldt ook voor de geselecteerde stip, die 28 breed is —
   een vaste breedte zou daar overlappen.

   WAT DIT NIET HAALT, en dat hoort er eerlijk bij: 18 bij 24 is geen 24 bij
   24, en de uitzondering voor kleine doelen in 2.5.8 vraagt dat een cirkel van
   24 rond het doel geen andere raakt — met 18 pixels tussen de middelpunten
   lukt dat niet. Vol conform worden vraagt een grotere gap, en dat is een
   zichtbare wijziging aan de rij. Dit is de onzichtbare helft. */
.lp-carrousel__stip { position: relative; }
.lp-carrousel__stip::after {
  content: ''; position: absolute; top: -8px; bottom: -8px;
  left: -5px; width: calc(100% + 10px);
}

/* --- De drie gespreksmockups -------------------------------------------

   Het kader is dat van de landingspagina (max 640, radius 18, rand en
   schaduw uit de overdracht). De hoogte bepaalt hier de breedte en niet
   andersom: de mockups zijn staand (1000 bij 1385, dus 0,722) en het
   speelveld is 520 hoog, dus een kader van 640 breed zou er nooit in passen.
   Met aspect-ratio volgt de breedte uit wat er aan hoogte overblijft, en
   schalen de mockups zichzelf naar die doos.
   ----------------------------------------------------------------------- */
.gesprek-mockup {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; height: 100%; min-height: 0; width: 100%;
}
.gesprek-mockup__kader {
  flex: 1 1 auto; min-height: 0;
  max-width: min(640px, 100%);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
}
/* DE VERHOUDING PER MOCKUP, EN GEEN EIGEN RAND.

   Het kader van de landingspagina heeft er allebei wel: daar zit een
   gespreksvenster in dat de doos vult. Hier zit een mockup in die zichzelf
   naar de doos schaalt met zijn eigen verhouding, en die tekent zijn eigen
   omlijning al (de telefoon een bezel van 3 pixels met een haarlijn erbuiten,
   de kaart alleen die haarlijn — zie html.in-carrousel in de mockupbestanden).

   Vandaar twee dingen anders dan in de overdracht: geen rand op dit kader,
   want dat werd een dubbele omlijning, en de verhouding van de mockup zelf
   in plaats van één maat voor alle drie, want anders staat de mockup met
   zwarte stroken links en rechts in een kader dat wél te zien is. De
   getallen komen uit de mockups: de telefoon is 390 bij 812, de kaart van
   het chatbotscenario 460 bij 660. De schaduw blijft: die valt buiten het
   iframe en is wat het beeld van de band tilt. */
.gesprek-mockup__kader--telefoon   { aspect-ratio: 390 / 812; }
.gesprek-mockup__kader--kaart      { aspect-ratio: 460 / 660; }
/* De rondleiding door Mijn dossier is als enige liggend: 1120 bij 840, dus
   4:3. Zij vult de doos in de breedte waar de andere hem in de hoogte
   vullen, en dat is precies waarom de verhouding hier per mockup staat en
   niet één keer voor alle drie. */
.gesprek-mockup__kader--rondleiding { aspect-ratio: 1120 / 840; }
.gesprek-mockup__kader iframe {
  display: block; width: 100%; height: 100%; border: 0;
  /* EEN IFRAME SLIKT DE AANRAKING OP: landt je vinger op een gesprek, dan
     komt de veeg nooit bij de sectie aan en slaat de band niet om. Er is in
     de mockup niets in te klikken — het is een animatie die zichzelf
     afspeelt en zich met postMessage afmeldt. Zelfde regel en zelfde reden
     als bij .gesprekken__beeld iframe in pagina.css. */
  pointer-events: none;
}
.gesprek-mockup__bij {
  margin: 0; flex: none;
  font-size: var(--size-small); line-height: 1.5;
  color: color-mix(in srgb, var(--washi) 72%, transparent);
}

/* --- "Probeer het zelf": de chatbalk --------------------------------- */
.lp-carrousel__proef {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  width: 100%;
}
.lp-veld { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

.lp-balkrij {
  display: flex; align-items: stretch; gap: 10px;
  width: 100%; max-width: 820px; margin: 0 auto;
}
@media (max-width: 899px) { .lp-balkrij { max-width: 640px; } }

.lp-veld__doos {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--glas-rand-donker);
  border-radius: 22px;
  /* DEZELFDE RUIT ALS DE BALK IN HET HERO VAN DE HOOFDPAGINA, 15 september
     2026. Op verzoek: één chatbalk op de hele site.

     Hier stond een tint van 10 procent washi, met als reden: "daar ligt het
     bogenmotief onder de ruit en hier de vloer, en een donkere ruit op een
     donkere band is geen ruit meer." Die waarneming blijft staan en is
     nagekeken bij deze wijziging — de band heeft haar vloertekening en de
     rand op 0,20 begrenst het vlak — maar de tint maakte deze balk zichtbaar
     lichter dan die in het hero, en dat was het verschil dat opviel. */
  background: var(--balk-vlak);
  backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%);
  box-shadow: var(--glas-glans-donker), var(--glas-schaduw-donker);
}
/* De hele doos kleurde groen zodra er iets in de balk focus kreeg. In het
   hero gebeurt dat niet: daar krijgt het veld zelf een ring en blijft de
   ruit wat ze is. Zie .heroballk__invoer:focus-visible in chat.css. */

.lp-veld__klem {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 0; border-radius: 14px;
  background: color-mix(in srgb, var(--text-invert) 12%, transparent);
  color: color-mix(in srgb, var(--text-invert) 75%, transparent);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.lp-veld__klem:hover { background: color-mix(in srgb, var(--text-invert) 20%, transparent);
  color: var(--text-invert); }
.lp-veld__klem:focus-visible { outline: 2px solid var(--washi); outline-offset: 2px; }

/* Het veld zelf is dekkend en niet doorschijnend: hier komt tekst in te
   staan, en tekst hoort niet op glas. */
/* Een input of een textarea. De hoofdpagina heeft een textarea (die groeit
   mee met een lang bericht); Na het afsluiten heeft een input van één regel,
   want daar kapte de textarea zijn eigen plaatshouder af. */
.lp-veld textarea,
.lp-veld input[type="text"] {
  flex: 1; min-width: 0;
  min-height: 46px; max-height: 96px;
  padding: 11px 16px;
  /* De 1px blijft staan en wordt doorzichtig: anders springt de maat van het
     veld op het moment dat de focusring erbij komt. Zelfde streek als
     .heroballk__invoer in hoofdpagina-glas.css. */
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--balk-vlak);
  color: var(--text-invert);
  resize: none; font: inherit; font-size: var(--size-body); line-height: 1.5;
  overflow-y: auto;
}
.lp-veld textarea:focus,
.lp-veld input[type="text"]:focus { outline: none; }
/* De ring om het veld, zoals in het hero van de hoofdpagina. */
.lp-veld textarea:focus-visible,
.lp-veld input[type="text"]:focus-visible {
  outline: 2px solid var(--shu-ink);
  outline-offset: 1px;
}
/* 0,80 en niet 0,60: het veld is doorzichtig, dus de plaatshouder staat op de
   band zelf. Zelfde meting en zelfde waarde als in het hero. */
.lp-veld textarea::placeholder,
.lp-veld input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--text-invert) 80%, transparent); opacity: 1;
}
/* Zelfde krapte als in de balk van het hero: op een telefoon vier pixels
   minder marge, zodat de plaatshouder op één regel blijft. De letter blijft
   16px vanwege de inzoom van Safari op iOS. */
@media (max-width: 420px) {
  .lp-veld textarea,
  .lp-veld input[type="text"] { padding-left: 12px; padding-right: 12px; }
  /* Zelfde als in chat.css: de plaatshouder een maat kleiner, het veld zelf
     op 16px vanwege de inzoom van Safari op iOS. */
  .lp-veld textarea::placeholder,
  .lp-veld input[type="text"]::placeholder { font-size: 14px; }
}

.lp-veld__stuur {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 0; border-radius: var(--radius-pill);
  /* Het lichte vlak van .heroballk__send in het hero, sinds 15 september 2026.
     Die knop was groen (--shu) en is washi met donkere inkt geworden; dit is
     dezelfde knop op een andere plek, dus hij volgt. --sumi-deep op --washi
     haalt 12,9:1: de pijl is het best afleesbare van de hele balk, en dat
     hoort ook — het is de enige knop die iets verstuurt. */
  background: var(--washi); color: var(--sumi-deep);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color 200ms var(--ease);
}
.lp-veld__stuur:hover:not(:disabled) { background: var(--washi-dim); }
.lp-veld__stuur:disabled { opacity: 0.4; cursor: default; }
.lp-veld__stuur:focus-visible { outline: 3px solid var(--washi); outline-offset: 2px; }

/* De twee kanaaltegels naast de balk. Alleen een pictogram, met aria-label
   en title. Geen WhatsApp-beeldmerk: de tekstballon komt uit deze site zelf,
   het echte logo is een merkteken van Meta. */
.lp-kanalen { display: flex; flex-direction: column; gap: 8px; flex: none; width: 56px; }
.lp-kanaal {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 32px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--washi) 30%, transparent);
  background: color-mix(in srgb, var(--washi) 8%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-invert); text-decoration: none;
  transition: background-color 200ms var(--ease);
}
.lp-kanaal:hover { background: color-mix(in srgb, var(--washi) 16%, transparent); }
.lp-kanaal:focus-visible { outline: 2px solid var(--washi); outline-offset: 3px; }

/* De startvragen. Knoppen en geen links: ze vullen het veld hierboven in, ze
   navigeren niet. Wie dat als link opmaakt, belooft een pagina. */
.lp-veld__vragen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.lp-veld__vraag {
  padding: 8px 15px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--washi) 30%, transparent);
  background: color-mix(in srgb, var(--washi) 8%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-invert);
  font: inherit; font-size: 16px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color 200ms var(--ease);
}
.lp-veld__vraag:hover { background: color-mix(in srgb, var(--text-invert) 18%, transparent); }
.lp-veld__vraag:focus-visible { outline: 2px solid var(--washi); outline-offset: 2px; }

/* Zonder backdrop-filter: dekking omhoog, zoals overal op deze pagina. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-veld__doos, .lp-kanaal, .lp-veld__vraag, .lp-carrousel__pijl {
    background: color-mix(in srgb, var(--washi) 18%, var(--hero-bg));
  }
}

@media (max-width: 559px) {
  .lp-balkrij { flex-direction: column; }
  .lp-kanalen { flex-direction: row; width: 100%; }
  .lp-kanaal { min-height: 46px; }
}

/* EN ONDER DE 560 EEN KLEINERE SCHIJF, dichter naar de rand.

   Tot 560 pixels is er geen breedte om de pijlen naast de inhoud te zetten:
   twee keer 48 plus marge is een derde van het scherm, en dan houdt de
   chatbalk op de laatste pagina nog 110 pixels over voor het veld zelf — te
   smal om in te typen.

   DAT NAAR ONDEREN ZAKKEN STAAT HIER NIET MEER, 18 september 2026: het geldt
   sinds die datum tot 720 en voor de landingspagina's evengoed, en staat dus
   in het blok hierboven dat beide bestanden delen. (Hier stond
   bottom: 22px; dat zette de schijf acht pixels onder de stippen in plaats
   van ernaast.) Wat hier overblijft is wat alleen dit formaat nodig heeft. */
@media (max-width: 559px) {
  .lp-carrousel__pagina { padding-inline: 10px; }
  .lp-carrousel__pijl { width: 44px; height: 44px; }
  .lp-carrousel__pijl--vorige { left: 16px; }
  .lp-carrousel__pijl--volgende { right: 16px; }
}

/* ===========================================================================
   HET CHATKADER IN DE CARROUSEL BLIJFT OP EEN TELEFOON EEN VLAK, 17 september
   2026, op verzoek.

   Wat er gebeurde. De twee pagina's van de band ("Zo ziet een gesprek met Ōmata eruit"
   en "Probeer het zelf") liggen met inset: 0 op elkaar en wisselen met een
   overvloeier van 380ms; halverwege staan ze dus beide op ongeveer een halve
   dekking. Het chatkader daarbinnen is een ruit zonder vulling — alleen een
   rand en een blur eronder (zie --balk-vlak in pagina.css) — en de helft van
   een rand is bijna niets. Op dat kruispunt was het kader weg.

   Op een breed scherm gaat dat op: daar duurt dezelfde overvloeier evenveel
   maar is het kader groter, en een muisklik op een pijl is één gebeurtenis
   waar je niet in blijft hangen. Een veeg op een telefoon is dat wel — de
   vinger bepaalt het tempo, en die kan midden in de overgang stilstaan.

   De vulling hier is niet nieuw bedacht: het is dezelfde waarde die dit
   bestand al voorschrijft voor een browser zonder backdrop-filter (zie het
   @supports-blok), met dezelfde reden erbij — zonder blur is een doorzichtige
   ruit geen ruit maar een gat, en dan liever dekking dan niets. Ze mengt met
   --hero-bg en volgt dus de tint van de pagina waar ze op staat.

   Alleen in de carrousel en niet op --balk-vlak zelf: dat token draagt ook de
   balk in het hero en de reizende balk, en die staan niet in een overvloeier.
   Wat daar niet stuk is, hoeft hier niet mee te veranderen.
   ========================================================================= */
@media (max-width: 720px) {
  .lp-carrousel .lp-veld__doos {
    background: color-mix(in srgb, var(--washi) 18%, var(--hero-bg));
  }
}