/* ════════════════════════════════════════════════════════════════════
   MorphiCustom v2 — design system "Ink & Violet" (restyle 10-7-2026)
   Licht, kalm en vertrouwenwekkend: wit canvas + Morphi-paars, donkere
   inkt alleen voor hero/footer/accenten. Space Grotesk/Inter self-hosted.
   Let op: klassen met "lime" in de naam zijn historisch — ze zijn
   geherstyled naar wit/violet (geen lime meer in het palet).
   ════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-var-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ink: #14101D;
  --ink-2: #1C1528;
  --ink-3: #251C38;
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --zacht: #F7F6FA;
  --violet: #6D28D9;
  --violet-hl: #7C3AED;
  --violet-dk: #5B21B6;
  --violet-lt: #F3F0FA;
  --violet-md: #DDD6FE;
  --violet-zacht: #A78BFA;
  --text: #17131F;
  --muted: #64606E;
  --border: #E9E7EF;
  --groen: #059669;
  --rood: #DC2626;
  --oranje: #D97706;
  --radius: 12px;
  --radius-lg: 18px;
  --schaduw: 0 8px 28px rgba(23, 19, 31, .08);
  --schaduw-zwaar: 0 20px 60px rgba(20, 16, 29, .22);
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --layer-lines: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(109,40,217,.04) 7px 8px);
  --layer-lines-licht: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255,255,255,.03) 7px 8px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Het hidden-attribuut moet altijd winnen — anders overrulen display-klassen
   (.btn, .prijs-regels…) het en blijven verborgen elementen toch zichtbaar. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--violet); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.02em; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ── Knoppen ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--radius);
  font: 700 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: none; transition: transform .18s, box-shadow .18s, background .18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-dk); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(109,40,217,.28); }
/* .btn-lime: historische naam — inmiddels de "witte" knop voor donkere vlakken */
.btn-lime { background: #fff; color: var(--ink); }
.btn-lime:hover { background: var(--violet-lt); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.btn-ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 600; }
.btn-ghost:hover { background: rgba(255,255,255,.15); }
.btn-omrand { background: transparent; border: 1.5px solid var(--violet-md); color: var(--violet-dk); font-weight: 600; }
.btn-omrand:hover { border-color: var(--violet); background: var(--violet-lt); }
.btn-groot { padding: 17px 34px; font-size: 16px; }
.btn-klein { padding: 9px 16px; font-size: 13px; border-radius: 10px; }

/* ── Navigatie ───────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 248, .92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.site-nav.scrolled { border-bottom-color: var(--border); box-shadow: 0 4px 24px rgba(23,17,31,.06); }
.nav-inner { max-width: 1180px; margin: 0 auto; height: 70px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.nav-logo-mark {
  width: 38px; height: 38px; border-radius: 11px; background: var(--violet);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(109,40,217,.28); transition: transform .25s;
}
.nav-logo:hover .nav-logo-mark { transform: scale(1.05); }
.nav-logo-mark svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nav-logo-mark.lime { background: var(--violet-hl); box-shadow: 0 4px 12px rgba(124,58,237,.3); }
.nav-logo-mark.lime svg { stroke: #fff; }
.nav-logo-tekst { font: 700 19px/1 var(--font-display); letter-spacing: -.03em; }
.nav-logo-tekst em { font-style: normal; color: var(--violet); }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--muted); font: 600 14px/1 var(--font-body); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-acties { display: flex; align-items: center; gap: 18px; }
.nav-contact { color: var(--muted); font: 600 14px/1 var(--font-body); text-decoration: none; }
.nav-contact:hover { color: var(--text); }
.nav-cta { padding: 11px 20px; font-size: 14px; }
.taal-switch { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.taal-knop { padding: 6px 11px; font: 700 12px/1 var(--font-body); color: var(--muted); text-decoration: none; letter-spacing: .04em; transition: background .15s, color .15s; }
.taal-knop:hover { color: var(--text); }
.taal-knop.actief { background: var(--violet); color: #fff; }
.taal-switch.mobile { align-self: flex-start; margin-top: 14px; }
.nav-ham { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-ham span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }
.mobile-nav { display: none; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 28px 26px; box-shadow: 0 16px 32px rgba(11,7,19,.10); }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font: 600 15px/1 var(--font-body); }
.mobile-nav .m-cta { margin-top: 16px; background: var(--violet); color: #fff; text-align: center; padding: 15px; border-radius: var(--radius); border-bottom: none; }

/* ── Flash ───────────────────────────────────────────────────────── */
.flash-stapel { max-width: 1180px; margin: 14px auto 0; padding: 0 28px; display: grid; gap: 8px; }
.flash { padding: 13px 18px; border-radius: 12px; font: 600 14px/1.5 var(--font-body); border: 1px solid; }
.flash-ok { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.flash-fout { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.flash-info { background: var(--violet-lt); border-color: var(--violet-md); color: var(--violet-dk); }

/* ── Secties ─────────────────────────────────────────────────────── */
.sectie { padding: 92px 0; }
.sectie-strak { padding: 64px 0; }
.sectie-donker { background: var(--ink); color: #fff; position: relative; }
.sectie-donker::before { content: ''; position: absolute; inset: 0; background: var(--layer-lines-licht); pointer-events: none; }
.sectie-donker > * { position: relative; }
.sectie-zacht { background: var(--zacht); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 14px;
}
.kicker::before { content: ''; width: 22px; height: 2px; background: var(--violet); border-radius: 2px; }
.sectie-donker .kicker { color: var(--violet-zacht); }
.sectie-donker .kicker::before { background: var(--violet-zacht); }
.h-display { font-size: clamp(30px, 4vw, 48px); font-weight: 700; margin-bottom: 16px; }
.h-sub { font-size: 17px; color: var(--muted); max-width: 560px; line-height: 1.75; }
.sectie-donker .h-sub { color: rgba(255,255,255,.65); }
.sectie-kop { margin-bottom: 52px; }
.sectie-kop.midden { text-align: center; }
.sectie-kop.midden .h-sub, .sectie-kop.midden .kicker { margin-left: auto; margin-right: auto; }

/* ── Kaarten & grids ─────────────────────────────────────────────── */
.kaart {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  transition: transform .2s, box-shadow .2s;
}
.kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.kaart h3 { font-size: 19px; margin-bottom: 10px; }
.kaart p { font-size: 14.5px; color: var(--muted); line-height: 1.75; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.stap-nummer {
  width: 42px; height: 42px; border-radius: 12px; background: var(--violet-lt);
  color: var(--violet-dk); font: 700 17px/1 var(--font-display);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  border: 1px solid var(--violet-md);
}
.icoon-chip {
  width: 48px; height: 48px; border-radius: 13px; background: var(--violet-lt);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.icoon-chip svg { width: 23px; height: 23px; stroke: var(--violet); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
  border-radius: 99px; font: 700 12px/1.4 var(--font-body);
  background: var(--violet-lt); color: var(--violet-dk);
}
.badge-lime { background: var(--violet); color: #fff; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 99px; font: 700 13px/1.4 var(--font-body); color: #fff; }
.status-badge .stip { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.85); }

/* ── Formulieren ─────────────────────────────────────────────────── */
.veld { margin-bottom: 20px; }
.veld label { display: block; font: 600 14px/1.4 var(--font-body); margin-bottom: 7px; }
.veld .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.veld input[type=text], .veld input[type=email], .veld input[type=tel], .veld input[type=number],
.veld input[type=url], .veld input[type=password], .veld select, .veld textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px;
  font: 500 15px/1.4 var(--font-body); color: var(--text); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld .fout-tekst { color: var(--rood); font-size: 13px; margin-top: 5px; font-weight: 600; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.verplicht::after { content: ' *'; color: var(--violet); }

.keuze-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.keuze-kaarten.twee { grid-template-columns: 1fr 1fr; }
.keuze-kaart { position: relative; }
.keuze-kaart input { position: absolute; opacity: 0; }
.keuze-kaart .kk-inhoud {
  display: block; border: 1.5px solid var(--border); border-radius: 14px; padding: 18px;
  cursor: pointer; transition: border-color .15s, background .15s; height: 100%;
}
.keuze-kaart input:checked + .kk-inhoud { border-color: var(--violet); background: var(--violet-lt); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.keuze-kaart input:focus-visible + .kk-inhoud { outline: 2px solid var(--violet); outline-offset: 2px; }
.kk-inhoud strong { display: block; font: 700 15px/1.3 var(--font-body); margin-bottom: 4px; }
.kk-inhoud span { font-size: 13px; color: var(--muted); line-height: 1.5; display: block; }

.kleur-keuze { display: flex; flex-wrap: wrap; gap: 10px; }
.kleur-stip { position: relative; }
.kleur-stip input { position: absolute; opacity: 0; }
.kleur-stip .ks-vlak {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; min-width: 78px;
  font: 600 12px/1.2 var(--font-body); color: var(--muted); transition: .15s;
}
.kleur-stip .ks-bol { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08); }
.kleur-stip input:checked + .ks-vlak { border-color: var(--violet); background: var(--violet-lt); color: var(--violet-dk); }

/* ── Upload-zone ─────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--violet-md); border-radius: var(--radius-lg);
  padding: 42px 24px; text-align: center; cursor: pointer; background: var(--violet-lt);
  transition: border-color .2s, background .2s;
}
.upload-zone:hover, .upload-zone.sleep { border-color: var(--violet); background: #E9E2FA; }
.upload-zone .uz-icoon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; background: var(--violet); display: flex; align-items: center; justify-content: center; }
.upload-zone .uz-icoon svg { width: 25px; height: 25px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.upload-zone strong { font: 700 16px/1.4 var(--font-body); display: block; }
.upload-zone span { font-size: 13px; color: var(--muted); }
.upload-lijst { margin-top: 14px; display: grid; gap: 8px; }
.upload-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; font: 600 13.5px/1.4 var(--font-body); }
.upload-item .ui-midden { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upload-item .ui-naam { overflow-wrap: anywhere; }
.upload-item .ui-status { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.upload-item .ui-maat { color: var(--muted); font-weight: 500; margin-left: auto; white-space: nowrap; }
.upload-item button {
  background: none; border: none; color: var(--rood); font-size: 17px; cursor: pointer;
  line-height: 1; flex-shrink: 0;
  /* Raakgebied, niet de tekengrootte: met een duim mik je niet op 18 px. */
  min-width: 40px; min-height: 40px; margin: -9px -6px -9px 0;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.upload-item button:hover, .upload-item button:focus-visible { background: #FCEBEB; }

/* Statusmerk: een teken naast de naam, zodat je niet op kleur alleen hoeft
   af te gaan. De status staat er in woorden naast. */
.upload-item .ui-merk {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-body);
}
.upload-item[data-status="ok"]      { border-color: #BBE7D3; }
.upload-item[data-status="ok"] .ui-merk      { background: #E7F6EF; color: var(--groen); }
.upload-item[data-status="ok"] .ui-merk::before      { content: '✓'; }
.upload-item[data-status="ok"] .ui-status    { color: #047857; font-weight: 600; }
.upload-item[data-status="bezig"] .ui-merk   { background: #F1EDFB; color: var(--violet); }
.upload-item[data-status="bezig"] .ui-merk::before   { content: '◌'; }
/* Bezig: het systeem werkt, en dat moet je ZIEN. Het bolletje pulseert met
   een uitdijende violette ring en langs de onderrand loopt een voortgangs-
   loop. Bij prefers-reduced-motion blijft de bezig-stijl (violette rand),
   zonder beweging. */
.upload-item[data-status="bezig"] { position: relative; overflow: hidden; border-color: var(--violet-md); background: #FBFAFE; }
.upload-item[data-status="bezig"] .ui-merk {
  animation: ui-puls 1.4s ease-out infinite;
}
.upload-item[data-status="bezig"] .ui-merk::before {
  content: '●';
  font-size: 10px;
  animation: ui-ademen 1.4s ease-in-out infinite;
}
.upload-item[data-status="bezig"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--violet) 45%, var(--violet-hl) 55%, transparent 100%);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: ui-loop 1.6s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes ui-puls {
  0%   { box-shadow: 0 0 0 0 rgba(109, 40, 217, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(109, 40, 217, 0); }
  100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0); }
}
@keyframes ui-ademen {
  0%, 100% { transform: scale(.85); opacity: .7; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes ui-loop {
  0%   { background-position: -45% 0; }
  100% { background-position: 145% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-item[data-status="bezig"] .ui-merk,
  .upload-item[data-status="bezig"] .ui-merk::before,
  .upload-item[data-status="bezig"]::after { animation: none; }
  .upload-item[data-status="bezig"]::after { background: var(--violet-md); background-size: 100% 100%; }
}
.upload-item[data-status="mee"] .ui-merk,
.upload-item[data-status="foto"] .ui-merk    { background: var(--border); color: var(--muted); }
.upload-item[data-status="mee"] .ui-merk::before     { content: '↑'; }
.upload-item[data-status="foto"] .ui-merk::before    { content: '▣'; }
.upload-item[data-status="mislukt"] { border-color: #F3D9AE; }
.upload-item[data-status="mislukt"] .ui-merk { background: #FDF3E3; color: #B45309; }
.upload-item[data-status="mislukt"] .ui-merk::before { content: '!'; }
.upload-item[data-status="mislukt"] .ui-status { color: #B45309; font-weight: 600; }

/* Op een telefoon telt elke regel: de grootte blijft rechts staan en lijnt
   uit met de bestandsnaam, in plaats van er een regel bij te nemen. */
@media (max-width: 560px) {
  .upload-item { align-items: flex-start; gap: 10px; }
  .upload-item .ui-merk, .upload-item .ui-maat { margin-top: 1px; }
  .upload-item .ui-midden { flex: 1; }
  .upload-item .ui-maat { font-size: 12px; }
  .upload-item button { margin-top: -8px; }
}

/* ── Prijsindicatie-paneel ───────────────────────────────────────── */
.prijs-paneel {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 28px;
  position: relative; overflow: hidden;
}
.prijs-paneel::before { content: ''; position: absolute; inset: 0; background: var(--layer-lines-licht); pointer-events: none; }
.prijs-paneel > * { position: relative; }
.prijs-paneel .pp-label { font: 800 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-zacht); margin-bottom: 10px; }
.prijs-paneel .pp-bedrag { font: 700 40px/1 var(--font-display); letter-spacing: -.03em; }
.prijs-paneel .pp-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 8px; line-height: 1.6; }
.prijs-regels { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; display: grid; gap: 7px; }
.prijs-regel { display: flex; justify-content: space-between; font-size: 13.5px; color: rgba(255,255,255,.75); }
.prijs-regel strong { color: #fff; }

/* ── Tabellen ────────────────────────────────────────────────────── */
.tabel-scroll { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.tabel th { text-align: left; font: 700 12.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 13px 16px; border-bottom: 2px solid var(--border); background: var(--paper); }
.tabel td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14.5px; vertical-align: middle; }
.tabel tr:last-child td { border-bottom: none; }
.tabel tbody tr:hover { background: var(--violet-lt); }

/* ── Accordeon (FAQ) ─────────────────────────────────────────────── */
.accordeon { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.accordeon + .accordeon { margin-top: 12px; }
.accordeon summary {
  padding: 20px 24px; cursor: pointer; font: 700 16px/1.45 var(--font-body); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: '+'; font: 400 26px/1 var(--font-display); color: var(--violet); transition: transform .2s; flex-shrink: 0; }
.accordeon[open] summary::after { transform: rotate(45deg); }
.accordeon .acc-inhoud { padding: 0 24px 22px; color: var(--muted); font-size: 15px; line-height: 1.8; }

/* ── Tijdlijn (volg-pagina) ──────────────────────────────────────── */
.tijdlijn { position: relative; padding-left: 34px; }
.tijdlijn::before { content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item::before {
  content: ''; position: absolute; left: -30px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--border);
}
.tl-item.actief::before { border-color: var(--violet); background: var(--violet); box-shadow: 0 0 0 5px rgba(124,58,237,.18); }
.tl-item.gedaan::before { border-color: var(--groen); background: var(--groen); }
.tl-item strong { display: block; font: 700 15px/1.4 var(--font-body); }
.tl-item span { font-size: 13px; color: var(--muted); }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,.6); position: relative; margin-top: 0; }
.site-footer::before { content: ''; position: absolute; inset: 0; background: var(--layer-lines-licht); pointer-events: none; }
.footer-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 64px 28px 44px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-kol h4 { color: #fff; font: 700 14px/1 var(--font-display); margin-bottom: 16px; letter-spacing: .02em; }
.footer-kol a, .footer-kol span { display: block; color: rgba(255,255,255,.55); text-decoration: none; font-size: 14px; padding: 5px 0; }
.footer-kol a:hover { color: #fff; }
.footer-brand p { font-size: 13.5px; line-height: 1.7; margin-top: 14px; max-width: 320px; }
.footer-brand .footer-kvk { font-size: 12px; color: rgba(255,255,255,.38); }
/* Het logo is een <a> binnen .footer-kol, en .footer-kol a zet display:block.
   Dat won van .nav-logo (flex) waardoor het icoon boven de tekst stapelde.
   Hier de flex-rij expliciet terugzetten, en het paarse woorddeel een lichtere
   tint geven: het gewone violet valt weg tegen de donkere footer. */
.footer-kol a.footer-logo { margin-bottom: 4px; display: flex; }
.footer-logo .nav-logo-tekst { color: #fff; }
.footer-logo .nav-logo-tekst em { color: var(--violet-hl); }
.footer-onder { position: relative; border-top: 1px solid rgba(255,255,255,.1); }
.footer-onder { max-width: 1180px; margin: 0 auto; padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.footer-onder nav { display: flex; gap: 18px; }
.footer-onder a { color: rgba(255,255,255,.5); text-decoration: none; }
.footer-onder a:hover { color: #fff; }

/* ── Hero (home) ─────────────────────────────────────────────────── */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(11,7,19,.96) 8%, rgba(21,13,38,.82) 48%, rgba(91,33,182,.45) 100%); }
.hero-lagen { position: absolute; inset: 0; background: var(--layer-lines-licht); pointer-events: none; }
.hero-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 108px 28px 96px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 99px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font: 700 12px/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.85);
  margin-bottom: 24px;
}
.hero-badge .stip { width: 8px; height: 8px; border-radius: 50%; background: #34D399; animation: pols 2s infinite; }
@keyframes pols { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 50% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } }
.hero h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 700; letter-spacing: -.035em; margin-bottom: 20px; }
.hero h1 .accent { color: var(--violet-zacht); }
.hero .hero-sub { font-size: 17.5px; color: rgba(255,255,255,.72); max-width: 500px; line-height: 1.8; margin-bottom: 36px; }
.hero-knoppen { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 42px; }
.hero-usps { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-usp { display: flex; align-items: center; gap: 8px; font: 600 13.5px/1.4 var(--font-body); color: rgba(255,255,255,.72); }
.hero-usp::before { content: '✓'; color: #34D399; font-weight: 900; }

.hero-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-foto { border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: var(--ink-3); }
.hero-foto.hoog { grid-row: span 2; aspect-ratio: auto; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hero-foto:hover img { transform: scale(1.06); }

/* ── Stats-band ──────────────────────────────────────────────────── */
.stats-band { background: var(--surface); border-bottom: 1px solid var(--border); padding: 26px 0; }
.stats-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.stat { color: var(--text); }
.stat .st-n { font: 700 27px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--violet); }
.stat .st-l { font: 700 11.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* ── Galerij / inspiratie ────────────────────────────────────────── */
.insp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.insp-kaart { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.insp-kaart.breed { grid-column: span 2; }
.insp-kaart img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s; }
.insp-kaart.breed img { aspect-ratio: 16/8.2; }
.insp-kaart:hover img { transform: scale(1.05); }
.insp-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,7,19,.92) 0%, rgba(11,7,19,.25) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.insp-overlay .badge-lime { width: fit-content; margin-bottom: 10px; }
.insp-overlay h3 { color: #fff; font-size: 19px; }
.insp-overlay p { color: rgba(255,255,255,.7); font-size: 13.5px; margin-top: 4px; }

/* ── CTA-band ────────────────────────────────────────────────────── */
.cta-band { background: var(--ink); border-radius: var(--radius-lg); padding: 64px 56px; color: #fff; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 400px at 85% 20%, rgba(124,58,237,.45), transparent 60%), var(--layer-lines-licht); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.68); font-size: 15.5px; line-height: 1.75; }
.cta-band .cta-acties { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Wizard ──────────────────────────────────────────────────────── */
.wizard-stappen { display: flex; gap: 10px; margin-bottom: 36px; }
.wz-stap { flex: 1; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-radius: 13px; background: var(--surface); border: 1.5px solid var(--border); font: 700 13.5px/1.3 var(--font-body); color: var(--muted); }
.wz-stap .wz-n { width: 26px; height: 26px; border-radius: 8px; background: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-display); flex-shrink: 0; }
.wz-stap.actief { border-color: var(--violet); color: var(--text); background: var(--violet-lt); }
.wz-stap.actief .wz-n { background: var(--violet); color: #fff; }
.wz-stap.gedaan .wz-n { background: var(--groen); color: #fff; }
.wizard-paneel { display: none; }
.wizard-paneel.actief { display: block; animation: fadein .25s ease; }

/* Een vraag tegelijk. [hidden] blijft winnen (staat op !important in de
   reset), zodat de type-keuze bepaalt welk van de drie aanleverblokken
   meedoet. */
.js-wizard .wizard-paneel > .wizard-blok[data-vraag] { display: none; }
.js-wizard .wizard-paneel > .wizard-blok[data-vraag].vraag-actief { display: block; animation: fadein .2s ease; }
/* Zonder de klasse (JavaScript uit of stukgelopen) staat alles gewoon onder
   elkaar; dan is de teller zinloos en zou hij alleen verwarren. */
html:not(.js-wizard) .wz-teller { display: none; }

/* Waar ben ik, en hoeveel komt er nog? Zonder dat is een reeks schermen
   een zwart gat. */
.wz-teller {
  flex: 1; text-align: center; font: 500 12.5px/1.4 var(--font-body);
  color: var(--muted); letter-spacing: .01em;
}
.wz-teller .wz-t-balk {
  display: block; width: 96px; height: 4px; margin: 6px auto 0;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.wz-teller .wz-t-vol { display: block; height: 100%; background: var(--violet); border-radius: 2px; }
@media (max-width: 560px) {
  .wz-teller { font-size: 12px; }
  .wz-teller .wz-t-balk { width: 72px; }
}
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; }

/* ── Diversen ────────────────────────────────────────────────────── */
.breadcrumb { font-size: 13px; color: var(--muted); padding: 18px 0 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--violet); }
.prose { max-width: 760px; }
.prose h2 { font-size: 24px; margin: 38px 0 12px; }
.prose h3 { font-size: 18px; margin: 26px 0 10px; }
.prose p, .prose li { font-size: 15px; color: var(--muted); line-height: 1.85; }
.prose ul { padding-left: 22px; margin: 10px 0; }
.prose strong { color: var(--text); }
.checklijst { list-style: none; padding: 0; display: grid; gap: 10px; }
.checklijst li { display: flex; gap: 11px; font-size: 15px; line-height: 1.6; }
.checklijst li::before { content: '✓'; color: var(--groen); font-weight: 900; flex-shrink: 0; }
.foto-rij { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.foto-rij .foto { border-radius: 13px; overflow: hidden; aspect-ratio: 1; }
.foto-rij img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.foto-rij .foto:hover img { transform: scale(1.07); }
.nootje { font-size: 12.5px; color: var(--muted); }
.skiplink { position: absolute; left: -9999px; }
.skiplink:focus { position: fixed; left: 12px; top: 12px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 999; }

/* ── Cookie-consent-balk ─────────────────────────────────────────── */
.cookie-balk { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); box-shadow: var(--schaduw-zwaar); animation: cookie-omhoog .4s ease; }
@keyframes cookie-omhoog { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie-inner { max-width: 1180px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.cookie-tekst { max-width: 640px; }
.cookie-titel { display: block; font: 700 16px/1.3 var(--font-display); margin-bottom: 5px; }
.cookie-inner p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0; }
.cookie-inner a { color: #fff; text-decoration: underline; }
.cookie-knoppen { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* "Ja" = prominente, uitnodigende actie */
.cookie-ja { background: var(--violet); color: #fff; border: none; cursor: pointer; font: 700 15px/1 var(--font-body); padding: 15px 30px; border-radius: var(--radius); box-shadow: 0 6px 22px rgba(124,58,237,.5); transition: transform .15s, box-shadow .15s, background .15s; }
.cookie-ja:hover { background: var(--violet-hl); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,58,237,.62); }
/* "Liever niet" = zichtbaar maar rustiger (geen dark pattern) */
.cookie-nee { background: transparent; color: rgba(255,255,255,.6); border: none; cursor: pointer; font: 600 13.5px/1 var(--font-body); padding: 14px 16px; border-radius: var(--radius); text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
.cookie-nee:hover { color: #fff; }
/* Drie gelijkwaardige keuzes (15-9-2026): weigeren is net zo groot en leesbaar als toestaan. */
.cookie-knoppen { flex-wrap: wrap; }
.cookie-keuze { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); cursor: pointer; font: 700 15px/1 var(--font-body); padding: 13.5px 22px; border-radius: var(--radius); transition: border-color .15s, background .15s; }
.cookie-keuze:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.cookie-ja:focus-visible, .cookie-keuze:focus-visible, .cookie-sluit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cookie-sluit { background: transparent; color: rgba(255,255,255,.6); border: none; cursor: pointer; font: 600 13.5px/1 var(--font-body); padding: 14px 10px; text-decoration: underline; text-underline-offset: 3px; }
.cookie-sluit:hover { color: #fff; }
.cookie-inner p.cookie-huidig { margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.footer-cookieknop { background: none; border: 0; padding: 0; font: inherit; color: rgba(255,255,255,.5); cursor: pointer; }
.footer-cookieknop:hover { color: #fff; }
@media (max-width: 620px) {
  .cookie-inner { padding: 18px; gap: 16px; }
  .cookie-knoppen { width: 100%; flex-direction: column; }
  .cookie-ja { width: 100%; padding: 15px; }
  .cookie-nee, .cookie-keuze, .cookie-sluit { width: 100%; }
}

/* ── Responsive ──────────────────────────────────────────────────── */
/* De menubalk paste al niet meer tussen ongeveer 820 en 1010 pixels: de rij
   liep dan buiten het scherm en de pagina schoof zijwaarts. Met het item
   "3D ontwerp" erbij begint dat iets eerder. Het hamburgermenu neemt daarom
   over zodra de rij niet meer past, in plaats van de pagina te laten schuiven.
   Deze regel staat bewust vóór de andere breekpunten en herhaalt wat de
   820-pixelregel hieronder ook doet; die blijft staan voor de rest. */
@media (max-width: 1090px) {
  .nav-links, .nav-contact { display: none; }
  .nav-ham { display: flex; }
}
@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; padding: 84px 28px 72px; }
  .hero-visual { max-width: 560px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 48px 36px; }
  .cta-band .cta-acties { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .nav-links, .nav-contact { display: none; }
  .nav-ham { display: flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .insp-grid { grid-template-columns: 1fr; }
  .insp-kaart.breed { grid-column: span 1; }
  .keuze-kaarten, .keuze-kaarten.twee { grid-template-columns: 1fr; }
  .veld-rij { grid-template-columns: 1fr; }
  .sectie { padding: 64px 0; }
  .foto-rij { grid-template-columns: repeat(3, 1fr); }
  .wizard-stappen { flex-direction: column; }
  .stats-inner { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .wrap, .nav-inner { padding-left: 18px; padding-right: 18px; }
  .nav-cta { display: none; }
  .foto-rij { grid-template-columns: repeat(2, 1fr); }
  .hero-knoppen .btn { width: 100%; }
}

/* ── Auth (inloggen / registreren) + account ─────────────────────── */
.wrap-smal { max-width: 560px; margin: 0 auto; padding: 0 28px; }
.auth-kaart { box-shadow: 0 24px 60px rgba(23,17,31,.08); }
.auth-wissel { margin-top: 22px; font-size: 14.5px; color: var(--muted); text-align: center; }
.auth-noot { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.label-los { display: block; font: 600 14px/1.4 var(--font-body); margin-bottom: 7px; }

.keuze-pillen { display: flex; gap: 10px; flex-wrap: wrap; }
.pil {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border: 1.5px solid var(--border); border-radius: 999px;
  font: 600 14px/1 var(--font-body); color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.pil:has(input:checked) { border-color: var(--violet); background: var(--violet-lt); color: var(--violet-dk); }
.pil input { accent-color: var(--violet); }

.ww-wijzig { margin: 6px 0 22px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ww-wijzig summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--violet-dk); }
.ww-wijzig[open] summary { margin-bottom: 6px; }

.account-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.account-acties { display: flex; gap: 12px; }
.account-lijst { display: grid; gap: 16px; }
.account-rij { padding: 22px 24px; }
.ar-hoofd { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ar-hoofd > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ar-nummer { font: 800 16px/1 var(--font-display); letter-spacing: -.01em; }
.ar-datum { font-size: 13px; color: var(--muted); }
.ar-detail { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.ar-detail strong { color: var(--text); font-weight: 700; }
.ar-acties { display: flex; gap: 10px; flex-wrap: wrap; }
.lege-staat { border-style: dashed; }
@media (max-width: 620px) {
  .account-kop { align-items: flex-start; }
  .ar-acties .btn { width: 100%; }
}

/* Voorbeeldbedragen boven de prijscalculator. Wie via "kosten 3d printen"
   binnenkomt heeft nog geen bestand en wil eerst een getal zien. */
.prijs-voorbeelden { display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
    max-width:760px; margin:28px auto 0; text-align:left; }
.prijs-voorbeelden > div { border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px; display:flex; flex-direction:column; gap:5px; background:var(--paper); }
.prijs-voorbeelden strong { font-size:13px; letter-spacing:.4px; text-transform:uppercase;
    color:var(--muted); font-weight:600; }
.prijs-voorbeelden span { font-size:13.5px; color:var(--ink-3); line-height:1.45; }
.prijs-voorbeelden b { font-family:var(--font-display); font-size:19px; color:var(--ink);
    font-variant-numeric:tabular-nums; margin-top:3px; }
@media (max-width:680px){ .prijs-voorbeelden { grid-template-columns:1fr; gap:10px; } }

/* Rekenhulp zonder bestand (/prijs). Wie zoekt op "3d printen prijs
   berekenen" heeft meestal nog geen STL, maar wil wel meteen rekenen:
   volume in cm³ of gewicht in gram is genoeg. */
.rekenhulp {
  display: grid; grid-template-columns: 1.25fr .75fr; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; box-shadow: var(--schaduw);
  max-width: 1000px; margin: 0 auto;
}
.rh-links { padding: 30px 32px; }
.rh-titel { font: 700 22px/1.25 var(--font-display); letter-spacing: -.02em; margin-bottom: 8px; }
.rh-uitleg { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.rh-velden { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; align-items: start; }
.rh-velden .veld { margin-bottom: 0; }
.rh-invoer { display: flex; gap: 8px; }
.rh-invoer input { flex: 1 1 auto; min-width: 0; }
.rh-invoer select { flex: 0 0 96px; width: auto; padding-left: 12px; padding-right: 8px; }

.rh-paneel {
  background: var(--ink); color: #fff; padding: 30px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  position: relative; overflow: hidden;
}
.rh-paneel::before { content: ''; position: absolute; inset: 0; background: var(--layer-lines-licht); pointer-events: none; }
.rh-paneel > * { position: relative; }
.rh-label { font: 800 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-zacht); }
.rh-bedrag { font: 700 42px/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rh-detail { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.6; }
.rh-extra:not(:empty) { font-size: 12.5px; color: var(--violet-zacht); line-height: 1.6; }
.rh-link { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rh-link:hover { color: var(--violet-zacht); }

@media (max-width: 900px) {
  .rekenhulp { grid-template-columns: 1fr; }
  .rh-velden { grid-template-columns: 1fr; }
  .rh-bedrag { font-size: 36px; }
}

/* Rekenvoorbeeld naast de tarieventabel per cm³. */
.reken-voorbeeld { border: 1px solid var(--violet-md); background: var(--violet-lt);
    border-radius: var(--radius); padding: 18px 20px; }
.rv-kop { display: block; font: 800 11px/1 var(--font-body); letter-spacing: .12em;
    text-transform: uppercase; color: var(--violet-dk); margin-bottom: 9px; }
.reken-voorbeeld p { font-size: 14.5px; line-height: 1.75; color: var(--text); margin: 0; }

/* ── Telefoon: geen automatische zoom bij het tikken in een veld ──────
   iOS Safari zoomt in zodra een tekstveld kleiner is dan 16px. Dat gooit
   de pagina scheef midden in het bestellen. Alleen tekstinvoer, want
   selectievakjes en keuzerondjes hebben geen tekstgrootte nodig. */
@media (max-width: 768px) {
  input[type=text], input[type=email], input[type=tel], input[type=number],
  input[type=search], input[type=password], input[type=url], textarea, select {
    font-size: 16px !important;
  }
}

/* ── Rastercellen mogen krimpen ───────────────────────────────────────
   Kinderen van een grid of flex krijgen standaard min-width:auto en
   weigeren dan smaller te worden dan hun inhoud. Een brede tabel in een
   kaart trok daardoor de hele pagina scheef op een telefoon: de kaart werd
   490px in een cel van 339px. Met min-width:0 krimpt de kaart wel en doet
   .tabel-scroll waar hij voor bedoeld is. */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.tabel-scroll { max-width: 100%; }

/* ── Aankruisvraag in het aanvraagformulier ───────────────────────────
   Zelfde vorm als het spoed-vinkje: het hokje links, de uitleg ernaast,
   en het geheel aanklikbaar omdat het in een label zit. */
.aankruis, .spoed-veld {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); transition: border-color .15s, background .15s;
}
.aankruis:hover, .spoed-veld:hover { border-color: var(--violet-zacht); }
.aankruis input[type=checkbox], .spoed-veld input[type=checkbox] {
  width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--violet); cursor: pointer;
}
.aankruis > span, .spoed-veld > span { font-size: 14.5px; line-height: 1.45; color: var(--text); }
.aankruis > span small, .spoed-veld > span small {
  display: block; margin-top: 3px; font-size: 13px; color: var(--muted);
}
.aankruis:has(input:checked), .spoed-veld:has(input:checked) {
  border-color: var(--violet); background: var(--violet-lt);
}

/* ── Pakketblok op de volgpagina ──────────────────────────────────
   Breed: vier faselabels onder de balkjes. Smal: die labels botsen
   ("sorteercentrum" is breder dan een kwart scherm), dus dan tonen we
   in plaats daarvan een regel met de huidige stap. !important omdat het
   label inline display:block meekrijgt vanuit de view. */
.pv-fase-nu { display: none; margin: 0 0 4px; font-size: 14px; }
@media (max-width: 560px) {
    .pv-fase-lab { display: none !important; }
    .pv-fase-nu { display: block; }
}

/* ── Footer altijd onderaan ────────────────────────────────────────
   Op korte pagina's (betaalverzoek, bedankt, 404) bleef er anders een leeg
   vlak onder de footer staan. Body als kolom + main die de ruimte opvult. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > main { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }