/* ============================================================
   SV Basteom Toto - huisstijl
   Kleuren en lettertypes komen van svbasteom.nl.
   Opbouw: 1 tokens - 2 basis - 3 layout - 4 componenten
           5 pagina-onderdelen - 6 beweging - 7 schermformaten
   ============================================================ */

/* ---------- 1. Tokens --------------------------------------- */

:root {
  color-scheme: light;

  /* Merkkleuren, overgenomen van de clubsite */
  --blauw:        #0090e3;
  --blauw-diep:   #0079c0;
  --blauw-donker: #083480;
  --blauw-nacht:  #06265c;
  --blauw-licht:  #c5e7e8;
  --blauw-mist:   #eaf6f6;
  --goud:         #f2b01e;   /* accent voor het klassement */
  --goud-zacht:   #fff4d6;

  /* Vlakken met altijd witte tekst erop. Deze kantelen bewust NIET mee
     in donkere modus, anders komt wit op lichtblauw te staan. */
  --banier-van:   #083480;
  --banier-tot:   #0090e3;
  --banier-diep:  #06265c;

  /* Clubnaam als gewone tekst. Apart van het knopblauw, want deze
     staat ook op de lichtgrijze rijen van een tabel. */
  --basteom-tekst:   #006ba8;

  /* Knopvlak en -tekst. Draaien samen mee, zodat het contrast in
     beide standen boven 4.5:1 blijft. */
  --knop-vlak:       #0079c0;
  --knop-vlak-hover: #083480;
  --knop-tekst:      #ffffff;
  --knop-rood-vlak:  #c0272d;
  --knop-rood-hover: #9d1f24;
  --knop-rood-tekst: #ffffff;

  /* Vlakken en tekst */
  --grond:        #f2f6f9;
  --vlak:         #ffffff;
  --vlak-zacht:   #f7fafc;
  --tekst:        #1f2733;
  --tekst-zacht:  #5d6b7a;
  --tekst-fijn:   #6a7684;
  --lijn:         #e2e9ef;
  --lijn-sterk:   #cbd6e0;

  /* Statuskleuren */
  --groen:        #0f6d3f;
  --groen-vlak:   #e6f6ee;
  --oranje:       #a55a00;
  --oranje-vlak:  #fdf1de;
  --rood:         #c0272d;
  --rood-vlak:    #fdeaea;
  --info-vlak:    var(--blauw-mist);

  /* Podium */
  --podium-1:     #fff7e0;
  --podium-2:     #eef1f4;
  --podium-3:     #fbeee2;

  /* Letters */
  --kop:  'Teko', 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;

  /* Ruimte: modulaire schaal van 4px */
  --r-1: 4px;   --r-2: 8px;   --r-3: 12px;  --r-4: 16px;
  --r-5: 24px;  --r-6: 32px;  --r-7: 48px;  --r-8: 64px;

  /* Rondingen */
  --rond-s:  6px;
  --rond-m:  10px;
  --rond-l:  16px;
  --rond-vol: 999px;

  /* Schaduwen: gelaagd, in de tint van het merk */
  --schaduw-s: 0 1px 2px rgba(8, 52, 128, .06),
               0 1px 3px rgba(8, 52, 128, .07);
  --schaduw-m: 0 2px 4px rgba(8, 52, 128, .05),
               0 6px 16px rgba(8, 52, 128, .08);
  --schaduw-l: 0 4px 8px rgba(8, 52, 128, .06),
               0 16px 32px rgba(8, 52, 128, .12);
  --ring:      0 0 0 3px rgba(0, 144, 227, .35);

  /* Beweging */
  --snel:   140ms;
  --normaal: 220ms;
  --traag:  320ms;
  --soepel: cubic-bezier(.22, .61, .36, 1);   /* ease-out, voor binnenkomen */
  --terug:  cubic-bezier(.34, 1.4, .64, 1);   /* lichte overshoot */

  /* Stapelvolgorde: vaste schaal, geen willekeurige getallen */
  --laag-plakkend: 10;
  --laag-kop:      20;
  --laag-overlay:  30;
  --laag-melding:  50;
}

/* Donkere modus: alleen de tokens wisselen, de rest blijft gelijk.
   Volgt het systeem, tenzij de bezoeker zelf een keuze maakt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) { color-scheme: dark; }
}
:root[data-thema="donker"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --blauw:        #35a9ee;
    --blauw-diep:   #59bdf5;
    --blauw-donker: #8ecdf3;
    --blauw-nacht:  #0d1b2e;
    --blauw-licht:  #1b3a58;
    --blauw-mist:   #16283d;
    --goud:         #f5c451;
    --goud-zacht:   #3a2f13;

    --grond:        #0d1521;
    --vlak:         #16202e;
    --vlak-zacht:   #1b2634;
    --tekst:        #e6edf5;
    --tekst-zacht:  #a3b1c2;
    --tekst-fijn:   #7d8b9c;
    --lijn:         #26313f;
    --lijn-sterk:   #364455;

    --groen:        #5fd39a;
    --groen-vlak:   #10331f;
    --oranje:       #f0b357;
    --oranje-vlak:  #38290f;
    --rood:         #f08b8b;
    --rood-vlak:    #3a1a1c;

    --podium-1:     #33290c;
    --podium-2:     #232c37;
    --podium-3:     #33251a;

    --banier-van:   #0a2748;
    --banier-tot:   #0f5c93;
    --banier-diep:  #0b1a2c;

    --basteom-tekst:   #59bdf5;
    --knop-vlak:       #35a9ee;
    --knop-vlak-hover: #59bdf5;
    --knop-tekst:      #08243c;
    --knop-rood-vlak:  #f08b8b;
    --knop-rood-hover: #f7a9a9;
    --knop-rood-tekst: #3a0f11;

    --schaduw-s: 0 1px 2px rgba(0, 0, 0, .4);
    --schaduw-m: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .4);
    --schaduw-l: 0 4px 8px rgba(0, 0, 0, .35), 0 16px 32px rgba(0, 0, 0, .5);
    --ring:      0 0 0 3px rgba(53, 169, 238, .45);
  }
}

:root[data-thema="donker"] {
  --blauw:        #35a9ee;
  --blauw-diep:   #59bdf5;
  --blauw-donker: #8ecdf3;
  --blauw-nacht:  #0d1b2e;
  --blauw-licht:  #1b3a58;
  --blauw-mist:   #16283d;
  --goud:         #f5c451;
  --goud-zacht:   #3a2f13;

  --grond:        #0d1521;
  --vlak:         #16202e;
  --vlak-zacht:   #1b2634;
  --tekst:        #e6edf5;
  --tekst-zacht:  #a3b1c2;
  --tekst-fijn:   #7d8b9c;
  --lijn:         #26313f;
  --lijn-sterk:   #364455;

  --groen:        #5fd39a;
  --groen-vlak:   #10331f;
  --oranje:       #f0b357;
  --oranje-vlak:  #38290f;
  --rood:         #f08b8b;
  --rood-vlak:    #3a1a1c;

  --podium-1:     #33290c;
  --podium-2:     #232c37;
  --podium-3:     #33251a;

  --banier-van:   #0a2748;
  --banier-tot:   #0f5c93;
  --banier-diep:  #0b1a2c;

  --basteom-tekst:   #59bdf5;
  --knop-vlak:       #35a9ee;
  --knop-vlak-hover: #59bdf5;
  --knop-tekst:      #08243c;
  --knop-rood-vlak:  #f08b8b;
  --knop-rood-hover: #f7a9a9;
  --knop-rood-tekst: #3a0f11;

  --schaduw-s: 0 1px 2px rgba(0, 0, 0, .4);
  --schaduw-m: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .4);
  --schaduw-l: 0 4px 8px rgba(0, 0, 0, .35), 0 16px 32px rgba(0, 0, 0, .5);
  --ring:      0 0 0 3px rgba(53, 169, 238, .45);
}

/* ---------- 2. Basis ---------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--r-7);
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--grond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: .005em;
  margin: 0 0 .35em;
  color: var(--blauw-donker);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem); }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1em; max-width: 72ch; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }

a {
  color: var(--blauw-donker);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--snel) var(--soepel);
}
a:hover { color: var(--blauw); }

code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .88em;
  background: var(--vlak-zacht);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-s);
  padding: 1px 5px;
}

/* Eén zichtbare focusring voor alles wat bedienbaar is.
   Nooit weghalen zonder vervanging: toetsenbordgebruikers zijn hem kwijt. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blauw);
  outline-offset: 2px;
  border-radius: var(--rond-s);
}

::selection { background: var(--blauw-licht); color: var(--tekst); }

.icoon { display: inline-block; vertical-align: -.18em; flex: none; }

/* Voor schermlezers, onzichtbaar op het scherm */
.alleen-lezer {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Naar de inhoud springen met de tab-toets */
.overslaan {
  position: absolute;
  left: var(--r-4);
  top: -100px;
  z-index: var(--laag-melding);
  background: var(--banier-van);
  color: #fff;
  padding: var(--r-3) var(--r-5);
  border-radius: var(--rond-m);
  font-family: var(--kop);
  font-size: 1.1rem;
  text-decoration: none;
  transition: top var(--normaal) var(--soepel);
}
.overslaan:focus { top: var(--r-4); color: #fff; }

/* ---------- 3. Layout --------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--r-5);
}

main.wrap { padding-block: var(--r-6) var(--r-8); }

.rooster { display: grid; gap: var(--r-5); }
@media (min-width: 760px) {
  .rooster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stapel { display: flex; flex-direction: column; gap: var(--r-4); }
.rij     { display: flex; align-items: center; gap: var(--r-3); flex-wrap: wrap; }

/* ---------- 4. Componenten ---------------------------------- */

/* --- Koptekst --- */

.site-header {
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  z-index: var(--laag-kop);
  backdrop-filter: saturate(140%) blur(8px);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--r-4);
  min-height: 72px;
  flex-wrap: wrap;
}
/* Ruimte onder de kop zodat het overlappende embleem er niet uit valt. */
.site-header { padding-bottom: 4px; }

.brand {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  min-height: 44px;
  text-decoration: none;
  margin-right: auto;
  border-radius: var(--rond-m);
}
.brand img {
  height: 56px;
  width: auto;
  display: block;
  /* Het embleem zakt over de blauwe balk heen, net als op svbasteom.nl. */
  margin-bottom: -18px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(8, 52, 128, .22));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  font-family: var(--kop);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--blauw-donker);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.brand-text em {
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blauw-diep);
  font-weight: 700;
}

.mainnav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.mainnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  font-family: var(--kop);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tekst-zacht);
  text-decoration: none;
  padding: 10px 13px;
  min-height: 44px;
  border-radius: var(--rond-m);
  position: relative;
  transition: color var(--snel) var(--soepel),
              background var(--snel) var(--soepel);
}
.mainnav a .icoon { opacity: .75; }
.mainnav a:hover { background: var(--blauw-mist); color: var(--blauw-donker); }
.mainnav a.is-active { color: var(--blauw-donker); }
.mainnav a.is-active .icoon { opacity: 1; color: var(--blauw); }
.mainnav a.is-active::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 3px;
  border-radius: var(--rond-vol);
  background: var(--blauw);
}
.mainnav a.nav-cta {
  background: var(--knop-vlak);
  color: var(--knop-tekst);
  box-shadow: var(--schaduw-s);
}
.mainnav a.nav-cta .icoon { opacity: 1; }
.mainnav a.nav-cta:hover { background: var(--knop-vlak-hover); color: var(--knop-tekst); }
.mainnav a.nav-cta::after { display: none; }

.thema-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-m);
  background: var(--vlak);
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: background var(--snel) var(--soepel),
              color var(--snel) var(--soepel),
              border-color var(--snel) var(--soepel);
}
.thema-knop:hover { background: var(--blauw-mist); color: var(--blauw-donker); border-color: var(--blauw-licht); }
.thema-knop .maan  { display: none; }
:root[data-thema="donker"] .thema-knop .maan { display: block; }
:root[data-thema="donker"] .thema-knop .zon  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .thema-knop .maan { display: block; }
  :root:not([data-thema="licht"]) .thema-knop .zon  { display: none; }
}

.navtoggle, .navtoggle-label { display: none; }

.header-stripe {
  height: 6px;
  background: linear-gradient(90deg, var(--blauw) 0%, var(--blauw-diep) 55%, var(--blauw-donker) 100%);
}

/* --- Kaarten --- */

.kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-s);
  padding: var(--r-5);
  margin-bottom: var(--r-5);
  transition: box-shadow var(--normaal) var(--soepel),
              transform var(--normaal) var(--soepel);
}
.kaart > :last-child { margin-bottom: 0; }
.kaart h2 { margin-top: 0; }

.kaart-kop { border-top: 3px solid var(--blauw); }

/* Alleen kaarten die je echt kunt aanklikken krijgen een hover-lift. */
a.kaart:hover, .kaart-tilt:hover {
  box-shadow: var(--schaduw-m);
  transform: translateY(-2px);
}

.kerncijfer { text-align: center; padding-block: var(--r-5); }
.kerncijfer .cijfer-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--r-3);
  border-radius: var(--rond-vol);
  background: var(--blauw-mist);
  color: var(--blauw);
}
.kerncijfer .getal {
  font-family: var(--kop);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--blauw);
  display: block;
  font-variant-numeric: tabular-nums;
}
.kerncijfer .getal small {
  font-size: .42em;
  color: var(--tekst-fijn);
  font-weight: 400;
}
.kerncijfer .label {
  display: block;
  margin-top: var(--r-2);
  padding: 0;
  background: none;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--tekst-zacht);
  white-space: normal;
}

/* --- Knoppen --- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-2);
  font-family: var(--kop);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 11px var(--r-5);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--rond-m);
  background: var(--knop-vlak);
  color: var(--knop-tekst);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schaduw-s);
  transition: background var(--snel) var(--soepel),
              box-shadow var(--snel) var(--soepel),
              transform var(--snel) var(--soepel);
}
.knop:hover { background: var(--knop-vlak-hover); color: var(--knop-tekst); box-shadow: var(--schaduw-m); }
.knop:active { transform: translateY(1px); box-shadow: var(--schaduw-s); }

.knop-lijn {
  background: transparent;
  color: var(--blauw-donker);
  border-color: var(--knop-vlak);
  box-shadow: none;
}
.knop-lijn:hover { background: var(--knop-vlak); color: var(--knop-tekst); }

.knop-stil {
  background: transparent;
  color: var(--tekst-zacht);
  border-color: var(--lijn);
  box-shadow: none;
}
.knop-stil:hover { background: var(--vlak-zacht); color: var(--tekst); border-color: var(--lijn-sterk); }

.knop-wit { background: #fff; color: var(--banier-van); }
.knop-wit:hover { background: #dcecfa; color: var(--banier-van); }

.knop-rood { background: var(--knop-rood-vlak); color: var(--knop-rood-tekst); }
.knop-rood:hover { background: var(--knop-rood-hover); color: var(--knop-rood-tekst); }

.knop-klein { font-size: 1rem; padding: 7px var(--r-4); min-height: 38px; }

.knop[disabled], .knop.is-bezig {
  cursor: not-allowed;
  opacity: .6;
  box-shadow: none;
  transform: none;
}

/* Draaiend wieltje tijdens het verzenden: geeft aan dat er iets gebeurt. */
.knop.is-bezig::before {
  content: '';
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--rond-vol);
  animation: draai .7s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

/* --- Formulieren --- */

label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--r-2);
  font-size: .93rem;
  color: var(--tekst);
}
.veld { margin-bottom: var(--r-5); }
.veld:last-child { margin-bottom: 0; }
.veld .hint {
  font-size: .85rem;
  color: var(--tekst-zacht);
  margin: var(--r-2) 0 0;
  max-width: 60ch;
}
.optioneel { font-weight: 400; color: var(--tekst-fijn); }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=date], input[type=datetime-local],
input[type=search], select, textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.4;
  padding: 11px var(--r-3);
  min-height: 44px;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond-m);
  background: var(--vlak);
  color: var(--tekst);
  transition: border-color var(--snel) var(--soepel),
              box-shadow var(--snel) var(--soepel);
}
input::placeholder, textarea::placeholder { color: var(--tekst-fijn); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--blauw-licht);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blauw);
  box-shadow: var(--ring);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--vlak-zacht);
  color: var(--tekst-fijn);
  cursor: not-allowed;
}
textarea { min-height: 96px; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--r-3) center;
  padding-right: var(--r-6);
}

/* Cijfervelden: pijltjes weg, dat scheelt mistikken bij een score. */
input[type=number] { appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { appearance: none; margin: 0; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--r-5); }
legend { font-family: var(--kop); font-size: 1.6rem; color: var(--blauw-donker); padding: 0; }

.keuzerij { display: flex; gap: var(--r-3); flex-wrap: wrap; }
.keuzerij label {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  font-weight: 500;
  margin: 0;
  padding: 10px var(--r-4);
  min-height: 44px;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond-m);
  background: var(--vlak);
  cursor: pointer;
  transition: border-color var(--snel) var(--soepel),
              background var(--snel) var(--soepel);
}
.keuzerij label:hover { border-color: var(--blauw-licht); background: var(--blauw-mist); }
.keuzerij label:has(input:checked) {
  border-color: var(--blauw);
  background: var(--blauw-mist);
  color: var(--blauw-donker);
  font-weight: 700;
}
.keuzerij input { width: auto; min-height: 0; accent-color: var(--blauw); }

input[type=checkbox], input[type=radio] { accent-color: var(--blauw); cursor: pointer; }

/* --- Tabellen --- */

.tabel-omhulsel {
  overflow-x: auto;
  border-radius: var(--rond-m);
  -webkit-overflow-scrolling: touch;
}

table.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
table.tabel th {
  font-family: var(--kop);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  background: var(--blauw-donker);
  color: #fff;
  padding: 9px var(--r-3);
  white-space: nowrap;
}
:root[data-thema="donker"] table.tabel th { color: var(--blauw-nacht); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) table.tabel th { color: var(--blauw-nacht); }
}
table.tabel th:first-child { border-top-left-radius: var(--rond-m); }
table.tabel th:last-child  { border-top-right-radius: var(--rond-m); }

table.tabel td {
  padding: 10px var(--r-3);
  border-bottom: 1px solid var(--lijn);
  vertical-align: middle;
}
table.tabel tbody tr { transition: background var(--snel) var(--soepel); }
table.tabel tbody tr:nth-child(even) { background: var(--vlak-zacht); }
table.tabel tbody tr:hover { background: var(--blauw-mist); }
table.tabel tbody tr:last-child td { border-bottom: 0; }
table.tabel td.num, table.tabel th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabel td.mid, table.tabel th.mid { text-align: center; }

/* --- Labels --- */

.label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: var(--rond-vol);
  background: var(--blauw-mist);
  color: var(--blauw-donker);
  white-space: nowrap;
  line-height: 1.5;
}
.label-groen  { background: var(--groen-vlak);  color: var(--groen); }
.label-oranje { background: var(--oranje-vlak); color: var(--oranje); }
.label-rood   { background: var(--rood-vlak);   color: var(--rood); }
.label-grijs  { background: var(--vlak-zacht);  color: var(--tekst-zacht); }
.label-goud   { background: var(--goud-zacht);  color: #8a6100; }
/* Boosterwedstrijd: punten tellen dubbel. Krijgt bewust de goudtint,
   dezelfde die het klassement gebruikt. */
.label-booster {
  background: var(--goud-zacht);
  color: #8a6100;
  box-shadow: inset 0 0 0 1px rgba(242, 176, 30, .5);
}
.label-booster .icoon { color: var(--goud); }
:root[data-thema="donker"] .label-goud,
:root[data-thema="donker"] .label-booster { color: var(--goud); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .label-goud,
  :root:not([data-thema="licht"]) .label-booster { color: var(--goud); }
}

/* --- Meldingen --- */

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--r-3);
  padding: var(--r-3) var(--r-4);
  border-radius: var(--rond-m);
  margin-bottom: var(--r-4);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--blauw);
  background: var(--info-vlak);
  color: var(--tekst);
  animation: opdoemen var(--traag) var(--soepel) both;
}
.flash .icoon { margin-top: 3px; color: var(--blauw); }
.flash-success { border-left-color: var(--groen);  background: var(--groen-vlak); }
.flash-success .icoon { color: var(--groen); }
.flash-warning { border-left-color: var(--oranje); background: var(--oranje-vlak); }
.flash-warning .icoon { color: var(--oranje); }
.flash-error   { border-left-color: var(--rood);   background: var(--rood-vlak); }
.flash-error .icoon { color: var(--rood); }

.leeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--r-3);
  text-align: center;
  padding: var(--r-7) var(--r-5);
  color: var(--tekst-zacht);
  background: var(--vlak);
  border: 1px dashed var(--lijn-sterk);
  border-radius: var(--rond-l);
  margin-bottom: var(--r-5);
}
.leeg .icoon { color: var(--tekst-fijn); }
.leeg p { margin: 0; }

/* ---------- 5. Pagina-onderdelen ---------------------------- */

/* --- Hero --- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--banier-van) 0%, var(--banier-tot) 100%);
  color: #fff;
  padding-block: var(--r-8) var(--r-7);
  margin-bottom: var(--r-6);
}
/* Diagonale streep die het blokkerige van de clubsite oppakt. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 92% 12%, rgba(255,255,255,.16), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: var(--r-3); }
.hero p { font-size: 1.08rem; color: rgba(255,255,255,.92); max-width: 58ch; }
.hero .hero-knoppen { display: flex; gap: var(--r-3); flex-wrap: wrap; margin-top: var(--r-5); }
.hero .knop-lijn { border-color: rgba(255,255,255,.7); color: #fff; }
.hero .knop-lijn:hover { background: #fff; color: var(--banier-van); border-color: #fff; }

/* --- Deadlinebalk --- */

.deadline {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  flex-wrap: wrap;
  background: var(--banier-diep);
  color: #fff;
  padding: var(--r-3) var(--r-5);
  border-radius: var(--rond-m);
  margin-bottom: var(--r-5);
  font-family: var(--kop);
  font-size: 1.25rem;
  letter-spacing: .02em;
  box-shadow: var(--schaduw-s);
}
:root[data-thema="donker"] .deadline { border: 1px solid var(--lijn); }
.deadline .icoon { color: var(--blauw); }
.deadline .countdown {
  color: var(--goud);
  font-variant-numeric: tabular-nums;
}
.deadline.is-closed { background: var(--rood); }
.deadline.is-closed .icoon, .deadline.is-closed .countdown { color: #fff; }

/* --- Wedstrijdrij --- */

.speelronde-kop {
  display: flex;
  align-items: center;
  gap: var(--r-2);
  font-family: var(--kop);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--blauw-donker);
  margin: var(--r-6) 0 var(--r-3);
  padding-bottom: var(--r-2);
  border-bottom: 2px solid var(--blauw-licht);
}
.speelronde-kop:first-child { margin-top: 0; }
.speelronde-kop .icoon { color: var(--blauw); }

.wedstrijd {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--r-3);
  padding: var(--r-3) var(--r-3);
  border-radius: var(--rond-m);
  transition: background var(--snel) var(--soepel);
}
.wedstrijd + .wedstrijd { border-top: 1px solid var(--lijn); }
.wedstrijd:hover { background: var(--vlak-zacht); }
.wedstrijd:focus-within { background: var(--blauw-mist); }
/* Boosterwedstrijd springt eruit op het invulformulier */
.wedstrijd.is-booster {
  background: var(--goud-zacht);
  box-shadow: inset 3px 0 0 var(--goud);
}
.wedstrijd.is-booster:hover { background: var(--goud-zacht); }
.wedstrijd .thuis { text-align: right; font-weight: 700; }
.wedstrijd .uit   { text-align: left;  font-weight: 700; }
/* De clubnaam wordt ook als gewone tabeltekst gebruikt. Het heldere
   #0090e3 haalt daar maar 3.4:1, een tint dieper haalt 4.7:1. */
.basteom { color: var(--basteom-tekst); font-weight: 700; }
.wedstrijd .invoer { display: flex; align-items: center; gap: var(--r-2); }
.wedstrijd .invoer input {
  width: 56px;
  min-height: 48px;
  text-align: center;
  font-family: var(--kop);
  font-size: 1.6rem;
  padding: 2px;
  border-radius: var(--rond-m);
  background: var(--vlak-zacht);
}
.wedstrijd .invoer input:focus { background: var(--vlak); }
.wedstrijd .streep {
  font-family: var(--kop);
  font-size: 1.3rem;
  color: var(--tekst-fijn);
}
.wedstrijd-meta {
  grid-column: 1 / -1;
  order: -1;
  text-align: center;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--tekst-fijn);
}

.uitslag-vak {
  display: inline-block;
  font-family: var(--kop);
  font-size: 1.4rem;
  background: var(--blauw-donker);
  color: #fff;
  padding: 2px var(--r-3);
  border-radius: var(--rond-s);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
:root[data-thema="donker"] .uitslag-vak { color: var(--blauw-nacht); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .uitslag-vak { color: var(--blauw-nacht); }
}
.uitslag-vak.leeg {
  display: inline-block;
  background: var(--vlak-zacht);
  color: var(--tekst-fijn);
  border: 1px solid var(--lijn);
  padding: 2px var(--r-3);
  margin: 0;
}

/* --- Klassement --- */

.plek {
  font-family: var(--kop);
  font-size: 1.35rem;
  color: var(--blauw-donker);
  font-variant-numeric: tabular-nums;
}
tr.podium-1 td { background: var(--podium-1) !important; }
tr.podium-2 td { background: var(--podium-2) !important; }
tr.podium-3 td { background: var(--podium-3) !important; }
tr.podium-1 .plek { color: #a97800; }
:root[data-thema="donker"] tr.podium-1 .plek { color: var(--goud); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) tr.podium-1 .plek { color: var(--goud); }
}
tr.is-ik td { box-shadow: inset 3px 0 0 var(--blauw); font-weight: 700; }

/* Naamcel met initialen ervoor, zodat een lange lijst scanbaar blijft */
.deelnemer-cel {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  text-decoration: none;
  color: inherit;
  border-radius: var(--rond-m);
  padding: 2px 0;
}
a.deelnemer-cel:hover { color: var(--blauw-donker); }
a.deelnemer-cel:hover span:last-child { text-decoration: underline; }
a.deelnemer-cel:hover .initialen { background: var(--blauw); color: var(--knop-tekst); }

/* Opbrengst van de laatste speelronde */
.ronde-punten {
  display: inline-block;
  min-width: 34px;
  padding: 1px 7px;
  border-radius: var(--rond-vol);
  background: var(--goud-zacht);
  color: #8a6100;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
:root[data-thema="donker"] .ronde-punten { color: var(--goud); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .ronde-punten { color: var(--goud); }
}
tr.ronde-nu td { background: var(--blauw-mist) !important; }
.initialen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--rond-vol);
  background: var(--blauw-mist);
  color: var(--blauw-donker);
  /* Bewust de bodyfont: Teko heeft een hoge bovenlengte waardoor twee
     hoofdletters optisch te hoog in de cirkel komen te staan. */
  font-family: var(--body);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  letter-spacing: .03em;
  text-indent: .03em;      /* compenseert de letterafstand rechts */
  font-variant-numeric: tabular-nums;
}
.initialen-groot {
  width: 60px; height: 60px;
  font-size: 1.35rem;
}

/* Kop van de publieke deelnemerpagina */
.deelnemer-kop {
  display: flex;
  align-items: center;
  gap: var(--r-4);
  margin-bottom: var(--r-5);
}
.deelnemer-kop h1 { margin: 0; }
.deelnemer-kop .mini { margin: 2px 0 0; font-size: .88rem; color: var(--tekst-zacht); }
tr.podium-1 .initialen { background: var(--goud); color: #4a3400; }
tr.podium-2 .initialen { background: var(--lijn-sterk); color: var(--tekst); }
tr.podium-3 .initialen { background: #e2b98f; color: #4a2c0e; }

.pijl-op     { color: var(--groen); }
.pijl-neer   { color: var(--rood); }
.pijl-gelijk { color: var(--tekst-fijn); }

/* --- Vaste balk onderaan het invulformulier --- */

.sticky-balk {
  position: sticky;
  bottom: 0;
  z-index: var(--laag-plakkend);
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
  box-shadow: 0 -4px 16px rgba(8, 52, 128, .1);
  padding-block: var(--r-3);
  margin-top: var(--r-5);
  padding-bottom: max(var(--r-3), env(safe-area-inset-bottom));
}
.sticky-balk .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-3);
  flex-wrap: wrap;
}
.sticky-balk .knoppen { display: flex; gap: var(--r-2); flex-wrap: wrap; }

.voortgang { font-size: .9rem; color: var(--tekst-zacht); margin: 0; }
.voortgang strong { color: var(--blauw-donker); font-size: 1.02rem; }

/* Dun voortgangsbalkje bovenop de vaste balk */
.voortgang-balk {
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 3px;
  background: var(--lijn);
  overflow: hidden;
}
.voortgang-balk span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blauw), var(--goud));
  transition: width var(--traag) var(--soepel);
}

/* --- Voettekst --- */

.site-footer {
  background: var(--banier-diep);
  color: rgba(255, 255, 255, .78);
  padding-block: var(--r-6);
  font-size: .9rem;
  margin-top: var(--r-7);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--r-4);
  flex-wrap: wrap;
  align-items: center;
}
.site-footer p { margin: 0; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.site-footer a:hover { color: var(--blauw-licht); }

/* ---------- 6. Beweging ------------------------------------- */

@keyframes opdoemen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Blokken komen bij het scrollen rustig in beeld. Zonder JavaScript
   blijft alles gewoon zichtbaar: de klasse wordt pas dan gezet. */
.js .onthul {
  opacity: 0;
  transform: translateY(14px);
}
.js .onthul.is-zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity var(--traag) var(--soepel),
              transform var(--traag) var(--soepel);
}

/* Wie in het systeem heeft aangegeven weinig beweging te willen,
   krijgt hier alles direct te zien. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .onthul { opacity: 1; transform: none; }
}

/* ---------- 7. Schermformaten ------------------------------- */

@media (max-width: 860px) {
  body { font-size: 16px; }

  .site-header { position: static; }

  .navtoggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer;
    border: 1px solid var(--lijn);
    border-radius: var(--rond-m);
    color: var(--tekst-zacht);
    transition: background var(--snel) var(--soepel);
  }
  .navtoggle-label:hover { background: var(--blauw-mist); }
  .navtoggle:focus-visible + .navtoggle-label {
    outline: 2px solid var(--blauw);
    outline-offset: 2px;
  }

  .mainnav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-bottom: var(--r-3);
  }
  .navtoggle:checked ~ .mainnav { display: flex; animation: opdoemen var(--normaal) var(--soepel); }
  .mainnav a { padding: 12px var(--r-3); border-radius: var(--rond-m); }
  .mainnav a.is-active { background: var(--blauw-mist); }
  .mainnav a.is-active::after { left: auto; right: 13px; bottom: auto; width: 6px; height: 6px; }
  .mainnav a.nav-cta { justify-content: center; margin-top: var(--r-2); }

  .hero { padding-block: var(--r-6) var(--r-5); }
  .deadline { font-size: 1.08rem; padding: var(--r-3) var(--r-4); }

  .wedstrijd { gap: var(--r-2); padding: var(--r-3) var(--r-1); }
  .wedstrijd .thuis, .wedstrijd .uit { font-size: .92rem; line-height: 1.25; }
  .wedstrijd .invoer input { width: 48px; font-size: 1.4rem; }
  .wedstrijd-meta { font-size: .7rem; }

  .kaart { padding: var(--r-4); }

  .knop-klein { min-height: 44px; }
  .rij-acties { gap: var(--r-2); }

  .sticky-balk .wrap { justify-content: stretch; }
  .sticky-balk .knoppen { width: 100%; }
  .sticky-balk .knoppen .knop { flex: 1; font-size: 1rem; padding-inline: var(--r-3); }
  .voortgang { width: 100%; font-size: .84rem; }
}

@media (max-width: 480px) {
  /* Knoplabels korter maken, anders breekt de vaste balk over twee regels. */
  .lang-tekst { display: none; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: var(--r-4); }
  .brand img { height: 40px; }
  .brand-text strong { font-size: 1.5rem; }
}

@media print {
  .site-header, .site-footer, .header-stripe, .sticky-balk,
  .knop, .thema-knop, .overslaan { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .kaart { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .hero { background: none; color: #000; padding: 0; }
  .hero h1 { color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; }
}