/* HockeyCoach — crème-thema (visueel herontwerp).
   Rustige crème look, lokaal font/systemfallback, vette pastel-cards, dikke tikbare knoppen. */
:root {
  --groen: #15623A;
  --groen-tekst: #15623A;   /* als tekst; op donker wordt dit lichter */
  --groen-donker: #0f4f2e;
  --groen-licht: #CBE3D1;
  --oranje: #E96A3C;        /* live — vlakken en randen */
  --oranje-tekst: #B4441C;  /* 4,9:1 op crème — oranje als tekst, niet als vlak */
  --rood: #C0573A;          /* destructief — vlakken */
  --rood-tekst: #A33F24;    /* 5,7:1 op crème — destructief als tekst */
  --geel: #FFF1AA;          /* rugnummers / kaart geel */
  --blauw: #2F6FD0;         /* tegenstander */
  /* pastels (home-tegels / accenten) */
  --lila: #D9D3F6;
  --roze: #F7D0E1;
  --lucht: #C6DCEC;
  --salie: #CBE3D1;
  --geeltegel: #FFF1AA;

  --bg: #F4F1E9;            /* schermachtergrond, crème */
  --kaart: #FFFFFF;
  --inkt: #1A1712;
  --inkt-zacht: #56524A;
  --inkt-zachter: #6C6759;  /* 5,0:1 op crème, 4,7:1 op --rand-zacht — was #8C8578 (3,2:1) */
  --placeholder: #6E695C;   /* 4,5:1 op --rand-zacht — placeholders dragen invulhulp, dus echte tekst */
  --rand: #E6E1D6;
  --rand-zacht: #EDE9DF;
  --veld: #15623A;

  --schaduw: 0 1px 0 rgba(0,0,0,.03);
  --schaduw-op: 0 1px 0 rgba(0,0,0,.03), 0 16px 30px -22px rgba(0,0,0,.22);
  --schaduw-klein: 0 2px 6px rgba(0,0,0,.06);
  --schaduw-zwevend: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px -2px rgba(0,0,0,.14);
  --schaduw-zwevend-in: 0 1px 3px rgba(0,0,0,.09);

  --radius: 26px;
  --radius-knop: 18px;
  --radius-control: 14px;
  --tikbaar: 60px;

  /* Vaste typografische schaal voor alle gewone interface-tekst. */
  --tekst-titel: 22px;
  --tekst-subtitel: 16px;
  --tekst-nadruk: 14px;
  --tekst-klein: 12px;
}
/* Veldmodus: voor fel zonlicht langs de lijn. Geen sfeer maar leesbaarheid —
   maximaal luminantieverschil, dikkere randen, grotere cijfers en ruimere
   tikdoelen voor koude of natte handen. De crème-look verdwijnt bewust: op een
   zonnig veld is elke tint verlies. */
html[data-thema="veld"] {
  --bg: #FFFFFF;
  --kaart: #FFFFFF;
  --inkt: #000000;
  --inkt-zacht: #1F1F1F;
  --inkt-zachter: #333333;
  --placeholder: #4A4A4A;
  --rand: #000000;
  --rand-zacht: #E4E4E4;
  --groen: #0A4726;
  --groen-donker: #06331b;
  --groen-licht: #C7E2D0;
  --oranje-tekst: #8F2F0C;
  --rood-tekst: #8A2A12;
  --veld: #0A4726;
  --tikbaar: 68px;
  --schaduw: none;
  --schaduw-op: none;
  --schaduw-klein: none;
  --schaduw-zwevend: none;
  --schaduw-zwevend-in: none;
}
/* Randen dragen in veldmodus de structuur die de schaduwen normaal geven. */
html[data-thema="veld"] .kaart,
html[data-thema="veld"] .btn,
html[data-thema="veld"] .lijst-item { border: 2px solid var(--rand); }
html[data-thema="veld"] .klok-tijd { font-size: clamp(64px, 22vw, 104px); letter-spacing: 0; }
html[data-thema="veld"] .stand { font-size: clamp(34px, 11vw, 52px); }
html[data-thema="veld"] .live-dockbtn { min-height: var(--tikbaar); border: 2px solid var(--rand); font-size: var(--tekst-subtitel); }
html[data-thema="veld"] .bb-moment { min-height: 96px; font-size: var(--tekst-titel); border: 2px solid var(--rand); }
html[data-thema="veld"] .hoofdnav a { font-size: var(--tekst-klein); }
html[data-thema="veld"] .subtekst { color: var(--inkt-zacht); }

html[data-thema="donker"] {
  --groen-tekst: #7FC79B;   /* 8,4:1 op de donkere kaart — #15623A haalde 2,3:1 */
  --bg: #16140F;
  --kaart: #211d16;
  --inkt: #F4F1E9;
  --inkt-zacht: #cfc7b6;
  --inkt-zachter: #9a917f;
  --placeholder: #948B77;   /* 5,5:1 op donker — was #7d7563 (4,0:1) */
  --oranje-tekst: #E96A3C;  /* op donker haalt het accent zelf 5,8:1 */
  --rood-tekst: #E0876A;    /* op donker haalt een lichter rood ruim 4,5:1 */
  --rand: #332d22;
  --rand-zacht: #2a2519;
  --groen-licht: #21402b;
  --schaduw-zwevend: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px -2px rgba(0,0,0,.5);
  --schaduw-zwevend-in: 0 1px 3px rgba(0,0,0,.45);
  /* pastels gedimd: lichte inkt blijft leesbaar op de kleurtegels */
  --lila: #383150;
  --roze: #4a2f3d;
  --lucht: #27394a;
  --salie: #234230;
  --geeltegel: #FFF1AA;
  --schaduw: 0 1px 0 rgba(0,0,0,.3);
  --schaduw-op: 0 16px 30px -22px rgba(0,0,0,.6);
  --schaduw-klein: 0 2px 6px rgba(0,0,0,.4);
}
html[data-thema="donker"] .badge { color: #9fd4af; }

body.wereld-training {
  --wereld-op: #fff;
  --wereld: #4D7184;
  --wereld-licht: #D3E3EC;
  --wereld-zacht: #E9F1F5;
  --wereld-inkt: #1F3541;
}
body.wereld-tactiek {
  --wereld-op: #fff;
  --wereld: #587A58;
  --wereld-licht: #DFEDE0;
  --wereld-zacht: #F0F6F0;
  --wereld-inkt: #243D24;
}
body.wereld-wedstrijd {
  --wereld-op: #fff;
  --wereld: #A2604D;
  --wereld-licht: #F7DED4;
  --wereld-zacht: #FCEEEE;
  --wereld-inkt: #4A2A20;
}
body.wereld-analyse,
body.wereld-team {
  --wereld-op: #fff;
  --wereld: #8A6C2E;
  --wereld-licht: #F7E9C9;
  --wereld-zacht: #FCF6E6;
  --wereld-inkt: #453315;
}

/* Werelden in het donkere thema. Zonder deze blokken bleven --wereld-licht en
   --wereld-inkt hun lichte waarden houden: lichte inkt op een lichte tint gaf
   1,1:1 op de voorbereidingstegels. Tint en inkt wisselen hier van rol. */
html[data-thema="donker"] body.wereld-training {
  --wereld-op: #12202A;
  --wereld: #9FC4D6; --wereld-licht: #22323C; --wereld-zacht: #1B262D; --wereld-inkt: #BBD3E0;
}
html[data-thema="donker"] body.wereld-tactiek {
  --wereld-op: #14210F;
  --wereld: #A9CCA9; --wereld-licht: #253425; --wereld-zacht: #1D281D; --wereld-inkt: #C2DCC2;
}
html[data-thema="donker"] body.wereld-wedstrijd {
  --wereld-op: #2A140C;
  --wereld: #DFA994; --wereld-licht: #3A241D; --wereld-zacht: #2B1B16; --wereld-inkt: #EFC3B4;
}
html[data-thema="donker"] body.wereld-analyse,
html[data-thema="donker"] body.wereld-team {
  --wereld-op: #241A06;
  --wereld: #D2B573; --wereld-licht: #332813; --wereld-zacht: #261E0F; --wereld-inkt: #E6CE96;
}

body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) a:focus-visible,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) button:focus-visible,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) input:focus-visible,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) select:focus-visible,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) textarea:focus-visible,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .chip:focus-visible,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .tool:focus-visible {
  outline-color: color-mix(in srgb, var(--wereld) 72%, #fff);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--inkt);
  font-family: 'Hanken Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--tekst-nadruk);
  line-height: 1.45;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y: none;
}
.view { max-width: 760px; margin: 0 auto; padding: 12px 20px calc(76px + env(safe-area-inset-bottom)); }
.zonder-hoofdnav .view { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.view:focus { outline: none; }
@media (min-width: 900px) { .view { max-width: 980px; } }
.skiplink {
  position: fixed; left: 12px; top: 12px; z-index: 200; transform: translateY(-140%);
  background: var(--inkt); color: var(--bg); padding: 10px 14px; border-radius: 12px;
  font-weight: 800; text-decoration: none; box-shadow: var(--schaduw-klein);
}
.skiplink:focus { transform: translateY(0); }
.netstatus {
  position: fixed; left: 12px; right: 12px; top: calc(8px + env(safe-area-inset-top)); z-index: 80;
  max-width: 760px; margin: 0 auto; background: var(--inkt); color: var(--bg);
  border-radius: 14px; padding: 10px 14px; text-align: center; font-weight: 800;
  box-shadow: var(--schaduw-klein); font-size: var(--tekst-klein);
}
.netstatus[data-status="klaar"] { background: var(--groen); color: #fff; }
.netstatus[data-status="bezig"] { background: #355D70; color: #fff; }
.netstatus[data-status="aandacht"] { background: var(--oranje-tekst); color: #fff; }
.netstatus-actie { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Dunne voortgangsbalk bovenaan tijdens het renderen van een scherm.
   Zonder deze balk bleef het scherm bij trage netwerk-/IndexedDB-calls
   simpelweg leeg, wat als "app is stuk" voelde. */
.laadbalk {
  position: fixed; left: 0; right: 0; top: 0; z-index: 120;
  height: 3px; background: color-mix(in srgb, var(--groen) 22%, transparent);
  overflow: hidden; pointer-events: none;
}
.laadbalk::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: var(--groen); border-radius: 0 3px 3px 0;
  animation: laadbalk-loop 1.1s ease-in-out infinite;
}
.laadbalk[hidden] { display: none; }
@keyframes laadbalk-loop {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .laadbalk::after { animation: none; width: 100%; opacity: .55; }
}
.sw-updatebar {
  position: fixed; left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 100;
  max-width: 760px; margin: 0 auto; background: var(--inkt); color: var(--bg);
  border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.zonder-hoofdnav .sw-updatebar { bottom: calc(12px + env(safe-area-inset-bottom)); }
.sw-updatebar span { flex: 1; font-weight: 800; }
.sw-updatebar .btn { background: var(--groen); color: #fff; border: 0; box-shadow: none; }
@media (min-width: 900px) { .sw-updatebar { max-width: 980px; } }
.route-fout, .opstart-fout { border-left: 6px solid var(--oranje); }
.route-fout h1, .opstart-fout h1 { margin: 8px 0 8px; }
.route-fout .btn-stil { margin-top: 8px; color: var(--oranje-tekst); }

h1, h2, h3 { line-height: 1.06; margin: 0 0 .4em; letter-spacing: 0; }
h1 { font-size: var(--tekst-titel); font-weight: 800; letter-spacing: 0; }
h2 { font-size: var(--tekst-subtitel); font-weight: 800; letter-spacing: 0; }
h3 { font-size: var(--tekst-nadruk); font-weight: 800; }
p { margin: .3em 0; }
small { font-size: var(--tekst-klein); }
a { color: var(--groen); }
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.chip:focus-visible, .tool:focus-visible {
  outline: 3px solid #7EC99B;
  outline: 3px solid color-mix(in srgb, var(--groen) 72%, #fff);
  outline-offset: 3px;
}

/* Topbalk */
.topbalk { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; flex-wrap: wrap; }
.topbalk h1 { flex: 1; margin: 0; font-size: var(--tekst-titel); }
.terug {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-control); flex: none;
  background: var(--kaart); border: 0; box-shadow: var(--schaduw-zwevend);
  color: var(--inkt); text-decoration: none; font-size: 24px; font-weight: 800; line-height: 1;
  padding-bottom: 3px;
}
.topbalk .actie { flex: none; }
.topbalk .actie { display: flex; gap: 8px; align-items: center; }
.topbalk-zoek {
  width: clamp(190px, 22vw, 280px); height: 42px;
  display: flex; align-items: center; gap: 7px; padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--rand) 68%, transparent);
  border-radius: 21px;
  background: color-mix(in srgb, var(--kaart) 38%, var(--rand-zacht));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent), 0 1px 4px rgba(28, 24, 17, .05);
  color: var(--inkt-zachter);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.topbalk-zoek svg { width: 16px; height: 16px; flex: none; opacity: .78; }
.topbalk .topbalk-zoek input[type="search"] {
  width: 100%; min-width: 0; height: 38px; min-height: 38px; padding: 0; border: 0;
  border-radius: 0; background: transparent; box-shadow: none;
  font-size: var(--tekst-nadruk); font-weight: 600; line-height: 1;
  -webkit-appearance: none;
}
.topbalk .topbalk-zoek input[type="search"]:focus { outline: 0; }
.topbalk-zoek:focus-within {
  border-color: color-mix(in srgb, var(--wereld, var(--groen)) 52%, var(--rand));
  outline: 0;
  background: var(--kaart);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wereld, var(--groen)) 13%, transparent), 0 3px 10px rgba(28, 24, 17, .07);
}
@media (hover: hover) {
  .topbalk-zoek:hover {
    border-color: color-mix(in srgb, var(--inkt-zachter) 32%, var(--rand));
    background: color-mix(in srgb, var(--kaart) 62%, var(--rand-zacht));
  }
}
.overzicht-filterbalk { padding: 10px 16px; }
.overzicht-filterrij { display: flex; align-items: center; gap: 12px; min-width: 0; }
.overzicht-filterrij > .segment,
.overzicht-filterrij > .chips { flex: 1; min-width: 0; margin: 0; }
.overzicht-filterrij .segment,
.overzicht-filterrij .tactiekdashboard-chips { padding: 4px 0 8px; }
.overzicht-seizoen {
  flex: none; display: flex; align-items: center; gap: 7px;
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800;
}
.overzicht-seizoen select {
  width: auto; min-width: 96px; min-height: 44px; padding: 8px 28px 8px 11px;
  background: var(--rand-zacht); font-size: var(--tekst-klein);
}
@media (max-width: 699px) {
  .topbalk .actie:has(.topbalk-zoek) { flex: 1 0 100%; width: 100%; }
  .topbalk-zoek { flex: 1 1 auto; width: auto; min-width: 0; }
  .topbalk .topbalk-zoek input[type="search"] { font-size: var(--tekst-subtitel); }
  .topbalk .actie:has(.topbalk-zoek) > .btn { flex: none; white-space: nowrap; }
  .overzicht-filterrij { gap: 8px; }
  .overzicht-seizoen span { display: none; }
  .overzicht-seizoen select { min-width: 84px; }
}
.trainingscockpit h2 { margin: 8px 0 10px; }
.trainingfocus .an-kop { margin-bottom: 4px; }
.brontraining h2 { margin: 8px 0 4px; }
.brontraining .btn { margin-top: 10px; }
.veldplan h3 { margin: 14px 0 8px; }
.checklijst { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.checklijst li {
  position: relative; padding-left: 24px; color: var(--inkt-zacht); font-size: var(--tekst-klein); line-height: 1.35;
}
.checklijst li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--groen); font-weight: 900;
}

/* Home-kop */
.home-kop { display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 2px 4px; }
.home-datum { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 600; }
.home-team { font-size: var(--tekst-titel); font-weight: 800; letter-spacing: 0; margin: 4px 0 0; line-height: 1.05; }
.home-team-wissel {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0 0; margin: 0; cursor: pointer;
  color: var(--inkt); font: inherit; font-size: var(--tekst-titel); font-weight: 800;
  letter-spacing: 0; line-height: 1.05; text-align: left;
}
.home-team-wissel svg { color: var(--inkt-zachter); margin-top: 3px; flex: none; }
.home-team-wissel:active { opacity: .7; }
.team-kiezer { display: grid; gap: 8px; }
.team-kiezer-optie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--radius-control);
  border: 1px solid var(--rand); background: var(--kaart); color: var(--inkt);
  font-weight: 750; font-size: var(--tekst-nadruk); cursor: pointer; min-height: var(--tikbaar);
}
.team-kiezer-optie.actief { border-color: var(--groen); background: var(--groen-licht); }
.team-kiezer-actief { font-size: var(--tekst-klein); font-weight: 850; color: var(--groen-donker); flex: none; }
.demo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--geeltegel); color: #4a3d00; border-radius: var(--radius-control);
  padding: 12px 14px; margin: 0 0 14px; font-weight: 750; font-size: var(--tekst-klein);
}
.demo-banner .btn-klein { flex: none; }
.home-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #CBE3D1, #9FC7AB); border: 1px solid #bcd8c3;
  display: inline-flex; align-items: center; justify-content: center; color: var(--groen-donker); text-decoration: none;
}
.home-cockpit { display: grid; gap: 12px; margin: 10px 0 16px; }
/* Grid-items krimpen niet vanzelf; zonder dit rekt nowrap-tekst de kaart op. */
.home-cockpit > * { min-width: 0; }
.home-focus { margin-bottom: 0; }
.home-coachblok {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--kaart); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 16px 18px;
}
.home-coachblok h2 { margin: 8px 0 3px; }
.home-coachblok .btn { white-space: nowrap; }
.home-vervolgkop {
  margin: 12px 2px 8px; color: var(--inkt-zachter); font-size: var(--tekst-klein);
  font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.home-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-status a, .home-signalen a {
  min-height: 72px; border-radius: 18px; background: var(--kaart); color: var(--inkt);
  box-shadow: var(--schaduw); text-decoration: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; padding: 9px 6px;
}
.home-status b, .home-signalen b { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.home-status span, .home-signalen span { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; text-align: center; line-height: 1.1; }
.home-signalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-signalen a { min-height: 62px; background: var(--rand-zacht); }
.home-signalen b { font-size: 20px; color: var(--groen); }
.home-strip {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px;
  border-radius: 18px; background: var(--kaart); color: var(--inkt); text-decoration: none; box-shadow: var(--schaduw);
}
.home-strip svg { width: 24px; height: 24px; flex: none; color: var(--groen); }
.home-strip span { display: flex; flex-direction: column; min-width: 0; }
.home-strip b { font-weight: 800; line-height: 1.1; }
.home-strip small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-week { margin-bottom: 0; }
.home-week .an-kop { margin-bottom: 10px; }
.home-weeklijst { display: grid; gap: 8px; }
.home-weekitem {
  min-width: 0; min-height: 58px; border-radius: 16px; background: var(--bg); color: var(--inkt);
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none;
}
.home-weekitem.is-readonly { cursor: default; }
.home-weekitem.has-cta { padding-right: 8px; }
.home-weekitem.is-nazorg { background: rgba(226, 120, 61, .14); }
.home-weekitem.is-nazorg .home-weekdag { background: rgba(255,255,255,.72); }
/* In het donkere thema blijft een wit vlak wit terwijl de inkt licht wordt.
   De datumchip volgt daarom de kaartkleur en de thema-inkt. */
html[data-thema="donker"] .home-weekdag,
html[data-thema="donker"] .home-weekitem.is-nazorg .home-weekdag { background: var(--kaart); }
html[data-thema="donker"] .home-weekdag small { color: var(--inkt-zacht); }
html[data-thema="donker"] .home-weekdag b { color: var(--inkt); }
.home-weekitem.is-nazorg .home-weekdag b { color: var(--oranje-tekst); }
.home-weekdag {
  flex: none; width: 70px; min-height: 40px; border-radius: 14px; background: var(--kaart);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 4px 6px; text-align: center;
}
.home-weekdag b { font-size: var(--tekst-klein); font-weight: 900; line-height: 1; color: var(--groen); }
.home-weekdag small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.1; }
.home-weektekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-weektekst b { font-size: var(--tekst-nadruk); font-weight: 850; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-weektekst small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-weekitem .pijl { flex: none; color: var(--inkt-zachter); font-size: 22px; line-height: 1; }
.home-weekactie {
  flex: none; min-height: 44px; border-radius: 14px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--groen); color: #fff; font-size: var(--tekst-klein); font-weight: 900;
  box-shadow: var(--schaduw-zwevend);
}
.home-acties { margin-bottom: 0; }
.home-acties .an-kop { margin-bottom: 10px; }
.home-acties .ontwikkelregels { grid-template-columns: 1fr; }
.home-acties .ontwikkelregel {
  min-height: 74px; align-items: center;
}
.home-acties .ontwikkelregel .rugnr-mini {
  width: 54px; font-size: var(--tekst-klein); text-transform: uppercase;
}
.home-dagcheck { margin-bottom: 0; }
.home-dagcheck .an-kop { margin-bottom: 12px; align-items: center; }
.dagcheck-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.dagcheck-grid a {
  min-height: 94px; border-radius: 16px; background: var(--bg); color: var(--inkt);
  text-decoration: none; padding: 11px 10px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.dagcheck-grid a.ok { background: var(--groen-licht); }
.dagcheck-grid span { color: var(--groen); font-size: var(--tekst-klein); font-weight: 900; text-transform: uppercase; }
.dagcheck-grid b { font-size: var(--tekst-klein); font-weight: 850; line-height: 1.1; }
.dagcheck-grid small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.18;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-seizoensfocus { margin-bottom: 0; }
.home-seizoensfocus .ontwikkelregels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-seizoensfocus .home-focusregel {
  min-height: 62px; align-items: center; padding: 12px 14px; gap: 8px;
}
.home-seizoensfocus .home-focusregel span:first-child { min-width: 0; }
.home-seizoensfocus .home-focusregel b {
  font-size: var(--tekst-klein); letter-spacing: .04em; text-transform: uppercase; color: rgba(26,23,18,.58);
}
.home-seizoensfocus .home-focusregel small {
  margin-top: 3px; font-size: var(--tekst-klein); line-height: 1.15; font-weight: 850;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--inkt);
}
.home-details { margin-bottom: 0; padding: 0; overflow: hidden; }
.home-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.home-details summary::-webkit-details-marker { display: none; }
.home-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; }
.home-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-details summary i {
  flex: none; min-width: 38px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein);
}
.home-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.home-details[open] summary::after { transform: rotate(-90deg); }
.home-overzicht .home-status,
.home-overzicht .home-signalen { margin: 0 14px 12px; }
.home-modules .home-sectie-kop,
.home-modules .tegels { margin-left: 0; margin-right: 0; }
.home-modules .tegels {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px;
}
.home-modules .tegels-compact .tegel {
  min-height: 72px; border-radius: 18px; padding: 11px 12px; gap: 8px;
}
.home-modules .tegel svg { width: 24px; height: 24px; }
.home-modules .tegel .t-titel { font-size: var(--tekst-klein); line-height: 1.05; }
.home-modules .tegels:last-child { margin-bottom: 0; }
.home-modules .home-sectie-kop:first-of-type { margin-top: 0; }
.home-details-inline {
  flex: 1 1 260px; background: var(--bg); border-radius: 18px;
}
.home-details-inline summary { min-height: 48px; padding: 8px 12px; }
.home-details-inline .startstappen { padding: 0 10px 10px; }
.startklaar { margin-bottom: 0; }
.startklaar-acties { align-items: stretch; margin-bottom: 0; }
.startklaar-acties > .btn { flex: 1 1 180px; }
.startstappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.startstappen a {
  min-height: 64px; border-radius: 16px; background: var(--bg); padding: 10px 11px;
  color: var(--inkt); text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.startstappen a.ok { background: var(--groen-licht); }
.startstappen b { font-size: var(--tekst-klein); font-weight: 800; }
.startstappen small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.15; }
.home-sectie-kop {
  margin: 18px 2px 10px; color: var(--inkt-zachter); font-size: var(--tekst-klein);
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.home-cat-training { color: #4D7184; }
.home-cat-tactiek { color: #587A58; }
.home-cat-wedstrijd { color: #A2604D; }
.home-cat-analyse { color: #8A6C2E; }

/* Kaarten */
.kaart {
  background: var(--kaart); border: 0; border-radius: var(--radius);
  box-shadow: var(--schaduw); padding: 18px 20px; margin-bottom: 14px;
}
.kaart h2 { margin-bottom: 10px; }
.kaart-klik { display: block; text-decoration: none; color: var(--inkt); cursor: pointer; }
.kaart-klik:active { transform: scale(.99); }
.subtekst { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 500; }

/* Knoppen */
button { font: inherit; cursor: pointer; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 17px; border-radius: var(--radius-knop); border: 0;
  background: var(--kaart); color: var(--inkt); font-weight: 800; font-size: var(--tekst-nadruk);
  text-decoration: none; box-shadow: var(--schaduw-zwevend);
}
.btn-primair { background: var(--groen); color: #fff; box-shadow: var(--schaduw-zwevend); }
.btn-live { background: var(--oranje); }
.btn-gevaar { background: var(--kaart); color: var(--rood-tekst); box-shadow: var(--schaduw-zwevend); }
.btn-stil { background: transparent; box-shadow: none; color: var(--groen); }
.btn-breed { width: 100%; }
.btn-klein { min-height: 44px; min-width: 44px; padding: 9px 15px; font-size: var(--tekst-klein); border-radius: var(--radius-control); }
.btn.actief { background: var(--groen); color: #fff; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.knoppenrij { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.knoppenrij .btn { flex: 1; }
/* Twee velden naast elkaar (bv. datum + tijd). Grid i.p.v. flex omdat
   iOS Safari de flex-gap bij native date/time-inputs soms weglaat; de
   grid-gutter wordt wél altijd gereserveerd. */
.veld-rij { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 12px; margin: 0 0 14px; }
.veld-rij > .veld { margin: 0; min-width: 0; }

/* Home-tegels */
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (min-width: 700px) { .tegels { grid-template-columns: repeat(3, 1fr); } }
.tegels-compact .tegel { min-height: 108px; }
.training-hubtegels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.training-hubtegels a[href="#/trainingen"] { display: none; }
.training-hubtegels .tegel {
  min-height: 72px; border-radius: 18px; padding: 11px 12px; gap: 8px; box-shadow: var(--schaduw-zwevend);
}
.training-hubtegels .tegel svg { width: 24px; height: 24px; }
.training-hubtegels .tegel svg { color: #4D7184; }
.training-hubtegels .tegel .t-titel { font-size: var(--tekst-klein); line-height: 1.05; }
@media (max-width: 699px) {
  /* Drie tegels naast elkaar, net als het tactiek-dashboard; 2+1 oogde rommelig. */
  .training-hubtegels .tegel { min-height: 64px; }
  .home-modules .tegels-compact .tegel { min-height: 64px; }
}
.tegel {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--kaart); border-radius: var(--radius); box-shadow: var(--schaduw-zwevend);
  padding: 17px 18px; min-height: 128px;
  color: var(--inkt); text-decoration: none; font-weight: 800; font-size: var(--tekst-subtitel); letter-spacing: 0; line-height: 1.04;
}
.tegel svg { width: 30px; height: 30px; }
.tegel .t-titel { white-space: pre-line; }
/* kleur-modifiers */
.t-groen { background: var(--groen); color: #fff; }
.t-geel { background: var(--geeltegel); color: #1A1712; }
.t-lila { background: var(--lila); }
.t-roze { background: var(--roze); }
.t-lucht { background: var(--lucht); }
.t-salie { background: var(--salie); }
.t-training-1 { background: #A8C5D6; color: #1F3541; }
.t-training-2 { background: #BDD6E3; color: #1F3541; }
.t-training-3 { background: #D3E3EC; color: #1F3541; }
.t-training-4 { background: #E9F1F5; color: #1F3541; }
.t-tactiek-1 { background: #B7D1B7; color: #243D24; }
.t-tactiek-2 { background: #CDE1CD; color: #243D24; }
.t-tactiek-3 { background: #DFEDE0; color: #243D24; }
.t-tactiek-4 { background: #F0F6F0; color: #243D24; }
/* Basisprincipes-scherm */
.basis-intro .badge { margin-bottom: 8px; }
.basis-intro .badge:only-child { margin-bottom: 0; }
.basis-blok { margin-top: 14px; }
.basis-blok h2 { margin: 0 0 10px; }
.basis-veld { margin-bottom: 8px; }
.basis-veld textarea { min-height: 88px; overflow: hidden; resize: none; }
.basis-leesveld { display: grid; gap: 6px; margin-bottom: 8px; }
.basis-leesveld > span { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 850; }
.basis-leesveld > p {
  min-height: 54px; margin: 0; border-radius: 12px; background: var(--rand-zacht); padding: 12px 13px;
  color: var(--inkt); font-weight: 700; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.basis-leesveld > p.is-leeg { color: var(--inkt-zachter); font-style: italic; font-weight: 650; }
.basis-situatie { margin-bottom: 18px; }
.basis-situatie:last-child { margin-bottom: 0; }
.basis-koppelrij:empty { display: none; }
.basis-koppelingen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 6px 0 8px; }
.basis-koppeling { position: relative; width: 96px; }
.basis-koppeling-mini { display: block; border-radius: 10px; overflow: hidden; background: var(--veld); }
.basis-koppeling-mini svg { display: block; width: 100%; height: auto; }
.basis-koppeling-naam { display: block; margin-top: 3px; font-size: var(--tekst-klein); font-weight: 700; line-height: 1.15; color: var(--inkt); overflow-wrap: anywhere; }
.basis-koppeling-weg {
  position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: var(--kaart); box-shadow: var(--schaduw-klein); color: var(--inkt-zachter); font-weight: 800; line-height: 1;
}
/* Safari-achtige, doorzichtige koppel-knop. Leeg = gelabeld "Tactiek koppelen"
   (duidelijk de eerste keer); daarna een subtiel plus-veld tussen de mini's. */
.basis-koppel-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 15px; margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--inkt) 12%, transparent);
  border-radius: 12px; background: color-mix(in srgb, var(--kaart) 50%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--inkt-zacht); font-weight: 700; font-size: var(--tekst-klein); box-shadow: none;
}
.basis-koppel-knop svg { width: 16px; height: 16px; }
.basis-koppel-knop:active { background: color-mix(in srgb, var(--kaart) 70%, transparent); }
/* "+"-tegel links vóór de mini's, even groot als een veld-tekening. */
.basis-koppel-plus {
  flex: 0 0 auto; width: 96px; aspect-ratio: 2 / 3; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed color-mix(in srgb, var(--inkt) 22%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--kaart) 45%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--inkt-zacht); box-shadow: none;
}
.basis-koppel-plus svg { width: 26px; height: 26px; }
/* Doel dit seizoen — kaart op Vandaag (link naar Basisprincipes) */
.home-doel { display: block; text-decoration: none; color: inherit; }
.home-doel .an-kop { align-items: center; margin-bottom: 8px; }
.home-doel-tekst {
  margin: 0; color: var(--inkt); font-weight: 650; line-height: 1.4; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.home-doel .pijl { color: var(--inkt-zachter); font-size: 20px; }
.t-wedstrijd-1 { background: #E8B7A6; color: #4A2A20; }
.t-wedstrijd-2 { background: #F2CDBF; color: #4A2A20; }
.t-wedstrijd-3 { background: #F7DED4; color: #4A2A20; }
.t-wedstrijd-4 { background: #FCEEEE; color: #4A2A20; }
.t-analyse-1 { background: #E6CE9A; color: #453315; }
.t-analyse-2 { background: #F0DBAF; color: #453315; }
.t-analyse-3 { background: #F7E9C9; color: #453315; }
.t-analyse-4 { background: #FCF6E6; color: #453315; }
.home-cat-training + .tegels .tegel svg { color: #4D7184; }
.home-cat-tactiek + .tegels .tegel svg { color: #587A58; }
.home-cat-wedstrijd + .tegels .tegel svg { color: #A2604D; }
.home-cat-analyse + .tegels .tegel svg { color: #8A6C2E; }
.tegel-accent { background: var(--groen); color: #fff; }

/* Formulieren */
label.veld { display: block; margin-bottom: 14px; font-weight: 700; font-size: var(--tekst-klein); color: var(--inkt-zacht); }
label.veld > span { display: block; margin-bottom: 7px; }
/* Schakelaar met uitleg: een aanvinkvak alleen zegt niets over de gevolgen. */
label.veld-schakel {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px;
  padding: 12px 14px; border-radius: var(--radius-control); background: var(--bg);
  font-size: var(--tekst-klein); color: var(--inkt-zacht); cursor: pointer;
}
label.veld-schakel input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--groen); }
label.veld-schakel b { display: block; color: var(--inkt); font-size: var(--tekst-klein); }
label.veld-schakel small { display: block; margin-top: 3px; line-height: 1.45; }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], select, textarea {
  width: 100%; min-width: 0; font: inherit; font-weight: 600; color: var(--inkt); background: var(--bg);
  border: 0; border-radius: var(--radius-control); padding: 13px 15px; min-height: 48px;
  font-size: var(--tekst-subtitel);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); font-weight: 500; }
textarea { min-height: 92px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--groen); outline-offset: 1px; }
.zoek { margin-bottom: 14px; background: var(--kaart); box-shadow: var(--schaduw); -webkit-appearance: none; }
.rol-readonly-input {
  color: var(--inkt-zacht);
  background: var(--bg);
}
.rol-readonly-root [data-role-restricted][hidden] { display: none !important; }

.segment { display: flex; background: var(--rand-zacht); border-radius: var(--radius-control); padding: 5px; gap: 4px; }
.segment button {
  flex: 1; border: 0; background: transparent; color: var(--inkt-zachter);
  border-radius: 10px; min-height: 44px; font-weight: 700; font-size: var(--tekst-klein);
}
.segment button.actief { background: var(--groen); color: #fff; }
/* Sterren-kwaliteit: bij muis-hover kleuren de ster + alles ervoor mee (preview).
   .preview wordt via JS gezet (betrouwbaarder dan de :hover ~ combinator). */
.segment-sterren button { font-size: 18px; transition: background .12s ease, color .12s ease; }
.segment-sterren button.preview { background: var(--groen-licht); color: var(--groen); }
.segment-status {
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.segment-status::-webkit-scrollbar { display: none; }
.segment-status button { flex: 0 0 auto; min-width: max-content; white-space: nowrap; scroll-snap-align: start; }
@media (max-width: 699px) {
  .segment-status {
    padding: 4px; gap: 3px;
  }
  .segment-status button {
    min-height: 44px; padding: 0 13px; font-size: var(--tekst-klein);
  }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 0; background: var(--kaart); color: var(--inkt); box-shadow: var(--schaduw-zwevend);
  border-radius: 999px; padding: 9px 15px; min-height: 44px; font-weight: 700; font-size: var(--tekst-klein);
}
.chip.actief { background: var(--groen); color: #fff; }
/* Chips die je los aan/uit zet (categorieën, categoriefilters) tonen een vinkje,
   zodat zichtbaar is dat er meerdere tegelijk aan mogen staan. */
.chip[aria-pressed="true"]::before { content: '✓'; margin-right: 6px; font-weight: 800; }
.filter-hint {
  margin: 0 0 2px; font-size: var(--tekst-klein);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px;
}
.filter-wis {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  border: 0; background: transparent; color: var(--inkt-zachter);
  font: inherit; font-weight: 700; text-decoration: underline;
}
.chip-belasting {
  background: #FCEEEE;
  color: #8F3F2E;
  border: 1px solid #E8B7A6;
  box-shadow: 0 2px 10px rgba(162, 96, 77, .14);
}
.chip-belasting.actief {
  background: #F2CDBF !important;
  color: #4A2A20 !important;
}
.chip-nieuw { background: transparent; box-shadow: none; border: 1.5px dashed var(--rand); color: var(--inkt-zachter); font-weight: 800; min-width: 46px; }
.afwezig-redenen { margin-top: 12px; }
.afwezig-paneel {
  background: var(--bg); border: 1px solid var(--rand-zacht); border-radius: 16px; overflow: hidden;
}
.afwezig-paneel > summary {
  min-height: 54px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none;
}
.afwezig-paneel > summary::-webkit-details-marker { display: none; }
.afwezig-paneel > summary::after { content: '⌄'; color: var(--inkt-zachter); font-weight: 900; }
.afwezig-paneel[open] > summary::after { transform: rotate(180deg); }
.afwezig-paneel summary b { display: block; font-size: var(--tekst-klein); }
.afwezig-paneel summary small { color: var(--inkt-zachter); font-weight: 700; }
.afwezig-lijst { display: grid; gap: 8px; padding: 0 12px 12px; }
.afwezig-regel {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(120px, .62fr) minmax(120px, .62fr) minmax(170px, 1fr); gap: 8px; align-items: end;
  padding: 8px; background: var(--kaart); border: 1px solid var(--rand-zacht); border-radius: 12px;
}
.afwezig-speler { align-self: center; min-width: 0; }
.afwezig-speler b { display: block; font-size: var(--tekst-klein); }
.afwezig-speler small { display: block; color: var(--inkt-zachter); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afwezig-regel .veld { margin: 0; }
.afwezig-regel .veld span { font-size: var(--tekst-mini); }
.speler-afwezigheden { margin-top: 12px; grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .afwezig-regel { grid-template-columns: 1fr; align-items: stretch; }
  .afwezig-speler small { white-space: normal; }
}
.bibliotheek-filterbar .chips,
.tactiekdashboard-chips,
.training-filters .segment,
.wedstrijd-filters .segment,
.team-filterbar .segment,
.video-alle-momenten .chips,
#veld-filter .chips {
  background: transparent; border-radius: 0;
  /* verticale ruimte zodat overflow-x de zwevende schaduw niet afsnijdt */
  padding: 4px 0 13px; gap: 10px; box-shadow: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.training-filters .segment::-webkit-scrollbar,
.wedstrijd-filters .segment::-webkit-scrollbar,
.team-filterbar .segment::-webkit-scrollbar { display: none; }
.bibliotheek-filterbar .chip,
.tactiekdashboard-chips .chip,
.training-filters .segment button,
.wedstrijd-filters .segment button,
.team-filterbar .segment button,
.video-alle-momenten .chip,
#veld-filter .chip {
  flex: 0 0 auto;
  background: var(--kaart); color: var(--inkt);
  box-shadow: var(--schaduw-zwevend);
  border-radius: 999px; border: 0; min-height: 44px; padding: 8px 15px; font-size: var(--tekst-klein);
}
.bibliotheek-filterbar .chip.actief,
.tactiekdashboard-chips .chip.actief,
.training-filters .segment button.actief,
.wedstrijd-filters .segment button.actief,
.team-filterbar .segment button.actief,
.video-alle-momenten .chip.actief,
#veld-filter .chip.actief {
  background: var(--groen); color: #fff;
}
.bibliotheek-filterbar .chip-nieuw,
.tactiekdashboard-chips .chip-nieuw {
  background: transparent; border: 1.5px dashed var(--rand); color: var(--inkt-zachter);
  box-shadow: none;
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .btn-primair,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .btn.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .segment button.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .chip.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .bibliotheek-filterbar .chip.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .tactiekdashboard-chips .chip.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .training-filters .segment button.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .wedstrijd-filters .segment button.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .team-filterbar .segment button.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .video-alle-momenten .chip.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) #veld-filter .chip.actief,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .tool.actief {
  background: var(--wereld);
  color: var(--wereld-op);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .btn-stil,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .video-whatsapp,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .s2-clip-wa,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .s2-team-wa {
  color: var(--wereld);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .segment-sterren button.preview {
  background: var(--wereld-licht);
  color: var(--wereld-inkt);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .badge:not(.badge-grijs) {
  background: var(--wereld-licht);
  /* --wereld haalt als tekst maar 3,8-4,1:1 op deze tint; --wereld-inkt 9,8:1.
     De tint draagt de kleur al, de letters hoeven dat niet ook te doen. */
  color: var(--wereld-inkt);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) input:focus,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) select:focus,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) textarea:focus {
  outline-color: var(--wereld);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .prep-grid span.ok,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .prep-grid button.ok,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .trainingcheck .prep-grid span.ok,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .trainingcheck .prep-grid button.ok,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .training-opvolging .prep-grid button.ok,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .training-details summary i,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .setup-details summary i,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .speler-details summary i,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .video-details summary i,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .analyse-details summary i,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .bespreek-details summary i,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .ontwikkelregel .rugnr-mini {
  background: var(--wereld-licht);
  /* Was --wereld: 3,8-4,1:1 op deze tint. Zes soorten tellers tegelijk. */
  color: var(--wereld-inkt);
}
/* Alles wat op --wereld-licht staat, hoort --wereld-inkt te gebruiken —
   ook de tekstkinderen, anders erven ze --inkt van het thema. */
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .prep-grid span.ok,
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .prep-grid button.ok {
  color: var(--wereld-inkt);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .setup-beschikbaarheidkop i {
  background: var(--wereld-licht);
  color: var(--wereld-inkt);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .team-verdieping summary i {
  display: none;
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .teamcoach {
  border-left-color: var(--wereld);
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .teamcoach.urgentie-hoog {
  border-left-color: #E8B7A6;
}
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .teamcoach.urgentie-middel {
  border-left-color: #FFF1AA;
}
body:is(.wereld-analyse, .wereld-team) .s2-pill button.aan,
body:is(.wereld-analyse, .wereld-team) .s2-tabs button.aan,
body:is(.wereld-analyse, .wereld-team) .s2-video-overzicht .chip.actief {
  background: var(--wereld);
  color: var(--wereld-op);
}
body:is(.wereld-analyse, .wereld-team) .s2-clip-wa,
body:is(.wereld-analyse, .wereld-team) .s2-team-wa {
  color: var(--wereld);
}

/* Inline icoon in knoppen/koppen */
.ico { display: inline-block; vertical-align: -0.15em; flex: none; }
.leeg .ico { color: var(--inkt-zachter); opacity: .7; margin-bottom: 4px; }

/* Home — compacte chip-rij onderaan (Spelers/Stopwatch/Archief) */
.home-chips { display: flex; gap: 10px; margin-top: 14px; }
.home-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--kaart); box-shadow: var(--schaduw-zwevend); border-radius: 18px; min-height: 64px;
  color: var(--inkt); text-decoration: none; font-weight: 700; font-size: var(--tekst-klein);
}
.home-chip svg { width: 22px; height: 22px; color: var(--inkt-zacht); }

/* Lijsten */
.lijst { display: flex; flex-direction: column; gap: 10px; }
.lijst.overzicht-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: 12px;
}
.lijst.overzicht-grid > .leeg,
.lijst.overzicht-grid > .leeg-start { grid-column: 1 / -1; }
.lijst.overzicht-grid .lijst-item {
  align-items: flex-start; min-height: 82px; height: 100%; border-radius: 18px;
}
.lijst.overzicht-grid .lijst-item .hoofd b { font-size: var(--tekst-nadruk); font-weight: 900; }
.lijst.overzicht-grid .lijst-item .hoofd .subtekst { font-size: var(--tekst-klein); line-height: 1.35; }
.lijst-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--kaart); border: 0; border-radius: 20px; box-shadow: var(--schaduw);
  padding: 11px 16px; min-height: 66px; color: var(--inkt); text-decoration: none;
}
.lijst-item .hoofd { flex: 1; min-width: 0; }
.lijst-item .hoofd b { display: block; font-size: var(--tekst-subtitel); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overzicht-pijl {
  flex: none; display: grid; place-items: center; width: 28px; min-height: 36px;
  color: var(--inkt-zachter); font-size: 24px; font-weight: 800; line-height: 1;
  text-decoration: none; background: transparent; border: 0;
}
/* Training- en wedstrijdlijsten volgen de compactere balans van het
   tactiek-dashboard (14px titel), zodat de drie dashboards op één lijn liggen. */
body.wereld-training .lijst-item .hoofd b,
body.wereld-wedstrijd .lijst-item .hoofd b { font-size: var(--tekst-nadruk); font-weight: 900; }
body.wereld-training .lijst-item .hoofd .subtekst,
body.wereld-wedstrijd .lijst-item .hoofd .subtekst { font-size: var(--tekst-klein); }
@media (max-width: 1150px) {
  .lijst.overzicht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .lijst.overzicht-grid { grid-template-columns: 1fr; }
}
/* Statusbadges onder de titel: in de nowrap-titel vielen ze op mobiel weg. */
.wedstrijd-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rugnr {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: var(--tekst-subtitel);
  background: var(--geel); color: #1A1712;
}

/* Fluiten en rijden zijn twee verschillende afspraken. Met één kleur voor
   allebei moest je de letter in het rondje lezen om te weten wat er van je
   wordt verwacht; nu zie je het aan de kleur en bevestigt de letter het.
   Dubbele klasse zodat de kleur wint van .rugnr, ongeacht de volgorde. */
.rugnr.dagrol-f { background: var(--lila); color: #241E42; }
.rugnr.dagrol-r { background: var(--lucht); color: #10314A; }
/* In het donkere thema worden --lila en --lucht juist donker, dus draait de
   tekstkleur mee. */
html[data-thema="donker"] .rugnr.dagrol-f,
html[data-thema="donker"] .rugnr.dagrol-r { color: var(--inkt); }

/* Live wedstrijdscherm */
.klok-kaart { text-align: center; padding: 18px 18px 20px; box-shadow: var(--schaduw-op); border-radius: 28px; }
.klok-tijd { font-size: 62px; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1; }
.klok-sub { color: var(--inkt-zachter); font-weight: 600; font-size: var(--tekst-klein); }
.stopwatch-filterbar { padding: 12px 16px 14px; }
.stopwatch-filterkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.stopwatch-filterkop h2 { margin: 0; font-size: var(--tekst-subtitel); line-height: 1.1; }
.stopwatch-presets {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
}
.stopwatch-presets[hidden] { display: none; }
.stopwatch-presets .btn { width: 100%; min-height: 44px; }
.stopwatch-presets .stopwatch-bijsturen {
  min-height: 44px; background: var(--bg); color: var(--inkt-zacht); box-shadow: none;
}
@media (max-width: 560px) {
  .stopwatch-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.score-rij { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 2px; }
.score-rij .stand { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-rij .ploeg { font-size: var(--tekst-klein); font-weight: 700; color: var(--inkt-zacht); max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-cockpitdetails,
.live-logdetails,
.live-beheerdetails { padding: 0; overflow: hidden; }
.live-cockpitdetails summary,
.live-logdetails summary,
.live-beheerdetails summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.live-cockpitdetails summary::-webkit-details-marker,
.live-logdetails summary::-webkit-details-marker,
.live-beheerdetails summary::-webkit-details-marker { display: none; }
.live-cockpitdetails summary > span,
.live-logdetails summary > span,
.live-beheerdetails summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.live-cockpitdetails summary b,
.live-logdetails summary b,
.live-beheerdetails summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.live-cockpitdetails summary small,
.live-logdetails summary small,
.live-beheerdetails summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.live-cockpitdetails summary i,
.live-logdetails summary i,
.live-beheerdetails summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.live-cockpitdetails summary::after,
.live-logdetails summary::after,
.live-beheerdetails summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.live-cockpitdetails[open] summary::after,
.live-logdetails[open] summary::after,
.live-beheerdetails[open] summary::after { transform: rotate(-90deg); }
.live-cockpitdetails .live-cijfers,
.live-cockpitdetails .prep-grid,
.live-cockpitdetails .subtekst { margin-left: 16px; margin-right: 16px; }
.live-logdetails .btn-breed,
.live-logdetails .eventlijst,
.live-logdetails .an-kop { margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); }
.live-beheerdetails .btn-breed { margin: 0 16px 16px; width: calc(100% - 32px); }
.live-cockpitdetails > :last-child,
.live-logdetails > :last-child { margin-bottom: 16px; }
.live-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.live-cijfers span {
  min-height: 54px; border-radius: 16px; background: var(--bg); padding: 9px 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.live-cijfers b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.live-cijfers small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.15; }
.live-prep { margin-top: 8px; }
.live-waarschuwing {
  margin: 8px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.live-waarschuwing .subtekst { margin: 0; }
.live-waarschuwing .btn { flex: none; }
.live-details {
  margin-top: 10px; border-radius: 16px; background: var(--bg); padding: 0;
}
.live-details summary {
  min-height: 52px; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; cursor: pointer; font-weight: 850; color: var(--inkt);
}
.live-details summary::-webkit-details-marker { display: none; }
.live-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.live-details[open] summary::after { transform: rotate(-90deg); }
.live-details summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-details summary b {
  flex: none; min-width: 42px; min-height: 32px; border-radius: 999px; display: grid; place-items: center;
  background: var(--groen-licht); color: var(--groen); font-size: var(--tekst-klein);
}
.live-details .prep-grid { padding: 0 10px 10px; }
.live-logkaart { padding-top: 12px; }
.live-logkop { margin: 14px 0 8px; }
.live-logleeg { text-align: center; margin: 8px 0; }
.live-sheet-events {
  max-height: min(62vh, 540px); overflow-y: auto; padding-right: 2px;
}

.eventraster { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 11px 0; }
.bigbtn {
  min-height: 64px; border-radius: 18px; border: 0; font-weight: 800; font-size: var(--tekst-subtitel);
  color: #fff; box-shadow: var(--schaduw-zwevend); padding: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.bigbtn small { font-weight: 600; font-size: var(--tekst-klein); opacity: .85; }
.bb-voor { background: var(--groen); }
.bb-tegen { background: #E6E1D6; color: #6f6a5f; }
.bb-kaart { background: var(--geel); color: #1A1712; min-height: 58px; }
.bb-moment { background: var(--oranje); grid-column: 1 / -1; min-height: 54px; font-size: var(--tekst-subtitel); letter-spacing: 0; }
.live-moment { margin: 11px 0; }
.live-moment .bb-moment { width: 100%; min-height: 84px; font-size: var(--tekst-titel); }
.live-dockwrap {
  position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 35;
  background: rgba(244, 241, 233, .92); border-radius: 22px; padding: 8px;
  box-shadow: 0 -10px 28px rgba(0,0,0,.10); backdrop-filter: blur(12px);
  margin: 8px 0 12px; display: grid; gap: 8px;
}
html[data-thema="donker"] .live-dockwrap { background: rgba(22,20,15,.92); }
.live-dock {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.live-dockbtn {
  min-width: 0; min-height: 64px; border: 0; border-radius: 16px; background: var(--kaart);
  color: var(--inkt); box-shadow: var(--schaduw-klein); display: flex;
  align-items: center; justify-content: center; padding: 7px 4px;
}
.live-dockbtn b { font-size: var(--tekst-nadruk); font-weight: 800; line-height: 1; white-space: nowrap; }
.live-dockbtn small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.1; }
.live-dockbtn.positief { background: var(--groen); color: #fff; }
.live-dockbtn.positief small { color: rgba(255,255,255,.82); }
/* --rand is een randkleur, geen vlak: in veldmodus is hij zwart en werd deze
   knop zwart-op-zwart. --rand-zacht en --inkt-zacht werken in alle thema's. */
.live-dockbtn.negatief { background: var(--rand-zacht); color: var(--inkt-zacht); }
.live-dockbtn.kaartknop { background: var(--geel); color: #1A1712; }
.live-dockbtn.kaartknop small, .live-dockbtn.negatief small { color: rgba(26,23,18,.62); }
.live-last {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 48px; gap: 8px; margin: 0;
}
.live-last-main,
.live-last-wa,
.live-last-undo {
  min-width: 0; min-height: 48px; border: 0; border-radius: 15px; background: var(--kaart);
  color: var(--inkt); box-shadow: var(--schaduw-klein);
}
.live-last-main {
  text-align: left; padding: 7px 10px; display: grid; gap: 2px; align-content: center;
}
.live-last-label {
  font-size: var(--tekst-klein); font-weight: 900; color: var(--oranje-tekst); text-transform: uppercase;
}
.live-last-main b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--tekst-klein); line-height: 1.15;
}
.live-last-undo { font-size: 20px; font-weight: 900; }
.live-last-wa { font-size: var(--tekst-klein); font-weight: 900; color: var(--groen-tekst); }
.live-last-main:disabled,
.live-last-wa:disabled,
.live-last-undo:disabled { opacity: .58; }
.live-last.is-nieuw .live-last-main,
.live-last.is-nieuw .live-last-wa,
.live-last.is-nieuw .live-last-undo {
  background: var(--groen-licht);
  box-shadow: 0 0 0 2px rgba(24, 115, 70, .24), var(--schaduw-klein);
}
.fase-snelkaart .ontwikkelregels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fase-snelkaart .ontwikkelregel {
  min-height: 88px; align-items: flex-start; padding: 14px;
  box-shadow: var(--schaduw); background: var(--kaart);
}
.fase-snelkaart .ontwikkelregel b { font-size: var(--tekst-subtitel); }
.fase-snelkaart .ontwikkelregel small { color: rgba(26,23,18,.64); font-weight: 750; }
.fase-snelkaart .ontwikkelregel .rugnr-mini {
  background: rgba(255,255,255,.72); color: #1A1712; border-radius: 14px;
}
.fase-snelkaart .ontwikkelregel .pijl { color: rgba(26,23,18,.45); }
.fase-snelkaart .fase-salie { background: var(--salie); }
.fase-snelkaart .fase-lila { background: var(--lila); }
.fase-snelkaart .fase-lucht { background: var(--lucht); }
.fase-snelkaart .fase-roze { background: var(--roze); }
.fase-snelkaart .fase-geel { background: var(--geeltegel); }
.fase-snelkaart .fase-groen {
  background: var(--groen); color: #fff;
}
.fase-snelkaart .fase-groen small { color: rgba(255,255,255,.78); }
.fase-snelkaart .fase-groen .rugnr-mini { background: rgba(255,255,255,.18); color: #fff; }
.fase-snelkaart .fase-groen .pijl { color: rgba(255,255,255,.68); }
.fase-hubkaart .ontwikkelregel {
  min-height: 96px; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; gap: 9px;
}
.fase-hubkaart .ontwikkelregel .pijl,
.fase-hubkaart .ontwikkelregel small { display: none; }
.fase-hubkaart .ontwikkelregel b { font-size: var(--tekst-subtitel); line-height: 1.1; }
.fase-hubico {
  width: 36px; height: 36px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255,255,255,.42); color: #1A1712;
}
.fase-hubico .ico { width: 30px; height: 30px; }
html[data-thema="donker"] .fase-snelkaart .ontwikkelregel:not(.fase-groen) {
  background: color-mix(in srgb, var(--kaart) 70%, var(--groen-licht));
}
html[data-thema="donker"] .fase-snelkaart .ontwikkelregel small { color: var(--inkt-zacht); }
@media (max-width: 620px) {
  .fase-snelkaart .ontwikkelregels { grid-template-columns: 1fr; }
  .fase-hubkaart .ontwikkelregels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fase-hubkaart .ontwikkelregel { min-height: 92px; padding: 12px 8px; }
}
@media (max-width: 760px) {
  .live-cijfers { grid-template-columns: 1fr 1fr; }
  .live-dock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .live-dockbtn-kern { grid-column: span 2; }
  .live-dockbtn { min-height: 58px; }
  .live-dockbtn-kern { min-height: 64px; }
  .live-dockbtn b { font-size: var(--tekst-klein); }
}

.eventlijst { display: flex; flex-direction: column; gap: 7px; }
.eventregel {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  background: var(--bg); border: 0; border-radius: var(--radius-control); padding: 10px 13px;
  font-size: var(--tekst-nadruk); font-weight: 600; color: var(--inkt);
}
.eventregel .tijd { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--inkt-zachter); width: 78px; }
.eventregel .wat { flex: 1; min-width: 0; }
.eventregel .video { flex: none; font-size: var(--tekst-klein); color: var(--oranje-tekst); font-weight: 800; font-variant-numeric: tabular-nums; }
.video-regel .video-tijd { flex: none; width: 78px; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--groen); }
.video-regel .kopieer-hint { flex: none; margin-left: auto; color: var(--inkt-zachter); display: inline-flex; }
.video-deelregel { padding: 7px 8px 7px 13px; }
.video-regelknop {
  flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; text-align: left;
  font: inherit; padding: 5px 0; display: grid; gap: 2px;
}
.video-regelknop small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
.video-whatsapp { color: var(--groen); }
.video-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; margin-bottom: 10px;
}
.video-meta a { text-decoration: none; }
.video-cockpit h2 { margin: 8px 0 4px; }
.video-cockpit .knoppenrij { margin-top: 12px; }
.video-primaire-actie { margin-bottom: 0; }
.video-primaire-actie .btn { flex: 0 1 auto; }
.video-snelrij {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rand-zacht);
}
.video-snelrij .btn { min-height: 44px; margin: 0; width: 100%; }
.video-snelkeuzes {
  margin-top: 10px; border-top: 1px solid var(--rand-zacht); padding-top: 8px;
}
.video-snelkeuzes summary {
  list-style: none; min-height: 42px; display: flex; align-items: center; justify-content: space-between;
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 900; cursor: pointer;
}
.video-snelkeuzes summary::-webkit-details-marker { display: none; }
.video-snelkeuzes summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 22px; line-height: 1; transform: rotate(90deg);
}
.video-snelkeuzes[open] summary::after { transform: rotate(-90deg); }
.video-snelkeuzes .knoppenrij { margin: 4px 0 0; }
.video-details { padding: 0; overflow: hidden; }
.video-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.video-details summary::-webkit-details-marker { display: none; }
.video-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.video-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.video-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-details summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.video-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.video-details[open] summary::after { transform: rotate(-90deg); }
.video-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.video-details > :last-child { margin-bottom: 16px; }
.video-details .ontwikkelregels,
.video-details .eventlijst,
.video-details .chips { margin-left: 16px; margin-right: 16px; }
.video-details .chips { padding-bottom: 10px; }
.video-details .btn-breed { width: calc(100% - 32px); margin: 0 16px 12px; }
.coachadvies .an-kop { align-items: flex-start; gap: 10px; }
.ontwikkelkaart .an-kop, .speleractie .an-kop { gap: 10px; }
.speleractie .an-kop { align-items: flex-start; }
.speleractie h2 { margin: 6px 0 0; font-size: var(--tekst-subtitel); line-height: 1.18; }
.speleractie .knoppenrij { align-items: stretch; }
.speleractie .knoppenrij .btn { flex: 1 1 180px; }
.ontwikkelafspraak-focus .an-kop { align-items: flex-start; gap: 10px; }
.ontwikkelafspraak-focus h2 { margin: 5px 0 0; font-size: var(--tekst-subtitel); line-height: 1.16; overflow-wrap: anywhere; }
.ontwikkelafspraak-focus .subtekst { margin: 8px 0 0; }
.ontwikkel-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px;
}
.ontwikkel-meta div {
  min-width: 0; padding: 12px; border-radius: 16px; background: var(--bg);
}
.ontwikkel-meta b { display: block; margin-bottom: 4px; font-size: var(--tekst-klein); color: var(--inkt-zachter); }
.ontwikkel-meta span { display: block; font-weight: 850; line-height: 1.25; overflow-wrap: anywhere; }
.ontwikkel-aandacht { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ontwikkel-aandacht span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px;
  border-radius: 999px; background: var(--zand); color: var(--inkt-zacht); font-weight: 850; font-size: var(--tekst-klein);
}
.ontwikkel-besprekingen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); }
.ontwikkel-bespreekkop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.ontwikkel-bespreekkop b { font-size: var(--tekst-nadruk); }
.ontwikkel-bespreekkop span { color: var(--inkt-zachter); font-weight: 800; font-size: var(--tekst-klein); }
.ontwikkel-besprekingen .ontwikkelregels { margin-top: 0; }
.sheet-besprekingen { margin: 4px 0 12px; }
@media (max-width: 760px) { .ontwikkel-meta { grid-template-columns: 1fr; } }
.ontwikkelregels { display: grid; gap: 8px; margin-top: 10px; }
.ontwikkelregel {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--bg); border: 0; border-radius: 16px; padding: 10px 12px;
  color: var(--inkt); text-decoration: none; width: 100%; text-align: left; font: inherit; cursor: pointer;
}
.ontwikkelregel b { display: block; font-size: var(--tekst-nadruk); font-weight: 850; line-height: 1.15; }
.ontwikkelregel small {
  display: block; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700;
  line-height: 1.25; margin-top: 2px;
}
.ontwikkelregel .rugnr-mini {
  flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: var(--groen); color: #fff; font-weight: 900; font-size: var(--tekst-klein); font-variant-numeric: tabular-nums;
}
.ontwikkelregel .pijl { margin-left: auto; color: var(--inkt-zachter); font-size: 22px; line-height: 1; }
.video-focus .ontwikkelregel .rugnr-mini { width: 52px; font-size: var(--tekst-klein); }
.oefening-actie h2 { margin: 7px 0 4px; }
.oefening-acties { margin: 10px 0 0; }
.oefening-acties .btn { min-height: 44px; }
.oefening-item-acties { margin-top: 10px; align-items: stretch; }
.oefening-item-acties .btn { flex: 1 1 160px; }
.oefening-details { padding: 0; overflow: hidden; margin-bottom: 12px; }
.oefening-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.oefening-details summary::-webkit-details-marker { display: none; }
.oefening-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oefening-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.oefening-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oefening-details summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.oefening-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.oefening-details[open] summary::after { transform: rotate(-90deg); }
.oefening-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.oefening-details > :last-child { margin-bottom: 16px; }
.oefening-details .ontwikkelregels,
.oefening-details .chips,
.oefening-details .knoppenrij { margin-left: 16px; margin-right: 16px; }
.oefening-details .btn-breed { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
.oefening-details .miniatuur { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
.bibliotheek-kern {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 16px; box-shadow: var(--schaduw-klein);
}
.bibliotheek-kern h2 { margin: 5px 0 3px; font-size: var(--tekst-subtitel); line-height: 1.15; }
.bibliotheek-kern .subtekst {
  margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bibliotheek-kern .knoppenrij { margin: 0 !important; justify-content: flex-end; flex-wrap: nowrap; }
.bibliotheek-kern .btn { flex: 0 1 auto; min-height: 44px; }
@media (max-width: 560px) {
  .bibliotheek-kern { grid-template-columns: 1fr; }
  .bibliotheek-kern .knoppenrij { justify-content: stretch; }
  .bibliotheek-kern .btn { flex: 1 1 0; }
}
.bibliotheek-filterbar { padding: 12px 16px 14px; }
.bibliotheek-filterkop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bibliotheek-filterkop h2 { margin: 0; font-size: var(--tekst-subtitel); line-height: 1.1; }
.bibliotheek-filterbar .chips { margin-bottom: 12px; }
.bibliotheek-filterbar .zoek { margin-bottom: 0; background: var(--rand-zacht); box-shadow: none; }
details.bibliotheek-filterdetails .zoek { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; margin-bottom: 16px; }
details.bibliotheek-filterdetails .chips { margin-bottom: 12px; }
.tactiek-actie h2 { margin: 7px 0 4px; }
.tactiek-acties { margin: 10px 0 0; }
.tactiek-acties .btn { min-height: 44px; }
.corner-acties { margin-top: 8px; }
.corner-acties .btn { min-height: 44px; }
.tactiek-details, .corner-details { padding: 0; overflow: hidden; margin-bottom: 12px; }
.tactiek-details summary, .corner-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.tactiek-details summary::-webkit-details-marker, .corner-details summary::-webkit-details-marker { display: none; }
.tactiek-details summary > span, .corner-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tactiek-details summary b, .corner-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.tactiek-details summary small, .corner-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tactiek-details summary i, .corner-details summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.tactiek-details summary::after, .corner-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.tactiek-details[open] summary::after, .corner-details[open] summary::after { transform: rotate(-90deg); }
.tactiek-item summary::after,
.tactiek-item[open] summary::after,
.tactiekdashboard-preview summary::after,
.tactiekdashboard-preview[open] summary::after,
.corner-item summary::after,
.corner-item[open] summary::after,
.oefening-item summary::after,
.oefening-item[open] summary::after { transform: none; }
.tactiek-details > :not(summary), .corner-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.tactiek-details > :last-child, .corner-details > :last-child { margin-bottom: 16px; }
.tactiek-details .chips,
.tactiek-details .knoppenrij,
.corner-details .knoppenrij { margin-left: 16px; margin-right: 16px; }
.tactiek-details .btn-breed, .corner-details .btn-breed { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
.tactiek-details .miniatuur, .corner-details .miniatuur { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
.adviesgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 12px; }
.adviesgrid > div { background: var(--bg); border-radius: 18px; padding: 12px 13px; }
.adviesgrid h3 { margin-bottom: 8px; }
.adviesgrid p { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 650; margin: 0 0 8px; }
.adviesgrid p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .adviesgrid { grid-template-columns: 1fr; } }
.coachbesluit {
  border-left: 6px solid var(--groen);
}
.coachbesluit.urgentie-hoog { border-left-color: var(--oranje-tekst); }
.coachbesluit.urgentie-middel { border-left-color: var(--geel); }
.rapport-details { padding: 0; overflow: hidden; }
.rapport-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.rapport-details summary::-webkit-details-marker { display: none; }
.rapport-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rapport-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.rapport-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rapport-details summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.rapport-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.rapport-details[open] summary::after { transform: rotate(-90deg); }
.rapport-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.rapport-details > :last-child { margin-bottom: 16px; }
.rapport-details .statraster,
.rapport-details .adviesgrid,
.rapport-details .ontwikkelregels,
.rapport-details .eventlijst { margin-left: 16px; margin-right: 16px; }
.rapport-details table.simpel { margin: 0 16px 16px; width: calc(100% - 32px); }
.rapport-details .besprek-item { margin-left: 16px; margin-right: 16px; }
.rapport-kern h2 { margin: 7px 0 4px; }
.rapport-cockpit { padding: 16px 18px; }
.rapport-scorekop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.rapport-scorekop .klok-sub { text-align: right; }
.rapport-scorelijn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 10px; margin: 4px 0 10px;
}
.rapport-scorelijn .ploeg {
  color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 850;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rapport-scorelijn .ploeg:last-child { text-align: right; }
.rapport-scorelijn .stand {
  font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
}
.rapport-kwartstanden {
  margin: -2px 0 10px; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 430px) {
  .rapport-scorekop { align-items: flex-start; flex-direction: column; gap: 5px; }
  .rapport-scorekop .klok-sub { text-align: left; }
  .rapport-scorelijn { gap: 7px; }
  .rapport-scorelijn .stand { font-size: 26px; }
}
.rapport-primaire-actie { margin-bottom: 0; }
.rapport-primaire-actie .btn { flex: 0 1 auto; }
.rapport-snelrij {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
}
.rapport-snelrij a,
.rapport-snelrij button {
  min-height: 50px; border: 0; border-radius: 16px; background: var(--bg); color: var(--inkt);
  text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 9px 10px; text-align: left; font: inherit; cursor: pointer;
}
.rapport-snelrij b { font-size: var(--tekst-klein); font-weight: 900; line-height: 1.05; }
.rapport-snelrij small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rapport-snelkeuzes {
  margin-top: 10px; border-top: 1px solid var(--rand-zacht); padding-top: 8px;
}
.rapport-snelkeuzes summary {
  list-style: none; min-height: 42px; display: flex; align-items: center; justify-content: space-between;
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 900; cursor: pointer;
}
.rapport-snelkeuzes summary::-webkit-details-marker { display: none; }
.rapport-snelkeuzes summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 22px; line-height: 1; transform: rotate(90deg);
}
.rapport-snelkeuzes[open] summary::after { transform: rotate(-90deg); }
.rapport-snelkeuzes .knoppenrij { margin: 4px 0 0; }
.rapport-panel {
  background: var(--bg); border-radius: 18px; padding: 14px; margin-bottom: 12px;
}
.rapport-panel .adviesgrid,
.rapport-panel .ontwikkelregels { margin-left: 0; margin-right: 0; }
.rapport-panel .besluitgrid { margin-bottom: 0; }
.rapport-direct { padding: 16px; }
.rapport-direct > .rapport-panel { margin-left: 0; margin-right: 0; }
.rapport-direct > .rapport-vervolgdetails:last-child { margin-bottom: 0; }
.rapport-notities-direct,
.rapport-conclusie { padding: 16px; }
.rapport-notities-direct h2,
.rapport-conclusie h2 { margin: 5px 0 0; }
.rapport-notities-direct .veld:last-child { margin-bottom: 0; }
.rapport-conclusie > .an-kop { margin-bottom: 10px; }
.rapport-conclusie .rapport-subdetails { background: var(--bg); }
.rapport-trainingplan { margin-top: 8px; }
.rapport-snelrij-actie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .rapport-snelrij-actie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rapport-vervolgdetails { margin-top: 0; margin-bottom: 12px; }
.rapport-vervolgdetails > .rapport-panel { background: var(--kaart); }
.rapport-datahub > summary i { min-width: 64px; }
.rapport-dataacties {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px;
}
.rapport-dataacties .btn { width: 100%; min-height: 46px; }
.rapport-beheeracties {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}
.rapport-beheeracties .btn {
  min-height: 42px; box-shadow: var(--schaduw-klein);
}
@media (max-width: 560px) {
  .rapport-beheeracties { grid-template-columns: 1fr; }
}
.rapport-dataacties-secundair { margin-top: 4px; }
.rapport-subdetails {
  background: var(--bg); border-radius: 18px; margin-bottom: 12px;
}
.rapport-subdetails summary { min-height: 60px; }
.training-afrondknop { margin-top: 6px; }
.training-afronding .veld { margin-top: 12px; }
.trainingcheck-hoofd h2 { margin: 5px 0 0; }
.training-oefacties { align-items: stretch; }
.training-oefacties .btn { flex: 1 1 180px; }
.training-oefeningensectie { margin: 14px 0; }
.training-oefeningensectie > h2 { margin: 0 0 10px; }
.training-oefeningen-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: start;
}
.training-oefeningkaart { min-width: 0; padding: 0; margin: 0; overflow: hidden; }
.training-oefeningkop {
  min-height: 66px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  list-style: none; padding: 12px; cursor: pointer;
}
.training-oefeningkop::-webkit-details-marker { display: none; }
.training-oefeningkop::after { content: '›'; flex: none; color: var(--inkt-zachter); font-size: 24px; line-height: 1; }
.training-oefeningdetails[open] .training-oefeningkop::after { transform: none; }
.training-oefeningkop > span { min-width: 0; }
.training-oefeningkop h3 { margin: 0 0 3px; overflow-wrap: anywhere; }
.training-oefeningkop small { display: block; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
.training-oefeninginhoud { padding: 0 12px 12px; }
.training-oefeninguitleg {
  margin: 9px 0 0; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.training-oefeningkaart .miniatuur.training-oefeningveld {
  width: 100%; max-width: 190px; height: 140px; margin: 10px auto 0;
  display: grid; place-items: center; border-radius: 12px;
}
.training-oefeningveld svg { width: 100%; height: 100%; }
.training-oefeningacties, .training-oefeningbeheer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 0; }
.training-oefeningacties .btn, .training-oefeningbeheer .btn { min-width: 0; min-height: 40px; font-size: var(--tekst-klein); }
.training-oefeningduur { margin-top: 10px; }
@media (max-width: 1150px) {
  .training-oefeningen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .training-oefeningen-grid { grid-template-columns: 1fr; }
  .training-oefeningkaart .miniatuur.training-oefeningveld { max-width: 220px; }
}
.training-details { padding: 0; overflow: hidden; }
.training-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.training-details summary::-webkit-details-marker { display: none; }
.training-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.training-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.training-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.training-details summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.training-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.training-details[open] summary::after { transform: rotate(-90deg); }
.training-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.training-details > :last-child { margin-bottom: 16px; }
.training-gegevens .veld-rij { margin-top: 0; }
.training-details .ontwikkelregels { margin: 0 16px 16px; }
.training-details .checklijst,
.training-details h3,
.training-details p.subtekst { margin-left: 16px; margin-right: 16px; }
.training-details .knoppenrij { margin-left: 16px; margin-right: 16px; }
.trainingskern h2 { margin: 7px 0 4px; }
.trainingskern-acties { margin-bottom: 0; }
.trainingskern-acties .btn { flex: 0 1 auto; min-height: 44px; }
.training-verdieping #training-cockpit { margin-left: 0; margin-right: 0; }
.training-filters { padding: 10px 16px; }
.training-lijstdetails { padding: 0; background: transparent; box-shadow: none; }
.training-lijstkop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 16px 10px;
}
.training-lijstkop h2 { margin: 0; font-size: var(--tekst-subtitel); line-height: 1.1; }
.training-lijstdetails .lijst { margin: 0; gap: 8px; }
.trainingpanel {
  margin: 0 16px 14px; padding: 0 0 12px; border-bottom: 1px solid var(--rand-zacht);
}
.trainingpanel:last-of-type { border-bottom: 0; margin-bottom: 10px; }
.trainingpanel .home-signalen { margin-top: 4px; }
.trainingpanel .ontwikkelregels { margin-top: 8px; }
.lijst + .teamcoach { margin-top: 14px; }
.teamcoach {
  border-left: 6px solid var(--groen);
}
.teamcoach.urgentie-hoog { border-left-color: var(--oranje-tekst); }
.teamcoach.urgentie-middel { border-left-color: var(--geel); }
.teamcoach h2 { margin: 7px 0 0; }
.teamcoach-compact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 16px; box-shadow: var(--schaduw-klein);
}
.teamcoach-compact h2 { margin: 5px 0 4px; font-size: var(--tekst-subtitel); line-height: 1.15; }
.teamcoach-compact .knoppenrij { margin: 0; justify-content: flex-end; flex-wrap: wrap; }
.teamcoach-uitleg { margin-top: 5px; }
.teamcoach-uitleg summary {
  list-style: none; display: inline-flex; align-items: center; gap: 5px; color: var(--inkt-zachter);
  max-width: 100%; min-width: 0; font-size: var(--tekst-klein); font-weight: 900; cursor: pointer;
  overflow-wrap: anywhere;
}
.teamcoach-uitleg summary::-webkit-details-marker { display: none; }
.teamcoach-uitleg summary::after { content: none; }
.teamcoach-uitleg .subtekst { margin: 6px 0 0; max-width: 58ch; }
.team-verdieping .teampanel {
  margin: 0 16px 14px; padding: 0 0 12px; border-bottom: 1px solid var(--rand-zacht);
}
.team-verdieping .teampanel:last-child { border-bottom: 0; margin-bottom: 10px; }
.team-verdieping .home-signalen,
.team-verdieping .ontwikkelregels { margin-left: 0; margin-right: 0; }
.team-verdieping .subtekst { margin-left: 0; margin-right: 0; }
.team-doelenlijst { margin-top: 12px; }
.team-doelregel {
  align-items: flex-start; cursor: default;
}
.team-doelregel textarea {
  width: 100%; min-height: 78px; margin-top: 6px; resize: vertical;
  border: 1px solid var(--rand); border-radius: 14px; padding: 10px 11px;
  background: var(--kaart); color: var(--inkt); font: inherit; font-size: var(--tekst-klein); line-height: 1.3;
}
.team-doelregel textarea:focus { outline: 3px solid rgba(47,111,74,.2); border-color: var(--groen); }
.team-filterbar { padding: 10px 16px; }
@media (max-width: 699px) {
  .topbalk .actie:has(.team-import-actie) { flex-wrap: wrap; }
  .topbalk .actie:has(.team-import-actie) .topbalk-zoek { flex: 1 0 100%; }
  .topbalk .actie:has(.team-import-actie) .btn { flex: 1 1 0; }
  .teamcoach-compact { grid-template-columns: 1fr; }
  .teamcoach-compact .knoppenrij { justify-content: stretch; }
  .teamcoach-compact .knoppenrij .btn { flex: 1 1 0; }
}
/* Schone "volgende wedstrijd"-balk: info links, actieknop rechts — geen kaart */
.wedstrijd-volgende {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 16px;
}
.wedstrijd-volgende-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wedstrijd-volgende-info .badge { align-self: flex-start; white-space: nowrap; }
.wedstrijd-volgende-info b { font-size: var(--tekst-subtitel); font-weight: 850; line-height: 1.15; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wedstrijd-volgende-info small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wedstrijd-volgende-actie { flex: none; min-height: 46px; padding: 10px 16px; font-size: var(--tekst-nadruk); }
/* Analyse-open-filter met openstaand werk: licht rood signaal (net als de oude alert) */
.wedstrijd-filters .segment button.filter-alert {
  background: color-mix(in srgb, var(--rood) 14%, var(--kaart)); color: var(--rood-tekst);
}
.wedstrijd-filters { padding: 10px 16px; }
.wedstrijd-lijstsectie {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0;
}
.wedstrijd-overzicht > .wedstrijd-lijstsectie {
  grid-column: 1 / -1;
}
/* Grid/flex-kinderen krimpen anders niet onder hun tekstbreedte (mobiel overflow). */
.lijst > *, .wedstrijd-lijstsectie > * { min-width: 0; }
.wedstrijd-lijstkop {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 2px 0; color: var(--inkt-zachter); font-size: var(--tekst-klein);
  font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.wedstrijd-lijstkop b {
  min-width: 26px; min-height: 24px; border-radius: 999px; background: var(--rand-zacht);
  color: var(--groen); display: grid; place-items: center; font-size: var(--tekst-klein); font-variant-numeric: tabular-nums;
}
@media (max-width: 1150px) {
  .wedstrijd-lijstsectie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .wedstrijd-lijstsectie { grid-template-columns: 1fr; }
}
.speler-ontwikkelplan {
  border-left: 6px solid var(--groen);
}
.speler-ontwikkelplan.urgentie-hoog { border-left-color: var(--oranje-tekst); }
.speler-ontwikkelplan.urgentie-middel { border-left-color: var(--geel); }
.speler-ontwikkelplan h2 {
  margin: 7px 0 0;
  font-size: var(--tekst-subtitel);
  line-height: 1.18;
}
.speler-details { padding: 0; overflow: hidden; }
.speler-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.speler-details summary::-webkit-details-marker { display: none; }
.speler-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.speler-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.speler-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.speler-details summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.speler-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.speler-details[open] summary::after { transform: rotate(-90deg); }
.speler-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.speler-details > :last-child { margin-bottom: 16px; }
.speler-details .home-signalen,
.speler-details .statraster,
.speler-details .ontwikkelregels,
.speler-details .rangen { margin-left: 16px; margin-right: 16px; }
.speler-details table.simpel { margin: 0 16px 16px; width: calc(100% - 32px); }
.speler-details .knoppenrij { margin-left: 16px; margin-right: 16px; }
.speler-details .veld:first-of-type { margin-top: 0; }
.afwezig-overzicht {
  display: grid; gap: 10px; margin: 12px 16px 0; padding: 12px;
  background: var(--bg); border-radius: 16px;
}
.afwezig-overzicht b { display: block; font-size: var(--tekst-nadruk); }
.afwezig-overzicht small { color: var(--inkt-zachter); font-weight: 750; }
.afwezig-tellers { display: flex; flex-wrap: wrap; gap: 8px; }
.afwezig-tellers span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px;
  border-radius: 999px; background: var(--kaart); color: var(--inkt-zacht); font-weight: 800; font-size: var(--tekst-klein);
}
.afwezig-tellers span b { display: inline; font-size: inherit; color: var(--inkt); }
.speler-profiel #f-status-snel {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible; scroll-snap-type: none;
}
.speler-profiel #f-status-snel button {
  min-width: 0; width: 100%; padding-left: 8px; padding-right: 8px;
  text-align: center;
}
.speler-profiel #f-actief {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.speler-profiel #f-actief button { min-width: 0; width: 100%; }
.speler-selectieveld { margin-bottom: 12px; }
@media (max-width: 560px) {
  .speler-profiel #f-status-snel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.besluitgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0;
}
.besluitgrid section {
  min-height: 108px; border-radius: 18px; background: var(--bg); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 5px;
}
.besluitgrid b { font-size: var(--tekst-klein); font-weight: 900; color: var(--groen); }
.besluitgrid small { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.25; }
@media (max-width: 760px) { .besluitgrid { grid-template-columns: 1fr; } }
.stream-compact { padding: 14px 16px; }
.stream-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stream-rij span { min-width: 0; display: flex; flex-direction: column; }
.stream-rij b { font-size: var(--tekst-subtitel); font-weight: 800; }
.stream-rij small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 600; line-height: 1.25; }
.stream-rij .btn { flex: none; }

.setup-acties { margin-top: 6px; }
.setup-details { padding: 0; overflow: hidden; }
.setup-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.setup-details summary::-webkit-details-marker { display: none; }
.setup-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.setup-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.setup-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.setup-details summary i {
  flex: none; min-width: 44px; min-height: 34px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.setup-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.setup-details[open] summary::after { transform: rotate(-90deg); }
.setup-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.setup-details > :last-child { margin-bottom: 16px; }
/* width:100% + zijmarges = uitsteken buiten de kaart; corrigeer voor de marges. */
.setup-details > textarea { width: calc(100% - 32px); }
.setup-details .chips,
.setup-details .lijst,
.setup-details .prep-grid,
.setup-details .scout-summary,
.setup-details .scout-notes { margin-left: 16px; margin-right: 16px; }
.setup-details .chips { padding-bottom: 16px; }
.setup-details .veld:first-of-type { margin-top: 0; }
.prep-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.prep-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prep-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.prep-grid-6 span,
.prep-grid-6 button { padding: 8px 9px; border-radius: 14px; }
.prep-grid-6 b { font-size: var(--tekst-klein); }
.prep-grid-6 small { font-size: var(--tekst-klein); }
/* De tegel gebruikt --bg als vlak; --inkt-zachter kwam daarop op 4,4:1 uit. */
.prep-grid small { color: var(--inkt-zacht); }
.prep-grid span,
.prep-grid button {
  min-height: 58px; background: var(--bg); border-radius: 16px; padding: 9px 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border: 0; text-align: left; font: inherit; color: inherit;
}
.prep-grid button:not(:disabled) { cursor: pointer; }
.prep-grid button:not(:disabled):hover { transform: translateY(-1px); }
.prep-grid span.ok,
.prep-grid button.ok { background: var(--groen-licht); color: var(--inkt); }
/* Training-coachcheck & opvolging: als knoppen — wit + zwevend als to-do, lichtgroen als klaar */
.trainingcheck .prep-grid span,
.trainingcheck .prep-grid button,
.training-opvolging .prep-grid button {
  background: var(--kaart); box-shadow: var(--schaduw-zwevend);
}
.trainingcheck .prep-grid span.ok,
.trainingcheck .prep-grid button.ok,
.training-opvolging .prep-grid button.ok { background: var(--groen-licht); }
.training-oefacties .btn { box-shadow: var(--schaduw-zwevend); }

/* Knop-achtige, klikbare elementen zakken een tikje in bij muis-hover of aanraking.
   Elementen die al een schaduw hebben, krijgen de ingedrukte variant; schaduwloze
   knoppen (btn-stil, chip-nieuw) zakken wél maar houden geen schaduw. */
.btn, .tegel, .chip, .home-chip, .bigbtn, .terug, .lijst-item,
.tactiekdashboard-preview:not([open]), .oefening-item:not([open]),
.training-filters .segment button,
.wedstrijd-filters .segment button,
.team-filterbar .segment button,
.training-opvolging .prep-grid button { transition: transform .12s ease, box-shadow .12s ease; }

.btn:active, .tegel:active, .chip:active, .home-chip:active, .bigbtn:active, .terug:active, .lijst-item:active,
.tactiekdashboard-preview:not([open]):active, .oefening-item:not([open]):active,
.training-filters .segment button:active,
.wedstrijd-filters .segment button:active,
.team-filterbar .segment button:active,
.training-opvolging .prep-grid button:active { transform: translateY(1px); box-shadow: var(--schaduw-zwevend-in); }

@media (hover: hover) {
  .btn:hover, .tegel:hover, .chip:hover, .home-chip:hover, .bigbtn:hover, .terug:hover, .lijst-item:hover,
  .tactiekdashboard-preview:not([open]):hover, .oefening-item:not([open]):hover,
  .training-filters .segment button:hover,
  .wedstrijd-filters .segment button:hover,
  .team-filterbar .segment button:hover,
  .training-opvolging .prep-grid button:hover { transform: translateY(1px); box-shadow: var(--schaduw-zwevend-in); }
}
/* Schaduwloze knoppen zakken wel in, maar krijgen geen schaduw */
.btn-stil:hover, .btn-stil:active,
.chip-nieuw:hover, .chip-nieuw:active { box-shadow: none; }
.prep-grid b { font-size: var(--tekst-klein); font-weight: 800; color: var(--inkt); }
.prep-grid small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-beschikbaarheid { margin-bottom: 12px; }
.setup-beschikbaarheidkop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border-radius: 16px; padding: 10px 12px; margin-bottom: 10px;
}
.setup-beschikbaarheidkop span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-beschikbaarheidkop b { font-size: var(--tekst-klein); font-weight: 900; }
.setup-beschikbaarheidkop small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; }
.setup-beschikbaarheidkop i {
  flex: none; min-width: 44px; min-height: 32px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
.training-opvolging { border-left: 6px solid var(--oranje); }
.training-opvolging.is-klaar { border-left-color: var(--groen); }
.training-opvolging h2 { margin: 5px 0 0; }
.training-opvolging .prep-grid { margin-top: 12px; }
.opponent-scout .an-kop { margin-bottom: 10px; }
.scout-summary { display: grid; gap: 8px; margin-bottom: 12px; }
.scout-duel {
  min-height: 58px; border-radius: 16px; background: var(--bg); padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  color: var(--inkt); text-decoration: none;
}
.scout-duel b { font-size: var(--tekst-klein); font-weight: 850; line-height: 1.15; }
.scout-duel span { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.2; }
.scout-notes { display: grid; gap: 7px; margin-bottom: 12px; }
.scout-notes p {
  margin: 0; border-radius: 14px; background: var(--rand-zacht); padding: 10px 12px;
  display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; align-items: start;
}
.scout-notes b { font-size: var(--tekst-klein); font-weight: 900; color: var(--groen); }
.scout-notes span { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.25; }
.pwa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
.pwa-grid span {
  min-height: 64px; background: var(--bg); border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.pwa-grid span.ok { background: var(--groen-licht); }
.pwa-grid b { font-size: var(--tekst-klein); font-weight: 800; color: var(--inkt); }
.pwa-grid small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.15; }
.settings-hub-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px;
}
.settings-hub-card {
  min-height: 136px; border-radius: 22px; background: var(--kaart); color: var(--inkt);
  box-shadow: var(--schaduw); padding: 16px; text-decoration: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-content: start;
}
.settings-hub-card:active { transform: scale(.99); }
.settings-hub-icon {
  width: 44px; height: 44px; border-radius: 14px; background: var(--wereld-zacht, var(--groen-licht));
  color: var(--wereld-inkt, var(--groen)); display: flex; align-items: center; justify-content: center;
  grid-column: 2; grid-row: 1 / span 3;
}
.settings-hub-card b { font-size: var(--tekst-subtitel); font-weight: 950; line-height: 1.05; }
.settings-hub-card small {
  color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.25; max-width: 38ch;
}
.settings-hub-card em {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-style: normal; font-weight: 850; line-height: 1.2;
  overflow-wrap: anywhere;
}
.settings-hub-team { background: #D3E3EC; }
.settings-hub-seizoen { background: #F7E9C9; }
.settings-hub-cloud { background: #DFEDE0; }
.settings-hub-toegang { background: #FCF6E6; }
.settings-hub-app { background: #F7DED4; }
.settings-hub-sync { background: #E9F1F5; }
.settings-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px;
}
.settings-tab {
  min-height: 58px; border-radius: 16px; background: var(--kaart); color: var(--inkt);
  box-shadow: var(--schaduw); padding: 10px 11px; text-decoration: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center;
}
.settings-tab svg { color: var(--inkt); }
.settings-tab span { min-width: 0; display: grid; gap: 2px; }
.settings-tab b { font-size: var(--tekst-klein); font-weight: 950; line-height: 1.1; }
.settings-tab small {
  color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.settings-tab.actief {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inkt) 16%, transparent), var(--schaduw);
}
.instellingen-paneel { display: grid; gap: 12px; }
.instellingen-kop { align-items: flex-start; margin-bottom: 0; }
.instellingen-paneel > .subtekst:first-child { margin-top: 0; }
.settings-persoonlijk-velden { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.settings-persoonlijk-velden > .veld { min-width: 0; margin: 0; }
.settings-whatsapp { margin-bottom: 0; }
.settings-whatsapp input { margin-bottom: 6px; font-size: var(--tekst-subtitel); font-weight: 850; letter-spacing: .01em; }
.settings-whatsapp small {
  display: block; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.25;
  padding-left: 2px;
}
.cloud-details .pwa-grid { margin-top: 10px; }
.cloud-authacties,
.cloud-syncacties { margin-top: 0; }
.cloud-statusgrid span small { overflow-wrap: anywhere; }
.cloud-stappen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px;
}
.cloud-stappen span {
  min-height: 62px; border-radius: 16px; background: var(--bg); padding: 10px 11px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.cloud-stappen span.klaar { background: var(--groen-licht); }
.cloud-stappen span.actief { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--groen) 40%, transparent); }
.cloud-stappen b { color: var(--inkt); font-size: var(--tekst-klein); font-weight: 900; line-height: 1.15; }
.cloud-stappen small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.18; overflow-wrap: anywhere; }
.cloud-datastatus {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px;
}
.cloud-datastatus section {
  min-height: 82px; border-radius: 18px; background: var(--bg); padding: 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.cloud-datastatus section.ok { background: var(--groen-licht); }
.cloud-datastatus b { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.cloud-datastatus strong { color: var(--inkt); font-size: 24px; font-weight: 950; line-height: 1; }
.cloud-datastatus small { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.22; overflow-wrap: anywhere; }
.cloud-conflicten {
  border-radius: 18px; background: #FCEEEE; color: #4A2A20; padding: 12px; margin: 10px 0 12px;
  display: grid; gap: 7px;
}
.cloud-conflicten > b { font-size: var(--tekst-klein); font-weight: 950; }
.cloud-conflicten > small { color: #8F3F2E; font-weight: 750; line-height: 1.25; }
.cloud-conflicten span {
  border-radius: 14px; background: rgba(255,255,255,.6); padding: 9px 10px;
  display: flex; justify-content: space-between; gap: 10px; font-weight: 850;
}
.cloud-conflicten span small { color: #8F3F2E; font-weight: 750; }
.cloud-conflictrij {
  border-radius: 14px; background: rgba(255,255,255,.6); padding: 9px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.cloud-conflictrij > span {
  background: none; padding: 0; flex: 1 1 160px;
  display: flex; flex-direction: column; gap: 2px;
}
.cloud-conflictrij .knoppenrij { margin: 0; flex: 0 0 auto; gap: 6px; }
.cloud-conflictrij .btn-klein { min-height: 44px; }
/* Herstelpunten: dezelfde rijopmaak als de conflictlijst, want het is
   hetzelfde soort keuze — een regel met een datum en één knop ernaast. */
.herstelpunten { display: grid; gap: 8px; margin-top: 10px; }
.herstelpunt-rij {
  border-radius: 14px; background: var(--rand-zacht); padding: 9px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.herstelpunt-rij > span {
  flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px;
  color: var(--inkt); font-size: var(--tekst-klein); font-weight: 900;
}
.herstelpunt-rij small { color: var(--inkt-zacht); font-weight: 750; }
.herstelpunt-rij .btn-klein { flex: 0 0 auto; min-height: 44px; }
.cloud-rollenkaart {
  border-radius: 18px; background: var(--rand-zacht); padding: 12px; margin: 10px 0 12px;
  display: grid; gap: 3px;
}
.cloud-rollenkaart b { color: var(--inkt); font-size: var(--tekst-klein); font-weight: 900; }
.cloud-rollenkaart span { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.25; }
.cloud-overzicht {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.cloud-overzicht span {
  min-height: 62px; border-radius: 16px; background: var(--bg); padding: 10px 11px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.cloud-overzicht b { color: var(--inkt); font-size: var(--tekst-nadruk); font-weight: 950; line-height: 1.1; }
.cloud-overzicht small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.15; }
.cloud-simple-status,
.app-simple-status {
  min-height: 82px; border-radius: 18px; background: var(--groen-licht); color: var(--inkt);
  padding: 14px; display: grid; gap: 4px; align-content: center;
}
.cloud-simple-status.letop,
.app-simple-status.letop { background: #FCEEEE; }
.cloud-simple-status b,
.app-simple-status b { font-size: var(--tekst-subtitel); font-weight: 950; line-height: 1.08; }
.cloud-simple-status small,
.app-simple-status small { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.2; }
.cloud-simple-status span {
  color: var(--groen); font-size: var(--tekst-klein); font-weight: 900; line-height: 1.2;
}
.cloud-simple-status.letop span { color: #8F3F2E; }
.cloud-delete-team { background: #FCEEEE; }
.cloud-invitekaart {
  border-radius: 18px; background: var(--bg); padding: 12px; margin: 10px 0 12px;
  display: grid; gap: 8px;
}
.cloud-invitekaart > b { color: var(--inkt); font-size: var(--tekst-klein); font-weight: 900; line-height: 1.15; }
.cloud-invitekaart > small { color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.25; }
.cloud-invitekaart .veld-rij { margin: 0; }
.cloud-invites { display: grid; gap: 7px; }
.cloud-invites span {
  min-height: 54px; border-radius: 15px; background: #fff; padding: 9px 10px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center;
}
.cloud-invites b { color: var(--inkt); font-size: var(--tekst-klein); font-weight: 900; overflow-wrap: anywhere; }
.cloud-invites small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.18; }
.cloud-invites .btn { min-height: 44px; padding: 0 12px; grid-row: span 2; }
.cloud-invites span.verlopen { opacity: .72; }
.cloud-toegangkaart {
  border-radius: 18px; background: var(--bg); padding: 12px; margin: 10px 0 12px;
  display: grid; gap: 10px;
}
.cloud-toegangkaart .an-kop { margin-bottom: 0; }
.cloud-members { display: grid; gap: 10px; }
.cloud-member {
  border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--rand);
  overflow: hidden;
}
.cloud-member-details { display: block; }
.cloud-member-kop {
  min-height: 72px; padding: 12px; cursor: pointer; list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
}
.cloud-member-kop::-webkit-details-marker { display: none; }
.cloud-member-kop b { color: var(--inkt); font-size: var(--tekst-klein); font-weight: 950; line-height: 1.12; overflow-wrap: anywhere; }
.cloud-member-kop small { display: block; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.cloud-member-kop em { display: block; color: var(--inkt-zacht); font-size: var(--tekst-klein); font-style: normal; font-weight: 800; line-height: 1.25; margin-top: 5px; }
.member-toggle {
  min-height: 34px; border-radius: 999px; background: var(--rand-zacht); padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 950; white-space: nowrap;
}
.cloud-member-details[open] .member-toggle { background: var(--groen-licht); color: var(--groen); }
.cloud-member-pane { border-top: 1px solid var(--rand); padding: 12px; display: grid; gap: 10px; }
.cloud-member-meta { margin: 0; }
.cloud-player-link { margin: 0; }
.cloud-player-link.is-hidden { display: none; }
.cloud-permissies {
  border-radius: 16px; background: var(--rand-zacht); padding: 8px; display: grid; gap: 6px;
}
.cloud-permissie-rij {
  min-height: 46px; border-radius: 13px; background: rgba(255,255,255,.68); padding: 8px 10px;
  display: grid; grid-template-columns: minmax(95px, 1fr) auto auto; gap: 8px; align-items: center;
}
.cloud-permissie-rij b { color: var(--inkt); font-size: var(--tekst-klein); font-weight: 900; line-height: 1.1; }
.cloud-permissie-groep { border-radius: 13px; overflow: hidden; }
.cloud-permissie-groep > summary { cursor: pointer; list-style: none; }
.cloud-permissie-groep > summary::-webkit-details-marker { display: none; }
.cloud-permissie-hoofd { grid-template-columns: minmax(90px, 1fr) auto auto 34px; }
.cloud-permissie-titel { min-width: 0; }
.cloud-permissie-hoofd small {
  display: block; margin-top: 3px; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750;
  line-height: 1.15; overflow-wrap: anywhere;
}
.cloud-permissie-hoofd i {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--inkt-zacht);
  display: grid; place-items: center; font-size: var(--tekst-subtitel); font-style: normal; font-weight: 900;
  box-shadow: var(--schaduw-klein); transition: transform .16s ease;
}
.cloud-permissie-groep[open] > .cloud-permissie-hoofd { border-radius: 13px 13px 8px 8px; }
.cloud-permissie-groep[open] .cloud-permissie-hoofd i { background: var(--groen-licht); color: var(--groen); transform: rotate(90deg); }
.cloud-subpermissies { display: grid; gap: 5px; padding: 6px 0 0 14px; }
.cloud-permissie-subrij { background: rgba(255,255,255,.92); }
.cloud-invite-rechten { display: grid; gap: 7px; }
.cloud-invite-rechtenkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cloud-invite-rechtenkop b { font-size: var(--tekst-klein); font-weight: 900; }
.cloud-invite-rechtenkop small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; text-align: right; }
.perm-check {
  min-height: 34px; border-radius: 999px; background: #fff; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 6px; color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 850;
  box-shadow: var(--schaduw-klein);
}
.perm-check input {
  width: 16px; height: 16px; min-height: 16px; margin: 0; accent-color: var(--wereld-hoofd, var(--groen));
}
.perm-check:has(input:checked) {
  background: var(--wereld-zacht, var(--groen-licht)); color: var(--wereld-inkt, var(--groen));
}
.perm-check:has(input:indeterminate) {
  background: var(--rand-zacht); color: var(--inkt-zacht);
}
.cloud-member-acties { display: flex; justify-content: flex-end; }
.cloud-member-acties .btn { min-height: 44px; padding: 0 14px; }
@media (max-width: 560px) {
  .cloud-permissie-hoofd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
  .cloud-permissie-hoofd .cloud-permissie-titel { grid-column: 1 / 3; }
  .cloud-permissie-hoofd > i { grid-column: 3; grid-row: 1 / 3; }
  .cloud-permissie-hoofd > .perm-check { width: 100%; min-width: 0; justify-content: center; padding-inline: 6px; }
  .cloud-subpermissies { padding-left: 8px; }
  .cloud-permissie-subrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-permissie-subrij > span:first-child { grid-column: 1 / -1; }
  .cloud-permissie-subrij > .perm-check { width: 100%; min-width: 0; justify-content: center; padding-inline: 6px; }
  .cloud-permissie-subrij:has(> span:empty) > .perm-check { grid-column: 1 / -1; }
  .cloud-invite-rechtenkop { align-items: flex-start; flex-direction: column; gap: 2px; }
  .cloud-invite-rechtenkop small { text-align: left; }
}
.cloud-tech {
  margin: 10px 0 12px; border-radius: 18px; background: var(--bg); overflow: hidden;
}
.cloud-tech summary {
  min-height: 52px; padding: 12px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: var(--inkt); font-weight: 900;
}
.cloud-tech summary::-webkit-details-marker { display: none; }
.cloud-tech summary small { display: block; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; margin-top: 2px; }
.cloud-tech-inhoud { padding: 0 12px 12px; display: grid; gap: 8px; }
.settings-subkop {
  margin: 16px 16px 8px;
  color: var(--inkt);
}
.instellingen-versie { text-align: center; margin-bottom: 8px; }
.instellingen-details { padding: 0; overflow: hidden; }
.instellingen-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--inkt);
}
.instellingen-details summary::-webkit-details-marker { display: none; }
.instellingen-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.instellingen-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; }
.instellingen-details summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3;
  /* De ondertitel vertelt wát er in het paneel zit; op één afgekapte regel
     bleef daar "SC, circle, kaarten, events en voo…" van over. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.instellingen-details summary i { display: none; }
.instellingen-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.instellingen-details[open] summary::after { transform: rotate(-90deg); }
.instellingen-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.instellingen-details > :last-child { margin-bottom: 16px; }
.instellingen-details .pwa-grid,
.instellingen-details .ontwikkelregels { margin-left: 16px; margin-right: 16px; }
.login-scherm { max-width: 1080px; margin: 0 auto; padding: 18px 0 26px; }
.login-hero {
  min-height: 210px; border-radius: 32px; background: var(--groen); color: #fff;
  box-shadow: var(--schaduw-op); padding: clamp(24px, 4vw, 42px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
}
.login-hero .badge { align-self: flex-start; background: rgba(255,255,255,.18); color: #fff; }
.login-hero h1 { margin: 0; font-size: var(--tekst-titel); line-height: 1.05; letter-spacing: 0; }
.login-hero p { max-width: 640px; margin: 0; color: rgba(255,255,255,.78); font-size: var(--tekst-subtitel); font-weight: 750; line-height: 1.35; }
.login-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; margin-top: 14px; }
.login-scherm-account .login-grid,
.login-scherm-setup .login-grid { grid-template-columns: minmax(0, 1fr); }
.login-paneel { display: flex; flex-direction: column; gap: 12px; }
.login-paneel h2 { margin: 0; font-size: var(--tekst-subtitel); line-height: 1.1; }
.login-hoofdpaneel { max-width: 560px; width: 100%; }
.login-account {
  border-radius: 18px; background: var(--bg); padding: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.login-account b { font-size: var(--tekst-subtitel); font-weight: 900; overflow-wrap: anywhere; }
.login-account small { color: var(--inkt-zacht); font-weight: 750; line-height: 1.25; }
.login-accountpaneel { max-width: 640px; width: 100%; }
.login-sessionstatus {
  min-height: 38px; border-radius: 16px; background: var(--groen-licht); color: var(--groen);
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font-size: var(--tekst-klein); font-weight: 850; line-height: 1.2;
}
.login-checkbox {
  min-height: 46px; border-radius: 16px; background: var(--bg); padding: 8px 12px;
  display: flex; align-items: center; gap: 10px; color: var(--inkt); font-size: var(--tekst-klein); font-weight: 850;
}
.login-checkbox input {
  width: 20px; height: 20px; accent-color: var(--groen); flex: 0 0 auto;
}
.login-teamsetup { margin-top: 14px; display: grid; gap: 12px; }
.login-sectiekop { padding: 0 2px; }
.login-sectiekop h2 { margin: 0; font-size: var(--tekst-titel); line-height: 1.05; }
.login-sectiekop .subtekst { margin: 4px 0 0; }
.login-teamkop {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.login-account-mini {
  min-height: 48px; border-radius: 18px; background: #fff; box-shadow: var(--schaduw);
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 850;
}
.login-account-mini b { color: var(--inkt); overflow-wrap: anywhere; }
.login-lokaal {
  margin: 18px auto 0; max-width: 520px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.login-lokaal .btn { min-height: 44px; box-shadow: none; background: transparent; color: var(--groen); }
.login-lokaal .subtekst { margin: 0; max-width: 44ch; }
.login-setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.login-paneel .badge { align-self: flex-start; }
.login-forgot {
  align-self: flex-start; min-height: 44px; padding: 0; box-shadow: none;
  color: var(--groen); background: transparent;
}
.login-divider { display: flex; align-items: center; gap: 10px; color: var(--inkt-zachter); font-weight: 850; font-size: var(--tekst-klein); text-transform: uppercase; letter-spacing: .04em; }
.login-divider::before,
.login-divider::after { content: ""; height: 1px; background: var(--rand); flex: 1; }
.login-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.login-statgrid span {
  border-radius: 16px; background: var(--bg); min-height: 78px; padding: 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.login-statgrid b { color: var(--inkt); font-size: 24px; font-weight: 950; line-height: 1; }
.login-statgrid small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.15; }
.login-statuskaart .btn-stil { color: var(--groen); }
@media (max-width: 860px) {
  .login-grid, .login-setup-grid { grid-template-columns: 1fr; }
  .login-teamkop { align-items: stretch; flex-direction: column; }
  .login-account-mini { justify-content: space-between; }
  .login-hero { min-height: 190px; border-radius: 26px; }
}
@media (max-width: 760px) {
  .settings-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .settings-tab { min-height: 62px; border-radius: 17px; padding: 10px; }
  .settings-hub-grid { grid-template-columns: 1fr; gap: 10px; }
  .settings-hub-card { min-height: 112px; border-radius: 20px; padding: 14px; }
  .settings-hub-card b { font-size: var(--tekst-subtitel); }
  .settings-hub-icon { width: 40px; height: 40px; }
  .pwa-grid { grid-template-columns: 1fr 1fr; }
  .cloud-stappen { grid-template-columns: 1fr 1fr; }
  .cloud-datastatus { grid-template-columns: 1fr; }
  .cloud-overzicht { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .prep-grid { grid-template-columns: 1fr 1fr; }
  .prep-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .home-coachblok { grid-template-columns: 1fr; }
  .home-coachblok .btn { width: 100%; }
  .dagcheck-grid { grid-template-columns: 1fr 1fr; }
  .startstappen { grid-template-columns: 1fr 1fr; }
  .setup-acties {
    position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20;
    background: rgba(244, 241, 233, .9);
    background: color-mix(in srgb, var(--bg) 88%, transparent); border-radius: 22px;
    padding: 8px; backdrop-filter: blur(10px); box-shadow: 0 -10px 28px rgba(0,0,0,.08);
  }
  .setup-acties .knoppenrij { margin: 8px 0 0; }
  html[data-thema="donker"] .setup-acties { background: rgba(22, 20, 15, .9); background: color-mix(in srgb, var(--bg) 88%, transparent); }
}

.hoofdnav {
  position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 45;
  max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 2px; padding: 3px; border-radius: 17px; background: rgba(255,255,255,.62);
  box-shadow: 0 14px 42px -22px rgba(0,0,0,.45);
  /* De verzadiging erbij maakt het echt glas in plaats van melk: wat eronder
     doorschijnt houdt zijn kleur. De -webkit-variant is er voor oudere iOS —
     dit is een PWA die vooral op een telefoon draait. */
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}
html[data-thema="donker"] .hoofdnav { background: rgba(33,29,22,.62); }
/* Zonder backdrop-filter is doorschijnend gewoon bleek: dan liever dicht. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hoofdnav { background: rgba(255,255,255,.95); }
  html[data-thema="donker"] .hoofdnav { background: rgba(33,29,22,.95); }
}
/* Veldmodus blijft dicht: in fel zonlicht is elke tint achtergrond die
   doorschijnt verlies, en de navigatie moet daar in één blik leesbaar zijn. */
html[data-thema="veld"] .hoofdnav {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hoofdnav[hidden] { display: none; }
.hoofdnav a {
  min-height: 44px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 0; text-decoration: none; color: var(--inkt-zachter); font-weight: 800; font-size: calc(var(--tekst-klein) - 2px);
}
.hoofdnav a span { display: flex; font-size: var(--tekst-subtitel); line-height: 1; }
.hoofdnav a svg { width: 15px; height: 15px; }
.hoofdnav a b { font-size: calc(var(--tekst-klein) - 2px); line-height: 1; }
.hoofdnav a.actief { background: var(--groen); color: #fff; }
body:is(.wereld-training, .wereld-tactiek, .wereld-wedstrijd, .wereld-analyse, .wereld-team) .hoofdnav a.actief {
  background: var(--wereld);
  color: var(--wereld-op);
}
.hoofdnav a:active { transform: scale(.97); }
.tactiekdashboard-hoofd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.tactiekdashboard-hoofd .tegel {
  min-height: 72px; border-radius: 18px; padding: 11px 12px; gap: 8px; box-shadow: var(--schaduw-zwevend);
}
.tactiekdashboard-hoofd .tegel svg { width: 24px; height: 24px; }
.tactiekdashboard-hoofd .tegel svg { color: #587A58; }
.tactiekdashboard-hoofd .tegel .t-titel { font-size: var(--tekst-klein); line-height: 1.05; }
.tactiekdashboard-filter { padding: 10px 16px; }
.tactiekdashboard-chips {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: 4px 0 8px; margin-bottom: 0;
}
.tactiekdashboard-chips::-webkit-scrollbar { display: none; }
.tactiekdashboard-chips .chip {
  flex: 0 0 auto; min-height: 44px; padding: 7px 15px; font-size: var(--tekst-klein);
}
.tactiekdashboard-chips .chip-nieuw {
  width: 52px; min-width: 52px; padding: 0; border: 2px dashed var(--rand);
  background: transparent; color: var(--inkt-zachter); box-shadow: none; font-size: 24px;
}
.tactiekdashboard-direct {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: start; padding: 14px 0 16px;
}
.tactiekdashboard-direct .ontwikkelregels { grid-template-columns: 1fr; }
.tactiekdashboard-direct .ontwikkelregel { min-height: 58px; }
.tactiekdashboard-preview { margin-bottom: 0; }
.tactiekdashboard-preview .tactiekdashboard-open {
  display: grid; grid-template-columns: 1fr;
  align-items: start; justify-content: stretch; gap: 10px;
  margin: 0 14px 14px;
}
.tactiekdashboard-preview .tactiekdashboard-openacties {
  min-width: 0; display: grid; gap: 10px; align-content: start;
}
.tactiekdashboard-preview .tactiek-acties {
  display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0;
}
.tactiekdashboard-preview .tactiek-acties .btn {
  width: 100%; justify-content: center; min-height: 42px; font-size: var(--tekst-klein); padding: 8px 12px;
}
.tactiekdashboard-preview .subtekst {
  margin: 0; font-size: var(--tekst-klein); line-height: 1.4;
}
.tactiekdashboard-preview .miniatuur.tactiekdashboard-mini {
  width: 100%; max-width: 190px; margin: 0;
  justify-self: center; border-radius: 12px;
}
.tactiekdashboard-preview .tactiekdashboard-mini svg {
  width: 100%; height: auto;
}
.oefeningen-overzicht {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: start; padding: 14px 0 16px;
}
.oefening-filters { padding: 10px 16px; }
.oefening-filtergroepen { display: grid; gap: 4px; min-width: 0; }
.oefening-filtergroepen .tactiekdashboard-chips { margin: 0; }
.oefeningen-overzicht .oefening-details { margin-bottom: 0; }
.oefening-overzicht-open {
  display: grid; grid-template-columns: 1fr; align-items: start; gap: 10px;
  margin: 0 14px 14px !important;
}
.oefening-overzicht-inhoud { min-width: 0; display: grid; gap: 10px; align-content: start; }
.oefening-overzicht-acties {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin: 0 !important;
}
.oefening-overzicht-acties .btn {
  width: 100%; justify-content: center; min-height: 42px;
  font-size: var(--tekst-klein); padding: 8px 12px;
}
.oefening-overzicht-open .subtekst {
  margin: 0; font-size: var(--tekst-klein); line-height: 1.4; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.oefening-details .miniatuur.oefening-overzicht-mini {
  width: 100%; max-width: 190px; margin: 0 !important;
  justify-self: center; border-radius: 12px;
}
.oefening-overzicht-mini svg { width: 100%; height: auto; }
@media (max-width: 1150px) {
  .tactiekdashboard-direct,
  .oefeningen-overzicht { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .tactiekdashboard-hoofd .tegel { min-height: 64px; }
  .tactiekdashboard-direct,
  .oefeningen-overzicht { grid-template-columns: 1fr; }
  .tactiekdashboard-preview .tactiekdashboard-open {
    grid-template-columns: 1fr; justify-content: stretch;
  }
  .tactiekdashboard-preview .miniatuur.tactiekdashboard-mini {
    max-width: 220px;
  }
  .oefening-details .miniatuur.oefening-overzicht-mini { max-width: 220px; }
}
@media (min-width: 900px) {
  .hoofdnav { max-width: 980px; }
}

/* Analyse-scherm (video + 40-vak veld + event-lijst) */
.analyse-statuskaart { margin-top: 12px; margin-bottom: 12px; }
.analyse-nazorg { margin-top: 0; }
.analyse-statuskaart,
.analyse-afrondkaart {
  border-left: 5px solid var(--oranje);
}
.analyse-statuskaart.is-klaar,
.analyse-afrondkaart.is-klaar { border-left-color: var(--groen); }
.analyse-afrondkaart h2 { margin: 6px 0 4px; }
.analyse-tooldetails { padding: 0; overflow: hidden; }
.analyse-tooldetails summary {
  min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 12px 14px; cursor: pointer; color: var(--inkt);
}
.analyse-tooldetails summary::-webkit-details-marker { display: none; }
.analyse-tooldetails summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.analyse-tooldetails summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.analyse-tooldetails summary small {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analyse-tooldetails summary i {
  flex: none; min-width: 40px; min-height: 32px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 9px;
}
.analyse-tooldetails summary i,
.analyse-details summary i,
.rapport-details summary i { display: none; }
.analyse-tooldetails summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 22px; line-height: 1; transform: rotate(90deg);
}
.analyse-tooldetails[open] summary::after { transform: rotate(-90deg); }
.analyse-tooldetails > :not(summary) { margin-left: 14px; margin-right: 14px; }
.analyse-tooldetails > :last-child { margin-bottom: 14px; }
.analyse-statusacties { margin-top: 10px; }
.analyse-statusacties .btn { flex: 1; }
.analyse-videokoppeling {
  margin-top: 0; margin-bottom: 12px; background: var(--kaart); border-radius: 16px;
}
.analyse-videokoppeling summary { background: var(--kaart); }
.analyse-videorows { display: grid; gap: 10px; }
.analyse-videorow {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px;
  align-items: stretch; padding: 10px; border-radius: 15px; background: #fbfaf7;
  border: 1px solid color-mix(in srgb, var(--rand) 58%, transparent);
}
.analyse-vq {
  min-height: 72px; border-radius: 13px; background: var(--groen); color: #fff;
  display: grid; place-items: center; font-weight: 900; font-variant-numeric: tabular-nums;
}
.analyse-vvelden {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.analyse-videorow label { margin: 0; min-width: 0; }
.analyse-videorow label span {
  display: block; margin: 0 0 4px; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
}
.analyse-videorow input {
  min-height: 46px; padding: 9px 11px; font-size: var(--tekst-nadruk); background: #fff;
  border: 1px solid color-mix(in srgb, var(--rand) 72%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.analyse-videorow input:focus { outline: 2px solid color-mix(in srgb, var(--groen) 60%, #fff); outline-offset: 2px; }
.analyse-videorow small {
  grid-column: 2; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.15;
}
@media (max-width: 699px) {
  .analyse-videorow { grid-template-columns: 42px minmax(0, 1fr); }
  .analyse-vvelden { grid-template-columns: 1fr; }
  .analyse-videorow small { grid-column: 2 / -1; }
}
.analyse-tellers {
  display: grid; grid-template-columns: repeat(3, minmax(74px, 1fr)); gap: 8px;
}
.analyse-tellers span {
  background: var(--bg); border-radius: 14px; padding: 9px 10px; text-align: center;
}
.analyse-tellers b {
  display: block; color: var(--groen); font-size: 20px; font-weight: 900; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.analyse-tellers small {
  display: block; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.15;
}
.analyse-afronding .veld { margin-top: 12px; }
.checkregel {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 8px 0 12px;
  font-weight: 750; color: var(--inkt-zacht);
}
.checkregel input { width: 20px; height: 20px; accent-color: var(--groen); }
@media (max-width: 699px) {
  .analyse-tellers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.yt-houder { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #000; }
.yt-houder iframe, .yt-houder > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* De muis mag YouTubes eigen overlay (grote play/pauze-knop, balk) niet meer
   opwekken; afspelen en zoeken gaat via de eigen knoppen en sneltoetsen. */
.yt-houder iframe { pointer-events: none; }
/* Onzichtbare vanglaag boven de video: vangt alle muis/aanraking op zodat
   YouTube nooit zijn eigen balk of midden-knop toont. Vóór het eerste afspelen
   is hij zwart en verbergt hij ook YouTubes startknop (hint onderin, midden
   leeg). Na afspelen (.gestart) wordt hij doorzichtig maar blijft hij vangen;
   tikken speelt/pauzeert. */
.yt-cover { position: absolute; inset: 0; z-index: 2; background: #000; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 12px; pointer-events: auto; cursor: pointer; }
.yt-cover.gestart { background: transparent; padding: 0; }
.yt-cover.gestart span { display: none; }
.yt-cover span { color: rgba(255, 255, 255, .66); font-weight: 800; font-size: var(--tekst-klein); }
.analyse-veld-wrap { max-width: 360px; margin: 10px auto 4px; }

/* veldkaart: echte veldondergrond met 40 vakken + 12 klikbare cirkelzones */
.veldkaart { width: 100%; height: auto; display: block; border-radius: 14px; }
.veldkaart .vak rect, .veldkaart .vak path { fill: rgba(255,255,255,0); stroke: rgba(255,255,255,.28); stroke-width: 1.5; }
.veldkaart .sector path { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.55); stroke-width: 2; }
.veldkaart .vak text { fill: rgba(255,255,255,.5); font: 800 19px sans-serif; text-anchor: middle; pointer-events: none; user-select: none; }
.veldkaart .vak .vk-nr { font: 800 16px sans-serif; text-anchor: start; fill: rgba(255,255,255,.55); }
.veldkaart .vak .vk-tel { font: 800 42px sans-serif; }
.veldkaart.klikbaar .vak rect, .veldkaart.klikbaar .vak path { cursor: pointer; }
.veldkaart.klikbaar .vak:hover { opacity: .82; }
.veldkaart.klikbaar .vak:hover rect, .veldkaart.klikbaar .vak:hover path { fill: rgba(255,255,255,.14); }
.veldkaart .vak.sel rect, .veldkaart .vak.sel path { fill: rgba(245,184,0,.5); stroke: #fff; stroke-width: 2.5; }
.veldkaart .vak.sel text { fill: #14211a; }
.ev-regel { display: flex; align-items: center; gap: 8px; background: var(--kaart); border-radius: 12px; padding: 6px 8px; border-left: 4px solid var(--rand); }
.ev-regel.ev-analyse { border-left-color: var(--groen); }
.ev-regel.ev-live { border-left-color: var(--lucht); }
.ev-regel.ev-onvol { border-left-color: var(--oranje-tekst); }
.ev-spring { flex: none; border: 0; background: var(--bg); border-radius: 9px; padding: 6px 9px; }
.ev-spring .video-tijd { width: auto; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--groen); }
.ev-wat { flex: 1; min-width: 0; font-weight: 600; font-size: var(--tekst-klein); }
.ev-watknop { border: 0; background: transparent; color: var(--inkt); text-align: left; padding: 4px 2px; border-radius: 8px; cursor: pointer; }
.ev-watknop:hover { background: rgba(21,98,58,.07); }
.ev-edit { flex: none; }
.mini-badge { display: inline-block; background: var(--bg); border-radius: 7px; padding: 1px 7px; font-size: var(--tekst-klein); font-weight: 700; color: var(--inkt-zachter); white-space: nowrap; }
.vak-kiezer { max-height: 150px; overflow-y: auto; }

/* Analyse-layout: mobiel gestapeld (via order), desktop een brede 4-koloms grid. */
.analyse { display: flex; flex-direction: column; gap: 14px; }
.an-links, .an-mid, .an-rechts { display: contents; }   /* mobiel: secties stromen los, volgorde via order */
.an-video { order: -3; } .an-veld { order: -2; } .an-capture { order: -1; } .an-events { order: 0; } .an-terug { order: 1; }
.ev-ster { flex: none; border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--inkt-zachter); cursor: pointer; padding: 2px 4px; min-width: 44px; min-height: 44px; }
.ev-ster.aan { color: var(--geel); }
.tk-regel { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 10px; padding: 5px 7px; margin-bottom: 6px; }
.tk-regel .ev-wat { min-width: 0; flex: 1; display: flex; flex-direction: column; font-size: var(--tekst-klein); }
.tk-regel .ev-wat small { color: var(--inkt-zachter); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.video-doelgroep { border: 0; margin: 14px 0; padding: 0; }
.video-doelgroep legend { font-weight: 900; font-size: var(--tekst-klein); margin-bottom: 8px; }
.video-doelgroep-optie { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; cursor: pointer; }
.video-doelgroep-optie input { margin-top: 3px; accent-color: var(--groen); }
.video-doelgroep-optie span { display: flex; flex-direction: column; gap: 1px; }
.video-doelgroep-optie small { color: var(--inkt-zachter); font-weight: 700; font-size: var(--tekst-klein); }
.video-doelgroep-linies { margin: 3px 0 0 24px; display: grid; gap: 8px; }
.video-bundels { display: flex; flex-wrap: wrap; gap: 6px; }
.video-bundel {
  min-height: 36px; padding: 5px 13px; border: 1.5px solid var(--rand);
  border-radius: 999px; background: var(--kaart); color: var(--inkt-zacht);
  font-weight: 800; font-size: var(--tekst-klein); cursor: pointer;
}
.video-bundel[aria-pressed="true"] { background: var(--groen); color: #fff; border-color: var(--groen); }
.video-bundel[aria-pressed="true"]::before { content: "✓ "; font-weight: 900; }

/* Positietags in het spelersprofiel: aan/uit moet in één oogopslag duidelijk
   zijn — gevuld groen met vinkje als gekozen, omlijnd en rustig als niet. */
.pos-tag-groep { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pos-tag {
  min-height: 40px; padding: 7px 15px; border: 1.5px solid var(--rand);
  border-radius: 999px; background: var(--kaart); color: var(--inkt-zacht);
  font-weight: 800; font-size: var(--tekst-nadruk); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pos-tag:hover { border-color: var(--groen); }
.pos-tag[aria-pressed="true"] { background: var(--groen); color: #fff; border-color: var(--groen); }
.pos-tag[aria-pressed="true"]::before { content: "✓ "; font-weight: 900; }
.video-doelgroep-spelers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.video-doelgroep-spelers label { display: flex; align-items: center; gap: 7px; padding: 7px 8px; background: var(--bg); border-radius: 7px; font-size: var(--tekst-klein); font-weight: 800; }
.video-doelgroep-spelers label span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.video-doelgroep-spelers label small { color: var(--inkt-zachter); font-weight: 700; }
.video-doelgroep-spelers input { accent-color: var(--groen); }

.speler-video-kaart .an-kop { align-items: flex-start; }
.speler-video-kaart h2 { margin: 5px 0 0; font-size: var(--tekst-subtitel); }
.speler-video-voorproef { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.speler-video-voorproef span { padding: 5px 8px; border-radius: 6px; background: var(--bg); color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; }
.speler-beelden-kop { display: flex; align-items: center; gap: 12px; }
.speler-beelden-kop .badge { min-width: 38px; min-height: 38px; display: grid; place-items: center; font-size: var(--tekst-nadruk); }
.speler-beelden-kop h2 { margin: 0; font-size: var(--tekst-subtitel); }
.speler-beelden-kop .subtekst { margin: 2px 0 0; }
.speler-beelden-speler { overflow: hidden; padding: 0; }
.speler-beelden-video { aspect-ratio: 16 / 9; background: #111; }
.speler-beelden-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.speler-beelden-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.speler-beelden-meta span { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
.speler-beelden-wedstrijden { display: grid; gap: 10px; }
.speler-beelden-wedstrijd { padding: 0; overflow: hidden; }
.speler-beelden-wedstrijd summary { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; }
.speler-beelden-wedstrijd summary::-webkit-details-marker { display: none; }
.speler-beelden-wedstrijd summary > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.speler-beelden-wedstrijd summary small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
.speler-beelden-wedstrijd summary i { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); font-style: normal; font-size: var(--tekst-klein); font-weight: 900; }
.speler-beelden-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; padding: 0 10px 10px; }
.speler-beeld-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--rand-zacht); border-radius: 7px; background: var(--bg); text-align: left; padding: 11px; cursor: pointer; }
.speler-beeld-item.actief { border-color: rgba(21, 98, 58, .35); background: #eef7f0; }
.speler-beeld-item > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.speler-beeld-item small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
.speler-beeld-icoon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: #d8ecdf; color: var(--groen); }
.beelden-kop { display: flex; align-items: center; gap: 12px; }
.beelden-kop .badge { min-width: 38px; min-height: 38px; display: grid; place-items: center; font-size: var(--tekst-nadruk); }
.beelden-kop h2 { margin: 0; font-size: var(--tekst-subtitel); }
.beelden-kop .subtekst { margin: 2px 0 0; }
.beelden-speler { overflow: hidden; padding: 0; }
.beelden-video { aspect-ratio: 16 / 9; background: #111; }
.beelden-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.beelden-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.beelden-meta span { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
.beelden-wedstrijden { display: grid; gap: 10px; }
.beelden-wedstrijd { padding: 0; overflow: hidden; }
.beelden-wedstrijd summary { min-height: 68px; display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; list-style: none; }
.beelden-wedstrijd summary::-webkit-details-marker { display: none; }
.beelden-wedstrijd-icoon, .beelden-clip-icoon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 7px; background: #d8ecdf; color: var(--groen); }
.beelden-wedstrijd-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.beelden-wedstrijd-info small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
.beelden-wedstrijd-aantal { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); font-size: var(--tekst-klein); font-weight: 900; }
.beelden-wedstrijd-pijl { color: var(--inkt-zachter); font-size: 24px; line-height: 1; transition: transform .16s ease; }
.beelden-wedstrijd[open] .beelden-wedstrijd-pijl { transform: rotate(90deg); }
.beelden-cliplijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; padding: 0 10px 10px; }
.beelden-clip { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--rand-zacht); border-radius: 7px; background: var(--bg); text-align: left; padding: 11px; cursor: pointer; }
.beelden-clip:disabled { cursor: default; opacity: .58; }
.beelden-clip.actief { border-color: rgba(21, 98, 58, .35); background: #eef7f0; }
.beelden-clip > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.beelden-clip small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; }
@media (max-width: 560px) { .video-doelgroep-spelers { grid-template-columns: 1fr; } .speler-beelden-lijst, .beelden-cliplijst { grid-template-columns: 1fr; } }
/* Capture-venster: groepslabels + toets-focus + terugkijk-toggle */
.cap-label { margin: 6px 0 3px; }
.chips.cap-kb { margin-bottom: 8px; }
.chips.groep-focus { outline: 2px solid var(--groen); outline-offset: 3px; border-radius: 10px; }
.chip-terug.actief { background: var(--geel); color: #14211a; box-shadow: none; }
.an-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.an-kop-acties { display: flex; align-items: center; gap: 6px; flex: none; }
.an-inklap {
  flex: none; width: 44px; min-height: 44px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; display: grid; place-items: center;
}
/* Zelfde chevron als de samenvouwbare kaarten (Video koppelen): open wijst hij
   omhoog, dicht naar rechts. Alleen het teken draait, niet het tikvlak. */
.an-inklap::after {
  content: '›'; color: var(--inkt-zachter); font-size: 22px; line-height: 1;
  transform: rotate(-90deg); transition: transform .15s ease;
}
.an-inklap[aria-expanded="false"]::after { transform: rotate(90deg); }
.an-inklap:hover { background: rgba(0,0,0,.06); }
.an-events.is-ingeklapt .eventlijst { display: none; }
.an-events.is-ingeklapt { max-height: none; }
.an-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.an-cat .btn { justify-content: center; }
.sneltoetsen-hint { margin-top: 12px; background: var(--bg); border-radius: 12px; font-size: var(--tekst-klein); color: var(--inkt-zachter); }
.sneltoetsen-hint[open] { padding-bottom: 10px; }
.sneltoetsen-hint > span { display: block; margin-top: 3px; }
.sneltoetsen-hint b { color: var(--inkt); }
.res-totaal { font-weight: 700; font-size: var(--tekst-klein); color: var(--inkt-zacht); margin-bottom: 10px; }
.res-blok { margin-bottom: 12px; }
.res-blok h3 { font-size: var(--tekst-klein); margin: 0 0 5px; color: var(--inkt-zacht); text-transform: uppercase; letter-spacing: .04em; }
.res-rij { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: var(--tekst-klein); }
.res-l { flex: none; width: 104px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-bar { flex: 1; height: 8px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.res-bar i { display: block; height: 100%; background: var(--groen); border-radius: 5px; }
.res-n { flex: none; width: 26px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (min-width: 1100px) {
  .analyse {
    display: grid; align-items: start; gap: 12px;
    /* links knoppen+veld met de eventlijst eronder, rechts de video. Puur
       proportioneel kromp de linkerhelft op een kleinere laptop te ver in; de
       bodem houdt de knoppen leesbaar en de video levert ruimte als eerste in. */
    grid-template-columns: minmax(470px, 2fr) minmax(0, 4fr);
  }
  /* De linkerhelft is één kolom die zichzelf stapelt: knoppen+veld, daaronder de
     eventlijst. Bewust géén grid-rijen die de video deelt — toen video, veld en
     lijst nog cellen van dezelfde grid waren, hing hun hoogte aan elkaar en
     verschoof bij het inklappen van de lijst de hele knoppenkaart. Zo staat
     links alles stil, wat er rechts ook gebeurt. */
  .an-links { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  /* In de bron staat de eventlijst vóór veld+knoppen (dat is de volgorde die
     mobiel klopt: eerst zien wat je hebt, dan de bediening). Hier hoort hij
     eronder. */
  .an-links .an-mid { order: 0; }
  .an-links .an-events { order: 1; }
  .an-mid {
    /* De knoppenkolom iets ruimer dan het veld: "Doelpoging" en "Overtreding"
       moeten naast elkaar op één regel passen, anders vallen ze uit elkaar in
       icoon-boven-woord. */
    display: grid; grid-template-columns: minmax(230px, 1.1fr) minmax(200px, 1fr);
    gap: 12px; align-items: start;
  }
  /* Rij expliciet: in de bron staat het veld vóór de knoppen, en zonder
     `grid-row` zou automatische plaatsing de knoppen naar een tweede rij
     schuiven in plaats van terug naar de eerste kolom. */
  .an-capture { grid-column: 1; grid-row: 1; }
  .an-veld    { grid-column: 2; grid-row: 1; }
  .an-rechts  { display: flex; flex-direction: column; gap: 12px; }

  .an-events { display: flex; flex-direction: column; max-height: calc(100vh - 90px); }
  .an-events .eventlijst { overflow-y: auto; }
  /* De eventlijst stond eerder in een smalle 1/6-kolom en had daar een eigen
     verkleining nodig; in deze indeling is hij twee kolommen breed en leest hij
     op de normale maat. */
  .an-veld .analyse-veld-wrap { width: 100%; max-width: none; margin: 0 auto; }
  .an-capture #a-balbezit button { font-size: var(--tekst-klein); padding: 0 6px; min-height: 44px; }  /* Wij | Tegenstander (2) */
  /* Twee categorieën per regel: vijf knoppen onder elkaar maakten de kaart
     hoger dan het veld, waardoor de laatste ("Overtreding") achter de
     Wissel-knop verdween. In twee kolommen past alles binnen de veldhoogte. */
  .an-cat { grid-template-columns: 1fr 1fr; gap: 6px; }
  /* Knoppenkaart precies even lang als het veld ernaast.
     `height: 0` zorgt dat deze kaart niet meetelt voor de rijhoogte — het veld
     bepaalt die dus — en `min-height: 100%` vult die hoogte daarna exact op.
     Zonder die truc rekt align-self alleen uit en bleef de kaart 82px langer.
     De categorieknoppen verdelen de overgebleven ruimte (grid-auto-rows: 1fr),
     zodat het blijft uitlijnen bij een ander schermformaat of langere labels. */
  /* `overflow: auto`, niet `hidden`: bij hidden verdween inhoud die niet paste
     stilletjes achter de knop eronder. Past het onverhoopt toch niet, dan is er
     een schuifbalk en blijft alles bereikbaar. */
  .an-capture {
    display: flex; flex-direction: column;
    height: 0; min-height: 100%; overflow: auto;
  }
  /* `minmax(0, 1fr)`, niet `1fr`: een kale 1fr heeft de inhoud als ondergrens,
     dus de rijen konden niet krimpen. Bij drie rijen liep de laatste knop
     daardoor buiten zijn eigen vak en kwam hij over de Wissel-knop te liggen.
     Met een ondergrens van 0 verdeelt de grid alleen de ruimte die er ís. */
  .an-capture .an-cat { flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
  .an-capture .an-cat .btn { min-height: 0; }
  /* Blijft op --tekst-klein: de build staat geen losse tussenmaten onder 18px
     toe, en dat is hier ook niet nodig. De uitlijning met het veld komt van de
     hoogtebeperking hierboven, niet van de lettergrootte — de knoppen verdelen
     zelf wat er over is. */
  /* Geen `overflow-wrap: anywhere`: dat brak woorden middenin ("Doel pogi ng").
     Zonder de cijferbadge past een label als "Overtreding" gewoon, en breekt hij
     hooguit netjes tussen icoon en woord. */
  .an-cat .btn { font-size: var(--tekst-klein); min-height: 40px; line-height: 1.2; white-space: normal; padding-left: 2px; padding-right: 2px; }
  .sneltoetsen-hint { font-size: var(--tekst-klein); }
  .an-terug { overflow-y: auto; }
}

/* Sheets (onderin) */
.sheet-achtergrond {
  position: fixed; inset: 0; background: rgba(8, 12, 10, .45); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--kaart); width: 100%; max-width: 640px;
  border-radius: 26px 26px 0 0; padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  max-height: 93dvh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(0,0,0,.22);
}
.sheet:focus { outline: none; }
.sheet h2 { display: flex; align-items: center; justify-content: space-between; }
.sheet .sluit { border: 0; background: var(--bg); border-radius: 12px; width: 44px; height: 44px; font-size: var(--tekst-subtitel); font-weight: 800; color: var(--inkt-zachter); }
.keuzeraster { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.keuzeraster .btn { min-height: 58px; }
.keuzeraster .breed { grid-column: 1 / -1; }
/* Zonekiezer: zes cirkelsectoren in de stand van het veld — bovenste rij ligt
   tegen het doel aan, onderste rij aan de cirkelrand. Op een groene ondergrond
   zodat de coach ziet dat hij naar de cirkel kijkt, niet naar een menu. */
.zonekiezer {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin: 12px 0; padding: 10px; border-radius: var(--radius-control);
  background: var(--veld);
}
.zonekiezer .btn { min-height: 62px; font-size: var(--tekst-klein); padding: 6px 4px; }
.spelerraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; margin: 12px 0; }
.spelerraster button {
  border: 0; background: var(--bg); border-radius: var(--radius-control);
  min-height: 58px; font-weight: 800; font-size: var(--tekst-klein); color: var(--inkt); padding: 6px 4px;
}
.spelerraster button .nr { display: block; font-size: var(--tekst-subtitel); color: var(--groen); }

/* Toast */
#toast-laag { position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 99; pointer-events: none; }
.toast {
  background: var(--inkt); color: var(--bg); padding: 12px 20px; border-radius: 999px;
  font-weight: 700; font-size: var(--tekst-nadruk); box-shadow: 0 6px 20px rgba(0,0,0,.28);
  animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Coachbord */
.bord-wrap { display: flex; flex-direction: column; gap: 10px; }
.bord-top-export { margin-left: auto; margin-bottom: 0; flex-wrap: nowrap; }
.bord-top-export .btn { min-width: 58px; min-height: 40px; font-size: var(--tekst-klein); padding: 3px 10px; }
.bord-snelstart { padding: 12px; margin-top: 10px; }
.bord-snelstart .knoppenrij { margin: 0; }
.bord-veld-wrap { background: var(--kaart); border: 0; border-radius: 24px; box-shadow: var(--schaduw); padding: 12px; position: relative; }
.bord-svg { width: 100%; height: auto; display: block; touch-action: none; border-radius: 16px; user-select: none; -webkit-user-select: none; }
.bord-labelbar { padding: 6px 2px 2px; display: flex; gap: 7px; align-items: stretch; flex-wrap: wrap; }
.bord-labelbar[hidden] { display: none; }
.bord-labelbar select {
  flex: 1 1 170px; width: 100%; min-width: 0; max-width: 340px; min-height: 40px; border: 0; border-radius: var(--radius-control);
  background: var(--kaart); box-shadow: var(--schaduw-klein);
  padding: 0 11px; font: inherit; font-size: var(--tekst-klein); font-weight: 800; color: var(--inkt);
}
.bord-labelbar select:disabled { color: var(--inkt-zachter); opacity: .65; }
.bord-labelbar .btn { flex: none; min-height: 40px; padding: 0 10px; font-size: var(--tekst-klein); }
.bord-toolbar { display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px; -webkit-overflow-scrolling: touch; }
.bord-toolbar::-webkit-scrollbar { display: none; }
.tool {
  flex: none; min-width: 58px; min-height: 50px; border-radius: var(--radius-control); border: 0;
  background: var(--kaart); color: var(--inkt); font-weight: 700; font-size: var(--tekst-klein); box-shadow: var(--schaduw-klein);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 8px;
}
.tool .t-ikoon { font-size: 18px; line-height: 1; }
.tool.actief { background: var(--groen); color: #fff; }
.bord-subtoolbar { display: flex; gap: 7px; overflow-x: auto; padding: 6px 2px 2px; -webkit-overflow-scrolling: touch; }
.bord-subtoolbar[hidden] { display: none; }
.bord-subtoolbar::-webkit-scrollbar { display: none; }
.bord-subtoolbar .tool { min-height: 48px; min-width: 56px; font-size: var(--tekst-klein); background: var(--kaart); }
.bord-subtoolbar .tool.actief { background: var(--groen); color: #fff; }
.kleur-balk { display: flex; align-items: center; gap: 8px; padding: 7px 4px 2px; overflow-x: auto; }
.kleur-balk::-webkit-scrollbar { display: none; }
.kleur-balk[hidden] { display: none; }
.kleur-balk .kleur-label { font-size: var(--tekst-klein); font-weight: 700; color: var(--inkt); flex: none; }
.kleur-balk .kleur-recht { flex: none; min-height: 44px; }
.kleur-swatch {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--zc);
  background: color-mix(in srgb, var(--zc) 32%, transparent); box-shadow: var(--schaduw-klein); padding: 0;
}
.kleur-swatch.actief { box-shadow: 0 0 0 2px var(--kaart), 0 0 0 4px var(--zc); }
.bord-acties {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  background: var(--kaart); border-radius: var(--radius); box-shadow: var(--schaduw-klein); padding: 8px;
}
.bord-acties .btn { flex: 1 1 auto; min-height: 44px; }
.bord-fases { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.bord-fases .fase-tel { font-weight: 700; font-size: var(--tekst-klein); color: var(--inkt-zacht); min-width: 70px; text-align: center; }
.bord-fases .btn[disabled] { opacity: .4; }
.bord-fases [data-fa="add"] { order: 1; }
.bord-fases [data-fa="del"] { order: 2; }
.bord-fases [data-fa="prev"] { order: 3; }
.bord-fases [data-fa="next"] { order: 4; }
.bord-fases .fase-tel { order: 5; }
.bord-fases [data-fa="snelheid"] { order: 6; }
.bord-fases [data-fa="speel"] { order: 7; }

/* Breed bord (bespreek-scherm op tv): tools links in één kolom, veldkeuze + veld rechts.
   besprekingScreen hergroepeert de bord-elementen in .bord-zij (tools) en .bord-hoofd
   (veldkeuze + veld). Op smal scherm lossen die wrappers op (display:contents) zodat de
   normale gestapelde volgorde terugkomt (volgorde via 'order'). */
.bord-wrap.breed .bord-zij, .bord-wrap.breed .bord-hoofd { display: contents; }
.bord-wrap.breed #veldkeuze { order: -2; }
.bord-wrap.breed .bord-toolbar { order: 0; }
.bord-wrap.breed .bord-labelbar { order: 0; }
.bord-wrap.breed .bord-subtoolbar { order: 0; }
.bord-wrap.breed .kleur-balk { order: 1; }
.bord-wrap.breed .bord-veld-wrap { order: 2; }
.bord-wrap.breed .bord-acties { order: 3; }
.bord-wrap.breed .bord-fases { order: 4; }
.bord-wrap.breed .bord-snelstart { order: 5; }
/* Kijkmodus (speler): de fase-navigatie hoort direct boven het veld, zodat
   "‹ › Speel af" op een telefoon meteen bereikbaar is en niet onder het bord
   wegvalt. Op het brede tv-scherm (≥900px) houdt de grid zijn eigen plaatsing. */
.bord-wrap.breed.bord-kijkmodus .bord-fases { order: 1; margin-top: 0; }

@media (min-width: 900px) {
  .bord-wrap.breed { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .bord-wrap.breed .bord-zij { display: flex; flex-direction: column; gap: 10px; }        /* tools bovenaan uitgelijnd */
  .bord-wrap.breed .bord-hoofd { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
  .bord-wrap.breed .bord-toolbar, .bord-wrap.breed .bord-subtoolbar { flex-direction: column; overflow: visible; }
  .bord-wrap.breed .bord-toolbar .tool, .bord-wrap.breed .bord-subtoolbar .tool { width: 100%; }
  /* Veldbreedte per veldtype: half/cirkel zijn minder hoog, dus die mogen breder
     worden (inzoomen) i.p.v. dezelfde breedte als heel veld. Zo vult elk veldtype
     de ruimte, zowel verticaal als gedraaid. 100% = de breedte van de veld-kolom. */
  .bord-wrap.breed[data-veldtype="heel"]   { --veldbreedte: min(50vh, 100%); }
  .bord-wrap.breed[data-veldtype="half"]   { --veldbreedte: min(94vh, 100%); }
  .bord-wrap.breed[data-veldtype="cirkel"] { --veldbreedte: min(148vh, 100%); }
  .bord-wrap.breed.veld-gedraaid[data-veldtype="heel"]   { --veldbreedte: min(128vh, 100%); }
  .bord-wrap.breed.veld-gedraaid[data-veldtype="half"]   { --veldbreedte: min(68vh, 100%); }
  .bord-wrap.breed.veld-gedraaid[data-veldtype="cirkel"] { --veldbreedte: min(43vh, 100%); }
  .bord-wrap.breed .bord-veld-wrap { width: var(--veldbreedte, min(50vh, 100%)); }
  /* Bovenbalk (veldkeuze) vast over de volle breedte, ongeacht het veldtype. */
  .bord-wrap.breed .bord-hoofd #veldkeuze { width: 100%; margin: 0; }
  /* Kleuren in een raster (4 per rij) i.p.v. een slider; label weg. */
  .bord-wrap.breed .kleur-balk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; overflow: visible; justify-items: center; }
  .bord-wrap.breed .kleur-balk .kleur-label { display: none; }
  .bord-wrap.breed .bord-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
}

@media (min-width: 1024px) {
  .view.bord-view {
    max-width: none;
    height: 100vh;
    padding: 20px 32px 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .view.bord-view > .topbalk {
    flex: none;
    padding: 0 0 12px;
  }
  .view.bord-view > .topbalk h1 { font-size: var(--tekst-titel); }

  .bord-wrap.bord-werkbord.breed {
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100vh - 94px);
    width: min(100%, 980px);
    margin: 0 auto;
    grid-template-columns: 204px minmax(0, 1fr);
    column-gap: 16px;
    align-items: stretch;
  }
  .bord-wrap.bord-werkbord.breed .bord-zij {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 5px 6px 2px;
    gap: 12px;
    scrollbar-width: thin;
  }
  .bord-wrap.bord-werkbord.breed .bord-hoofd {
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
  }
  .bord-wrap.bord-werkbord.breed .bord-hoofd #veldkeuze {
    flex: none;
    width: min(660px, 100%);
  }
  .bord-wrap.bord-werkbord.breed .bord-hoofd #veldkeuze button {
    min-height: 40px;
    font-size: var(--tekst-klein);
    font-weight: 750;
  }

  .bord-wrap.bord-werkbord.breed[data-veldtype="heel"] { --veldbreedte: min(50vh, 100%); }
  .bord-wrap.bord-werkbord.breed[data-veldtype="half"] { --veldbreedte: min(86vh, 100%); }
  .bord-wrap.bord-werkbord.breed[data-veldtype="cirkel"] { --veldbreedte: min(132vh, 100%); }
  .bord-wrap.bord-werkbord.breed.veld-gedraaid[data-veldtype="heel"] { --veldbreedte: min(120vh, 100%); }
  .bord-wrap.bord-werkbord.breed.veld-gedraaid[data-veldtype="half"] { --veldbreedte: min(64vh, 100%); }
  .bord-wrap.bord-werkbord.breed.veld-gedraaid[data-veldtype="cirkel"] { --veldbreedte: min(40vh, 100%); }
  .bord-wrap.bord-werkbord.breed .bord-veld-wrap {
    width: var(--veldbreedte);
    max-width: 100%;
    margin: 0 auto;
    padding: 9px;
    border-radius: 17px;
  }
  .bord-wrap.bord-werkbord.breed .bord-svg { border-radius: 12px; }

  .bord-wrap.bord-werkbord.breed .bord-acties,
  .bord-wrap.bord-werkbord.breed .bord-toolbar,
  .bord-wrap.bord-werkbord.breed .bord-subtoolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0;
  }
  .bord-wrap.bord-werkbord.breed .bord-subtoolbar {
    padding: 8px;
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--rand-zacht) 72%, transparent);
  }
  .bord-wrap.bord-werkbord.breed .bord-acties {
    background: transparent;
    box-shadow: none;
  }
  .bord-wrap.bord-werkbord.breed .bord-acties .btn,
  .bord-wrap.bord-werkbord.breed .bord-toolbar .tool,
  .bord-wrap.bord-werkbord.breed .bord-subtoolbar .tool {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    font-size: var(--tekst-klein);
    padding: 3px 6px;
  }
  .bord-wrap.bord-werkbord.breed .tool .t-ikoon { font-size: var(--tekst-subtitel); }
  .bord-wrap.bord-werkbord.breed .tool-breed { grid-column: 1 / -1; }
  .bord-wrap.bord-werkbord.breed .bord-labelbar { padding: 0; }
  .bord-wrap.bord-werkbord.breed .bord-labelbar select {
    max-width: none;
    min-height: 38px;
  }
  .bord-wrap.bord-werkbord.breed .bord-labelbar .btn {
    min-height: 38px;
    font-size: var(--tekst-klein);
  }
  .bord-wrap.bord-werkbord.breed .kleur-balk {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
  }
  .bord-wrap.bord-werkbord.breed .kleur-recht {
    grid-column: 1 / -1;
    min-height: 40px;
  }
  .bord-wrap.bord-werkbord.breed .kleur-swatch {
    width: 28px;
    height: 28px;
    justify-self: center;
  }
  .bord-wrap.bord-werkbord.breed .bord-fases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }
  .bord-wrap.bord-werkbord.breed .bord-fases .fase-tel {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .bord-wrap.bord-werkbord.breed .bord-fases [data-fa="snelheid"] {
    grid-column: 1 / -1;
  }
  .bord-wrap.bord-werkbord.breed .bord-fases [data-fa="speel"] {
    grid-column: 1 / -1;
  }
  .bord-wrap.bord-werkbord.breed .bord-fases .btn {
    min-width: 0;
    min-height: 38px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: var(--tekst-klein);
  }
  .bord-wrap.bord-werkbord.breed .bord-snelstart {
    margin-top: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .bord-wrap.bord-werkbord.breed .bord-snelstart .knoppenrij {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bord-wrap.bord-werkbord.breed .bord-snelstart .btn {
    min-height: 38px;
    font-size: var(--tekst-klein);
    padding: 6px 8px;
  }
}

/* Bespreek-scherm: lijst links, breed bord rechts (samen 3 visuele kolommen). */
.view.view-vol { max-width: 100%; }
.besprek { display: grid; gap: 16px; }
@media (min-width: 900px) { .besprek { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.besprek-lijst { display: grid; gap: 10px; }
.besprek-paneel .an-kop { align-items: flex-start; margin-bottom: 8px; }
.besprek-focus {
  margin: 0 0 10px; color: var(--inkt); font-size: var(--tekst-klein); font-weight: 750;
  line-height: 1.35; white-space: pre-wrap;
}
/* Hoogstens drie op een rij, en één als de kolom smal is. De 32% doet het werk:
   in een brede balk passen er precies drie naast elkaar, in de smalle
   zijkolom valt de ondergrens van 160px terug op één. Zo hoeft de regel niets
   te weten over welke van de twee indelingen actief is. */
.besprek-items { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 32%, 640px), 1fr)); }
/* Coachnotitie bij het gekozen bespreekpunt: leest als een onderschrift onder
   de lijst, zodat een speler het coachpunt bij de tekening ziet. */
.besprek-puntnotitie {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--bg); color: var(--inkt);
  font-size: var(--tekst-klein); font-weight: 650; line-height: 1.4; white-space: pre-wrap;
}
.besprek-item.actief { box-shadow: inset 0 0 0 2px rgba(21,98,58,.18); background: #fff; }
.besprek-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: var(--bg); border: 0; border-radius: 12px; padding: 7px 9px; margin-bottom: 6px;
  font-weight: 600; color: var(--inkt); }
.besprek-item .mini { flex: none; width: 46px; border-radius: 8px; overflow: hidden; background: var(--veld); }
.besprek-item .mini svg { display: block; width: 100%; height: auto; }
.besprek-item .besprek-video-mini {
  display: grid; place-items: center; height: 38px; color: var(--groen);
  background: var(--groen-licht);
}
.besprek-video-items { margin: 0 16px 14px; }
.besprek-video-item { text-decoration: none; }
.besprek-video-item.aan { box-shadow: inset 0 0 0 2px rgba(21,98,58,.22); background: #fff; }
.besprek-video-item[disabled] { opacity: .65; cursor: not-allowed; }
.besprek-video-paneel {
  width: min(1120px, 100%);
  display: grid;
  gap: 12px;
}
.besprek-video-paneel[hidden] { display: none !important; }
.besprek-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(23,37,28,.1);
  box-shadow: var(--schaduw);
}
.besprek-player iframe,
.besprek-player .besprek-yt { width: 100%; height: 100%; border: 0; display: block; }
.besprek-tekenlaag {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  touch-action: none;
}
.besprek-player.is-paused .besprek-tekenlaag {
  opacity: 1;
  pointer-events: auto;
  cursor: crosshair;
}
.besprek-video-tekenbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: none;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}
.besprek-player.is-paused .besprek-video-tekenbar { display: flex; }
.besprek-video-tools {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.besprek-video-tools button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--inkt-zacht);
  font: inherit;
  font-size: var(--tekst-klein);
  font-weight: 850;
}
.besprek-video-tools button.actief {
  background: var(--groen-licht);
  color: var(--groen);
}
.besprek-video-tekenbar .btn {
  min-height: 42px;
  padding: 0 12px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
@media (max-width: 760px) {
  .besprek-video-tekenbar {
    left: 8px;
    right: 8px;
    top: 8px;
    flex-wrap: wrap;
  }
  .besprek-video-tools { flex: 1 1 100%; }
  .besprek-video-tools button { flex: 1; justify-content: center; }
}
.besprek-video-meta {
  color: var(--inkt-zacht);
  font-size: var(--tekst-klein);
  font-weight: 800;
  line-height: 1.25;
}
.besprek-video-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  max-height: 26vh;
  overflow: auto;
  padding: 2px;
}
.besprek-video-leeg {
  min-height: min(56vh, 520px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 18px;
  background: var(--kaart);
  color: var(--inkt-zacht);
  text-align: center;
  box-shadow: var(--schaduw);
}
.besprek-video-leeg b { color: var(--inkt); font-size: var(--tekst-nadruk); }
.besprek-video-leeg small { max-width: 360px; font-size: var(--tekst-klein); font-weight: 750; }
.bord-wrap.breed.besprek-video-open .bord-zij,
.bord-wrap.breed.besprek-video-open .bord-veld-wrap { display: none !important; }
.bord-wrap.breed.besprek-video-open .bord-hoofd { align-items: stretch; }
@media (min-width: 900px) {
  .bord-wrap.breed.besprek-video-open { grid-template-columns: minmax(0, 1fr); }
  .bord-wrap.breed.besprek-video-open .bord-hoofd { grid-column: 1 / -1; width: 100%; }
}
.besprek-item .bi-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.besprek-item .bi-naam b { font-size: var(--tekst-klein); font-weight: 850; line-height: 1.12; overflow-wrap: anywhere; }
.besprek-item .bi-naam small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 800; line-height: 1.1; }
.besprek-details { padding: 0; overflow: hidden; }
.besprek-details summary {
  min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 13px 16px; cursor: pointer; color: var(--inkt);
}
.besprek-details summary::-webkit-details-marker { display: none; }
.besprek-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.besprek-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; }
.besprek-details summary small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.2; }
.besprek-details summary i {
  flex: none; min-width: 34px; min-height: 30px; border-radius: 999px; background: var(--groen-licht);
  color: var(--groen); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein);
}
.besprek-details summary::after {
  content: '›'; color: var(--inkt-zachter); font-size: 22px; line-height: 1; transform: rotate(90deg);
}
.besprek-details[open] summary::after { transform: rotate(-90deg); }
.besprek-details #besp-bewaard { margin: 0 16px 14px; }

/* ── Staande presentatie-indeling ───────────────────────────────────────────
   In de staande indeling komt de bespreking gestapeld: bespreekpunten
   horizontaal bovenaan, het veld groot in het midden, de knoppen horizontaal
   eronder. Bedoeld voor een staand presentatiedisplay (bv. 1440×2560) of een
   telefoon rechtop. De class 'staand' wordt door besprekingScreen gezet: vanzelf
   op een portret-scherm, of handmatig via de knop 'Staand/Liggend'. Zo blijft er
   één set regels, of het nu automatisch of geforceerd is. Dit blok staat ná de
   ≥900px-regels én is specifieker (.besprek.staand …), dus het wint ook op een
   breed staand scherm. */
/* align-items: stretch, want de ≥900px-liggend-regel hierboven zet 'm op
   'start' — en dat blijft gelden zolang dit blok het niet overschrijft, ook al
   wint deze selector op specificiteit. Zonder reset kreeg besprek-lijst hier
   zijn breedte van zijn eigen inhoud (355px) in plaats van van de volle
   staande kolom (1416px): precies waarom de bespreekpunten en het bord op een
   breed staand scherm allebei te smal bleven, ongeacht viewport-breedte. */
.besprek.staand { display: flex; flex-direction: column; align-items: stretch; gap: 14px; grid-template-columns: none; }
.besprek.staand .besprek-lijst { order: 0; }

/* Bespreekpunten in hetzelfde raster als de liggende indeling (hoogstens drie
   op een rij, containergevoelig). Was een horizontale scrollstrook met een
   vaste itembreedte — logisch bedacht voor een smal staand telefoonscherm,
   maar "staand" is hier ook de indeling voor een breed presentatiescherm
   (1440×2560), en daar toonde die strook maar een paar punten met de rest
   afgesneden terwijl er volop ruimte was om ze naast elkaar te zetten. */
.besprek.staand .besprek-items { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 32%, 640px), 1fr)); }
.besprek.staand .besprek-item { margin-bottom: 0; }

/* Board-kolom (het tweede kind van .besprek) onder de punten. */
.besprek.staand > div:last-child { order: 1; min-width: 0; }

/* Bord: veld boven, knopgroepen eronder — herstel de kolom-indeling die de
   ≥900px-grid oplegde en zet het veld vooraan via order. */
.besprek.staand .bord-wrap.breed { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.besprek.staand .bord-wrap.breed .bord-zij, .besprek.staand .bord-wrap.breed .bord-hoofd { display: contents; }
.besprek.staand .bord-wrap.breed .bord-veld-wrap { order: 0; width: var(--veldbreedte, min(92vw, 46vh)); }
.besprek.staand .bord-wrap.breed #veldkeuze { order: 1; width: min(92vw, 46vh); margin: 0; }
.besprek.staand .bord-wrap.breed .bord-toolbar { order: 2; flex-direction: row; overflow-x: auto; }
.besprek.staand .bord-wrap.breed .bord-toolbar .tool { width: auto; }
.besprek.staand .bord-wrap.breed .bord-labelbar { order: 2; }
.besprek.staand .bord-wrap.breed .bord-subtoolbar { order: 2; flex-direction: row; }
.besprek.staand .bord-wrap.breed .bord-subtoolbar .tool { width: auto; }
.besprek.staand .bord-wrap.breed .kleur-balk { order: 3; display: flex; }
.besprek.staand .bord-wrap.breed .bord-acties { order: 4; display: flex; }
/* Fase-navigatie (‹ › Speel af, +/– fase, snelheid) tussen de bespreekpunten en
   het veld: je kiest een punt, regelt de fase/afspelen, en kijkt er meteen onder.
   De overige knoppen (veldkeuze, tekentools, kleuren) blijven ónder het veld. */
.besprek.staand .bord-wrap.breed .bord-fases { order: -1; margin-top: 0; justify-content: center; }
.besprek.staand .bord-wrap.breed.bord-kijkmodus .bord-fases { order: -1; }

/* Veldbreedte hoogte-gebaseerd, zodat er ruimte overblijft voor de punten
   (boven) en de knoppen (onder). Half/cirkel zijn minder hoog en mogen groter. */
.besprek.staand .bord-wrap.breed[data-veldtype="heel"]   { --veldbreedte: min(92vw, 46vh); }
.besprek.staand .bord-wrap.breed[data-veldtype="half"]   { --veldbreedte: min(92vw, 84vh); }
.besprek.staand .bord-wrap.breed[data-veldtype="cirkel"] { --veldbreedte: min(92vw, 92vh); }

.toetsnr { display: inline-block; min-width: 13px; font-size: var(--tekst-klein); font-weight: 800; color: var(--inkt-zachter); margin-right: 5px; vertical-align: baseline; }
.wissel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wissel-knop { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 44px; text-align: left; background: var(--bg); border: 0; border-radius: 11px; padding: 6px 9px; font-weight: 600; color: var(--inkt); min-width: 0; }
.wissel-knop .rugnr { flex: none; width: 30px; height: 30px; font-size: var(--tekst-klein); }
.wissel-knop .wn-naam { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--tekst-klein); }
.wissel-knop .wn-tijd { flex: none; font-size: var(--tekst-klein); color: var(--inkt-zachter); font-variant-numeric: tabular-nums; }
.bord-tekst-invoer {
  position: absolute; z-index: 10; background: var(--kaart); border: 2px solid var(--groen);
  border-radius: 10px; padding: 7px 9px; font: inherit; font-size: var(--tekst-nadruk); width: 180px;
  /* Textarea: geen sleepgreep en niet uit zichzelf schalen — de hoogte wordt in
     board.js per regel bijgesteld. overflow-y voorkomt een scrollbalk die de
     hoogteberekening in de weg zit. */
  resize: none; overflow-y: hidden; line-height: 1.3; font-family: inherit;
}
.bord-speler-invoer { text-align: center; font-weight: 800; width: 200px; }
.miniatuur { width: 100%; border-radius: 16px; display: block; background: var(--veld); overflow: hidden; }
.miniatuur svg { display: block; width: 100%; height: auto; }

/* Statistiek-tegels */
.statraster { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.stat { background: var(--bg); border-radius: 18px; padding: 12px 15px; }
.stat .cijfer { font-size: 28px; font-weight: 800; letter-spacing: 0; }
.stat .label { font-size: var(--tekst-klein); color: var(--inkt-zachter); font-weight: 700; }

table.simpel { width: 100%; border-collapse: collapse; font-size: var(--tekst-nadruk); }
table.simpel th, table.simpel td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--rand); }
table.simpel th { font-size: var(--tekst-klein); color: var(--inkt-zachter); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
table.simpel td { font-weight: 600; }

/* Ranglijsten (seizoen + speler) met balkjes */
.rangen { display: flex; flex-direction: column; }
.rang { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand-zacht); }
.rang:last-child { border-bottom: 0; }
.rang-nr { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--bg); color: var(--inkt-zachter); font-weight: 800; font-size: var(--tekst-klein); display: flex; align-items: center; justify-content: center; }
.rang.top .rang-nr { background: var(--groen); color: #fff; }
.rang-naam { flex: none; width: 36%; font-weight: 700; font-size: var(--tekst-nadruk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang-balk { flex: 1; height: 9px; border-radius: 5px; background: var(--bg); overflow: hidden; }
.rang-balk > i { display: block; height: 100%; background: var(--groen); border-radius: 5px; min-width: 4px; }
.rang-waarde { flex: none; min-width: 52px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.rang-waarde small { font-weight: 700; color: var(--inkt-zachter); font-size: var(--tekst-klein); }
.rang-kaart:not(.open) .rang-extra { display: none; }
.rang-meer { color: var(--groen); font-weight: 700; }

/* Rijk statistiekendashboard */
.stats-controls { display: grid; gap: 12px; }
.stats-controls .veld { margin-bottom: 0; }
.stats-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--groen); color: #fff;
}
.stats-hero h2 { color: #fff; font-size: var(--tekst-titel); margin: 8px 0 3px; }
.stats-hero .subtekst { color: rgba(255,255,255,.78); }
.stats-hero .badge { background: rgba(255,255,255,.2); color: #fff; }
.stats-score {
  flex: none; display: flex; align-items: center; gap: 9px;
  font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.stats-score span { opacity: .55; }
.stats-kpis { margin-bottom: 14px; }
.stats-kpis .stat { background: var(--kaart); box-shadow: var(--schaduw); }
.stats-kpis small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; }
.stat-card h2 { margin-bottom: 12px; }
.stat-inzichten p {
  margin: 0 0 8px; background: var(--bg); border-radius: 14px;
  padding: 10px 12px; font-weight: 700;
}
.stat-inzichten p:last-child { margin-bottom: 0; }
.stats-grid-2, .stats-grid-3 { display: grid; gap: 14px; }
.stats-veld {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
  background: var(--veld); border-radius: 18px; padding: 9px;
}
.stats-vak {
  aspect-ratio: 1.08 / 1; border-radius: 8px; position: relative; overflow: hidden;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
}
.stats-vak { cursor: pointer; }
.stats-vak:hover { outline: 2px solid rgba(255,255,255,.5); outline-offset: -2px; }
.stats-vak::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(var(--rgb, 239,216,63),var(--a)); mix-blend-mode: screen;
}
.vf-hint { margin: 8px 0 10px; }
.vf-refine-titel { display: block; margin: 10px 0 5px; font-size: var(--tekst-klein); font-weight: 800; text-transform: uppercase; color: var(--inkt-zachter); }
#veld-filter .chips { margin-bottom: 4px; }
.vf-refines { display: grid; gap: 6px; margin: 4px 0 14px; }
.vf-refines .chip { font-size: var(--tekst-klein); padding: 5px 10px; }
@media (min-width: 620px) { .vf-refines { grid-template-columns: repeat(3, 1fr); } }
.vak-detail-kop { margin: 16px 0 8px; font-size: var(--tekst-klein); }
.veld-paar { display: grid; gap: 14px; }
@media (min-width: 620px) { .veld-paar { grid-template-columns: 1fr 1fr; align-items: start; } }
.veld-zijde-kop { margin: 0 0 8px; font-size: var(--tekst-nadruk); }
.stats-veld--horizontaal { grid-template-columns: repeat(8, 1fr); }
.stats-veld--horizontaal .stats-vak { aspect-ratio: 1.25 / 1; }
/* Zone-scheidslijnen: aanval (vak 1-10) · middenveld (11-25) · verdediging (26-40) */
.stats-veld .zone-b { border-bottom: 3px solid rgba(255,255,255,.55); }
.stats-veld--horizontaal .zone-r { border-right: 3px solid rgba(255,255,255,.55); }
/* Detail-lijst: label + waarde/ratio op één regel, dunne balk eronder (leesbaar) */
.detail-lijst { display: flex; flex-direction: column; gap: 11px; }
.detail-rij-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; font-size: var(--tekst-klein); }
.detail-rij-kop > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-rij-kop strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.detail-rij-kop small { color: var(--inkt-zachter); font-weight: 700; margin-left: 6px; }
.detail-balk { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.detail-balk i { display: block; height: 100%; background: var(--groen); border-radius: 99px; }
.spelerstat { cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.spelerstat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.spelerstat:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.stats-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin: 8px 0 0; font-size: var(--tekst-klein); font-weight: 700; color: var(--inkt-zachter);
}
.stats-legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; }
.stat-bar b.stat-rood { background: #dc2626; }
.stat-bar strong small { color: var(--inkt-zachter); font-weight: 700; }
.stats-vak span, .stats-vak b { position: relative; z-index: 1; }
.stats-vak span { font-size: var(--tekst-klein); font-weight: 800; opacity: .75; }
.stats-vak b {
  position: absolute; right: 5px; bottom: 3px; font-size: var(--tekst-klein);
  font-variant-numeric: tabular-nums; color: #fff;
}
.stat-bars { display: flex; flex-direction: column; gap: 8px; }
.stat-bar {
  display: grid; grid-template-columns: minmax(92px, 34%) 1fr 42px;
  align-items: center; gap: 9px; font-size: var(--tekst-klein); font-weight: 700;
}
.stat-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-bar b {
  height: 10px; min-width: 5px; background: var(--groen);
  border-radius: 99px; display: block;
}
.stat-bar strong { text-align: right; font-variant-numeric: tabular-nums; }
.stat-trend { overflow-x: auto; }
.trend-rij {
  min-width: 720px; display: grid; grid-template-columns: 1.5fr 70px repeat(4, 1fr);
  gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rand-zacht);
  color: var(--inkt); text-decoration: none; font-size: var(--tekst-klein);
}
.trend-rij:last-child { border-bottom: 0; }
.trend-kop { color: var(--inkt-zachter); font-size: var(--tekst-klein); text-transform: uppercase; font-weight: 800; }
.trend-rij span { min-width: 0; }
.trend-rij span strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-rij span small { display: block; color: var(--inkt-zachter); font-weight: 700; }
.trend-rij i {
  position: relative; min-height: 26px; border-radius: 9px; background: var(--bg);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  overflow: hidden; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums;
}
.trend-rij i em {
  position: absolute; left: 0; top: 0; bottom: 0; background: var(--salie);
  border-radius: 9px; z-index: 0;
}
.trend-rij i { isolation: isolate; }
.trend-rij i::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.spelerstats-grid { display: grid; gap: 10px; }
.spelerstat { margin-bottom: 0; padding: 14px; background: var(--bg); }
.spelerstat-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.spelerstat-kop h3 { margin: 0 0 2px; }
.spelerstat-kop p { margin: 0; color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mini-stats span {
  background: var(--kaart); border-radius: 11px; padding: 7px 8px;
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 700;
}
.mini-stats b { display: block; color: var(--inkt); font-size: var(--tekst-subtitel); font-variant-numeric: tabular-nums; }

@media (min-width: 760px) {
  .stats-controls { grid-template-columns: 260px minmax(260px, 1fr); align-items: end; }
  .stats-kpis { grid-template-columns: repeat(3, 1fr); }
  .stats-grid-2 { grid-template-columns: minmax(320px, .9fr) minmax(0, 1fr); align-items: start; }
  .stats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .spelerstats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
  .spelerstats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.leeg { text-align: center; color: var(--inkt-zachter); padding: 30px 12px; font-weight: 500; }
.leeg .ikoon { font-size: 38px; }
.leeg-start {
  background: var(--kaart); border-radius: var(--radius); box-shadow: var(--schaduw);
  color: var(--inkt-zacht); padding: 24px 16px;
}
.leeg-start .ico { color: var(--groen); opacity: .9; }
.leeg-start h2 { margin: 8px 0 4px; color: var(--inkt); font-size: var(--tekst-subtitel); }
.leeg-start p { margin: 0 auto 14px; max-width: 440px; color: var(--inkt-zacht); line-height: 1.35; }
.leeg-acties { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.eersteweek {
  margin-top: 12px; padding: 12px; border-radius: 18px; background: var(--groen-licht);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.eersteweek b { display: block; font-size: var(--tekst-nadruk); font-weight: 900; color: var(--groen); }
.eersteweek small { display: block; color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.3; }
.eersteweek .btn { flex: none; }
@media (max-width: 560px) {
  .eersteweek { align-items: stretch; flex-direction: column; }
  .eersteweek .btn { width: 100%; }
}
.scheider { border: 0; border-top: 1px solid var(--rand); margin: 16px 0; }
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: var(--tekst-klein); font-weight: 800; background: var(--salie); color: #1d6b3e; }
.badge-grijs { background: var(--rand-zacht); color: #655F52; }  /* 5,2:1 op --rand-zacht */
/* Aandacht-badge (live, evaluatie, herstel). Wit op --oranje haalt 3,2:1;
   op --oranje-tekst 5,6:1. Als klasse, zodat de inline-variant niet terugkomt. */
.badge-live { background: var(--oranje-tekst); color: #fff; }

/* Agenda — maandkalender */
.agenda-filterbar { padding: 12px 16px 14px; }
.agenda-filterkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.agenda-filterkop h2 { margin: 0; font-size: var(--tekst-subtitel); line-height: 1.1; }
.agenda-filtermeta { display: flex; align-items: center; gap: 8px; }
.agenda-nieuw { width: 44px; height: 44px; min-width: 44px; padding: 0; }
.agenda-segmenten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.agenda-plan-keuzes .lijst-item { width: 100%; border: 0; text-align: left; }
.agenda-weekkaart {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 16px; box-shadow: var(--schaduw-klein);
}
.agenda-weekkaart h2 { margin: 5px 0 4px; font-size: var(--tekst-subtitel); line-height: 1.15; }
.agenda-weekkaart .subtekst { margin: 0; }
.agenda-weekstats { display: grid; grid-template-columns: repeat(3, minmax(72px, 1fr)); gap: 8px; }
.agenda-weekstats a {
  min-height: 52px; border-radius: 16px; background: var(--bg); color: var(--inkt);
  text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 8px 10px; text-align: center;
}
.agenda-weekstats b { font-size: var(--tekst-subtitel); font-weight: 950; color: var(--groen); line-height: 1; }
.agenda-weekstats span {
  color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 850; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-lijstgroepen { display: grid; gap: 14px; margin-top: 4px; }
.agenda-lijstsectie { display: grid; gap: 8px; }
.agenda-lijstkop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 2px; color: var(--inkt-zachter); font-size: var(--tekst-klein);
  font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.agenda-lijstkop b {
  min-width: 26px; min-height: 24px; border-radius: 999px; background: var(--rand-zacht);
  color: var(--groen); display: grid; place-items: center; font-size: var(--tekst-klein); font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .agenda-segmenten { grid-template-columns: 1fr; }
  .agenda-weekkaart { grid-template-columns: 1fr; }
  .agenda-weekstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.archief-filterbar { padding: 12px 16px 14px; }
.archief-filterkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.archief-filterkop h2 { margin: 0; font-size: var(--tekst-subtitel); line-height: 1.1; }
.archief-filterbar #seizoen-filter { margin-bottom: 10px; }
.archief-filterbar .zoek { margin-bottom: 0; background: var(--rand-zacht); box-shadow: none; }
.archief-cockpit {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 12px; box-shadow: var(--schaduw-klein);
}
.archief-cockpit span {
  min-height: 54px; border-radius: 16px; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.archief-cockpit b { font-size: 18px; font-weight: 950; color: var(--groen); line-height: 1; font-variant-numeric: tabular-nums; }
.archief-cockpit small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 850; line-height: 1.1; text-align: center; }
.archief-lijstgroepen { display: grid; gap: 14px; }
.archief-lijstsectie { display: grid; gap: 8px; }
.archief-lijstkop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 2px; color: var(--inkt-zachter); font-size: var(--tekst-klein);
  font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.archief-lijstkop b {
  min-width: 26px; min-height: 24px; border-radius: 999px; background: var(--rand-zacht);
  color: var(--groen); display: grid; place-items: center; font-size: var(--tekst-klein); font-variant-numeric: tabular-nums;
}
.kal-balk { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kal-balk b { font-size: var(--tekst-subtitel); font-weight: 800; text-transform: capitalize; }
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.kal-kop { text-align: center; font-size: var(--tekst-klein); color: var(--inkt-zachter); font-weight: 800; padding: 2px 0; }
.kal-dag {
  min-width: 0; min-height: 118px; border: 0; border-radius: 8px; background: var(--kaart); box-shadow: var(--schaduw);
  padding: 7px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--inkt); font: inherit;
}
.kal-dag.leeg { background: transparent; box-shadow: none; }
.kal-dag.vandaag { outline: 2px solid var(--groen); outline-offset: -2px; }
.kal-dag.heeft { cursor: pointer; }
.kal-dag .nr { font-size: var(--tekst-klein); font-weight: 900; line-height: 1; }
.kal-items, .kal-maanditems { min-width: 0; display: grid; gap: 4px; }
.kal-item {
  min-width: 0; border-left: 3px solid var(--blauw); border-radius: 6px; background: var(--rand-zacht);
  padding: 4px 5px; display: grid; gap: 2px; color: var(--inkt); line-height: 1.08;
}
.kal-item-wedstrijd { border-left-color: var(--groen); background: var(--groen-licht); }
.kal-item-kop { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.kal-item b, .kal-item time { font-size: var(--tekst-klein); font-weight: 900; white-space: nowrap; }
.kal-item b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kal-item time { color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.kal-item small {
  min-width: 0; color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal-type-kort { display: none; }
.kal-meer { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 850; padding-left: 4px; }
.kal-maandlijst { display: none; }
.kal-maandleeg { margin: 0; color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 800; }
@media (max-width: 900px) and (min-width: 700px) {
  .kal-type-lang { display: none; }
  .kal-type-kort { display: inline; }
  .kal-item-kop { align-items: flex-start; flex-direction: column; gap: 1px; }
}
@media (max-width: 699px) {
  .kalender { display: none; }
  .kal-maandlijst { display: grid; gap: 7px; }
  .kal-maanddag {
    width: 100%; min-height: 58px; border: 0; border-radius: 8px; background: var(--kaart); box-shadow: var(--schaduw-klein);
    padding: 8px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start;
    color: var(--inkt); font: inherit; text-align: left;
  }
  .kal-maanddag.vandaag { outline: 2px solid var(--groen); outline-offset: -2px; }
  .kal-maanddatum { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .kal-maanddatum small { color: var(--inkt-zachter); font-size: var(--tekst-klein); font-weight: 900; text-transform: uppercase; }
  .kal-maanddatum b { font-size: var(--tekst-subtitel); font-weight: 950; line-height: 1; }
  .kal-maanditems .kal-item { padding: 6px 7px; }
  .kal-maanditems .kal-item b, .kal-maanditems .kal-item time, .kal-maanditems .kal-item small { font-size: var(--tekst-klein); }
}

/* ── Statistieken 2.0 (redesign naar Claude Design "Statistieken Dashboard") ── */
.stats2 {
  width: 100%; margin: 0 auto;
  /* --s2-mut haalde 2,7:1 en --s2-tekst 4,1:1 op de lichtste ondergrond van
     dit scherm. De rangorde mut > tekst > sub blijft, maar wordt nu vooral
     door grootte en gewicht gedragen in plaats van door onleesbaar grijs. */
  --s2-kaart: #fff; --s2-ink: #17251c; --s2-mut: #606D65; --s2-sub: #5d6b62;
  --s2-tekst: #5F6C64; --s2-rand: rgba(23,37,28,.08); --s2-rand-z: rgba(23,37,28,.06);
  --s2-zacht: #f4efe4; --s2-balkbg: #eef1ea; --s2-accent: #12472c;
  --s2-good: #12703B; --s2-warn: #7A5710; --s2-bad: #A93A1C;  /* als tekst: 5,5-5,8:1 op crème */
  --s2-good-vlak: #1f8a4d; --s2-warn-vlak: #b8842a; --s2-bad-vlak: #c9502f;
  color: var(--s2-ink);
}
html[data-thema="donker"] .stats2 {
  --s2-kaart: var(--kaart); --s2-ink: var(--inkt); --s2-mut: var(--inkt-zachter);
  --s2-sub: var(--inkt-zacht); --s2-tekst: var(--inkt-zacht); --s2-rand: var(--rand);
  --s2-rand-z: var(--rand-zacht); --s2-zacht: #2a2519; --s2-balkbg: #332d22; --s2-accent: #9fd0b0;
  --s2-good: #6fc492; --s2-warn: #e0b45c; --s2-bad: #e2846a;
  --s2-good-vlak: #6fc492; --s2-warn-vlak: #e0b45c; --s2-bad-vlak: #e2846a;
}
.stats2 .tnum { font-variant-numeric: tabular-nums; }

/* kop */
.s2-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.s2-terug { width: 44px; height: 44px; border-radius: var(--radius-control); background: var(--s2-kaart); border: 0; box-shadow: var(--schaduw-zwevend); display: flex; align-items: center; justify-content: center; color: var(--s2-ink); font-size: 18px; text-decoration: none; flex: none; transition: transform .12s ease, box-shadow .12s ease; }
.s2-terug:active { transform: translateY(1px); box-shadow: var(--schaduw-zwevend-in); }
@media (hover: hover) { .s2-terug:hover { transform: translateY(1px); box-shadow: var(--schaduw-zwevend-in); } }
.s2-titel { font-size: var(--tekst-titel); font-weight: 800; letter-spacing: 0; }
.s2-kop .s2-mode { margin-left: auto; }
.s2-kop .s2-niveau { flex: none; }
/* Losse witte zwevende pillen — zelfde look als de filters elders in de app. */
.s2-pill { display: flex; gap: 8px; background: transparent; border: 0; border-radius: 0; padding: 0; }
.s2-pill button, .s2-tabs button {
  flex: 0 0 auto; padding: 7px 15px; min-height: 44px; min-width: 44px; border-radius: 999px; border: 0;
  font-size: var(--tekst-klein); font-weight: 700; color: var(--s2-sub); background: var(--s2-kaart);
  box-shadow: var(--schaduw-zwevend); white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.s2-pill--groot button { min-height: 44px; padding: 9px 18px; }
.s2-pill button.aan, .s2-tabs button.aan { background: var(--groen); color: #fff; }
.s2-pill button:active, .s2-tabs button:active { transform: translateY(1px); box-shadow: var(--schaduw-zwevend-in); }
@media (hover: hover) {
  .s2-pill button:hover, .s2-tabs button:hover { transform: translateY(1px); box-shadow: var(--schaduw-zwevend-in); }
}
.s2-select { appearance: none; -webkit-appearance: none; background: var(--s2-kaart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a968b' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--s2-rand); border-radius: 12px; padding: 9px 30px 9px 14px; font: inherit; font-size: var(--tekst-klein); font-weight: 600; color: var(--s2-ink); max-width: 240px; }
.s2-spelerselect { min-width: 190px; }
.s2-speler-vast {
  min-height: 44px; border-radius: 999px; background: var(--s2-zacht); color: var(--s2-accent);
  display: inline-flex; align-items: center; padding: 0 15px; font-size: var(--tekst-klein); font-weight: 900;
}

/* hero + tabs */
.s2-hero { background: linear-gradient(135deg,#134a2e,#0f3d26); border-radius: 20px; padding: 22px 26px; display: flex; align-items: center; gap: 20px; box-shadow: 0 8px 24px rgba(15,61,38,.18); }
.s2-hero .badge2 { display: inline-block; background: rgba(255,255,255,.14); color: #cfe6d6; font-size: var(--tekst-klein); font-weight: 700; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.s2-hero h2 { margin: 0; font-size: var(--tekst-titel); font-weight: 800; color: #fff; letter-spacing: 0; line-height: 1.05; }
.s2-hero h2 span { color: #8fc0a0; font-weight: 600; }
.s2-hero .meta { font-size: var(--tekst-klein); color: #a9cdb6; margin-top: 7px; font-weight: 600; }
.s2-score { text-align: right; }
.s2-score .cf { font-size: 48px; font-weight: 800; color: #fff; line-height: 1; white-space: nowrap; }
.s2-score .lbl { font-size: var(--tekst-klein); color: #8fc0a0; font-weight: 700; letter-spacing: .06em; margin-top: 2px; }
.s2-persoon-matchstats { display: grid; grid-template-columns: repeat(3, minmax(72px, 1fr)); gap: 8px; min-width: 260px; }
.s2-persoon-matchstats span {
  min-height: 66px; border-radius: 14px; background: rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.s2-persoon-matchstats b { color: #fff; font-size: 27px; line-height: 1; font-weight: 900; }
.s2-persoon-matchstats small { color: #a9cdb6; font-size: var(--tekst-klein); line-height: 1.1; font-weight: 800; }
.s2-tabs { display: flex; gap: 8px; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 18px 0 22px; overflow-x: auto; }

/* kaarten & lijstjes */
.s2-h { font-size: var(--tekst-nadruk); font-weight: 800; letter-spacing: 0; margin: 0 0 12px; }
.s2-card { background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 16px; padding: 18px 20px; }
.s2-card h3 { margin: 0 0 4px; font-size: var(--tekst-klein); font-weight: 800; }
.s2-card .toel { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 600; margin: 0 0 16px; }
.s2-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.s2-kpi { background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 16px; padding: 16px 16px 15px; display: flex; flex-direction: column; gap: 2px; min-height: 118px; }
.s2-kpi .bovenrij { display: flex; justify-content: space-between; align-items: flex-start; }
.s2-kpi .lbl { font-size: var(--tekst-klein); font-weight: 700; color: var(--s2-mut); letter-spacing: .02em; }
.s2-kpi .val { font-size: 30px; font-weight: 800; line-height: 1.1; margin-top: auto; }
.s2-kpi .sub { font-size: var(--tekst-klein); color: var(--s2-tekst); font-weight: 600; }
.s2-ring { width: 34px; height: 34px; border-radius: 50%; position: relative; flex: none; }
.s2-ring i { position: absolute; inset: 0; border-radius: 50%; }
.s2-ring b { position: absolute; inset: 4px; border-radius: 50%; background: var(--s2-kaart); display: flex; align-items: center; justify-content: center; font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-sub); }
.t-good { color: var(--s2-good); } .t-warn { color: var(--s2-warn); } .t-bad { color: var(--s2-bad); } .t-neutraal { color: var(--s2-ink); }
.s2-duo { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 22px; }
.s2-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.s2-kaartkop { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: var(--tekst-klein); font-weight: 800; }
.s2-punt { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--s2-rand-z); font-size: var(--tekst-klein); font-weight: 600; line-height: 1.35; }
.s2-punt b { flex: none; }
.s2-actieplan { margin-bottom: 22px; }
.s2-actieplan-direct {
  padding: 14px 16px 16px;
}
.s2-actieplan-kop {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.s2-actieplan-kop .badge { flex: none; background: var(--s2-zacht); color: var(--s2-accent); }
.s2-acties { display: grid; grid-template-columns: 1fr; gap: 10px; }
.s2-actie { background: var(--s2-zacht); border-radius: 14px; padding: 13px 14px; }
.s2-actie-primary {
  /* 12% groen maakte deze kaart net donker genoeg om --s2-sub en het
     wereldaccent onder 4,5:1 te duwen. 7% houdt het accent zichtbaar en de
     tekst leesbaar; de rand draagt de nadruk. */
  background: color-mix(in srgb, var(--groen) 7%, var(--s2-zacht));
  border: 1px solid color-mix(in srgb, var(--groen) 28%, transparent);
}
.s2-actie span { display: inline-flex; margin-bottom: 7px; font-size: var(--tekst-klein); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--s2-accent); }
.s2-actie b { display: block; font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-ink); }
.s2-actie p { margin: 4px 0 0; color: var(--s2-sub); font-size: var(--tekst-klein); font-weight: 650; line-height: 1.35; }
/* Na .s2-actie p: gelijke specificiteit, dus de volgorde beslist. Op de
   getinte primaire kaart zakt --s2-sub onder 4,5:1. */
.s2-actie-primary p { color: var(--s2-ink); }
.s2-actie .btn { margin-top: 10px; box-shadow: none; }
.analyse-details { padding: 0; overflow: hidden; margin-bottom: 12px; }
.analyse-details summary {
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 14px 16px; cursor: pointer; color: var(--s2-ink);
}
.analyse-details summary::-webkit-details-marker { display: none; }
.analyse-details summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.analyse-details summary b { font-size: var(--tekst-nadruk); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.analyse-details summary small {
  color: var(--s2-mut); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analyse-details summary i {
  flex: none; min-width: 44px; min-height: 44px; border-radius: 999px; background: var(--s2-zacht);
  color: var(--s2-accent); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: var(--tekst-klein); padding: 0 10px;
}
/* Openstaand analysewerk: het enige tellertje dat blijft — rechts en opvallend. */
.analyse-werkdetails summary i {
  /* Tellerbadge: wit op --oranje haalde 3,2:1. */
  margin-left: auto; background: var(--oranje-tekst); color: #fff; min-width: 36px; min-height: 36px;
  box-shadow: 0 2px 10px rgba(233,106,60,.45);
}
.analyse-details summary::after {
  content: '›'; color: var(--s2-mut); font-size: 24px; line-height: 1; transform: rotate(90deg);
}
.analyse-details[open] summary::after { transform: rotate(-90deg); }
.analyse-details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.analyse-details > :last-child { margin-bottom: 16px; }
.analyse-details .s2-kpis { margin-left: 16px; margin-right: 16px; margin-bottom: 16px; }
.analyse-details .s2-duo { margin-left: 16px; margin-right: 16px; }
.analyse-details .s2-card { box-shadow: none; }
.analyse-werkdetails > .s2-card {
  margin-left: 16px; margin-right: 16px; background: var(--s2-zacht); box-shadow: none;
}
.analyse-werkdetails > .s2-card:last-child { margin-bottom: 16px; }
.stats2:has(.analyse-tabbar button[data-tab="overzicht"]:not(.aan)) .analyse-werkdetails { display: none; }
.analyse-filters { padding: 10px 14px 12px; margin-bottom: 12px; box-shadow: none; border-color: var(--s2-rand-z); }
.analyse-filters .s2-veldbalk { margin: 0; }
/* Bovenste balk (filters) subtieler dan de tabs eronder: kleiner + lichtere schaduw */
.analyse-filters .s2-pill button {
  min-height: 44px; padding: 6px 13px; font-size: var(--tekst-klein); box-shadow: var(--schaduw-klein);
}
.analyse-filters .s2-pill--groot button { min-height: 44px; padding: 8px 15px; }
.analyse-tabbar { padding: 6px 10px 0; margin-bottom: 12px; }
.analyse-tabbar .s2-tabs {
  margin: 0; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; gap: 7px;
  /* verticale ruimte zodat overflow-x de zwevende schaduw niet afsnijdt */
  padding: 4px 2px 13px;
}
.analyse-tabbar .s2-tabs::-webkit-scrollbar { display: none; }
.analyse-tabbar .s2-tabs button { scroll-snap-align: start; min-height: 44px; padding: 8px 13px; font-size: var(--tekst-klein); }
.s2-werkvoorraad { margin-bottom: 16px; }
.s2-werkkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.s2-werktellers { display: flex; gap: 8px; flex: none; }
.s2-werktellers span {
  min-width: 66px; min-height: 52px; border-radius: 13px; background: var(--s2-zacht);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.s2-werktellers b { font-size: 19px; font-weight: 900; line-height: 1; color: var(--s2-accent); }
.s2-werktellers small { color: var(--s2-mut); font-size: var(--tekst-klein); font-weight: 800; line-height: 1; }
.s2-werklijst { display: grid; gap: 8px; }
.s2-werkdeelkop {
  margin: 13px 0 8px; color: var(--s2-mut); font-size: var(--tekst-klein); font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
}
.s2-werkregel {
  min-height: 58px; border-radius: 14px; background: var(--s2-zacht); color: var(--s2-ink);
  text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
}
.s2-werkregel.s2-w-evaluatie { background: var(--salie); }
.s2-werkregel.s2-w-analyse { background: var(--lucht); }
.s2-werkregel.s2-w-clips { background: var(--lila); }
.s2-werkregel.s2-w-evaluatie .s2-werktype,
.s2-werkregel.s2-w-analyse .s2-werktype,
.s2-werkregel.s2-w-clips .s2-werktype {
  background: rgba(255,255,255,.72); color: #17251c;
}
html[data-thema="donker"] .s2-werkregel .s2-werktype {
  background: rgba(255,255,255,.86);
}
.s2-werkregel.s2-w-evaluatie .s2-werktekst small,
.s2-werkregel.s2-w-analyse .s2-werktekst small,
.s2-werkregel.s2-w-clips .s2-werktekst small { color: rgba(23,37,28,.62); }
/* De pasteltinten worden in het donkere thema donker; harde donkere inkt kwam
   dan op donker uit (1,2:1). Daar hoort de thema-inkt bij. */
html[data-thema="donker"] .s2-werkregel .s2-werktekst small { color: var(--inkt-zacht); }
html[data-thema="donker"] .s2-werkregel .s2-werkactie,
html[data-thema="donker"] .s2-werkregel { color: var(--inkt); }
.s2-werkregel.s2-w-evaluatie .s2-werkactie,
.s2-werkregel.s2-w-analyse .s2-werkactie,
.s2-werkregel.s2-w-clips .s2-werkactie { color: #17251c; }
html[data-thema="donker"] .s2-werkregel.s2-w-evaluatie,
html[data-thema="donker"] .s2-werkregel.s2-w-analyse,
html[data-thema="donker"] .s2-werkregel.s2-w-clips { background: color-mix(in srgb, var(--kaart) 72%, var(--groen-licht)); }
.s2-werktype {
  flex: none; min-width: 68px; border-radius: 999px; padding: 6px 8px; text-align: center;
  background: var(--s2-kaart); color: var(--s2-accent); font-size: var(--tekst-klein); font-weight: 900; text-transform: uppercase; letter-spacing: .06em;
}
.s2-werktekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.s2-werktekst b { font-size: var(--tekst-klein); font-weight: 850; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-werktekst small { color: var(--s2-mut); font-size: var(--tekst-klein); font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-werkactie { flex: none; color: var(--s2-accent); font-size: var(--tekst-klein); font-weight: 900; }
.s2-balkrij { margin-bottom: 14px; }
.s2-balkrij:last-child { margin-bottom: 0; }
.s2-balkkop { display: flex; justify-content: space-between; font-size: var(--tekst-klein); font-weight: 700; margin-bottom: 6px; }
.s2-balkkop .tnum { color: var(--s2-accent); }
.s2-balk { height: 9px; border-radius: 5px; background: var(--s2-balkbg); overflow: hidden; }
.s2-balk i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg,#2fa05f,#1f7a44); }

/* veld & zones */
.s2-veldbalk { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.s2-veldrow { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.s2-veldkol { flex: 0 0 320px; max-width: 340px; width: 100%; }
.s2-richting { text-align: center; font-size: var(--tekst-klein); letter-spacing: .16em; color: var(--s2-mut); font-weight: 800; margin: 6px 0; }
.s2-zonesveld { width: 100%; aspect-ratio: 5/8; border-radius: 16px; overflow: hidden; border: 1px solid rgba(23,37,28,.12); display: flex; flex-direction: column; }
.s2-zband { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.55); }
.s2-zband .zkop { display: flex; align-items: baseline; justify-content: space-between; }
.s2-zband .znaam { font-size: var(--tekst-klein); font-weight: 800; color: #0f3d26; }
.s2-zband .zsub { font-size: var(--tekst-klein); color: #4c5a4f; font-weight: 700; }
.s2-zband .zval { font-size: 32px; font-weight: 800; line-height: 1; }
.s2-zch { display: flex; gap: 6px; margin-top: 9px; }
.s2-zch > div { flex: 1; }
.s2-zch .mb { height: 5px; border-radius: 3px; background: rgba(15,61,38,.15); overflow: hidden; }
.s2-zch .mb i { display: block; height: 100%; background: #1f7a44; border-radius: 3px; }
.s2-zch .ml { display: flex; justify-content: space-between; margin-top: 3px; font-size: var(--tekst-klein); font-weight: 800; color: #4c5a4f; }
.s2-heatveld { width: 100%; aspect-ratio: 5/8; border-radius: 16px; overflow: hidden; border: 1px solid rgba(23,37,28,.12); background: #1c6a41; position: relative; }
.s2-heatgrid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 20% 12.5%; }
.s2-blobs { position: absolute; inset: 0; filter: blur(9px); }
.s2-infokol { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.s2-inforij { display: flex; align-items: center; gap: 10px; }
.s2-infolabel { font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-mut); letter-spacing: .05em; }
.s2-zrij { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--s2-rand-z); }
.s2-zrij .naam { flex: 0 0 92px; }
.s2-zrij .naam b { display: block; font-size: var(--tekst-klein); font-weight: 800; }
.s2-zrij .naam small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }
.s2-zrij .rb { flex: 1; height: 8px; border-radius: 4px; background: var(--s2-balkbg); overflow: hidden; }
.s2-zrij .rb i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#2fa05f,#1f7a44); }
.s2-zrij .tot { flex: 0 0 24px; text-align: right; font-size: var(--tekst-nadruk); font-weight: 800; color: var(--s2-accent); }
.s2-zrij .gf { flex: 0 0 42px; text-align: right; font-size: var(--tekst-klein); font-weight: 800; }
.s2-grad { height: 9px; border-radius: 5px; background: linear-gradient(90deg,#e8ede4,#5fb682,#eeb63e); margin-top: 14px; }
.s2-gradlbl { display: flex; justify-content: space-between; font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; margin-top: 5px; }
.s2-legenda { display: flex; gap: 16px; margin-bottom: 8px; }
.s2-legenda span { display: flex; align-items: center; gap: 7px; font-size: var(--tekst-klein); font-weight: 700; }
.s2-legenda i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.s2-foutrij { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--s2-rand-z); }
.s2-foutrij .vak { width: 26px; height: 26px; border-radius: 8px; background: #fbe6e0; color: #c1502f; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-klein); font-weight: 800; flex: none; }
.s2-foutrij .wat { font-size: var(--tekst-klein); font-weight: 700; }
.s2-foutrij .kind { margin-left: auto; font-size: var(--tekst-klein); color: #c1502f; font-weight: 700; }
.s2-note { background: var(--s2-zacht); border: 1px solid var(--s2-rand-z); border-radius: 14px; padding: 13px 16px; font-size: var(--tekst-klein); color: var(--s2-tekst); font-weight: 600; line-height: 1.45; }
.s2-note b { color: var(--s2-accent); }

/* spelers */
.s2-spelers { display: grid; grid-template-columns: 1fr; gap: 12px; }
.s2-speler { background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 16px; padding: 16px 17px; display: flex; flex-direction: column; gap: 13px; cursor: pointer; }
.s2-spkop { display: flex; align-items: center; gap: 11px; }
.s2-rugnr { width: 38px; height: 38px; border-radius: 50%; background: #f2c94e; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-nadruk); font-weight: 800; color: #3a2c07; flex: none; }
.s2-spkop .wie { min-width: 0; }
.s2-spkop .wie b { display: block; font-size: var(--tekst-nadruk); font-weight: 800; line-height: 1.1; }
.s2-spkop .wie small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }
.s2-spkop .s2-ring { margin-left: auto; width: 38px; height: 38px; }
.s2-spevents { display: flex; align-items: baseline; gap: 7px; border-top: 1px solid var(--s2-rand-z); padding-top: 12px; }
.s2-spevents .cf { font-size: 26px; font-weight: 800; color: var(--s2-accent); line-height: 1; }
.s2-spevents span { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }
.s2-spevents .s2-spmin { margin-left: auto; font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-accent); background: var(--s2-zacht); padding: 3px 8px; border-radius: 999px; }
.s2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s2-chip { font-size: var(--tekst-klein); font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.s2-chip.good { background: #e3f2e8; color: #1f7a44; }
.s2-chip.bad { background: #fbe6e0; color: #c1502f; }
.s2-chip.neutraal { background: #eef1ee; color: #45564c; }
.s2-chip.review { background: #f6edd8; color: #98742a; }
.s2-leeg { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 600; font-style: italic; }
.s2-tabelwrap { background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 16px; padding: 6px 8px; overflow-x: auto; }
.s2-tabel { width: 100%; border-collapse: collapse; min-width: 720px; }
.s2-tabel th { text-align: center; padding: 12px 6px; font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-mut); user-select: none; cursor: pointer; white-space: nowrap; }
.s2-tabel th:first-child { text-align: left; padding: 12px 10px; position: sticky; left: 0; background: var(--s2-kaart); cursor: default; }
.s2-tabel th.aan { color: var(--s2-accent); }
.s2-tabel tbody tr { border-top: 1px solid var(--s2-rand-z); cursor: pointer; }
.s2-tabel td { text-align: center; padding: 10px 6px; font-size: var(--tekst-klein); font-weight: 600; }
.s2-tabel td:first-child { padding: 10px; position: sticky; left: 0; background: var(--s2-kaart); text-align: left; }
.s2-tabel td.nul { color: #c6d0c6; }
.s2-tabel td.min { color: #c1502f; }
.s2-tabel .spnaam { display: flex; align-items: center; gap: 9px; }
.s2-tabel .spnaam .s2-rugnr { width: 26px; height: 26px; font-size: var(--tekst-klein); }
.s2-tabel .spnaam b { font-size: var(--tekst-klein); font-weight: 800; display: block; line-height: 1.1; }
.s2-tabel .spnaam small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }

/* terugkijken */
.s2-videorow { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.s2-videorow.is-overzicht { display: block; margin-bottom: 28px; }
.s2-videokol { flex: 1; min-width: 300px; }
.s2-player { background: #000; border-radius: 18px; overflow: hidden; border: 1px solid rgba(23,37,28,.1); aspect-ratio: 16/9; position: relative; }
.s2-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s2-videometa { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 0 4px; font-size: var(--tekst-klein); font-weight: 700; color: var(--s2-sub); flex-wrap: wrap; }
.s2-videometa .hint { margin-left: auto; font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 600; }
.s2-clipskol { flex: 0 0 340px; max-width: 400px; width: 100%; background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 18px; padding: 16px 16px 18px; }
.s2-clips { display: flex; flex-direction: column; gap: 8px; }
.s2-clip { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 12px; cursor: pointer; border: 1px solid var(--s2-rand-z); background: var(--s2-kaart); }
.s2-clip.aan { border-color: #bfe0cb; background: #eef7f0; }
html[data-thema="donker"] .s2-clip.aan { background: #21402b; border-color: #3a6b4c; }
.s2-play { width: 44px; height: 44px; border-radius: 9px; background: #12472c; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; font-size: var(--tekst-klein); }
.s2-clip .wat { flex: 1; min-width: 0; }
.s2-clip .wat .kop { display: flex; align-items: center; gap: 7px; font-size: var(--tekst-klein); font-weight: 800; }
.s2-clip .wat small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 600; }
.s2-clip .tijd { text-align: right; flex: none; font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-accent); }
.s2-clip-wa { flex: none; min-height: 44px; padding: 0 12px; color: var(--groen-tekst); }
.s2-team-wa { margin-left: auto; color: var(--groen); }
.s2-speler-wa { margin: 12px 0 4px; }
.s2-video-overzicht { margin-top: 0; }
.s2-video-overzicht .chips { gap: 10px; padding-bottom: 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.s2-video-overzicht .chips::-webkit-scrollbar { display: none; }
.s2-video-overzicht .chip {
  min-height: 48px; padding: 0 19px; border-radius: 999px; background: var(--s2-kaart);
  box-shadow: var(--schaduw-klein); border: 0; color: var(--inkt); font-size: var(--tekst-nadruk); font-weight: 900;
  flex: 0 0 auto; white-space: nowrap;
}
.s2-video-overzicht .chip.actief { background: var(--groen); color: #fff; }
.s2-video-acties { margin: 0 16px 14px; padding-bottom: 8px; border-bottom: 1px solid var(--s2-rand-z); }
.s2-video-acties .btn { min-height: 44px; }
.s2-video-acties .s2-team-wa { margin-left: 0; }
.s2-video-fragment {
  background: var(--s2-zacht); border-radius: 12px; padding: 0 8px 0 14px; min-height: 56px;
  border: 1px solid transparent;
}
.s2-video-fragment.aan { border-color: #bfe0cb; background: #eef7f0; }
.s2-video-fragmentknop {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0; width: 100%;
}
.s2-video-fragment .video-tijd {
  width: 86px; color: var(--groen); font-size: var(--tekst-klein); font-weight: 900; flex: none;
}
.s2-video-fragment .video-whatsapp { margin-left: auto; }
html[data-thema="donker"] .s2-video-fragment.aan { background: #21402b; border-color: #3a6b4c; }
.s2-tag { font-size: var(--tekst-klein); font-weight: 800; padding: 4px 9px; border-radius: 999px; flex: none; white-space: nowrap; }
.s2-tag.good { background: #e3f2e8; color: #1f7a44; }
.s2-tag.bad { background: #fbe6e0; color: #c1502f; }
.s2-tag.neutraal { background: #eef1ee; color: #45564c; }

/* modal-inhoud (via sheet) */
.s2-msub { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.s2-mbadge { width: 42px; height: 42px; border-radius: 11px; background: #12472c; color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-subtitel); font-weight: 800; flex: none; }
.s2-mbadge.speler { border-radius: 50%; background: #f2c94e; color: #3a2c07; }
.s2-msub small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }
.s2-ptiles { display: flex; gap: 9px; margin-bottom: 13px; }
.s2-ptile { flex: 1; background: var(--s2-zacht); border-radius: 12px; padding: 11px 13px; }
.s2-ptile .cf { font-size: 22px; font-weight: 800; color: var(--s2-accent); line-height: 1; }
.s2-ptile small { display: block; font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; margin-top: 3px; }
.s2-pgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.s2-pcel { background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 10px; padding: 9px 11px; }
.s2-pcel .cf { font-size: 19px; font-weight: 800; line-height: 1; color: var(--s2-accent); }
.s2-pcel .cf.nul { color: #c6d0c6; } .s2-pcel .cf.min { color: #c1502f; }
.s2-pcel small { display: block; font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; margin-top: 3px; }
.s2-pmeta { display: flex; flex-wrap: wrap; gap: 16px; margin: 13px 0 4px; font-size: var(--tekst-klein); color: var(--s2-tekst); font-weight: 600; }
.s2-mkop { font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-mut); letter-spacing: .06em; margin: 14px 0 4px; }
.s2-moment { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--s2-rand-z); cursor: pointer; }
.s2-mtijd { font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-accent); background: #eef4ee; padding: 6px 9px; border-radius: 8px; flex: none; display: flex; align-items: center; gap: 5px; }
html[data-thema="donker"] .s2-mtijd { background: #21402b; }
.s2-moment .wat { flex: 1; min-width: 0; }
.s2-moment .wat b { display: block; font-size: var(--tekst-klein); font-weight: 800; }
.s2-moment .wat small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 600; }
.s2-persoon { display: grid; gap: 14px; }
.s2-persoon-hero {
  background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 18px;
  padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.s2-persoon-score { text-align: right; flex: none; }
.s2-persoon-score span { display: block; color: var(--s2-accent); font-size: 34px; font-weight: 950; line-height: 1; }
.s2-persoon-score small { display: block; color: var(--s2-mut); font-size: var(--tekst-klein); font-weight: 800; margin-top: 3px; }
.s2-persoon-top { margin-bottom: 0; }
.s2-persoon-focus {
  border-radius: 14px; background: var(--s2-zacht); padding: 12px 14px; margin-top: 9px;
  display: grid; gap: 3px; border-left: 4px solid var(--s2-warn);
}
.s2-persoon-focus.good { border-left-color: var(--s2-good); }
.s2-persoon-focus b { font-size: var(--tekst-klein); font-weight: 950; color: var(--s2-accent); text-transform: uppercase; letter-spacing: .05em; }
.s2-persoon-focus span { color: var(--s2-sub); font-size: var(--tekst-klein); font-weight: 750; line-height: 1.35; }
.tactiek-laadfilter { display: grid; gap: 10px; margin: 12px 0 14px; }
.tactiek-laadfilter .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.tactiek-laadfilter .chips::-webkit-scrollbar { display: none; }
.tactiek-laadfilter .chip { flex: none; background: var(--kaart); box-shadow: var(--schaduw-klein); }
.tactiek-laadfilter .chip.actief { background: var(--groen); color: #fff; }
.tactiek-laadfilter .zoek { margin: 0; background: var(--rand-zacht); box-shadow: none; }

/* seizoen */
.s2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.s2-tile { background: var(--s2-kaart); border: 1px solid var(--s2-rand-z); border-radius: 16px; padding: 16px 18px; }
.s2-tile .cf { font-size: 28px; font-weight: 800; line-height: 1.1; }
.s2-tile small { display: block; font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; margin-top: 4px; }
.s2-vorm { display: flex; gap: 8px; flex-wrap: wrap; }
.s2-vorm i { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-klein); font-weight: 800; font-style: normal; flex: none; }
.s2-vorm .w { background: #1f7a44; color: #fff; }
.s2-vorm .g { background: var(--geel); color: #3a2c07; }
.s2-vorm .v { background: #dd6047; color: #fff; }
.s2-rankrij { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.s2-rankrij:last-child { margin-bottom: 0; }
.s2-rank { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-klein); font-weight: 800; flex: none; background: var(--s2-balkbg); color: var(--s2-mut); }
.s2-rank.top { background: #12472c; color: #fff; }
.s2-rankrij .wie { flex: 0 0 92px; font-size: var(--tekst-klein); font-weight: 700; }
.s2-rankrij .rb { flex: 1; height: 8px; border-radius: 4px; background: var(--s2-balkbg); overflow: hidden; }
.s2-rankrij .rb i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#2fa05f,#1f7a44); }
.s2-rankrij .cf { flex: 0 0 20px; text-align: right; font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-accent); }
.s2-scvar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0; align-items: center; padding: 11px 4px; border-top: 1px solid var(--s2-rand-z); font-size: var(--tekst-klein); font-weight: 700; }
.s2-scvar > div { text-align: center; }
.s2-scvar > div:first-child { text-align: left; }
.s2-scvar.kop { font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-mut); letter-spacing: .04em; padding: 10px 4px 8px; border-top: 0; border-bottom: 1px solid var(--s2-rand); }
.s2-kaartrij { display: flex; gap: 18px; margin-bottom: 16px; }
.s2-kaartrij span { display: flex; align-items: center; gap: 8px; font-size: var(--tekst-nadruk); font-weight: 800; }
.s2-kaartblok { width: 16px; height: 20px; border-radius: 3px; display: inline-block; }
.s2-kaartsp { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--s2-rand-z); font-size: var(--tekst-klein); font-weight: 700; }
.s2-kaartsp .n { width: 22px; height: 22px; border-radius: 6px; background: #12472c; color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-klein); font-weight: 800; flex: none; }
.s2-sectie { display: flex; align-items: baseline; gap: 8px; margin: 22px 2px 12px; }
.s2-sectie b { font-size: var(--tekst-nadruk); font-weight: 800; }
.s2-sectie small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }

/* cirkel-zones (Aanval & SC / Verdediging) */
.s2-czrow { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.s2-czveld { width: min(100%, 420px); flex: 0 1 420px; }
.s2-cirkelveld { width: 100%; border-radius: 12px; background: #1c6a41; }
.s2-czlijst { flex: 1; min-width: 220px; }
.s2-czr { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--s2-rand-z); }
.s2-czr .lbl { flex: 0 0 96px; font-size: var(--tekst-klein); font-weight: 700; }
.s2-czr .rb { flex: 1; height: 7px; border-radius: 4px; background: var(--s2-balkbg); overflow: hidden; }
.s2-czr .rb i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#eeb63e,#c98d2f); }
.s2-czr .n { flex: 0 0 30px; text-align: right; font-size: var(--tekst-klein); font-weight: 800; color: var(--s2-accent); }
.s2-czr .conv { flex: 0 0 84px; text-align: right; font-size: var(--tekst-klein); font-weight: 800; }

/* veldkaart-kolom in de statistiek-tabs */
.s2-veldmini { flex: 0 0 280px; max-width: 320px; width: 100%; }
.s2-veldmini.s2-card { padding: 16px 16px 14px; }

/* percentage-balkrijen */
.s2-pctkop { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--tekst-klein); font-weight: 700; margin-bottom: 6px; gap: 10px; }
.s2-pctkop .mut { color: var(--s2-mut); }
.s2-balk i.rood { background: linear-gradient(90deg,#e69572,#c9502f); }
.s2-balk i.geel { background: linear-gradient(90deg,#eeb63e,#c98d2f); }

/* drukste vakken (Veld & spel) */
.s2-topvak { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--s2-rand-z); cursor: pointer; }
.s2-topvak .badge { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-klein); font-weight: 800; flex: none; }
.s2-topvak .wat { flex: 1; }
.s2-topvak .wat b { display: block; font-size: var(--tekst-klein); font-weight: 800; line-height: 1.1; }
.s2-topvak .wat small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }
.s2-topvak .n { font-size: var(--tekst-subtitel); font-weight: 800; color: var(--s2-accent); }

/* trendgrafiek doelpunten per wedstrijd (seizoen) */
.s2-trend { display: flex; align-items: flex-end; gap: 8px; }
.s2-trendkol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.s2-trendkol .cijfers { display: flex; gap: 5px; font-size: var(--tekst-klein); font-weight: 800; }
.s2-trendkol .staven { height: 110px; display: flex; align-items: flex-end; gap: 4px; }
.s2-trendkol .staven i { display: block; width: 13px; border-radius: 4px 4px 0 0; }
.s2-trendkol .res { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: var(--tekst-klein); font-weight: 800; flex: none; }
.s2-trendkol .dat { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; white-space: nowrap; }

/* thuis vs. uit (seizoen) */
.s2-ha { display: grid; grid-template-columns: 1fr; gap: 12px; }
.s2-hatile { background: var(--s2-zacht); border-radius: 14px; padding: 14px 16px; }
.s2-hatile .kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.s2-hatile .kop b { font-size: var(--tekst-klein); font-weight: 800; }
.s2-hatile .kop small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }
.s2-hatile .cijfers { display: flex; gap: 18px; }
.s2-hatile .cf { display: block; font-size: 20px; font-weight: 800; color: var(--s2-accent); line-height: 1; }
.s2-hatile small { font-size: var(--tekst-klein); color: var(--s2-mut); font-weight: 700; }
.s2-hatile .cijfers small { display: block; margin-top: 3px; }

@media (min-width: 700px) {
  .s2-kpis { grid-template-columns: repeat(3,1fr); }
  .s2-acties { grid-template-columns: repeat(2,1fr); }
  .s2-tiles--3 { grid-template-columns: repeat(3,1fr); }
  .s2-ha { grid-template-columns: 1fr 1fr; }
  .s2-duo { grid-template-columns: 1fr 1fr; }
  .s2-spelers { grid-template-columns: repeat(2,1fr); }
  .s2-tiles { grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 1000px) {
  .s2-spelers { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 699px) {
  .s2-werkkop { flex-direction: column; }
  .s2-werktellers { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s2-werktellers span { min-width: 0; }
  .s2-werkregel { align-items: flex-start; flex-wrap: wrap; }
  .s2-werktype { min-width: 0; }
  .s2-werktekst { flex-basis: calc(100% - 78px); }
  .s2-werkactie { width: 100%; padding-left: 0; }
  .s2-werktekst b, .s2-werktekst small { white-space: normal; }
}

/* Dataniveau onder de kerncijfers: waarop rusten deze getallen. */
.s2-dataniveau {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-control);
  background: var(--bg); font-size: var(--tekst-klein); line-height: 1.5; color: var(--inkt-zacht);
}
.s2-dataniveau b { color: var(--inkt); }

/* Nabespreking: de vijf-minuten-route van wedstrijd naar training. */
.nabespreking-kaart .an-kop { align-items: flex-start; }
.nabespreking-alt { margin: 10px 0 0; text-align: center; }
.nabespreking-conclusie { margin: 0 0 14px; font-size: var(--tekst-subtitel); font-weight: 650; line-height: 1.5; }
.nabespreking-kop { margin: 0 0 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: var(--tekst-klein); }
.nabespreking-blokken { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.nabespreking-blokken li {
  background: var(--bg); border-radius: var(--radius-control); padding: 11px 13px;
}
.nabespreking-blokken b { display: block; font-size: var(--tekst-nadruk); }
.nabespreking-blokken small { display: block; margin-top: 3px; color: var(--inkt-zacht); line-height: 1.45; }
.nabespreking-aanleiding {
  margin: 0 0 4px; font-size: var(--tekst-klein); font-weight: 700; color: var(--inkt-zacht);
}
.nabespreking-vraag { margin: 0 0 14px; font-size: var(--tekst-subtitel); font-weight: 800; line-height: 1.3; }
.nabespreking-opties { display: grid; gap: 9px; margin-bottom: 10px; }
.nabespreking-opties .btn { min-height: 58px; text-align: left; justify-content: flex-start; padding: 12px 15px; }

/* Gefilterde leegte krijgt een hint-regel; die mag stiller dan de melding zelf. */
.leeg-hint { margin: 4px 0 0; font-size: var(--tekst-klein); opacity: .85; }

/* ─────────────────────────────────────────────────────────────────────────
   Desktop & tablet (A5). Op mobiel is deze app op zijn best; op een laptop —
   waar een coach de analyse en de trainingsvoorbereiding doet — was het tot nu
   toe uitgerekt mobiel met een tabbar onderaan. Vanaf 1024px wordt de
   hoofdnavigatie een vaste zijbalk en krijgt de inhoud de ruimte.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  body { padding-left: var(--zijbalk, 220px); }
  body.zonder-hoofdnav { padding-left: 0; }

  /* Zijbalk in dezelfde stijl als de zoekbalk (.topbalk-zoek): een licht
     verzonken vlak in plaats van een wit paneel, een halftransparante hairline
     in plaats van een harde rand, en dezelfde inset-highlight bovenaan. De
     items zijn pillen die bij aanwijzen precies de vulling van het zoekveld
     krijgen — zelfde color-mix, zodat het één familie blijft.
     display:flex overschrijft de inline grid-template-columns die app.js zet. */
  .hoofdnav {
    top: 0; bottom: 0; left: 0; right: auto; z-index: 60;
    width: var(--zijbalk, 220px); max-width: none; margin: 0;
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: 3px; padding: 22px 12px; border-radius: 0;
    background: color-mix(in srgb, var(--kaart) 38%, var(--rand-zacht));
    border-right: 1px solid color-mix(in srgb, var(--rand) 68%, transparent);
    box-shadow: inset -1px 0 0 color-mix(in srgb, #fff 42%, transparent);
    backdrop-filter: none;
  }
  html[data-thema="donker"] .hoofdnav {
    background: color-mix(in srgb, var(--kaart) 38%, var(--rand-zacht));
  }
  .hoofdnav::before {
    content: 'HockeyCoach'; display: block;
    font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; font-size: var(--tekst-subtitel);
    letter-spacing: 0; color: var(--inkt); padding: 4px 14px 16px;
  }
  .hoofdnav a {
    flex-direction: row; justify-content: flex-start; gap: 11px;
    width: 100%; min-height: 44px; padding: 0 13px;
    border-radius: 999px; font-size: var(--tekst-klein);
    border: 1px solid transparent;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .hoofdnav a span { font-size: 18px; }
  .hoofdnav a svg { width: 18px; height: 18px; }
  .hoofdnav a b { font-weight: 700; font-size: var(--tekst-klein); }
  .hoofdnav a:not(.actief):hover {
    background: color-mix(in srgb, var(--kaart) 62%, var(--rand-zacht));
    border-color: color-mix(in srgb, var(--inkt-zachter) 32%, var(--rand));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent);
  }

  .view { max-width: 1120px; margin: 0 auto; padding: 26px 32px 40px; }

  /* Vaste elementen respecteren de zijbalk. */
  .sw-updatebar { left: calc(var(--zijbalk, 220px) + 16px); right: 16px; max-width: 760px; }
  .netstatus { left: calc(var(--zijbalk, 220px) + 50%); }

  /* Meer kolommen waar de inhoud het toelaat: op mobiel twee, hier drie of vier.
     De statistiektegels zwommen in witruimte op een laptop. */
  .s2-tiles { grid-template-columns: repeat(4, 1fr); }
  .s2-kpis { grid-template-columns: repeat(3, 1fr); }
  .adviesgrid, .besluitgrid { grid-template-columns: 1fr 1fr; }

  /* De filterbalken van de analyse blijven een rij, maar mogen nu links
     uitlijnen in plaats van over de volle breedte uit te rekken. */
  .s2-tabs, .s2-pill { flex-wrap: wrap; }
}

/* Extra ademruimte op grote schermen. */
@media (min-width: 1440px) {
  .view { max-width: 1240px; }
}

/* Ontwikkeling over het seizoen (B5). */
.s2-koerszin { margin: 8px 0 14px; font-size: var(--tekst-nadruk); font-weight: 650; line-height: 1.5; }
.s2-koers-stijgend { color: var(--s2-good); }
.s2-koers-dalend { color: var(--s2-bad); }
.s2-periode { display: grid; gap: 2px; }
.s2-perrij {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--s2-rand-z);
}
.s2-perrij:last-child { border-bottom: 0; }
.s2-perlabel { font-size: var(--tekst-klein); font-weight: 700; color: var(--s2-sub); }
.s2-perwaarde { font-size: var(--tekst-klein); font-weight: 750; color: var(--s2-ink); }
.s2-perdelta { font-size: var(--tekst-klein); font-weight: 800; min-width: 52px; text-align: right; }
.s2-belasting { display: grid; gap: 8px; }
.s2-belrij {
  display: grid; gap: 2px; padding: 11px 13px; border-radius: var(--radius-control);
  background: var(--s2-zacht); border-left: 4px solid var(--s2-mut);
}
.s2-bel-hoog { border-left-color: var(--s2-warn); }
.s2-bel-onbenut { border-left-color: var(--s2-accent); }
.s2-belnaam { font-size: var(--tekst-nadruk); font-weight: 800; color: var(--s2-ink); }
.s2-belreden { font-size: var(--tekst-klein); color: var(--s2-sub); line-height: 1.4; }

/* Coachhint (A6): dunne begeleidingsregel op de drie wedstrijdmomenten. */
.coachhint {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--groen-licht); color: var(--inkt);
  border-radius: var(--radius-control); padding: 11px 12px 11px 14px; margin: 0 0 14px;
  font-size: var(--tekst-klein); font-weight: 650; line-height: 1.45;
  border-left: 4px solid var(--groen);
}
html[data-thema="donker"] .coachhint { background: var(--groen-licht); }
.coachhint-tekst { flex: 1; min-width: 0; }
.coachhint-sluit {
  flex: none; width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 11px;
  background: transparent; color: var(--inkt-zacht); font-size: var(--tekst-klein); font-weight: 800; cursor: pointer;
  display: grid; place-items: center;
}
.coachhint-sluit:hover { background: rgba(0,0,0,.06); }

/* Opslagwaarschuwing (backend 5): data staat lokaal en onbeschermd. */
.opslag-waarschuwing {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
  border-radius: var(--radius-control); padding: 13px 15px; margin: 0 0 14px;
  border-left: 4px solid var(--rood-tekst);
  background: color-mix(in srgb, var(--rood) 12%, var(--kaart));
}
.opslag-waarschuwing.opslag-let-op {
  border-left-color: var(--oranje-tekst);
  background: color-mix(in srgb, var(--oranje) 12%, var(--kaart));
}
.opslag-tekst { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.opslag-tekst b { font-size: var(--tekst-nadruk); color: var(--inkt); }
.opslag-tekst span { font-size: var(--tekst-klein); color: var(--inkt-zacht); line-height: 1.45; }
.opslag-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opslag-sluit {
  flex: none; width: 34px; min-height: 34px; border: 0; border-radius: 10px;
  background: transparent; color: var(--inkt-zacht); font-size: var(--tekst-nadruk); font-weight: 800; cursor: pointer;
}
.opslag-sluit:hover { background: rgba(0,0,0,.06); }
.opslag-stappen { margin: 4px 0 14px; padding-left: 20px; line-height: 1.6; }
.opslag-stappen li { margin-bottom: 6px; }

/* Dagkaart in de agenda: hier kijk je op een wedstrijddag naar tijd,
   verzameltijd en wie er rijdt of fluit. Op standaard subtekstgrootte is dat
   drie regels priegelwerk, dus hier iets ruimer. */
.dagsheet-lijst .lijst-item b { font-size: 1.05rem; }
.dagsheet-lijst .lijst-item .subtekst { font-size: .95rem; line-height: 1.45; }

/* Wedstrijdkaart voor een speler: de feiten die op een wedstrijddag tellen.
   Ze springen eruit als losse blokjes met een label erboven — als lopende
   subtekst las niemand hier "verzamelen 19:45" uit. */
.speler-wedstrijdkaart,
.wedstrijdkaart { display: flex; flex-direction: column; margin: 0; }
/* Twee naast elkaar op een normaal scherm, één op een telefoon: de kaart moet
   leesbaar blijven, niet zo smal dat "Verzamelen 19:45" over drie regels valt. */
.speler-wedstrijdgrid,
.wedstrijdgrid {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
/* De knop onderaan, ook als de ene kaart meer feiten heeft dan de andere. */
/* Feiten direct onder de datum, knop onderaan uitgelijnd. De auto-marge zat
   eerst op de feiten, waardoor die naar beneden werden geduwd en er een gat
   onder de datum viel bij kaarten met weinig gegevens. */
.speler-wedstrijdkaart .speler-wedstrijdfeiten,
.wedstrijdkaart .wedstrijdfeiten { margin-top: 0; margin-bottom: 14px; }
.speler-wedstrijdkaart .speler-wedstrijdknop,
.wedstrijdkaart .wedstrijdknop { margin-top: auto; }
.speler-wedstrijdfeiten,
.wedstrijdfeiten { display: flex; flex-wrap: wrap; gap: 8px; }
.speler-wedstrijdfeiten span,
.wedstrijdfeiten span {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--bg); font-size: .95rem; font-weight: 600;
}
.speler-wedstrijdfeiten span b,
.wedstrijdfeiten span b {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .6;
}
.speler-wedstrijdfeiten span.is-jij { background: var(--groen-licht); }
.speler-wedstrijdfeiten-groot span { font-size: 1.05rem; padding: 10px 14px; }

/* Fluiters/rijders in het wedstrijdscherm. De knop zat vastgeplakt tegen de
   onderrand van de kaart en rekte mee tot halve breedte, omdat .knoppenrij zijn
   kinderen laat groeien. Hier dus een eigen rij: tekst links, knop rechts op
   zijn eigen maat, en lucht eronder. */
.wedstrijddag-veld { margin-bottom: 4px; }
.wedstrijddag-rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wedstrijddag-rij .subtekst { margin: 0; flex: 1 1 auto; min-width: 0; }
.wedstrijddag-rij .btn { flex: 0 0 auto; }

/* Het hidden-attribuut moet altijd winnen.
   De browser geeft [hidden] alleen display:none, en elke eigen regel met meer
   gewicht (label.veld { display: block }) zet dat weer opzij. Daardoor bleef
   een verborgen veld gewoon staan. Vandaar deze algemene regel; de losse
   [hidden]-reparaties eerder in dit bestand waren steeds hetzelfde symptoom. */
[hidden] { display: none !important; }

/* Prominente terugkijk-knop op het analysescherm: markeer een videomoment om
   terug te kijken, zonder veldvak of speler. */
.an-terugkijkknop {
  /* Zacht getint met het schermaccent, zoals de app accentvlakken tint
     (vgl. .s2-actie-primair). Kleurt automatisch mee met de wereld van het
     scherm i.p.v. een losse gele tegel te zijn. */
  background: color-mix(in srgb, var(--wereld) 12%, var(--kaart));
  color: var(--wereld-inkt);
  border: 1px solid color-mix(in srgb, var(--wereld) 30%, transparent);
  box-shadow: none; font-weight: 800;
}
.an-terugkijkknop:hover, .an-terugkijkknop:active {
  background: color-mix(in srgb, var(--wereld) 18%, var(--kaart));
}

/* ── Speler van de dag ──────────────────────────────────────────────
   Stemscherm (#/wedstrijd/:id/stem) plus de entry-points op het
   spelerswedstrijdscherm en het wedstrijdrapport. */
.stem-context { margin: 2px 2px 12px; color: var(--inkt-zacht); font-weight: 700; }
.stem-hint { margin: 0 0 10px; color: var(--inkt-zachter); font-size: var(--tekst-klein); }
.stem-lokaal { margin: -6px 2px 12px; }
.stem-kop { margin: 0 0 10px; font-size: var(--tekst-subtitel); }

.stem-kiezer { margin-bottom: 14px; }
.stem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 380px) { .stem-grid { grid-template-columns: 1fr; } }
.stem-kandidaat {
  justify-content: flex-start; gap: 10px; text-align: left; width: 100%;
  background: var(--kaart); box-shadow: var(--schaduw-klein);
  border: 1px solid var(--rand);
}
.stem-kandidaat .stem-nr {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 9px;
  background: var(--rand-zacht); color: var(--inkt-zacht); font-weight: 800;
  font-size: var(--tekst-klein);
}
.stem-kandidaat .stem-naam { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stem-kandidaat .stem-vink { flex: none; color: var(--groen); font-weight: 900; }
.stem-kandidaat.is-gekozen {
  background: var(--groen-licht); border-color: var(--groen);
  color: var(--groen-donker);
}
.stem-kandidaat.is-gekozen .stem-nr { background: var(--groen); color: #fff; }

.stem-uitslag { margin-bottom: 14px; }
.stem-uitslagkop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.stem-uitslagkop .stem-kop { margin: 0; }
.stem-totaal { color: var(--inkt-zacht); font-weight: 800; font-size: var(--tekst-klein); }
.stem-uitslagrij { display: grid; grid-template-columns: minmax(0, 1fr) 2.2fr auto; align-items: center; gap: 10px; padding: 5px 0; }
.stem-uitslagnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.stem-balk { position: relative; height: 10px; border-radius: 6px; background: var(--rand-zacht); overflow: hidden; }
.stem-balk-vul { position: absolute; inset: 0 auto 0 0; background: var(--groen-licht); border-radius: 6px; }
.stem-aantal { min-width: 22px; text-align: right; font-weight: 800; color: var(--inkt-zacht); }
.stem-uitslagrij.is-winnaar .stem-uitslagnaam { color: var(--groen-donker); }
.stem-uitslagrij.is-winnaar .stem-balk-vul { background: var(--groen); }
.stem-uitslagrij.is-winnaar .stem-aantal { color: var(--groen-donker); }
.stem-eigen { margin: 10px 0 0; color: var(--inkt-zacht); }

.speler-stemknop.is-gestemd { background: var(--groen-licht); color: var(--groen-donker); }
.stem-rapportkaart .stem-rapportwinnaar { margin: 4px 0 2px; font-size: var(--tekst-subtitel); }

/* ── Speler van de dag: beheer (sluiten/opkomst), badges en meldingen ── */
.stem-beheer { margin-bottom: 14px; }
.stem-beheer .stem-sluit { margin-top: 4px; }
.stem-mist { color: var(--inkt-zacht); }
.badge-svd { background: var(--groen-licht); color: var(--groen-donker); }
.speler-svd-winnaar { margin: 8px 0 4px; color: var(--groen-donker); font-weight: 800; }

.home-meldingen { display: grid; gap: 8px; margin-bottom: 12px; }
.home-melding {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 12px 14px; border-radius: var(--radius-knop);
  background: var(--groen-licht); color: var(--groen-donker);
  text-decoration: none; box-shadow: var(--schaduw-klein);
}
.home-melding-ico { flex: none; font-size: var(--tekst-titel); line-height: 1; }
.home-melding-tekst { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home-melding-tekst b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-melding-tekst span { color: var(--groen-donker); opacity: .8; font-size: var(--tekst-klein); }
.home-melding .pijl { flex: none; color: var(--groen-donker); opacity: .7; font-size: var(--tekst-subtitel); }

/* Trainingstijd per weekdag in de teaminstellingen. */
.training-tijden-details { margin: 2px 0 10px; }
.training-tijden-details > summary { cursor: pointer; font-weight: 800; font-size: var(--tekst-nadruk); padding: 4px 0; }
.training-tijden-dagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.training-tijd-dag { margin: 0; }
@media (max-width: 380px) { .training-tijden-dagen { grid-template-columns: 1fr; } }

/* Eigen tijdbalk onder de analyse-video (YouTubes eigen balk staat uit). */
.yt-tijdbalk { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.yt-tijd { min-width: 46px; text-align: center; font-weight: 800; font-size: var(--tekst-klein); color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.yt-balk { position: relative; flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.yt-balk::before { content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--rand); }
.yt-balk-vul { position: absolute; left: 0; height: 6px; border-radius: 3px; background: var(--groen); width: 0; pointer-events: none; }
.yt-balk-knop { position: absolute; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--groen); transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none; }

/* Tegenstander scouten */
.scout-entree { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--inkt); }
.scout-entree-tekst { display: flex; flex-direction: column; gap: 2px; }
.scout-entree-tekst small { color: var(--inkt-zachter); font-weight: 700; font-size: var(--tekst-klein); }
.scout-entree .pijl { color: var(--inkt-zacht); font-size: var(--tekst-titel); }
.scout-momentenlijst { display: grid; gap: 6px; margin-top: 10px; }
.scout-moment { display: flex; align-items: center; gap: 10px; padding: 7px 8px; background: var(--bg); border-radius: 9px; }
.scout-moment-tijd { flex: none; min-width: 60px; min-height: 34px; padding: 4px 10px; border: 0; border-radius: 8px; background: var(--groen-licht); color: var(--groen-donker); font-weight: 800; font-size: var(--tekst-klein); cursor: pointer; font-variant-numeric: tabular-nums; }
.scout-moment-notitie { flex: 1; font-weight: 700; font-size: var(--tekst-nadruk); }
.scout-moment-weg { flex: none; min-width: 34px; min-height: 34px; border: 0; background: transparent; color: var(--inkt-zachter); font-weight: 900; cursor: pointer; }
.scout-notes-kaart summary { cursor: pointer; }

/* Scoutmoment → voorbespreking-knop */
.scout-moment { flex-wrap: wrap; }
.scout-moment-notitie { min-width: 120px; }
.scout-moment-vb { flex: none; min-height: 34px; padding: 4px 11px; border: 1px solid var(--rand); border-radius: 999px; background: var(--kaart); color: var(--inkt-zacht); font-weight: 800; font-size: var(--tekst-klein); cursor: pointer; white-space: nowrap; }
.scout-moment-vb.aan { background: var(--groen-licht); color: var(--groen-donker); border-color: var(--groen); }