/*
 * Certifly — stylesheet.
 *
 * Huisstijl in lijn met Protium: nachtblauw als inkt, helder blauw als
 * accent, PT Serif voor koppen en Montserrat voor tekst. Groen, oranje en
 * rood blijven uitsluitend voor status: kleur in een tabel of meter betekent
 * altijd een bevinding. Cijfers in mono met tabellarische breedte.
 *
 * Lettertypen staan zelf gehost in /assets/fonts (SIL Open Font License);
 * de CSP laat geen externe bronnen toe.
 *
 * Tokens komen uit /assets/tokens.css, per gevel.
 * Geen inline styles: de CSP staat ze niet toe en dat is de bedoeling.
 */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/pt-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/pt-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/pt-serif-latin-700-normal.woff2') format('woff2'); }

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

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

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.6;
  color: var(--inkt-800);
  background: var(--grond);
  font-variant-ligatures: none;
}

h1, h2, h3, h4 {
  color: var(--inkt-900);
  letter-spacing: -0.021em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--inkt-900); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ maat */

.wrap { max-width: 64rem; margin: 0 auto; padding-inline: 1.5rem; }
.wrap--smal { max-width: 40rem; }
.meet { max-width: 34rem; }

.sectie { padding-block: 4rem; }
.sectie--dun { padding-block: 0 4rem; }
.sectie--papier { background: var(--papier); border-block: 1px solid var(--inkt-200); }

.sectie-kop {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-500);
  margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------- chrome */

.site-kop {
  background: var(--papier);
  border-bottom: 1px solid var(--inkt-200);
  padding-block: 1rem;
}
.site-kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--inkt-900);
  text-decoration: none;
  font-weight: 650;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}
.merk-teken { display: block; width: 1.25rem; height: 1.25rem; color: var(--inkt-900); }
.merk-teken .piek { color: var(--accent); }

.site-nav { display: flex; gap: 1.5rem; font-size: 0.95rem; }
.site-nav a { color: var(--inkt-600); text-decoration: none; }
.site-nav a:hover { color: var(--inkt-900); text-decoration: underline; }

.site-voet {
  background: var(--inkt-900);
  color: var(--inkt-300);
  padding-block: 2.5rem;
  margin-top: 5rem;
  font-size: 0.9rem;
}
.site-voet p { margin-bottom: 0.75rem; }
.site-voet a { color: var(--inkt-300); }
.site-voet a:hover { color: var(--papier); }
.site-voet ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------- hero */

.hero { background: var(--papier); border-bottom: 1px solid var(--inkt-200); padding-block: 5rem 4rem; }
.hero h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 680; }
.hero .leid { font-size: 1.2rem; color: var(--inkt-600); margin-block: 1.25rem 2rem; }
.hero .knop { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ knop */

.knop {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--inkt-900);
  border-radius: var(--radius-m);
  background: var(--inkt-900);
  color: var(--papier);
  text-decoration: none;
  cursor: pointer;
}
.knop:hover { background: var(--inkt-800); border-color: var(--inkt-800); color: var(--papier); }
.knop--rand { background: transparent; color: var(--inkt-900); border-color: var(--inkt-300); }
.knop--rand:hover { background: var(--inkt-100); color: var(--inkt-900); border-color: var(--inkt-400); }

/* ------------------------------------------------------------------ noot */

.noot { font-size: 0.85rem; color: var(--inkt-500); }
.noot--kader {
  border: 1px solid var(--inkt-200);
  border-radius: var(--radius-m);
  background: var(--papier);
  padding: 1.1rem 1.25rem;
}

/* ---------------------------------------------------------------- stappen */

.stappen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inkt-200); }
.stappen li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--inkt-200);
}
.stappen .nr { font-family: var(--font-mono); font-size: 0.9rem; color: var(--inkt-400); padding-top: 0.15rem; }
.stappen h3 { font-size: 1.05rem; font-weight: 620; margin-bottom: 0.3rem; }
.stappen p { color: var(--inkt-600); }

/* ----------------------------------------------------------------- kolommen */

.kolommen { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.kolom h3 { font-size: 1.05rem; font-weight: 620; margin-bottom: 0.45rem; }
.kolom p { color: var(--inkt-600); }
.kolom .streep { display: block; width: 2rem; border-top: 2px solid var(--inkt-900); margin-bottom: 1rem; }

/* --------------------------------------------------------------- formulier */

.formulier {
  background: var(--papier);
  border: 1px solid var(--inkt-200);
  border-radius: var(--radius-l);
  padding: 2rem;
}
.veld { margin-bottom: 1.5rem; }
.veld label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
.veld .hint { display: block; font-weight: 400; font-size: 0.85rem; color: var(--inkt-500); margin-bottom: 0.4rem; }
.veld input[type='text'],
.veld input[type='email'],
.veld select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  color: var(--inkt-900);
  background: var(--papier);
  border: 1px solid var(--inkt-300);
  border-radius: var(--radius-m);
}
.veld input:hover, .veld select:hover { border-color: var(--inkt-400); }

.veld--consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  background: var(--grond);
  border: 1px solid var(--inkt-200);
  border-radius: var(--radius-m);
  padding: 1rem;
}
.veld--consent input { margin: 0.35rem 0 0; }
.veld--consent label { font-weight: 400; font-size: 0.92rem; line-height: 1.5; }

.formulier .knop { width: 100%; }

.melding {
  border: 1px solid var(--status-actie);
  border-left-width: 3px;
  background: var(--status-actie-vlak);
  color: var(--inkt-900);
  border-radius: var(--radius-m);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.melding ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.melding--let-op { border-color: var(--status-let-op); background: var(--status-let-op-vlak); }

/* ------------------------------------------------------------------ status */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.chip::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.chip--groen, .chip--pass { background: var(--status-goed-vlak); color: var(--status-goed); }
.chip--oranje, .chip--warn { background: var(--status-let-op-vlak); color: var(--status-let-op); }
.chip--rood, .chip--fail { background: var(--status-actie-vlak); color: var(--status-actie); }
.chip--onbekend, .chip--error, .chip--not_applicable { background: var(--status-onbekend-vlak); color: var(--status-onbekend); }

.chip--stil { background: transparent; color: var(--inkt-500); padding-inline: 0; }
.chip--stil::before { display: none; }

/* ----------------------------------------------------------------- rapport */

.rapport-kop { border-bottom: 1px solid var(--inkt-200); padding-bottom: 2rem; margin-bottom: 2.5rem; }
.rapport-kop .kruimel {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--inkt-400);
  margin-bottom: 0.9rem;
}
.rapport-kop h1 { font-size: 2rem; font-weight: 660; }
.rapport-kop .domein { font-family: var(--font-mono); color: var(--inkt-600); margin-top: 0.4rem; }

.score {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) 1fr;
  gap: 3rem;
  align-items: start;
  background: var(--papier);
  border: 1px solid var(--inkt-200);
  border-radius: var(--radius-l);
  padding: 2rem;
}
.score-cijfer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 3.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--inkt-900);
}
.score-cijfer .van { font-size: 1.1rem; font-weight: 400; color: var(--inkt-400); letter-spacing: 0; }

.meter { height: 4px; background: var(--inkt-100); border-radius: 2px; margin-block: 1rem 0.9rem; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 2px; }
.meter--groen span { background: var(--status-goed); }
.meter--oranje span { background: var(--status-let-op); }
.meter--rood span { background: var(--status-actie); }
.meter--onbekend span { background: var(--inkt-300); }

.score-uitleg .titel { font-weight: 620; color: var(--inkt-900); margin-bottom: 0.4rem; }
.score-uitleg p { color: var(--inkt-600); font-size: 0.95rem; }
.score-uitleg .disclaimer { margin-top: 0.9rem; color: var(--inkt-500); font-size: 0.85rem; }

.blok {
  background: var(--papier);
  border: 1px solid var(--inkt-200);
  border-radius: var(--radius-l);
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.blok-kop h3 { font-size: 1.1rem; font-weight: 620; }
.blok-kop .cijfer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--inkt-500); }
.blok > .omschrijving { color: var(--inkt-500); font-size: 0.9rem; margin-top: 0.35rem; }

.bevindingen { margin-top: 1.25rem; }
.bevinding { border-top: 1px solid var(--inkt-200); padding-block: 1.25rem; }
.bevinding:last-child { padding-bottom: 0; }
.bevinding .labels { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.55rem; }
.bevinding h4 { font-size: 1rem; font-weight: 620; margin-bottom: 0.3rem; }
.bevinding p { color: var(--inkt-600); font-size: 0.95rem; }
.bevinding .herstel { margin-top: 0.5rem; color: var(--inkt-800); }
.bevinding .bron { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--inkt-400); }

.poort {
  border: 1px dashed var(--inkt-300);
  background: var(--accent-vlak);
  border-radius: var(--radius-l);
  padding: 1.75rem 2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.poort p { color: var(--inkt-800); max-width: 34rem; }


/* Vulling van de meter in stappen van 5%. Klassen in plaats van een inline
 * width, omdat de CSP inline styles niet toestaat — en dat houden we zo. */
.vul-0 { width: 0%; }
.vul-5 { width: 5%; }
.vul-10 { width: 10%; }
.vul-15 { width: 15%; }
.vul-20 { width: 20%; }
.vul-25 { width: 25%; }
.vul-30 { width: 30%; }
.vul-35 { width: 35%; }
.vul-40 { width: 40%; }
.vul-45 { width: 45%; }
.vul-50 { width: 50%; }
.vul-55 { width: 55%; }
.vul-60 { width: 60%; }
.vul-65 { width: 65%; }
.vul-70 { width: 70%; }
.vul-75 { width: 75%; }
.vul-80 { width: 80%; }
.vul-85 { width: 85%; }
.vul-90 { width: 90%; }
.vul-95 { width: 95%; }
.vul-100 { width: 100%; }

.rapport-acties { margin-block: 1.75rem 2rem; }

/* ------------------------------------------------------------------ prijzen */

.prijzen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.prijs-kaart {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--inkt-200);
  border-radius: var(--radius-l);
  padding: 1.75rem;
}
.prijs-kaart h3 { font-size: 1rem; font-weight: 620; }
.prijs-kaart .prijs {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--inkt-900);
  margin-top: 0.5rem;
}
.prijs-kaart .belofte { color: var(--inkt-600); font-size: 0.95rem; margin-top: 0.6rem; }
.prijs-kaart ul { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; font-size: 0.92rem; color: var(--inkt-600); }
.prijs-kaart li { padding-left: 1.1rem; margin-bottom: 0.4rem; position: relative; }
.prijs-kaart li::before { content: '—'; position: absolute; left: 0; color: var(--inkt-300); }
.prijs-kaart .knop { margin-top: auto; text-align: center; }
.concept-vlag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--status-let-op);
  background: var(--status-let-op-vlak);
  border-radius: var(--radius-s);
  padding: 0.15rem 0.45rem;
  margin-top: 0.6rem;
}

/* ------------------------------------------------------------------- fout */

.fout-pagina { padding-block: 6rem; }
.fout-pagina h1 { font-size: 2rem; margin-bottom: 0.75rem; }
.fout-pagina p { color: var(--inkt-600); margin-bottom: 2rem; }

/* ------------------------------------------------------------------ smal */

@media (max-width: 52rem) {
  .score { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .wrap { padding-inline: 1.25rem; }
  .hero { padding-block: 3rem 2.5rem; }
  .sectie { padding-block: 3rem; }
  .site-voet { margin-top: 3rem; }
  .blok, .formulier, .score, .poort, .prijs-kaart { padding: 1.5rem; }
  .stappen li { grid-template-columns: 2rem 1fr; gap: 1rem; }
  .poort { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .score-cijfer { font-size: 3rem; }
}

/* ------------------------------------------------------------- werkruimte */

.werk { background: var(--grond); }

.werk-kop { background: var(--papier); border-bottom: 1px solid var(--inkt-200); position: sticky; top: 0; z-index: 10; }
.werk-kop-binnen {
  max-width: 78rem; margin: 0 auto; padding: 0.85rem 1.5rem;
  display: flex; align-items: center; gap: 2rem;
}
.werk-nav { display: flex; gap: 0.35rem; flex: 1; flex-wrap: wrap; }
.werk-nav a {
  color: var(--inkt-600); text-decoration: none; font-size: 0.95rem;
  padding: 0.35rem 0.75rem; border-radius: var(--radius-m);
}
.werk-nav a:hover { background: var(--inkt-100); color: var(--inkt-900); }
.werk-nav a.aan { background: var(--inkt-900); color: var(--papier); }
.werk-org { font-family: var(--font-mono); font-size: 0.78rem; color: var(--inkt-500); white-space: nowrap; }

.werk-blad { max-width: 78rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.werk-voet { border-top: 1px solid var(--inkt-200); background: var(--papier); padding-block: 1.5rem; }
.werk-voet .wrap { max-width: 78rem; }

.werk-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.werk-titel h1 { font-size: 1.75rem; }
.werk-titel .bij { color: var(--inkt-500); font-size: 0.95rem; }

/* kerncijfers */
.cijfers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 2rem; }
.cijfer { background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 1.25rem 1.4rem; }
.cijfer .getal { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: var(--inkt-900); line-height: 1; }
.cijfer .getal.aandacht { color: var(--status-actie); }
.cijfer .wat { font-size: 0.85rem; color: var(--inkt-500); margin-top: 0.45rem; }
.cijfer .wat--bij { display: inline; margin-top: 0; }

/* takengroepen */
.groep { background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); margin-bottom: 1.25rem; overflow: hidden; }
.groep-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--inkt-200); }
.groep-kop h2 { font-size: 1rem; font-weight: 620; }
.groep-kop .telling { font-family: var(--font-mono); font-size: 0.85rem; color: var(--inkt-500); }

.taak { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; padding: 0.95rem 1.5rem; border-bottom: 1px solid var(--inkt-100); align-items: start; }
.taak:last-child { border-bottom: 0; }
.taak .wanneer { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; padding-top: 0.2rem; }
.taak .wanneer.nu { color: var(--status-actie); }
.taak .wanneer.binnenkort { color: var(--status-let-op); }
.taak .wanneer.later { color: var(--inkt-400); }
.taak .wat { font-weight: 560; color: var(--inkt-900); }
.taak .waarom { font-size: 0.9rem; color: var(--inkt-600); margin-top: 0.2rem; }
.taak .merken { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.merk-chip { font-family: var(--font-mono); font-size: 0.7rem; color: var(--inkt-500); background: var(--inkt-100); border-radius: var(--radius-s); padding: 0.12rem 0.4rem; white-space: nowrap; }
.groep-meer { padding: 0.8rem 1.5rem; font-size: 0.88rem; color: var(--inkt-500); background: var(--grond); }

/* tabellen */
.tabel-omhulsel { overflow-x: auto; background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); }
table.lijst { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.lijst th { text-align: left; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--inkt-500); font-weight: 600; padding: 0.85rem 1rem; border-bottom: 1px solid var(--inkt-200); white-space: nowrap; }
table.lijst td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--inkt-100); vertical-align: top; }
table.lijst tr:last-child td { border-bottom: 0; }
table.lijst td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--inkt-600); }
table.lijst a { color: var(--inkt-900); }

/* vragenlijst */
.sectie-blok { background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); margin-bottom: 1.25rem; }
.sectie-blok > h2 { font-size: 1rem; font-weight: 620; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--inkt-200); }
.vraag { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--inkt-100); }
.vraag:last-child { border-bottom: 0; }
.vraag .kop { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.vraag label.stelling { font-weight: 560; color: var(--inkt-900); display: block; }
.vraag .uitleg { font-size: 0.9rem; color: var(--inkt-600); margin-top: 0.3rem; max-width: 46rem; }
.vraag .signaal { font-size: 0.88rem; color: var(--status-let-op); background: var(--status-let-op-vlak); border-radius: var(--radius-m); padding: 0.55rem 0.8rem; margin-top: 0.65rem; }
.keuzes { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.keuzes label {
  font-size: 0.88rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m);
  padding: 0.35rem 0.8rem; cursor: pointer; color: var(--inkt-600); background: var(--papier);
}
.keuzes input { position: absolute; opacity: 0; width: 0; height: 0; }
.keuzes input:checked + span { font-weight: 600; }
.keuzes label:has(input:checked) { border-color: var(--inkt-900); background: var(--inkt-900); color: var(--papier); }
.keuzes label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.bewaarbalk { position: sticky; bottom: 0; background: var(--papier); border-top: 1px solid var(--inkt-200); padding: 1rem 1.5rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-radius: 0 0 var(--radius-l) var(--radius-l); }

.melding--goed { border-color: var(--status-goed); background: var(--status-goed-vlak); }

/* voortgangsbalk in lijsten */
.mini-meter { height: 4px; width: 7rem; background: var(--inkt-100); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; }
.mini-meter span { display: block; height: 100%; background: var(--inkt-900); border-radius: 2px; }

@media (max-width: 52rem) {
  .taak { grid-template-columns: 1fr; gap: 0.35rem; }
  .taak .merken { justify-content: flex-start; }
  .werk-kop-binnen { flex-wrap: wrap; gap: 0.75rem; }
}

/* ------------------------------------------------------ inloggen en beheer */

.inlog-knoppen { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.inlog-ontwikkel { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--inkt-300); }

.werk-wie { display: flex; align-items: center; gap: 0.9rem; font-size: 0.85rem; white-space: nowrap; }
.werk-wie a { color: var(--inkt-600); }
.werk-wie form { margin: 0; }
.link-knop { background: none; border: 0; padding: 0; font: inherit; color: var(--inkt-600); text-decoration: underline; cursor: pointer; }
.link-knop:hover { color: var(--inkt-900); }

fieldset.kaal { border: 0; margin: 0; padding: 0; min-width: 0; }

.beheer-raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-bottom: 1.25rem; }
.beheer-raster .sectie-blok { margin-bottom: 0; }
.beheer-vak .formulier, .beheer-opdracht { padding: 1.25rem 1.5rem; border: 0; border-radius: 0; background: none; }
.beheer-opdracht { border-top: 1px solid var(--inkt-200); }
.beheer-opdracht { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.beheer-opdracht .knop { margin-bottom: 1.5rem; }
.beheer-regel { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; margin: 0 0 0.5rem; }
.beheer-regel select { font: inherit; font-size: 0.85rem; padding: 0.15rem 0.3rem; }
.vinkje { font-size: 0.85rem; color: var(--inkt-600); display: inline-flex; gap: 0.3rem; align-items: center; }
.beheer-lijst { margin: 0; padding: 0 1.5rem 1.25rem 2.7rem; font-size: 0.88rem; color: var(--inkt-600); }
.tabel-omhulsel--kaal { border: 0; border-radius: 0; }

@media (max-width: 52rem) {
  .werk-wie { flex-wrap: wrap; white-space: normal; }
}

/* ------------------------------------------------------ controls en registers */

.filterbalk { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; margin-bottom: 1rem; }
.filterbalk label { display: grid; gap: 0.25rem; font-size: 0.8rem; color: var(--inkt-500); }
.filterbalk select { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); background: var(--papier); color: var(--inkt-900); }
.nowrap { white-space: nowrap; }

.inline-formulier { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 1rem 1.5rem; }
.inline-formulier select { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); background: var(--papier); min-width: 16rem; }

.register-formulier { max-width: 60rem; }
.register-formulier textarea, .register-formulier input[type='date'], .register-formulier input[type='datetime-local'] {
  width: 100%; font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); background: var(--papier); color: var(--inkt-900);
}
.veld-rij { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: 0.5rem; }
.register-formulier .vinkje { margin-bottom: 1rem; }
.formulier-kop { font-size: 1rem; margin: 1.5rem 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--inkt-200); }
.knoppen { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.register-formulier .knoppen .knop { width: auto; }

.noot--actie { color: var(--status-actie); }

.risico-kop { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; margin-bottom: 2rem; }
.cijfers--smal { margin-bottom: 0; }
.matrix { display: grid; grid-template-columns: repeat(5, 2.1rem); gap: 3px; margin: 0; }
.matrix-cel { height: 2.1rem; display: grid; place-items: center; border-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--inkt-900); }
.matrix-cel--laag { background: var(--status-goed-vlak); }
.matrix-cel--midden { background: var(--status-let-op-vlak); }
.matrix-cel--hoog { background: var(--status-actie-vlak); }
.matrix figcaption { grid-column: 1 / -1; font-size: 0.75rem; color: var(--inkt-500); text-align: center; margin-top: 0.3rem; }

@media (max-width: 52rem) {
  .risico-kop { grid-template-columns: 1fr; }
}
.inline-melding { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.inline-formulier input[type='date'], .inline-formulier input[type='text'] { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); background: var(--papier); }
.inline-formulier input[type='text'] { flex: 1; min-width: 14rem; }
.groep--ruimte { margin-top: 1.5rem; }

/* zijbalk */
.werk-kop-binnen { justify-content: space-between; }
.werk-romp { display: grid; grid-template-columns: 14rem minmax(0, 1fr); max-width: 92rem; margin: 0 auto; }
.werk-romp--zonder { grid-template-columns: minmax(0, 1fr); }
.werk-zij { position: sticky; top: 3.6rem; align-self: start; padding: 2rem 0.75rem 2rem 1.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.werk-zij-groep { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-400); margin: 1.1rem 0 0.35rem 0.75rem; }
.werk-zij-groep:first-child { margin-top: 0; }
.werk-zij a { color: var(--inkt-600); text-decoration: none; font-size: 0.93rem; padding: 0.4rem 0.75rem; border-radius: var(--radius-m); }
.werk-zij a:hover { background: var(--inkt-100); color: var(--inkt-900); }
.werk-zij a.aan { background: var(--inkt-900); color: var(--papier); }
.werk-romp .werk-blad { max-width: none; margin: 0; min-width: 0; }

@media (max-width: 60rem) {
  .werk-romp { grid-template-columns: minmax(0, 1fr); }
  .werk-zij { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.35rem; padding: 1rem 1.5rem 0; }
  .werk-zij-groep { display: none; }
}

/* documenten */
.document-raster { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.document { background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 2rem 2.25rem; line-height: 1.65; max-width: 48rem; }
.document h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.document h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }
.document h4 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; }
.document ul { padding-left: 1.2rem; margin: 0.5rem 0 1rem; }
.document li { margin-bottom: 0.3rem; }
.document blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--inkt-300); color: var(--inkt-600); background: var(--grond); }
.document .tabel-omhulsel { margin: 1rem 0; }
.gat { background: var(--status-let-op-vlak); color: var(--status-let-op); border-radius: 3px; padding: 0 0.25rem; font-size: 0.9em; }
.document-zij .groep { margin-bottom: 1rem; }
.feiten { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; padding: 1rem 1.5rem; margin: 0; font-size: 0.9rem; }
.feiten dt { color: var(--inkt-500); }
.feiten dd { margin: 0; }
.acties { display: grid; gap: 0.5rem; padding: 0 1.5rem 1.25rem; }
.acties form { margin: 0; }
.acties .knop { width: 100%; }
.document-noot { padding: 0 1.5rem 1.25rem; margin: 0; }
.document-velden { max-width: none; border: 0; border-radius: 0; }

@media (max-width: 64rem) {
  .document-raster { grid-template-columns: minmax(0, 1fr); }
}

/* managementsysteem, SoA, registers, auditdossier */
.eis { border-bottom: 1px solid var(--inkt-100); }
.eis:last-child { border-bottom: 0; }
.eis summary { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1rem; align-items: center; padding: 0.9rem 1.5rem; cursor: pointer; list-style: none; }
.eis summary::-webkit-details-marker { display: none; }
.eis summary:hover { background: var(--grond); }
.eis-id { color: var(--inkt-500); }
.eis-stand { display: flex; gap: 0.6rem; align-items: center; white-space: nowrap; }
.eis[open] summary { background: var(--grond); }
.soa-reden { width: 100%; min-width: 14rem; font: inherit; font-size: 0.88rem; padding: 0.35rem 0.5rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); }
table.lijst select { font: inherit; font-size: 0.88rem; padding: 0.3rem 0.4rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); background: var(--papier); }
.bewaarbalk--los { border: 1px solid var(--inkt-200); border-radius: var(--radius-l); margin-top: 1rem; }
.afdruk-kop { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
.afdruk-tabel { background: var(--papier); border: 1px solid var(--inkt-200); }
.afdruk-tabel .chip { font-size: 0.7rem; }

@media print {
  .werk-kop, .werk-zij, .werk-voet, .knop { display: none !important; }
  .werk-romp { display: block; }
  .werk-blad { padding: 0; }
  body.werk { background: #fff; }
  .afdruk-tabel { font-size: 9pt; }
  .afdruk-tabel tr { break-inside: avoid; }
}

/* netwerk */
.kaarten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.kaart { background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.kaart h2 { font-size: 1.1rem; margin: 0; }
.kaart p { margin: 0; }
.kaart .knop { margin-top: auto; align-self: flex-start; }
.feiten--kaal { padding: 0; }
.acties-rij { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.acties-rij form { margin: 0; }
.knop--klein { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.opzeggen { margin-top: 1.25rem; }

/* =====================================================================
 * Huisstijl 2026 — de laag die het geheel afmaakt.
 * Bewust onderaan: hij bouwt voort op de onderdelen hierboven.
 * ===================================================================== */

body { font-size: 16px; line-height: 1.65; color: var(--inkt-800); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--font-kop); font-weight: 700; letter-spacing: -0.01em; }
h3, h4 { font-weight: 600; letter-spacing: -0.005em; }
a { color: var(--accent); }
::selection { background: var(--accent-vlak); }

.wrap { max-width: 72rem; }
.wrap--midden { max-width: 48rem; }

/* knoppen */
.knop { border-radius: var(--radius-m); font-weight: 600; font-size: 0.95rem; padding: 0.7rem 1.3rem; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; }
.knop:hover { box-shadow: var(--schaduw); }
.knop--merk { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop--merk:hover { background: #1D4FC4; border-color: #1D4FC4; color: #fff; }
.knop--spook { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.knop--spook:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.knop--licht { background: #fff; border-color: #fff; color: var(--nacht); }
.knop--licht:hover { background: var(--inkt-100); border-color: var(--inkt-100); color: var(--nacht); }
.knop--groot { padding: 0.9rem 1.6rem; font-size: 1rem; }
.knop--klein { padding: 0.45rem 0.95rem; font-size: 0.88rem; }
.knop--rand { border-color: var(--inkt-300); }

.label { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--merk-blauw); margin-bottom: 1rem; }
.label--donker { color: var(--accent); }

/* kop */
.site-kop { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--inkt-200); padding-block: 0.9rem; }
.merk { font-family: var(--font-tekst); font-weight: 700; letter-spacing: -0.01em; font-size: 1.15rem; color: var(--inkt-900); }
.merk-teken .piek { color: var(--merk-blauw); }
.site-nav { align-items: center; gap: 1.75rem; }
.site-nav a { font-weight: 500; font-size: 0.92rem; color: var(--inkt-600); }
.site-nav a:hover { text-decoration: none; color: var(--inkt-900); }
.site-nav .knop { color: #fff; background: var(--nacht); border-color: var(--nacht); }
.site-nav .knop:hover { color: #fff; background: var(--nacht-2); }
.kop-donker .site-kop { background: var(--nacht); border-bottom-color: rgba(255, 255, 255, 0.08); }
.kop-donker .merk { color: #fff; }
.kop-donker .merk-teken { color: #fff; }
.kop-donker .site-nav a { color: rgba(255, 255, 255, 0.78); }
.kop-donker .site-nav a:hover { color: #fff; }
.kop-donker .site-nav .knop { background: #fff; border-color: #fff; color: var(--nacht); }

/* held */
.held {
  position: relative; overflow: hidden; color: #fff; padding-block: 5.5rem 6rem;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(81, 0, 214, 0.45), transparent 60%),
    radial-gradient(40rem 26rem at 0% 110%, rgba(54, 142, 255, 0.28), transparent 60%),
    linear-gradient(180deg, var(--nacht) 0%, var(--nacht-2) 100%);
}
.held::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
}
.held-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; align-items: center; }
.held h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; }
.held .leid { color: rgba(255, 255, 255, 0.78); font-size: 1.15rem; line-height: 1.6; margin-block: 1.5rem 2.25rem; max-width: 34rem; }
.held-knoppen { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.bewijs { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.bewijs li { display: flex; align-items: center; gap: 0.5rem; }
.bewijs li::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--merk-blauw); box-shadow: 0 0 0 4px rgba(54, 142, 255, 0.2); }

/* voorbeeld van de werkruimte */
.voorbeeld { background: #fff; color: var(--inkt-800); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.voorbeeld-balk { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; background: var(--grond); border-bottom: 1px solid var(--inkt-200); }
.voorbeeld-balk span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--inkt-300); }
.voorbeeld-inhoud { padding: 1.5rem 1.6rem 1.75rem; }
.voorbeeld-org { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inkt-500); }
.voorbeeld-kop { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.35rem; }
.voorbeeld-kop p:first-child { font-family: var(--font-kop); font-weight: 700; font-size: 1.2rem; color: var(--inkt-900); }
.voorbeeld-getal { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; color: var(--inkt-900); }
.meter--merk span { background: linear-gradient(90deg, var(--accent), var(--merk-violet)); }
.voorbeeld-regels { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.voorbeeld-regels li { display: grid; grid-template-columns: 3.6rem 1fr 5rem auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--inkt-100); font-size: 0.86rem; }
.voorbeeld-regels .mono { color: var(--inkt-500); font-size: 0.78rem; }
.voorbeeld-naam { color: var(--inkt-800); font-weight: 500; }
.voorbeeld .mini-meter { width: 100%; }

/* secties */
.sectie { padding-block: 6rem; }
.sectie--dun { padding-block: 0 6rem; }
.sectie--papier { background: #fff; }
.sectie-intro { max-width: 42rem; margin-bottom: 3rem; }
.sectie-intro h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; color: var(--inkt-900); }
.sectie--nacht { color: #fff; background: radial-gradient(50rem 24rem at 100% 0%, rgba(81, 0, 214, 0.35), transparent 60%), var(--nacht); }
.sectie--nacht h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; }
.sectie--nacht .leid { color: rgba(255, 255, 255, 0.75); margin-top: 1.25rem; font-size: 1.05rem; }

.tegels { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.tegel { background: #fff; border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 1.75rem; box-shadow: var(--schaduw); transition: transform 0.2s, box-shadow 0.2s; }
.tegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hoog); }
.tegel-nr { display: inline-block; font-size: 0.78rem; color: var(--accent); background: var(--accent-vlak); border-radius: 999px; padding: 0.15rem 0.6rem; margin-bottom: 1rem; }
.tegel h3 { font-size: 1.08rem; color: var(--inkt-900); margin-bottom: 0.5rem; }
.tegel p { color: var(--inkt-600); font-size: 0.93rem; }

.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: stap; }
.tijdlijn li { position: relative; padding-top: 3.25rem; }
.tijdlijn li::before { content: ''; position: absolute; top: 1.15rem; left: 2.6rem; right: -2rem; border-top: 1px dashed var(--inkt-300); }
.tijdlijn li:last-child::before { display: none; }
.tijdlijn-nr { position: absolute; top: 0; left: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--merk-violet)); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3); }
.tijdlijn h3 { font-size: 1.05rem; color: var(--inkt-900); margin-bottom: 0.4rem; }
.tijdlijn p { color: var(--inkt-600); font-size: 0.93rem; }

.netwerk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 4rem; align-items: center; }
.vinklijst, .kruislijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.vinklijst li, .kruislijst li { position: relative; padding-left: 2rem; }
.vinklijst li::before { content: ''; position: absolute; left: 0; top: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--accent-vlak); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25); }
.vinklijst li::after { content: ''; position: absolute; left: 0.42rem; top: 0.42rem; width: 0.32rem; height: 0.58rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vinklijst--licht li { color: rgba(255, 255, 255, 0.9); font-weight: 500; padding: 1rem 1.25rem 1rem 3rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-m); }
.vinklijst--licht li::before { left: 1rem; top: 1.15rem; background: rgba(54, 142, 255, 0.18); }
.vinklijst--licht li::after { left: 1.42rem; top: 1.37rem; border-color: var(--merk-blauw); }
.kruislijst li { color: var(--inkt-500); }
.kruislijst li::before { content: '–'; position: absolute; left: 0.35rem; top: 0; color: var(--inkt-400); }

.vergelijk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.vergelijk-kolom { border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 2rem; background: var(--grond); }
.vergelijk-kolom h3 { font-size: 1.1rem; margin-bottom: 1.25rem; color: var(--inkt-600); }
.vergelijk-kolom--uitgelicht { background: #fff; border-color: rgba(37, 99, 235, 0.35); box-shadow: var(--schaduw-hoog); }
.vergelijk-kolom--uitgelicht h3 { color: var(--inkt-900); }
.vergelijk-kolom--uitgelicht .knop { margin-top: 1.75rem; }

.band { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 2.75rem 3rem; border-radius: 20px; color: #fff; background: radial-gradient(30rem 16rem at 100% 0%, rgba(81, 0, 214, 0.55), transparent 60%), linear-gradient(120deg, var(--nacht), var(--nacht-2)); }
.band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.band p { color: rgba(255, 255, 255, 0.75); margin-top: 0.5rem; max-width: 34rem; }

.faq { border-top: 1px solid var(--inkt-200); margin-bottom: 2.5rem; }
.faq details { border-bottom: 1px solid var(--inkt-200); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; font-weight: 600; color: var(--inkt-900); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.25rem; top: 1.05rem; font-size: 1.35rem; font-weight: 400; color: var(--inkt-400); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--inkt-600); padding-bottom: 1.25rem; max-width: 40rem; }

/* footer */
.site-voet { background: var(--nacht); color: rgba(255, 255, 255, 0.65); padding-block: 4rem 2rem; font-size: 0.9rem; }
.voet-raster { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.voet-merk p { margin-top: 0.75rem; }
.merk--licht { color: #fff; display: inline-flex; align-items: center; gap: 0.5rem; }
.merk--licht .merk-teken { color: #fff; }
.voet-kop { color: #fff; font-weight: 600; margin-bottom: 0.9rem; }
.site-voet ul { display: grid; gap: 0.55rem; }
.site-voet a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.site-voet a:hover { color: #fff; }
.voet-onder { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.82rem; }

/* prijzen */
.prijs-kaart { border-radius: var(--radius-l); box-shadow: var(--schaduw); }
.prijs-kaart--uitgelicht { border-color: rgba(37, 99, 235, 0.45); box-shadow: var(--schaduw-hoog); position: relative; }
.prijs-kaart--uitgelicht::before { content: 'Het abonnement'; position: absolute; top: -0.75rem; left: 1.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, var(--accent), var(--merk-violet)); padding: 0.25rem 0.65rem; border-radius: 999px; }
.prijs-kaart .prijs { font-family: var(--font-kop); }
.prijs-kaart--uitgelicht .knop { background: var(--accent); border-color: var(--accent); color: #fff; }

/* formulieren en kaarten buiten de werkruimte */
.formulier { border-radius: var(--radius-l); box-shadow: var(--schaduw); }
.veld input[type='text'], .veld input[type='email'], .veld select, .register-formulier textarea { border-radius: var(--radius-m); }
.veld input:focus, .veld select:focus, .register-formulier textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-vlak); }
.wrap--smal > h1, .fout-pagina h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.leid.noot { font-size: 1rem; margin-top: 0.75rem; margin-bottom: 2rem; }
.inlog-knoppen .knop { display: flex; justify-content: center; background: #fff; border: 1px solid var(--inkt-300); color: var(--inkt-900); padding-block: 0.85rem; }
.inlog-knoppen .knop:hover { border-color: var(--inkt-400); background: var(--grond); }

/* werkruimte */
.werk { background: var(--grond); }
.werk-kop { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(10px); }
.werk-kop .merk { font-size: 1.05rem; }
.werk-zij { padding-top: 1.75rem; }
.werk-zij a { font-weight: 500; font-size: 0.9rem; }
.werk-zij a.aan { background: var(--nacht); color: #fff; box-shadow: var(--schaduw); }
.werk-zij-groep { font-weight: 600; }
.werk-titel h1 { font-family: var(--font-kop); font-size: 2rem; color: var(--inkt-900); }
.cijfer, .groep, .tabel-omhulsel, .sectie-blok, .kaart, .document { border-radius: var(--radius-l); box-shadow: var(--schaduw); border-color: var(--inkt-200); }
.cijfer .getal { font-weight: 600; }
.groep-kop h2, .sectie-blok > h2 { font-family: var(--font-tekst); font-size: 1rem; font-weight: 600; }
table.lijst th { font-weight: 600; letter-spacing: 0.08em; background: var(--grond); }
table.lijst tr:hover td { background: #FBFBFE; }
.mini-meter span { background: linear-gradient(90deg, var(--accent), var(--merk-violet)); }
.document { font-family: var(--font-tekst); }
.document h2 { font-family: var(--font-kop); }

@media (max-width: 60rem) {
  .held-raster, .netwerk { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .voorbeeld { transform: none; }
  .tijdlijn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tijdlijn li::before { display: none; }
  .vergelijk { grid-template-columns: minmax(0, 1fr); }
  .voet-raster { grid-template-columns: 1fr 1fr; }
  .voet-merk { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .held { padding-block: 3.5rem 4rem; }
  .sectie { padding-block: 4rem; }
  .tijdlijn { grid-template-columns: minmax(0, 1fr); }
  .site-nav { gap: 1rem; }
  .site-nav a:not(.knop) { display: none; }
  .band { padding: 2rem 1.5rem; }
  .voorbeeld-regels li { grid-template-columns: 3.2rem 1fr auto; }
  .voorbeeld .mini-meter { display: none; }
}
.onzichtbaar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.veld textarea { width: 100%; font: inherit; padding: 0.65rem 0.8rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); background: #fff; color: var(--inkt-900); }
.knop:disabled { opacity: 0.5; cursor: not-allowed; }
.prijs-kaart .prijs { font-size: 1.5rem; line-height: 1.2; }
.wrap--smal { max-width: 34rem; }
.wrap--midden { max-width: 48rem; }

/* inloggen, aanmelden, abonnement: één gecentreerde kaart */
.toegang { min-height: calc(100vh - 20rem); display: grid; place-items: start center; padding-block: 5rem; background: radial-gradient(40rem 20rem at 50% 0%, var(--accent-vlak), transparent 70%); }
.toegang-kaart { width: 100%; max-width: 27rem; background: #fff; border: 1px solid var(--inkt-200); border-radius: 18px; box-shadow: var(--schaduw-hoog); padding: 2.5rem 2.25rem; }
.toegang-kaart h1 { font-size: 1.9rem; margin-bottom: 0.5rem; }
.toegang-kaart .bij { color: var(--inkt-600); font-size: 0.93rem; margin-bottom: 1.75rem; }
.toegang-merk { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--nacht); margin-bottom: 1.5rem; }
.toegang-merk .merk-teken { color: #fff; width: 1.4rem; height: 1.4rem; }
.leverancier-knop { display: flex; align-items: center; justify-content: center; gap: 0.7rem; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--inkt-300); border-radius: var(--radius-m); background: #fff; color: var(--inkt-900); font-weight: 600; text-decoration: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.leverancier-knop:hover { border-color: var(--inkt-400); background: var(--grond); box-shadow: var(--schaduw); color: var(--inkt-900); }
.leverancier-knop svg { width: 1.15rem; height: 1.15rem; flex: none; }
.leveranciers { display: grid; gap: 0.75rem; }
.toegang-voet { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--inkt-100); font-size: 0.82rem; color: var(--inkt-500); }
.toegang .inlog-ontwikkel { margin-top: 1.75rem; padding: 1.25rem 0 0; border: 0; border-top: 1px dashed var(--inkt-300); box-shadow: none; border-radius: 0; }
.toegang-kaart--breed { max-width: 38rem; }
.toegang-kaart .formulier { box-shadow: none; border: 0; padding: 0; background: none; }
.toegang-kaart h2.afdruk-kop { font-family: var(--font-kop); }

/* overzicht */
.gereedheid { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr 0.8fr; margin-bottom: 1.5rem; }
.gereed-kaart { display: block; background: #fff; border: 1px solid var(--inkt-200); border-radius: var(--radius-l); box-shadow: var(--schaduw); padding: 1.5rem 1.6rem; color: inherit; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
a.gereed-kaart:hover { box-shadow: var(--schaduw-hoog); transform: translateY(-1px); color: inherit; }
.gereed-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-500); }
.gereed-getal { font-family: var(--font-kop); font-weight: 700; font-size: 2.8rem; line-height: 1.1; color: var(--inkt-900); margin-top: 0.4rem; }
.gereed-getal span { font-family: var(--font-tekst); font-size: 1.1rem; font-weight: 500; color: var(--inkt-400); }
.gereed-kaart .meter { margin-block: 0.85rem 0.75rem; height: 6px; }
.gereed-sub { font-size: 0.85rem; color: var(--inkt-500); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.overzicht-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.beginlijst { list-style: none; margin: 0; padding: 0.5rem 1.5rem 1rem; }
.beginlijst li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--inkt-100); }
.beginlijst li:last-child { border-bottom: 0; }
.beginlijst a { font-weight: 600; color: var(--inkt-900); text-decoration: none; }
.beginlijst a:hover { color: var(--accent); }
.beginlijst p { font-size: 0.87rem; color: var(--inkt-500); }
.begin-nr { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; color: var(--accent); background: var(--accent-vlak); }
.beginlijst li.klaar .begin-nr { color: #fff; background: var(--status-goed); }
.beginlijst li.klaar a { color: var(--inkt-500); text-decoration: line-through; }
.registerlijst { list-style: none; margin: 0; padding: 0.25rem 1.5rem 0.75rem; }
.registerlijst li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--inkt-100); font-size: 0.9rem; }
.registerlijst li:last-child { border-bottom: 0; }
.registerlijst a { color: var(--inkt-800); text-decoration: none; font-weight: 500; }
.registerlijst a:hover { color: var(--accent); }
.werk-org { font-family: var(--font-tekst); font-weight: 600; font-size: 0.82rem; color: var(--inkt-800); background: var(--grond); border: 1px solid var(--inkt-200); border-radius: 999px; padding: 0.3rem 0.8rem; }
@media (max-width: 64rem) {
  .gereedheid, .overzicht-raster { grid-template-columns: minmax(0, 1fr); }
}
.voorbeeld-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.let-op { background: #fff; border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 0.9rem 1.25rem; margin-bottom: 1.25rem; font-size: 0.88rem; color: var(--inkt-600); }
.let-op summary { cursor: pointer; font-weight: 600; color: var(--inkt-800); }
.let-op p { margin-top: 0.6rem; }
.let-op ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

/* trust center */
.trust-kop { color: #fff; padding-block: 4rem 3.5rem; background: radial-gradient(40rem 20rem at 90% -20%, rgba(81, 0, 214, 0.45), transparent 60%), var(--nacht); }
.trust-kop h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); }
.trust-kop .leid { color: rgba(255, 255, 255, 0.78); margin-top: 1rem; max-width: 40rem; }
.trust-contact { margin-top: 1.25rem; color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }
.trust-contact a { color: #fff; }
.trust-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.trust-sectie { font-size: 1.35rem; margin: 0 0 1rem; color: var(--inkt-900); }
.trust-raster .tabel-omhulsel + .trust-sectie { margin-top: 2.5rem; }
.trust-raster aside { display: grid; gap: 1rem; }
.trust-document { max-width: none; margin-top: 1rem; }
@media (max-width: 60rem) { .trust-raster { grid-template-columns: minmax(0, 1fr); } }

/* Koppelingen */
.groep-tekst { padding: 1rem 1.5rem; margin: 0; }
.groep-tekst > * + * { margin-top: 0.85rem; }
.knoppen { align-items: center; }
.checklijst { list-style: none; padding: 0.25rem 1.5rem 0.5rem; margin: 0; display: grid; }
.checklijst li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px solid var(--inkt-200); }
.checklijst li:last-child { border-bottom: 0; }
.checklijst .chip { justify-self: start; }
.knoppen form { margin: 0; }
@media (max-width: 560px) { .checklijst li { grid-template-columns: 1fr; gap: 0.35rem; } }

/* Juridische pagina's */
.juridisch h2 { font-family: var(--font-kop); font-size: 1.3rem; margin-top: 2.25rem; margin-bottom: 0.6rem; }
.juridisch p, .juridisch li { line-height: 1.7; color: var(--inkt-800); }
.juridisch p + p { margin-top: 0.6rem; }
.juridisch ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin-top: 0.6rem; }
.juridisch .tabel-omhulsel { margin-block: 1rem; }
.juridisch table td { vertical-align: top; font-size: 0.9rem; }
.juridisch code { font-family: var(--font-mono); font-size: 0.88em; }
.prijs-noot { margin-top: 0.65rem; font-size: 0.85rem; text-align: center; }
.verwerkingen { display: grid; gap: 0.75rem; margin-block: 1rem; }
.verwerking { background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 1rem 1.25rem; }
.verwerking h3 { font-family: var(--font-tekst); font-size: 0.95rem; font-weight: 620; margin-bottom: 0.5rem; }
.verwerking dl { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; line-height: 1.55; }
.verwerking dt { color: var(--inkt-500); }
.verwerking dd { margin: 0; color: var(--inkt-800); }
@media (max-width: 480px) { .verwerking dl { grid-template-columns: 1fr; } .verwerking dd { margin-bottom: 0.4rem; } }

/* ===================================================================
   Kleur 2026: foto's, kleurvlakken en zwevende productkaartjes.
   Zes accentkleuren, elk met een licht vlak; blauw en violet komen uit
   het logo, koraal, mint, amber en roze geven warmte.
   =================================================================== */
:root {
  --k-blauw: #2563EB; --k-blauw-vlak: #E8F0FF;
  --k-violet: #6D28D9; --k-violet-vlak: #F1EAFE;
  --k-koraal: #EA5A3C; --k-koraal-vlak: #FFECE6;
  --k-mint: #0E9F6E; --k-mint-vlak: #E2F7EE;
  --k-amber: #D99100; --k-amber-vlak: #FFF4D6;
  --k-roze: #D63384; --k-roze-vlak: #FDE7F1;
  --verloop-merk: linear-gradient(120deg, #368EFF 0%, #6D28D9 55%, #D63384 100%);
}

/* held */
.held--kleur { padding-block: 5rem 6.5rem; }
.held-gloed { position: absolute; inset: -20% -10% auto auto; width: 70%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 51, 132, 0.35), transparent 70%), radial-gradient(closest-side at 30% 70%, rgba(54, 142, 255, 0.35), transparent 70%);
  filter: blur(20px); }
.label--pil { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; padding: 0.4rem 0.85rem; border-radius: 999px; letter-spacing: 0.08em; }
.verloop-tekst { display: block; background: linear-gradient(100deg, #7DB5FF 0%, #B98BFF 50%, #FF8CC6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held-beeld { position: relative; padding: 1.5rem 0 3rem 2rem; }
.foto-lijst { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(6, 3, 35, 0.35); }
.foto-lijst img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-lijst--held { aspect-ratio: 4 / 4.4; border: 3px solid transparent; background: var(--verloop-merk) border-box; }
.foto-lijst--held img { border-radius: 19px; }
.zweef { position: absolute; background: #fff; color: var(--inkt-800); border-radius: 16px; box-shadow: 0 24px 60px rgba(6, 3, 35, 0.28); padding: 1rem 1.15rem; font-size: 0.85rem; }
.zweef--readiness { left: -2.5rem; bottom: 0; width: min(23rem, 88%); padding: 1.15rem 1.3rem; animation: drijf 7s ease-in-out infinite; }
.zweef--readiness .voorbeeld-regels li { grid-template-columns: 3.2rem 1fr auto; padding: 0.5rem 0; font-size: 0.8rem; }
.zweef--readiness .voorbeeld-getal { font-size: 1.5rem; }
.zweef--melding { display: flex; gap: 0.75rem; align-items: center; line-height: 1.35; padding: 0.8rem 1rem; }
.zweef--melding strong { color: var(--inkt-900); }
.zweef-icoon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; }
.zweef-icoon svg { width: 1.3rem; height: 1.3rem; }
.zweef--mint .zweef-icoon { background: var(--k-mint-vlak); color: var(--k-mint); }
.zweef--koraal .zweef-icoon { background: var(--k-koraal-vlak); color: var(--k-koraal); }
.zweef--violet .zweef-icoon { background: var(--k-violet-vlak); color: var(--k-violet); }
.held-beeld .zweef--mint { right: -1.25rem; top: 0; animation: drijf 6s ease-in-out infinite 0.8s; }
.held-beeld .zweef--koraal { right: -1.5rem; top: 46%; animation: drijf 8s ease-in-out infinite 1.6s; }
@keyframes drijf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .zweef { animation: none !important; } }

/* strook met normen */
.strook { background: #fff; border-bottom: 1px solid var(--inkt-200); }
.strook-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.75rem; padding-block: 1.4rem; }
.strook-kop { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inkt-500); margin-right: 0.5rem; }
.strook-pil { font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 999px; }
.strook-pil--0 { background: var(--k-blauw-vlak); color: var(--k-blauw); }
.strook-pil--1 { background: var(--k-violet-vlak); color: var(--k-violet); }
.strook-pil--2 { background: var(--k-koraal-vlak); color: #C2410C; }
.strook-pil--3 { background: var(--k-mint-vlak); color: #047857; }
.strook-pil--4 { background: var(--k-amber-vlak); color: #9A6700; }
.strook-pil--5 { background: var(--k-roze-vlak); color: #BE185D; }

/* gekleurde tegels */
.sectie-intro--midden { text-align: center; margin-inline: auto; }
.tegels--kleur { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.tegel--kleur { position: relative; overflow: hidden; border: 0; padding: 2rem 1.75rem; }
.tegel--kleur::after { content: ''; position: absolute; right: -3rem; top: -3rem; width: 9rem; height: 9rem; border-radius: 50%; opacity: 0.5; }
.tegel-icoon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; margin-bottom: 1.25rem; color: #fff; }
.tegel-icoon svg { width: 1.5rem; height: 1.5rem; }
.tegel--0 { background: var(--k-blauw-vlak); } .tegel--0 .tegel-icoon { background: var(--k-blauw); } .tegel--0::after { background: #CFE0FF; }
.tegel--1 { background: var(--k-violet-vlak); } .tegel--1 .tegel-icoon { background: var(--k-violet); } .tegel--1::after { background: #E2D3FD; }
.tegel--2 { background: var(--k-koraal-vlak); } .tegel--2 .tegel-icoon { background: var(--k-koraal); } .tegel--2::after { background: #FFD6CA; }
.tegel--3 { background: var(--k-mint-vlak); } .tegel--3 .tegel-icoon { background: var(--k-mint); } .tegel--3::after { background: #C3EEDB; }
.tegel--4 { background: var(--k-amber-vlak); } .tegel--4 .tegel-icoon { background: var(--k-amber); } .tegel--4::after { background: #FFE7A6; }
.tegel--5 { background: var(--k-roze-vlak); } .tegel--5 .tegel-icoon { background: var(--k-roze); } .tegel--5::after { background: #FBCFE3; }
.tegel--kleur h3, .tegel--kleur p { position: relative; z-index: 1; }
.tegel--kleur p { color: var(--inkt-800); }

/* cijferband */
.cijferband { background: var(--verloop-merk); color: #fff; }
.cijferband-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 3rem; }
.cijferband-getal { font-family: var(--font-kop); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1; }
.cijferband-wat { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }

/* duo: foto naast tekst */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
.duo-tekst h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; color: var(--inkt-900); margin-bottom: 1.1rem; }
.duo-tekst .leid { color: var(--inkt-600); font-size: 1.08rem; line-height: 1.65; margin-bottom: 1.5rem; }
.duo-beeld { position: relative; }
.duo-beeld .foto-lijst { aspect-ratio: 5 / 4; }
.foto-lijst--kantel { transform: rotate(-1.5deg); }
.foto-lijst--kantel-om { transform: rotate(1.5deg); }
.foto-lijst--gloed { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 90px rgba(109, 40, 217, 0.55); }
.label--violet { color: var(--k-violet); }
.label--amber { color: #9A6700; }
.label--blauw { color: var(--k-blauw); }
.sectie--lila { background: linear-gradient(180deg, var(--k-violet-vlak), #FBF8FF); }
.sectie--zon { background: linear-gradient(180deg, #FFF8E1, #FFFDF5); }
.zweef-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inkt-500); margin-bottom: 0.5rem; }
.zweef--taak { right: -1.5rem; bottom: -1.75rem; width: 16rem; }
.zweef--taak p:not(.zweef-label) { display: flex; gap: 0.6rem; align-items: center; padding: 0.35rem 0; }
.vinkje-rond { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--k-mint); box-shadow: inset 0 0 0 3px #fff, 0 0 0 1.5px var(--k-mint); }
.vinkje-rond--leeg { background: #fff; box-shadow: 0 0 0 1.5px var(--inkt-300); }
.zweef--check { left: -2rem; bottom: -2rem; width: 20rem; }
.zweef--check p:not(.zweef-label) { display: flex; gap: 0.6rem; align-items: center; padding: 0.3rem 0; }
.chip--neutraal { background: var(--inkt-100); color: var(--inkt-600); }
.zweef--dossier { right: -1.5rem; top: -1.5rem; width: 15rem; }
.zweef-groot { font-family: var(--font-kop); font-weight: 700; font-size: 2rem; color: var(--inkt-900); margin-bottom: 0.5rem; }
.zweef-groot span { font-family: var(--font-tekst); font-size: 0.9rem; font-weight: 500; color: var(--inkt-500); }
.zweef--dossier .noot { margin-top: 0.6rem; font-size: 0.78rem; }
.sectie--netwerk .zweef--violet { left: -1.5rem; bottom: -1.5rem; }
.sectie--netwerk .vinklijst { margin-top: 1.5rem; }

/* stappen met foto */
.stappen-foto { border-radius: 24px; overflow: hidden; aspect-ratio: 21 / 8; margin-bottom: 2.5rem; box-shadow: var(--schaduw-hoog); }
.stappen-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.stapkaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.stapkaart { background: #fff; border-radius: var(--radius-l); padding: 1.5rem; border-top: 4px solid; box-shadow: var(--schaduw); }
.stapkaart h3 { font-size: 1.05rem; color: var(--inkt-900); margin: 0.85rem 0 0.4rem; }
.stapkaart p { color: var(--inkt-600); font-size: 0.92rem; }
.stap-nr { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; font-weight: 700; }
.stapkaart--0 { border-color: var(--k-blauw); } .stapkaart--0 .stap-nr { background: var(--k-blauw); }
.stapkaart--1 { border-color: var(--k-violet); } .stapkaart--1 .stap-nr { background: var(--k-violet); }
.stapkaart--2 { border-color: var(--k-koraal); } .stapkaart--2 .stap-nr { background: var(--k-koraal); }
.stapkaart--3 { border-color: var(--k-mint); } .stapkaart--3 .stap-nr { background: var(--k-mint); }

/* vergelijk met verloop */
.vergelijk-kolom--verloop { background: var(--verloop-merk); color: #fff; border: 0; box-shadow: 0 30px 70px rgba(109, 40, 217, 0.3); }
.vergelijk-kolom--verloop h3 { color: #fff; }
.vergelijk-kolom--verloop .knop { margin-top: 1.5rem; }

/* finale */
.finale { position: relative; border-radius: 28px; overflow: hidden; min-height: 26rem; display: grid; align-items: end; }
.finale-foto { position: absolute; inset: 0; }
.finale-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.finale::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 3, 35, 0.92) 0%, rgba(81, 0, 214, 0.7) 50%, rgba(214, 51, 132, 0.15) 100%); }
.finale-tekst { position: relative; z-index: 1; color: #fff; padding: 3.5rem; max-width: 38rem; }
.finale-tekst h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; margin-bottom: 1rem; }
.finale-tekst p { color: rgba(255, 255, 255, 0.85); font-size: 1.08rem; margin-bottom: 2rem; }
.foto-bron { margin-top: 1.5rem; font-size: 0.78rem; color: var(--inkt-500); }

@media (max-width: 900px) {
  .held-beeld { padding: 1rem 0 4rem; }
  .zweef--readiness { left: 0.5rem; }
  .held-beeld .zweef--mint { right: 0.5rem; }
  .held-beeld .zweef--koraal { display: none; }
  .duo, .duo--om { grid-template-columns: 1fr; gap: 3.5rem; }
  .duo--om .duo-beeld { order: 2; }
  .zweef--taak, .zweef--dossier { right: 0.5rem; }
  .zweef--check, .sectie--netwerk .zweef--violet { left: 0.5rem; }
  .zweef--check { width: min(20rem, calc(100% - 1rem)); }
  .stapkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijferband-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stappen-foto { aspect-ratio: 16 / 9; }
  .finale-tekst { padding: 2.25rem 1.5rem; }
  .finale::after { background: linear-gradient(0deg, rgba(6, 3, 35, 0.94) 10%, rgba(81, 0, 214, 0.6) 70%, rgba(214, 51, 132, 0.2) 100%); }
}
@media (max-width: 560px) {
  .stapkaarten { grid-template-columns: 1fr; }
  .zweef--readiness { width: calc(100% - 1rem); }
  .foto-lijst--held { aspect-ratio: 4 / 3.6; }
}
.sectie--nacht .duo-tekst h2 { color: #fff; }
.sectie--nacht .duo-tekst .leid { color: rgba(255, 255, 255, 0.78); }

/* prijzen in kleur */
.sectie--prijzen { background: radial-gradient(50rem 22rem at 15% 0%, rgba(54, 142, 255, 0.16), transparent 70%), radial-gradient(46rem 22rem at 90% 10%, rgba(214, 51, 132, 0.14), transparent 70%), linear-gradient(180deg, var(--k-violet-vlak), var(--grond) 60%); }
.sectie--prijzen h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.meet--midden { margin-inline: auto; }
.sectie--prijzen .prijs-kaart--uitgelicht { border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--verloop-merk) border-box; box-shadow: 0 30px 70px rgba(109, 40, 217, 0.22); }
.sectie--prijzen .prijs-kaart--uitgelicht .prijs { background: var(--verloop-merk); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* AI in de werkruimte: altijd herkenbaar als voorstel */
.ai-teken { color: var(--k-violet); font-size: 1.1em; }
.ai-balk { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--radius-l); background: linear-gradient(90deg, var(--k-violet-vlak), var(--k-blauw-vlak)); border: 1px solid #DDD0FB; font-size: 0.92rem; color: var(--inkt-800); }
.ai-balk span:nth-child(2) { flex: 1; }
.ai-balk .knop { flex: none; width: auto; }
.ai-balk--in-groep { margin: 1rem 1.5rem 0; }
.ai-melding { border-left: 3px solid var(--k-violet); }
.chip--ai { background: var(--k-violet-vlak); color: var(--k-violet); }
.kaal-lijst { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.ai-stappen { margin: 0; padding: 0.5rem 1.5rem 1rem 2.75rem; display: grid; gap: 0.85rem; }
.ai-stappen li strong { display: block; color: var(--inkt-900); }
.voorstellen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.voorstel { background: var(--papier); border: 1px solid var(--inkt-200); border-radius: var(--radius-l); padding: 1.25rem 1.4rem; display: grid; gap: 0.6rem; align-content: start; }
.voorstel-kop { display: flex; justify-content: space-between; gap: 0.75rem; align-items: start; }
.voorstel h3 { font-size: 1rem; color: var(--inkt-900); }
.voorstel .knop { justify-self: start; width: auto; }
@media (max-width: 640px) { .ai-balk { flex-wrap: wrap; } }