/**
 * Rugbyclub Dragons - Frontend "MATCHDAY"
 * Sportief matchday-dashboard: licht canvas + antraciet panelen + oranje accent.
 * Overgezet uit previews/richting-b.html naar het CMS.
 *
 * Kleuren komen uit site_settings via het :root-blok in includes/header.php
 * (de --dr-* custom properties). Deze stylesheet definieert de vaste tokens
 * (typografie, geometrie) en leidt de rest af. Alle --dr-* hebben hier een
 * nette fallback zodat de site ook zonder settings blijft werken.
 *
 * Fonts: Barlow Condensed (koppen/cijfers) + Barlow (body), self-hosted woff2.
 */

/* ================================================
   FONTS (self-hosted, latin)
   ================================================ */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/barlowcondensed-500.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/barlowcondensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/barlowcondensed-700.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/barlow-500.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/barlow-600.woff2') format('woff2');}

/* ================================================
   DESIGN TOKENS
   ================================================ */
:root{
  /* --- Settings-driven kleuren (overschreven door :root-blok in header.php) --- */
  --dr-orange:#e9541f;         /* theme_color_primary   */
  --dr-silver:#c7c8ca;         /* theme_color_secondary */
  --dr-anthra:#5c5556;         /* theme_color_dark      */
  --dr-orange-btn:#c4430f;     /* theme_color_orange_btn (knopcontrast) */
  --dr-orange-btn-h:#a83a0d;   /* theme_color_orange_btn_hover */
  --dr-panel:#221f20;          /* theme_color_panel (antraciet paneel) */
  --dr-canvas:#f4f3f1;         /* theme_color_canvas (licht canvas) */
  --dr-ink:#1a1718;            /* theme_color_ink (hoofdtekst) */

  /* --- Afgeleide oppervlakken & lijnen --- */
  --ink:var(--dr-ink);
  --ink-2:#4a4446;
  --canvas:var(--dr-canvas);
  --card:#ffffff;
  --line:#e4e2df;
  --panel:var(--dr-panel);
  --panel-2:#2c2829;
  --panel-line:#3a3536;
  --silver:var(--dr-silver);
  --silver-dim:#a6a3a4;
  --orange:var(--dr-orange);
  --orange-btn:var(--dr-orange-btn);
  --orange-btn-h:var(--dr-orange-btn-h);
  --anthra:var(--dr-anthra);

  /* --- Typografie --- */
  --cond:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- Geometrie --- */
  --r-card:14px;
  --r-el:8px;
  --nav-h:60px;
  --ticker-h:34px;
  --wrap:1220px;
  --shadow:0 1px 2px rgba(34,31,32,.05), 0 12px 30px -18px rgba(34,31,32,.28);

  /* --- Motion --- */
  --ease:cubic-bezier(.16,1,.3,1);

  /* --- Compat-aliassen voor legacy templates (page.php) --- */
  --font-body:var(--body);
  --font-heading:var(--cond);
  --font-subheading:var(--body);
  --font-display:var(--cond);
  --black:var(--ink);
  --white:#ffffff;
  --cream:var(--canvas);
  --cream-dark:var(--line);
  --border:var(--line);
  --text:var(--ink);
  --text-primary:var(--ink);
  --text-secondary:var(--ink-2);
  --text-light:var(--ink-2);
  --text-ghost:var(--anthra);
  --yellow:var(--orange-btn);
  --yellow-light:var(--orange);
  --transition-fast:.18s ease;
  --transition-normal:.28s ease;
}

/* ================================================
   RESET & BASE
   ================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--canvas);
  line-height:1.5;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3{margin:0;font-family:var(--cond);font-weight:700;line-height:1.02;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--orange);color:#fff}

.wrap,.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.container--narrow{width:100%;max-width:900px;margin-inline:auto;padding-inline:20px}

.num{font-family:var(--cond);font-weight:700;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ================================================
   BUTTONS
   ================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;
  padding:10px 18px;border-radius:var(--r-el);border:0;cursor:pointer;
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange-btn);color:#fff}
.btn-primary:hover{background:var(--orange-btn-h);color:#fff}
.btn-ghost,.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--anthra)}
.btn-lg{font-size:20px;padding:14px 26px}

/* ================================================
   STICKY HEADER STACK (nav + ticker)
   ================================================ */
.top{position:sticky;top:0;z-index:100}

.nav{
  height:var(--nav-h);
  background:var(--panel);
  color:#fff;
  border-bottom:1px solid var(--panel-line);
  position:relative;
}
.nav .wrap{height:100%;display:flex;align-items:center;gap:18px}
.nav-menu{display:contents}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{height:38px;width:auto}
.brand .bt{display:inline;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;font-size:19px}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:8px}
/* Directe kinderen: de top-level links. De submenu-links in het dropdown-paneel
   worden apart gestyled (.nav-dd-link) en mogen deze regels niet erven. */
.nav-links > a{
  font-family:var(--cond);font-weight:600;font-size:18px;letter-spacing:.01em;
  color:var(--silver);padding:8px 12px;border-radius:var(--r-el);
  transition:color .18s ease, background .18s ease;
}
.nav-links > a:hover,.nav-links > a.active{color:#fff;background:rgba(255,255,255,.06)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---- Dropdown "Club" (desktop: hover + klik; overlay, geen layoutverschuiving) ---- */
.nav-dd{position:relative;display:inline-flex}
.nav-dd-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--cond);font-weight:600;font-size:18px;letter-spacing:.01em;
  color:var(--silver);background:transparent;border:0;cursor:pointer;
  padding:8px 12px;border-radius:var(--r-el);
  transition:color .18s ease, background .18s ease;
}
.nav-dd-toggle:hover,.nav-dd-toggle.active,.nav-dd.open .nav-dd-toggle{color:#fff;background:rgba(255,255,255,.06)}
.nav-dd-caret{flex:0 0 auto;transition:transform .18s var(--ease)}
.nav-dd:hover .nav-dd-caret,.nav-dd.open .nav-dd-caret{transform:rotate(180deg)}

.nav-dd-panel{
  position:absolute;top:calc(100% + 10px);left:0;z-index:120;
  min-width:264px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Pijl-verbinding tussen toggle en paneel (vangt de muisbeweging op) */
.nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-dd:hover>.nav-dd-panel,.nav-dd.open>.nav-dd-panel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.nav-dd-panel--cols{min-width:520px;column-count:2;column-gap:6px}
.nav-dd-link{
  display:block;break-inside:avoid;
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.01em;
  color:var(--ink);padding:9px 12px;border-radius:var(--r-el);
  transition:color .15s ease, background .15s ease;
}
.nav-dd-link:hover,.nav-dd-link:focus-visible,.nav-dd-link.active{background:var(--canvas);color:var(--orange-btn)}

.hamburger{display:none;margin-left:auto;background:transparent;border:1.5px solid var(--silver-dim);color:#fff;
  width:44px;height:40px;border-radius:var(--r-el);cursor:pointer;align-items:center;justify-content:center}
.hamburger span{display:block;width:20px;height:2px;background:#fff;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}

/* ---------- Ledengedeelte (fase 8): login-knop / user-chip in de nav ---------- */
.nav-login{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1.5px solid var(--panel-line);color:#fff;
  font-family:var(--cond);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.03em;
  transition:border-color .18s ease,background .18s ease}
.nav-login:hover,.nav-login:focus-visible{border-color:var(--silver);background:rgba(255,255,255,.1);color:#fff}
.nav-login svg{width:17px;height:17px;flex:0 0 auto}
.user-chip{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1.5px solid var(--panel-line);color:#fff;
  transition:border-color .18s ease,background .18s ease}
.user-chip:hover,.user-chip:focus-visible{border-color:var(--silver);background:rgba(255,255,255,.1);color:#fff}
.user-chip .av{width:34px;height:34px;border-radius:999px;background:var(--orange-btn);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.02em}
.user-chip .uc-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:3px}
.user-chip .uc-lbl{font-family:var(--cond);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.user-chip .uc-name{font-family:var(--cond);font-weight:700;font-size:15px;color:#fff}

/* ================================================
   TICKER (fase 4 - alleen bij wedstrijddata)
   ================================================ */
.ticker{
  height:var(--ticker-h);background:var(--panel-2);
  border-bottom:1px solid var(--panel-line);color:#fff;overflow:hidden;position:relative;
  display:flex;align-items:center;
}
.ticker::before{content:"";position:absolute;inset:0 auto 0 0;width:52px;z-index:2;
  background:linear-gradient(90deg,var(--panel-2),transparent);pointer-events:none}
.ticker::after{content:"";position:absolute;inset:0 0 0 auto;width:52px;z-index:2;
  background:linear-gradient(270deg,var(--panel-2),transparent);pointer-events:none}
.ticker-mask{width:100%;overflow:hidden}
.ticker-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;
  animation:tick 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.t-item{display:inline-flex;align-items:center;gap:10px;padding:0 6px;font-size:14.5px;color:var(--silver)}
.t-key{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--orange);font-size:14px}
.t-item b{color:#fff;font-weight:600}
.t-sep{display:inline-block;width:7px;height:7px;margin:0 20px;background:var(--orange);
  transform:rotate(45deg);flex:0 0 auto}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================================================
   MEDEDELINGENBANNER
   ================================================ */
.banner{background:#fff4ee;border-bottom:1px solid #f3cdbc}
.banner .wrap{display:flex;align-items:center;gap:14px;padding-block:11px}
.banner-badge{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;
  color:#fff;background:var(--orange-btn);padding:4px 10px;border-radius:999px}
.banner-badge svg{width:15px;height:15px}
.banner p{font-size:15px;color:#6b3417;font-weight:500;min-width:0;overflow-wrap:anywhere}
.banner p b{font-weight:600;color:#8a2f0f}
/* De banner is bewust niet wegklikbaar (besluit 23 aug 2026); alleen de
   popup-variant hieronder is te sluiten. */
/* Type-varianten: info = clubkleur (de oranje .banner-basis), alleen
   waarschuwing en afgelasting wijken af (verzoek club 23 aug 2026) */
.banner--waarschuwing{background:#fff8e8;border-bottom-color:#f0dcae}
.banner--waarschuwing .banner-badge{background:#b8860b}
.banner--waarschuwing p{color:#6b5514}
.banner--waarschuwing p b{color:#7a4e0b}
.banner--afgelasting{background:#fdeceb;border-bottom-color:#f3c4c0}
.banner--afgelasting .banner-badge{background:#c0392b}
.banner--afgelasting p{color:#6b201a}
.banner--afgelasting p b{color:#8a1f16}

/* ---- Mededelingen-popup: dezelfde mededeling eenmalig prominent ---- */
.ann-modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity .25s ease}
.ann-modal.is-open{opacity:1}
.ann-modal-backdrop{position:absolute;inset:0;background:rgba(26,23,24,.6)}
.ann-modal-card{position:relative;background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);
  max-width:520px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;padding:30px 28px 26px;
  transform:translateY(14px) scale(.97);transition:transform .25s var(--ease)}
.ann-modal.is-open .ann-modal-card{transform:none}
.ann-modal-badge{margin-bottom:16px}
.ann-modal-card p{font-size:16px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere;margin:0 0 22px}
.ann-modal-x{position:absolute;top:12px;right:12px;background:transparent;border:0;cursor:pointer;
  color:var(--ink-2);width:32px;height:32px;border-radius:8px;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.ann-modal-x:hover{background:var(--canvas);color:var(--ink)}
/* Accentrand in de kleur van het mededelingstype */
.ann-modal-card--info{border-top:4px solid var(--orange-btn)}
.ann-modal-card--waarschuwing{border-top:4px solid #b8860b}
.ann-modal-card--waarschuwing .banner-badge{background:#b8860b}
.ann-modal-card--afgelasting{border-top:4px solid #c0392b}
.ann-modal-card--afgelasting .banner-badge{background:#c0392b}
html.ann-modal-open{overflow:hidden}
@media (max-width:640px){ .ann-modal-card{padding:24px 20px 20px} }

/* ================================================
   REVEAL UTILITY
   ================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ================================================
   SECTION SCAFFOLDING
   ================================================ */
main{padding-bottom:10px}
.section{padding-block:44px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.section-head h2{font-size:clamp(30px,4vw,44px);text-transform:uppercase}
.section-head .kick{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;color:var(--orange-btn);margin-bottom:4px}
.section-head .see{font-family:var(--cond);font-weight:600;font-size:18px;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-bottom:6px}
.section-head .see:hover{color:var(--orange-btn)}
.section-head .see svg{width:16px;height:16px}

.empty{background:var(--card);border:1px dashed #d8d5d1;border-radius:var(--r-card);
  padding:30px 24px;text-align:center;color:var(--ink-2);font-size:15.5px}

/* ================================================
   HERO - beeldbaan met paneel (nadrukkelijk geen fullscreen-hero)
   Een brede, filmische beeldbaan binnen de contentbreedte. Links ligt een
   donker verloop met de diagonale streeptextuur en een oranje spine; daarop
   staan de kicker, de h1, de korte tekst en de knoppen. Rechtsonder het
   fotobijschrift. In de wedstrijdtoestand ligt het scoreboard als zwevende
   kaart over dezelfde baan, met de clubnaam als bovenregel (de h1).
   Alle tinten zijn transparante lagen van --ink en --orange, dus ze volgen
   de kleurinstellingen uit het CMS.
   ================================================ */
.hero{padding-block:20px 26px}

/* ---- De beeldbaan ---- */
.hero-band{
  position:relative;height:430px;overflow:hidden;isolation:isolate;
  border-radius:var(--r-card);border:1px solid var(--panel-line);
  background:var(--panel-2);box-shadow:var(--shadow);
  /* Stops van het zijverloop. Tot --scrim-b is het beeld vrijwel dicht (daar
     staat de tekst), daarna valt het verloop snel weg. Smallere schermen
     krijgen ruimere stops, zie de responsive-regels onderaan. */
  --scrim-a:34%;--scrim-b:46%;--scrim-c:62%;--scrim-d:80%;
  --stripe-w:62%;
}
.hero-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Slideshow: alle slides gestapeld, de actieve vloeit in beeld (frontend-script.js) */
.hero-band > img.hero-slide{opacity:0;transition:opacity 1.1s ease}
.hero-band > img.hero-slide.is-actief{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-band > img.hero-slide{transition:none}}
/* Matchday-detail: oranje spine langs de linkerrand */
.hero-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:4;background:var(--orange)}

/* Donker verloop van links: draagt de tekst, ook over een lichte foto */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Neutrale terugval voor browsers zonder color-mix (van voor 2023). Zonder
     verloop zou witte tekst op een lichte foto onleesbaar worden, dus dit mag
     nooit wegvallen. De regel eronder overschrijft dit waar color-mix wel kan,
     zodat de tint uit de CMS-tokens komt. */
  background:
    linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 34%,rgba(0,0,0,.42) 100%),
    linear-gradient(96deg,
      rgba(0,0,0,.97) 0%,
      rgba(0,0,0,.95) var(--scrim-a),
      rgba(0,0,0,.80) var(--scrim-b),
      rgba(0,0,0,.34) var(--scrim-c),
      rgba(0,0,0,.06) var(--scrim-d),
      transparent 100%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--ink) 30%,transparent) 0%,
      transparent 34%,
      color-mix(in srgb,var(--ink) 42%,transparent) 100%),
    linear-gradient(96deg,
      color-mix(in srgb,var(--ink) 97%,transparent) 0%,
      color-mix(in srgb,var(--ink) 95%,transparent) var(--scrim-a),
      color-mix(in srgb,var(--ink) 80%,transparent) var(--scrim-b),
      color-mix(in srgb,var(--ink) 34%,transparent) var(--scrim-c),
      color-mix(in srgb,var(--ink) 6%,transparent) var(--scrim-d),
      transparent 100%);
}
/* Matchday-detail: dezelfde diagonale streeptextuur als .board-top, alleen links */
.hero-stripes{
  position:absolute;left:0;top:0;bottom:0;width:var(--stripe-w);z-index:2;pointer-events:none;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--orange) 13%,transparent) 0 2px,transparent 2px 12px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 46%,transparent 82%);
          mask-image:linear-gradient(90deg,#000 0 46%,transparent 82%);
}

/* ---- Tekstlaag ---- */
.hero-inner{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 40px 0 44px;max-width:600px;
}
.hero-kick{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;color:var(--orange)}
.hero-inner h1{font-size:clamp(34px,4.4vw,54px);text-transform:uppercase;color:#fff;margin:8px 0 0;
  text-shadow:0 2px 20px rgba(0,0,0,.45);overflow-wrap:anywhere}
.hero-inner p{font-size:16.5px;color:var(--silver);margin-top:12px;max-width:40ch;
  text-shadow:0 1px 12px rgba(0,0,0,.5);overflow-wrap:anywhere}
.hero-cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.hero-cta .btn,.hero-matchcta .btn{max-width:100%}
.hero-cta .btn-ghost,.hero-matchcta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.36);backdrop-filter:blur(2px)}
.hero-cta .btn-ghost:hover,.hero-matchcta .btn-ghost:hover{border-color:#fff}

/* Scoreboard-paneel */
.board{
  background:var(--panel);color:#fff;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--panel-line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--panel-line);background:
  repeating-linear-gradient(135deg,rgba(233,84,31,.10) 0 2px,transparent 2px 12px)}
.board-top .lbl{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:15px;color:var(--silver);display:flex;align-items:center;gap:9px}
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:#fff;
  background:var(--orange-btn);padding:4px 11px;border-radius:999px}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:26px 22px 20px}
.team{display:flex;flex-direction:column;gap:2px;min-width:0}
.team.away{align-items:flex-end;text-align:right}
.team .pre{font-family:var(--cond);font-weight:600;font-size:16px;color:var(--silver-dim);text-transform:uppercase;letter-spacing:.04em}
.team .nm{font-family:var(--cond);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:.95;text-transform:uppercase}
.team .home-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--orange);
  font-family:var(--cond);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:4px}
.match .kick{display:flex;flex-direction:column;align-items:center;padding:0 6px}
.match .kick .time{font-size:clamp(40px,6vw,62px);line-height:.9;color:#fff}
.match .kick .date{font-family:var(--cond);font-weight:600;font-size:16px;color:var(--orange);
  text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.board-meta{display:flex;align-items:center;gap:9px;padding:0 22px 20px;color:var(--silver-dim);font-size:14.5px}
.board-meta svg{width:16px;height:16px;flex:0 0 auto;color:var(--silver)}
.result{margin-top:auto;border-top:1px solid var(--panel-line);background:rgba(0,0,0,.16);
  display:flex;align-items:center;gap:16px;padding:14px 22px;flex-wrap:wrap}
.result .rlbl{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;color:var(--silver-dim)}
.score{display:flex;align-items:center;gap:12px;font-family:var(--cond);font-weight:600;font-size:17px}
.score .sname{color:#fff}
.score .sval{font-size:30px;color:#fff;min-width:34px;text-align:center}
.score .dash{color:var(--silver-dim)}
.score .win{margin-left:2px;background:var(--orange-btn);color:#fff;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;font-weight:700}

/* ---- Wedstrijdtoestand: scoreboard als zwevende kaart over de beeldbaan ----
   Het scoreboard staat hier in een smallere kolom dan op de agendapagina;
   de typografie gaat daarom een maat omlaag zodat teamnamen op een regel blijven. */
.hero-inner--match{max-width:600px;padding:0 0 0 44px}
.hero-inner h1.hero-brandline{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:15px;line-height:1;color:#fff;margin:0 0 13px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero .board{width:100%;max-width:540px;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.04) inset}
.hero .board .team .nm{font-size:30px}
.hero .board .match{padding:20px 20px 16px}
.hero .board .match .kick .time{font-size:50px}
.hero .board .board-meta{padding:0 20px 16px}
.hero .board .result{padding:12px 20px}
.hero .board .score .sval{font-size:26px}
.hero-matchcta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}

/* ---- Fotobijschrift, rechtsonder in de beeldbaan ---- */
.figcap{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(34,31,32,.82);color:#fff;font-family:var(--cond);font-weight:600;font-size:14px;
  letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:999px;backdrop-filter:blur(2px)}
.hero-band .figcap{left:auto;right:14px;bottom:14px;z-index:4;max-width:calc(100% - 28px)}

/* ---- Zonder foto: een egaal donker paneel over de volle breedte ----
   Beter een net, volledig gevuld paneel dan een halfleeg beeldvlak. */
.hero-band.is-flat{height:auto;background:var(--panel)}
.hero-band.is-flat .hero-inner{max-width:820px;padding:44px 40px 44px 44px}
.hero-band.is-flat .hero-inner h1{text-shadow:none}
.hero-band.is-flat .hero-inner p{max-width:56ch;text-shadow:none}
.hero-band.is-flat .hero-inner--match{max-width:640px;padding:34px 40px 34px 44px}

/* ================================================
   AGENDA
   ================================================ */
.agenda-list{display:flex;flex-direction:column;gap:10px}
.ag-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 20px;transition:border-color .18s ease, transform .18s ease}
.ag-row:hover{border-color:var(--anthra);transform:translateX(2px)}
.ag-date{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--panel);color:#fff;border-radius:10px;width:66px;padding:8px 4px;flex:0 0 auto}
.ag-date .d{font-size:30px;line-height:.85}
.ag-date .m{font-family:var(--cond);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--orange)}
.ag-main{min-width:0}
.ag-main .tag{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:12.5px;color:var(--orange-btn)}
.ag-main .ti{font-family:var(--cond);font-weight:700;font-size:23px;line-height:1;text-transform:uppercase;margin-top:2px}
.ag-main .sub{font-size:14px;color:var(--ink-2);margin-top:3px}
.ag-time{display:flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:700;font-size:24px;
  color:var(--ink);white-space:nowrap}
.ag-time svg{width:16px;height:16px;color:var(--anthra)}

/* ================================================
   NIEUWS (fase 6 - alleen bij data)
   ================================================ */
/* Uniforme 3-koloms teaser: alle kaarten gelijk (beeld boven, 16:9 cover),
   gelijke kaarthoogtes via het grid. Op mobiel gestapeld (zie responsive). */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ncard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s ease, border-color .2s ease}
.ncard:hover{transform:translateY(-3px);border-color:var(--anthra)}
.ncard .ph{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--panel-2)}
.ncard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ncard:hover .ph img{transform:scale(1.04)}
/* Beeldvak altijd volledig gevuld: transparante PNG's tonen hun transparantie op
   het donkere paneelvlak achter de cover-crop (geen padding, geen contain). */
.ncard .ph.is-logo{display:flex;align-items:center;justify-content:center;background:var(--panel)}
.ncard .ph.is-logo img{width:auto;height:auto;max-width:58%;max-height:58%;object-fit:contain;opacity:.9}
.ncard .cat{position:absolute;left:12px;top:12px;font-family:var(--cond);font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--orange-btn);padding:4px 10px;border-radius:999px}
.ncard .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.ncard .date{font-family:var(--cond);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--anthra)}
.ncard .htitle{font-size:22px;line-height:1.02;text-transform:uppercase}
.ncard p{font-size:15px;color:var(--ink-2)}
.ncard .rd{margin-top:auto;font-family:var(--cond);font-weight:700;font-size:15px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--orange-btn);display:inline-flex;align-items:center;gap:6px}
.ncard .rd svg{width:15px;height:15px}

/* ================================================
   FOTOSTROOK
   ================================================ */
.strip{display:flex;gap:12px;overflow-x:auto;padding:4px 20px 14px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--silver);border-radius:999px}
.strip-fig{flex:0 0 auto;height:250px;border-radius:12px;overflow:hidden;scroll-snap-align:start;
  border:1px solid var(--line);background:var(--panel-2);position:relative}
.strip-fig img{height:100%;width:auto;object-fit:cover;display:block}
.strip-wrap{margin-inline:calc(50% - 50vw);max-width:100vw}
.strip-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:0}

/* ================================================
   CTA - PROEFTRAINEN
   ================================================ */
.cta{position:relative;border-radius:var(--r-card);overflow:hidden;isolation:isolate;color:#fff;background:var(--panel)}
.cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(26,23,24,.94) 0%,rgba(26,23,24,.8) 42%,rgba(26,23,24,.35) 100%)}
.cta-inner{padding:52px 40px;max-width:640px}
.cta .kick{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--orange)}
.cta h2{font-size:clamp(34px,5vw,54px);text-transform:uppercase;margin:8px 0 12px}
.cta p{font-size:17px;color:var(--silver);max-width:46ch;margin-bottom:22px}

/* ================================================
   SPONSORS (fase 10 - alleen bij data)
   ================================================ */
.sponsors{padding-block:38px}
.sponsors .lead{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:14px;color:var(--anthra);text-align:center;margin-bottom:18px}
.sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sponsor{aspect-ratio:16/7;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#7f7d7e;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:15px;
  border:1px solid var(--line);overflow:hidden;padding:14px}
.sponsor img{max-width:86%;max-height:88%;width:auto;object-fit:contain}

/* ================================================
   STEUNBLOKKEN OP DE HOMEPAGE: JEUGDFONDS + CLUB VAN 78
   Twee gelijkwaardige kaarten naast elkaar (verzoek Jerom 30 aug 2026).
   Beide kaarten delen via subgrid dezelfde vijf rijen (kicker / titel /
   tekst / knop / beeld), zodat kickers, koppen en knoppen in beide
   kaarten exact op dezelfde hoogte staan, óók bij verschillende
   tekstlengtes. Op smalle schermen stapelen de kaarten en vervalt de
   rij-uitlijning vanzelf.
   ================================================ */
.jeugdfonds .jf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;
  grid-template-rows:auto auto 1fr auto auto}
.jeugdfonds .jf-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;
  padding:32px 30px 0;align-content:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.jf-card .kick{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--orange-btn)}
.jf-card h2{font-size:clamp(24px,2.6vw,32px);text-transform:uppercase;margin:6px 0 12px;color:var(--ink);align-self:start}
.jf-card p{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:52ch;margin-bottom:20px}
.jf-actie{margin-bottom:24px;justify-self:start}
.jf-beeld{display:block;padding-bottom:28px;align-self:start}
.jf-beeld img{width:100%;height:auto;border-radius:12px;display:block}
@media (max-width:880px){
  .jeugdfonds .jf-grid{display:flex;flex-direction:column;gap:18px}
  .jeugdfonds .jf-card{display:flex;flex-direction:column;align-items:flex-start;padding:28px 22px 0}
  .jf-beeld{width:100%;padding-bottom:22px}
}

/* ================================================
   FOOTER
   ================================================ */
.footer{background:var(--panel);color:var(--silver);margin-top:20px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:36px;padding-block:46px 34px}
.footer h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:20px;color:#fff;margin-bottom:14px}
.footer .fbrand img{height:46px;width:auto;margin-bottom:14px}
.footer p{font-size:15px;color:var(--silver-dim);max-width:40ch}
.footer .values{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.footer .values span{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;
  color:#fff;border:1.5px solid var(--panel-line);padding:5px 13px;border-radius:999px}
.footer .spirit{margin-top:14px;font-style:italic;color:var(--silver)}
.fcontact a,.fcontact p{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--silver);padding:5px 0;margin:0;min-width:0;overflow-wrap:anywhere}
.fcontact a:hover{color:#fff}
.fcontact svg,.fcontact i{width:17px;color:var(--orange);flex:0 0 auto;text-align:center}
.fcontact svg{height:17px}
.socials{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.socials a{width:42px;height:42px;border-radius:10px;border:1.5px solid var(--panel-line);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .18s ease,border-color .18s ease}
.socials a:hover{background:var(--orange-btn);border-color:var(--orange-btn)}
.socials svg{width:20px;height:20px}
.socials i{font-size:18px}
.footer-sponsors{border-top:1px solid var(--panel-line);padding-block:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer-sponsors .fs-label{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--silver-dim)}
.footer-sponsors .fs-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-sponsors .fs-item{display:inline-flex;align-items:center;height:34px;color:#fff;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:15px}
.footer-sponsors .fs-item img{max-height:34px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:opacity .18s ease}
.footer-sponsors a.fs-item:hover img{opacity:1}
.footer-sponsors .fs-all{margin-left:auto;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--orange)}
.footer-sponsors .fs-all:hover{color:#fff}
.footer-bonden{border-top:1px solid var(--panel-line);padding-block:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer-bonden .fb-label{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--silver-dim)}
.footer-bonden .fb-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-bonden .fb-logos img{height:36px;width:auto;border-radius:6px;opacity:.92;transition:opacity .18s ease}
.footer-bonden .fb-logos a:hover img{opacity:1}
.footer-bottom{border-top:1px solid var(--panel-line);padding-block:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:13.5px;color:var(--silver-dim)}
.footer-bottom a:hover{color:#fff}

/* ================================================
   MAINTENANCE (early-exit pagina in index.php)
   ================================================ */
.maintenance-container{max-width:520px;margin:12vh auto;padding:40px 28px;text-align:center}
.maintenance-container .logo{width:120px;height:auto;margin-bottom:24px;display:inline-block}
.maintenance-container h1{font-family:var(--cond);font-size:38px;text-transform:uppercase;color:var(--ink)}
.maintenance-container p{color:var(--ink-2);margin-top:12px}
.maintenance-container .password-form{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.maintenance-container .password-form input{padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-el);font-family:var(--body)}
.maintenance-container .password-form button{padding:12px 20px;border:0;border-radius:var(--r-el);background:var(--orange-btn);color:#fff;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.maintenance-container .password-form button:hover{background:var(--orange-btn-h)}

/* ================================================
   404
   ================================================ */
.err{padding-block:80px 90px}
.err .wrap{text-align:center;max-width:640px}
.err .code{font-family:var(--cond);font-weight:700;font-size:clamp(90px,20vw,180px);line-height:.85;color:var(--orange);letter-spacing:-.03em}
.err h1{font-size:clamp(28px,5vw,44px);text-transform:uppercase;margin:6px 0 12px}
.err p{color:var(--ink-2);font-size:16px;margin-bottom:26px}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width:960px){
  /* Smallere baan: de tekstkolom beslaat een groter deel van de breedte, dus
     schuiven de verloopstops mee zodat de tekst leesbaar blijft. */
  .hero-band{height:380px;--scrim-a:44%;--scrim-b:58%;--scrim-c:76%;--scrim-d:92%;--stripe-w:78%}
  .hero-inner{max-width:520px;padding:0 28px 0 34px}
  .hero-inner--match{max-width:520px;padding:0 0 0 34px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--nav-h:56px}
  .hamburger{display:flex}
  .brand .bt{font-size:17px}
  /* z-index: het uitgeklapte menu moet over de ticker heen vallen. De ticker
     staat later in de DOM en is position:relative, dus zonder z-index sneed
     die de bovenste menu-regel af. */
  .nav-menu{display:none;position:absolute;top:var(--nav-h);left:0;right:0;z-index:110;flex-direction:column;gap:12px;
    background:var(--panel);border-bottom:1px solid var(--panel-line);padding:12px 20px 18px;box-shadow:var(--shadow);
    /* Lange menu's (Club heeft 13 subitems) mogen nooit onder de schermrand
       verdwijnen: begrens op de schermhoogte en maak het menu zelf scrollbaar. */
    max-height:calc(100vh - var(--nav-h));
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .nav.open .nav-menu{display:flex}
  .nav-menu .nav-links{flex-direction:column;align-items:stretch;gap:2px;margin:0}
  .nav-menu .nav-links > a{font-size:22px;padding:12px 6px}
  .nav-menu .nav-cta{margin:0;flex-direction:column;align-items:stretch;gap:10px}
  .nav-menu .nav-cta .btn{width:100%;justify-content:center;font-size:19px;padding:13px 18px}
  .nav-menu .nav-login{width:100%;justify-content:center;font-size:18px;padding:12px 18px}
  .nav-menu .user-chip{width:100%;justify-content:flex-start}

  /* Dropdown wordt op mobiel een accordeon: paneel klapt inline uit (geen overlay) */
  .nav-dd{display:block;width:100%}
  .nav-dd-toggle{width:100%;justify-content:space-between;font-size:22px;padding:12px 6px}
  .nav-dd-panel{
    position:static;min-width:0;z-index:auto;
    background:transparent;color:var(--silver);border:0;border-radius:0;box-shadow:none;padding:0;
    column-count:1;
    opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none;
    display:none;margin:2px 0 6px;
  }
  .nav-dd-panel::before{display:none}
  .nav-dd.open>.nav-dd-panel{display:block}
  .nav-dd-link{color:var(--silver);font-size:17px;padding:8px 6px 8px 22px}
  .nav-dd-link:hover,.nav-dd-link:focus-visible,.nav-dd-link.active{background:rgba(255,255,255,.06);color:#fff}
  .section{padding-block:34px}
  .section-head{flex-wrap:wrap}
  .section-head .see{display:none}
  /* Hero op mobiel: beeld boven, het paneel schuift met een afgeronde
     bovenkant in het beeld. Het beeld loopt door tot de schermranden. */
  .hero{padding-block:0 16px}
  .hero-band{height:auto;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .hero-band::before{display:none}
  .hero-band > img{position:relative;inset:auto;width:calc(100% + 40px);max-width:none;
    margin-left:-20px;height:236px}
  /* Slideshow op mobiel (verzoek Jerom 30 aug 2026: zelfde zachte overvloeier
     als op desktop): de eerste slide staat in de paginastroom en reserveert de
     ruimte, de volgende slides stapelen er absoluut bovenop. De opacity-
     overgang komt uit de algemene .hero-slide-regel bovenin. */
  .hero-band > img.hero-slide ~ img.hero-slide{position:absolute;top:0;left:0}
  /* De onderrand loopt hard donker: daar staat in de wedstrijdtoestand de
     clubnaam over de foto, en daar schuift het paneel in het beeld. */
  .hero-scrim{inset:0 -20px auto -20px;height:236px;
    /* Zelfde terugval als op desktop, zie de toelichting daar. */
    background:linear-gradient(180deg,
      rgba(0,0,0,.18) 0%,
      transparent 34%,
      rgba(0,0,0,.40) 74%,
      rgba(0,0,0,.84) 100%);
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--ink) 18%,transparent) 0%,
      transparent 34%,
      color-mix(in srgb,var(--ink) 40%,transparent) 74%,
      color-mix(in srgb,var(--ink) 84%,transparent) 100%)}
  .hero-stripes{display:none}
  .hero-band .figcap{display:none}
  .hero-inner{position:relative;height:auto;max-width:none;margin-top:-46px;padding:24px 22px;
    background:var(--panel);border:1px solid var(--panel-line);
    border-radius:18px 18px var(--r-card) var(--r-card);box-shadow:0 -12px 30px -18px rgba(0,0,0,.6)}
  .hero-inner h1{font-size:clamp(30px,9vw,38px);text-shadow:none}
  .hero-inner p{font-size:15.5px;margin-top:10px;max-width:none;text-shadow:none}
  .hero-cta{margin-top:18px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  /* Wedstrijdtoestand: geen extra paneel om het scoreboard heen */
  .hero-inner--match{margin-top:-38px;padding:0;background:transparent;border:0;box-shadow:none;border-radius:0}
  .hero-inner h1.hero-brandline{padding:0 2px;margin-bottom:10px}
  .hero .board{max-width:none}
  .hero .board .board-top{padding:11px 16px}
  .hero .board .match{padding:16px 16px 12px}
  .hero .board .match .kick .time{font-size:44px}
  .hero .board .team .nm{font-size:23px}
  .hero .board .board-meta{padding:0 16px 14px;font-size:13.5px}
  .hero .board .result{padding:10px 16px;gap:10px}
  .hero .board .score{font-size:15px;gap:8px}
  .hero .board .score .sval{font-size:22px}
  /* De knop staat hier onder het scoreboard op het lichte canvas,
     dus terug naar de gewone ghost-knop van het designsysteem. */
  .hero-matchcta{margin-top:12px}
  .hero-matchcta .btn{flex:1 1 auto;justify-content:center;font-size:16px;padding:10px 16px}
  /* Wel een duidelijke rand: --line valt tegen het canvas vrijwel weg, waardoor
     de knop als los stukje tekst onder het scoreboard leest. */
  .hero-matchcta .btn-ghost{color:var(--ink);border-color:var(--anthra);backdrop-filter:none}
  .hero-matchcta .btn-ghost:hover{border-color:var(--ink)}
  /* Zonder foto is er niets om overheen te schuiven */
  .hero-band.is-flat{background:transparent}
  .hero-band.is-flat .hero-inner{margin-top:16px;padding:24px 22px;max-width:none}
  .hero-band.is-flat .hero-inner p{max-width:none}
  .hero-band.is-flat .hero-inner--match{margin-top:16px;padding:0}
  .hero-band.is-flat .hero-inner--match h1.hero-brandline{color:var(--ink);text-shadow:none}
  .match{padding:20px 16px 14px}
  .board-top{padding:12px 16px}
  .result{padding:12px 16px}
  .news-grid{grid-template-columns:1fr;gap:14px}
  .sponsor-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr;gap:26px;padding-block:34px 26px}
  .cta-inner{padding:36px 24px}
  .strip-fig{height:190px}
  .ag-row{grid-template-columns:auto 1fr;gap:14px;padding:12px 14px}
  .ag-time{grid-column:2;justify-self:start;font-size:20px;margin-top:2px}
}
@media (max-width:400px){
  .team .nm{font-size:22px}
  .match .kick .time{font-size:38px}
  .hero .board .team .nm{font-size:21px}
  .hero .board .match .kick .time{font-size:38px}
}

/* ================================================
   REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{scroll-behavior:auto !important}
  .ticker-track{animation:none;transform:none}
  .ticker-mask{overflow-x:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .ncard,.ag-row,.ncard .ph img{transition:none !important}
  .nav-dd-panel{transition:none;transform:none}
  .nav-dd:hover>.nav-dd-panel,.nav-dd.open>.nav-dd-panel{transform:none}
  .nav-dd-caret{transition:none}
}

/* ================================================
   LEDENDASHBOARD (FASE 8, variant A "Matchcenter")
   Alles gescoped onder .ld (dashboard) en .ld-act (actiepagina's)
   zodat generieke klassenamen (.section, .kick, .see) nergens lekken.
   Bouwt voort op de bestaande tokens; niets hierboven wordt gewijzigd.
   ================================================ */

.ld{padding-bottom:14px}
.btn-sm{font-size:14px;padding:8px 14px}

/* ---- Begroeting + teamchips ---- */
.ld-greet{padding-block:26px 6px}
.ld-greet-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ld-greet .ld-kick{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--orange-btn)}
.ld-greet h1{font-size:clamp(30px,5vw,46px);text-transform:uppercase;margin-top:4px}
/* Ouder-accounts: "Ouder(s) van ..." als bescheiden regel onder de korte "Hoi!" */
.ld-greet .ld-wie{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(17px,2.2vw,21px);color:var(--ink-2);margin-top:2px}
.ld-greet p{color:var(--ink-2);margin-top:6px;font-size:16px}
.ld-teamchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ld-teamchip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-family:var(--cond);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.ld-teamchip .dot{width:9px;height:9px;border-radius:999px;background:var(--tc,var(--orange));flex:0 0 auto}
.ld-teamchip.empty{color:var(--ink-2);font-weight:600;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:14px}
.ld-tc-edit{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:14px;
  color:var(--orange-btn);display:inline-flex;align-items:center;gap:6px;padding:7px 6px}
.ld-tc-edit:hover{color:var(--orange-btn-h)}
.ld-tc-edit svg{width:15px;height:15px}

/* ---- Sectie + flash ---- */
.ld-section{padding-block:22px}
.ld-flash{display:flex;align-items:center;gap:10px;background:#e7f2ea;border:1px solid #bcdcc6;color:#2f6b3a;
  border-radius:var(--r-el);padding:12px 16px;font-size:15px;margin-block:8px}
.ld-flash svg{width:18px;height:18px;flex:0 0 auto}
.ld-flash.info{background:#eef4fb;border-color:#c9dcef;color:#245079}

/* ---- Matchcenter scoreboard (antraciet) ---- */
.ld .matchboard{background:var(--panel);color:#fff;border:1px solid var(--panel-line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.ld .mb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--panel-line);
  background:repeating-linear-gradient(135deg,rgba(233,84,31,.10) 0 2px,transparent 2px 12px)}
.ld .mb-head .lbl{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:16px;color:var(--silver)}
.ld .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;color:#fff;background:var(--orange-btn);padding:4px 11px;border-radius:999px}
.ld .mb-list{display:flex;flex-direction:column}
.ld .mb-game{display:grid;grid-template-columns:1fr auto;column-gap:22px;row-gap:12px;padding:20px 22px;border-bottom:1px solid var(--panel-line)}
.ld .mb-game:last-child{border-bottom:0}
.ld .mb-team{grid-column:1;grid-row:1;min-width:0}
.ld .mb-fixture{font-family:var(--cond);font-weight:700;font-size:clamp(22px,3vw,30px);text-transform:uppercase;line-height:1;color:#fff;margin-top:8px}
.ld .mb-fixture .vs{color:var(--silver-dim);font-weight:600}
.ld .mb-sub{display:flex;align-items:center;gap:8px;color:var(--silver-dim);font-size:14.5px;margin-top:7px}
.ld .mb-sub svg{width:16px;height:16px;color:var(--silver);flex:0 0 auto}
.ld .mb-when{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.ld .mb-when .time{font-family:var(--cond);font-weight:700;font-size:clamp(30px,4vw,40px);line-height:.9;color:#fff}
.ld .mb-when .date{font-family:var(--cond);font-weight:600;font-size:15px;color:var(--orange);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.ld .mb-none{grid-column:2;grid-row:1;align-self:center;font-family:var(--cond);font-weight:600;color:var(--silver-dim);font-size:15px;text-transform:uppercase;letter-spacing:.03em}
.ld .verzamel{display:flex;align-items:center;gap:10px;background:rgba(233,84,31,.14);border:1px solid rgba(233,84,31,.4);border-radius:10px;
  padding:10px 14px;color:#fff;font-family:var(--cond);font-weight:600;font-size:15.5px;letter-spacing:.01em;grid-column:1 / -1;grid-row:2}
.ld .verzamel svg{width:18px;height:18px;color:var(--orange);flex:0 0 auto}
.ld .verzamel b{font-weight:700}
.ld .badge-team{display:inline-flex;align-items:center;gap:6px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:11.5px;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--panel-line);border-radius:999px;padding:2px 9px}
.ld .badge-team .dot{width:7px;height:7px;border-radius:999px;background:var(--tc,var(--orange));flex:0 0 auto}
.ld .mb-empty{padding:26px 22px;color:var(--silver);text-align:center}
.ld .mb-empty .btn{margin-top:14px}

/* Slotje-badge (alleen leden) */
.ld .lock{display:inline-flex;align-items:center;gap:5px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:11.5px;color:#6b3417;background:#fff4ee;border:1px solid #f3cdbc;border-radius:999px;padding:2px 9px}
.ld .lock svg{width:12px;height:12px}

/* ---- Teamleider-actiepaneel ---- */
.ld .leader{background:var(--panel);color:#fff;border:1px solid var(--panel-line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.ld .leader:last-child{margin-bottom:0}
.ld .leader-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--panel-line);
  background:repeating-linear-gradient(135deg,rgba(233,84,31,.10) 0 2px,transparent 2px 12px)}
.ld .leader-top h2{font-family:var(--cond);font-weight:700;font-size:23px;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.ld .badge-leader{display:inline-flex;align-items:center;gap:6px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:12px;color:#fff;background:var(--orange-btn);padding:3px 11px;border-radius:999px}
.ld .badge-leader svg{width:13px;height:13px}
.ld .leader-hint{flex-basis:100%;font-family:var(--body);font-size:13.5px;color:var(--silver-dim);font-weight:400;letter-spacing:0;text-transform:none}
.ld .leader-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:18px 22px}
.ld .la-btn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;text-align:center;
  min-height:106px;padding:16px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--panel-line);color:#fff;cursor:pointer;
  font-family:var(--cond);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em;line-height:1.08;
  transition:transform .14s ease, border-color .18s ease, background .18s ease}
.ld .la-btn:hover{transform:translateY(-3px);border-color:var(--orange);background:#332e2f}
.ld .la-ic{position:relative;width:44px;height:44px;border-radius:11px;background:rgba(233,84,31,.16);color:var(--orange);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ld .la-ic svg{width:23px;height:23px}
.ld .la-count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--orange-btn);color:#fff;font-family:var(--cond);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;border:2px solid var(--panel-2)}

/* ---- Bento-grid met widgets ---- */
.ld .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.ld .bento>*{min-width:0}
.ld .col-4{grid-column:span 4}.ld .col-6{grid-column:span 6}.ld .col-8{grid-column:span 8}.ld .col-12{grid-column:span 12}
.ld .widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px 22px;display:flex;flex-direction:column;min-width:0}
.ld .widget-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ld .widget-head h2{font-family:var(--cond);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.01em}
.ld .widget-head .see{font-family:var(--cond);font-weight:600;font-size:14.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ld .widget-head .see:hover{color:var(--orange-btn)}
.ld .widget-head .see svg{width:14px;height:14px}
.ld .widget-empty{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* Mededelingen */
.ld .mdl{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.ld .mdl:first-child{padding-top:0}.ld .mdl:last-child{border-bottom:0;padding-bottom:0}
.ld .mdl-ic{width:34px;height:34px;border-radius:9px;background:var(--panel);color:#fff;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ld .mdl-ic svg{width:17px;height:17px}
.ld .mdl-body{min-width:0}
.ld .mdl-from{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em;color:var(--orange-btn)}
.ld .mdl-from .badge-team{color:var(--ink-2);background:var(--canvas);border-color:var(--line)}
.ld .mdl-body p{font-size:15px;color:var(--ink);margin-top:4px;overflow-wrap:anywhere}
.ld .mdl-when{font-size:12.5px;color:var(--anthra);margin-top:4px}

/* Uitslagen + ministand */
.ld .res-team{padding:14px 0;border-bottom:1px solid var(--line)}
.ld .res-team:first-child{padding-top:0}.ld .res-team:last-child{border-bottom:0;padding-bottom:0}
.ld .uitslag{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ld .uitslag .u-team{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:14.5px}
.ld .uitslag .u-team .dot{width:8px;height:8px;border-radius:999px;background:var(--tc,var(--orange));flex:0 0 auto}
.ld .rtag{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px;padding:2px 8px;border-radius:999px;margin-left:auto}
.ld .rtag.win{background:var(--orange-btn);color:#fff}
.ld .rtag.draw{background:var(--silver);color:var(--ink)}
.ld .rtag.loss{background:var(--canvas);color:var(--anthra);border:1px solid var(--line)}
.ld .stand-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.ld table.stand{width:100%;border-collapse:collapse;min-width:340px}
.ld table.stand th,.ld table.stand td{padding:7px 9px;text-align:center;font-size:13px;border-bottom:1px solid var(--line)}
.ld table.stand th{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:11.5px;color:var(--ink-2);background:var(--canvas)}
.ld table.stand td.tm,.ld table.stand th.tm{text-align:left;font-weight:600}
.ld table.stand tbody tr:last-child td{border-bottom:0}
.ld table.stand tr.mine td{background:rgba(233,84,31,.10);font-weight:700}
.ld table.stand tr.mine td.tm{border-left:3px solid var(--orange)}

/* Activiteiten */
.ld .act{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ld .act:first-child{padding-top:0}.ld .act:last-child{border-bottom:0;padding-bottom:0}
.ld .act-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);color:#fff;border-radius:10px;width:56px;padding:7px 4px;flex:0 0 auto}
.ld .act-date .d{font-family:var(--cond);font-weight:700;font-size:26px;line-height:.85}
.ld .act-date .m{font-family:var(--cond);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--orange)}
.ld .act-main{min-width:0}
.ld .act-main .ti{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--cond);font-weight:700;font-size:19px;text-transform:uppercase;line-height:1.05}
.ld .act-main .sub{font-size:13.5px;color:var(--ink-2);margin-top:3px}

/* Hulp gevraagd */
.ld .ld-help{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.ld .ld-help:first-child{padding-top:0}.ld .ld-help:last-child{border-bottom:0;padding-bottom:0}
.ld .help-ic{width:34px;height:34px;border-radius:9px;background:#fff4ee;color:var(--orange-btn);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ld .help-ic svg{width:18px;height:18px}
.ld .help-main{flex:1;min-width:0}
.ld .help-main .ht{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:18px;line-height:1.05}
.ld .help-main .hs{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.ld .btn-help{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-family:var(--cond);font-weight:700;font-size:14px;
  letter-spacing:.03em;text-transform:uppercase;padding:8px 14px;border-radius:var(--r-el);border:0;cursor:pointer;background:var(--orange-btn);color:#fff;transition:background .18s ease}
.ld .btn-help:hover{background:var(--orange-btn-h)}
.ld .btn-help svg{width:15px;height:15px}
.ld .btn-help.done{background:#e7f2ea;color:#2f6b3a;border:1px solid #bcdcc6}
.ld .btn-help.done:hover{background:#dcecdf}

/* Nieuws */
.ld .newsitem{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.ld .newsitem:first-child{padding-top:0}.ld .newsitem:last-child{border-bottom:0;padding-bottom:0}
.ld .newsitem .ph{flex:0 0 116px;width:116px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel-2);position:relative}
.ld .newsitem .ph img{width:100%;height:100%;object-fit:cover}
.ld .newsitem .cat{position:absolute;left:8px;top:8px;font-family:var(--cond);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--orange-btn);padding:2px 8px;border-radius:999px}
.ld .newsitem .nb{min-width:0;display:flex;flex-direction:column;gap:5px}
.ld .newsitem .ndate{display:flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--anthra)}
.ld .newsitem .nt{font-family:var(--cond);font-weight:700;font-size:21px;text-transform:uppercase;line-height:1.02}
.ld .newsitem p{font-size:14px;color:var(--ink-2)}
.ld .newsitem .nolock{flex:0 0 116px;width:116px;aspect-ratio:4/3;border-radius:10px;background:var(--canvas);border:1px dashed #d8d5d1;display:flex;align-items:center;justify-content:center;color:var(--anthra)}
.ld .newsitem .nolock svg{width:26px;height:26px}

/* Besloten album */
.ld .album{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);min-height:190px}
.ld .album img{width:100%;height:100%;min-height:190px;object-fit:cover;filter:brightness(.62);transition:transform .5s ease}
.ld .album:hover img{transform:scale(1.04)}
.ld .album .lock-abs{position:absolute;top:12px;right:12px}
.ld .album .al-body{position:absolute;inset:auto 0 0 0;padding:16px 18px;color:#fff;background:linear-gradient(transparent,rgba(26,23,24,.9))}
.ld .album .al-kick{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--orange)}
.ld .album .al-title{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1;margin-top:2px}
.ld .album .al-meta{font-size:13.5px;color:var(--silver);margin-top:4px}

/* Documenten */
.ld .doc-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ld .doc-cat h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.04em;color:var(--anthra);margin-bottom:8px}
.ld .doc-list{display:flex;flex-direction:column}
.ld .doc{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ld .doc:last-child{border-bottom:0}
.ld .doc>svg{width:17px;height:17px;color:var(--orange-btn);flex:0 0 auto}
.ld .doc .dl{margin-left:auto;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em;color:var(--ink-2);flex:0 0 auto}
.ld .doc:hover .dl{color:var(--orange-btn)}
.ld .doc-team{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* Mijn gegevens */
.ld .me-id{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ld .me-id .av-lg{width:54px;height:54px;border-radius:999px;background:var(--panel);color:#fff;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:19px}
.ld .me-id .me-name{font-family:var(--cond);font-weight:700;font-size:22px;text-transform:uppercase;line-height:1}
.ld .me-id .me-mail{font-size:14px;color:var(--ink-2);margin-top:4px;overflow-wrap:anywhere}
.ld .me-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}

@media (max-width:960px){
  .ld .col-4,.ld .col-6,.ld .col-8{grid-column:span 6}
  .ld .bento{grid-template-columns:repeat(6,1fr)}
  .ld .col-12{grid-column:span 6}
  .ld .doc-cats{grid-template-columns:1fr}
  .ld .leader-actions{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .ld .bento{grid-template-columns:1fr;gap:16px}
  .ld .bento>*{grid-column:1 / -1 !important}
  .ld-greet h1{font-size:34px}
}
@media (max-width:560px){
  .ld .mb-game{grid-template-columns:1fr}
  .ld .mb-when{grid-column:1;grid-row:2;align-items:flex-start;text-align:left;flex-direction:row;gap:12px;align-items:baseline}
  .ld .mb-none{grid-column:1;grid-row:2;text-align:left}
  .ld .verzamel{grid-row:3}
  .ld .leader-actions{grid-template-columns:repeat(2,1fr)}
  .ld .la-btn{min-height:96px}
  .ld .newsitem .ph,.ld .newsitem .nolock{flex-basis:92px;width:92px}
}
@media (prefers-reduced-motion:reduce){
  .ld .la-btn,.ld .album img{transition:none}
}

/* ================================================
   LEDEN-ACTIEPAGINA'S (supersimpele formulieren, mobile-first)
   ================================================ */
.ld-act{padding-block:26px 60px;min-height:60vh}
.ld-act-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:14px;color:var(--ink-2);margin-bottom:14px}
.ld-act-back:hover{color:var(--orange-btn)}
.ld-act-back svg{width:15px;height:15px}
.ld-act-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);
  max-width:640px;margin-inline:auto;padding:28px 28px 26px}
.ld-act-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ld-act-head .badge-leader{display:inline-flex;align-items:center;gap:6px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:12px;color:#fff;background:var(--orange-btn);padding:3px 11px;border-radius:999px}
.ld-act-head .badge-leader svg{width:13px;height:13px}
.ld-act-card h1{font-size:clamp(26px,4vw,34px);text-transform:uppercase;margin-bottom:6px}
.ld-act-card .lead{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin-bottom:20px}
.ld-field{margin-bottom:18px}
.ld-field label,.ld-label{display:block;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:14px;color:var(--ink-2);margin-bottom:8px}
.ld-field input[type=text],.ld-field input[type=email],.ld-field input[type=password],.ld-field input[type=number],.ld-field input[type=time],.ld-field input[type=date],.ld-field textarea,.ld-field select{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--canvas);border:1.5px solid var(--line);border-radius:var(--r-el);padding:13px 14px;box-sizing:border-box}
.ld-field textarea{resize:vertical;min-height:120px}
.ld-field input:focus,.ld-field textarea:focus,.ld-field select:focus{outline:none;border-color:var(--anthra)}
.ld-field .hint{font-size:13px;color:var(--anthra);margin-top:6px}
.ld-score-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ld-score-row .ld-field{flex:1;min-width:120px;margin-bottom:0}
.ld-score-sep{font-family:var(--cond);font-weight:700;font-size:30px;color:var(--anthra);padding-bottom:10px}
.ld-score-row input{font-family:var(--cond);font-weight:700;font-size:30px;text-align:center}
.ld-btn-lg{width:100%;justify-content:center;font-size:19px;padding:15px 26px;margin-top:8px}
.ld-vt-list{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.ld-vt-item{border:1px solid var(--line);border-radius:var(--r-el);padding:14px 16px;background:var(--canvas)}
.ld-vt-item .vt-fix{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:18px;line-height:1.1}
.ld-vt-item .vt-sub{font-size:13.5px;color:var(--ink-2);margin-top:3px;margin-bottom:10px}
.ld-vt-item .vt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ld-vt-item .vt-row label{font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:13px;color:var(--ink-2);margin:0}
.ld-vt-item input[type=time]{width:auto;flex:0 0 auto;font-size:18px;padding:10px 12px}
.ld-msg-list{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.ld-msg-list h2{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:18px;margin-bottom:12px}
.ld-msg{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.ld-msg:last-child{border-bottom:0}
.ld-msg .mtxt{flex:1;min-width:0}
.ld-msg .mtxt p{font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.ld-msg .mtxt .mwhen{font-size:12.5px;color:var(--anthra);margin-top:3px}
.ld-msg-del{flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--anthra);border-radius:var(--r-el);
  padding:7px 12px;font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:12.5px;letter-spacing:.03em;cursor:pointer}
.ld-msg-del:hover{border-color:#d4756a;color:#a83a0d}
.ld-err{background:#fdeceb;color:#8a1f16;border:1px solid #f3c4c0;border-radius:var(--r-el);padding:12px 15px;font-size:14.5px;margin-bottom:18px}
.ld-done{text-align:center;padding:6px 0}
.ld-done .done-ic{width:62px;height:62px;border-radius:999px;background:#e7f2ea;color:#2f6b3a;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.ld-done .done-ic svg{width:32px;height:32px}
.ld-done h1{margin-bottom:8px}
.ld-done p{color:var(--ink-2);font-size:15.5px;max-width:44ch;margin:0 auto 22px;line-height:1.6}
.ld-signup{padding:14px 0;border-bottom:1px solid var(--line)}
.ld-signup:last-child{border-bottom:0}
.ld-signup .su-req{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:17px;line-height:1.1}
.ld-signup .su-meta{font-size:13px;color:var(--ink-2);margin-top:2px}
.ld-signup .su-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ld-signup .su-row{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-el);padding:8px 12px}
.ld-signup .su-row .nm{font-weight:600}
.ld-teampick{display:flex;flex-direction:column;gap:10px}
.ld-teampick a{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-el);
  padding:15px 18px;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:18px;color:var(--ink);background:var(--canvas)}
.ld-teampick a:hover{border-color:var(--orange);color:var(--orange-btn)}
.ld-teampick a svg{width:18px;height:18px;color:var(--orange-btn)}
.ld-checks{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.ld-check{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.ld-check:last-child{border-bottom:0}
.ld-check input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--orange-btn);cursor:pointer}
.ld-check .ld-check-name{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:.02em}
@media (max-width:560px){
  .ld-act-card{padding:22px 18px 20px}
}

/* ================================================
   SITEBEHEER IN LEDENSTIJL (FASE 8b)
   Paneel "Jij beheert de site" op /leden (zelfde donkere paneelstijl als
   "Jij regelt: [team]") + de taakschermen /leden/nieuwsbericht en
   /leden/activiteit. Uitsluitend aanvullingen; niets hierboven wijzigt.
   ================================================ */

/* Paneel op het dashboard: hetzelfde .leader-paneel, maar met een knoppen-
   raster dat meegroeit met het aantal taken (nu 2, straks 4). */
.ld .leader.sitebeheer .leader-actions{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ld .badge-site{display:inline-flex;align-items:center;gap:6px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:12px;color:#fff;background:var(--orange-btn);padding:3px 11px;border-radius:999px}
.ld .badge-site svg{width:13px;height:13px}

/* Taakschermen: zelfde badge boven de kaart als de teamleider-schermen. */
.ld-act-head .badge-site{display:inline-flex;align-items:center;gap:6px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:12px;color:#fff;background:var(--orange-btn);padding:3px 11px;border-radius:999px}
.ld-act-head .badge-site svg{width:13px;height:13px}

/* Twee velden naast elkaar (begintijd/eindtijd), onder elkaar op smalle schermen. */
.ld-row{display:flex;gap:14px;flex-wrap:wrap}
.ld-row .ld-field{flex:1 1 150px;min-width:0}

/* Bestandskiezer in dezelfde stijl als de overige velden. */
.ld-field input[type=file]{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--canvas);
  border:1.5px dashed var(--line);border-radius:var(--r-el);padding:13px 14px;box-sizing:border-box;cursor:pointer}
.ld-field input[type=file]:focus{outline:none;border-color:var(--anthra)}

/* Vinkje met uitleg in een eigen kader (bijv. "Alleen voor leden"). */
.ld-check-box{border:1.5px solid var(--line);border-radius:var(--r-el);background:var(--canvas);padding:6px 14px 12px;margin-bottom:18px}
.ld-check-box .ld-check{border-bottom:0;padding:12px 0 4px}
.ld-check-box .hint{font-size:13px;color:var(--anthra);line-height:1.5}

/* Toelichtingsblok boven een formulier (bijv. "de redactie publiceert"). */
.ld-note{background:#eef4fb;border:1px solid #c9dcef;color:#245079;border-radius:var(--r-el);
  padding:12px 15px;font-size:14.5px;line-height:1.55;margin-bottom:20px}

/* Knoppenrij: grote klikdoelen onder elkaar, ook op desktop rustig. */
.ld-btn-row{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ld-btn-row .ld-btn-lg{margin-top:0}
.ld-foot-hint{font-size:13px;color:var(--anthra);line-height:1.5;margin-top:12px;text-align:center}

/* --- Fotoalbum + upload (fase 8b stap 2) --- */

/* Waarschuwingsblok in dezelfde toon als de portretrecht-notitie in admin. */
.ld-warn{background:#fff7ed;border:1px solid #f3c99a;color:#7c3b12;border-radius:var(--r-el);
  padding:12px 15px;font-size:14.5px;line-height:1.55;margin-bottom:20px}
.ld-warn strong{display:block;margin-bottom:2px}

/* Vaste waarde in plaats van een keuzelijst (teamleider met één team). */
.ld-static{font-family:var(--cond);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);background:var(--canvas);border:1.5px solid var(--line);border-radius:var(--r-el);padding:12px 14px}

/* Zijpad onder een formulier ("of doe dit"). */
.ld-alt-link{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:14.5px}
.ld-alt-link a{color:var(--orange-btn);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Teller onder de bestandskiezer + melding tijdens het uploaden. */
.ld-count{font-size:14px;color:var(--ink-2);margin-top:8px;min-height:1px}
.ld-count.is-veel{color:#8a1f16;font-weight:600}
.ld-busy{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-top:14px}
.ld-busy::before{content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--orange-btn);animation:ld-spin .8s linear infinite}
@keyframes ld-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ld-busy::before{animation:none;border-top-color:var(--line);background:var(--orange-btn)}
}

/* --- Teamgegevens + AllUnited-koppeling (fase 8b stap 3) --- */

/* Groepskop binnen één formulier (Training en verzamelen / AllUnited-koppeling):
   zelfde tekststijl als .ld-msg-list h2, iets meer luchte erboven. */
.ld-groep-titel{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:18px;
  letter-spacing:.02em;margin:26px 0 4px}
.ld-groep-titel:first-of-type{margin-top:4px}
.ld-groep-uitleg{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 16px}

/* Ververs-knop onder het formulier, met status ("laatst ververst") eronder. */
.ld-sync-block{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.ld-sync-block .ld-foot-hint{margin-top:10px}

/* --- Teamkoppeling hulpvragen (vervolg op fase 9, 2026-08-17) --- */

/* Teamnaam-badge op de aanmeldingenlijst (/leden/aanmeldingen): zelfde opmaak
   en markup als .ld .badge-team (dashboard), maar dan geldig binnen .ld-act,
   want deze actiepagina heeft niet de .ld-klasse op <main>. */
.ld-act .badge-team{display:inline-flex;align-items:center;gap:6px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:11.5px;color:var(--ink-2);background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.ld-act .badge-team .dot{width:7px;height:7px;border-radius:999px;background:var(--orange-btn);flex:0 0 auto}

/* ================================================
   HERO SCHERMBREED (verzoek Jerom 30 aug 2026)
   De beeldbaan loopt nu net als de paginakoppen van rand tot rand; het
   kaartkader (afronding, rand, schaduw) vervalt. De tekst en het scoreboard
   blijven uitgelijnd met de rest van de pagina via een eigen wrap-begrenzing.
   Mobiel (<=760px) was al schermbreed en blijft ongewijzigd.
   Staat bewust ONDERAAN het stylesheet zodat deze regels de eerdere
   hero-kaartregels overschrijven.
   ================================================ */
@media (min-width:761px){
  .hero{padding-block:0}
  .hero .wrap{max-width:none;padding-inline:0}
  .hero-band{border-radius:0;border:0;box-shadow:none}
  .hero-inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 20px}
  .hero-inner--match{width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 20px}
}