/* KVK Divas Ninove Academy — stijlblad. */
/* ==== Lettertypes: zelf gehost, SIL Open Font License 1.1 (fonts/LICENSE-*.txt) ==== */
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url("fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/fredoka-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/fredoka-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==== Tokens ==== */
:root{
  --groen:#00843D; --groen-d:#006B31; --groen-ink:#0c3b22; --groen-zacht:#E3F3E8;
  --ink:#17231B; --zwart:#1A1A1A; --grijs:#55665A;
  --bg:#F4F9F1; --card:#FFFFFF; --line:#DCE6D6; --line-2:#EBF1E8;
  --gold:#e08a1e; --danger:#b42318; --danger-bg:#fdecef;
  /* het gras van het opstellingsveld; de halo rond de spelersnamen leest
     dezelfde variabele, zodat een nieuwe grastint niet stilzwijgend een
     zichtbare rand rond elke naam achterlaat. */
  --gras:#E8F1E6;
  --fase-opwarming:#FFE9A8; --fase-tussenvorm:#CDE7FA; --fase-hoofdvorm:#CFEFD9;
  --fase-wedstrijdvorm:#FFD8B8; --fase-cooling-down:#E4DDF7; --fase-geen:#E9EEE7;
  --fase-ink:#2A2F2B;
  --radius:18px; --radius-s:12px;
  --shadow:0 1px 2px rgba(23,35,27,.05),0 10px 28px -18px rgba(23,35,27,.28);
  --display:"Fredoka","Nunito",system-ui,sans-serif;
  --body:"Nunito",system-ui,"Segoe UI",sans-serif;
  --menu-breed:240px; --menu-smal:84px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);font-size:16px;line-height:1.55;
  background:var(--bg);min-height:100vh}
a{color:var(--groen-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:0;text-wrap:balance}
:focus-visible{outline:3px solid rgba(0,132,61,.45);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==== Menukolom en gsm-balk (base.html) ==== */
.ico{width:20px;height:20px;flex-shrink:0}
.omgeving-balk{position:relative;z-index:100;height:30px;line-height:30px;background:#F39C12;color:#1A1A1A;
  text-align:center;font-weight:800;font-size:.85rem;padding:0 .8rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.menu{position:fixed;top:0;bottom:0;left:0;z-index:60;width:var(--menu-breed);display:flex;flex-direction:column;
  gap:.15rem;padding:1rem .75rem;background:var(--card);border-right:1px solid var(--line);overflow-y:auto}
.met-omgeving .menu{top:30px}
.merk{display:flex;align-items:center;gap:.65rem;padding:.25rem .45rem .9rem;color:var(--ink)}
.merk:hover{text-decoration:none}
.logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;font-family:var(--display);
  font-weight:600;font-size:1.35rem;color:#fff;background:var(--groen);box-shadow:0 4px 12px -4px rgba(0,132,61,.55)}
.merk-tekst{display:flex;flex-direction:column;line-height:1.15}
.merk-tekst strong{font-family:var(--display);font-weight:600;font-size:1rem}
.merk-tekst span{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--groen)}
.menu-item{display:flex;align-items:center;gap:.7rem;min-height:44px;padding:.5rem .75rem;border-radius:14px;
  color:var(--ink);font-weight:700;font-size:.95rem}
.menu-item:hover{background:var(--groen-zacht);color:var(--groen-d);text-decoration:none}
.menu-item.actief{background:var(--groen);color:#fff}
.menu-sub{display:flex;flex-direction:column;gap:.15rem;margin:.1rem 0 .3rem 1.35rem;padding-left:.6rem;border-left:2px solid var(--line)}
.menu-sub .menu-item{min-height:40px;font-size:.9rem;font-weight:600}
.menu-sub .menu-item.actief{background:var(--groen-zacht);color:var(--groen-d)}
.menu-rek{flex:1}
.menu-wie{font-size:.8rem;color:var(--grijs);padding:.3rem .75rem 0;overflow-wrap:anywhere}
.gsm-balk,.menu-achtergrond{display:none}
body.met-menu{padding-left:var(--menu-breed)}
main.breed{max-width:none}

@media (min-width:768px) and (max-width:1023px){
  body.met-menu{padding-left:var(--menu-smal)}
  .menu{width:var(--menu-smal);padding:.8rem .35rem}
  .merk{justify-content:center;padding:.2rem 0 .7rem}
  .merk-tekst,.menu-wie{display:none}
  .menu-item{flex-direction:column;justify-content:center;gap:.2rem;padding:.45rem .15rem;font-size:.66rem;text-align:center}
  .menu-sub{margin:0;padding:0;border:0}
  .menu-sub .menu-item{font-size:.62rem}
}
@media (max-width:767px){
  body.met-menu{padding-left:0}
  .gsm-balk{display:flex;align-items:center;gap:.6rem;position:sticky;top:0;z-index:55;padding:.5rem .8rem;
    background:var(--card);border-bottom:1px solid var(--line)}
  .gsm-balk .logo{width:34px;height:34px;border-radius:11px;font-size:1.05rem}
  .merk-klein{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;color:var(--ink)}
  .menu-knop{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--groen-zacht);color:var(--groen-d);cursor:pointer}
  .menu{width:min(84vw,300px);transform:translateX(-105%);transition:transform .2s ease;z-index:80;box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.menu-open .menu{transform:none}
  body.menu-open .menu-achtergrond{display:block;position:fixed;inset:0;z-index:70;background:rgba(23,35,27,.35)}
}

/* ==== Paginaopbouw en componenten ==== */
main{max-width:1180px;margin:1.6rem auto 3.5rem;padding:0 1.3rem}
.paginatitel{margin:0;font-size:1.7rem;color:var(--ink)}

/* kaarten */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;
  margin-bottom:1.1rem;box-shadow:var(--shadow);overflow-x:auto}
.card h2{margin:0 0 .85rem;font-size:1.25rem;color:var(--ink);font-weight:600}
.card h3{font-family:var(--display);font-weight:600}

/* tabellen */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--line-2);font-size:.94rem}
th{color:var(--grijs);font-weight:800;text-transform:uppercase;font-size:.7rem;letter-spacing:.06em}
tr:hover td{background:#F7FBF5}
td:first-child,th:first-child{padding-left:.15rem}
.tabel-scroll{overflow-x:auto}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;
  font-family:var(--body);background:var(--groen);color:#fff;border:0;border-radius:999px;
  padding:.55rem 1.2rem;font-weight:800;font-size:.95rem;cursor:pointer;text-decoration:none;
  box-shadow:0 4px 12px -6px rgba(0,132,61,.6);transition:transform .12s,background .12s}
.btn:hover{background:var(--groen-d);transform:translateY(-1px);text-decoration:none;color:#fff}
.btn:active{transform:none}
.btn .ico{width:18px;height:18px}
.btn-sm{min-height:36px;padding:.35rem .85rem;font-size:.84rem;box-shadow:none}
@media (pointer:coarse){.btn-sm{min-height:44px}}
.btn-ghost{background:var(--groen-zacht);color:var(--groen-d);box-shadow:none}
.btn-ghost:hover{background:#D3EBDB;color:var(--groen-d)}
.btn-danger{background:var(--danger-bg);color:var(--danger);box-shadow:none}
.btn-danger:hover{background:#fbd9de;color:var(--danger)}

/* badges, chips, tags, fasepillen */
.badge{display:inline-block;padding:.16rem .6rem;border-radius:999px;font-size:.74rem;font-weight:800;
  background:var(--groen-zacht);color:var(--groen-d)}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--groen-zacht);color:var(--groen-d);
  padding:.18rem .35rem .18rem .65rem;border-radius:999px;font-size:.76rem;font-weight:800;margin:0 .25rem .25rem 0}
.chip button{border:0;background:transparent;color:var(--danger);cursor:pointer;font-weight:800;font-size:.85rem;line-height:1;padding:0 .15rem}
.tag{display:inline-block;background:var(--line-2);color:#3C5246;padding:.14rem .6rem;border-radius:999px;
  font-size:.74rem;font-weight:700;margin:0 .25rem .25rem 0}
.fase-opwarming{--fase:var(--fase-opwarming)}
.fase-tussenvorm{--fase:var(--fase-tussenvorm)}
.fase-hoofdvorm{--fase:var(--fase-hoofdvorm)}
.fase-wedstrijdvorm{--fase:var(--fase-wedstrijdvorm)}
.fase-cooling-down{--fase:var(--fase-cooling-down)}
.fase-geen{--fase:var(--fase-geen)}
.fase-pill{display:inline-block;background:var(--fase,var(--fase-geen));color:var(--fase-ink);
  padding:.18rem .7rem;border-radius:999px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}

/* formulieren */
input,select,textarea{width:100%;min-height:44px;padding:.55rem .8rem;border:1.5px solid var(--line);
  border-radius:var(--radius-s);font-size:1rem;margin-top:.3rem;background:#fff;color:var(--ink);
  font-family:var(--body);transition:border-color .15s,box-shadow .15s}
textarea{min-height:0}
input[type=radio],input[type=checkbox]{width:auto;min-height:0;margin:0}
/* getallen: compacte opvulling, gecentreerd en zonder op/neer-pijltjes -- die namen 15 px in en
   lieten in een smal vakje (doelpunten, assists) geen plaats voor het getal zelf. De pijltoetsen
   blijven werken; op een gsm waren er nooit pijltjes. Zie ui_test_getallen.py. */
input[type=number]{padding-inline:.45rem;text-align:center;-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Redavo-blad op het selectiescherm (enkel Recrea): smal nummervak per speelster,
   kapitein en afgevaardigde naast elkaar, op een gsm onder elkaar. */
.nr-invoer{width:4.2rem}
.redavo-velden{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:.8rem 0 .2rem}
.redavo-velden label{display:flex;flex-direction:column;gap:.2rem;flex:1 1 14rem;margin:0}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--groen);box-shadow:0 0 0 3px rgba(0,132,61,.16)}
label{display:block;margin-bottom:.8rem;font-size:.9rem;font-weight:700;color:var(--ink)}

/* meldingen */
.muted{color:var(--grijs);font-size:.88rem}
.err{background:var(--danger-bg);color:var(--danger);padding:.7rem .9rem;border-radius:var(--radius-s);font-size:.9rem;margin-bottom:1rem}
.ok{background:var(--groen-zacht);color:var(--groen-d);padding:.7rem .9rem;border-radius:var(--radius-s);font-size:.9rem;margin-bottom:1rem;word-break:break-word}

/* hulpklassen */
.inline-form{display:inline}
.row-actions{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.row-actions input{width:auto;margin:0}
.off{opacity:.5}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.filterbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.filterbar>div{flex:1;min-width:140px}
.filterbar input,.filterbar select{margin-top:.2rem}
.pre-wrap{white-space:pre-wrap;line-height:1.6}
.meta{font-size:.84rem;color:var(--grijs)}
details.add summary{cursor:pointer;font-weight:700;color:var(--groen-d);padding:.45rem 0;font-family:var(--display)}

/* tabs (buiten Trainingen nog in gebruik) */
.tabs{display:flex;gap:.2rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.tabs a{padding:.55rem .95rem;font-size:.92rem;font-weight:800;color:var(--grijs);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--groen-d);text-decoration:none}
.tabs a.tab-active{color:var(--groen-d);border-bottom-color:var(--groen)}



@media (max-width:540px){ main{margin-top:1.1rem;padding:0 1rem} .card{padding:1.1rem} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* YD-IT eigendomsvermelding — subtiel, op elke pagina */
.ydit-footer{max-width:1100px;margin:1.6rem auto 0;padding:.9rem 1.3rem 1.5rem;text-align:center;
  border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:.3rem}
.ydit-footer a{display:inline-flex;align-items:center;gap:.5rem;color:#7a8a7d;text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.02em}
.ydit-footer a:hover{color:var(--groen-d)}
.ydit-footer img{height:22px;width:auto;opacity:.92}
.ydit-footer .copy{color:#9aa89c;font-size:.72rem}
/* ==== Veldtekening (diagram.js) ==== */
svg .dd-veldvlak{fill:url(#dd-gras) #86C96F}
svg .dd-veldvlak.dd-staand{fill:url(#dd-gras-p) #86C96F}
svg .dd-lijn{stroke:rgba(255,255,255,.92)}
svg .dd-stip{fill:#FFFFFF}

/* ==== Veld-editor (diagram_editor.html) ==== */
.editor{display:flex;flex-direction:column;gap:.8rem}
.editor-balk{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:.55rem .7rem;box-shadow:var(--shadow);position:sticky;top:.5rem;z-index:40}
.met-omgeving .editor-balk{top:calc(30px + .5rem)}
.terug-titel{max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-balk label{margin:0;display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.88rem}
.editor-balk select{width:auto;margin:0;min-height:40px}
.richting{display:inline-flex;gap:.2rem;background:var(--line-2);border-radius:999px;padding:.2rem}
.richting label{padding:.3rem .8rem;border-radius:999px;cursor:pointer;font-weight:700}
.richting input{position:absolute;opacity:0;width:1px;height:1px}
.richting label:has(input:checked){background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.richting label:has(input:focus-visible){outline:3px solid rgba(0,132,61,.45)}
.editor-acties{display:flex;flex-wrap:wrap;gap:.35rem}
.meer-knop{display:none}
.editor-hulp{position:relative}
.editor-hulp>summary{list-style:none}
.editor-hulp>summary::-webkit-details-marker{display:none}
.hulp-paneel{position:absolute;right:0;top:calc(100% + .4rem);width:min(440px,86vw);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:.9rem 1.1rem;font-size:.9rem;z-index:45}
.hulp-paneel ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.bewaar{margin-left:auto}
.editor-werk{display:grid;grid-template-columns:232px minmax(0,1fr);gap:.9rem;align-items:start}
.gereedschap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem;box-shadow:var(--shadow);
  position:sticky;top:5rem;max-height:calc(100vh - 6rem);overflow-y:auto}
/* enkel de kolom op laptop schuift onder de omgevingsbalk; op gsm/tablet is het een strook onderaan */
@media (min-width:1024px){.met-omgeving .gereedschap{top:calc(30px + 5rem)}}
.groep-tabs,.kleur-knop{display:none}
.strook{display:flex;flex-direction:column;gap:.6rem}
.tool-groep h3,.kleur-groep h3{margin:.2rem .3rem .3rem;font-family:var(--body);font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.tool-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem}
.tool{display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.25rem .45rem;border:1.5px solid transparent;border-radius:12px;
  background:var(--line-2);color:var(--ink);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;text-align:left;line-height:1.1}
.tool span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.tool{min-width:0}
.tool:hover{border-color:var(--groen)}
.tool.actief{background:var(--groen);border-color:var(--groen);color:#fff}
.tool-sticker{width:30px;height:30px;flex-shrink:0}
.tool .ico{width:22px;height:22px;margin:0 4px}
.kleuren{display:flex;flex-wrap:wrap;gap:.45rem;padding:0 .2rem}
.kleuren button{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.kleuren button.actief{outline:3px solid var(--groen);outline-offset:2px;border-color:#fff}
.kleur-groep .muted{font-size:.76rem;margin:.4rem .2rem 0}
.veld-vak{min-width:0}
#diagram{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);
  touch-action:none;cursor:crosshair;max-height:calc(100vh - 7rem);
  /* zo breed als de hoogte toelaat: geen witte zijbanden waarin een klik buiten het veld belandt */
  max-width:calc((100vh - 7rem) * var(--veld-ratio,10));margin-inline:auto}

@media (max-width:1023px){
  .editor-werk{grid-template-columns:minmax(0,1fr)}
  .veld-vak{padding-bottom:calc(var(--strook-h,140px) + .8rem)}
  .meer-knop{display:inline-flex}
  .editor-acties{display:none;position:absolute;left:.5rem;right:.5rem;top:calc(100% + .4rem);background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:.6rem;z-index:45}
  .editor-acties.open{display:flex}
  .terug-titel{display:none}
  .gereedschap{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;max-height:none;overflow:visible;border-radius:20px 20px 0 0;
    padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.4rem}
  .groep-tabs{display:flex;gap:.3rem;overflow-x:auto}
  .groep-tabs button{flex:0 0 auto;min-height:36px;padding:.2rem .85rem;border-radius:999px;border:0;background:var(--line-2);
    font:inherit;font-size:.82rem;font-weight:800;color:var(--ink);cursor:pointer}
  .groep-tabs button.actief{background:var(--ink);color:#fff}
  .strook{flex-direction:row;align-items:center;gap:.35rem;overflow-x:auto;position:relative}
  .tool-groep{display:none}
  .tool-groep.zichtbaar{display:block}
  .tool-groep h3,.kleur-groep h3,.kleur-groep .muted{display:none}
  .tool-lijst{display:flex;gap:.35rem}
  .tool{flex:0 0 auto;flex-direction:column;justify-content:center;gap:.15rem;min-width:66px;min-height:58px;font-size:.68rem;text-align:center}
  .kleur-groep{display:none;position:fixed;right:.6rem;bottom:calc(var(--strook-h,140px) + .4rem);background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.6rem;z-index:72}
  .kleur-groep.open{display:block}
  .kleuren button{width:40px;height:40px}
  .kleur-knop{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:2px solid var(--line);
    background:var(--card);cursor:pointer;margin-left:auto;position:sticky;right:0}
  .kleur-stip{width:28px;height:28px;border-radius:50%;background:conic-gradient(#F39C12,#F1C40F,#E74C3C,#2980B9,#00843D,#F39C12)}
  #diagram{max-height:none;max-width:none}
  /* actiebalk compact houden, zodat het veld hoog op het scherm begint */
  .editor-balk{gap:.4rem;padding:.45rem .5rem}
  .veldkeuze{flex:1 1 150px;min-width:0}
  .veldkeuze select{flex:1;width:100%;min-width:0}
  .richting label{padding:.25rem .55rem;font-size:.84rem}
  .bewaar .ico{display:none}
  .meer-knop,.editor-hulp>summary{padding:.35rem .6rem}
  .bewaar .btn{padding:.5rem .95rem}
}
@media (min-width:768px) and (max-width:1023px){ .gereedschap{left:var(--menu-smal)} }

/* ==== Sessiepagina (sessie.html) ==== */
.terug{margin:0 0 .8rem;font-weight:700}
.terug a{display:inline-flex;align-items:center;gap:.25rem}
.sessie-grid{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"kop zij" "blokken zij";align-items:start}
.sessie-kop{grid-area:kop;margin:0}
.sessie-blokken{grid-area:blokken;min-width:0}
.sessie-zij{grid-area:zij;position:sticky;top:1rem;display:flex;flex-direction:column;gap:1.1rem;max-height:calc(100vh - 2rem);overflow-y:auto}
.met-omgeving .sessie-zij{top:calc(30px + 1rem)}
.sessie-zij .card{margin:0;flex-shrink:0}
.sessie-materiaal>summary{list-style:none;cursor:pointer}
.sessie-materiaal>summary::-webkit-details-marker{display:none}
.sessie-materiaal>summary h2{display:inline;margin:0}
.sessie-materiaal[open]>summary{margin-bottom:.7rem}
.materiaal-vrij{margin:.45rem 0 0;padding-left:1.1rem;font-size:.9rem}
.fasebalk{display:flex;height:34px;border-radius:12px;overflow:hidden;margin:.8rem 0 .2rem;background:var(--line-2)}
.fasebalk>span{flex-grow:0;flex-shrink:0;background:var(--fase,var(--fase-geen));display:flex;align-items:center;justify-content:center;
  font-size:.78rem;color:var(--fase-ink);min-width:0;overflow:hidden;border-right:2px solid var(--card)}
.fasebalk>span:last-child{border-right:0}
.fasebalk.klein{height:10px;border-radius:999px;margin:.55rem 0 0}
.fasebalk.klein>span{border-right-width:1px}
.regels-strook{margin:.7rem 0 0;padding:.55rem .8rem;background:var(--groen-zacht);border-radius:12px;font-size:.88rem}
.tijdlijn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.blok{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-left:8px solid var(--fase,var(--fase-geen));border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.blok .grip{display:flex;flex-direction:column;gap:.25rem}
.blok .grip button{border:1px solid var(--line);background:var(--line-2);border-radius:8px;cursor:pointer;font-size:.7rem;line-height:1;
  min-width:32px;min-height:32px}
.blok .grip button:hover{background:var(--groen);color:#fff;border-color:var(--groen)}
.blok .grip button:disabled{opacity:.35;cursor:default}
.blok-inhoud{flex:1;min-width:0}
.blok-kop{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.blok-kop strong{font-family:var(--display);font-weight:600;font-size:1.08rem;overflow-wrap:anywhere}
.blok-duur{margin-left:auto;font-weight:800;color:var(--grijs);white-space:nowrap}
.blok-tekst{margin-top:.35rem}
.blok-diagram,.blok-beeld{display:block;width:100%;max-width:720px;height:auto;border-radius:12px;margin-top:.6rem;border:1px solid var(--line)}
.blok-bron{font-size:.74rem;margin-top:.2rem}
.blok-acties{margin-top:.5rem}
.blok-bewerk{margin-top:.4rem}
.blok-bewerk>summary{cursor:pointer;font-size:.82rem}
.blok-toevoegen{margin-top:1rem}
.blok-toevoegen>summary{list-style:none}
.blok-toevoegen>summary::-webkit-details-marker{display:none}
.blok-toevoegen[open]>summary{margin-bottom:.9rem}
.toevoeg-rooster{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.print-blok{border-left:8px solid var(--fase,var(--fase-geen))}

.aanw-kop{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.aanw-kop h2{margin:0}
.aanw-teller{margin-left:auto;font-weight:800;color:var(--groen-d);font-variant-numeric:tabular-nums}
.aanw-sluit{display:none}
.aanw-lijst{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.aanw-rij{display:flex;flex-direction:column;gap:.3rem;padding-bottom:.55rem;border-bottom:1px solid var(--line-2)}
.aanw-naam{font-weight:700;font-size:.92rem;overflow-wrap:anywhere}
.aanw-naam b{display:inline-block;min-width:1.9em;color:var(--grijs);font-variant-numeric:tabular-nums}
.aanw-keuze{display:flex;flex-wrap:wrap;gap:.3rem}
.aanw-optie{margin:0;display:inline-flex;font-size:.8rem;font-weight:800;position:relative}
.aanw-optie input{position:absolute;opacity:0;width:1px;height:1px}
.aanw-optie span{display:inline-flex;align-items:center;min-height:36px;padding:.2rem .75rem;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;color:var(--grijs);user-select:none}
.sessie-zij .aanw-optie span{padding:.2rem .55rem}
.sessie-zij .aanw-keuze{gap:.25rem}
@media (pointer:coarse){.aanw-optie span{min-height:44px}}
.aanw-optie input:focus-visible+span{outline:3px solid rgba(0,132,61,.45);outline-offset:2px}
.aanw-optie.st-aanwezig input:checked+span{background:var(--groen);border-color:var(--groen);color:#fff}
.aanw-optie.st-laat input:checked+span{background:#F1C40F;border-color:#F1C40F;color:#1A1A1A}
.aanw-optie.st-afwezig input:checked+span{background:#7C8A80;border-color:#7C8A80;color:#fff}
.aanw-optie.st-blessure input:checked+span{background:#E74C3C;border-color:#E74C3C;color:#fff}
.aanw-optie.st-leeg input:checked+span{background:var(--line-2)}
.js .js-verberg{display:none}
.aanw-bewaar{position:sticky;bottom:0;background:var(--card);padding-top:.4rem}
.aanw-knop{display:none}
@media (max-width:1023px){
  .sessie-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "mat" "blokken"}
  .sessie-zij{display:contents}
  .sessie-materiaal{grid-area:mat}
  .toevoeg-rooster{grid-template-columns:1fr}
  .sessie-aanwezig{position:fixed;left:0;right:0;bottom:0;z-index:75;max-height:85vh;overflow-y:auto;border-radius:22px 22px 0 0;
    transform:translateY(105%);transition:transform .2s ease;margin:0}
  .sessie-aanwezig.open{transform:none;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
  .aanw-sluit{display:inline-flex}
  .aanw-knop{display:inline-flex;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:65}
  .sessie-blokken{padding-bottom:4.5rem}
}
@media (min-width:768px) and (max-width:1023px){ .sessie-aanwezig{left:var(--menu-smal)} }

/* ==== Bibliotheek (oefeningen.html) ==== */
.zoekbalk{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:.6rem;box-shadow:var(--shadow);margin-bottom:1rem}
.zoekveld{flex:2 1 260px;display:flex;align-items:center;gap:.45rem;background:var(--line-2);border-radius:999px;padding:0 .9rem;margin:0}
.zoekveld .ico{color:var(--grijs)}
.zoekveld input{border:0;background:transparent;margin:0;box-shadow:none;min-height:44px;padding:0}
.zoekveld input:focus{box-shadow:none}
.zoekbalk select{flex:1 1 150px;width:auto;margin:0;border-radius:999px}
.oef-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.oef-card{display:flex;flex-direction:column;gap:.35rem;border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .7rem .9rem;
  background:var(--card);color:var(--ink);box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s;min-width:0}
.oef-card:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 16px 30px -18px rgba(0,132,61,.35)}
.oef-beeld{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--line-2);display:grid;place-items:center}
.oef-beeld img{width:100%;height:100%;object-fit:cover;object-position:top}
.oef-beeld img.oef-illustratie{object-fit:contain;padding:.6rem}
.oef-beeld svg{width:100%;height:100%}
.oef-card h3{margin:.25rem .2rem 0;font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere}
.oef-card .meta,.oef-tags{margin:0 .2rem}
.leeg-staat{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:1.5rem 1rem}
.leeg-staat img{width:min(320px,80%);height:auto}
.paginering{display:flex;justify-content:center;align-items:center;gap:.6rem;margin-top:1.2rem}

/* ==== Oefeningfiche (oefening.html) ==== */
.oef-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.1rem;align-items:start}
.oef-visueel,.oef-info{min-width:0}
.oef-visueel #diagram-view,.oef-visueel img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.paginatitel{overflow-wrap:anywhere}
@media (max-width:1023px){ .oef-detail{grid-template-columns:minmax(0,1fr)} }

/* ==== Sessielijst (sessies.html) ==== */
.sessie-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.sessie-kaart{display:flex;gap:.9rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem;box-shadow:var(--shadow);color:var(--ink);min-width:0;transition:transform .14s}
.sessie-kaart:hover{text-decoration:none;transform:translateY(-2px)}
.sk-datum{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--groen-zacht);
  color:var(--groen-d);border-radius:14px;padding:.45rem 0;line-height:1.05;text-align:center}
.sk-datum b{font-family:var(--display);font-size:1.5rem;font-weight:600}
.sk-datum span{font-size:.72rem;font-weight:800;text-transform:uppercase}
.sk-info{flex:1;min-width:0}
.sk-info h3{margin:0 0 .15rem;font-size:1.05rem;overflow-wrap:anywhere}

/* ==== Formulieren en aanmelden ==== */
.smal{max-width:760px}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.login-vak{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:2rem;align-items:center;max-width:980px;margin:6vh auto 3vh}
.login-beeld img{width:100%;height:auto;display:block}
@media (max-width:767px){
  .form-rij{grid-template-columns:1fr}
  .login-vak{grid-template-columns:minmax(0,1fr);gap:.8rem;margin-top:3vh}
  .login-beeld img{max-width:240px;margin:0 auto}
}

@media print{
  .print-blok{-webkit-print-color-adjust:exact;print-color-adjust:exact;border-left-width:6px}
  .aanw-knop,.sessie-aanwezig{display:none!important}
  .fasebalk>span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .editor-balk,.gereedschap{display:none!important}
  #diagram{border:0;max-height:none;max-width:none}
  svg .dd-veldvlak,svg .dd-veldvlak.dd-staand{fill:#eef3ee}
  svg .dd-lijn{stroke:#00843D}
  svg .dd-stip{fill:#00843D}
  @page{margin-bottom:1.1cm}
  .menu,.gsm-balk,.menu-achtergrond,.omgeving-balk,.no-print{display:none!important}
  body.met-menu{padding-left:0}
  body{background:#fff}
  main{margin:0;max-width:none;animation:none}
  .card{box-shadow:none;border:1px solid #cfd6cf;break-inside:avoid;animation:none}
  /* YD-IT vermelding: subtiele voetnoot onderaan ELKE afgedrukte pagina (in de paginamarge) */
  .ydit-footer{position:fixed;left:0;right:0;bottom:0;margin:0;padding:.08cm 0 .04cm;
    border-top:.5px solid #e4ebe5;background:#fff;gap:.05rem}
  .ydit-footer a{font-size:.5rem;font-weight:400;color:#b2bcb3;gap:.22rem;letter-spacing:0}
  .ydit-footer img{height:8px;opacity:.5}
  .ydit-footer .copy{font-size:.46rem;color:#c2ccc3}
}

/* Weekweergave van de wedstrijdkalender */
.weergave-keuze a { margin-right: .75rem; }
.weergave-keuze a.actief { font-weight: 700; text-decoration: none; }
.weeknav { display: flex; gap: 1rem; align-items: center; }
.weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.dagkolom { min-width: 0; }
.dagkolom h3 {
  background: #00843D; color: #fff; margin: 0 0 .35rem;
  padding: .3rem .4rem; font-size: .85rem; text-align: center; border-radius: 3px;
}
.wedstrijdkaart {
  display: block; margin-bottom: .35rem; padding: .35rem .45rem;
  border-left: 3px solid #00843D; background: #f6f6f6;
  font-size: .8rem; line-height: 1.3; color: inherit; text-decoration: none;
  overflow-wrap: anywhere;
}
.wedstrijdkaart:hover { background: #ececec; }
.wedstrijdkaart .uur { font-weight: 700; margin-right: .25rem; }
@media (max-width: 900px) {
  .weekgrid { grid-template-columns: 1fr; }
  .dagkolom h3 { text-align: left; }
}

/* Maandweergave van de wedstrijdkalender */
.maandgrid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem;
}
.maandgrid-kop {
  text-align: center; font-size: .75rem; font-weight: 700; color: var(--grijs);
  text-transform: uppercase; padding-bottom: .2rem;
}
.maanddag {
  min-width: 0; min-height: 4.5rem; padding: .3rem;
  background: var(--line-2); border-radius: 4px; overflow: hidden;
}
.maanddag.buiten-maand { background: transparent; }
.maanddag .dagnr { font-size: .75rem; font-weight: 700; color: var(--grijs); }
/* de weekdag staat in de kolomkop; op gsm vervalt die kop, dus tonen we hem in de cel */
.maanddag .dagnaam { display: none; }
.maandkaart {
  display: block; margin-top: .2rem; padding: .15rem .3rem;
  border-left: 3px solid var(--groen); background: var(--card);
  font-size: .72rem; line-height: 1.25; color: inherit; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maandkaart:hover { background: var(--line-2); }
.maandkaart .uur { font-weight: 700; margin-right: .2rem; }
@media (max-width: 900px) {
  .maandgrid-kop { display: none; }
  .maanddag .dagnaam { display: inline; }
  .maandgrid { grid-template-columns: 1fr; gap: .5rem; }
  .maanddag.buiten-maand, .maanddag.leeg { display: none; }
  .maanddag { min-height: 0; }
  .maandkaart { white-space: normal; }
}

/* Jaarweergave (seizoensoverzicht) */
.jaarmaand {
  margin: 1rem 0 .4rem; color: var(--groen-d);
}
.jaarmaand:first-child { margin-top: 0; }
.jaarrij {
  display: flex; gap: .6rem; align-items: center; padding: .3rem 0;
  border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none;
}
.jaarrij:hover { background: var(--line-2); }
.jaardatum { font-weight: 700; min-width: 3.2rem; }
.jaaruur { color: var(--grijs); min-width: 2.6rem; }

/* De wedstrijdlijst — Datum · Wedstrijd · Uitslag.

   De kolom Wedstrijd draagt de volledige confrontatie met de thuisploeg eerst; de
   kolom Uitslag daarnaast bevat enkel de twee cijfers. De volgorde staat daardoor
   nog altijd expliciet naast de getallen -- twee kale getallen ZONDER die kolom is
   wat vijf omgekeerde uitslagen veroorzaakte -- maar de uitslagkolom zelf blijft
   smal. Datum en Uitslag krimpen tot hun inhoud (`width: 1%` op een tabel met
   `width:100%`), zodat alle overblijvende ruimte naar de confrontatie gaat en de
   tabel op 390 px past zonder horizontaal schuiven. */
/* De tabel krimpt tot haar inhoud in plaats van altijd 100% te vullen. Op een
   breed scherm zou de kolom Wedstrijd anders alle overschot opslokken en de
   uitslag honderden pixels verderop parkeren -- terwijl juist het naast elkaar
   staan van de confrontatie en de cijfers de volgorde ondubbelzinnig maakt.
   Op 390 px valt ze terug op de beschikbare breedte en breekt de confrontatie
   over twee regels. LET OP: geen `width` op de cellen -- een percentage daar
   (ook `1%`) laat de auto-layout de tabel alsnog tot 100% oprekken, en dan staat
   de uitslag weer honderden pixels van de confrontatie. */
.wedstrijdlijst { width: auto; max-width: 100%; }
.wedstrijdlijst .w-datum { white-space: nowrap; }
.wedstrijdlijst .w-wedstrijd a { display: block; color: inherit; text-decoration: none; }
.wedstrijdlijst .w-wedstrijd a:hover .confrontatie { text-decoration: underline; }
.confrontatie { font-weight: 600; overflow-wrap: anywhere; }
/* Het beoordeeld-signaal staat hier en NOOIT in de uitslagkolom: een grijs '3/9'
   naast '7 - 5' kan voor een tweede score doorgaan. Vandaar ook het woord erbij. */
.w-meta { display: block; font-size: .74rem; font-weight: 400; color: var(--grijs); }

/* Uitslag — thuisploeg eerst. `tabular-nums` geeft elk cijfer dezelfde breedte,
   zodat de kolom verticaal te scannen is en de streepjes onder elkaar staan.
   Op het invulscherm staan de ploegnamen bóven de vakjes: daar wordt getypt, en
   daar is een naam bij elk vakje het verschil tussen een juiste en een omgekeerde
   uitslag. Die namen mogen daar op een smal scherm ingekort worden (ellips,
   volledig in het title-attribuut), maar nooit weggelaten. */
.uitslag-cijfers { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uitslag-ploeg {
  display: inline-block; max-width: 14ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.veldkop { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); }
.uitslag-invoer { display: flex; align-items: flex-end; gap: .35rem; margin-top: .2rem; }
.uitslag-vak { margin: 0; flex: 1 1 0; min-width: 0; font-size: .78rem; }
.uitslag-vak .uitslag-ploeg { display: block; max-width: 100%; color: var(--grijs); }
.uitslag-vak input { width: 100%; margin-top: .15rem; text-align: center; }
.uitslag-streep { padding-bottom: .55rem; font-weight: 700; }
/* Een wedstrijd die niet doorgegaan is. Bewust niet in het groen van een badge:
   dit is geen prestatie maar een mededeling, en ze moet vooral niet lijken op een
   vergeten uitslag. */
.niet-doorgegaan {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  background: #f2f4f2; color: var(--grijs); border: 1px solid var(--line);
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}

/* Live scoreblad — gemaakt voor één duim op een gsm */
.live-stand { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.live-ploeg { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.live-score { font-size: 2rem; font-weight: 700; color: var(--groen-d); white-space: nowrap; }
.live-invoer { display: flex; flex-direction: column; gap: .5rem; }
.live-invoer label { margin: 0; }
.live-knoppen { display: flex; gap: .5rem; }
.live-knoppen .btn { flex: 1; font-size: 1.1rem; padding: .6rem; }
.live-regel {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line-2);
}
.live-minuut { font-weight: 700; min-width: 2.6rem; }
.live-soort { min-width: 7rem; color: var(--grijs); }
.live-namen { flex: 1; overflow-wrap: break-word; }
.live-detail { color: var(--grijs); overflow-wrap: break-word; }
@media (max-width: 700px) {
  .live-regel { flex-wrap: wrap; }
  .live-soort { min-width: 0; }
  .live-namen, .live-detail { flex: 1 0 100%; }
}

/* Opstelling per speelperiode */
.periode-balk { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.periode-tab {
  padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: inherit; font-size: .9rem;
}
.periode-tab.actief { background: var(--groen); color: #fff; border-color: var(--groen); }
.periode-tab.actief .muted { color: rgba(255,255,255,.75); }
.periode-onvolledig {
  display: inline-block; margin-left: .3rem; color: var(--grijs); font-size: .72rem;
  font-weight: 700;
}

.periode-instellingen { margin-top: .7rem; }
.periode-instellingen summary { cursor: pointer; font-weight: 700; color: var(--groen-d); padding: .3rem 0; }
.periode-minuten-form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin: .5rem 0; }
.periode-minuut { margin: 0; font-size: .8rem; font-weight: 600; }
.periode-minuut input { display: inline-block; width: 4.2em; margin: .2rem .3rem 0 0; }
.periode-raster-form { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line-2); }
.periode-raster-form label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.periode-raster-form select { width: auto; margin: 0; display: inline-block; }

.opstelling-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.opstelling-veld { width: 100%; height: auto; cursor: default; }
.opstelling-veld .gras { fill: var(--gras); }
/* stroke-width en font-size komen NIET hier vandaan: elk veldformaat heeft zijn
   eigen viewBox-eenheden (meter), dus de template zet ze per render als attribuut. */
.opstelling-veld .belijning { fill: none; stroke: var(--groen); }
.opstelling-veld .pion-cirkel { fill: var(--groen); }
.opstelling-veld .pion-nr { fill: #fff; font-weight: 700; }
/* Een naam mag over de belijning vallen -- vlak bij de eigen doellijn is dat de
   enige plaats waar ze nog past. Een halo in de graskleur haalt de lijn onder de
   letters weg, zodat de naam leesbaar blijft in plaats van doorstreept. In em,
   niet in gebruikerseenheden: het font schaalt met de veldbreedte, een vaste
   dikte zou op een U9-veld een klodder zijn en op een vol terrein onzichtbaar. */
.opstelling-veld .pion-naam { fill: var(--grijs); paint-order: stroke;
  stroke: var(--gras); stroke-width: .22em; stroke-linejoin: round; }
.opstelling-veld .plek-cirkel { fill: rgba(255,255,255,.55); stroke: var(--groen); stroke-dasharray: .9 .6; }
.opstelling-veld .plek-nr { fill: var(--groen-d); font-weight: 700; }
.plekken { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.plek-form label { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1.3fr); gap: .5rem; align-items: center; margin: 0; }
.plek-form .plek-nr { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--groen); color: #fff; font-weight: 800; font-size: .9rem; }
.plek-form .plek-naam { font-size: .88rem; font-weight: 700; }
.plek-form select { margin: 0; width: 100%; }
.zonder-plek { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.zonder-plek p { margin: 0; font-size: .85rem; }
.formatie-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }

.opstelling-bank { display: flex; flex-wrap: wrap; gap: .4rem; }
.speelster {
  border: 1px solid var(--line); background: var(--paneel, #fff); border-radius: 6px;
  padding: .35rem .6rem; font: inherit; font-size: .88rem;
  display: inline-flex; gap: .35rem; align-items: center;
}

.opstelling-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-top: .8rem; }
.waarschuwing { border-left: 3px solid #E67E22; }
.waarschuwing p { margin: .2rem 0; }

@media (max-width: 900px) {
  .opstelling-grid { grid-template-columns: 1fr; }
}