/* =====================================================================
   vv Hoogland O16-1 — clubkleuren rood en wit, met goud als vrolijke tweede kleur.
   Alle kleuren staan in dit ene blok.
   ===================================================================== */
:root{
  --club:#C8102E;          /* clubrood */
  --club-diep:#8E0A20;     /* donkerder rood, voor de balk bovenin */
  --club-licht:#FCE9EC;    /* rood als zachte achtergrond */

  --zon:#E39420;           /* goud — corvee, accenten, vrolijkheid */
  --zon-licht:#FDF1DC;

  --ground:#FBF7F6;
  --surface:#FFFFFF;
  --ink:#1E1618;
  --ink-2:#71605F;
  --line:#EBDFDF;

  --ok:#2C8A55;
  --ok-licht:#E4F2EA;
  --uit:#7C6E70;
  --uit-licht:#EFEAEA;
  --chip-ink:#8E0A20;

  --schaduw:0 1px 1px rgba(60,10,20,.04), 0 6px 18px -12px rgba(60,10,20,.22);
  --rond:16px;
  --balk:118px;            /* hoogte van de onderbalk, twee rijen */
  --kop:62px;              /* hoogte van de rode balk bovenaan; app meet hem na */
  --nav:118px;             /* echte hoogte van de onderbalk; app meet hem na */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --club:#EE4359; --club-diep:#1C1114; --club-licht:#33171C;
    --zon:#EFAE4C; --zon-licht:#332413;
    --ground:#15100F; --surface:#201819; --ink:#F3EBEC; --ink-2:#A99697; --line:#332728;
    --ok:#54BE80; --ok-licht:#152B1F;
    --uit:#9E8E90; --uit-licht:#2A2223;
    --chip-ink:#F5A5B0;
    --schaduw:0 1px 1px rgba(0,0,0,.35), 0 6px 18px -12px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground);color:var(--ink);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:"Barlow Condensed","Source Sans 3",sans-serif;font-weight:700;
  letter-spacing:.005em;text-wrap:balance;margin:0}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2);font-size:14px}
[hidden]{display:none !important}
a{color:var(--club)}
:focus-visible{outline:2px solid var(--club);outline-offset:2px}

/* ---------- inloggen en gastscherm ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--club-diep)}
.login-card{background:var(--surface);border-radius:20px;padding:28px 22px;max-width:390px;width:100%;
  text-align:center;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.login-card h1{font-size:29px;margin:12px 0 6px}
.login-card form{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.login-card .btn{margin-top:4px}
input,select{
  width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px;
}
input:focus-visible,select:focus-visible{border-color:var(--club)}
.tekstknop{background:none;border:0;color:var(--ink-2);font:inherit;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:12px;padding:4px}
.tekstknop:hover{color:var(--club)}
.melding{font-size:14px;margin:12px 0 0;min-height:20px;color:var(--ok);font-weight:600}
.melding.fout{color:var(--club)}
.wapen{width:34px;height:38px;object-fit:contain;flex:none}
.wapen.groot{width:64px;height:70px}

/* ---------- schil ---------- */
.shell{max-width:560px;margin:0 auto;min-height:100dvh;background:var(--ground);
  padding-bottom:calc(var(--nav) + 6px)}   /* --nav telt de veilige rand al mee */
.top{position:sticky;top:0;z-index:6;color:#FFF1F2;
  background:linear-gradient(180deg, var(--club-diep) 0%, color-mix(in srgb, var(--club-diep) 90%, #000) 100%);
  padding:12px 16px;display:flex;align-items:center;gap:12px}
.titels{min-width:0}
.club{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#E9AAB3;line-height:1.1}
.team{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;line-height:1;color:#fff}
.scherm-naam{margin-left:auto;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:#E9AAB3}
/* jouw account, altijd rechtsboven binnen handbereik */
.account{flex:none;width:34px;height:34px;border-radius:99px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;
  display:grid;place-items:center;padding:0;transition:background-color .16s ease}
.account:hover{background:rgba(255,255,255,.26)}

main{padding:16px 14px 26px}
.stack{display:flex;flex-direction:column;gap:14px}
@media (prefers-reduced-motion: no-preference){
  section[role="tabpanel"]:not([hidden]){animation:opkomen .22s ease-out}
  @keyframes opkomen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---------- onderbalk ---------- */
nav{
  position:fixed;left:0;right:0;bottom:0;z-index:8;
  max-width:560px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid var(--line);
}
nav button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:none;border:0;cursor:pointer;color:var(--ink-2);
  height:46px;padding:0 2px;border-radius:13px;
  font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;line-height:1;
  transition:background-color .16s ease, color .16s ease;
}
nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .16s ease}
nav button:hover{color:var(--ink)}
nav button[aria-selected="true"]{background:var(--club-licht);color:var(--club)}
nav button[aria-selected="true"] svg{stroke-width:2.1}
@media (prefers-reduced-motion: reduce){ nav button, nav button svg{transition:none} }
nav button.nieuw{position:relative}
nav button.nieuw::after{
  content:"";position:absolute;top:6px;right:calc(50% - 17px);
  width:7px;height:7px;border-radius:99px;background:var(--club);
  box-shadow:0 0 0 2px var(--surface);
}

/* ---------- opklapblad (reden bij afmelden) ---------- */
.blad-vlak{position:fixed;inset:0;z-index:9;display:flex;align-items:flex-end}
.blad-achter{position:absolute;inset:0;background:rgba(20,8,12,.45)}
.blad{position:relative;width:100%;max-width:560px;margin:0 auto;background:var(--surface);
  border-radius:20px 20px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px -14px rgba(0,0,0,.5)}
@media (prefers-reduced-motion: no-preference){
  .blad{animation:omhoog .2s ease-out}
  @keyframes omhoog{from{transform:translateY(24px)}to{transform:none}}
}
.greep{width:38px;height:4px;border-radius:99px;background:var(--line);margin:2px auto 12px}
.blad-kop{padding:0 2px 12px}
.reden-knoppen{display:grid;gap:8px}
.reden-knoppen button{
  padding:14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:"Barlow Condensed",sans-serif;font-size:18px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;text-align:left;
}
.reden-knoppen button:hover{border-color:var(--club);color:var(--club)}
.reden-knoppen .scheiding{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:8px 2px 0}
.reden-knoppen .keuze-ja{border-color:var(--ok);color:var(--ok)}
.reden-knoppen .keuze-ja:hover{background:var(--ok-licht);border-color:var(--ok);color:var(--ok)}
.reden-knoppen .keuze-twijfel{border-color:var(--zon);color:var(--zon)}
.reden-knoppen .keuze-twijfel:hover{background:var(--zon-licht);border-color:var(--zon);color:var(--zon)}
.reden-knoppen .keuze-af:hover{background:var(--club-licht)}
.reden-knoppen .keuze-af[data-reden=""]{color:var(--ink-2);font-size:16px}
.reden-knoppen .uitloggen{border-color:var(--club);color:var(--club);margin-top:6px}
.reden-knoppen .uitloggen:hover{background:var(--club-licht)}

/* ---------- bouwstenen ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rond);
  box-shadow:var(--schaduw);overflow:hidden}
.card-pad{padding:15px}
.eyebrow{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}
.sec-title{font-size:22px;margin-bottom:2px}
.rij{display:flex;align-items:center;gap:10px}
.spreid{flex-wrap:wrap;display:flex;gap:8px}
.spreid>*{flex:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:"Barlow Condensed",sans-serif;font-size:17px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;text-decoration:none;
}
.btn:hover{border-color:var(--club)}
.btn.primary{background:var(--club);border-color:var(--club);color:#fff}
.btn.primary:hover{background:var(--club-diep);border-color:var(--club-diep)}
.btn.zon{background:var(--zon);border-color:var(--zon);color:#3A2405}
.btn.gevaar{color:var(--club);border-color:var(--club)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.klein{padding:8px 12px;font-size:15px;width:auto}

.pill{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 10px;border-radius:99px;flex:none;border:0;cursor:default}
button.pill{cursor:pointer}
.p-ja{background:var(--ok-licht);color:var(--ok)}
.p-twijfel{background:var(--zon-licht);color:var(--zon)}
.p-af{background:var(--club-licht);color:var(--club)}
.p-stil{background:var(--line);color:var(--ink-2)}
.p-club{background:var(--club-licht);color:var(--chip-ink)}

/* rugnummer als rondje — geeft de lijsten een gezicht */
.nr{
  width:30px;height:30px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:var(--club-licht);color:var(--chip-ink);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;
}
.nr.leeg{background:var(--line);color:var(--ink-2)}
.nr.zon{background:var(--zon-licht);color:var(--zon)}
/* initialen van de staf: letters staan mooier iets kleiner */
.nr.letters{font-size:13px;letter-spacing:.3px}

ul.list{list-style:none;margin:0;padding:0}
ul.list li{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--line)}
ul.list li:first-child{border-top:0}
.nm{flex:1;min-width:0;font-weight:600;font-size:15px;overflow-wrap:anywhere}
.sub{display:block;font-weight:400;font-size:12.5px;color:var(--ink-2)}

/* ---------- de klok bovenaan ---------- */
.klok{position:relative;color:#FFF1F2;border-radius:var(--rond);overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(155deg, var(--club) 0%, var(--club-diep) 100%);
  box-shadow:0 10px 28px -18px rgba(140,10,32,.9)}
.klok-kop{display:flex;gap:13px;align-items:flex-start;padding:16px 16px 0}
.datumblok{
  flex:none;width:56px;border-radius:12px;background:rgba(255,255,255,.15);
  text-align:center;padding:7px 0 8px;
}
.datumblok .dag{font-family:"Barlow Condensed",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#F7C9CF}
.datumblok .getal{font-family:"Barlow Condensed",sans-serif;font-size:27px;line-height:1;color:#fff}
.datumblok .maand{font-family:"Barlow Condensed",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#F7C9CF}
.klok .soort{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--zon)}
.klok .vs{font-family:"Barlow Condensed",sans-serif;font-size:26px;line-height:1.08;color:#fff;margin:2px 0 4px}
.klok .where{font-size:13.5px;color:#F2CFD4}
.klok .where a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* live wedstrijd: de stand groot in beeld */
.standkaart{overflow:hidden}
.stand-kop{display:flex;align-items:center;gap:8px;padding:12px 15px 0}
.stand-kop .stip{width:9px;height:9px;border-radius:99px;background:var(--club);flex:none;
  box-shadow:0 0 0 4px var(--club-licht)}
.stand-kop .stip.uit{background:var(--ink-2);box-shadow:0 0 0 4px var(--line)}
.wedklok{margin-left:auto;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;
  color:var(--club)}
.stand-cijfers{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:8px 15px 14px}
.stand-cijfers .ploeg{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  line-height:1.15;color:var(--ink-2);text-align:center;overflow-wrap:anywhere}
.stand-cijfers .cijfer{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:44px;
  line-height:1;color:var(--ink);white-space:nowrap}
.doellijst li{padding:8px 15px}
.doellijst .nr{background:var(--zon-licht);font-size:14px}
.weg-knop{border:0;background:none;color:var(--ink-2);font-size:19px;line-height:1;cursor:pointer;
  padding:0 4px;opacity:.7}
.weg-knop:hover{opacity:1;color:var(--club)}
select.smal{width:auto;flex:none;max-width:52%;padding:8px 10px;font-size:14px}

/* de eerstvolgende wedstrijd, altijd in beeld op het Nu-scherm */
.wedstrijdkaart{border:1.5px solid var(--club-licht);box-shadow:0 8px 24px -18px rgba(140,10,32,.7)}
.wedstrijdkaart .kaart-kop{display:flex;gap:13px;align-items:flex-start;padding:14px 15px 12px}
.wedstrijdkaart .datumblok{background:var(--club-licht)}
.wedstrijdkaart .datumblok .dag,
.wedstrijdkaart .datumblok .maand{color:var(--club)}
.wedstrijdkaart .datumblok .getal{color:var(--chip-ink)}
.wedstrijdkaart .kaart-voet{padding:11px 15px 0}
.wedstrijdkaart .jouwbeurt{display:inline-block;padding:5px 11px;border-radius:99px;
  background:var(--zon-licht);color:#7A4A06;font-weight:700;font-size:13px}
.wedstrijdkaart ul.list li{padding:9px 15px}

/* jouw eigen beurt springt eruit in het goud */
.klok .jouwbeurt{display:inline-block;margin-top:8px;padding:5px 11px;border-radius:99px;
  background:#F6C976;color:#4A2B06;font-weight:700;font-size:13px;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.5)}
.aftellen{display:flex;gap:8px;padding:14px 16px 16px}
.aftellen div{flex:1;background:rgba(255,255,255,.14);border-radius:12px;padding:9px 2px;text-align:center}
.aftellen b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:29px;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.aftellen span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#F7C9CF;font-weight:600}

/* ---------- uitgelicht: de foto van de week ---------- */
.uitgelicht{position:relative;border-radius:var(--rond);overflow:hidden;box-shadow:var(--schaduw);
  background:var(--surface);border:1px solid var(--line)}
.uitgelicht img{display:block;width:100%;max-height:330px;object-fit:cover}
.uitgelicht .band{
  position:absolute;left:0;right:0;bottom:0;padding:34px 15px 13px;color:#fff;
  background:linear-gradient(180deg, transparent, rgba(20,6,10,.82));
}
.uitgelicht .stempel-tekst{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--zon)}
.uitgelicht .band p{margin:2px 0 0;font-size:16px;font-weight:600;text-wrap:balance}
.uitgelicht .weg-foto{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;
  border:0;border-radius:99px;width:30px;height:30px;font-size:17px;cursor:pointer;line-height:1}
.uitgelicht .weg-foto:hover{background:var(--club)}
.uitgelicht.leeg{padding:15px}

/* ---------- live op wedstrijddag ---------- */
.live{border-radius:var(--rond);overflow:hidden;box-shadow:var(--schaduw);
  border:1.5px solid var(--club);background:var(--surface)}
.live .kop{display:flex;align-items:center;gap:9px;padding:13px 15px 0}
.live .stip{width:9px;height:9px;border-radius:99px;background:var(--club);flex:none}
@media (prefers-reduced-motion: no-preference){
  .live .stip{animation:kloppen 1.8s ease-in-out infinite}
  @keyframes kloppen{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
}
.live .kop .eyebrow{color:var(--club)}
.live .body{padding:4px 15px 15px}
.live .wed{font-family:"Barlow Condensed",sans-serif;font-size:23px;font-weight:700;line-height:1.1}
.live .knoppen{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.live .knoppen>*{flex:1;min-width:140px}

/* ---------- meters en tegels ---------- */
.meter{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--ok);border-radius:99px}
.meter i.laag{background:var(--club)}
.meter i.midden{background:var(--zon)}
.pct{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;width:52px;text-align:right;
  flex:none;font-variant-numeric:tabular-nums}

.tegels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tegel{background:var(--surface);border:1px solid var(--line);border-radius:var(--rond);padding:13px;
  box-shadow:var(--schaduw)}
.tegel b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:34px;line-height:1;
  font-variant-numeric:tabular-nums}
.tegel span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.tegel.zon b{color:var(--zon)}

/* corvee krijgt de goudtint, zodat het opvalt tussen het rood */
.corvee-kaart{border-left:4px solid var(--zon)}

/* ---------- tabellen ---------- */
.scroller{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
td.getal,th.getal{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tr.leider td{background:var(--zon-licht)}

/* ---------- partij en speeltijd ---------- */
.scorebord{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:15px}
.scorebord .kant{text-align:center}
.scorebord .naam{font-family:"Barlow Condensed",sans-serif;font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.scorebord .getal{font-family:"Barlow Condensed",sans-serif;font-size:54px;line-height:1;
  font-variant-numeric:tabular-nums}
.scorebord .streep{font-size:26px;color:var(--ink-2)}
.telknoppen{display:flex;gap:6px;justify-content:center;margin-top:6px}
.telknoppen button{width:40px;height:36px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:20px;cursor:pointer;line-height:1}
.telknoppen button:hover{border-color:var(--club)}
.tijd{font-family:"Barlow Condensed",sans-serif;font-size:48px;text-align:center;
  font-variant-numeric:tabular-nums;padding:10px 0 2px}
.tijd.loopt{color:var(--ok)}
.veldlijst li{cursor:pointer}
.veldlijst li.veld{background:var(--ok-licht)}

/* ---------- rijschema ---------- */
.auto{border-top:1px solid var(--line);padding:13px 15px}
.auto:first-of-type{border-top:0}
.auto header{display:flex;align-items:baseline;gap:8px}
.auto .drv{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:700}
.auto .cnt{margin-left:auto;font-size:12px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600}
.pax{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pax span{font-size:13px;background:var(--club-licht);color:var(--chip-ink);padding:3px 10px;border-radius:99px}
.let-op{margin:0;padding:12px 15px;background:var(--zon-licht);color:var(--zon);font-size:14px;
  font-weight:600;border-top:1px solid var(--line)}
.goed{margin:0;padding:12px 15px;background:var(--ok-licht);color:var(--ok);font-size:14px;
  font-weight:600;border-top:1px solid var(--line)}

/* ---------- cijfers geven ---------- */
.cijferrij{padding:12px 15px;border-top:1px solid var(--line)}
.cijferrij:first-child{border-top:0}
.cijferrij .kop{display:flex;align-items:center;gap:11px}
.knoppen{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:9px}
.knoppen button{padding:9px 0;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);
  color:var(--ink);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;cursor:pointer;
  font-variant-numeric:tabular-nums}
.knoppen button:hover{border-color:var(--club)}
.knoppen button[aria-pressed="true"]{background:var(--club);border-color:var(--club);color:#fff}
.groot{font-family:"Barlow Condensed",sans-serif;font-size:26px;font-weight:700;
  font-variant-numeric:tabular-nums;flex:none;width:50px;text-align:right}

/* ---------- chat ---------- */
.berichten{display:flex;flex-direction:column;gap:10px;padding:13px 15px;
  max-height:min(56vh,520px);overflow-y:auto;border-top:1px solid var(--line);
  overscroll-behavior:contain}
/* Op het chatscherm vult het gesprek de hele hoogte: alleen de lijst met
   berichten schuift, de typbalk staat vast onderaan. Zo hoef je op de
   telefoon niet twee keer te scrollen om bij het tekstvak te komen. */
#chat .chatkader{display:flex;flex-direction:column;
  height:calc(100dvh - var(--kop) - var(--nav) - 48px)}
#chat .berichten{flex:1 1 auto;max-height:none;min-height:0}
#chat .chatbalk{flex:none}
.chat-uitleg{margin:0;padding:9px 15px 8px;font-size:12px;color:var(--ink-2);flex:none}
.bericht{display:flex;flex-direction:column;align-items:flex-start;max-width:88%}
.bericht.van-mij{align-self:flex-end;align-items:flex-end}
.afzender{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.bel{position:relative;background:var(--uit-licht);border-radius:14px 14px 14px 4px;padding:9px 12px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.bericht.van-mij .bel{background:var(--club-licht);border-radius:14px 14px 4px 14px}
.tekst{font-size:15px;overflow-wrap:anywhere;white-space:pre-wrap}
.bel.met-foto{flex-direction:column;align-items:stretch;padding:5px;gap:6px}
.bel.met-foto .tekst{padding:0 6px}
.bel.met-foto .stempel{margin-left:0;padding:0 6px 2px}
.fotolink{display:block;line-height:0}
.bel img{max-width:100%;max-height:300px;width:auto;border-radius:11px;display:block}
.bel.met-foto .weg{position:absolute;top:9px;right:11px;background:rgba(0,0,0,.45);color:#fff;
  border-radius:99px;width:24px;height:24px;opacity:1;line-height:1}
.bel.met-foto .weg:hover{background:var(--club);color:#fff}
.foto-laadt{width:200px;height:140px;border-radius:11px;background:var(--line);display:grid;
  place-items:center;font-size:13px;color:var(--ink-2)}
.stempel{font-size:11px;color:var(--ink-2);margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
.bel .weg{border:0;background:none;color:var(--ink-2);font-size:17px;line-height:1;cursor:pointer;
  padding:0 2px;opacity:.5}
.bel .weg:hover{opacity:1;color:var(--club)}
.chatbalk{display:flex;gap:8px;align-items:center;padding:12px 15px;border-top:1px solid var(--line);
  background:var(--surface)}
.fotoknop{flex:none;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.fotoknop:hover{border-color:var(--club);color:var(--club)}
.fotoknop:focus-within{outline:2px solid var(--club);outline-offset:2px}
.chatbalk input{flex:1}
.chatbalk .btn{width:auto;flex:none}

/* ---------- beheer ---------- */
.veldrij{display:flex;gap:8px;flex-wrap:wrap}
.veldrij>*{flex:1;min-width:130px}
label.klein{display:block;font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:10px 0 4px}

.toast{position:fixed;left:12px;right:12px;bottom:calc(var(--balk) + 14px + env(safe-area-inset-bottom));
  max-width:536px;margin:0 auto;background:var(--ink);color:var(--ground);padding:12px 16px;
  border-radius:12px;font-size:14.5px;font-weight:600;z-index:20;text-align:center;line-height:1.4;
  overflow-wrap:anywhere;box-shadow:0 12px 32px -12px rgba(0,0,0,.55)}
textarea{width:100%;min-height:120px;padding:12px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px;resize:vertical}
textarea:focus-visible{border-color:var(--club)}
.leeg{padding:16px 15px;color:var(--ink-2);font-size:14.5px}
.let{color:var(--zon);font-weight:600}
code{background:var(--club-licht);color:var(--chip-ink);padding:1px 6px;border-radius:5px;font-size:13.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}