/* ==========================================================================
   DN Traffic — designsysteem
   Tokens overgenomen uit mijn.dntraffic.nl en dnopleidingen.nl, zodat de drie
   platformen zichtbaar één ecosysteem vormen.

   Handgeschreven in plaats van Tailwind: dit is een marketingsite waar Core
   Web Vitals bepalend zijn. Zonder build-stap en zonder ongebruikte klassen
   blijft de CSS klein en volledig voorspelbaar.
   ========================================================================== */

/* --- Font --------------------------------------------------------------- */
/* Inter zelf gehost. Google Fonts als CDN kost een extra verbinding en een
   render-blokkerend verzoek naar een derde partij; dat weegt niet op tegen
   47 kB die we ook zelf kunnen serveren.
   font-display: swap voorkomt onzichtbare tekst tijdens het laden (FOIT). */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Latijnse subset — de rest hebben we niet nodig. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Merkkleuren — identiek aan het portaal en het opleidingsplatform */
  --dn-yellow:   #EEFF00;
  --dn-black:    #0a0a0a;
  --dn-dark:     #1a1a1a;
  --dn-sidebar:  #0f0f0f;

  /* Afgeleide vlakken. Neutralen hebben een lichte gele bias, zodat ze
     bij het accent horen in plaats van er los naast te staan. */
  --surface:       #141414;
  --surface-raised:#1f1f1e;
  --line:          #2c2c29;
  --line-soft:     #232320;

  --ink:        #f2f2ec;
  --ink-dim:    #a8a8a0;
  --ink-faint:  #74746c;
  --ink-invert: #0a0a0a;

  --fout:        #e8724c;
  --fout-soft:   rgba(232, 114, 76, 0.08);

  --yellow-soft: rgba(238, 255, 0, 0.10);
  --yellow-line: rgba(238, 255, 0, 0.32);

  /* Typografie */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.38vw, 1.44rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.78vw, 2.05rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 3rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.5rem);

  /* Ritme */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 68ch;
  --radius: 8px;          /* gelijk aan de knoppen in het portaal */
  --radius-lg: 14px;
  --section: clamp(3.5rem, 8vw, 7rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dn-black);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Vangnet voor het Nederlands: samenstellingen als
     'beroepsverkeersregelaars' of 'voorwaarschuwingswagen' zijn breder dan
     een smalle kaart, en zouden er anders dwars uit steken. */
  overflow-wrap: break-word;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Zichtbare focus is een toegankelijkheidseis, geen optie. */
:focus-visible {
  outline: 3px solid var(--dn-yellow);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--dn-yellow); color: var(--ink-invert); }

/* --- Typografie --------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); letter-spacing: -0.028em; }
h3 { font-size: var(--step-1); letter-spacing: -0.02em; font-weight: 700; }
h4 { font-size: var(--step-0); font-weight: 700; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--yellow-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s var(--ease);
}
.prose a:hover { text-decoration-color: var(--dn-yellow); }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dn-yellow);
  margin: 0 0 1rem;
}
.lead { font-size: var(--step-1); color: var(--ink-dim); line-height: 1.5; font-weight: 400; }
.dim { color: var(--ink-dim); }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), 1200px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 820px); }

section { padding-block: var(--section); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head p { color: var(--ink-dim); font-size: var(--step-1); margin-top: 0.75rem; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* Verbergen moet altijd winnen.
   [hidden] komt uit de browserstijl en verliest daarmee van elke eigen regel
   die display zet, zoals .btn hieronder. Zonder deze regel stond de knop
   'Aanvraag versturen' al vanaf stap 1 in beeld. */
[hidden] { display: none !important; }

/* --- Knoppen ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Zwarte tekst op geel. Wit op geel is onleesbaar en komt nergens voor. */
.btn--primary { background: var(--dn-yellow); color: var(--ink-invert); }
.btn--primary:hover { background: #f6ff4d; }

.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--dn-yellow); color: var(--dn-yellow); }

/* Terugstap in de wizard.
   Een enkel randje in --line is nauwelijks te onderscheiden van de
   achtergrond; dan leest 'Vorige' als los tekstje in plaats van als knop.
   Een eigen vlak maakt hem herkenbaar zonder te concurreren met 'Volgende'. */
.btn--stil {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}
.btn--stil:hover {
  background: var(--surface);
  border-color: var(--ink-faint);
  color: var(--ink);
}
.btn--stil svg { opacity: 0.65; }
.btn--stil:hover svg { opacity: 1; }

/* Mijn DN Traffic in de header.
   Een enkel randje in --line valt weg tegen de donkere balk erachter. Een
   lichte vulling maakt er een echte knop van, terwijl hij ondergeschikt
   blijft aan de gele CTA ernaast: die moet de aandacht houden. */
.btn--portal {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}
.btn--portal:hover {
  background: rgba(238, 255, 0, 0.12);
  border-color: var(--dn-yellow);
  color: var(--dn-yellow);
}
.btn--portal svg { opacity: 0.7; transition: opacity 0.18s var(--ease); }
.btn--portal:hover svg { opacity: 1; }

.btn--dark { background: var(--dn-black); color: var(--ink); border-color: var(--dn-black); }

.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}
/* Het wordmerk is 804x89 — een brede verhouding (9:1). Schalen op hoogte,
   met width:auto, zodat het nooit vervormt. De width/height-attributen in de
   HTML blijven staan voor de aspect ratio; die voorkomen layout shift. */
.logo { display: flex; align-items: center; flex: none; }
.logo img {
  height: clamp(20px, 2.4vw, 28px);
  width: auto;
  max-width: 100%;
}

.nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav a {
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--surface-raised); }
.nav a[aria-current="page"] { color: var(--dn-yellow); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-actions .btn { padding: 0.62rem 1.05rem; font-size: 0.9rem; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.7rem; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(4rem, 11vw, 8.5rem); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg picture { display: block; width: 100%; height: 100%; }

/* De mensen staan rechts van het midden. Bij een smal scherm snijdt cover de
   zijkanten weg, dus houden we het beeldmiddelpunt daar iets naartoe. */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.80) 48%, rgba(10,10,10,0.38) 100%);
}
.hero h1 { max-width: 16ch; }
.hero__payoff {
  color: var(--dn-yellow);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}
.hero__intro { font-size: var(--step-1); color: var(--ink-dim); max-width: 52ch; margin: 1.5rem 0 2.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --- Kaarten ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}
a.card:hover { transform: translateY(-4px); border-color: var(--yellow-line); }
/* Afbreken met een streepje in plaats van midden in een lettergreep. Werkt
   omdat <html lang="nl"> is gezet: de browser gebruikt dan de Nederlandse
   afbreekregels. Alleen op de smalle blokken, niet op de grote koppen. */
.card h3, .card h4,
.process__step h4,
.keuze__titel { hyphens: auto; -webkit-hyphens: auto; }

.card h3 { margin: 0; }
.card p { color: var(--ink-dim); font-size: 0.95rem; margin: 0; }
.card__icon { width: 40px; height: 40px; color: var(--dn-yellow); }
.card__more { margin-top: auto; padding-top: 0.6rem; color: var(--dn-yellow); font-weight: 700; font-size: 0.9rem; }

.card--photo { padding: 0; overflow: hidden; }
.card--photo img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card--photo .card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.card__meta { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }

/* --- Procesketen (de tien stappen) -------------------------------------- */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.process__step { background: var(--surface); padding: 1.4rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.process__num {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--dn-yellow);
}
.process__step h4 { font-size: 0.98rem; }
.process__step p { font-size: 0.83rem; color: var(--ink-faint); margin: 0; }

/* --- Blok met gele achtergrond (spaarzaam gebruiken) -------------------- */
.band-yellow { background: var(--dn-yellow); color: var(--ink-invert); }
.band-yellow h2, .band-yellow p { color: var(--ink-invert); }
.band-yellow p { opacity: 0.78; }
.band-dark { background: var(--surface); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 700; font-size: var(--step-0);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  color: var(--dn-yellow); font-size: 1.5rem; font-weight: 400; line-height: 1;
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 2.5rem 1.4rem 0; color: var(--ink-dim); }

/* --- Feitenblok projectcase --------------------------------------------- */
.feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feiten > div { background: var(--surface); padding: 1.25rem 1.4rem; }
.feiten dt {
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 0.4rem;
}
.feiten dd { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.015em; }

/* --- Tabellen ----------------------------------------------------------- */
/* Brede tabellen scrollen binnen hun eigen container, zodat de pagina zelf
   nooit horizontaal meebeweegt op mobiel. */
.scroll-x { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
table.vergelijking { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 0.94rem; }
table.vergelijking th,
table.vergelijking td { text-align: left; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.vergelijking thead th {
  background: var(--surface-raised);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 700; white-space: nowrap;
}
table.vergelijking tbody th { font-weight: 650; color: var(--ink); }
table.vergelijking td { color: var(--ink-dim); }
table.vergelijking tbody tr:last-child th,
table.vergelijking tbody tr:last-child td { border-bottom: none; }

/* Lijsten binnen lopende tekst */
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--dn-yellow); }
.prose h3 { margin: 2rem 0 0.6rem; }
.prose strong { color: var(--ink); font-weight: 650; }

/* --- Nieuwslijst --------------------------------------------------------- */
.nieuwslijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.nieuwslijst li { border-bottom: 1px solid var(--line-soft); }
.nieuwslijst a {
  display: block;
  padding: 1.6rem 1rem 1.6rem 0;
  transition: padding-left 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nieuwslijst a:hover { padding-left: 1rem; background: var(--surface); }
.nieuwslijst time {
  display: block;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); margin-bottom: 0.5rem;
}
.nieuwslijst h2 {
  font-size: var(--step-1); letter-spacing: -0.02em; margin-bottom: 0.4rem;
}
.nieuwslijst p { color: var(--ink-dim); font-size: 0.95rem; margin: 0; max-width: 70ch; }
.nieuwslijst .card__meta { display: inline-block; margin-top: 0.6rem; }

/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs { padding: 1.1rem 0; font-size: 0.84rem; color: var(--ink-faint); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "/"; margin-left: 0.45rem; color: var(--ink-faint); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a:hover { color: var(--dn-yellow); }
.breadcrumbs [aria-current="page"] { color: var(--ink-dim); }

/* --- Calamiteitenbalk --------------------------------------------------- */
.emergency {
  background: var(--dn-yellow);
  color: var(--ink-invert);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  justify-content: space-between;
}
.emergency strong { font-size: var(--step-1); letter-spacing: -0.02em; }
.emergency__number { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }

/* --- Formulieren en offertewizard --------------------------------------- */
.veld { margin-bottom: 1.4rem; }
.veld-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1.2rem; }

.veld label,
.veld__label {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  margin-bottom: 0.45rem;
  letter-spacing: -0.005em;
}
.veld__hint { font-size: 0.82rem; color: var(--ink-faint); font-weight: 400; margin: 0.4rem 0 0; }

.veld input[type="text"],
.veld input[type="tel"],
.veld input[type="email"],
.veld input[type="date"],
.veld input[type="time"],
.veld input[type="number"],
.veld input[type="file"],
.veld textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.veld input:hover, .veld textarea:hover { border-color: var(--ink-faint); }
.veld input:focus, .veld textarea:focus { border-color: var(--dn-yellow); background: var(--surface-raised); }
.veld textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.veld input::placeholder, .veld textarea::placeholder { color: var(--ink-faint); }

/* Datum- en tijdvelden tonen in donkere modus een lichte picker-icoon */
.veld input[type="date"]::-webkit-calendar-picker-indicator,
.veld input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }

.veld input[type="file"] { padding: 0.65rem 0.8rem; cursor: pointer; }
.veld input[type="file"]::file-selector-button {
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 0.45rem 0.9rem; margin-right: 0.9rem; cursor: pointer; font-weight: 600;
}

/* --- Keuzeblokken -------------------------------------------------------- */
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.7rem; }
.keuzes--compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.keuze {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600; font-size: 0.95rem;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.keuze:hover { border-color: var(--ink-faint); }
.keuze:has(input:checked) { border-color: var(--dn-yellow); background: var(--yellow-soft); }
.keuze:has(input:focus-visible) { outline: 3px solid var(--dn-yellow); outline-offset: 2px; }
.keuze input { accent-color: var(--dn-yellow); width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.08rem; }

/* Keuzekaarten in stap 1.
   Meerdere onderdelen tegelijk mogen worden aangekruist, dus moet in een
   oogopslag zichtbaar zijn welke aan staan. Het vinkje is met appearance:none
   zelf getekend: het standaardvakje is per browser anders van formaat en valt
   weg tegen een kaart van deze afmeting. */
.keuzes--kaart { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; }

.keuze--kaart {
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem;
  border-width: 1.5px;
}
.keuze--kaart:has(input:checked) { border-color: var(--dn-yellow); background: var(--yellow-soft); }

.keuze__tekst { display: flex; flex-direction: column; gap: 0.2rem; }
.keuze__titel { font-weight: 680; letter-spacing: -0.01em; line-height: 1.35; }
.keuze__uitleg {
  font-size: 0.82rem; font-weight: 400; line-height: 1.45;
  color: var(--ink-dim);
}

.keuze--kaart input {
  appearance: none; -webkit-appearance: none;
  width: 1.35rem; height: 1.35rem;
  margin: 0.1rem 0 0;
  flex: none;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--dn-black);
  display: grid; place-content: center;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.keuze--kaart input::before {
  content: "";
  width: 0.7rem; height: 0.38rem;
  margin-top: -0.16rem;
  border-left: 2.5px solid var(--ink-invert);
  border-bottom: 2.5px solid var(--ink-invert);
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: transform 0.16s var(--ease), opacity 0.12s var(--ease);
}
.keuze--kaart:hover input { border-color: var(--ink-faint); }
.keuze--kaart input:checked { background: var(--dn-yellow); border-color: var(--dn-yellow); }
.keuze--kaart input:checked::before { transform: rotate(-45deg) scale(1); opacity: 1; }

/* De complete oplossing is geen zevende onderdeel maar een alternatief voor
   alle andere. Volle breedte en een eigen accent, zodat dat te zien is. */
.keuze--totaal {
  grid-column: 1 / -1;
  border-color: var(--yellow-line);
  background: linear-gradient(90deg, var(--yellow-soft), transparent 70%);
}
.keuze--totaal .keuze__titel { color: var(--dn-yellow); }

/* Doorgeklikt zonder iets te kiezen. */
.keuzes--fout .keuze--kaart { border-color: rgba(232, 114, 76, 0.45); }
.veld__fout {
  color: var(--fout); font-size: 0.9rem; font-weight: 600;
  margin: 0.9rem 0 0;
}
.veld__uitleg { color: var(--ink-dim); font-size: 0.92rem; margin: -0.7rem 0 1.3rem; }

.keuze--inline { border: none; background: none; padding: 0; font-weight: 400; font-size: 0.92rem; }
.keuze--inline:hover { border: none; }
.keuze--inline span { color: var(--ink-dim); }
.veld--akkoord { margin-top: 1.8rem; }

/* --- Wizard -------------------------------------------------------------- */
.wizard fieldset { border: none; margin: 0 0 2.5rem; padding: 0; }
.wizard legend {
  font-size: var(--step-1); font-weight: 750; letter-spacing: -0.02em;
  margin-bottom: 1.4rem; padding: 0;
  display: flex; align-items: baseline; gap: 0.7rem;
}
.wizard__nr {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--dn-yellow); font-variant-numeric: tabular-nums;
}

.wizard__voortgang {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  counter-reset: stap;
}
.wizard__voortgang li {
  flex: 1 1 130px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.7rem;
  border-top: 3px solid var(--line);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wizard__voortgang li[aria-current="step"] { color: var(--dn-yellow); border-top-color: var(--dn-yellow); }
.wizard__voortgang li.is-gedaan { color: var(--ink-dim); border-top-color: var(--ink-faint); }

.wizard__acties {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
}
/* Vooruit staat rechts, terug links: dezelfde volgorde als de stappenbalk. */
.wizard__acties #wizard-volgende,
.wizard__acties #wizard-versturen { margin-left: auto; }

/* --- Meldingen ----------------------------------------------------------- */
.melding {
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
  margin: 1.75rem 0;
  border: 1px solid var(--line);
  background: var(--surface);
}
.melding ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.melding li { margin-bottom: 0.35rem; }
.melding--fout { border-color: var(--fout); background: var(--fout-soft); }
.melding--spoed { border-color: var(--dn-yellow); background: var(--yellow-soft); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--dn-sidebar); border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.5rem; }
.footer-col h4 { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: var(--ink-dim); font-size: 0.92rem; }
.footer-col a:hover { color: var(--dn-yellow); }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.82rem; color: var(--ink-faint);
}

/* --- Animaties ---------------------------------------------------------- */
/* Alleen transform en opacity, zodat de hoofdthread vrij blijft. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Mobiel ------------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  /* De portaalknop wijkt op smalle schermen voor de gele CTA. Hij blijft
     bereikbaar via de footer, zodat een bezoeker op de telefoon niet zonder
     ingang naar Mijn DN Traffic komt te zitten. */
  .header-actions .btn--portal { display: none; }

  .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    inset: 76px 0 auto;
    background: var(--dn-black);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.5rem;
    gap: 0.15rem;
    margin-left: 0;
  }
  .nav.is-open a { padding: 0.85rem 0.6rem; font-size: 1.05rem; }
}

@media (max-width: 640px) {
  .emergency { flex-direction: column; align-items: flex-start; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* Op een smal scherm staat de tekst over de volle breedte, dus ook over de
     lichte kant van de foto. Een verloop van links naar rechts helpt dan niet:
     het moet van onder naar boven, met genoeg dekking achter de tekst. */
  .hero::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.88) 45%, rgba(10,10,10,0.95) 100%);
  }
  .hero__bg img { object-position: 68% center; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .hero__bg, .btn { display: none; }
  body { background: #fff; color: #000; }
}