/* Stijlgids 2dehands.be — zie het ontwerpcanvas en de digital stylesheet van
   22 september. Geen inline stijlen in de templates: het beveiligingsbeleid
   staat alleen stijlen van onze eigen server toe. */

/* De stylesheet van 2dehands schrijft Arial voor de body en Bariol Bold voor de
   titels. Arial staat op elk toestel, dus de tekst haalt niets over het netwerk;
   op Android wijst Arial naar Roboto, wat hetzelfde beeld geeft.

   Bariol hebben we nog niet: de geleverde OTF's vallen onder de desktoplicentie
   en die verbiedt het omzetten naar webfont (vragenlijst F4a). Tot de
   webfontlicentie er is staan de titels in Roboto 900 — één bestand, zelf
   gehost, want de CSP laat niets van buiten toe. Komt Bariol binnen, dan is
   --letter-kop de enige regel die verandert. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/statisch/letters/roboto-900.woff2') format('woff2');
}

:root {
  --letter: Arial, Helvetica, system-ui, -apple-system, sans-serif;
  --letter-kop: 'Roboto', Arial, Helvetica, sans-serif;
  --navy: #00285a;
  --navy-diep: #001b3d;
  --geel: #ffbb00;
  --geel-zacht: #fff4d6;
  --geel-tekst: #5c4300;
  --geel-rand: #f0dca6;
  --inkt: #0b1b33;
  --grijs: #54627a;
  --grijs-licht: #7a879b;
  --grijs-uit: #a7b1c0;
  --lijn: #d5dde8;
  --lijn-fijn: #edf1f6;
  --vlak: #f4f6f9;
  --vlak-diep: #e9ecf1;
  --wit: #fff;
  --rood: #c62828;
}

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

/* Een klasse als .knop zet display en wint daarmee van de browserregel voor
   [hidden]. Zonder deze regel blijft alles wat javascript verbergt staan. */
[hidden] {
  display: none !important;
}

html {
  /* Geen `text-size-adjust: 100%` meer. Die regel zet de tekstvergroting van de
     browser uit, en daarmee ook de lettergrootte die iemand zélf heeft
     ingesteld — precies degene die grotere letters nodig heeft, kreeg ze niet.
     Gemeten in de toestelronde van 19 september: met die regel veranderde er
     bij lettergrootte 1,5x helemaal niets. Zie docs/TOESTELRONDE.md,
     bevinding 7.

     `auto` staat er expres, en niet niets: dit is een keuze en geen vergeten
     regel. Wie op de standaardgrootte staat merkt er niets van; de vergroting
     komt alleen bij wie erom vroeg. */
  -webkit-text-size-adjust: auto;

  /* Dit scherm heeft zijn eigen kleuren en is geen donkere variant. Zonder deze
     regel kleuren invoervelden, schuifbalken en systeemknopjes mee met de
     donkere stand van het toestel. Op een festival in het donker staat die
     stand bij bijna iedereen aan.

     "only", niet alleen "light": de gewone vorm zegt welke schema's we
     ondersteunen, de "only"-vorm zegt er bovenop dat de browser de pagina niet
     zelf mag omkeren. Dat verschil is gemeten in de toestelronde van 19
     september — met alleen "light" keerde Chrome's auto dark theme de hele
     flow om, inclusief het geel. Zie docs/TOESTELRONDE.md, bevinding 3. */
  color-scheme: only light;
}

body {
  margin: 0;
  font-family: var(--letter);
  font-size: 16px;
  line-height: 1.5;
  color: var(--inkt);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
}

/* Alles wat in het ontwerp een titel is. Hier komt Bariol Bold zodra de
   webfontlicentie rond is; zie F4a. */
.display,
.titel,
.schermkop,
.autoletter,
.samenvatting-tijd {
  font-family: var(--letter-kop);
}



/* De navy schermen zijn 100dvh hoog, maar daarbuiten — achter de statusbalk en
   onder de werkbalk van de browser — schijnt de achtergrond van de body door.
   Op een iPhone zie je dan een lichte rand boven en onder een navy scherm.
   viewport-fit=cover laat de pagina juist tot in die hoeken lopen, dus daar
   hoort de kleur ook te kloppen.

   Met :has zodat elk navy scherm het vanzelf meekrijgt en niemand het vergeet
   bij een nieuw scherm. Kent een browser :has niet, dan is het precies zoals
   het hiervoor was. */
body:has(> .scherm-merk) {
  background: var(--navy);
}

/* De stapschermen als één geheel, van rand tot rand.

   iOS Safari verft de strook boven de pagina — en die achter zijn werkbalk
   onderaan — met de achtergrond*kleur* van de body. Alleen een vlakke kleur:
   een verloop, een `fixed` laag, een schaduw aan de kopbalk of een kleur op
   `html` komen daar niet (alle vier nagemeten, zie docs/TOESTELRONDE.md).

   Eén kleur voor boven én onder dus. Die wordt navy, waarmee de kopbalk
   doorloopt tot de bovenrand. Het middenstuk houdt zijn lichtgrijs, en de voet
   wordt navy zodat hij aansluit op de strook eronder in plaats van er met een
   naad tegenaan te liggen. */
body:has(> .scherm-stap) {
  background: var(--navy);
}

body:has(> .scherm-stap) > .scherm-stap {
  background: var(--vlak);
}

.scherm-stap > .voet {
  background: var(--navy);
}

img,
svg {
  display: block;
}

/* ---------- Schermen ---------- */

.scherm-merk {
  min-height: 100dvh;
  background: var(--navy);
  color: var(--wit);
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* max() en niet calc(): met optellen komt de ruimte voor de home-indicator
     bovenop onze eigen marge, en dan staat er op een iPhone zestig pixels lucht
     tussen de voorwaarden en de werkbalk van Safari. Zo geldt de grootste van
     de twee, en houdt het scherm onderaan precies genoeg afstand. */
  padding: 26px 24px max(14px, env(safe-area-inset-bottom));
}

.scherm-stap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.inhoud {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 0;
}

.voet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 24px max(18px, env(safe-area-inset-bottom));
}

.voet-in-formulier {
  padding-inline: 0;
}

.groeit {
  flex-grow: 1;
}

.midden {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.stapel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kopgroep {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.afsluiter {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* ---------- Kopbalk van een stapscherm ---------- */

.kop {
  flex-shrink: 0;
  background: var(--navy);
  color: var(--wit);

  /* Hier stond 50px bovenaan, om de inkeping vrij te houden. Maar in een
     browsertab houdt de telefoon die al vrij: de pagina begint onder de
     statusbalk. Die 50px kwam daar dus bovenop, en samen met de strook erboven
     stond er ruim 110 pt leeg navy boven een balk van één regel.

     Nu 16px, gelijk aan de onderkant, plus de veilige zone voor het geval de
     pagina wél tot bovenaan loopt — vanaf het beginscherm bijvoorbeeld. In een
     gewone tab is die nul en verandert er niets aan deze regel. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kop-rij {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pijl én het woord, in één raakvlak. Het merklogo stond hier eerst, maar in
   een stap wil je weten hoe je terugkomt — het merk staat al op de schermen
   waar je binnenkomt en weer uitkomt. */
.kop-terug {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-left: -12px;
  padding-inline: 12px 14px;
  color: var(--wit);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

.kop-stap {
  margin-left: auto;
  font-size: 13px;
  color: rgb(255 255 255 / 70%);
}

.voortgang {
  display: flex;
  gap: 5px;
}

.voortgang-deel {
  flex-grow: 1;
  height: 4px;
  border-radius: 2px;
  background: rgb(255 255 255 / 20%);
}

.voortgang-deel.is-af {
  background: var(--geel);
}

/* ---------- Vasthoudbalk ---------- */

.vasthoud {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 24px;
  background: var(--geel-zacht);
  color: var(--geel-tekst);
  font-size: 13px;
}

.vasthoud svg {
  flex-shrink: 0;
}

/* ---------- Typografie ---------- */

.display {
  margin: 0;
  font-size: clamp(46px, 15vw, 62px);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.titel {
  margin: 0;
  font-size: clamp(30px, 9vw, 38px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.schermkop {
  margin: 0;
  font-size: 28px;
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.blokkop {
  font-size: 17px;
  font-weight: 700;
}

.lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.32;
  font-weight: 500;
}

.tekst {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 21em;
}

.tekst-klein {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.tekst-grijs {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grijs);
}

.bijschrift {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grijs);
}

.bijschrift-midden {
  text-align: center;
}

.eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 65%);
}

.accent {
  color: var(--geel);
}

.op-navy .bijschrift,
.op-navy .tekst {
  color: rgb(255 255 255 / 78%);
}

.foutregel {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--rood);
}

.adresregel {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

/* ---------- Knoppen ---------- */

.knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.knop-vol {
  width: 100%;
}

.knop-klein {
  min-height: 46px;
  font-size: 15px;
}

.knop-links {
  align-self: flex-start;
  min-height: 40px;
  padding: 0;
}

.knop-primair {
  background: var(--geel);
  color: var(--navy);
}

.knop-uit {
  background: #e4e8ee;
  color: #96a1b3;
  cursor: not-allowed;
}

.knop-secundair {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}

/* Op lichtgrijs is een uitgeschakelde knop een grijs blok. Op navy werd dat een
   lichte vlek die harder schreeuwt dan de knop eronder. Hier dus andersom:
   ingehouden, met een randje zodat je ziet dát het een knop is. */
.op-navy .knop-uit {
  background: rgb(255 255 255 / 7%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
  color: rgb(255 255 255 / 45%);
}

.op-navy .knop-tekst {
  color: rgb(255 255 255 / 85%);
}

.op-navy .knop-secundair {
  border-color: rgb(255 255 255 / 40%);
  color: var(--wit);
}

.knop-tekst {
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- Kaarten en blokken ---------- */

.kaart {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--wit);
  border: 1px solid var(--lijn);
}

/* Een witte kaart op een navy scherm. Het scherm zelf zet color: wit voor
   alles eronder, dus zonder deze regels staat er witte tekst op een witte
   kaart. Dat gebeurde meteen toen het vangnet op de uitverkochtpagina kwam:
   alleen het invoerveld was nog te zien. */
.scherm-merk .kaart {
  color: var(--inkt);
}

.scherm-merk .kaart .tekst,
.scherm-merk .kaart .bijschrift {
  color: var(--grijs);
}

.scherm-merk .kaart a:not(.knop) {
  color: var(--navy);
}

.kaart-op-navy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 16%);
}

.blok-navy {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--navy);
  color: var(--wit);
}

.blok-geel {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--geel-zacht);
  color: var(--geel-tekst);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Een uitweg binnen een blok: klikbare tekst en geen knop. Een tweede volle
   knop zou net zo hard roepen als de gele hoofdknop eronder, en dit is de
   uitwijkmogelijkheid — niet de hoofdweg. Het raakvlak blijft 44 px hoog. */
.blok-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blok-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--inkt);
}

.blok-teken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--geel);
  color: var(--navy);
  flex-shrink: 0;
}

.blok-meld {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.blok-meld svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.blok-meld p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.vinkbal,
.waarschuwbal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vinkbal {
  background: var(--geel);
  color: var(--navy);
}

.waarschuwbal {
  background: var(--geel-zacht);
  color: #7a5800;
}

.pil {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin: 0;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
  font-size: 14px;
}

.pil-stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--geel);
  flex-shrink: 0;
}

/* Het logo op de navy schermen. Groter dan in de balk: hier is het de eerste
   indruk en niet een herkenningspunt onderweg. */
.merklogo {
  display: block;
  align-self: flex-start;
  height: 26px;
  width: auto;
}

/* Waar de taalwissel komt te staan (vragenlijst C1). Nu een vast NL-blokje;
   zodra er drie talen zijn wordt dit de knop. */
.taalwissel {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wit);
}

.taalwissel svg {
  display: block;
  border-radius: 2px;
}

/* De rij bovenaan een navy scherm: merk links, taal rechts. */
.merkbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.merkvoet {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: rgb(255 255 255 / 50%);
}

.fijndruk {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: rgb(255 255 255 / 62%);
}

.fijndruk a,
.op-navy a:not(.knop) {
  color: rgb(255 255 255 / 80%);
}

/* ---------- Formulier ---------- */

.veld {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tweekolommen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.label {
  font-size: 13px;
  font-weight: 500;
  color: var(--inkt);
}

.invoer {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--wit);
  font: inherit;
  font-size: 16px; /* 16px voorkomt dat iOS inzoomt bij focus */
  color: var(--inkt);
}

.invoer:focus {
  border-color: var(--navy);
  border-width: 2px;
  padding: 0 14px;
  outline: none;
}

.invoer.is-fout {
  border-color: var(--rood);
  border-width: 2px;
  padding: 0 14px;
}

.vinkjes {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.vinkje {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.45;
}

.vinkje input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--navy);
}

.vangnet {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.vangnet-kop {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- Adressuggesties ---------- */

/* Zoekstand: zodra het adresveld de aandacht krijgt komt het toetsenbord eraan,
   en dan is de helft van het scherm weg. De kop en de introtekst hebben dan hun
   werk gedaan — je bent al aan het typen. Door ze te laten krimpen komt er
   ongeveer 120 px vrij, en dat is het verschil tussen anderhalve suggestie en
   bijna drie. Zie docs/TOESTELRONDE.md, bevinding 1.

   De terugknop blijft staan: die krimpt mee maar verdwijnt niet. */
.is-zoekt .kop {
  padding-top: 14px;
  gap: 8px;
}

.is-zoekt .kopgroep {
  display: none;
}

.is-zoekt .inhoud {
  padding-top: 12px;
}

.suggestielijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--wit);

  /* Was overflow: hidden, alleen om de hoeken af te ronden. Nu scrolt de lijst
     ook zelf: adres.js knipt hem af op wat er naast het toetsenbord overblijft,
     en dan moet je bij de rest kunnen. Zonder JavaScript staat er geen
     max-height en gedraagt hij zich als voorheen. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.suggestielijst li + li .suggestie {
  border-top: 1px solid var(--lijn-fijn);
}

.suggestie {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 13px 15px;
  border: 0;
  background: var(--wit);
  font: inherit;
  text-align: left;
  color: var(--inkt);
  cursor: pointer;
}

.suggestie span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suggestie strong {
  font-size: 15px;
  font-weight: 500;
}

.suggestie-plaats {
  font-size: 13px;
  color: var(--grijs);
}

/* Staat binnen .inhoud, dus de zijmarge komt van dat blok. Stond hij erbuiten,
   dan duwde het groeiende inhoudsblok hem naar de onderkant van het scherm en
   hing hij ver onder het adresveld. */
.laadkaart {
  padding: 20px;
  border-radius: 16px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.laadkaart.is-verborgen {
  display: none;
}

.laadkaart-kop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tolletje {
  width: 26px;
  height: 26px;
  border: 3px solid var(--geel-zacht);
  border-top-color: var(--geel);
  border-radius: 50%;
  flex-shrink: 0;
  animation: draai 0.9s linear infinite;
}

@keyframes draai {
  to {
    transform: rotate(360deg);
  }
}

.balk {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--vlak-diep);
  overflow: hidden;
}

.balk-vul {
  display: block;
  height: 6px;
  width: 40%;
  border-radius: 3px;
  background: var(--geel);
  animation: schuif 1.4s ease-in-out infinite;
}

@keyframes schuif {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .tolletje,
  .balk-vul {
    animation: none;
  }
}

/* ---------- Tijdsloten ---------- */

.slotraster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 66px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--wit);
  font: inherit;
  color: var(--inkt);
  cursor: pointer;
}

.slot.is-vol {
  background: var(--vlak-diep);
  border-color: #dfe4ec;
  color: var(--grijs-uit);
  cursor: not-allowed;
}

.slot-tijd {
  font-size: 18px;
  font-weight: 700;
}

.slot-vrij {
  font-size: 12px;
  color: var(--grijs);
}

.slot.is-vol .slot-vrij {
  color: var(--grijs-uit);
}

/* ---------- Auto's ---------- */

.autolijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.autokaart {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--lijn);
  border-radius: 16px;
  background: var(--wit);
  font: inherit;
  text-align: left;
  color: var(--inkt);
  cursor: pointer;
}

.autokaart.is-gekozen {
  background: var(--navy);
  border: 2px solid var(--geel);
  color: var(--wit);
}

.autokaart.is-gekozen .bijschrift {
  color: rgb(255 255 255 / 78%);
}

.autokaart-beeld {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 62px;
  border-radius: 10px;
  background: var(--vlak-diep);
  color: var(--navy);
  flex-shrink: 0;
}

.autokaart.is-gekozen .autokaart-beeld {
  background: rgb(255 255 255 / 10%);
  color: var(--geel);
}

.autokaart-tekst {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 17px;
}

.prijs {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--geel-zacht);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.autokaart.is-gekozen .prijs {
  background: var(--geel);
}

/* ---------- Samenvatting en bon ---------- */

.samenvatting {
  border: 1px solid var(--lijn);
  border-radius: 16px;
  background: var(--wit);
  overflow: hidden;
}

.samenvatting-kop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--navy);
  color: var(--wit);
}

.samenvatting-kop > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.autoletter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgb(255 255 255 / 12%);
  color: var(--geel);
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}

.samenvatting-tijd {
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--geel);
}

.samenvatting-auto {
  font-size: 14px;
  color: rgb(255 255 255 / 85%);
}

.samenvatting-lijst,
.bonlijst {
  margin: 0;
  padding: 2px 18px 12px;
}

.samenvatting-lijst > div,
.bonlijst > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--lijn-fijn);
}

.samenvatting-lijst > div:last-child,
.bonlijst > div:last-child {
  border-bottom: 0;
}

.samenvatting-lijst dt,
.bonlijst dt {
  font-size: 14px;
  color: var(--grijs);
}

.samenvatting-lijst dd,
.bonlijst dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

.bonlijst {
  padding: 4px 18px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 16px;
  background: rgb(255 255 255 / 7%);
}

.bonlijst > div {
  border-bottom-color: rgb(255 255 255 / 14%);
}

.bonlijst dt {
  color: rgb(255 255 255 / 70%);
}

.bon-nummer {
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---------- Toegankelijkheid ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--geel);
  outline-offset: 2px;
}

@media (min-width: 560px) {
  .scherm-merk,
  .inhoud,
  .voet,
  .kop,
  .vasthoud,
  .laadkaart {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }
}

/* ---------- Voorwaarden en privacyverklaring ---------- */

.document {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}

.document h2 {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.document h2:first-child {
  margin-top: 0;
}

.document p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grijs);
}

.document strong {
  color: var(--inkt);
  font-weight: 700;
}

.document ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grijs);
}

.document li::marker {
  color: var(--geel-rand);
}

/* Een knop die eruitziet als een link. De voorwaarden en de privacyverklaring
   sturen het formulier eerst naar de server, zodat ingevulde gegevens niet
   verdwijnen als je ze openslaat. */
.tekstlink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Een straat zonder huisnummer: te kiezen om het zoekveld aan te vullen, maar
   duidelijk iets anders dan een adres waarmee je verder kunt. */
.suggestie-straat {
  color: var(--grijs);
}

.suggestie-straat strong {
  color: var(--inkt);
}