/*
 * Toets Ethiek Oefenen: een rustige juridische uitgave, geen app.
 * Gebroken wit papier als achtergrond, inktblauw voor tekst en koppen, één accent koperbruin.
 * Koppen en casusteksten in Source Serif 4, de bediening in IBM Plex Sans (beide zelf gehost, OFL).
 * Vorm: dunne lijnen en witruimte. Geen afgeronde kaartjes, geen gekleurde zijstrepen, geen zware vlakken.
 * Uitzondering: de quiz volgt stijl D van de motor (inktblauw vlak, witte kaart, radius 14).
 * Contrast: wit op koperbruin 4,6 op 1 (knoppen). Kleine koperkleurige tekst op papier gebruikt --koper-tekst
 * (5,6 op 1); het lichte koper op inktblauw (streepjes in de quiz) haalt 4,7 op 1.
 */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --papier: #F7F5F0;
  --papier-diep: #EFEBE3;
  --koper: #9A6B3F;
  --koper-tekst: #84592F;
  --koper-licht: #C9965F;
  --koper-vlak: #F1E9DD;

  --zee: #1D3557;
  --zee-diep: #142640;
  --zee-licht: #2E4C76;
  --blauw: var(--koper-tekst);
  --blauw-licht: var(--koper-vlak);
  --signaal: var(--koper);
  --signaal-hover: var(--koper-tekst);
  --signaal-schaduw: transparent;
  --signaal-tekst: #ffffff;
  --inkt: #1D3557;
  --grijs: #4A5565;
  --vlak: var(--papier-diep);
  --lijn: #D8D1C4;
  --focus: #9A6B3F;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --radius: 4px;

  /* Quiz stijl D: inktblauw vlak; licht koper voor goed beantwoord. Rand en kop van het goede antwoord koper (wit erop 4,6). */
  --quiz-donker: #1D3557;
  --quiz-accent: var(--koper-licht);
  --quiz-accent-vol: var(--koper);
  --quiz-rij: #F3F0EA;
  --quiz-rij-tekst: #535B66;
}

body { background: var(--papier); color: var(--inkt); font-feature-settings: "kern"; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--inkt); letter-spacing: -.005em; }
h1 { font-size: clamp(2rem, 1.45rem + 2.6vw, 3.1rem); line-height: 1.12; letter-spacing: -.012em; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); line-height: 1.2; }
h3 { font-size: 1.3rem; }
a { color: var(--inkt); text-decoration-color: var(--koper); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--koper-tekst); text-decoration-thickness: 2px; }
:focus-visible { outline-color: var(--focus); }
::selection { background: var(--koper-vlak); }
.lead { color: var(--inkt); }

/* ---------- Knoppen: vlak, kleine hoek, geen schaduw ---------- */
.knop { border-radius: var(--radius); font-weight: 600; letter-spacing: .005em; box-shadow: none; }
.knop-signaal, .knop-signaal:hover { color: #fff; box-shadow: none; }
.knop-signaal { background: var(--koper); border-color: var(--koper); }
.knop-signaal:hover { background: var(--koper-tekst); border-color: var(--koper-tekst); }
.knop-signaal:active { transform: none; box-shadow: none; }
.knop-groot, .knop-groot.knop-signaal { box-shadow: none; font-size: 1.1rem; }
.knop-zee, .knop-donker { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.knop-zee:hover, .knop-donker:hover { background: var(--zee-licht); border-color: var(--zee-licht); color: #fff; }
.knop-licht { background: transparent; color: var(--inkt); border: 1px solid var(--inkt); }
.knop-licht:hover { background: var(--papier-diep); color: var(--inkt); }

/* ---------- Kop: papier met een dunne lijn ---------- */
.kop, .kop.kop-over { background: var(--papier); color: var(--inkt); border-bottom: 1px solid var(--lijn); position: relative; }
.kop .merk, .kop .merk:hover { color: var(--inkt); text-decoration: none; }
.merk { gap: .4rem; align-items: center; }
.merk-tegel { width: 1.35rem; height: 1.35rem; border-radius: 0; background: none; box-shadow: none; }
.merk-woord { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; letter-spacing: -.01em; }
.merk-woord b { font-weight: 600; color: var(--inkt); }
.merk-woord span { color: var(--koper-tekst); font-weight: 400; font-style: italic; }
.kop .nav a, .kop .nav-knop { color: var(--inkt); font-weight: 500; }
.kop .nav a:hover, .kop .nav-knop:hover { color: var(--koper-tekst); }
.kop .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--koper); text-underline-offset: .35em; }
.kop .nav a.nav-rand { border: 1px solid var(--inkt); border-radius: var(--radius); padding: .35rem .8rem; }
.kop .nav a.nav-cta { background: var(--koper); color: #fff; border-radius: var(--radius); }

/* Update-balk boven de kop: licht in plaats van een donkere strook. */
.usb-balk, .usb-balk:hover { background: var(--papier-diep); color: var(--inkt); border-bottom: 1px solid var(--lijn); }
.usb-balk .usb-icoon { color: var(--koper); }
.usb-balk .usb-icoon .usb-vink { stroke: #fff; }
.usb-balk .usb-meer { color: var(--koper-tekst); }
.usb-balk .usb-paneel, .usb-balk .usb-paneel a { color: var(--inkt); }
.usb-icoon .usb-vink { stroke: #fff; }
.usb-blok { background: transparent; border: 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); border-radius: 0; box-shadow: none; padding: .8rem 0; }
.usb-blok:hover { background: transparent; }
.usb-blok-icoon { background: none; }
.usb-blok .usb-icoon { color: var(--koper); }

/* ---------- Voet: papier, dunne lijn, geen donker vlak ---------- */
.voet { background: var(--papier-diep); color: var(--grijs); border-top: 1px solid var(--lijn); }
.voet a, .voet .link-knop { color: var(--inkt); }
.voet a:hover { color: var(--koper-tekst); }
.voet-kop { color: var(--inkt); font-family: var(--serif); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 1.05rem; }
.voet-merk { color: var(--inkt); font-family: var(--serif); font-weight: 600; }
.voet-tegel { width: 1.2rem; height: 1.2rem; border-radius: 0; background: none; box-shadow: none; }
.voet .disclaimer { color: var(--grijs); }
.voet-onder { border-top: 1px solid var(--lijn); color: var(--grijs); }
.voet-onder a { color: var(--inkt); }

/* ---------- Algemene motoronderdelen in de huisstijl ---------- */
.kruimel, .kruimel a { color: var(--grijs); }
.bovenkop, .gratis-test .bovenkop { color: var(--koper-tekst); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }
.melding { border-radius: var(--radius); }
.vinklijst li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3 3 7-7.4' fill='none' stroke='%239A6B3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat;
  border-radius: 0;
}
details { border-color: var(--lijn); }
.quiz-kader:not(.is-qd) { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: none; }
.vraag-punten { background: var(--koper-vlak); color: var(--koper-tekst); }
.optie-letter { background: var(--koper-vlak); border-color: #E0D2BE; color: var(--koper-tekst); }
.casus, .quiz-casus { font-family: var(--serif); }
.letop { background: var(--koper-vlak); }
.test-haakje { background: #fff; border: 1px solid var(--lijn); border-radius: 0; }
.test-haakje-label { color: var(--koper-tekst); }
.ow-status.is-bezig { background: var(--koper-vlak); color: #5C3E1F; border-color: #E0D2BE; }

/* Kooppagina: lijnen in plaats van zwevende kaarten. */
.kp { --kp-lijn: var(--lijn); --kp-vlak: #fff; --kp-zacht: var(--grijs); }
.kp-kaart { border-radius: var(--radius); background: #fff; }
.kp-kaart.is-actief { border-color: var(--inkt); box-shadow: none; }
.kp-kassa { border-radius: var(--radius); box-shadow: none; background: #fff; }
.kp-tag { border-radius: var(--radius); }
.nepdeur-paneel { background: #fff; border: 1px solid var(--lijn); border-inline-start: 1px solid var(--lijn); border-radius: var(--radius); }
.kp-noot { font-size: .95rem; color: var(--grijs); }
.training, .training.is-aanbevolen { border-radius: var(--radius); box-shadow: none; }
.training.is-aanbevolen { border-color: var(--inkt); }
.training .badge { background: var(--inkt); border-radius: var(--radius); }

/* Quiz stijl D: serif voor casus en vraag, de rest blijft van de motor. */
.qd .quiz-vraag, .qd-kaart .quiz-vraag, .examen-vraagkaart .quiz-vraag { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.qd-kaart .casus, .examen-vraagkaart .casus, .qd-kaart .vraag-casus, .examen-vraagkaart .vraag-casus { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; }
.qd .qd-volgende, .qd-examen .examen-volgende { font-weight: 600; }

/* Vraagsoort open: het antwoordmodel als nette lijst met dunne lijnen. */
.open-label { font-weight: 600; }
.open-tekst { font-family: var(--serif); font-size: 1.05rem; border: 1px solid #BDB5A6; border-radius: 6px; }
.model { border: 1px solid var(--lijn); border-top: 2px solid var(--koper); border-radius: 0; padding-bottom: 1rem; }
.model-kop { background: none; color: var(--koper-tekst); padding: .75rem 1rem 0; letter-spacing: .08em; font-weight: 600; }
.model-lijst { padding: 0 .5rem; gap: 0; }
.model-punt { border-radius: 0; border-bottom: 1px solid #ECE7DE; padding: .6rem .5rem; }
.model-punt:last-child { border-bottom: 0; }
.model-punt.is-aan { background: var(--koper-vlak); }
.model-punt label { font-family: var(--serif); font-size: 1.02rem; }
.model-punten { color: var(--koper-tekst); font-family: var(--font); font-weight: 600; }
.model-score { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.open-eigen-tekst { font-family: var(--serif); border-radius: 0; border-left: 0; }

/* ==========================================================================
   Homepage
   ========================================================================== */
.e-binnen { max-width: 68rem; margin: 0 auto; padding: 0 var(--rand); }
.e-smal { max-width: 44rem; }
.e-sectie { padding: 3rem 0; border-top: 1px solid var(--lijn); }
.e-sectie h2 { margin-bottom: .5em; }
.e-intro { max-width: 40rem; color: var(--grijs); }
.e-klein { font-size: .95rem; color: var(--grijs); }
.e-kop-klein { font-family: var(--font); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--koper-tekst); margin-bottom: 1.25rem; }

/* Hero: tekst links, een groot paragraafteken als kantlijnteken rechts (alleen breed). */
.e-hero { padding: 2.5rem 0 3rem; overflow: hidden; }
.e-hero-binnen { display: grid; gap: 2rem; align-items: center; }
.e-bovenregel { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--koper-tekst); margin: 0 0 1rem; }
.e-hero h1 { max-width: 15ch; margin-bottom: .45em; }
.e-lead { font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; max-width: 36rem; color: var(--inkt); margin: 0; }
.e-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.e-knoppen .knop { width: 100%; }
.e-tekstlink { font-weight: 500; }
.e-noot { margin: 1rem 0 0; font-size: .95rem; color: var(--grijs); }
.e-nep { margin-top: .25rem; }
.e-hero .usb-blok { max-width: 36rem; margin-top: 1.5rem; }
.e-kantlijn { display: none; }
.e-para-groot { display: block; width: 100%; height: auto; }
.e-para-groot path { fill: var(--koper); }
@media (min-width: 30rem) { .e-knoppen .knop { width: auto; } }
@media (min-width: 56rem) {
  .e-hero { padding: 4.5rem 0 4.5rem; }
  .e-hero-binnen { grid-template-columns: minmax(0, 1fr) 11rem; gap: 4rem; }
  .e-kantlijn { display: block; border-left: 1px solid var(--lijn); padding: 1rem 0 1rem 3rem; opacity: .9; }
}

/* Drie feiten, gescheiden door dunne lijnen. */
.e-feitenrij { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.e-feit { padding: 1.25rem 0; border-bottom: 1px solid var(--lijn); }
.e-feit dt { font-size: .85rem; font-weight: 600; color: var(--grijs); margin: 0 0 .2rem; }
.e-feit dd { margin: 0; }
.e-feit-waarde { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--inkt); }
.e-feit-bron { font-size: .9rem; color: var(--grijs); margin-top: .4rem !important; }
.e-feit-bron a { color: var(--grijs); }
.e-feiten .e-klein { margin-top: 1.25rem; }
@media (min-width: 48rem) {
  .e-feitenrij { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--lijn); }
  .e-feit { border-bottom: 0; padding: 1.5rem 1.75rem 1.5rem 0; }
  .e-feit + .e-feit { border-left: 1px solid var(--lijn); padding-left: 1.75rem; }
}

/* Hoe je hier oefent: stappen als definitielijst, naast een voorbeeld van een open vraag. */
.e-twee { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .e-twee { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; } }
.e-stappen { margin: 1.5rem 0 0; border-top: 1px solid var(--lijn); }
.e-stappen > div { padding: 1rem 0; border-bottom: 1px solid var(--lijn); }
.e-stappen dt { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: 0 0 .2rem; }
.e-stappen dd { margin: 0; color: var(--grijs); }

.e-voorbeeld { margin: 0; }
.e-blad { background: #fff; border: 1px solid var(--lijn); padding: 1.5rem 1.25rem; box-shadow: 0 1px 0 var(--lijn), 0 2px 0 #fff, 0 3px 0 var(--lijn); }
@media (min-width: 40rem) { .e-blad { padding: 2rem 2.25rem; } }
.e-blad-label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-tekst); margin: 0 0 .5rem; }
.e-blad-casus { font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; margin: 0 0 1rem; }
.e-blad-vraag { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; margin: 0 0 1rem; }
.e-blad-antwoord { border: 1px solid #BDB5A6; border-radius: 6px; padding: .9rem .9rem .6rem; margin: 0 0 1.5rem; display: grid; gap: .55rem; }
.e-blad-antwoord span { display: block; height: 1px; background: #CFC7B8; }
.e-blad-antwoord span.is-kort { width: 55%; }
.e-blad-model { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--koper); }
.e-blad-model li { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: .75rem; align-items: start; padding: .6rem 0; border-bottom: 1px solid #ECE7DE; font-family: var(--serif); font-size: .98rem; line-height: 1.45; margin: 0; }
.e-blad-model li.is-aan { background: linear-gradient(var(--koper-vlak), var(--koper-vlak)) no-repeat; }
.e-vink { width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--grijs); border-radius: 2px; margin-top: .15rem; background: #fff; }
.is-aan .e-vink { border-color: var(--koper); background: var(--koper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3 3 7-7.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; }
.e-blad-pt { font-family: var(--font); font-size: .85rem; font-weight: 600; color: var(--koper-tekst); white-space: nowrap; }
.e-blad-model li.e-blad-meer { display: block; border-bottom: 0; font-family: var(--font); font-size: .9rem; color: var(--grijs); font-style: normal; padding-top: .75rem; }
.e-voorbeeld figcaption { font-size: .9rem; color: var(--grijs); margin-top: .9rem; }

/* Regel op tijd: het paragraafteken als bladwijzer die over de bovenlijn hangt. */
.e-rot-binnen { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.e-bladwijzer { position: relative; margin-top: -3rem; background: var(--koper); width: 2.5rem; padding: 1.1rem .5rem 1.6rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.e-para-wijzer { display: block; width: 100%; height: auto; }
.e-para-wijzer path { fill: #fff; }
@media (min-width: 48rem) { .e-rot-binnen { grid-template-columns: 3rem minmax(0, 1fr); gap: 2rem; } .e-bladwijzer { width: 3rem; } }

/* Trainingen: drie kolommen met lijnen, de aanbevolen training met een koperen bovenlijn. */
.e-prijslijst { display: grid; gap: 0; margin-top: 1.75rem; border-top: 1px solid var(--lijn); }
.e-training { padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; }
.e-training-label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--koper-tekst); margin: 0 0 .35rem; min-height: 1.2em; }
.e-training h3 { margin: 0; font-size: 1.5rem; }
.e-training-prijs { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; margin: .2rem 0 0; line-height: 1.15; }
.e-training-duur { color: var(--grijs); margin: .2rem 0 1rem; font-size: .98rem; }
.e-training ul { margin: 0 0 1.5rem; padding-left: 1.1rem; flex: 1; }
.e-training li { margin: 0 0 .45rem; font-size: 1rem; }
.e-training li::marker { color: var(--koper); }
.e-training .knop { align-self: flex-start; }
.e-training.is-aanbevolen { border-top: 2px solid var(--koper); margin-top: -1px; }
@media (min-width: 52rem) {
  .e-prijslijst { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--lijn); }
  .e-training { border-bottom: 0; padding: 1.5rem 1.75rem 1.75rem; }
  .e-training:first-child { padding-left: 0; }
  .e-training + .e-training { border-left: 1px solid var(--lijn); }
}
.e-nepdeur { margin: 1.5rem 0 0; max-width: 44rem; }
.e-kantoor { margin: .75rem 0 0; font-size: .95rem; color: var(--grijs); max-width: 44rem; }

/* Veelgestelde vragen: lijnen, het plusteken in koper. */
.e-faq details { border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; padding: 0; margin: 0; background: none; }
.e-faq details:first-of-type { border-top: 1px solid var(--lijn); }
.e-faq summary { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; padding: 1rem 2rem 1rem 0; cursor: pointer; list-style: none; position: relative; }
.e-faq summary::-webkit-details-marker { display: none; }
.e-faq summary::after { content: "+"; position: absolute; right: .25rem; top: .85rem; font-family: var(--font); font-weight: 400; font-size: 1.4rem; color: var(--koper); }
.e-faq details[open] summary::after { content: "\2212"; }
.e-faq details p { margin: 0 0 1.1rem; color: var(--grijs); }

.e-slot { text-align: left; }
.e-disclaimer { font-size: .9rem; color: var(--grijs); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }

/* ==========================================================================
   Regel op tijd
   ========================================================================== */
.rot-binnen { position: relative; max-width: 46rem; margin: 0 auto; padding: 2rem var(--rand) 3rem; }
.rot-bladwijzer { position: absolute; top: 0; right: var(--rand); width: 2.4rem; padding: 1.2rem .45rem 1.7rem; background: var(--koper); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.rot-wijzer-teken { display: block; width: 100%; height: auto; }
.rot-wijzer-teken path { fill: #fff; }
.rot h1 { padding-right: 3.5rem; }
.rot-lead { font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
.rot-uitleg { color: var(--grijs); }
.rot-balk { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .6rem 0; background: var(--papier); border-bottom: 1px solid var(--lijn); margin: 1.5rem 0 0; }
.rot-klok { margin: 0; font-size: 1.05rem; }
.rot-klok-label { color: var(--grijs); }
.rot-klok-tijd { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rot-klok.is-krap .rot-klok-tijd { color: var(--fout); }
.rot-lijst { list-style: none; margin: 0; padding: 0; counter-reset: rot; }
.rot-situatie { padding: 1.25rem 0; border-bottom: 1px solid var(--lijn); margin: 0; }
.rot-tekst { font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; margin: 0 0 .8rem; }
.rot-velden { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.rot-velden label { font-size: .95rem; color: var(--grijs); }
.rot-velden input { width: 4rem; min-height: 2.75rem; font: inherit; font-family: var(--serif); font-size: 1.15rem; text-align: center; color: var(--inkt); background: #fff; border: 1px solid #BDB5A6; border-radius: var(--radius); padding: .3rem .4rem; }
.rot-velden input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--koper); }
.rot-velden input:disabled { background: var(--papier-diep); }
.rot-uitkomst { margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed var(--lijn); }
.rot-uitkomst p { margin: 0 0 .35rem; font-size: 1rem; }
.rot-oordeel { font-weight: 600; }
.is-goed .rot-oordeel { color: var(--goed); }
.is-fout .rot-oordeel { color: var(--fout); }
.is-goed .rot-oordeel::before { content: "\2713\00a0"; }
.is-fout .rot-oordeel::before { content: "\2717\00a0"; }
.rot-vindpunt strong { font-family: var(--serif); }
.rot-waar { color: var(--grijs); font-size: .95rem !important; }
.rot-acties { margin-top: 1.5rem; }
.rot-score { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--koper); }
.rot-score:focus { outline: none; }
.rot-score-getal { font-family: var(--serif); font-size: 2rem; font-weight: 600; margin: 0; }
.rot-verder { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1rem; }
.rot-bron { margin-top: 2.5rem; font-size: .9rem; color: var(--grijs); }
@media (min-width: 48rem) {
  .rot-binnen { padding-top: 3rem; }
  .rot-bladwijzer { width: 2.8rem; }
}

/* Smalle schermen: het woordmerk en het menu passen op één regel; Regel op tijd staat dan in de hero en de voet. */
@media (max-width: 29.99rem) {
  .kop .nav li.nav-extra { display: none; }
  .merk-woord { font-size: 1.2rem; }
}
.kop .nav a { white-space: nowrap; }
.kp-kaart.is-actief { background: #fff; }
.e-hero h1 { max-width: 16ch; }