/* ===========================================================
   Band-app — stijl
   Overgenomen van de beeldbank en de voorraad-app, en die weer van de receptenapp van
   Mams at Work: dezelfde tokens, dezelfde componenten en maten, zodat de apps op de telefoon
   familie van elkaar zijn. Het gedeelde fundament staat bovenaan; wat alleen voor deze app
   bestaat staat onderaan, onder "Band-app".

   ELKE kleur van de app staat in :root. Geen hex- of rgba-waarde hoort ergens anders.

   Schermgrenzen: telefoon tot 640px, tablet 641–1024px, desktop daarboven.
   =========================================================== */

/* Lettertypen staan in /static/fonts en worden NIET bij Google geladen: dan gaat er geen
   IP-adres van een gebruiker naar Google, en kan de Content-Security-Policy op 'self' blijven.
   Alle drie SIL Open Font License. Alleen de Latijnse set (U+0000-00FF en wat leestekens). */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bebas-neue-latin.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;
  src:url(../fonts/open-sans-latin.woff2) format('woff2');}
@font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/pacifico-latin.woff2) format('woff2');}

:root{
  /* Merkkleuren */
  --groen:#3B5B4C;        --groen-rgb:59,91,76;
  --groen-diep:#2C463A;
  --groen-zacht:#8E9D97;
  --lichtgroen:#D6E3D2;
  --lichtgroen-diep:#C9DAC4;
  --lichtgroen-zacht:#E9F0E6;
  --oranje:#E66204;       /* testomgeving */
  --goud-ster:#BFA14A;    /* open account-bolletje */

  /* Achtergronden */
  --creme:#FFFFFF;
  --creme-2:#F1F5F1;
  --card:var(--creme);

  /* Tekst en lijnen */
  --tekst:#231F20;
  --muted:#69786F;         /* 4,7:1 op wit */
  --placeholder:#B3AAA2;
  --rand:#E2E8E2;
  --rand-zacht:#EDF1EC;
  --op-accent:#FFFFFF;
  --op-fel:#141A16;

  /* Status: achtergrond + tekst, elk label minstens 4,5:1 */
  --ok-bg:#E8F0E5;            --ok:#516D48;
  --waarschuwing-bg:#F6EFD9;  --waarschuwing:#7E621A;
  --fout-bg:#F6E4DF;          --fout:#9A4736;
  --neutraal-bg:var(--creme-2); --neutraal:#5F6E68;
  --gevaar:#C0392B; --gevaar-diep:#A5301F;

  --schaduw-rgb:var(--groen-rgb);
  --overlay-rgb:35,31,32;

  /* Knoppen: alles wat je aantikt is minstens 44px hoog. */
  --knop-hoogte:44px;
  --knop-hoogte-klein:32px;
  --knop-ruimte:16px;
  --knop-ruimte-klein:10px;
  --rand-dikte:1px;

  --icoon-s:16px; --icoon-m:20px; --icoon-l:24px;

  --radius-xs:4px; --radius-s:6px; --radius-m:8px; --radius-l:10px; --radius-xl:14px;
  --radius-rond:50%; --radius-pil:999px;

  --schaduw-1:0 1px 4px rgba(var(--overlay-rgb),.12);
  --schaduw-2:0 4px 16px rgba(var(--schaduw-rgb),.06);
  --schaduw-3:0 8px 22px rgba(var(--schaduw-rgb),.12);
  --schaduw-4:0 18px 44px -14px rgba(var(--overlay-rgb),.5);
  --ring-focus:0 0 0 3px rgba(var(--schaduw-rgb),.18);

  --tekst-xs:.68rem;  --tekst-s:.72rem;   --tekst-m:.78rem;  --tekst-l:.82rem;
  --tekst-xl:.9rem;   --tekst-2xl:1.05rem; --tekst-3xl:1.25rem; --tekst-4xl:1.4rem;
  --tekst-5xl:1.6rem; --tekst-6xl:1.9rem;

  --display:'Bebas Neue',Impact,sans-serif;
  --script:'Pacifico',cursive;
  --sans:'Open Sans',-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box;}

/* HIDDEN IS HIDDEN. De browserregel `[hidden]{display:none}` heeft de laagste soortelijkheid,
   dus élke eigen `display` wint ervan. Eén regel vóór alles (les uit de beeldbank). */
[hidden]{display:none !important;}

/* Geen rechthoekige tap-highlight; in plaats daarvan licht het element zelf op binnen
   zijn eigen vorm (opacity). Zie de receptenapp voor het waarom. */
html{-webkit-tap-highlight-color:transparent;}
body{-webkit-user-select:none;user-select:none;}
input,textarea,select,.link-veld{-webkit-user-select:text;user-select:text;}

.cat-tile:active, .lijst-rij-tik:active, .nav-avatar:active, .nav-home:active, .back-btn:active,
.btn:active, .btn-small:active, .btn-small-outline:active, .btn-small-danger:active, .btn-add:active,
.btn-modal:active, .band-keuze:active{
  opacity:.72;
  transition:opacity .05s;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--tekst);
  background:var(--creme);
  line-height:1.6;
}

/* ---- Header ---- */
.site-header{
  background:var(--lichtgroen);
  border-bottom:var(--rand-dikte) solid var(--rand);
  position:sticky; top:0; z-index:500;
}
.header-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  padding:10px 24px;
  min-height:62px;
}
.header-top-test{background:var(--oranje);}
.header-left{display:flex;align-items:center;justify-self:start;min-width:38px;}
.header-center{display:flex;align-items:center;gap:10px;min-width:0;justify-self:center;}
.header-right{display:flex;align-items:center;justify-self:end;min-width:38px;}
.brand{
  font-family:var(--script); font-size:var(--tekst-5xl); line-height:1.2;
  color:var(--groen); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.env-label{
  font-size:var(--tekst-s); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--op-fel); background:var(--creme); border-radius:var(--radius-pil); padding:1px 8px;
}
.nav-home{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius-rond); color:var(--groen);
}
.nav-home svg{width:var(--icoon-l);height:var(--icoon-l);}
.nav-home:hover{background:var(--lichtgroen-diep);}

.site-nav{display:flex;align-items:center;gap:20px;padding:0 24px 10px;flex-wrap:wrap;}
.nav-link{color:var(--muted);text-decoration:none;font-size:var(--tekst-l);font-weight:500;letter-spacing:.02em;}
.nav-link:hover{color:var(--groen);}
.btn-link{
  background:none;border:none;color:var(--muted);font-family:inherit;font-size:var(--tekst-l);
  font-weight:500;cursor:pointer;padding:0;letter-spacing:.02em;
}
.btn-link:hover{color:var(--groen);text-decoration:underline;}
.inline-form{display:inline;margin:0;}
.nav-versie{font-size:var(--tekst-s);color:var(--muted);margin-left:auto;}

.nav-toggle{display:none;}
.nav-avatar{
  align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  border:none; border-radius:var(--radius-rond); cursor:pointer;
  background:var(--groen); color:var(--op-accent);
  font-family:var(--sans); font-weight:700; font-size:var(--tekst-2xl); line-height:1;
}
.nav-avatar[aria-expanded="true"]{background:var(--goud-ster);color:var(--op-fel);}

/* ---- Layout ---- */
.site-main{--main-boven:28px;width:100%;max-width:1100px;margin:0 auto;padding:var(--main-boven) 28px 40px;}
/* Een smal scherm (formulier, lijst) staat op de desktop niet over de volle breedte. */
.smal{max-width:640px;margin-left:auto;margin-right:auto;}
/* Het detailscherm van een nummer heeft een brede maattabel: op tablet en desktop meer ruimte. */
.smal-breed{max-width:900px;}

.card{
  background:var(--card);
  border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl);
  padding:18px 16px;
  box-shadow:var(--schaduw-2);
  margin-bottom:14px;
}
.card h2{margin:0 0 6px;font-size:var(--tekst-4xl);}
.auth-card{max-width:400px;margin:7vh auto 0;}

h1{
  font-family:var(--display); font-size:var(--tekst-6xl); font-weight:400; letter-spacing:.03em;
  color:var(--groen); margin:0 0 14px; line-height:1.1;
}
h2{font-family:var(--display);font-weight:400;letter-spacing:.03em;color:var(--groen);}

label{display:block;font-size:var(--tekst-l);font-weight:500;margin:16px 0 6px;color:var(--muted);}

input[type=email],input[type=password],input[type=number],input[type=text],input[type=date],
input[type=datetime-local],input[type=search],input[type=url],textarea,select{
  width:100%; min-height:var(--knop-hoogte); padding:10px 12px;
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-m);
  font-family:inherit; font-size:16px; /* 16px: anders zoomt iOS in bij het tikken */
  color:var(--tekst); background:var(--card);
}
textarea{resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--groen);box-shadow:var(--ring-focus);}

/* ---- Knoppen ---- */
.btn{
  margin-top:20px; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte);
  background:var(--groen); color:var(--op-accent); text-decoration:none;
  border:none; padding:6px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-xl); font-weight:600; letter-spacing:.03em;
  cursor:pointer; transition:background .15s;
}
.btn:hover{background:var(--groen-diep);}
.btn:disabled{opacity:.6;cursor:default;}
.btn-small{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--knop-hoogte);
  background:var(--groen); color:var(--op-accent); text-decoration:none; border:none;
  padding:4px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-l); font-weight:600; cursor:pointer;
}
.btn-small-outline, .btn-small-danger{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--knop-hoogte);
  background:none; padding:2px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-l); font-weight:600; cursor:pointer; text-decoration:none;
}
.btn-small-outline{border:var(--rand-dikte) solid var(--groen);color:var(--groen);}
.btn-small-outline:hover{background:var(--groen);color:var(--op-accent);}
.btn-small-danger{border:var(--rand-dikte) solid var(--gevaar);color:var(--gevaar);}
.btn-small-danger:hover{background:var(--gevaar);color:var(--op-accent);}
.btn-add{
  margin-top:12px; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte); background:none; border:var(--rand-dikte) dashed var(--groen);
  color:var(--groen); padding:4px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-l); font-weight:600; text-decoration:none; cursor:pointer;
}
.btn-add:hover{background:var(--creme-2);}
.knoppen-rij{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.knoppen-rij form{margin:0;}
.knoppen-rij select{width:auto;min-width:160px;}

/* ---- Tekst ---- */
.muted{color:var(--muted);font-size:var(--tekst-xl);}
.muted a{color:var(--groen);font-weight:600;}
.uitleg{color:var(--muted);font-size:var(--tekst-l);line-height:1.5;margin:6px 0 10px;}
a{color:var(--groen);}

/* ---- Meldingen (toast bovenaan) ---- */
.flashes{
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  width:calc(100% - 24px); max-width:420px; z-index:1000; pointer-events:none;
}
.flash{
  padding:10px 14px; border-radius:var(--radius-m); font-size:var(--tekst-xl); margin-bottom:10px;
  cursor:pointer; transition:opacity .4s ease; pointer-events:auto; box-shadow:var(--schaduw-3);
}
.flash-hide{opacity:0;}
.flash-error{background:var(--fout-bg);color:var(--fout);}
.flash-success{background:var(--ok-bg);color:var(--ok);}
.flash-warning{background:var(--waarschuwing-bg);color:var(--waarschuwing);}

/* ---- Badges ---- */
.badge{
  display:inline-block; font-size:var(--tekst-xs); font-weight:600; padding:2px 8px;
  border-radius:var(--radius-pil); white-space:nowrap; letter-spacing:.04em;
  font-family:var(--sans); vertical-align:middle; line-height:1.5;
}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-neutraal{background:var(--neutraal-bg);color:var(--neutraal);}
.badge-bezig{background:var(--waarschuwing-bg);color:var(--waarschuwing);}

/* ---- Kop met terug-knop ---- */
/* Blijft staan onder de balk (--kop-h: hoogte van de balk, gezet in app.js). */
.page-head{
  display:flex;align-items:center;gap:10px;margin:-10px 0 4px;padding:10px 0;
  position:sticky;top:calc(var(--kop-h, 62px) + var(--main-boven, 28px) - 10px);z-index:400;
  background:var(--creme);box-shadow:0 calc(10px - var(--main-boven, 28px)) 0 var(--creme);
}
.page-head h1{margin:0;min-width:0;overflow-wrap:anywhere;}
.back-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-rond);
  background:var(--lichtgroen); color:var(--groen);
  text-decoration:none; font-size:var(--tekst-3xl); line-height:1;
}
.back-btn:hover{background:var(--groen);color:var(--op-accent);}

/* ---- Home: blokken en tegels ---- */
.home-section{margin-top:22px;}
.home-section:first-child{margin-top:0;}
.home-section-title{font-size:var(--tekst-4xl);margin:0 0 8px;}
.home-section-vlak{background:var(--lichtgroen-zacht);border-radius:var(--radius-xl);padding:18px 18px 20px;}

.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
.cat-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:18px 12px 14px; background:var(--card);
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-xl);
  box-shadow:var(--schaduw-2); text-decoration:none; color:var(--muted); text-align:center;
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.cat-tile:hover{box-shadow:var(--schaduw-3);transform:translateY(-3px);border-color:var(--groen);}
.cat-tile-icon{width:50px;height:50px;color:var(--groen);}
.cat-tile-icon svg{width:100%;height:100%;}
.cat-tile-label{font-family:var(--display);font-size:var(--tekst-2xl);color:var(--groen);line-height:1.2;letter-spacing:.03em;}
.cat-tile-sub{font-size:var(--tekst-m);}

/* ---- Lijsten ---- */
.lijst{background:var(--card);border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl);overflow:hidden;margin-bottom:14px;}
.lijst-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  min-height:56px;padding:10px 14px;color:var(--tekst);text-decoration:none;
  border-top:var(--rand-dikte) solid var(--rand-zacht);}
.lijst-rij:first-child{border-top:none;}
.lijst-rij form{margin:0;}
.lijst-hoofd{display:flex;flex-direction:column;min-width:0;flex:1 1 180px;font-weight:600;font-size:var(--tekst-xl);}
.lijst-hoofd small{font-weight:400;color:var(--muted);font-size:var(--tekst-m);line-height:1.4;overflow-wrap:anywhere;}
.lijst-pijl{color:var(--groen-zacht);font-size:var(--tekst-3xl);line-height:1;}
.lijst-rij-tik{position:relative;}
.lijst-rij-tik:hover{background:var(--creme-2);}
.rij-rechts{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;}

/* ---- Modal ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:1100; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--overlay-rgb),.5);
}
.modal{
  width:100%; max-width:340px; text-align:center; background:var(--card);
  border-radius:var(--radius-xl); padding:20px 24px 18px; box-shadow:var(--schaduw-4);
}
.modal h2{font-family:var(--sans);font-size:var(--tekst-2xl);font-weight:600;color:var(--groen);margin:0 0 14px;letter-spacing:normal;}
.modal-text{font-size:var(--tekst-xl);line-height:1.5;margin:2px 0 0;}
.modal-acties{display:flex;gap:10px;margin-top:18px;}
.btn-modal{
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte); padding:4px var(--knop-ruimte-klein); border-radius:var(--radius-m);
  cursor:pointer; font-family:inherit; font-size:var(--tekst-xl); font-weight:600;
}
.btn-modal-annuleer{background:none;border:var(--rand-dikte) solid var(--rand);color:var(--muted);}
.btn-modal-ok{background:var(--groen);border:var(--rand-dikte) solid var(--groen);color:var(--op-accent);}
.btn-modal-ok.btn-modal-gevaar{background:var(--gevaar);border-color:var(--gevaar);}

/* Wachtwoordveld met een oogje om het zichtbaar te maken. Zelfde opzet als de receptenapp. */
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap input[type=password],
.pw-wrap input[type=text]{flex:1;padding-right:42px;}
.pw-toggle{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:none;background:none;color:var(--muted);
  border-radius:var(--radius-rond);cursor:pointer;}
.pw-toggle:hover{color:var(--groen);background:var(--lichtgroen-zacht);}
.pw-toggle:active{opacity:.72;}
.pw-toggle svg{width:18px;height:18px;}


/* ===========================================================
   Band-app
   Wat alleen deze app heeft. Groeit mee met de schermen.
   =========================================================== */

/* Home: de band en je rol, boven de tegels. */
.band-kop{margin-bottom:14px;}
.band-kop h1{margin:0;}
.band-kop p{margin:2px 0 0;}

/* Bands kiezen: grote tikvlakken, want dit is het eerste wat je ziet na inloggen. */
.band-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.band-keuze{width:100%;min-height:72px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;padding:12px 16px;background:var(--card);cursor:pointer;text-align:left;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-xl);box-shadow:var(--schaduw-2);
  font-family:var(--display);font-size:var(--tekst-3xl);letter-spacing:.03em;color:var(--groen);}
.band-keuze:hover{border-color:var(--groen);}
.band-keuze small{font-family:var(--sans);font-size:var(--tekst-m);color:var(--muted);letter-spacing:normal;}
.band-keuze-actief{border-color:var(--groen);background:var(--lichtgroen-zacht);}

/* Een rol kiezen bij een lid: keuzelijst en knop naast elkaar. */
.rol-form{display:flex;gap:6px;align-items:center;}
.rol-form select{width:auto;min-width:130px;}

/* Een nieuwe link: één keer te zien, met kopiëren en delen. */
.link-vlak{background:var(--ok-bg);border-color:var(--ok-bg);}
.link-veld{display:block;padding:10px 12px;background:var(--card);border-radius:var(--radius-m);
  font-family:ui-monospace,Consolas,monospace;font-size:var(--tekst-m);overflow-wrap:anywhere;}

/* Een knop rechts in de kop van een scherm (Wijzigen). */
.kop-rechts{margin-left:auto;flex:none;}

/* Gegevens als label + waarde; op de telefoon onder elkaar. */
.gegevens{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;}
.gegevens dt{color:var(--muted);font-size:var(--tekst-l);font-weight:500;}
.gegevens dd{margin:0;overflow-wrap:anywhere;}
/* Vrije tekst (notities, biografie) met de regelovergangen zoals ingetypt. Jinja escapet de
   tekst; pre-wrap zorgt dat enters blijven staan zonder dat er HTML in hoeft. */
.tekst-blok{white-space:pre-wrap;margin:12px 0 0;overflow-wrap:anywhere;}

/* Formulieren: velden naast elkaar op een breed scherm. */
.veld-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
.veld-rij-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.formulier-kop{margin:22px 0 0;font-size:var(--tekst-3xl);}
.keuzes{border:0;padding:0;margin:16px 0 0;}
.keuzes legend{font-size:var(--tekst-l);font-weight:500;color:var(--muted);margin-bottom:4px;padding:0;}
.vinkje{display:inline-flex;align-items:center;gap:8px;min-height:var(--knop-hoogte);margin:0 18px 0 0;
  color:var(--tekst);font-size:var(--tekst-xl);cursor:pointer;}
.vinkje input{width:20px;height:20px;accent-color:var(--groen);}
.rij-veld{flex:1 1 200px;width:auto;}
.hernoem-form{display:flex;gap:8px;align-items:center;flex:1 1 220px;}

/* Knopregels van een apparaat: naam, soort, standen. */
.knop-regels{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.knop-regel{display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1.4fr);gap:8px;}

/* De keten van een board: schakels met pijlen, zoals op de pedalen-PDF's. */
.keten{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;}
.keten-schakel{display:inline-flex;align-items:center;min-height:32px;padding:2px 12px;
  border-radius:var(--radius-m);background:var(--groen);color:var(--op-accent);
  font-weight:600;font-size:var(--tekst-l);}
.keten-pijl{color:var(--groen-zacht);}
.keten-aan{background:var(--groen);}
.keten-uit{background:var(--rand);color:var(--muted);font-weight:500;}
/* De effect-loop: een kader rond de apparaten tussen send en return. */
.keten-loop{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding:3px 6px;
  border:1.5px dashed var(--groen-zacht);border-radius:var(--radius-l);}
.keten-haak{font-size:var(--tekst-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}

/* Draaiknoppen als klok. */
.draaiknoppen{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0;}
.draaiknop{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;color:var(--groen);}
.draaiknop svg{width:40px;height:40px;}
.draaiknop small{color:var(--muted);font-size:var(--tekst-s);}
.draaiknop-uur{font-size:var(--tekst-xs);color:var(--tekst);}
.keuzestand{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;}
.keuzestand strong{font-size:var(--tekst-l);color:var(--groen);}
.keuzestand small{color:var(--muted);font-size:var(--tekst-s);}

/* Het detailscherm van een nummer. */
.feiten{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.feit{display:inline-flex;align-items:baseline;gap:4px;padding:3px 10px;border-radius:var(--radius-pil);
  background:var(--lichtgroen-zacht);font-size:var(--tekst-l);}
.feit small{color:var(--muted);font-size:var(--tekst-s);}
.sectie-kop{display:flex;align-items:center;gap:10px;margin:22px 0 8px;}
.sectie-kop h2{margin:0;font-size:var(--tekst-4xl);}
.sectie-kop .btn-small-outline{margin-left:auto;}
.stand{border-left:4px solid var(--groen);}
.stand h3{margin:0;font-family:var(--display);font-weight:400;font-size:var(--tekst-3xl);color:var(--groen);letter-spacing:.03em;}
.stand-waar{color:var(--muted);font-size:var(--tekst-l);}
.structuur{width:100%;border-collapse:collapse;font-size:var(--tekst-l);}
.structuur th{text-align:left;color:var(--op-accent);background:var(--groen);padding:6px 8px;font-weight:600;}
.structuur td{padding:7px 8px;border-bottom:var(--rand-dikte) solid var(--rand-zacht);vertical-align:top;}
.structuur tr:nth-child(even) td{background:var(--creme-2);}
.structuur .maat{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;}
.structuur .deel{color:var(--groen);font-weight:600;white-space:nowrap;}
.structuur .akkoorden{font-family:ui-monospace,Consolas,monospace;font-size:var(--tekst-m);}
.tabel-scroll{overflow-x:auto;}
.nummer-rij small{display:block;}
.status-kop{scroll-margin-top:120px;}

/* Een nummer per bandlid: uitklapbare blokken (details/summary, werkt zonder JS). */
.lid-blok{padding:0;margin-bottom:10px;}
.lid-blok > summary{display:flex;flex-direction:column;gap:1px;list-style:none;cursor:pointer;
  padding:12px 44px 12px 16px;min-height:56px;justify-content:center;position:relative;}
.lid-blok > summary::-webkit-details-marker{display:none;}
.lid-blok > summary::after{content:'›';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:var(--tekst-4xl);color:var(--groen-zacht);transition:transform .15s;}
.lid-blok[open] > summary::after{transform:translateY(-50%) rotate(90deg);}
.lid-blok > summary:active{opacity:.72;}
.lid-naam{font-family:var(--display);font-size:var(--tekst-3xl);color:var(--groen);letter-spacing:.03em;line-height:1.2;}
.lid-sub{color:var(--muted);font-size:var(--tekst-m);}
.lid-blok > :not(summary){margin-left:16px;margin-right:16px;}
.lid-blok[open]{padding-bottom:12px;}
.rol-blok h4{margin:14px 0 4px;font-size:var(--tekst-l);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.rol-naam{margin:4px 0 0;font-size:var(--tekst-2xl);color:var(--groen);}
.rol-omschrijving{margin:4px 0;}
.stand-kort{border-left:3px solid var(--lichtgroen-diep);padding:2px 0 2px 10px;margin:8px 0;}
.stand-kort p{margin:0 0 4px;}
.klein{font-size:var(--tekst-l);}
.openstaand{background:var(--waarschuwing-bg);border-color:var(--waarschuwing-bg);}
.openstaand .lid-blok{background:var(--card);border-radius:var(--radius-l);}
.sectie-kop-in{margin-top:0;}
.open-los{margin:8px 0 0;}
.partij-lijst{padding-left:18px;margin:4px 0;}
.partij-lijst li{margin:3px 0;}
.structuur .akkoorden{white-space:nowrap;}

/* De gang van een rol: de partijen in speelvolgorde, met de wissel ertussen. */
.gang{margin:4px 0 2px;padding-left:20px;font-weight:400;font-size:var(--tekst-l);}
.gang li{margin:2px 0;}
.gang-partij{font-weight:600;}
.gang-stand{color:var(--muted);font-size:var(--tekst-m);margin-left:6px;}
.wissel{display:inline-block;margin:0 6px 2px 0;padding:0 8px;border-radius:var(--radius-pil);
  background:var(--waarschuwing-bg);color:var(--waarschuwing);font-size:var(--tekst-s);font-weight:600;}
.partij-keuze{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;}
.partij-keuze .vinkje{flex:1 1 220px;margin:0;}
.partij-keuze input.partij-volg{width:64px;flex:none;}
.partij-keuze select{width:auto;flex:1 1 140px;}
.merk{font-weight:400;color:var(--muted);font-size:var(--tekst-l);}

/* Omhoog/omlaag en andere kleine icoonknoppen: 44px tikvlak. */
.btn-icoon{display:inline-flex;align-items:center;justify-content:center;
  width:var(--knop-hoogte);height:var(--knop-hoogte);padding:0;background:none;cursor:pointer;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);
  color:var(--groen);font-size:var(--tekst-2xl);font-family:inherit;}
.btn-icoon:disabled{opacity:.35;cursor:default;}
.btn-icoon:active{opacity:.72;}
.schuif{display:inline-flex;gap:4px;}

/* Lijst: toevoegen als laatste regel. */
.lijst-rij-toevoegen{justify-content:flex-start;gap:10px;min-height:52px;font-weight:600;color:var(--groen);}
.lijst-rij-toevoegen:hover{background:var(--creme-2);}
.lijst-rij-toevoegen:active{opacity:.72;}
.plus-rond{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-rond);border:1.5px dashed var(--groen);
  font-size:1.2rem;line-height:1;font-weight:400;}

/* Agenda: een afgezegd optreden blijft staan, doorgestreept. */
.rij-afgezegd .lijst-hoofd, .rij-afgezegd .gegevens dd:first-of-type{text-decoration:line-through;color:var(--muted);}

/* Home: het eerstvolgende optreden bovenaan. */
.volgende-optreden{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--tekst);}
.volgende-optreden small{color:var(--muted);font-size:var(--tekst-m);}
.volgende-optreden strong{font-family:var(--display);font-weight:400;font-size:var(--tekst-4xl);color:var(--groen);letter-spacing:.03em;}
.volgende-optreden:active{opacity:.72;}

.rol-uitleg{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:var(--tekst-l);}
.rol-uitleg li{margin-bottom:2px;}
.voetnoot{margin-top:18px;text-align:center;font-size:var(--tekst-s);color:var(--muted);}


/* ---- Tablet (641–1024px) ---- */
/* Twee kolommen waar het kan: op de repetitie ligt de tablet op de standaard, liggend. */
@media(min-width:641px) and (max-width:1024px){
  .site-main{padding:var(--main-boven) 22px 36px;}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---- Telefoon (tot 640px) ---- */
@media(max-width:640px){
  .header-top{padding:10px 16px;}
  .nav-toggle{display:flex;}
  .site-nav{display:none;}
  /* Uitgeklapt: een paneel rechts onder het account-bolletje. */
  .site-nav.nav-open{
    display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0;
    position:fixed; top:var(--bar-h, 62px); right:8px; width:max-content; min-width:200px;
    max-width:calc(100vw - 16px); background:var(--lichtgroen);
    border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-l);
    box-shadow:var(--schaduw-3); overflow:hidden; z-index:499;
  }
  .site-nav .nav-link, .site-nav .btn-link{
    display:block; width:100%; text-align:left; padding:12px 18px;
    border-bottom:var(--rand-dikte) solid var(--rand); font-size:var(--tekst-xl);
  }
  .site-nav .inline-form{display:block;}
  .nav-versie{margin:0;padding:8px 18px;}
  .brand{font-size:var(--tekst-3xl);}

  .site-main{--main-boven:14px;padding:var(--main-boven) 12px 32px;}
  .card{padding:14px 12px;}
  .home-section-vlak{padding:12px 10px 14px;}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .cat-tile{padding:12px 6px 10px;gap:4px;}
  .cat-tile-icon{width:36px;height:36px;}
  .cat-tile-label{font-size:var(--tekst-xl);}
  .rol-form{width:100%;}
  .rol-form select{flex:1;}
  .gegevens{grid-template-columns:1fr;gap:0;}
  .gegevens dd{margin-bottom:8px;}
  .veld-rij-3{grid-template-columns:1fr 1fr;}
  .veld-rij-3 > :first-child{grid-column:1 / -1;}
  .knop-regel{grid-template-columns:minmax(0,1fr) 136px;}
  .knop-regel input[name^=knop_opties]{grid-column:1 / -1;}
}