/* ==========================================================================
   Just Design Loops — Subpagina Stijlen (css/subpagina.css)
   Gedeelde en gehardende stijlen voor nfc, case, voor-kappers, horeca,
   garage, pers en calculator.
   Uitsluitend semantische laag-2-tokens uit css/tokens.css.
   Volledig conform CSP: style-src 'self' (geen inline stijlen).
   ========================================================================== */

/* ---------- 1. Basis Subpagina Layout ---------- */
.subpagina {
  padding-top: calc(var(--ruimte-l) + 64px);
  padding-bottom: var(--ruimte-sectie);
  min-height: calc(100vh - 120px);
}

.subpagina-schil {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--rand-gutter);
}

.subpagina-schil-breed {
  max-width: 1120px;
}

/* ---------- 2. Hero & Introductie ---------- */
.subpagina-kop {
  margin-bottom: var(--ruimte-l);
}

.subpagina-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--ruimte-s);
}

.subpagina-breadcrumb a {
  color: var(--kleur-tekst-zacht);
  text-decoration: none;
  transition: color var(--duur-micro) var(--ease-uit);
}

.subpagina-breadcrumb a:hover {
  color: var(--kleur-tekst);
}

.subpagina-titel {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-m);
}

.subpagina-lead {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
  max-width: 64ch;
  margin-bottom: var(--ruimte-m);
}

/* ---------- 3. Pijlers en Kernvoordelen ---------- */
.subpagina-pijlers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ruimte-m);
  margin: var(--ruimte-l) 0;
}

.subpagina-pijler-item {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-s);
  padding: var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  transition: border-color var(--duur-in) var(--ease-uit), transform var(--duur-micro) var(--ease-uit);
}

.subpagina-pijler-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.subpagina-pijler-icoon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
}

.subpagina-pijler-kop {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
}

.subpagina-pijler-tekst {
  font-size: var(--tekst-s);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
}

/* ---------- 4. Content Secties & Verhaallijn ---------- */
.subpagina-sectie {
  margin: var(--ruimte-l) 0;
}

.subpagina-sectiekop {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-s);
}

.subpagina-paragraaf {
  font-size: var(--tekst-m);
  line-height: 1.65;
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--ruimte-m);
}

.subpagina-paragraaf strong {
  color: var(--kleur-tekst);
}

/* Vergelijkings- / Scenariokaarten (Kapper, Horeca, Garage) */
.subpagina-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ruimte-m);
  margin: var(--ruimte-m) 0 var(--ruimte-l) 0;
}

.subpagina-scenario-kaart {
  padding: var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scenario-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--ruimte-xs);
}

.scenario-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
}

.scenario-beschrijving {
  font-size: var(--tekst-s);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--ruimte-s);
}

/* Stappen & Eigenaar-inzichten (NFC Interactie) */
.subpagina-stappen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ruimte-m);
  margin: var(--ruimte-m) 0 var(--ruimte-l) 0;
}

.subpagina-stap-kaart {
  padding: var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  transition: border-color var(--duur-in) var(--ease-uit), transform var(--duur-micro) var(--ease-uit);
}

.subpagina-stap-kaart:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.subpagina-stap-nummer {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.subpagina-stap-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
}

.subpagina-stap-tekst {
  font-size: var(--tekst-s);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
}

/* Specificatielijst */
.specs-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ruimte-s);
  padding: 0;
  list-style: none;
  margin: var(--ruimte-m) 0;
}

.specs-item {
  padding: var(--ruimte-s) var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-s);
  display: flex;
  flex-direction: column;
  gap: var(--p-1);
}

.specs-term {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.specs-waarde {
  font-weight: 600;
  color: var(--kleur-tekst);
  font-size: var(--tekst-s);
}

/* ---------- 5. Case Story Stappen (Doorlopend Verhaal) ---------- */
.case-tijdlijn {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-l);
  position: relative;
  margin: var(--ruimte-l) 0;
  padding-left: var(--ruimte-l);
  border-left: 2px solid var(--kleur-rand);
}

.case-stap {
  position: relative;
}

.case-stap-bol {
  position: absolute;
  left: calc(-1 * var(--ruimte-l) - 6px);
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--kleur-bg);
}

.case-fase {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--ruimte-xs);
}

.case-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-l);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
}

.case-tekst {
  font-size: var(--tekst-m);
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
  max-width: 60ch;
}

.case-inzicht-kader {
  margin-top: var(--ruimte-s);
  padding: var(--ruimte-s) var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  font-size: var(--tekst-s);
  line-height: 1.5;
  color: var(--kleur-tekst);
}

/* ---------- 6. Calculator Specifieke Vormgeving ---------- */
.calc-container {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  padding: var(--ruimte-l);
  margin: var(--ruimte-l) 0;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-l);
}

@media (min-width: 768px) {
  .calc-grid {
    grid-template-columns: 3fr 2fr;
  }
}

.calc-groep {
  margin-bottom: var(--ruimte-m);
}

.calc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
  user-select: none;
}

.calc-opties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--ruimte-xs);
}

.calc-optie-knop {
  padding: var(--ruimte-s);
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-s);
  color: var(--kleur-tekst-zacht);
  font-size: var(--tekst-s);
  font-family: var(--font-tekst);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: all var(--duur-micro) var(--ease-uit);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.calc-optie-knop:hover {
  border-color: var(--kleur-tekst);
  color: var(--kleur-tekst);
  transform: translateY(-1px);
}

.calc-optie-knop:active {
  transform: translateY(1px) scale(0.98);
}

.calc-optie-knop.actief {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--kleur-op-accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(229, 66, 30, 0.25);
}

.calc-optie-subtekst {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.85;
}

.calc-bereik {
  width: 100%;
  margin: var(--ruimte-s) 0 var(--ruimte-xs);
  accent-color: var(--accent);
  cursor: pointer;
}

.calc-aantal-weergave {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--tekst-s);
  color: var(--kleur-tekst);
}

.calc-aantal-badge {
  font-weight: 700;
  color: var(--accent);
  font-size: var(--tekst-m);
}

.calc-preset-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-xs);
  margin-top: var(--ruimte-xs);
}

.calc-preset-knop {
  flex: 1 1 calc(16.66% - var(--ruimte-xs));
  min-width: 44px;
  padding: var(--p-1-5) var(--p-2);
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-xs);
  color: var(--kleur-tekst-zacht);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: all var(--duur-micro) var(--ease-uit);
}

.calc-preset-knop:hover {
  border-color: var(--kleur-tekst);
  color: var(--kleur-tekst);
  transform: translateY(-1px);
}

.calc-preset-knop:active {
  transform: translateY(1px) scale(0.97);
}

.calc-preset-knop.actief {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--kleur-op-accent);
}

/* Calculator Resultaat / Offerte Paneel */
.calc-resultaat {
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  padding: var(--ruimte-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ruimte-m);
}

@media (min-width: 768px) {
  .calc-resultaat {
    position: sticky;
    top: calc(var(--kop-offset, 80px) + var(--ruimte-s));
  }
}

.calc-resultaat-kop {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
}

.calc-prijs-kader {
  margin: var(--ruimte-m) 0;
  padding: var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-s);
  text-align: center;
}

.calc-prijs-bedrag {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.calc-prijs-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  margin-top: var(--p-2);
}

.calc-prijs-toelichting {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--kleur-tekst-zacht);
  line-height: 1.45;
  margin-top: var(--ruimte-xs);
}

.calc-specificatie-overzicht {
  list-style: none;
  padding: 0;
  margin: var(--ruimte-s) 0;
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
}

.calc-specificatie-overzicht li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--p-1) 0;
  border-bottom: 1px solid var(--kleur-rand);
}

.calc-specificatie-overzicht li span:last-child {
  font-family: var(--font-mono);
  color: var(--kleur-tekst);
  font-weight: 500;
  text-align: right;
}

.calc-cta-knop {
  width: 100%;
  text-align: center;
}

/* ---------- 7. Perskit & Mediamateriaal ---------- */
.pers-blok {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  padding: var(--ruimte-m);
  margin-bottom: var(--ruimte-m);
}

.pers-blok-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
}

.pers-regels-blok {
  margin-top: var(--ruimte-m);
}

.pers-feiten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ruimte-s);
  margin: var(--ruimte-m) 0;
}

.pers-feit-item {
  padding: var(--ruimte-s) var(--ruimte-m);
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-s);
  display: flex;
  flex-direction: column;
  gap: var(--p-1);
}

.pers-feit-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pers-feit-waarde {
  font-family: var(--font-display);
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--kleur-tekst);
}

.pers-quote-lijst {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-m);
  margin: var(--ruimte-m) 0;
}

.pers-quote-kader {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  padding: var(--ruimte-m);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-s);
  transition: border-color var(--duur-in) var(--ease-uit);
}

.pers-quote-kader:hover {
  border-color: var(--accent);
}

.pers-quote-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pers-quote-tekst {
  font-size: var(--tekst-m);
  font-style: italic;
  line-height: 1.6;
  color: var(--kleur-tekst);
  border-left: 3px solid var(--accent);
  padding-left: var(--ruimte-m);
  margin: 0;
}

.pers-quote-acties {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--ruimte-xs);
}

.pers-quote {
  font-size: var(--tekst-m);
  font-style: italic;
  line-height: 1.6;
  color: var(--kleur-tekst);
  border-left: 3px solid var(--accent);
  padding-left: var(--ruimte-m);
  margin: var(--ruimte-m) 0;
}

.pers-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ruimte-m);
  margin-top: var(--ruimte-s);
}

.pers-asset-kaart {
  padding: var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ruimte-s);
  transition: border-color var(--duur-in) var(--ease-uit), transform var(--duur-micro) var(--ease-uit);
}

.pers-asset-kaart:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.pers-asset-preview {
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-s);
  padding: var(--ruimte-s);
}

.pers-asset-meta {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pers-asset-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-xs);
  justify-content: center;
  width: 100%;
  margin-top: var(--ruimte-xs);
}

.pers-status-kader {
  margin: var(--ruimte-l) 0;
  padding: var(--ruimte-m);
  background: var(--kleur-vlak-2);
  border: 1px dashed var(--kleur-rand);
  border-radius: var(--radius-m);
}

.pers-status-kop {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
  display: flex;
  align-items: center;
  gap: var(--ruimte-xs);
}

.pers-status-tekst {
  font-size: var(--tekst-s);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
}

.pers-status-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ---------- 8. Universele Subpagina CTA Sectie ---------- */
.subpagina-cta {
  margin-top: var(--ruimte-xl);
  padding: var(--ruimte-l) var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  text-align: center;
}

.subpagina-cta-inhoud {
  max-width: 640px;
  margin: 0 auto;
}

.subpagina-cta-titel {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
}

.subpagina-cta-tekst {
  font-size: var(--tekst-m);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--ruimte-m);
}

.subpagina-cta-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
  justify-content: center;
}

.subpagina-cta-secundair {
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  margin-top: var(--ruimte-s);
  line-height: 1.6;
}

.subpagina-cta-secundair a {
  color: var(--kleur-tekst);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duur-micro) var(--ease-uit);
}

.subpagina-cta-secundair a:hover {
  color: var(--accent);
}

/* Responsieve aanpassingen */
@media (max-width: 600px) {
  .subpagina {
    padding-top: calc(var(--ruimte-m) + 64px);
  }
  .subpagina-cta-knoppen .knop {
    width: 100%;
  }
  .case-tijdlijn {
    padding-left: var(--ruimte-m);
    gap: var(--ruimte-m);
  }
  .case-stap-bol {
    left: calc(-1 * var(--ruimte-m) - 6px);
  }
}

/* ---------- 9. Kennisbank & Artikelen Vormgeving ---------- */
.artikel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-xs) var(--ruimte-s);
  margin-bottom: var(--ruimte-m);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.artikel-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--p-1);
}

.artikel-meta-scheider {
  color: var(--kleur-rand);
}

.subpagina-tussenkop {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kleur-tekst);
  margin-top: var(--ruimte-m);
  margin-bottom: var(--ruimte-xs);
}

.artikel-lijst {
  margin: var(--ruimte-s) 0 var(--ruimte-m) var(--ruimte-m);
  padding: 0;
  color: var(--kleur-tekst-zacht);
  font-size: var(--tekst-m);
  line-height: 1.65;
}

.artikel-lijst li {
  margin-bottom: var(--ruimte-xs);
}

.artikel-lijst li strong {
  color: var(--kleur-tekst);
}

.artikel-tabel-schil {
  width: 100%;
  overflow-x: auto;
  margin: var(--ruimte-m) 0 var(--ruimte-l) 0;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  background: var(--kleur-vlak);
}

.artikel-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tekst-s);
  text-align: left;
}

.artikel-tabel th,
.artikel-tabel td {
  padding: var(--ruimte-s) var(--ruimte-m);
  border-bottom: 1px solid var(--kleur-rand);
}

.artikel-tabel th {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--kleur-bg);
  font-weight: 600;
}

.artikel-tabel tr:last-child td {
  border-bottom: none;
}

.artikel-tabel td strong {
  color: var(--kleur-tekst);
}

.artikel-navigatie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-m);
  margin: var(--ruimte-l) 0;
  padding-top: var(--ruimte-m);
  border-top: 1px solid var(--kleur-rand);
}

.artikel-nav-kaart {
  padding: var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-s);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  transition: border-color var(--duur-in) var(--ease-uit), transform var(--duur-micro) var(--ease-uit);
}

.artikel-nav-kaart:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.artikel-nav-richting {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.artikel-nav-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-s);
  font-weight: 700;
  color: var(--kleur-tekst);
}

/* ---------- 10. Toegankelijkheidsverklaring Vormgeving ---------- */
.toegankelijkheid-certificaat {
  background: var(--kleur-vlak);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-radius: var(--radius-m);
  padding: var(--ruimte-l);
  margin: var(--ruimte-l) 0;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.toegankelijkheid-certificaat-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
  margin-bottom: var(--ruimte-m);
  padding-bottom: var(--ruimte-s);
  border-bottom: var(--rand-dikte) solid var(--kleur-rand);
}

.toegankelijkheid-status-groep {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
}

.status-badge-overheid {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--ruimte-xxs) var(--ruimte-sm);
  border-radius: var(--radius-rond);
  background: var(--kleur-bg);
  border: var(--rand-dikte) solid var(--kleur-waarschuwing);
  color: var(--kleur-waarschuwing);
  white-space: nowrap;
}

.status-badge-overheid--succes {
  border-color: var(--kleur-succes);
  color: var(--kleur-succes);
}

.status-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.audit-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ruimte-m);
  margin: var(--ruimte-m) 0 0 0;
  padding-top: var(--ruimte-m);
  border-top: var(--rand-dikte) solid var(--kleur-rand);
}

.audit-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--p-0-5);
}

.audit-meta-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.audit-meta-waarde {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
}

.audit-meta-waarde-mono {
  font-family: var(--font-mono);
  font-size: var(--tekst-s);
  color: var(--accent);
}

.meldpunt-kader {
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-left: var(--rand-dikte-dik) solid var(--accent);
  border-radius: var(--radius-m);
  padding: var(--ruimte-l);
  margin: var(--ruimte-l) 0;
}

.meldpunt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-m);
  margin-top: var(--ruimte-m);
}

.meldpunt-contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--p-0-5);
  padding: var(--ruimte-s) var(--ruimte-m);
  background: var(--kleur-bg);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-radius: var(--radius-s);
}

.meldpunt-contact-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.meldpunt-contact-waarde {
  font-size: var(--tekst-s);
  color: var(--kleur-tekst);
}

.meldpunt-contact-waarde a {
  color: var(--kleur-tekst);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duur-micro) var(--ease-uit);
}

.meldpunt-contact-waarde a:hover {
  color: var(--accent);
}

/* ---------- 11. Algemene Voorwaarden Vormgeving & Juridische Badges ---------- */
.voorwaarden-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-s);
  margin: var(--ruimte-m) 0;
}

.juridisch-checken {
  display: inline-flex;
  align-items: center;
  gap: var(--p-1);
  padding: 1px var(--p-2);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--kleur-waarschuwing) 16%, var(--kleur-vlak));
  border: 1px solid var(--kleur-waarschuwing);
  color: var(--kleur-waarschuwing);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 var(--p-0-5);
  vertical-align: baseline;
  text-decoration: none;
}

.juridisch-checken::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.juridisch-checken-blok {
  margin: var(--ruimte-s) 0;
  padding: var(--ruimte-s) var(--ruimte-m);
  background: color-mix(in srgb, var(--kleur-waarschuwing) 10%, var(--kleur-vlak));
  border-left: 3px solid var(--kleur-waarschuwing);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst);
  line-height: 1.5;
}

.voorwaarden-toc {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  padding: var(--ruimte-m);
  margin: var(--ruimte-l) 0;
}

.voorwaarden-toc-kop {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voorwaarden-toc-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ruimte-xs) var(--ruimte-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.voorwaarden-toc-lijst li a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ruimte-xs);
  color: var(--kleur-tekst-zacht);
  text-decoration: none;
  font-size: var(--tekst-s);
  line-height: 1.5;
  transition: color var(--duur-micro) var(--ease-uit);
}

.voorwaarden-toc-lijst li a:hover {
  color: var(--accent);
}

.voorwaarden-toc-nr {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.voorwaarden-artikel {
  margin: var(--ruimte-l) 0;
  padding-bottom: var(--ruimte-l);
  border-bottom: 1px solid var(--kleur-rand);
}

.voorwaarden-artikel:last-of-type {
  border-bottom: none;
}

.voorwaarden-artikel-kop {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kleur-tekst);
  margin: var(--ruimte-l) 0 var(--ruimte-s) 0;
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-s);
}

.voorwaarden-lid-lijst {
  list-style: none;
  padding: 0;
  margin: var(--ruimte-s) 0;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-s);
}

.voorwaarden-lid {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-s);
  font-size: var(--tekst-m);
  line-height: 1.65;
  color: var(--kleur-tekst-zacht);
}

.voorwaarden-lid-nr {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  width: 2.2rem;
}

.voorwaarden-lid-tekst {
  flex: 1;
}

.voorwaarden-lid-tekst strong {
  color: var(--kleur-tekst);
}

/* Print stylesheet voor contractdocument */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
  }
  .kop,
  .voet,
  .kop-acties,
  .overslaan,
  .voorwaarden-acties,
  .cursor,
  .subpagina-cta {
    display: none !important;
  }
  .subpagina {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .subpagina-schil,
  .subpagina-schil-breed {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .subpagina-titel {
    font-size: 18pt !important;
    color: #000 !important;
  }
  .voorwaarden-artikel {
    break-inside: avoid;
    page-break-inside: avoid;
    border-bottom: 1px solid #ccc !important;
    margin: 12pt 0 !important;
    padding-bottom: 8pt !important;
  }
  .voorwaarden-artikel-kop {
    color: #000 !important;
    font-size: 12pt !important;
  }
  .voorwaarden-lid {
    color: #222 !important;
  }
  .juridisch-checken {
    border: 1px solid #000 !important;
    background: #f0f0f0 !important;
    color: #000 !important;
    font-size: 7.5pt !important;
  }
}

/* ==========================================================================
   Component Integratie (css/componenten.css -> subpagina.css)
   Harmoniseert de gedeelde kerncomponenten (.sectie-kop, .kaart, .label, .grid, .knop)
   met de specifieke lay-out, typografie en schaal van subpagina-elementen.
   ========================================================================== */
.subpagina-kop.sectie-kop {
  display: block;
}

.subpagina-breadcrumb.label {
  display: inline-flex;
  color: var(--accent);
  line-height: 1.55;
  text-transform: uppercase;
}

.subpagina-pijlers.grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ruimte-m);
}

.subpagina-pijler-item.kaart {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-s);
  padding: var(--ruimte-m);
  border-radius: var(--radius-m);
  min-height: auto;
}

.subpagina-pijler-item.kaart .subpagina-pijler-tekst {
  font-size: var(--tekst-s);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
}

.subpagina-scenario-grid.grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ruimte-m);
  margin: var(--ruimte-m) 0 var(--ruimte-l) 0;
}

.subpagina-scenario-kaart.kaart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: normal;
  padding: var(--ruimte-m);
  border-radius: var(--radius-m);
  min-height: auto;
}

.subpagina-scenario-kaart.kaart p.scenario-label.label,
.subpagina-scenario-kaart.kaart .scenario-label.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.55;
  margin: 0 0 var(--ruimte-xs) 0;
}

.subpagina-scenario-kaart.kaart h3,
.subpagina-scenario-kaart.kaart .scenario-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: normal;
  color: var(--kleur-tekst);
  margin: 0 0 var(--ruimte-xs) 0;
}

.subpagina-scenario-kaart.kaart p.scenario-beschrijving,
.subpagina-scenario-kaart.kaart .scenario-beschrijving {
  font-size: var(--tekst-s);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
  margin: 0 0 16px 0;
}

.subpagina-stappen-grid.grid {
  gap: var(--ruimte-m);
}

.subpagina-stap-kaart.kaart {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  padding: var(--ruimte-m);
  border-radius: var(--radius-m);
  min-height: auto;
}

.subpagina-stap-kaart.kaart h3,
.subpagina-stap-kaart.kaart .subpagina-stap-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  line-height: 1.25;
  color: var(--kleur-tekst);
  margin: 0;
}

.subpagina-stap-kaart.kaart p,
.subpagina-stap-kaart.kaart .subpagina-stap-tekst {
  font-size: var(--tekst-s);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
  margin: 0;
}

.specs-lijst.grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ruimte-s);
  margin: var(--ruimte-m) 0;
}

.specs-item.kaart {
  padding: var(--ruimte-s) var(--ruimte-m);
  border-radius: var(--radius-s);
  display: flex;
  flex-direction: column;
  gap: var(--p-1);
  min-height: auto;
}

.specs-item.kaart .specs-term {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.specs-item.kaart .specs-waarde {
  font-family: var(--font-display);
  font-size: var(--tekst-s);
  font-weight: 700;
  color: var(--kleur-tekst);
}

.subpagina-cta.kaart {
  padding: var(--ruimte-l) var(--ruimte-m);
  text-align: center;
  min-height: auto;
  display: block;
}

.subpagina-cta.kaart .subpagina-cta-tekst {
  font-size: var(--tekst-m);
  line-height: 1.55;
  color: var(--kleur-tekst-zacht);
}

.subpagina-cta.kaart p.label {
  line-height: 1.3;
  margin-bottom: 0;
}

.subpagina-cta-knoppen.knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-m);
}

.calc-container.kaart {
  display: block;
  min-height: auto;
}

.calc-grid.grid {
  gap: var(--ruimte-l);
}

@media (min-width: 768px) {
  .calc-grid.grid {
    grid-template-columns: 3fr 2fr;
  }
}

.calc-opties.grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--ruimte-xs);
}

.calc-preset-knoppen.knoppen {
  gap: var(--ruimte-xs);
  margin-top: var(--ruimte-xs);
}

.calc-label.label {
  display: block;
  color: var(--kleur-tekst);
  margin-bottom: var(--ruimte-xs);
}

.calc-aantal-badge.badge {
  font-weight: 700;
  color: var(--accent);
  font-size: var(--tekst-m);
  padding: var(--ruimte-xxs) var(--ruimte-sm);
}

.calc-resultaat.kaart {
  min-height: auto;
  gap: var(--ruimte-m);
}

.case-inzicht-kader.kaart {
  min-height: auto;
  display: block;
  margin-top: var(--ruimte-s);
}

.case-fase.label {
  display: block;
  margin-bottom: var(--ruimte-xs);
}

.pers-blok.kaart {
  min-height: auto;
  display: block;
}

.pers-quote-kader.kaart {
  min-height: auto;
}

.pers-asset-kaart.kaart {
  min-height: auto;
}

.toegankelijkheid-certificaat.kaart {
  min-height: auto;
  display: block;
}

.meldpunt-kader.kaart {
  min-height: auto;
  display: block;
}

.meldpunt-contact-item.kaart {
  min-height: auto;
}

.voorwaarden-toc.kaart {
  min-height: auto;
  display: block;
}

.voorwaarden-artikel.kaart {
  min-height: auto;
  display: block;
}

.audit-meta-item.kaart {
  min-height: auto;
}

.artikel-nav-kaart.kaart {
  min-height: auto;
}

/* ---------- 404 Foutpagina & Herstelnavigatie ---------- */
.fout-sectie {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--ruimte-l) + 50px);
  padding-bottom: var(--ruimte-xl);
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fout-schil {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ruimte-m);
}

.fout-schil .titel-mega {
  max-width: 14ch;
  margin: 0 auto;
}

.fout-schil .lead {
  max-width: 56ch;
  margin: 0 auto var(--ruimte-s);
}

.fout-navigatie {
  width: 100%;
  margin-top: var(--ruimte-l);
  text-align: left;
}

.fout-navigatie-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--ruimte-s);
  text-align: center;
}

.fout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-m);
  width: 100%;
}

.fout-kaart {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  padding: var(--ruimte-m);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: transform var(--duur-micro) var(--ease-uit), border-color var(--duur-in) var(--ease-uit), box-shadow var(--duur-micro) var(--ease-uit);
}

.fout-kaart:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.fout-kaart:active {
  transform: scale(0.98);
}

.fout-kaart:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fout-kaart-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
}

.fout-kaart-tekst {
  font-size: var(--tekst-s);
  line-height: 1.5;
  color: var(--kleur-tekst-zacht);
}

/* ==========================================================================
   Start / Klant Onboarding & Activatie Console (start/index.html)
   ========================================================================== */
.start-container {
  width: 100%;
  margin-bottom: var(--ruimte-xl);
}

.start-app {
  display: flex;
  flex-direction: column;
  background: var(--kleur-vlak);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

/* Stappen header */
.start-stappen {
  display: flex;
  flex-wrap: wrap;
  border-bottom: var(--rand-dikte) solid var(--kleur-rand);
  background: var(--kleur-vlak-2);
  padding: var(--ruimte-xs) var(--ruimte-s);
  gap: var(--ruimte-xs);
}

.start-stap-knop {
  flex: 1 1 180px;
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  padding: var(--ruimte-xs) var(--ruimte-s);
  min-height: var(--raak);
  background: transparent;
  border: var(--rand-dikte) solid transparent;
  border-radius: var(--radius-m);
  color: var(--kleur-tekst-zacht);
  font-family: var(--font-display);
  font-size: var(--tekst-s);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: all var(--duur-micro) var(--ease-uit);
}

.start-stap-knop:hover:not(:disabled) {
  color: var(--kleur-tekst);
  background: color-mix(in srgb, var(--kleur-tekst) 6%, transparent);
}

.start-stap-knop.actief {
  color: var(--kleur-tekst);
  background: var(--kleur-vlak);
  border-color: var(--kleur-rand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.start-stap-knop.voltooid .start-stap-nr {
  background: var(--kleur-succes);
  color: var(--kleur-bg);
}

.start-stap-knop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.start-stap-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icoon-m);
  height: var(--icoon-m);
  border-radius: var(--radius-rond);
  background: var(--kleur-rand);
  color: var(--kleur-tekst);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.start-stap-knop.actief .start-stap-nr {
  background: var(--accent);
  color: var(--kleur-op-accent);
}

/* Inhoud grid */
.start-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-l);
  padding: var(--ruimte-m);
}

@media (min-width: 880px) {
  .start-grid {
    grid-template-columns: 1.15fr 0.85fr;
    padding: var(--ruimte-l);
    align-items: start;
  }
}

.start-paneel {
  display: none;
}

.start-paneel.actief {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-m);
  animation: kaartBinnen var(--duur-in) var(--ease-uit);
}

.start-paneel-kop {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
}

.start-paneel-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-l);
  font-weight: 700;
  line-height: 1.15;
  color: var(--kleur-tekst);
}

.start-paneel-lead {
  font-size: var(--tekst-s);
  line-height: 1.5;
  color: var(--kleur-tekst-zacht);
}

/* Vormgroepen & Invoervelden */
.start-groep {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
}

.start-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.start-label-hint {
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: none;
  letter-spacing: normal;
}

.start-invoer-mono {
  font-family: var(--font-mono);
  font-size: var(--tekst-m);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Foutmelding alert */
.start-foutmelding {
  display: none;
  align-items: flex-start;
  gap: var(--ruimte-xs);
  padding: var(--ruimte-s) var(--ruimte-m);
  border-radius: var(--radius-m);
  background: var(--kleur-fout-zacht);
  border: var(--rand-dikte) solid var(--accent);
  color: var(--kleur-tekst);
  font-size: var(--tekst-s);
  line-height: 1.4;
  animation: kaartBinnen var(--duur-in) var(--ease-uit);
}

.start-foutmelding.zichtbaar {
  display: flex;
}

.start-foutmelding-icoon {
  width: var(--icoon-status);
  height: var(--icoon-status);
  flex-shrink: 0;
  color: var(--accent);
  margin-top: var(--rand-dikte-dik);
}

/* Snelkeuze chips voor testen */
.start-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-xs);
  margin-top: var(--ruimte-xxs);
}

.start-chips-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
}

.start-chip {
  padding: var(--ruimte-xxs) var(--ruimte-xs);
  min-height: calc(var(--raak-s) - var(--ruimte-xs));
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst);
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-radius: var(--radius-s);
  cursor: pointer;
  user-select: none;
  transition: all var(--duur-micro) var(--ease-uit);
}

.start-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Bestemming Tegels (Stap 2) */
.start-opties-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-s);
}

.start-optie-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
  padding: var(--ruimte-m);
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte-dik) solid var(--kleur-rand);
  border-radius: var(--radius-m);
  cursor: pointer;
  user-select: none;
  transition: all var(--duur-micro) var(--ease-uit);
}

.start-optie-kaart:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--kleur-rand));
}

.start-optie-kaart.actief {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--kleur-vlak));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.start-optie-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-xs);
}

.start-optie-titel-groep {
  display: flex;
  align-items: center;
  gap: var(--ruimte-xs);
}

.start-optie-icoon {
  width: var(--icoon-m);
  height: var(--icoon-m);
  color: var(--accent);
  flex-shrink: 0;
}

.start-optie-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
}

.start-radio-indicatie {
  width: var(--icoon-s);
  height: var(--icoon-s);
  border-radius: var(--radius-rond);
  border: var(--rand-dikte-dik) solid var(--kleur-rand);
  background: var(--kleur-vlak);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duur-micro) var(--ease-uit);
}

.start-optie-kaart.actief .start-radio-indicatie {
  border-color: var(--accent);
  background: var(--accent);
}

.start-optie-kaart.actief .start-radio-indicatie::after {
  content: "";
  width: var(--ruimte-xxs);
  height: var(--ruimte-xxs);
  border-radius: var(--radius-rond);
  background: var(--kleur-op-accent);
}

.start-optie-omschrijving {
  font-size: var(--tekst-s);
  line-height: 1.45;
  color: var(--kleur-tekst-zacht);
}

/* Sub-formulieren in stap 2 */
.start-subform {
  display: none;
  flex-direction: column;
  gap: var(--ruimte-s);
  padding: var(--ruimte-m);
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-radius: var(--radius-m);
  margin-top: var(--ruimte-xs);
  animation: kaartBinnen var(--duur-in) var(--ease-uit);
}

.start-subform.actief {
  display: flex;
}

/* Telefoontest (Stap 3) */
.start-toestel-kiezer {
  display: flex;
  gap: var(--ruimte-xs);
  border-bottom: var(--rand-dikte) solid var(--kleur-rand);
  padding-bottom: var(--ruimte-xs);
}

.start-toestel-knop {
  padding: var(--ruimte-xs) var(--ruimte-s);
  min-height: var(--raak-s);
  background: transparent;
  border: var(--rand-dikte) solid transparent;
  border-radius: var(--radius-s);
  color: var(--kleur-tekst-zacht);
  font-family: var(--font-display);
  font-size: var(--tekst-s);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all var(--duur-micro) var(--ease-uit);
}

.start-toestel-knop.actief {
  background: var(--kleur-vlak-2);
  color: var(--kleur-tekst);
  border-color: var(--kleur-rand);
}

.start-instructie-box {
  padding: var(--ruimte-m);
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
}

.start-instructie-stap {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-xs);
  font-size: var(--tekst-s);
  line-height: 1.45;
  color: var(--kleur-tekst);
}

.start-instructie-bullet {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  flex-shrink: 0;
}

/* Test Simulator actiebalk */
.start-test-acties {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-s);
  padding: var(--ruimte-m);
  background: color-mix(in srgb, var(--kleur-succes) 8%, var(--kleur-vlak));
  border: var(--rand-dikte) solid var(--kleur-succes);
  border-radius: var(--radius-m);
}

.start-test-status {
  display: flex;
  align-items: center;
  gap: var(--ruimte-xs);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  font-weight: 700;
  color: var(--kleur-succes);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Fysieke Kaart Visualizer (Rechterkolom) */
.start-visual-kolom {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-m);
}

.start-kaart-kader {
  perspective: 1000px;
  width: 100%;
}

.start-kaart-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 85.6 / 53.98;
  border-radius: var(--radius-kaart);
  background: var(--kleur-bg);
  border: var(--rand-dikte-dik) solid var(--kleur-rand);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  padding: var(--ruimte-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform var(--duur-in) var(--ease-uit), border-color var(--duur-in) var(--ease-uit), box-shadow var(--duur-in) var(--ease-uit);
}

.start-kaart-3d.status-geverifieerd {
  border-color: var(--kleur-succes);
  box-shadow: 0 0 24px color-mix(in srgb, var(--kleur-succes) 25%, transparent), 0 16px 36px rgba(0, 0, 0, 0.4);
}

/* Kaart antenne loop */
.start-kaart-antenne {
  position: absolute;
  inset: var(--ruimte-xs);
  border-radius: calc(var(--radius-kaart) - var(--ruimte-xxs));
  border: var(--rand-dikte) dashed color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: none;
}

.start-kaart-chip-strook {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.start-kaart-chip {
  width: var(--icoon-l);
  height: calc(var(--icoon-m) + var(--ruimte-4));
  border-radius: var(--radius-xs);
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte) solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.start-kaart-chip-led {
  width: var(--ruimte-xxs);
  height: var(--ruimte-xxs);
  border-radius: var(--radius-rond);
  background: var(--accent);
  transition: all var(--duur-micro) var(--ease-uit);
}

.start-kaart-3d.status-geverifieerd .start-kaart-chip-led {
  background: var(--kleur-succes);
  box-shadow: 0 0 8px var(--kleur-succes);
}

.start-kaart-nummer-strook {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xxs);
}

.start-kaart-serielabel {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.start-kaart-serienummer {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--kleur-tekst);
}

.start-kaart-3d.status-geverifieerd .start-kaart-serienummer {
  color: var(--kleur-succes);
}

.start-kaart-voet-strook {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.start-kaart-ntag-badge {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.start-kaart-mini-qr {
  width: var(--p-6);
  height: var(--p-6);
  background: var(--p-wit);
  padding: var(--p-0-5);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

/* Virtuele Telefoon Simulator (Rechterkolom / Stap 3) */
.start-telefoon-kader {
  width: 100%;
  max-width: var(--p-300-px);
  margin: 0 auto;
  border-radius: var(--radius-telefoon);
  background: var(--kleur-bg);
  border: var(--rand-dikte-dik) solid var(--kleur-rand);
  padding: var(--ruimte-s);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xs);
}

.start-telefoon-scherm {
  border-radius: calc(var(--radius-telefoon) - var(--ruimte-xs));
  background: var(--kleur-vlak);
  border: var(--rand-dikte) solid var(--kleur-rand);
  min-height: var(--p-280-px);
  padding: var(--ruimte-m);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--ruimte-s);
  position: relative;
  overflow: hidden;
}

.start-telefoon-banner {
  width: 100%;
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte) solid var(--accent);
  border-radius: var(--radius-m);
  padding: var(--ruimte-xs) var(--ruimte-s);
  display: flex;
  align-items: center;
  gap: var(--ruimte-xs);
  text-align: left;
  font-size: var(--tekst-xs);
  animation: kaartBinnen var(--duur-in) var(--ease-uit);
}

.start-telefoon-banner-tekst strong {
  display: block;
  font-family: var(--font-display);
  color: var(--kleur-tekst);
}

.start-telefoon-banner-tekst span {
  color: var(--kleur-tekst-zacht);
}

/* Simulator content weergaven */
.telefoon-sim-review,
.telefoon-sim-vcard,
.telefoon-sim-web {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ruimte-xs);
  animation: kaartBinnen var(--duur-in) var(--ease-uit);
}

.telefoon-sim-sterren {
  color: var(--p-amber-300);
  font-size: var(--tekst-l);
  letter-spacing: var(--ruimte-xxs);
}

.telefoon-sim-titel {
  font-family: var(--font-display);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--kleur-tekst);
}

.telefoon-sim-tekst {
  font-size: var(--tekst-xs);
  line-height: 1.4;
  color: var(--kleur-tekst-zacht);
  max-width: 24ch;
}

.telefoon-sim-knop {
  margin-top: var(--ruimte-xs);
  padding: var(--ruimte-xxs) var(--ruimte-s);
  border-radius: var(--radius-rond);
  background: var(--accent);
  color: var(--kleur-op-accent);
  font-family: var(--font-display);
  font-size: var(--tekst-xs);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.telefoon-sim-avatar {
  width: var(--icoon-xl);
  height: var(--icoon-xl);
  border-radius: var(--radius-rond);
  background: var(--accent);
  color: var(--kleur-op-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--tekst-l);
  font-weight: 700;
}

.telefoon-sim-browserbalk {
  width: 100%;
  background: var(--kleur-vlak-2);
  border-radius: var(--radius-xs);
  padding: var(--ruimte-xxs) var(--ruimte-xs);
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Voltooid scherm */
.start-voltooid-schil {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ruimte-m);
  padding: var(--ruimte-l) var(--ruimte-m);
}

.start-voltooid-icoon {
  width: var(--p-8);
  height: var(--p-8);
  border-radius: var(--radius-rond);
  background: color-mix(in srgb, var(--kleur-succes) 18%, var(--kleur-vlak));
  border: var(--rand-dikte-dik) solid var(--kleur-succes);
  color: var(--kleur-succes);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tekst-xl);
}

.start-overzicht-kader {
  width: 100%;
  max-width: var(--p-540-px);
  background: var(--kleur-vlak-2);
  border: var(--rand-dikte) solid var(--kleur-rand);
  border-radius: var(--radius-m);
  padding: var(--ruimte-m);
  text-align: left;
}

.start-overzicht-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-s);
}

.start-overzicht-rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--rand-dikte) solid var(--kleur-rand);
  padding-bottom: var(--ruimte-xs);
}

.start-overzicht-rij:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.start-overzicht-label {
  font-family: var(--font-mono);
  font-size: var(--tekst-xs);
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.start-overzicht-waarde {
  font-family: var(--font-mono);
  font-size: var(--tekst-s);
  font-weight: 700;
  color: var(--kleur-tekst);
}

/* ---------- 16. Kennisbank Uitgelicht Kaart ---------- */
.kennis-uitgelicht {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-s);
  padding: var(--ruimte-l);
  border-left: var(--ruimte-xxs) solid var(--accent);
  background: var(--kleur-vlak);
  margin-top: var(--ruimte-m);
}

.kennis-uitgelicht .kennis-titel {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--kleur-tekst);
  margin: 0;
}

.kennis-uitgelicht .kennis-tekst {
  font-size: var(--tekst-s);
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
  max-width: 65ch;
  margin: 0 0 var(--ruimte-xs) 0;
}

.broodkruimel--midden {
  justify-content: center;
  margin-bottom: var(--ruimte-s);
}