/* =================================================================
   Ironman 70.3 — stijl
   Donker als standaard, licht als optie. Kleur komt van de disciplines;
   de rest van de interface blijft rustig (krijt op leisteen).
   Cijfers in Barlow Condensed, tekst in Atkinson Hyperlegible.
   ================================================================= */

@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #10161d;
  --vlak: #17202a;
  --vlak-2: #1f2a36;
  --vlak-3: #283545;
  --lijn: #2a3644;
  --tekst: #eaf0f5;
  --tekst-2: #a2b0be;
  --tekst-3: #6f7f90;
  --krijt: #f3f6f8;
  --op-krijt: #10161d;

  --zwemmen: #45adf6;
  --fietsen: #f2a93b;
  --lopen: #f2645f;
  --brick: #a193f4;
  --kracht: #a193f4;
  --overig: #8796a6;

  --goed: #4cc38a;
  --let: #f2c14e;
  --fout: #f26b6b;

  --fase-basis: #3a5068;
  --fase-opbouw: #5b7896;
  --fase-piek: #9fb6cc;
  --fase-taper: #d7e2ec;
  --fase-race: #f3f6f8;

  --cijfer: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --tekstfont: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-klein: 8px;
  --r: 14px;
  --r-groot: 22px;
  --nav-hoogte: 64px;
  --breedte: 680px;
  color-scheme: dark;
}

:root[data-thema="licht"] {
  --bg: #eef2f5;
  --vlak: #ffffff;
  --vlak-2: #f4f7f9;
  --vlak-3: #e6ecf1;
  --lijn: #d6dee6;
  --tekst: #13202b;
  --tekst-2: #4b5b6b;
  --tekst-3: #78889a;
  --krijt: #13202b;
  --op-krijt: #ffffff;
  --zwemmen: #1a82cc;
  --fietsen: #bf760a;
  --lopen: #d33f3b;
  --brick: #6a58d2;
  --kracht: #6a58d2;
  --overig: #66778a;
  --goed: #1f9a62;
  --let: #b78300;
  --fout: #cf3d3d;
  --fase-basis: #c3d0dc;
  --fase-opbouw: #93a9bf;
  --fase-piek: #5d7892;
  --fase-taper: #314a62;
  --fase-race: #13202b;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root[data-thema="systeem"] {
    --bg: #eef2f5; --vlak: #ffffff; --vlak-2: #f4f7f9; --vlak-3: #e6ecf1; --lijn: #d6dee6;
    --tekst: #13202b; --tekst-2: #4b5b6b; --tekst-3: #78889a; --krijt: #13202b; --op-krijt: #ffffff;
    --zwemmen: #1a82cc; --fietsen: #bf760a; --lopen: #d33f3b; --brick: #6a58d2; --kracht: #6a58d2; --overig: #66778a;
    --goed: #1f9a62; --let: #b78300; --fout: #cf3d3d;
    --fase-basis: #c3d0dc; --fase-opbouw: #93a9bf; --fase-piek: #5d7892; --fase-taper: #314a62; --fase-race: #13202b;
    color-scheme: light;
  }
}

/* ---------------------------------------------------------- basis */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 400 16px/1.5 var(--tekstfont);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--krijt); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 .75em; }
.stil { color: var(--tekst-2); }
.klein { font-size: 14px; }
.heel-klein { font-size: 13px; color: var(--tekst-3); }
.cijfer { font-family: var(--cijfer); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.01em; }

/* ---------------------------------------------------------- opbouw */

.app { padding-bottom: calc(var(--nav-hoogte) + env(safe-area-inset-bottom) + 24px); }
.kop {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
}
.kop-binnen { max-width: var(--breedte); margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 40px; }
.kop-binnen h1 { flex: 1; font-size: 22px; }
.kop .terug { margin-left: -8px; }
main { max-width: var(--breedte); margin: 0 auto; padding: 4px 16px 0; }
.blok { margin: 0 0 28px; }
.blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.blok-kop h2 { font-size: 18px; }

/* ---------------------------------------------------------- navigatie onder */

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: color-mix(in srgb, var(--vlak) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--lijn);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--breedte); display: grid; grid-template-columns: repeat(5, 1fr); }
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--nav-hoogte); text-decoration: none; color: var(--tekst-3); font-size: 12px;
}
.nav a svg { width: 24px; height: 24px; }
.nav a[aria-current="page"] { color: var(--tekst); }

/* ---------------------------------------------------------- knoppen en invoer */

.knop, .knop-stil, .knop-rand, .knop-gevaar {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.knop { background: var(--krijt); color: var(--op-krijt); }
.knop-rand { background: transparent; border: 1.5px solid var(--lijn); color: var(--tekst); }
.knop-stil { background: transparent; color: var(--tekst-2); padding: 0 10px; }
.knop-gevaar { background: transparent; border: 1.5px solid color-mix(in srgb, var(--fout) 55%, transparent); color: var(--fout); }
.knop:disabled, .knop-rand:disabled { opacity: .5; cursor: default; }
.knop-rij { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knop-rij.vol > * { flex: 1; }
.icoonknop {
  width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--tekst-2);
  display: inline-grid; place-items: center; cursor: pointer;
}
.icoonknop svg { width: 22px; height: 22px; }
.icoonknop.bezig svg { animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

label.veld { display: block; margin-bottom: 14px; }
label.veld > span:first-child { display: block; font-size: 14px; color: var(--tekst-2); margin-bottom: 5px; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="password"],
input[type="search"], input[type="url"], input[inputmode], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  background: var(--vlak-2); border: 1.5px solid var(--lijn); border-radius: var(--r-klein);
  font-size: 16px; /* 16px voorkomt inzoomen op iOS */
}
textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tekst-2); }
.velden-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.velden-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.vinkje { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.vinkje input { width: 22px; height: 22px; accent-color: var(--krijt); }
.hint { font-size: 13px; color: var(--tekst-3); margin-top: -8px; margin-bottom: 14px; }

/* Keuzechips (discipline, moment, …) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips button {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--lijn);
  background: transparent; color: var(--tekst-2); cursor: pointer; font-size: 14px; font-weight: 700;
}
.chips button[aria-pressed="true"] { background: var(--vlak-3); color: var(--tekst); border-color: var(--tekst-3); }
.chips button[data-disc][aria-pressed="true"] { border-color: var(--dkleur); color: var(--dkleur); background: color-mix(in srgb, var(--dkleur) 14%, transparent); }

/* ---------------------------------------------------------- disciplinekleuren */

.d-zwemmen { --dkleur: var(--zwemmen); }
.d-fietsen { --dkleur: var(--fietsen); }
.d-lopen { --dkleur: var(--lopen); }
.d-brick { --dkleur: var(--brick); }
.d-kracht { --dkleur: var(--kracht); }
.d-overig { --dkleur: var(--overig); }
.dkleur { color: var(--dkleur); }

/* ---------------------------------------------------------- het aftellen en het fasebalkje */

.aftellen { padding: 8px 0 6px; }
.aftellen .getal {
  font-family: var(--cijfer); font-weight: 700; font-size: 96px; line-height: .86; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.aftellen .onder { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.aftellen .naam { font-weight: 700; }

.fasebalk { margin: 18px 0 6px; }
.fasebalk .weken { display: flex; gap: 2px; height: 30px; align-items: flex-end; }
.fasebalk .wk { flex: 1; border-radius: 3px 3px 0 0; min-width: 3px; position: relative; }
.fasebalk .wk.basis { background: var(--fase-basis); }
.fasebalk .wk.opbouw { background: var(--fase-opbouw); }
.fasebalk .wk.piek { background: var(--fase-piek); }
.fasebalk .wk.taper { background: var(--fase-taper); }
.fasebalk .wk.race { background: var(--fase-race); }
.fasebalk .wk.herstel { opacity: .45; }
.fasebalk .wk.voorbij { filter: saturate(.3); opacity: .35; }
.fasebalk .wk.nu { outline: 2px solid var(--tekst); outline-offset: 2px; }
.fasebalk .labels { display: flex; margin-top: 6px; font-size: 12px; color: var(--tekst-3); }
.fasebalk .labels span { flex: none; overflow: hidden; white-space: nowrap; text-overflow: clip; }

/* ---------------------------------------------------------- kernwaarden */

.waarden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lijn); border-radius: var(--r); overflow: hidden; }
.waarde { background: var(--vlak); padding: 12px 12px 10px; }
.waarde .w { font-family: var(--cijfer); font-weight: 600; font-size: clamp(24px, 7.6vw, 36px); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.waarde .l { font-size: 13px; color: var(--tekst-2); margin-top: 4px; }
.waarde .w.goed { color: var(--goed); }
.waarde .w.klein-w { font-size: 22px; line-height: 1.2; }
.waarde .w.let { color: var(--let); }
.waarde .w.fout { color: var(--fout); }

/* ---------------------------------------------------------- sessies */

.sessies { list-style: none; margin: 0; padding: 0; }
.sessie {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 0 14px; align-items: stretch;
  padding: 12px 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: inherit; cursor: pointer;
}
.sessie:last-child { border-bottom: 0; }
.sessie .streep { background: var(--dkleur); border-radius: 2px; }
.sessie .midden { min-width: 0; }
.sessie .titel { font-weight: 700; line-height: 1.3; }
.sessie .onder { font-size: 14px; color: var(--tekst-2); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.sessie .rechts { text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.sessie .tijd { font-family: var(--cijfer); font-size: 24px; font-weight: 600; line-height: 1; }
.sessie .duur { font-family: var(--cijfer); font-size: 16px; color: var(--tekst-2); }
.sessie.gedaan .titel::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px;
  background: var(--goed); -webkit-mask: var(--vink) center/contain no-repeat; mask: var(--vink) center/contain no-repeat; }
.sessie.overgeslagen { opacity: .55; }
.sessie.overgeslagen .titel { text-decoration: line-through; }
:root { --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--vlak-3); color: var(--tekst-2); }
.label.fout { background: color-mix(in srgb, var(--fout) 18%, transparent); color: var(--fout); }
.label.let { background: color-mix(in srgb, var(--let) 18%, transparent); color: var(--let); }
.label.goed { background: color-mix(in srgb, var(--goed) 18%, transparent); color: var(--goed); }
.disc-icoon { width: 18px; height: 18px; color: var(--dkleur); flex: none; }

/* ---------------------------------------------------------- weekoverzicht in de planning */

.weekkop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.weekkop .week-titel { flex: 1; text-align: center; }
.weekkop .week-titel b { display: block; font-size: 18px; }
.weekdoel { margin: 8px 0 18px; }
.dag { margin-bottom: 18px; }
.dag-kop { display: flex; align-items: baseline; gap: 10px; padding-bottom: 4px; border-bottom: 1.5px solid var(--lijn); }
.dag-kop .dagnaam { font-weight: 700; text-transform: capitalize; }
.dag-kop .datum { color: var(--tekst-3); font-size: 14px; }
.dag-kop .ruimte { margin-left: auto; font-size: 13px; color: var(--tekst-3); }
.dag.vandaag .dag-kop { border-bottom-color: var(--tekst); }
.dag .leeg { color: var(--tekst-3); font-size: 14px; padding: 10px 0; }
.bezetlijn { position: relative; height: 6px; background: var(--vlak-2); border-radius: 3px; margin: 8px 0 2px; overflow: hidden; }
.bezetlijn i { position: absolute; top: 0; bottom: 0; background: var(--tekst-3); opacity: .55; }
.bezetlijn i.venster { background: transparent; border-left: 2px solid var(--tekst-2); border-right: 2px solid var(--tekst-2); opacity: .7; }
.bezetlijn i.s-zwemmen { background: var(--zwemmen); opacity: 1; }
.bezetlijn i.s-fietsen { background: var(--fietsen); opacity: 1; }
.bezetlijn i.s-lopen { background: var(--lopen); opacity: 1; }
.bezetlijn i.s-brick, .bezetlijn i.s-kracht { background: var(--brick); opacity: 1; }

/* Voortgangsbalken */
.balk { height: 8px; border-radius: 4px; background: var(--vlak-3); overflow: hidden; position: relative; }
.balk > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dkleur, var(--krijt)); border-radius: 4px; }
.balk > i.doel { background: transparent; border-right: 2px solid var(--tekst); border-radius: 0; }
.balk.over > i { background: var(--let); }
.volume { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px 10px; }
.volume .cijfer { font-size: 18px; text-align: right; min-width: 92px; }
.volume .cijfer small { color: var(--tekst-3); font-size: 14px; }

/* ---------------------------------------------------------- lijsten en panelen */

.paneel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 14px 16px; }
.paneel + .paneel { margin-top: 12px; }
.rijen { list-style: none; margin: 0; padding: 0; }
.rijen > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.rijen > li:last-child { border-bottom: 0; }
.rijen .groei { flex: 1; min-width: 0; }
.rijen a.rij-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; width: 100%; min-height: 32px; }
.rijen .pijl { color: var(--tekst-3); width: 18px; height: 18px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabel th { text-align: left; font-weight: 400; color: var(--tekst-3); font-size: 13px; padding: 6px 8px 6px 0; }
.tabel td { padding: 8px 8px 8px 0; border-top: 1px solid var(--lijn); vertical-align: top; }
.tabel td.r, .tabel th.r { text-align: right; padding-right: 0; }

.melding { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--vlak-2); margin-bottom: 10px; border-left: 3px solid var(--let); }
.melding.fout { border-left-color: var(--fout); }
.melding.goed { border-left-color: var(--goed); }
.melding .groei { flex: 1; }

.leeg-staat { text-align: center; padding: 36px 12px; color: var(--tekst-2); }
.leeg-staat h3 { color: var(--tekst); margin-bottom: 8px; }
.leeg-staat .knop { margin-top: 10px; }

.segmenten { display: flex; background: var(--vlak-2); border-radius: 999px; padding: 3px; gap: 3px; margin-bottom: 16px; overflow-x: auto; }
.segmenten button { flex: 1; min-height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--tekst-2); font-weight: 700; font-size: 14px; cursor: pointer; padding: 0 12px; white-space: nowrap; }
.segmenten button[aria-pressed="true"] { background: var(--vlak-3); color: var(--tekst); }

/* ---------------------------------------------------------- grafieken */

.grafiek { position: relative; height: 220px; }
.grafiek.laag { height: 140px; }
.grafiek.hoog { height: 280px; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--tekst-2); margin-top: 8px; }
.legenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--k, var(--tekst-2)); }

/* ---------------------------------------------------------- voeding */

.ring-rij { display: flex; align-items: center; gap: 18px; }
.ring { width: 112px; height: 112px; flex: none; }
.ring circle { fill: none; stroke-width: 10; }
.ring .achter { stroke: var(--vlak-3); }
.ring .voor { stroke: var(--krijt); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring .voor.over { stroke: var(--let); }
.ring text { fill: var(--tekst); font-family: var(--cijfer); font-weight: 600; }
.macro { display: grid; grid-template-columns: 90px 1fr auto; gap: 6px 10px; align-items: center; font-size: 14px; }
.macro .cijfer { font-size: 16px; text-align: right; }
.log-moment { font-weight: 700; margin: 14px 0 2px; color: var(--tekst-2); font-size: 14px; }

/* ---------------------------------------------------------- vel (dialoog onderaan) */

dialog.vel {
  border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh;
  background: var(--vlak); color: var(--tekst); border-radius: var(--r-groot) var(--r-groot) 0 0;
  overflow: hidden; display: flex; flex-direction: column;
}
dialog.vel:not([open]) { display: none; }
dialog.vel::backdrop { background: rgb(0 0 0 / .55); }
dialog.vel[open] { animation: omhoog .22s ease-out; }
@keyframes omhoog { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.vel-kop { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px 18px; border-bottom: 1px solid var(--lijn); }
.vel-kop h2 { flex: 1; font-size: 19px; }
.vel-inhoud { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
@media (min-width: 720px) {
  dialog.vel { margin: auto; max-width: 560px; border-radius: var(--r-groot); max-height: 86dvh; }
}

.beschrijving { white-space: pre-line; line-height: 1.55; }

/* ---------------------------------------------------------- toast */

.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-hoogte) + env(safe-area-inset-bottom) + 12px); z-index: 60; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; background: var(--krijt); color: var(--op-krijt); padding: 11px 16px; border-radius: 12px; font-weight: 700; font-size: 15px; max-width: 560px; box-shadow: 0 8px 30px rgb(0 0 0 / .35); }
.toast.fout { background: var(--fout); color: #fff; }

/* ---------------------------------------------------------- inloggen */

.inlog { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.inlog-binnen { width: 100%; max-width: 360px; text-align: center; }
.inlog .merk { width: 72px; height: 72px; margin: 0 auto 18px; }
.merk circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.merk .m1 { stroke: var(--zwemmen); } .merk .m2 { stroke: var(--fietsen); } .merk .m3 { stroke: var(--lopen); }
.inlog h1 { font-size: 24px; margin-bottom: 6px; }
.pin-stippen { display: flex; justify-content: center; gap: 14px; margin: 26px 0 8px; }
.pin-stippen i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tekst-3); }
.pin-stippen i.vol { background: var(--tekst); border-color: var(--tekst); }
.pin-stippen.schud { animation: schud .35s; }
@keyframes schud { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px auto 0; max-width: 300px; }
.pinpad button {
  height: 68px; border-radius: 999px; border: 0; background: var(--vlak-2); color: var(--tekst);
  font-family: var(--cijfer); font-size: 32px; font-weight: 600; cursor: pointer;
}
.pinpad button:active { background: var(--vlak-3); }
.pinpad button.leeg { background: transparent; }
.pinpad button.stil { background: transparent; font-family: var(--tekstfont); font-size: 15px; color: var(--tekst-2); }
.inlog .fout-tekst { color: var(--fout); min-height: 24px; font-size: 15px; }
.inlog form { text-align: left; margin-top: 18px; }

/* ---------------------------------------------------------- scanner */

.scanner { position: relative; border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .kader { position: absolute; inset: 28% 12%; border: 2px solid rgb(255 255 255 / .85); border-radius: 12px; }

/* ---------------------------------------------------------- breed scherm */

@media (min-width: 960px) {
  :root { --breedte: 1040px; }
  .twee-kolommen { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 40px; align-items: start; }
  .aftellen .getal { font-size: 128px; }
}

.laden { padding: 40px 0; text-align: center; color: var(--tekst-3); }
.scheiding { height: 1px; background: var(--lijn); margin: 18px 0; }
.rechts { margin-left: auto; }
.uitklap summary { cursor: pointer; color: var(--tekst-2); font-weight: 700; min-height: 40px; display: flex; align-items: center; }

.rij-link.knop-stil { text-align: left; justify-content: flex-start; padding: 0; min-height: 44px; font-weight: 400; color: var(--tekst); white-space: normal; }
a.waarde { text-decoration: none; color: inherit; }
a.waarde[aria-current="true"] { background: var(--vlak-3); }
.paneel.uit { opacity: .6; }
tr.stil td { color: var(--tekst-3); }
tr.nu td { background: var(--vlak-2); }
.ring .ring-l { fill: var(--tekst-3); font-family: var(--tekstfont); font-weight: 400; }
.groei { flex: 1; min-width: 0; }
.tabel .knop-stil { min-height: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.tabel td.cijfer, .tabel .cijfer { font-size: 16px; }