@font-face {
  font-family: Inter;
  src: url('/static/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Bureaublad is de basis: muis en toetsenbord, bediening van 28 px, 13 px tekst.
   Een touchscreen krijgt onderaan grotere tikdoelen, een smal scherm één kolom.
   Zelfde kleuren als de live-site. Afstanden op een raster van 4. */
:root {
  color-scheme: light;
  --grond: #f5f5f7;
  --figuur: #ffffff;
  --tekst: #1d1d1f;
  --zacht: #6e6e73;
  --lijn: #e5e5ea;
  --zweef: rgb(0 0 0 / 4%);
  --licht: rgb(0 0 0 / 7%);
  --keuze: rgb(0 0 0 / 7%);
  --accent: #b85a20;
  --accent-donker: #9c4b19;
  --gevaar: #b3261e;
  --gevaar-donker: #8f1e18;
  --zij: #f5f5f7;
  --sp-1: #2f6fb0;
  --sp-2: #c9772e;
  --sp-3: #2e8f70;
  --sp-4: #8a5fbf;
  --sp-5: #c4566c;
  --sp-6: #2a8fa3;
  --sp-7: #8f7f2e;
  --sp-8: #5f6880;
  --schaduw: rgb(0 0 0 / 18%);
  --waas: rgb(0 0 0 / 28%);
  --hoogte: 28px;
  --t12: 12px/16px;
  --t13: 13px/18px;
  --t15: 15px/20px;
  --t17: 17px/22px;
  --t22: 22px/28px;
  --t28: 28px/34px;
  --letter: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vast: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font: 400 var(--t13) var(--letter);
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

h1, h2, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hoogte);
  padding: 0 12px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  background: var(--figuur);
  font-weight: 500;
  white-space: nowrap;
}
.knop:hover { background: var(--grond); }
.knop--hoofd { border-color: var(--accent); background: var(--accent); color: var(--figuur); }
.knop--hoofd:hover { border-color: var(--accent-donker); background: var(--accent-donker); }
.knop--gevaar { border-color: var(--gevaar); background: var(--gevaar); color: var(--figuur); }
.knop--gevaar:hover { border-color: var(--gevaar-donker); background: var(--gevaar-donker); }
.knop:disabled { opacity: 0.5; cursor: default; }

.stil {
  display: inline-flex;
  align-items: center;
  height: var(--hoogte);
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--zacht);
  font-weight: 500;
  white-space: nowrap;
}
.stil:hover { background: var(--zweef); color: var(--tekst); }

.veld, .keuze {
  height: var(--hoogte);
  padding: 0 8px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  background: var(--figuur);
  min-width: 0;
}
.veld:focus, .keuze:focus { border-color: var(--accent); outline: 0; }

.zacht { color: var(--zacht); }
.klein { font: 400 var(--t12) var(--letter); }
.fout { color: var(--gevaar); }
.getal { font-variant-numeric: tabular-nums; }

.merk { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 600; white-space: nowrap; }
.merk span { font-weight: 400; color: var(--zacht); }

/* Dialoog */
.dialoog {
  width: min(560px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  color: var(--tekst);
  box-shadow: 0 12px 40px var(--schaduw);
}
.dialoog::backdrop { background: var(--waas); }
.dialoog h2 { margin-bottom: 4px; font: 600 var(--t15) var(--letter); }
.dialoog p { margin-bottom: 8px; color: var(--zacht); overflow-wrap: anywhere; }
.dialoog .fout { color: var(--gevaar); }
.dialoog__knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.dialoog--klein { width: min(380px, calc(100vw - 32px)); }
.dialoog--breed { width: min(760px, calc(100vw - 32px)); }

/* QR */
.qr { display: block; width: 100%; height: auto; background: var(--figuur); }
.qr path { fill: #000; }

/* ---- Inloggen op het dashboard ---- */
.inlog { max-width: 320px; margin: 0 auto; padding: 18vh 16px 0; }
.inlog h1 { margin: 12px 0 4px; font: 600 var(--t15) var(--letter); }
.inlog p { margin-bottom: 12px; color: var(--zacht); }
.inlog form { display: grid; gap: 8px; }
.inlog label { font-weight: 500; }

/* ---- Dashboard ---- */
.balk {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--lijn);
  background: var(--figuur);
}
.balk__ruimte { flex: 1; }
.balk .keuze { max-width: 280px; margin-left: 8px; }

.blad { padding: 12px 16px 48px; }
.blad > * { max-width: 1408px; }

.regel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-bottom: 16px; color: var(--zacht); }
.regel strong { font-weight: 500; color: var(--tekst); }

.blok { margin-bottom: 24px; }
.blok__kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.blok__kop h2 { font: 600 var(--t13) var(--letter); }

.lijst { overflow: hidden; border: 1px solid var(--lijn); border-radius: 8px; background: var(--figuur); }
.leeg { padding: 8px 12px; color: var(--zacht); }

.tabel { width: 100%; border-collapse: collapse; }
.tabel th { height: var(--hoogte); padding: 0 8px; font: 500 var(--t12) var(--letter); color: var(--zacht); text-align: left; white-space: nowrap; }
.tabel td { height: var(--hoogte); padding: 0 8px; border-top: 1px solid var(--lijn); white-space: nowrap; }
.tabel th:first-child, .tabel td:first-child { padding-left: 12px; }
.tabel .rechts { text-align: right; }
.tabel .actie { width: 1%; padding: 0 4px; text-align: right; }
.tabel .plek { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tabel .aan { font-weight: 500; }
.tabel .af { color: var(--zacht); }
.tabel tr.gewist td { color: var(--zacht); }

.rij { display: flex; align-items: center; gap: 12px; min-height: var(--hoogte); padding: 0 4px 0 12px; border-top: 1px solid var(--lijn); }
.lijst > .rij:first-child, .lijst > li:first-child > .rij:first-child { border-top: 0; }
.rij__naam { flex: 0 1 280px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rij__feit { color: var(--zacht); white-space: nowrap; }
.rij__ruimte { flex: 1; }
.rij--toestel { padding-left: 28px; }
.rij--toestel .rij__naam { font-weight: 400; }
.rij--uit .rij__naam { color: var(--zacht); }
.rij--invoer { gap: 8px; padding: 4px 4px 4px 12px; }
.rij--invoer .veld { flex: 0 1 280px; }

/* Koppel-QR */
.koppel { display: flex; gap: 16px; align-items: flex-start; }
.koppel__qr { flex: none; width: 208px; }
.koppel__tekst { flex: 1; min-width: 0; }
.koppel__link { display: block; margin: 8px 0; padding: 8px; border-radius: 6px; background: var(--grond); font: 400 var(--t12) var(--vast); overflow-wrap: anywhere; user-select: all; }

/* Profiel */
.bewerk { display: block; width: 100%; height: 56vh; padding: 8px; border: 1px solid var(--lijn); border-radius: 6px; font: 400 var(--t12) var(--vast); resize: vertical; }
.bewerk:focus { border-color: var(--accent); outline: 0; }

/* Logboek */
.boek { max-height: 56vh; overflow-y: auto; }
.boek li { display: grid; grid-template-columns: 120px 80px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-top: 1px solid var(--lijn); }
.boek li:first-child { border-top: 0; }
.boek span { overflow-wrap: anywhere; }

/* ---- Leespagina: koppelen ---- */
.koppelen { max-width: 640px; margin: 0 auto; padding: 12vh 16px 32px; }
.koppelen__kop { margin-bottom: 12px; }
.koppelen__vak { display: flex; gap: 24px; padding: 16px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--figuur); }
.koppelen__qr { flex: none; width: 216px; }
.koppelen__rechts { flex: 1; min-width: 0; }
.code { margin-bottom: 12px; font: 600 var(--t28) var(--letter); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
.stappen { margin-bottom: 12px; padding-left: 16px; list-style: decimal; }
.stappen li { margin-bottom: 4px; }
.koppelen__voet { margin-top: 12px; color: var(--zacht); }

/* ---- Leespagina: lezen ---- */
.lezen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.lezen__titel { min-width: 0; }
.lezen__titel h1 { overflow: hidden; font: 600 var(--t15) var(--letter); text-overflow: ellipsis; white-space: nowrap; }
.lezen__weg { color: var(--zacht); white-space: nowrap; }

.vlakken { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.vlak { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--figuur); }
.vlak + .vlak { border-left: 1px solid var(--lijn); }
.vlak__kop { display: flex; align-items: center; justify-content: space-between; flex: none; height: 36px; padding: 0 4px 0 16px; border-bottom: 1px solid var(--lijn); }
.vlak__kop h2 { font: 600 var(--t12) var(--letter); color: var(--zacht); }
.vlak__inhoud { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; }

.verslag > * { max-width: 72ch; }
.verslag h2, .verslag h3 { margin: 16px 0 4px; font: 600 var(--t15) var(--letter); }
.verslag h3 { font: 600 var(--t13) var(--letter); }
.verslag > :first-child { margin-top: 0; }
.verslag p { margin-bottom: 8px; }
.verslag ul, .verslag ol { margin-bottom: 8px; padding-left: 16px; }
.verslag ul { list-style: disc; }
.verslag ol { list-style: decimal; }
.verslag li { margin-bottom: 4px; }
.verslag strong { font-weight: 600; }

.tijdlink {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: var(--zweef);
  color: var(--zacht);
  font: 400 var(--t12) var(--letter);
  font-variant-numeric: tabular-nums;
}
.tijdlink:hover { background: var(--licht); color: var(--tekst); }

.beurt { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; margin: 0 -8px; padding: 4px 8px; border-radius: 6px; }
.beurt:focus { outline: 0; }
.beurt--licht { background: var(--licht); }
.beurt__tijd { color: var(--zacht); font-variant-numeric: tabular-nums; }
.beurt__naam { font-weight: 600; }
.beurt__tekst { max-width: 72ch; overflow-wrap: anywhere; white-space: pre-wrap; }
.sp-1 { color: var(--sp-1); }
.sp-2 { color: var(--sp-2); }
.sp-3 { color: var(--sp-3); }
.sp-4 { color: var(--sp-4); }
.sp-5 { color: var(--sp-5); }
.sp-6 { color: var(--sp-6); }
.sp-7 { color: var(--sp-7); }
.sp-8 { color: var(--sp-8); }

/* ---- Hoofdpagina: gedeelde onderdelen. De indeling in drie vlakken staat in mijn.css ---- */
.koppelen__tekst { margin-bottom: 12px; }

.werk { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--figuur); }
.werk__melding { padding: 12px 16px; color: var(--zacht); }

/* Het podium: tijdens een opname is dit het hele werkblad, zonder iets dat afleidt. */
.werk--podium > :not(#opnemer) { display: none !important; }
.podium { flex: none; position: relative; }
.werk--podium > .podium { display: flex; flex: 1; flex-direction: column; min-height: 0; animation: podium-in 240ms ease-out; }
.podium__kiezen { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; }
.podium__sluit { position: absolute; top: 8px; right: 8px; }
.podium__kop { margin: 0; font: 600 var(--t28) var(--letter); }

.opnameknop { display: grid; place-items: center; width: 112px; height: 112px; padding: 0; border: 4px solid var(--lijn); border-radius: 50%; background: var(--figuur); cursor: pointer; transition: border-color 160ms ease; }
.opnameknop:hover { border-color: var(--gevaar); }
.opnameknop__stip { display: block; width: 88px; height: 88px; border-radius: 50%; background: var(--gevaar); transition: transform 160ms ease; }
.opnameknop:hover .opnameknop__stip { transform: scale(1.04); }
.opnameknop:active .opnameknop__stip { transform: scale(0.94); }
.opnameknop:disabled { opacity: 0.4; cursor: default; }

.podium__bezig { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.podium__bronnen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.podium__boven { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; }
.podium__stand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gevaar); }
.podium--pauze .podium__stand { color: var(--zacht); }
.podium__stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gevaar); animation: stip-puls 1300ms ease-in-out infinite; }
.podium--pauze .podium__stip { background: var(--zacht); animation: none; }

.bronnen { display: flex; flex-wrap: wrap; gap: 16px; }
.bron { display: inline-flex; align-items: center; gap: 8px; color: var(--zacht); }
.bron__naam { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bron__meter { display: block; width: 64px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--licht); }
.bron__stand { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.bron--tab .bron__stand { background: var(--tekst); }

.podium__midden { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 32px; min-height: 0; }
.podium__klok { font: 300 88px/96px var(--letter); text-align: center; letter-spacing: -2px; animation: klok-in 320ms ease-out; }
.podium--pauze .podium__klok { color: var(--zacht); animation: pauze-puls 1600ms ease-in-out infinite; }
.podium__golf { display: block; flex: none; width: 100%; height: 160px; }

.podium__onder { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px; border-top: 1px solid var(--lijn); }
.podium__veilig { display: inline-flex; align-items: center; gap: 8px; }
.podium__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.podium__knop { height: 40px; padding: 0 16px; }
.belangrijk { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 6px; background: var(--figuur); color: var(--accent-donker); font-weight: 600; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.belangrijk:hover, .belangrijk--net { background: var(--accent); color: var(--figuur); }
.belangrijk kbd { padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font: 400 var(--t12) var(--letter); opacity: 0.7; }
.belangrijk__teller { min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--figuur); font: 600 var(--t12) var(--letter); text-align: center; }
.belangrijk:hover .belangrijk__teller, .belangrijk--net .belangrijk__teller { background: var(--figuur); color: var(--accent-donker); }

.podium__klein { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--lijn); background: var(--figuur); font-weight: 600; color: var(--gevaar); text-align: left; cursor: pointer; }
.podium__klein:hover { background: var(--zweef); }
.podium__klein .zacht { font-weight: 400; }

.podium__melding { color: var(--zacht); text-align: center; }
.podium__melding:not(:empty) { padding: 8px 16px; }
.podium--afronden { align-items: center; justify-content: center; }
.podium--afronden .podium__melding { font: 400 var(--t15) var(--letter); animation: pauze-puls 1600ms ease-in-out infinite; }

@keyframes podium-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes klok-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes stip-puls { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes pauze-puls { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .werk--podium > .podium, .podium__klok, .podium__stip, .podium--pauze .podium__klok, .podium--afronden .podium__melding { animation: none; }
}
.beurt__naam--knop { display: inline; padding: 0; border: 0; background: transparent; font-weight: 600; text-align: left; cursor: text; }
.beurt__naam--knop:hover { text-decoration: underline; }
.beurt__naam-veld { width: min(240px, 100%); }

.speler { display: flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--lijn); }
.speler__play { min-width: 84px; }
.speler__range { flex: 1; min-width: 80px; height: var(--hoogte); margin: 0; accent-color: var(--tekst); cursor: pointer; }
.speler__tijd { white-space: nowrap; }
.speler__geen { flex: none; padding: 4px 16px; border-bottom: 1px solid var(--lijn); }
.beurt--klikbaar { cursor: pointer; }
.beurt--klikbaar:hover { background: var(--zweef); }
.beurt--actief, .beurt--actief:hover { background: var(--licht); }
button.beurt__tijd { height: 18px; padding: 0; border: 0; background: transparent; text-align: left; font-variant-numeric: tabular-nums; }
button.beurt__tijd:hover { color: var(--tekst); }

/* Touchscreen: tikdoelen van 44 px */
@media (pointer: coarse) {
  :root { --hoogte: 44px; }
  body { font-size: 15px; line-height: 20px; }
  .veld, .keuze { font-size: 16px; }
  .tijdlink { padding: 4px 8px; }
  .beurt__naam--knop, button.beurt__tijd { min-height: 32px; }
}

/* Smal scherm: alles onder elkaar */
@media (max-width: 860px) {
  .balk { flex-wrap: wrap; }
  .balk .keuze { max-width: 100%; margin-left: 0; }
  .blad { padding: 12px 12px 32px; }

  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; }
  .tabel thead { display: none; }
  .tabel tr { padding: 8px 12px; border-top: 1px solid var(--lijn); }
  .tabel tbody tr:first-child { border-top: 0; }
  .tabel td, .tabel td:first-child { display: flex; justify-content: space-between; gap: 12px; height: auto; min-height: 20px; padding: 0; border: 0; white-space: normal; }
  .tabel td::before { content: attr(data-kop); color: var(--zacht); }
  .tabel td.actie { width: auto; padding: 4px 0 0; justify-content: flex-end; }
  .tabel td.actie::before { content: none; }
  .tabel .plek { max-width: none; }
  .tabel td:empty { display: none; }

  .rij { flex-wrap: wrap; gap: 0 12px; padding: 4px 4px 4px 12px; }
  .rij__naam { flex-basis: 100%; }
  .rij--invoer .veld { flex: 1 1 160px; }

  .koppel { flex-direction: column; }

  .koppelen { padding-top: 16px; }
  .koppelen__vak { flex-direction: column; align-items: center; }
  .koppelen__rechts { width: 100%; }

  .speler { flex-wrap: wrap; position: sticky; top: 0; z-index: 1; background: var(--figuur); }
  .lezen { display: block; height: auto; }
  .lezen__titel { flex-basis: 100%; }
  .lezen__titel h1 { white-space: normal; }
  .lezen__weg { flex-basis: 100%; white-space: normal; }
  .vlakken { display: block; }
  .vlak + .vlak { border-top: 8px solid var(--grond); border-left: 0; }
  .vlak__inhoud { overflow: visible; }
  .beurt { grid-template-columns: 56px minmax(0, 1fr); }
}

/* Afdrukken: alles onder elkaar, zonder bediening */
@media print {
  body { background: var(--figuur); }
  .balk .stil, .vlak__kop .stil, .lezen__weg, .speler, .speler__geen, .podium { display: none !important; }
  .beurt--actief { background: transparent; }
  .werk { display: block; }
  .balk { border: 0; padding: 0 0 8px; }
  .lezen { display: block; height: auto; }
  .vlakken { display: block; }
  .vlak + .vlak { border: 0; break-before: page; }
  .vlak__kop { padding: 0; }
  .vlak__inhoud { overflow: visible; padding: 8px 0; }
  .tijdlink { background: transparent; padding: 0; }
  .beurt { break-inside: avoid; }
  .beurt--licht { background: transparent; }
}

/* ---- Inloggen ---- */
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.logo--groot { font: 600 var(--t15) var(--letter); }
.welkom { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 32px 16px; background: var(--grond); }
.welkom__vak { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: center; width: min(880px, 100%); padding: 48px; border-radius: 16px; background: var(--figuur); animation: podium-in 240ms ease-out; }
.welkom__kop { margin: 24px 0 16px; font: 600 var(--t28) var(--letter); }
.welkom__stappen { counter-reset: stap; margin-bottom: 24px; }
.welkom__stappen li { counter-increment: stap; display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font: 400 var(--t15) var(--letter); }
.welkom__stappen li::before { content: counter(stap); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--grond); font: 600 var(--t12) var(--letter); line-height: 20px; text-align: center; }
.welkom__rechts { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.welkom__qr { width: 240px; }
.welkom__qr svg { display: block; width: 100%; height: auto; }
.welkom .code { margin: 8px 0 0; }

/* ---- Opneemknop ---- */

.opneemknop { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: 100%; height: 36px; border: 0; border-radius: 8px; background: var(--tekst); color: var(--figuur); font-weight: 600; transition: opacity 120ms ease; }
.opneemknop:hover { opacity: 0.86; }
.opneemknop:disabled { opacity: 0.4; cursor: default; }
.opneemknop__stip { width: 10px; height: 10px; border-radius: 50%; background: #e5483e; }

/* ---- Speler, samenvatting en gesprek ---- */

.werk__melding { display: flex; flex: 1; align-items: center; justify-content: center; padding: 32px; color: var(--zacht); font: 400 var(--t15) var(--letter); text-align: center; }
.werk__melding[hidden] { display: none; }

.speler { gap: 4px; min-height: 56px; padding: 8px 24px; border-top: 0; border-bottom: 1px solid var(--lijn); }
.speler__play { position: relative; flex: none; min-width: 0; width: 36px; height: 36px; margin-right: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--tekst); cursor: pointer; font-size: 0; }
.speler__play::before { content: ''; position: absolute; top: 11px; left: 14px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--figuur); }
.speler__play[aria-pressed="true"]::before { top: 11px; left: 12px; width: 12px; height: 14px; border: solid var(--figuur); border-width: 0 4px; }
.tijdlijn { position: relative; flex: 1; min-width: 80px; height: 36px; margin: 0 8px; }
.bg-1 { background: var(--sp-1); }
.bg-2 { background: var(--sp-2); }
.bg-3 { background: var(--sp-3); }
.bg-4 { background: var(--sp-4); }
.bg-5 { background: var(--sp-5); }
.bg-6 { background: var(--sp-6); }
.bg-7 { background: var(--sp-7); }
.bg-8 { background: var(--sp-8); }
.speler__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
.speler__range::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.speler__range::-moz-range-track { height: 36px; background: transparent; }
.speler__range::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 28px; margin-top: 4px; border-radius: 2px; background: var(--tekst); box-shadow: 0 0 0 2px var(--figuur); }
.speler__range::-moz-range-thumb { width: 3px; height: 28px; border: 0; border-radius: 2px; background: var(--tekst); box-shadow: 0 0 0 2px var(--figuur); }
.speler__geen { padding: 4px 24px 8px; border-bottom: 1px solid var(--lijn); }

.blad { flex: 1; min-height: 0; overflow-y: auto; background: var(--figuur); }
.gesprek { font: 400 var(--t15) var(--letter); }
.belangrijk-blok { margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; background: var(--figuur); }
.belangrijk-blok__kop { margin-bottom: 4px; font: 600 var(--t12) var(--letter); color: var(--accent-donker); }
.sprekers { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 16px; }
.spreker { display: inline-flex; align-items: center; gap: 6px; color: var(--zacht); }
.spreker__stip { width: 8px; height: 8px; border-radius: 50%; }
.spreker .beurt__naam { font-weight: 500; }
.gesprek .beurt { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; margin: 0 -12px; padding: 8px 12px; border-radius: 8px; }
.gesprek .beurt__tijd { padding: 2px 0 0; border: 0; background: transparent; color: var(--zacht); font: 400 var(--t12) var(--letter); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; }
.gesprek .beurt__naam { font: 600 var(--t13) var(--letter); }
.gesprek .beurt__tekst { margin-top: 2px; }

@media (max-width: 860px) {
  .welkom__vak { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .speler { padding: 8px 16px; }
  .blad { overflow: visible; }
}
@media print {
  .sprekers, .tijdlijn { display: none !important; }
  .blad { overflow: visible; }
}

/* ---- Stijlpas: fijner, rustiger, kleur alleen waar die iets zegt ---- */

.opneemknop { height: 32px; border: 1px solid var(--lijn); background: var(--figuur); color: var(--tekst); font-weight: 500; transition: background 120ms ease; }
.opneemknop:hover { opacity: 1; background: var(--grond); border-color: rgb(0 0 0 / 14%); }
.opneemknop__stip { width: 8px; height: 8px; background: var(--gevaar); }

.speler { gap: 4px; min-height: 64px; padding: 8px 32px 12px; }
.speler__play { display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; border-radius: 50%; background: var(--tekst); color: var(--figuur); transition: transform 120ms ease, opacity 120ms ease; }
.speler__play::before { content: none; }
.speler__play:hover { opacity: 0.85; }
.speler__play:active { transform: scale(0.95); }
.speler__pauze { display: none; }
.speler__play[aria-pressed="true"] .speler__pauze { display: block; }
.speler__play[aria-pressed="true"] .speler__speel { display: none; }
.icoonknop { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--zacht); cursor: pointer; }
.icoonknop:hover { background: var(--zweef); color: var(--tekst); }
.icoonknop text { font-family: var(--letter); }
.tijdlijn { height: 44px; margin: 0 12px 0 8px; }
.tijdlijn__golf { position: absolute; inset: 0; width: 100%; height: 100%; }
.tijdlijn__bel { position: absolute; top: -18px; padding: 0 4px; border-radius: 4px; background: var(--tekst); color: var(--figuur); font: 500 var(--t12) var(--letter); transform: translateX(-50%); pointer-events: none; }
.speler__range::-webkit-slider-runnable-track { height: 44px; }
.speler__range::-moz-range-track { height: 44px; }
.speler__range::-webkit-slider-thumb { width: 12px; height: 44px; margin-top: 0; border-radius: 0; background: transparent; box-shadow: none; }
.speler__range::-moz-range-thumb { width: 12px; height: 44px; border-radius: 0; background: transparent; box-shadow: none; }
.speler__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.speler__tijd { font: 400 var(--t12) var(--letter); font-variant-numeric: tabular-nums; }
.speler__snel { min-width: 36px; justify-content: center; font: 500 var(--t12) var(--letter); }
.stil:focus-visible { opacity: 1; }
.tijdlink { padding: 0 2px; background: transparent; color: var(--zacht); }
.tijdlink:hover { background: transparent; color: var(--tekst); text-decoration: underline; }
.belangrijk-blok { position: relative; margin-bottom: 16px; padding: 0 0 0 12px; border-radius: 0; background: transparent; box-shadow: inset 2px 0 0 var(--accent); }
.belangrijk-blok__kop { color: var(--accent-donker); }
.sprekers { gap: 4px 16px; margin-bottom: 16px; font: 400 var(--t12) var(--letter); }
.spreker .beurt__naam { font: 500 var(--t12) var(--letter); color: var(--tekst); }
.icoonknop { position: relative; transition: background 120ms ease, color 120ms ease; }
.icoonknop::after { content: ""; position: absolute; inset: -6px; }
.icoonknop--gevaar:hover { background: rgb(180 35 24 / 8%); color: var(--gevaar); }
.titel-knop { display: block; max-width: 100%; margin: 0 -6px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; overflow-wrap: anywhere; text-align: left; cursor: text; transition: background 120ms ease; }
.titel-knop:hover { background: var(--zweef); }
.titel-veld { display: block; border: 0; border-radius: 6px; background: var(--figuur); color: var(--tekst); box-shadow: 0 0 0 2px var(--accent); outline: 0; }
.titel-veld--kop { width: calc(100% + 12px); height: 28px; margin: 0 -6px; padding: 0 6px; font: 600 22px/28px var(--letter); letter-spacing: -0.015em; }
.titel-veld--lijst { position: absolute; top: 4px; left: 4px; width: calc(100% - 8px); height: 20px; padding: 0 4px; font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--accent); }
.deel__titel { display: flex; align-items: center; gap: 4px; }
.kopieer-icoon { margin-right: -5px; }
.kopieer-icoon__vink { display: none; }
.kopieer-icoon--gelukt, .kopieer-icoon--gelukt:hover { color: var(--accent-donker); }
.kopieer-icoon--gelukt .kopieer-icoon__kopie { display: none; }
.kopieer-icoon--gelukt .kopieer-icoon__vink { display: block; }
.stats-knop--open { background: var(--zweef); color: var(--tekst); }
.map-keuze { display: inline-flex; align-items: center; gap: 4px; height: 22px; margin: 0 -2px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--zweef); color: var(--tekst); font: 500 var(--t12) var(--letter); cursor: pointer; transition: background 120ms ease; }
.map-keuze:hover { background: rgb(0 0 0 / 8%); }
.map-keuze:disabled { cursor: default; }
.map-keuze--leeg { background: transparent; color: var(--zacht); }
.map-keuze--leeg:hover { color: var(--tekst); }
.opneemknop { min-width: 0; }
.opneemknop__stip { flex: none; }
.opneemknop__tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: fixed; inset: auto; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; margin: 0; padding: 4px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--figuur); color: var(--tekst); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.menu__kop { padding: 6px 8px 2px 8px; color: var(--zacht); font: 500 var(--t12) var(--letter); }
.menu__lijn { height: 1px; margin: 4px; background: var(--lijn); }
.menu__regel { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 28px; padding: 4px 8px 4px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: 400 var(--t13) var(--letter); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.menu__regel:hover, .menu__regel:focus-visible { background: var(--zweef); outline: 0; }
.menu__regel--gevaar { color: var(--gevaar); }
.menu__vink { display: grid; flex: none; place-items: center; width: 16px; height: 16px; }
.samen__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.versies { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.versie { height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--zacht); font: 400 var(--t12) var(--letter); cursor: pointer; }
.versie:hover { background: var(--zweef); color: var(--tekst); }
.versie--actief, .versie--actief:hover { background: rgb(0 0 0 / 7%); color: var(--tekst); font-weight: 500; }
.samen__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 12px; color: var(--zacht); font: 400 var(--t13) var(--letter); }
.samen__puls { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: samen-puls 1200ms ease-in-out infinite; }
@keyframes samen-puls { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .samen__puls { animation: none; } }
.samen__opnieuw { padding: 0; border: 0; background: transparent; color: var(--tekst); font: 500 var(--t13) var(--letter); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.map-dialoog { width: min(820px, calc(100vw - 32px)); }
.map-dialoog__boven { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.map-veld--naam { flex: 1 1 240px; }
.map-dialoog .map-dialoog__vast { padding: 8px 12px; border-radius: 8px; background: var(--grond); color: var(--tekst); }
.map-dialoog form { display: flex; flex-direction: column; gap: 12px; }
.map-dialoog h2 { margin: 0; }
.map-dialoog p { margin: 0; }
.map-veld { display: flex; flex-direction: column; gap: 4px; font: 500 var(--t13) var(--letter); }
.map-veld .veld { width: 100%; font: 400 var(--t13) var(--letter); }
.map-opzet { height: auto; padding: 8px; line-height: 18px; resize: vertical; }
.map-voorbeelden { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.map-voorbeeld { height: 24px; padding: 0 8px; border: 1px solid var(--lijn); border-radius: 12px; background: transparent; color: var(--tekst); font: 400 var(--t12) var(--letter); cursor: pointer; }
.map-voorbeeld:hover { background: var(--zweef); }
.map-dialoog__knoppen { align-items: center; margin-top: 0; }
.map-verwijder { margin-right: auto; color: var(--gevaar); white-space: normal; text-align: left; height: auto; min-height: var(--hoogte); }
.map-verwijder:hover { color: var(--gevaar); }
.stats { position: fixed; inset: auto; margin: 0; padding: 8px 4px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--figuur); color: var(--tekst); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); font: 400 var(--t12) var(--letter); font-variant-numeric: tabular-nums; }
.stats { max-width: calc(100vw - 16px); overflow-x: auto; }
.stats table { border-collapse: collapse; }
.stats th, .stats td { padding: 4px 10px; font: inherit; text-align: right; white-space: nowrap; }
.stats thead th { color: var(--zacht); }
.stats tbody th, .stats tfoot th { max-width: 160px; overflow: hidden; font-weight: 500; text-align: left; text-overflow: ellipsis; }
.stats tbody th .spreker__stip { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.stats tfoot th, .stats tfoot td { border-top: 1px solid var(--lijn); color: var(--zacht); }
@media (max-width: 480px) {
  .stats th, .stats td { padding: 4px 5px; }
  .stats tbody th, .stats tfoot th { max-width: 88px; }
}
.gesprek .beurt { display: block; margin: 0 -12px; padding: 8px 12px; border-radius: 0; }
.gesprek .beurt__kop { display: flex; align-items: center; gap: 8px; }
.gesprek .beurt__stip { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.gesprek .beurt__naam { font: 600 var(--t13) var(--letter); color: var(--tekst); }
.gesprek .beurt__tijd { padding: 0; font: 400 var(--t12) var(--letter); }
.gesprek .beurt__tekst { margin-top: 2px; font: 400 var(--t15) var(--letter); max-width: none; }
.beurt--klikbaar:hover { background: transparent; }
.gesprek .beurt--klikbaar:hover .beurt__tijd { color: var(--tekst); }
.gesprek .beurt--actief, .gesprek .beurt--actief:hover { background: transparent; box-shadow: inset 2px 0 0 var(--tekst); }
.gesprek .beurt--licht { background: var(--zweef); }

.podium__bronnen .keuze { max-width: 200px; height: 24px; padding: 0 4px; border: 0; background: var(--zweef); border-radius: 6px; font: 400 var(--t12) var(--letter); }
.bron--stil { opacity: 0.45; }
.bron--stil .bron__stand { transform: scaleX(0) !important; }

@media (max-width: 860px) {
  .speler { flex-wrap: wrap; padding: 8px 16px; }
  .tijdlijn { flex-basis: 100%; order: 9; margin: 0; }
}
@media print {
  .map-keuze, .versies, .samen__status { display: none !important; }
  .titel-knop { margin: 0; padding: 0; }
}

/* ---- Taalkeuze: rustig, en met 44 px om op te tikken zonder dat de voet groeit ---- */
/* De taalkeuze als twee vlaggen: de gekozen taal is helder, de andere flauw. */
.vlaggen { display: flex; flex: none; }
.vlag { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; opacity: 0.45; transition: opacity 120ms ease; }
.vlag::after { content: ""; position: absolute; inset: -8px 0; }
.vlag svg { display: block; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 16%); }
.vlag:hover { opacity: 0.8; }
.vlag[aria-pressed="true"] { opacity: 1; cursor: default; }
.vlag[aria-pressed="true"] svg { box-shadow: 0 0 0 1px rgb(0 0 0 / 40%); }
.taal-wissel { position: relative; }
.taal-wissel::after { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 44px; transform: translateY(-50%); }
.taal-wissel--koppel { margin: 8px 0 0 -8px; }

/* ---- Privacyverklaring: een leespagina. Grotere tekst en ruimere regels dan de app,
   een kolom van hoogstens 720 px, op een smal scherm 16 px aan de zijkant. ---- */
.verklaring-pagina { height: auto; }
.verklaring__balk { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(720px, 100%); margin: 0 auto; padding: 16px; }
.verklaring { width: min(720px, 100%); margin: 0 auto; padding: 0 16px 48px; }
.verklaring article { padding: 48px; border-radius: 16px; background: var(--figuur); font: 400 15px/24px var(--letter); overflow-wrap: break-word; }
.verklaring article + article { margin-top: 24px; }
.verklaring h1 { font: 600 var(--t28) var(--letter); }
.verklaring h2 { margin: 40px 0 8px; font: 600 17px/24px var(--letter); scroll-margin-top: 16px; }
.verklaring h3 { margin: 24px 0 4px; font: 600 15px/24px var(--letter); }
.verklaring p + p, .verklaring p + ul, .verklaring ul + p, .verklaring p + dl, .verklaring dl + p { margin-top: 12px; }
.verklaring ul { padding-left: 20px; list-style: disc; }
/* Stappen op de hulppagina. De inhoudsopgave van de privacyverklaring heeft een eigen regel. */
.verklaring ol { padding-left: 20px; list-style: decimal; }
.verklaring p + ol, .verklaring ol + p { margin-top: 12px; }
.verklaring li + li { margin-top: 8px; }
.verklaring strong { font-weight: 600; }
.verklaring a { color: var(--accent-donker); text-underline-offset: 2px; }
.verklaring__datum { margin-top: 8px; color: var(--zacht); font: 400 var(--t13) var(--letter); }
.verklaring__intro { margin-top: 24px; }
.verklaring__kort { margin-top: 32px; padding: 24px; border-radius: 12px; background: var(--grond); }
.verklaring__kort h2 { margin-top: 0; }
.verklaring__inhoud { margin-top: 32px; }
.verklaring__inhoud ol { columns: 2; column-gap: 32px; padding-left: 24px; list-style: decimal; color: var(--zacht); font: 400 var(--t13) var(--letter); }
.verklaring__inhoud li { break-inside: avoid; padding: 2px 0; }
.verklaring__inhoud li + li { margin-top: 0; }
.verklaring__lijst { margin: 12px 0 0; border-top: 1px solid var(--lijn); }
.verklaring__lijst > div { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.verklaring__lijst dt { font-weight: 600; }
.verklaring__lijst dd { margin: 4px 0 0; }
.verklaring__lijst--termijnen > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.verklaring__lijst--termijnen dd { margin: 0; }
@media (max-width: 640px) {
  .verklaring article { padding: 24px 16px; border-radius: 12px; }
  .verklaring__kort { padding: 16px; }
  .verklaring h1 { font-size: 24px; line-height: 30px; }
  .verklaring__inhoud ol { columns: 1; }
  .verklaring__lijst--termijnen > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media print {
  .verklaring__balk { display: none; }
  .verklaring article { padding: 0; }
}

/* De voet van het koppelscherm: taalkeuze en de privacyverklaring naast elkaar. */
.welkom__voet { display: flex; align-items: center; gap: 4px; margin: 8px 0 0 -8px; }
.welkom__voet .taal-wissel--koppel { margin: 0; }
.welkom__privacy { position: relative; text-decoration: none; }
.welkom__privacy::after { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 44px; transform: translateY(-50%); }

/* ---- Koppelpagina en schoolportaal ---- */
a.knop { text-decoration: none; }
.koppel-open { margin-bottom: 16px; }
.koppel-link { color: var(--accent-donker); text-underline-offset: 2px; }
.school-form { display: grid; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--lijn); }
.lijst > .school-form:first-child { border-top: 0; }
.school-form label { font-weight: 500; }
.school-form__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.school-form--los { padding: 0; border-top: 0; }
.school__tekst { display: block; width: 100%; height: auto; padding: 8px; line-height: 18px; resize: vertical; }
.mapdialoog[open] { display: flex; flex-direction: column; gap: 16px; }
.mapdialoog h2, .mapdialoog p { margin: 0; }
.mapdialoog .fout { color: var(--gevaar); }
.mapdialoog .fe__veld > .veld { width: 100%; }
.mapdialoog__kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 24px; align-items: start; }
@media (max-width: 720px) {
  .mapdialoog__kop { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---- Kleur van een map: dezelfde zes tinten als de tegels in de app ---- */
.mapkleur-0 { --mapkleur: #d97a45; --mapvlak: #fadfc8; }
.mapkleur-1 { --mapkleur: #5e9a5a; --mapvlak: #dce9d3; }
.mapkleur-2 { --mapkleur: #5b8fc4; --mapvlak: #d9e6f2; }
.mapkleur-3 { --mapkleur: #8c74c4; --mapvlak: #e7dff3; }
.mapkleur-4 { --mapkleur: #c9962f; --mapvlak: #f6e7be; }
.mapkleur-5 { --mapkleur: #4fa38b; --mapvlak: #d5ece4; }
.mapstip { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mapkleur, var(--zacht)); }

.kleurkiezer { display: flex; gap: 8px; }
.kleurkiezer__keuze { position: relative; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.kleurkiezer__keuze input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.kleurkiezer__keuze span { width: 20px; height: 20px; border-radius: 50%; background: var(--mapkleur); box-shadow: 0 0 0 2px var(--figuur); }
.kleurkiezer__keuze input:checked + span { box-shadow: 0 0 0 2px var(--figuur), 0 0 0 4px var(--tekst); }
.kleurkiezer__keuze input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }
.kleurkiezer__keuze input:disabled { cursor: default; }


/* ---- Drive ---- */
.drive-terug { padding: 24px; }
a.icoonknop { text-decoration: none; }
.map-drive { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.map-drive__keuze { display: flex; align-items: center; gap: 8px; font: 500 var(--t13) var(--letter); cursor: pointer; }
.map-drive__keuze input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.map-drive__sub { margin-left: 24px; font-weight: 400; }
.map-drive__regel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 0 24px; }
.tekstknop { padding: 0; border: 0; background: transparent; color: var(--tekst); font: 500 var(--t12) var(--letter); text-decoration: underline; text-underline-offset: 2px; }

/* ---- De editor van een indeling (format-editor.js): het sjabloon is een blad dat je bewerkt ---- */
.fe { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fe__veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fe__label { color: var(--tekst); font: 500 var(--t13) var(--letter); }
.fe__start { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fe__startpunt { height: 24px; padding: 0 8px; border: 1px solid var(--lijn); border-radius: 12px; background: transparent; color: var(--tekst); font: 400 var(--t12) var(--letter); }
.fe__startpunt:hover { background: var(--zweef); }
.fe__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.fe__balk { display: flex; gap: 2px; }
.fe__opmaak { width: 28px; height: 28px; border-radius: 6px; }
.fe__opmaak[aria-pressed="true"] { background: var(--licht); color: var(--tekst); }
.fe__blad { height: min(360px, 42vh); min-height: 200px; overflow-y: auto; padding: 20px 24px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--figuur); }
.fe__blad:focus-within { border-color: var(--accent); }
.fe__blad .schrijf { min-height: 100%; outline: 0; caret-color: var(--accent); cursor: text; }
.fe__blad .schrijf > :first-child { margin-top: 0; }
.fe__blad h2, .fe__blad h3 { margin: 16px 0 4px; color: var(--tekst); font: 600 var(--t15) var(--letter); overflow-wrap: anywhere; }
/* Wat onder een kopje staat is een beschrijving, geen tekst van de samenvatting: daarom grijs. */
.fe__blad p, .fe__blad li { margin: 0 0 4px; color: var(--zacht); font: 400 var(--t13) var(--letter); overflow-wrap: anywhere; }
.fe__blad ul, .fe__blad ol { margin: 0 0 4px; padding-left: 20px; }
.fe__blad ul { list-style: disc; }
.fe__blad ol { list-style: decimal; }
.fe__blad strong, .fe__blad b { color: var(--tekst); font-weight: 600; }
.fe__blad .schrijf--leeg::before { content: attr(data-leeg); display: block; height: 0; color: var(--zacht); pointer-events: none; }
.fe--vast .fe__blad { background: var(--grond); }
.fe--vast .fe__blad .schrijf { cursor: default; }
.fe__uitleg { margin: 0; }
.fe__onder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.fe__lengte { display: inline-flex; align-self: flex-start; padding: 2px; border-radius: 8px; background: rgb(0 0 0 / 5%); }
.fe__keuze { position: relative; }
.fe__keuze input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.fe__keuze span { display: block; height: 24px; padding: 0 12px; border-radius: 6px; color: var(--zacht); font: 400 var(--t13) var(--letter); line-height: 24px; }
.fe__keuze input:checked + span { background: var(--figuur); color: var(--tekst); font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }
.fe__keuze input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.fe__keuze input:disabled { cursor: default; }
.fe__extra { width: 100%; height: auto; padding: 4px 8px; line-height: 18px; resize: vertical; }
.fe__feiten { display: flex; flex-direction: column; gap: 4px; }
.fe__feiten p { margin: 0; color: var(--zacht); font: 400 var(--t13) var(--letter); overflow-wrap: anywhere; }
.fe__feiten .fe__label { margin-right: 4px; }
@media (max-width: 720px) {
  .fe__onder { grid-template-columns: minmax(0, 1fr); }
}