/* Huisstijl van Recrewprint ("Creatief vertrouwd") met het logo van Parmentier.
   Rustig en goed leesbaar op tablet en laptop: grote knoppen, korte regels.
   Terracotta is voor knoppen iets donkerder dan in het brandingdocument (#D95C44),
   zodat witte tekst erop leesbaar blijft (contrast 6:1 in plaats van 3,8:1). */
:root {
  --petrol: #2F4858;
  --perzik: #F8E9DD;
  --perzik-licht: #FBF3EC;
  --terracotta: #D95C44;
  --mosterd: #D1A646;
  --mosterd-donker: #9A7423;

  --achtergrond: var(--perzik);
  --vlak: #ffffff;
  --tekst: var(--petrol);
  --tekst-zacht: #4F5F69;
  --lijn: #E4D2C3;
  --lijn-sterk: #B9A08C;
  --accent: #A8432F;
  --accent-zacht: #F6DDD3;
  --goed: #276b40;
  --let-op: var(--mosterd-donker);
  --let-op-zacht: #FBF1DC;
  --fout: #B3261E;
  --straal: 12px;
  --lettertype: Verdana, "DejaVu Sans", "Segoe UI", system-ui, sans-serif;
  --koppen: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --ondertitel: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; overscroll-behavior-y: none; }
body {
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--lettertype);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--koppen); font-weight: 700; color: var(--petrol); line-height: 1.25; text-wrap: balance; margin: 0 0 0.6em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 0.9em; max-width: 62ch; }
.zacht { color: var(--tekst-zacht); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--petrol); }
.klein { font-size: 0.85rem; }

.pagina { max-width: 860px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-left)) 48px; }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 24px; }
.stapel { display: flex; flex-direction: column; gap: 12px; }
.rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

button, .knop {
  font: inherit;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 14px 22px;
  min-height: 52px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: default; filter: none; }
button.secundair, .knop.secundair { background: var(--vlak); color: var(--accent); }
button.gevaar { background: var(--vlak); color: var(--fout); border-color: var(--fout); }
:focus-visible { outline: 3px solid var(--tekst); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

/* Keuzeknoppen in de test */
.keuze {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  background: var(--vlak);
  color: var(--tekst);
  border: 2px solid var(--lijn-sterk);
  padding: 16px 18px;
  line-height: 1.4;
  font-weight: 400;
}
.keuze:hover { border-color: var(--accent); filter: none; }
.keuze.gekozen { border-color: var(--accent); background: var(--accent-zacht); border-width: 3px; }
.keuze.minst { border-color: var(--let-op); background: var(--let-op-zacht); border-width: 3px; }
.keuze.gekozen:disabled, .keuze.minst:disabled { opacity: 1; }
.klein-keuze { width: auto; min-height: 44px; padding: 8px 14px; }
.keuze .label { font-weight: 700; margin-right: 6px; color: var(--accent); }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paar .keuze { min-height: 120px; font-size: 1.05rem; justify-content: center; text-align: center; }
@media (max-width: 600px) { .paar { grid-template-columns: 1fr; } }

/* Kop van de test met voortgang en klok */
.kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.voortgang { flex: 1; height: 8px; background: var(--lijn); border-radius: 4px; overflow: hidden; }
.voortgang > div { height: 100%; background: var(--mosterd); transition: width 0.3s; }
.klok { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 64px; text-align: right; }
.klok.krap { color: var(--fout); }
.situatie { font-size: 1.1rem; background: var(--perzik-licht); border-left: 4px solid var(--mosterd); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.vraag { font-weight: 600; margin: 8px 0 12px; }

.melding {
  position: fixed; inset: 0; background: rgba(47, 72, 88, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20;
}
.melding .kaart { max-width: 520px; width: 100%; }

.stappen { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.stappen li { display: flex; gap: 14px; align-items: flex-start; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; padding: 12px 14px; }
.stappen .icoon { font-size: 1.6rem; line-height: 1; width: 36px; text-align: center; }
.kader { border: 2px solid var(--let-op); background: var(--let-op-zacht); border-radius: 10px; padding: 12px 16px; font-weight: 600; }

table { border-collapse: collapse; }
.tabel { width: 100%; background: var(--vlak); }
.tabel th, .tabel td { border: 1px solid var(--lijn); padding: 8px 10px; text-align: left; vertical-align: top; }
.tabel th { background: var(--perzik-licht); font-weight: 700; }
.tabel td.getal, .tabel th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabelvak { overflow-x: auto; }

/* Ritsimulatie */
.rit { display: flex; gap: 4px; margin: 16px 0; }
.rit > div { flex: 1; height: 14px; border-radius: 4px; background: var(--lijn); }
.rit > div.gedaan { background: var(--accent); }
.rit > div.nu { background: var(--mosterd); }
.tellers { display: flex; gap: 24px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.tellers strong { font-size: 1.4rem; display: block; }

/* Bus en schade */
.bus { width: 100%; height: auto; display: block; }
.bus-romp { fill: #f7f9fa; stroke: #33444b; stroke-width: 2.5; }
.bus-raam { fill: #cfe0e7; stroke: #33444b; stroke-width: 1.5; }
.bus-deur { fill: #dfe8eb; stroke: #33444b; stroke-width: 1.5; }
.bus-lijn, .bus-grond { stroke: #33444b; stroke-width: 1.5; }
.bus-bumper { fill: #c9d3d6; stroke: #33444b; stroke-width: 1.5; }
.bus-spiegel { fill: #c9d3d6; stroke: #33444b; stroke-width: 1.5; }
.bus-wiel { fill: #2b3438; }
.bus-naaf { fill: #9aa8ad; }
.schade line, .schade polyline, .schade path { stroke: #8a1c14; stroke-width: 2; fill: none; stroke-linecap: round; }
.schade ellipse { fill: rgba(138, 28, 20, 0.12); stroke: #8a1c14; stroke-width: 1.5; }
.bus-klikbaar { cursor: crosshair; touch-action: manipulation; }
.tik { fill: none; stroke: #f2b705; stroke-width: 4; }

/* Leertaak */
.bussen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 600px) { .bussen { grid-template-columns: 1fr; } }
.buskaart { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 120px; }

/* Radar */
.radar { width: 100%; height: auto; font-family: var(--lettertype); }
.radar-titel { font-size: 17px; fill: var(--tekst); font-weight: 600; }
.radar-ring { fill: none; stroke: #EBDDD1; }
.radar-as { stroke: #D3BFAE; }
.radar-naam { font-size: 13px; fill: var(--tekst); }
.radar-waarde { font-size: 12px; fill: var(--tekst-zacht); }
.radar-afwijking { fill: var(--accent); font-weight: 700; }
.radar-ref { fill: none; stroke: #7B8A93; stroke-width: 2; stroke-dasharray: 6 4; }
.radar-reeks { fill: var(--kleur); stroke: var(--kleur); stroke-width: 2.2; }
.radar-punt { fill: var(--kleur); }
.radar-grens { stroke: var(--fout); stroke-width: 2.2; }
.radar-legende { font-size: 12px; fill: var(--tekst); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.85rem; margin-top: 4px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { display: inline-block; width: 26px; height: 0; border-top: 3px solid var(--kleur, #7B8A93); }
.legende i.stippel { border-top-style: dashed; }
.legende i.grens { width: 0; height: 12px; border-top: none; border-left: 3px solid var(--fout); }

/* Beheer */
/* Bovenbalk in petrol met het logo van Parmentier (wit met oranje, gemaakt voor een donkere achtergrond) */
.balk { background: var(--petrol); color: #fff; }
.balk .pagina { padding-top: 10px; padding-bottom: 10px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.balk nav { display: flex; gap: 6px; flex-wrap: wrap; }
.balk nav a { padding: 8px 12px; border-radius: 8px; color: var(--perzik); text-decoration: none; }
.balk nav a:hover { background: rgba(255, 255, 255, 0.1); }
.balk nav a.actief { background: var(--perzik); color: var(--petrol); font-weight: 700; }
.balk a:focus-visible { outline-color: #fff; box-shadow: none; }
.merk { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--koppen); font-weight: 700; font-size: 1.05rem; }
.merk img { height: 52px; width: auto; display: block; }
.balk-test .pagina { justify-content: center; }
.balk-test .merk img { height: 60px; }
.voet { text-align: center; padding: 0 16px 24px; font-family: var(--ondertitel); font-style: italic; font-size: 0.85rem; color: var(--tekst-zacht); }
.logo-afdruk { display: none; }
/* Niveaukleuren blijven bewust los van de huisstijl: ze moeten in één oogopslag iets betekenen. */
.pil { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--perzik-licht); color: var(--tekst-zacht); }
.pil.sterk { background: #e2f1e7; color: #1f5a35; }
.pil.passend { background: #e3f0f4; color: #0b4a5d; }
.pil.twijfel { background: #fbf1e4; color: #7a440a; }
.pil.aandachtspunt { background: #fbe9e7; color: #8a1c14; }
.pil.onvolledig { background: var(--perzik-licht); color: var(--tekst); border: 1px dashed var(--tekst-zacht); }
.signaal { border-left: 4px solid var(--mosterd); background: var(--let-op-zacht); padding: 8px 12px; border-radius: 0 6px 6px 0; }
.signaal.te-mooi { border-color: var(--fout); background: #fbe9e7; font-weight: 600; }
.signaal.info { border-color: var(--lijn-sterk); background: var(--perzik-licht); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
label { display: block; font-weight: 700; margin-bottom: 4px; }
input, select, textarea { max-width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--lijn-sterk); border-radius: 8px; background: var(--vlak); color: var(--tekst); min-height: 44px; }
textarea { width: 100%; min-height: 90px; }
.fout { color: var(--fout); }
.melding-ok { color: var(--goed); }
.verborgen { display: none !important; }
code.link { word-break: break-all; background: var(--perzik-licht); padding: 4px 8px; border-radius: 6px; display: inline-block; }
@media print {
  .balk, .voet, .niet-printen { display: none !important; }
  body { background: #fff; }
  .logo-afdruk { display: block; height: 70px; width: auto; margin-bottom: 12px; }
  .kaart { border: none; padding: 0; }
}

/* Opsommingen in een kaart (bv. de privacy-uitleg): geen extra witruimte boven de lijst. */
.kaart ul.stapel { margin: 0 0 8px; padding-left: 1.2em; gap: 8px; }