/* ==========================================================================
   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;
}

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;
  /* Een knoplabel hoort op één regel. Zonder dit brak 'Mijn DN Traffic' in
     de kop af zodra het menu ernaast krap kwam te zitten, en dan leest het
     als twee losse woorden in plaats van als één knop. */
  white-space: nowrap;
  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: 1rem;
  min-height: 76px;
  /* Nooit op twee regels. Past het niet, dan hoort het menu in te klappen,
     niet om te vallen. */
  flex-wrap: nowrap;
}
/* 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%;
}

/* Zeven menu-items naast een logo en twee knoppen is krap. Vandaar de
   ingehouden maten: met de oude ruimte paste de kop pas vanaf 1350 pixels,
   en daaronder viel het menu op twee regels. */
.nav { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; flex-wrap: nowrap; }
.nav a {
  padding: 0.55rem 0.5rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  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); }

/* Niet meekrimpen met het menu: de knoppen hebben een vaste maat nodig,
   anders knijpt de navigatie ze samen zodra er een menu-item bij komt. */
.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.header-actions .btn { padding: 0.62rem 0.9rem; font-size: 0.88rem; }

.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); }
/* Vangnet voor het Nederlands, alleen binnen de smalle blokken.
   Samenstellingen als 'voorwaarschuwingswagen' zijn breder dan een kaart en
   zouden er anders dwars uit steken.

   Bewust NIET op body: een grote kop staat in een smalle kolom en is dan ook
   breder dan zijn vak, waarop de browser er middenin gaat knippen. Zo belandde
   het vraagteken van 'Wat kost een verkeersregelaar?' op een eigen regel. */
.card, .keuze, .process__step, .beheer-tabel td { overflow-wrap: break-word; }

/* 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, als hij die aan boord heeft. Zo niet, dan doen de zachte
   koppeltekens uit View::kop() het werk. */
.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; }

/* :not(.keuze) is geen sierlijkheid maar noodzaak.
   Een keuzeblok is zelf een <label>. Stond het binnen een .veld, dan won deze
   regel van .keuze en werd de kaart een blok met de letters van een
   formulierlabel: kleiner, zwaarder en met marge eronder. Daardoor zag stap 2
   van de offertewizard er heel anders uit dan stap 1. */
.veld label:not(.keuze),
.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; }

.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; }
/* Het vinkje is met appearance:none zelf getekend. Het standaardvakje is per
   browser anders van formaat en valt weg tegen een blok van deze afmeting.
   Deze regels gelden voor élke keuze op de site, zodat stap 1 en stap 2 van
   de offertewizard er niet verschillend uitzien. */
.keuze 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 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:hover input { border-color: var(--ink-faint); }
.keuze input:checked { background: var(--dn-yellow); border-color: var(--dn-yellow); }
.keuze input:checked::before { transform: rotate(-45deg) scale(1); opacity: 1; }
/* Een rond vakje voor een keuze waarvan er maar één tegelijk kan. */
.keuze input[type="radio"] { border-radius: 50%; }

/* 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);
}


/* 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:has(input:checked) { border: none; background: 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; }
}

/* --- Kopbalk op kleiner wordende schermen --------------------------------
   Logo, zeven menu-items en twee knoppen passen samen pas vanaf ongeveer
   1280 pixels. Daaronder moet er iets wijken, en de volgorde daarvan is een
   keuze: eerst de portaalknop (die staat ook in de footer), daarna pas het
   menu (dat klapt in tot een knop). Andersom zou het menu verdwijnen terwijl
   er nog ruimte zat.
   ------------------------------------------------------------------------ */
@media (max-width: 1280px) {
  .header-actions .btn--portal { display: none; }
}

/* Onder deze breedte past het menu zelf niet meer naast het logo. Het klapt
   in tot de menuknop, en daarmee komt er ruimte vrij: de portaalknop kan
   terug in beeld. */
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .header-actions .btn--portal { display: inline-flex; }

  .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; }
}

/* Op een telefoon is er naast het logo maar plaats voor de menuknop en de
   gele CTA. Mijn DN Traffic blijft bereikbaar via de footer. */
@media (max-width: 720px) {
  .header-actions .btn--portal { display: none; }
}

/* Op een telefoon telt elke pixel in de kop: logo, menuknop en de gele CTA
   samen zijn breder dan het scherm. Het logo mag kleiner, en onder de 420
   pixels valt het tweede woord van de knop weg. 'Offerte' is dan nog steeds
   duidelijk, en de knop past. */
@media (max-width: 640px) {
  .site-header__inner { gap: 0.6rem; }
  .logo img { height: 18px; }
  .header-actions .btn { padding: 0.55rem 0.8rem; }
}

/* Het label is één flex-item, niet twee.
   Een knop is een flex-container met tussenruimte tussen zijn kinderen. Stond
   het tweede woord los in de knop, dan telde die tussenruimte er middenin mee
   en viel er een gat tussen 'Offerte' en 'aanvragen'. */
.btn > span { display: inline; }

/* Bij 421 pixels paste de volledige knop nog precies, met nul pixels over.
   Dat is geen marge maar toeval: een iets andere letterweergave en het valt
   alsnog om. Vandaar het kortere label vanaf 480. */
@media (max-width: 480px) {
  .btn__staart { display: none; }
}

/* De kleinste telefoons die nog rondgaan. */
@media (max-width: 360px) {
  .logo img { height: 15px; }
}

@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; }
}

/* --- Video in een nieuwsbericht -----------------------------------------
   Staand beeld uit een telefoon of drone. Zonder bovengrens vult zo een
   video op een breed scherm anderhalf beeldscherm en duwt hij de tekst
   waar het bericht om begonnen was volledig weg. */
.video {
    margin: 0 auto;
    max-width: 340px;
}

.video__start {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--dn-black);
    cursor: pointer;
    line-height: 0;
}

.video__start img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease, opacity .3s ease;
}

.video__start:hover img,
.video__start:focus-visible img {
    transform: scale(1.03);
    opacity: .85;
}

.video__start:focus-visible {
    outline: 3px solid var(--dn-yellow);
    outline-offset: 3px;
}

.video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.video__play::before {
    content: '';
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--dn-yellow);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    transition: transform .2s ease;
}

/* De driehoek, iets naar rechts omdat een driehoek optisch links zwaarder
   oogt dan hij is. */
.video__play::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--dn-black);
    transform: translateX(3px);
}

.video__start:hover .video__play::before {
    transform: scale(1.08);
}

.video__frame {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 14px;
    background: var(--dn-black);
}

@media (prefers-reduced-motion: reduce) {
    .video__start img,
    .video__play::before {
        transition: none;
    }

    .video__start:hover img,
    .video__start:focus-visible img {
        transform: none;
    }

    .video__start:hover .video__play::before {
        transform: none;
    }
}