/* ===========================================================
   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.
   SIL Open Font License, behalve Permanent Marker en Special Elite (Apache 2.0).
   Alleen de Latijnse set (U+0000-00FF en wat leestekens). Een browser haalt een lettertype
   pas op als het gebruikt wordt: wie het MAW-thema heeft, laadt die van de decennia niet. */
@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');}
/* Voor de thema's (onderaan, "Thema's"). */
@font-face{font-family:'Shrikhand';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/shrikhand-latin.woff2) format('woff2');}
@font-face{font-family:'Monoton';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/monoton-latin.woff2) format('woff2');}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/orbitron-latin.woff2) format('woff2');}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/permanent-marker-latin.woff2) format('woff2');}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/special-elite-latin.woff2) format('woff2');}
@font-face{font-family:'Varela Round';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/varela-round-latin.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin.woff2) format('woff2');}
@font-face{font-family:'Lobster';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lobster-latin.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/space-grotesk-latin.woff2) format('woff2');}

/* [data-thema="maw"]: ook een voorbeeldtegel van MAW op een scherm in een ander thema ("Thema's", onderaan). */
:root, [data-thema="maw"]{
  color-scheme:light;
  /* 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;

  /* De kop (balk bovenaan en het menu). Standaard de merkkleuren; een thema kan de kop los van
     de rest kleuren, en er een streep onder zetten (--kop-streep, een achtergrond). */
  --kop-bg:var(--lichtgroen);
  --kop-merk:var(--groen);
  --kop-tekst:var(--muted);
  --kop-hover:var(--lichtgroen-diep);
  --kop-rand:var(--rand);
  --kop-knop:var(--groen);  --kop-knop-tekst:var(--op-accent);
  --kop-streep:none;        --kop-streep-hoogte:0px;

  /* 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;

  /* VandePas Solutions: het woordmerk en de neutrale kleuren van het app-icoon en het eerste opstartscherm.
     Voor elk thema hetzelfde, dus alleen hier (tools/maak_iconen.py en maak_opstartbeelden.py hebben ze ook). */
  --merk:'Montserrat',Helvetica,Arial,sans-serif;
  --neutraal-app-bg:#222222; --neutraal-app-tekst:#F2F2F2;

  /* De hand van de iconen (.tekening, raster 64): een thema tekent dezelfde tekeningen anders.
     --icoon-vlak vult het vlak van een tekening zonder eigen kleur (een pedaal zonder kleur). */
  --icoon-lijn:3.5; --icoon-uiteinde:round; --icoon-hoek:round;
  --icoon-vlak:none; --icoon-filter:none; --icoon-draai:none;

  --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;}
/* Tekst is te selecteren (kopiëren/plakken). Alleen wat je aantikt niet: een lange druk op een
   knop, tegel of het menu hoort geen selectie te starten. Het bord regelt dat zelf (.bord-svg). */
.cat-tile, .lijst-rij-tik, .nav-avatar, .nav-home, .back-btn, .btn, .btn-small, .btn-small-outline,
.btn-small-danger, .btn-add, .btn-modal, .btn-icoon, .band-keuze, .thema-keuze, nav, summary{-webkit-user-select:none;user-select:none;}

.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(--kop-bg);
  border-bottom:var(--rand-dikte) solid var(--kop-rand);
  position:sticky; top:0; z-index:500;
}
/* De streep van een thema onder de kop; telt mee in de hoogte die app.js meet (--kop-h). */
.site-header::after{content:"";display:block;height:var(--kop-streep-hoogte);background:var(--kop-streep);}
.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(--kop-merk); 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(--tekst); background:var(--card); 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(--kop-merk);
}
.nav-home svg{width:var(--icoon-l);height:var(--icoon-l);}
.nav-home:hover{background:var(--kop-hover);}

.site-nav{display:flex;align-items:center;gap:20px;padding:0 24px 10px;flex-wrap:wrap;}
.nav-link{color:var(--kop-tekst);text-decoration:none;font-size:var(--tekst-l);font-weight:500;letter-spacing:.02em;}
.nav-link:hover{color:var(--kop-merk);}
.btn-link{
  background:none;border:none;color:var(--kop-tekst);font-family:inherit;font-size:var(--tekst-l);
  font-weight:500;cursor:pointer;padding:0;letter-spacing:.02em;
}
.btn-link:hover{color:var(--kop-merk);text-decoration:underline;}
.inline-form{display:inline;margin:0;}
.nav-versie{font-size:var(--tekst-s);color:var(--kop-tekst);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(--kop-knop); color:var(--kop-knop-tekst);
  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 scherm dat de volle breedte nodig heeft (de Maatkaart): {% block main_klasse %} site-main-vol in de template. */
.site-main-vol{max-width:none;}
/* 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;}
/* Boven het inlogscherm het woordmerk van VandePas Solutions met daaronder de naam van de app (Frank 15-10-2026). */
.auth-kop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:7vh auto 20px;text-align:center;}
.auth-kop + .auth-card{margin-top:0;}
.auth-merk{font-size:clamp(1.55rem,7.5vw,2.1rem);color:var(--tekst);}
.auth-app{font-family:var(--merk);font-size:var(--tekst-l);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);}

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);}
/* Wat er van een nummer al is, in de repertoirelijst: ontbrekend grijs en doorgestreept, zodat het niet
   alleen op kleur leunt. */
.compleet{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px;}
.compleet-mist{text-decoration:line-through;opacity:.8;}
/* De toelichting bij de pedalen van een partij (migratie 028), boven de standen. */
.pedalen-toelichting{margin:0 0 14px;}
.pedalen-toelichting h4{margin:0 0 6px;}
.pedalen-toelichting textarea{width:100%;}

/* ---- 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-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);}

/* Een formulier in een modal (onderhoud van een stand): breder, links uitgelijnd, zelf scrollen. */
.modal-overlay.modal-open{z-index:1000;align-items:flex-start;overflow-y:auto;}
.modal-formulier{max-width:640px;text-align:left;margin:4vh 0;}
.modal-kop{display:flex;align-items:center;gap:8px;margin:0 0 6px;}
.modal-kop h2{flex:1;margin:0;}
.modal-sluit{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  font-size:1.6rem;line-height:1;color:var(--muted);text-decoration:none;border-radius:var(--radius-rond);}
.modal-sluit:active{opacity:.72;}
.modal-formulier .modal-acties{position:sticky;bottom:-18px;background:var(--card);padding:10px 0 4px;}
body:has(.modal-open){overflow:hidden;}

/* 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{flex:none;width:20px;height:20px;accent-color:var(--groen);}
.rij-veld{flex:1 1 200px;width:auto;}

/* 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;}
.aansluiting-groep{margin:12px 0 2px;font-weight:600;font-size:var(--tekst-s);color:var(--muted);}
/* Een aansluiting: naam, richting, stekker, signaal, groep (migratie 035, stekkers.py). */
.knop-regel.poort-regel{grid-template-columns:minmax(0,1.1fr) 110px minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr);}

/* 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);}

/* De uitwerking bewerken: standen, knopstanden, maattabel. */
.board-keuze{margin:4px 0 8px;}
.board-keuze > summary{cursor:pointer;min-height:var(--knop-hoogte);display:flex;align-items:center;gap:8px;
  font-weight:600;color:var(--groen);}
.board-keuze > summary:active{opacity:.72;}
.apparaat-vinkjes{display:flex;flex-wrap:wrap;gap:0 4px;}
.apparaat-vinkjes .in-loop{border-left:2px dashed var(--groen-zacht);padding-left:8px;}
.knopstand-velden{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:0 10px;}
.deel-kop{display:grid;grid-template-columns:84px 84px minmax(0,1fr);gap:0 10px;}
.akkoorden-veld{font-family:ui-monospace,Consolas,monospace;}
/* Iconen uit de bibliotheek (iconen.py). */
.icoon{width:24px;height:24px;flex:none;}
.icoon-klein{width:18px;height:18px;}
.icoon-rij{width:32px;height:32px;color:var(--groen);display:block;}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Leden als tegels. */
.lid-tegel{position:relative;}
.lid-tegel-extra{display:flex;gap:4px;color:var(--groen-zacht);}
.lid-tegel-jij{position:absolute;top:8px;right:8px;}
.lid-tegel-nieuw{border-style:dashed;}
.plus-groot{width:50px;height:50px;font-size:32px;}

/* De pagina van een lid: kop, Speelt, Gear. */
.lid-kop{display:flex;gap:16px;align-items:center;}
.lid-kop-icoon{width:64px;height:64px;flex:none;color:var(--groen);}
.lid-kop-icoon svg{width:100%;height:100%;}
.lid-kop-tekst p{margin:2px 0;}
.lid-kop-omschrijving{font-size:var(--tekst-xl);font-weight:600;}
.speelt{padding:0;}
.speelt > summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;list-style:none;cursor:pointer;
  padding:12px 16px;min-height:56px;}
.speelt > summary::-webkit-details-marker{display:none;}
.speelt > summary:active{opacity:.72;}
.speelt > summary.alleen-lezen{cursor:default;pointer-events:none;}
.speelt-kop{font-size:var(--tekst-l);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.speelt-iconen{display:flex;flex-wrap:wrap;gap:14px;flex:1;}
.speelt-icoon{display:inline-flex;flex-direction:column;align-items:center;gap:2px;color:var(--groen);}
.speelt-icoon svg{width:34px;height:34px;}
.speelt-icoon small{color:var(--muted);font-size:var(--tekst-s);}
.speelt-wijzig{font-size:var(--tekst-s);color:var(--groen);text-decoration:underline;}
.speelt[open] .speelt-wijzig{display:none;}
.speelt form{padding:0 16px 14px;}
.speelt-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.speelt-keuze{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);cursor:pointer;text-align:center;
  font-size:var(--tekst-m);color:var(--muted);}
.speelt-keuze svg{width:34px;height:34px;}
.speelt-keuze input{position:absolute;opacity:0;}
.speelt-keuze:has(input:checked){border-color:var(--groen);background:var(--lichtgroen-zacht);color:var(--groen);font-weight:600;}
.speelt-keuze:has(input:focus-visible){outline:2px solid var(--groen);outline-offset:2px;}
.speelt-keuze:active{opacity:.72;}

/* Icoonkiezer: een raster van rondjes. */
.icoonkiezer{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin:8px 0 10px;}
.icoon-keuze{position:relative;display:flex;align-items:center;justify-content:center;height:52px;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);cursor:pointer;color:var(--muted);}
.icoon-keuze input{position:absolute;opacity:0;}
.icoon-keuze-svg{width:30px;height:30px;}
.icoon-keuze:has(input:checked){border-color:var(--groen);background:var(--lichtgroen-zacht);color:var(--groen);}
.icoon-keuze:has(input:focus-visible){outline:2px solid var(--groen);outline-offset:2px;}
.icoon-keuze:active{opacity:.72;}

/* Gear als boom. */
.gear-kop{margin:4px 0 6px;font-size:var(--tekst-l);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
/* Gear als tegels; het icoon draagt de kleur van het item (iconen.py, `vlak`). */
.gear-tegels{margin:4px 0 14px;}
.gear-tegel-aantal{font-size:var(--tekst-s);color:var(--groen-zacht);}
/* Nog aan te schaffen (migratie 037): stippelrand en een label; het icoon wat lichter, want het is er nog niet. */
.gear-tegel-nog-niet{border-style:dashed;}
.gear-tegel-nog-niet .cat-tile-icon{opacity:.6;}
.aanschaf-label{display:inline-block;padding:1px 8px;border-radius:999px;font-size:var(--tekst-s);font-weight:600;
  background:var(--waarschuwing-bg);color:var(--waarschuwing);text-decoration:none;white-space:nowrap;}
.opst-blok-nog-niet{stroke-dasharray:8 6;}
.aanschaf-totaal{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.aanschaf-prijs{font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;}
.gear-acties{align-items:center;}

/* Presets van een multi-effect (presets.py): de lijst bij het item, en per nummer de keuze. */
.presets-lijst > summary, .preset-kies > summary{cursor:pointer;min-height:var(--knop-hoogte);display:flex;align-items:center;
  color:var(--muted);-webkit-tap-highlight-color:transparent;}
.presets-lijst > summary:active, .preset-kies > summary:active{opacity:.72;}
.preset-plek{font-variant-numeric:tabular-nums;}
.preset-gekozen{margin-top:2px;}
.preset-toelichting{font-style:italic;}
.preset-kies > summary{font-weight:600;color:var(--groen);}
.preset-kies form{margin-top:4px;max-width:420px;}
/* Het nummerscherm (Frank 18-10-2026): een banner met kleine tegels om doorheen te swipen (app.js, data-onderdelen).
   De tegels klikken vast in het midden; de middelste is gekozen (aria-current) en groter. De zijmarge is een halve
   strook min een halve tegel, zodat ook de eerste en de laatste in het midden kunnen staan. */
.nummer-tegels{position:relative;display:flex;align-items:center;gap:6px;margin:4px 0 0;
  padding:20px calc(50% - 40px) 22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.nummer-tegels::-webkit-scrollbar{display:none;}
.nummer-tegels:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-l);}
/* De tegels zijn van zichzelf klein (echte tussenruimte); alleen de gekozen tegel groeit (scale 1,4), en de tegels
   ervoor en erna schuiven opzij zodat hij er niet overheen valt. Alles met transform: de rij zelf verspringt niet,
   dus swipen en vastklikken blijven rustig. */
.nummer-tegel{--opzij:0px;flex:0 0 80px;min-height:64px;scroll-snap-align:center;display:flex;flex-direction:column;gap:1px;
  padding:7px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);background:var(--card);
  color:var(--tekst);text-decoration:none;min-width:0;-webkit-tap-highlight-color:transparent;opacity:.7;
  transform:translateX(var(--opzij));transition:transform .2s ease,opacity .2s ease,border-color .2s,background .2s;}
.nummer-tegel:active{opacity:.72;}
.nummer-tegel[aria-current=true]{transform:scale(1.4);opacity:1;z-index:1;border-color:var(--groen);
  background:var(--lichtgroen-zacht);box-shadow:var(--schaduw-2);}
.nummer-tegel[aria-current=true] ~ .nummer-tegel{--opzij:18px;}
.nummer-tegel:has(~ .nummer-tegel[aria-current=true]){--opzij:-18px;}
.nummer-tegel-icoon{width:20px;height:20px;color:var(--groen);margin-bottom:1px;}
.nummer-tegel-icoon svg{width:100%;height:100%;}
.nummer-tegel-label{font-weight:700;color:var(--groen);font-size:var(--tekst-xs);min-width:0;overflow-wrap:anywhere;hyphens:auto;}
.nummer-tegel-sub,.nummer-tegel-extra{font-size:10px;color:var(--tekst);line-height:1.25;overflow-wrap:anywhere;}
.nummer-tegel-extra{color:var(--muted);}
.nummer-tegel-leeg .nummer-tegel-sub{color:var(--muted);}
@media (prefers-reduced-motion: reduce){.nummer-tegel{transition:none;}}
.nummer-deel{margin-top:8px;}
.gear-stand-pedalen{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px;}
.gear-lid{margin-top:18px;}
.gear-item-kop{gap:10px;justify-content:flex-start;}
.formulier-prullenbak{margin:22px 0 8px;display:flex;justify-content:flex-end;}
/* De secties van een nummer: een wijzig-link naast een groot kopje in gewone letters. */
.status-kop .h4-link{font-family:var(--sans);font-size:var(--tekst-m);text-transform:none;letter-spacing:0;
  font-weight:500;margin-left:10px;vertical-align:middle;}
.nummer-algemeen .voetnoot{text-align:left;margin:8px 0 0;}
.nummer-algemeen p:first-child{margin-top:0;}

/* Een nummer: de partijen onder elkaar, en inzoomen op één partij met tabbladen (partij.html). */
.partij-rij{flex-wrap:wrap;gap:6px 12px;}
.partij-pijl{text-decoration:none;}
.partij-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--tekst);text-decoration:none;}
.nummer-verwijderen{margin:28px 0 8px;}
.partij-capo{max-width:6em;}
.klaar-uitwerking{border-left:3px solid var(--waarschuwing);padding-left:10px;}
.niet-spelen-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0;}
.niet-spelen-form input{flex:1 1 180px;margin:0;}
.partij-spelers{font-weight:600;color:var(--tekst);}
/* Een partij per stand (Pedalen, pedaal in een partij) en de opbouw deel voor deel (partij.html). */
.tab-inhoud .stand-blok + .stand-blok{margin-top:14px;padding-top:12px;border-top:var(--rand-dikte) solid var(--rand);}
.stand-blok .spelers-kop{margin-top:0;}
.stand-blok h4{margin:0;}
.opbouw-regel{padding:10px 0;border-bottom:var(--rand-dikte) solid var(--rand);}
.opbouw-regel:last-of-type{border-bottom:0;}
.opbouw-deel{margin:0 0 4px;}
.opbouw .wissel{margin-left:6px;}
.opbouw-ander td{color:var(--muted);}
/* Een pedaal als paneel in zijn eigen kleur (macro pedaal_paneel). De kleur is een SVG-vlak achter de
   inhoud; de tekst is vast donker of licht, los van het thema, want de achtergrond is het pedaal. */
.pedaal-paneel{position:relative;overflow:hidden;margin:12px 0 0;padding:10px 14px 12px;border-radius:var(--radius-l);
  border:var(--rand-dikte) solid rgba(0,0,0,.18);}
.paneel-kleur{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.pedaal-paneel > :not(.paneel-kleur){position:relative;z-index:1;}
.paneel-licht{color:#1d1d1b;}
.paneel-donker{color:#fff;}
.paneel-zonder-kleur{background:var(--card);color:var(--tekst);border-color:var(--rand);}
.paneel-kop{margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.paneel-kop a, .paneel-kop strong{font-weight:700;font-size:var(--tekst-xl);color:inherit;text-decoration:none;}
.paneel-kop a:active{opacity:.72;}
.paneel-functie{font-size:var(--tekst-m);text-transform:uppercase;letter-spacing:.06em;opacity:.8;}
.paneel-rol{font-size:var(--tekst-m);font-style:italic;opacity:.85;}
.pedaal-paneel .draaiknop, .pedaal-paneel .keuzestand strong{color:inherit;}
.pedaal-paneel .draaiknop small, .pedaal-paneel .draaiknop-uur, .pedaal-paneel .keuzestand small{color:inherit;opacity:.85;}
.paneel-toelichting{margin:6px 0 0;}

/* De opbouw als spiekbrief: een kaartje per deel, met akkoorden en wat je trapt in pedaalkleuren. */
.opbouw-lijst{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.opbouw-deel-kaart{padding:10px 12px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);}
.opbouw-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.opbouw-kop strong{font-size:var(--tekst-xl);}
.opbouw-trap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;}
.trap-label{font-size:var(--tekst-s);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-left:4px;}
.trap-label:first-child{margin-left:0;}
/* De akkoorden steken af (Frank 28-09-2026): een eigen kader met afgeronde hoeken, zo breed als nodig. */
.opbouw-akkoorden{display:inline-flex;flex-direction:column;gap:4px;max-width:100%;margin:8px 0 0;padding:8px 10px;
  border:2px solid var(--tekst);border-radius:var(--radius-m);background:var(--neutraal-bg);}
/* Per regel van het blad een rij, per akkoord een vakje met een vaste breedte: zo lees je het als raster. */
.akkoord-rij{display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
.akkoord{display:inline-flex;align-items:center;justify-content:center;min-width:3.6em;padding:2px 6px;
  border-radius:var(--radius-s);background:var(--card);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--tekst-l);font-weight:700;}
.akkoorden-tabel{display:flex;flex-direction:column;gap:3px;}
.akkoorden-tabel .akkoord{background:var(--neutraal-bg);font-size:var(--tekst-m);min-width:3em;}
.akkoord-noot{margin-left:4px;color:var(--muted);font-size:var(--tekst-s);font-style:italic;}

/* Songtekst (songtekst.py): de akkoorden boven de regel. Een akkoord hangt boven zijn woord (st-stuk, absoluut
   gepositioneerd); de regel is hoog genoeg voor een akkoordrij boven elke schermregel, ook als hij afbreekt. */
.songtekst{font-size:var(--tekst-2xl);line-height:1.5;}
/* Het kopje van een sectie is een echte tussenkop (Frank 30-09-2026): de koptekstletter van het thema, groter dan
   de tekst, in de accentkleur, met een lijn eronder — en bewust zonder vlak, zodat het nooit op de regel lijkt die
   in de playmodus oplicht (st-nu). In em, zodat het meeschaalt met de grotere tekst in de playmodus. */
.st-sectie+.st-sectie{margin-top:1.4em;}
.st-kop{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .5em;margin:0 0 .5em;padding-bottom:.2em;
  border-bottom:2px solid var(--rand);font-family:var(--display);font-size:1.35em;font-weight:400;line-height:1.1;
  letter-spacing:.04em;color:var(--groen);}
.st-kop small{font-family:var(--sans);font-size:var(--tekst-s);letter-spacing:0;color:var(--muted);}
.st-regel{margin:0;padding:0 6px;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:var(--radius-s);
  border-left:3px solid transparent;transition:background-color .2s;}
.st-met-akkoord{line-height:2.7;}
.st-stuk{position:relative;display:inline-block;white-space:pre;}
.st-akkoord{position:absolute;left:0;top:.1em;line-height:1;font-size:.82em;font-weight:700;color:var(--groen);white-space:nowrap;}
.st-noot{margin:2px 0;padding:0 6px;color:var(--muted);font-style:italic;font-size:var(--tekst-l);}
.st-wit{height:.6em;}
.st-nu{background:var(--lichtgroen-zacht);border-left-color:var(--groen);}
.songtekst-veld{font-family:ui-monospace,Consolas,monospace;font-size:var(--tekst-l);line-height:1.5;min-height:22em;}
.opbouw-tekst{margin:6px 0 0;}
.opbouw-ander{opacity:.55;}
/* Een sectie die voor deze speler uiteenvalt: de delen staan in de sectie, met een lijn ervoor. */
.sectie-deel{margin:10px 0 0;padding:6px 0 0 12px;border-left:3px solid var(--lichtgroen-diep);}
.opbouw-deel-kop{margin:0;font-size:var(--tekst-s);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  display:flex;align-items:center;gap:8px;}
/* Een deel van een sectie in het formulier: duidelijk omkaderd, met een eigen verwijderknop. */
.sectie-deel-veld{margin:10px 0 0;padding:8px 12px 10px;border:var(--rand-dikte) solid var(--lichtgroen-diep);
  border-left-width:4px;border-radius:var(--radius-m);background:var(--lichtgroen-zacht);}
.sectie-deel-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.deel-toevoegen{margin:10px 0 0;}
.pedaal-blokje{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;
  border-radius:var(--radius-s);border:var(--rand-dikte) solid rgba(0,0,0,.18);font-weight:700;font-size:var(--tekst-m);}
.pedaal-blokje > span{position:relative;z-index:1;}
.blokje-uit{opacity:.6;}
.blokje-uit > span{text-decoration:line-through;text-decoration-thickness:2px;}
/* Standen van een partij als tegels (tabblad Pedalen): tik er een, de instellingen staan eronder. */
.stand-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:0 0 14px;}
.stand-tegel{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-l);color:var(--tekst);text-decoration:none;-webkit-tap-highlight-color:transparent;}
.stand-tegel small{color:var(--muted);font-size:var(--tekst-s);}
.stand-tegel:active{opacity:.72;}
.stand-tegel-actief{border-color:var(--groen);background:var(--lichtgroen-zacht);color:var(--groen);}
.stand-vanaf{margin:6px 0 0;}
.stand-tegel-nieuw{border-style:dashed;}
.stand-tegel-nieuw strong{display:inline-flex;align-items:center;gap:6px;}
.stand-formulier{margin:0 0 12px;}
.stand-pedaal{margin:10px 0 0;padding:8px 0 0;border-top:var(--rand-dikte) solid var(--rand);}
.stand-pedaal-kop{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px;}
.stand-pedaal-kop .vinkje{margin:0;}
.gear-kies-form{margin:0;display:flex;}
button.cat-tile{font:inherit;cursor:pointer;width:100%;-webkit-tap-highlight-color:transparent;}
button.cat-tile:active{opacity:.72;}
.knop-icoon-groot{width:24px;height:24px;}
.rol-omschrijving p{margin:2px 0;}
.stand-uit{margin:6px 0 0;color:var(--muted);}
/* Wie speelt een partij: kop met Wijzig, daaronder de spelers als tags (macro partij_spelers). */
.spelers-kop{display:flex;align-items:center;gap:12px;margin-top:18px;}
.spelers-kop .status-kop{margin:0;}
.spelers-wijzig{display:inline-flex;align-items:center;gap:6px;}
.knop-icoon{width:16px;height:16px;flex:none;}
.spelers{margin:10px 0 4px;}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.tag{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 12px;margin:0;
  border-radius:var(--radius-pil);background:var(--lichtgroen-zacht);color:var(--groen);
  font-size:var(--tekst-m);font-weight:600;border:var(--rand-dikte) solid var(--groen);}
a.tag{text-decoration:none;background:none;-webkit-tap-highlight-color:transparent;}
a.tag:active{opacity:.72;}
.tag-actief, a.tag-actief{background:var(--groen);color:var(--op-accent);}
.tag-uit{background:var(--neutraal-bg);color:var(--neutraal);border-color:var(--rand);}
.tag-weg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:-8px;
  padding:0;border:0;border-radius:var(--radius-rond);background:none;color:inherit;font-size:1.15rem;
  line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.tag-weg:active{opacity:.72;}
.tag-weg:disabled{opacity:.35;cursor:not-allowed;}
.tag-naam{color:inherit;text-decoration:none;}
.tag-toevoegen .niet-spelen-form{margin-top:10px;}
.tag-nieuw{background:none;border-style:dashed;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.tag-nieuw:active{opacity:.72;}
.tag-toevoegen{display:block;}
.tag-toevoegen[open]{flex-basis:100%;}
.tag-toevoegen > summary{list-style:none;cursor:pointer;display:inline-flex;-webkit-tap-highlight-color:transparent;}
.tag-toevoegen > summary::-webkit-details-marker{display:none;}
.tag-toevoegen > summary:active{opacity:.72;}
.tag-toevoegen[open] > summary .plus-rond{transform:rotate(45deg);}
.tag-toevoegen > .tags{padding-top:8px;}
.tag-toevoegen form{margin:0;}
.partij-icoon{flex:none;width:34px;height:34px;color:var(--groen);}
.partij-icoon svg{width:100%;height:100%;}
.partij-rij .lijst-hoofd{flex:1;min-width:0;}
.lijst-rij-uit{opacity:.6;}
.tab-rij{display:flex;gap:6px;margin:14px 0 0;flex-wrap:wrap;}
.tab{flex:1;text-align:center;padding:10px 12px;border:var(--rand-dikte) solid var(--rand);border-bottom:none;
  border-radius:var(--radius-l) var(--radius-l) 0 0;background:var(--creme-2);color:var(--muted);
  text-decoration:none;font-weight:600;}
.tab-actief{background:var(--card);color:var(--groen);border-color:var(--groen);}
.tab-rij-klein{margin:0 0 10px;}
.tab-rij-klein .tab{flex:none;border-bottom:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);padding:4px 12px;}
.tab-rij-klein .tab-actief{border-color:var(--groen);}
.tab-inhoud{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:2px solid var(--groen);}
.tab-inhoud > h4:first-child{margin-top:0;}
.gang-kort{margin:12px 0 4px;padding-left:0;list-style:none;}
.gang-kort li{margin:2px 0;}

/* Een lijst met een volgorde: slepen aan de greep (app.js, data-volgorde-url). De greep heeft
   touch-action:none, zodat de vinger daar sleept in plaats van de pagina te scrollen. */
.sleep-greep{flex:none;display:flex;align-items:center;justify-content:center;width:32px;align-self:stretch;
  margin:-10px 0 -10px -6px;color:var(--groen-zacht);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;}
.sleep-greep .icoon{width:20px;height:20px;}
/* Tijdens het slepen zweeft de regel als kopie boven de lijst (.lijst-zwevend, aan <body>); op zijn plek
   blijft een lege plek met dezelfde hoogte. Zoals in de ceo-app. */
.lijst-rij.sleept{background:var(--lichtgroen-zacht);box-shadow:inset 0 0 0 2px var(--rand);}
.lijst-rij.sleept > *{visibility:hidden;}
.lijst-zwevend{
  position:fixed; z-index:1200; margin:0; pointer-events:none; cursor:grabbing;
  background:var(--card); border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-m);
  box-shadow:var(--schaduw-4); transform:scale(1.03) rotate(-.6deg); opacity:.97;
}
.lijst-zwevend .sleep-greep{color:var(--groen);}
.lijst-zwevend.lijst-zwevend-neer{transform:none;box-shadow:var(--schaduw-1, none);}
/* ---- Snelmenu (0.41.0, snelmenu.py, _snelmenu.html, js/snelmenu.js) ----
   Overgenomen uit de receptenapp: een half doorzichtige balk in de hoek linksonder die uit de zijkant van het scherm
   komt, tegen de linker- en onderrand, rechts boven en onder rond; elk icoon met zijn naam eronder. De kleuren komen
   uit het thema (--card, --groen) met color-mix, dus elk thema doet vanzelf mee en er komt geen eigen token bij.
   Standaard dicht: dan staat er een lipje met » aan de rand. `.vast` = altijd open (Mijn account). Laag 900: boven
   de kop (500), onder de meldingen (1000) en modals. `.sleept` zet de animatie uit tijdens het slepen en bij laden. */
.snelmenu{--snel-bg:color-mix(in srgb, var(--card) 88%, transparent);
  position:fixed;left:0;bottom:0;z-index:900;pointer-events:none;}
.snelmenu[hidden]{display:none;}
.snelmenu-balk, .snelmenu-lip, .snelmenu-meer-paneel{
  border-top-right-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl);
  background:var(--snel-bg);color:var(--groen);box-shadow:var(--schaduw-3);
  border:var(--rand-dikte) solid var(--rand);border-left:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.snelmenu-balk{
  pointer-events:auto;display:flex;align-items:stretch;max-width:100vw;padding:4px 2px 4px 4px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
  transition:transform .22s ease;
  /* Horizontaal vegen is van ons (inklappen), verticaal blijft scrollen. */
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.snelmenu.dicht .snelmenu-balk{transform:translateX(calc(-100% - 8px));}
.snelmenu.sleept .snelmenu-balk{transition:none;}
.snelmenu-knop{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  /* Bij vijf knoppen samen de hele schermbreedte, minus de inklapknop en de rand; op een tablet niet breder dan
     84px. Als width en niet als flex-basis: de balk is fixed zonder `right`, dus zijn breedte komt uit de inhoud. */
  gap:4px;flex:0 1 auto;width:clamp(54px, calc((100vw - 40px) / 5), 84px);min-width:0;min-height:72px;
  padding:10px 2px 8px;border:0;border-radius:var(--radius-m);background:transparent;color:inherit;
  text-decoration:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .05s;
}
.snelmenu-knop[hidden]{display:none;}
.snelmenu-knop:active{opacity:.72;}
.snelmenu-icoon{flex:none;width:28px;height:28px;}
.snelmenu-knop .icoon{flex:none;width:28px;height:28px;}
.snelmenu-pijl{flex:none;width:22px;height:22px;}
/* De naam onder het icoon: hoogstens twee regels; een lang woord breekt op zijn zachte afbreekstreepje. */
.snelmenu-tekst{font-size:var(--tekst-xs);font-weight:600;line-height:1.15;text-align:center;
  max-width:100%;overflow-wrap:normal;hyphens:manual;}
/* De inklapknop is smal en zachter, zonder tekst: hij hoort bij de balk, niet bij de schermen. */
.snelmenu-in{flex:0 0 28px;width:28px;justify-content:center;opacity:.7;}
.snelmenu.vast .snelmenu-in{display:none;}
/* Het icoon waarvoor de balk vanzelf openging (event snelmenu-open), licht even op. */
.snelmenu-licht-op{animation:snelmenu-licht-op 1.2s ease-out 2;}
@keyframes snelmenu-licht-op{
  0%{background:color-mix(in srgb, var(--groen) 15%, transparent);transform:scale(1);}
  30%{background:color-mix(in srgb, var(--groen) 15%, transparent);transform:scale(1.1);}
  100%{background:transparent;transform:scale(1);}
}
/* Het lipje als hij dicht is: 40px zichtbaar met », aanraakbaar 48px, even hoog als de open balk. Een TIK opent hem;
   naar rechts trekken kan ook. */
.snelmenu-greep{pointer-events:auto;display:none;position:absolute;left:0;top:0;bottom:0;
  width:48px;padding:0;border:0;background:transparent;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;}
.snelmenu.dicht .snelmenu-greep{display:block;}
.snelmenu-lip{position:absolute;left:0;top:0;bottom:0;width:40px;display:flex;align-items:center;justify-content:center;}
.snelmenu-greep:active .snelmenu-lip{opacity:.72;}
/* De schermknoppen staan in een omhulsel (voor het indelen), maar tellen voor de opmaak als kinderen van de balk. */
.snelmenu-rij{display:contents;}
/* MEER: bij meer dan vijf gekozen de vijfde plek. Het paneel staat boven de balk, even breed, de knoppen van rechts
   af boven Meer (de rechterpadding is de breedte van «). */
.snelmenu-meer[hidden]{display:none;}
.snelmenu-meer-open{background:color-mix(in srgb, var(--groen) 12%, transparent);}
.snelmenu-meer-paneel{pointer-events:auto;position:absolute;left:0;right:0;bottom:calc(100% + 8px);
  display:flex;flex-wrap:wrap;justify-content:flex-end;padding:4px 28px 4px 4px;}
.snelmenu-meer-paneel[hidden]{display:none;}
/* Ruimte onder de inhoud, zodat de balk het laatste stuk van een pagina niet afdekt. */
.snelmenu-ruimte{height:96px;}
.snelmenu-ruimte[hidden]{display:none;}
/* Weg zolang je typt: anders ligt hij over het veld of het toetsenbord. */
body.snelmenu-weg .snelmenu{display:none;}
/* De keuze onder Mijn account: greep, vinkje, het icoon zoals in de balk, en de naam. */
.snelmenu-keuze-rij{flex-wrap:nowrap;justify-content:flex-start;}
.snelmenu-keuze-rij .vinkje{flex:1;margin:0;}
.snelmenu-keuze-rij .icoon-rij{width:26px;height:26px;}
.snelmenu-vast-rij{margin-top:12px;}
.snelmenu-keuze-fout{margin:8px 0 0;color:var(--fout);}
/* Mijn account: wat er nu in het snelmenu staat, in volgorde, als labels met hun icoon. */
.snelmenu-samenvatting{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none;}
.snelmenu-samenvatting li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);font-size:var(--tekst-l);color:var(--tekst);}
.snelmenu-samenvatting-icoon, .snelmenu-samenvatting li .icoon{flex:none;width:18px;height:18px;color:var(--groen);}

/* Een rij met een link erin (nummers): de link is de hele rij, zonder onderstreping. */
.nummer-rij{flex-wrap:nowrap;}
.nummer-rij .lijst-hoofd{flex:1;min-width:0;color:inherit;text-decoration:none;}

/* Bestanden als tegels (bestanden.py): de thumbnail vult de tegel, een badge voor filmpje of PDF. */
.bestanden{margin:18px 0 14px;}
.bestand-tegels{margin-top:6px;}
.bestand-tegel{padding:8px 8px 10px;justify-content:flex-start;cursor:pointer;}
.bestand-plaatje{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius-l);overflow:hidden;
  background:var(--creme-2);display:flex;align-items:center;justify-content:center;}
.bestand-plaatje img{width:100%;height:100%;object-fit:cover;display:block;}
.bestand-plaatje img.bestand-pagina{object-position:top;}  /* van een PDF de bovenkant: daar staat de titel */
.bestand-icoon{width:48px;height:48px;color:var(--groen);}
.bestand-icoon svg{width:100%;height:100%;}
.bestand-badge{position:absolute;right:6px;bottom:6px;padding:1px 7px;border-radius:var(--radius-pil);
  background:rgba(0,0,0,.6);color:#fff;font-size:var(--tekst-s);font-weight:600;}
.bestand-naam{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bestand-nieuw-form{display:contents;}
label.bestand-tegel{margin:0;}  /* niet de marge van een gewoon formulierlabel */
.bestand-tegel.lid-tegel-nieuw{justify-content:center;}
.bestand-tegel.bezig{opacity:.6;pointer-events:none;}
.bestand-tegel:focus-within{outline:2px solid var(--groen);outline-offset:2px;}
.bestand-voorbeeld img{display:block;width:100%;max-height:75vh;object-fit:contain;
  border-radius:var(--radius-l);background:var(--creme-2);}
.bestand-youtube{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;}
.bestand-youtube img{background:#000;}
.bestand-afspelen{position:absolute;top:calc(50% - 44px);left:calc(50% - 32px);width:64px;height:44px;
  border-radius:12px;background:rgba(0,0,0,.7);color:#fff;font-size:22px;display:flex;align-items:center;
  justify-content:center;pointer-events:none;}
.bestand-pdf{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;}
.bestand-pdf img{max-width:280px;border:var(--rand-dikte) solid var(--rand);}

/* Het bord (board.js): pedalen en kabels in een SVG. De maten staan in board.py. Slepen gaat
   met pointer events; alleen pedalen en aansluitingen vangen de aanraking, zodat je over de rest
   van het bord gewoon kunt scrollen. */
.bord{margin:6px 0 4px;}
.bord-svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;}
.bord-vlak{fill:var(--creme-2);stroke:var(--rand);stroke-width:3;}
.bord-pedaal{cursor:grab;touch-action:none;}
.bord-pedaal-sleept{cursor:grabbing;opacity:.85;}
.bord-alleen-kijken .bord-pedaal{cursor:pointer;touch-action:auto;}
.bord-pedaal-vlak{stroke:var(--groen);stroke-width:3;}
.bord-pedaal-vlak:not(.bord-met-kleur){fill:var(--card);}
.bord-pedaal-overig .bord-pedaal-vlak{stroke-dasharray:6 5;}
.bord-knop{fill:#2a2a2a;stroke:var(--groen);stroke-width:2;}
.bord-naad{stroke:rgba(0,0,0,.25);stroke-width:2;}
.bord-pedaal-naam{font-family:var(--display);font-size:20px;pointer-events:none;}
.bord-pedaal-naam:not(.bord-met-kleur){fill:var(--tekst);}
.bord-pedaal-soort{font-size:12px;letter-spacing:.02em;text-transform:uppercase;pointer-events:none;}
.bord-pedaal-soort:not(.bord-met-kleur){fill:var(--muted);}
.bord-kabel{fill:none;stroke:var(--groen);stroke-width:4;stroke-linecap:round;pointer-events:none;opacity:.85;}
.bord-kabel-nieuw{stroke-dasharray:8 6;opacity:1;}
.bord-poort{cursor:crosshair;touch-action:none;}
.bord-alleen-kijken .bord-poort{cursor:default;touch-action:auto;}
.bord-poort-raak{fill:transparent;}
.bord-poort-gat{fill:var(--card);stroke:var(--groen);stroke-width:3;}
.bord-poort-bezet .bord-poort-gat{fill:var(--groen);}
.bord-poort-naam{font-size:14px;fill:var(--tekst);paint-order:stroke;stroke:var(--card);stroke-width:4px;
  stroke-linejoin:round;pointer-events:none;}
/* De keten als onderschrift onder het bord: klein en licht, het bord zelf is de hoofdzaak. */
.bord-onderschrift{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 2px 0;
  font-size:var(--tekst-m);color:var(--muted);}
.bord-onderschrift-kop{font-weight:600;}
.bord-onderschrift .keten{margin:0;gap:4px;}
.bord-onderschrift .keten-schakel{min-height:24px;padding:0 8px;font-size:var(--tekst-m);}
.bord-onderschrift .muted,.bord-los{margin:0;}
.bord-los:empty{display:none;}
.bord-melding{min-height:1.2em;margin:4px 0;font-size:var(--tekst-m);color:var(--muted);}
.bord-melding-fout{color:var(--fout);}
.keten-los-kop{margin-left:10px;font-size:var(--tekst-m);color:var(--muted);}
.keten-los{border-style:dashed;}

.kleur-veld{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.kleur-aan{display:flex;align-items:center;gap:6px;margin:0;font-weight:normal;}
.kleur-veld input[type=color]{width:56px;height:36px;padding:2px;border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-m);background:var(--card);cursor:pointer;}
a.btn-icoon{text-decoration:none;}
.soort-keuzes{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));}
/* Een stamlijst onder Beheer (gearsoorten, instrumenten): greep, icoon, naam en rechts het potlood
   (en de prullenbak). Het potlood klapt het formulier onder de rij uit (app.js, data-uitklap). */
.beheer-rij{flex-wrap:wrap;}
.beheer-rij .lijst-hoofd{flex:1 1 0;}
.rij-formulier{flex-basis:100%;padding:4px 0 8px;}
.rij-formulier[hidden]{display:none;}
[data-uitklap][aria-expanded="true"]{background:var(--lichtgroen-zacht);border-color:var(--groen);}
.nieuw-instrument{display:block;padding:0;}
.nieuw-instrument > summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:10px 14px;}
.nieuw-instrument > summary::-webkit-details-marker{display:none;}
.nieuw-instrument[open] > summary .plus-rond{transform:rotate(45deg);}
.nieuw-instrument > form{padding:0 14px 12px;}
/* Wat er aan een gearsoort gekoppeld mag worden: vinkjes met het icoon, in kolommen. */
.koppel-keuzes{border:0;margin:14px 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px;}
.koppel-keuzes legend{font-weight:600;margin-bottom:6px;padding:0;}
.koppel-keuze{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;}
.koppel-keuze input{flex:none;width:18px;height:18px;}
.koppel-icoon{flex:none;width:22px;height:22px;color:var(--groen);}
.koppel-keuze:active{opacity:.72;}
.nieuwe-soort > summary{list-style:none;cursor:pointer;}
.nieuwe-soort > summary::-webkit-details-marker{display:none;}

.knop-apparaat{display:flex;align-items:center;gap:8px;}
.knop-apparaat svg{width:26px;height:26px;color:var(--groen);}

/* Setlists. */
.set-kop{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;}
.set-kop h2{margin:0;font-size:var(--tekst-3xl);}
.setlist{list-style:none;margin:0;padding:0;}
.setlist li{display:flex;gap:10px;align-items:flex-start;border-bottom:var(--rand-dikte) solid var(--rand-zacht);}
.setlist li:last-child{border-bottom:0;}
.setlist-positie{flex:none;width:28px;padding-top:10px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;}
.setlist-nummer{flex:1;display:flex;flex-direction:column;gap:1px;padding:8px 0;min-height:var(--knop-hoogte);
  color:var(--tekst);text-decoration:none;}
.setlist-nummer:active{opacity:.72;}
.setlist-nummer strong{font-size:var(--tekst-xl);}
.setlist-nummer small{color:var(--muted);font-size:var(--tekst-m);}
.setlist-nummer .setlist-jij{color:var(--groen);font-weight:600;}
.setlist-nummer .setlist-notitie{color:var(--waarschuwing);}
.setlist-pauze{margin:8px 0 0;padding:6px 10px;border-radius:var(--radius-m);background:var(--waarschuwing-bg);
  color:var(--waarschuwing);font-weight:600;text-align:center;}
.setlist-regels{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.setlist-regel{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:6px;align-items:center;}
.setlist-regel.is-pauze select{background:var(--waarschuwing-bg);font-weight:600;}
.setlist-regel .schuif{display:inline-flex;gap:4px;}
.h4-link{margin-left:8px;font-size:var(--tekst-s);text-transform:none;letter-spacing:0;font-weight:500;}

/* 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(--kop-bg);
    border:var(--rand-dikte) solid var(--kop-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(--kop-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;}
  .knop-regel.poort-regel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-bottom:8px;
    border-bottom:1px solid var(--rand);}
  .setlist-regel{grid-template-columns:minmax(0,1fr) auto;}
  .setlist-regel input[name=regel_notitie]{grid-column:1;}
  .setlist-regel .schuif{grid-column:2;grid-row:1 / span 2;flex-direction:column;}
}

/* MIDI: de sporen van een bestand, elk met een keuze waar het bij hoort (midi.py, 29-09-2026). */
.midi-spoor select{width:auto;min-width:40%;max-width:100%;margin:0;}
/* De speler (Meespelen, 29-09-2026): stand, afspeelknop, positie en tempo; per spoor een vinkje. */
/* Drie tegels naast elkaar: Eigen, Anderen, Zang — aan (groen) of uit (doorgestreept). */
.speler-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px;}
.speler-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;font:inherit;
  text-align:left;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);background:none;
  color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.speler-tegel strong{text-decoration:line-through;text-decoration-thickness:2px;}
.speler-tegel small{color:var(--muted);font-size:var(--tekst-s);}
.speler-tegel[aria-pressed=true]{border-color:var(--groen);background:var(--lichtgroen-zacht);color:var(--groen);}
.speler-tegel[aria-pressed=true] strong{text-decoration:none;}
.speler-tegel:active{opacity:.72;}
.speler-tegel:disabled{opacity:.4;cursor:default;}
.kop-knoppen{display:inline-flex;align-items:center;gap:4px;}
.kop-knoppen form{margin:0;}
/* Waardering: vijf sterren, zonder JavaScript. In de HTML van 5 naar 1, op het scherm omgedraaid; de gekozen
   ster en alles links ervan (~ in de HTML = rechts ervan) kleurt. */
.sterren{display:inline-flex;flex-direction:row-reverse;gap:2px;margin:4px 0 8px;}
.sterren input{position:absolute;opacity:0;width:1px;height:1px;}
.sterren label{font-size:32px;line-height:1;color:var(--rand);cursor:pointer;padding:2px;margin:0;}
.sterren input:checked ~ label{color:#D99A00;}
.sterren input:focus-visible + label{outline:2px solid var(--groen);border-radius:4px;}
.sterren-klein{color:#D99A00;font-size:var(--tekst-s);letter-spacing:1px;}
.speler-knoppen{display:flex;align-items:center;gap:14px;margin:16px 0 8px;}
.speler-tijd{font-variant-numeric:tabular-nums;color:var(--muted);}
.speler input[type=range]{width:100%;accent-color:var(--groen);margin:6px 0 14px;}
.speler-spoor{cursor:pointer;}
.speler-spoor input{flex:none;width:22px;height:22px;accent-color:var(--groen);}
/* Playmodus (Frank 29-09-2026): eigen pagina zonder kop en menu. Bovenin een smalle balk, de bladmuziek over de
   volle breedte, onderin de balk met afspelen en de tegel Zang. Sinds 30-09 een kolom over de hoogte van het scherm:
   kop, het vlak met bladmuziek of tekst (dat alleen scrollt), balk. Zo valt er nooit iets achter de balk, hoe hoog
   die ook wordt (maatteller, sectiestrook, een smal scherm waarop hij over twee regels loopt). */
body.spelen{margin:0;background:var(--creme);color:var(--tekst);overflow:hidden;}
.spelen-scherm{display:flex;flex-direction:column;height:100vh;height:100dvh;}
.spelen-kop{position:relative;flex:none;z-index:5;display:flex;align-items:center;gap:8px;padding:6px 10px;
  padding-top:max(6px, env(safe-area-inset-top));background:var(--card);border-bottom:var(--rand-dikte) solid var(--rand);}
.spelen-titel{display:flex;flex-direction:column;min-width:0;flex:1;}
.spelen-titel strong,.spelen-titel small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.spelen-titel small{color:var(--muted);font-size:var(--tekst-s);}
.spelen-knop{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  font-size:24px;line-height:1;background:none;border:0;color:var(--tekst);text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.spelen-knop:active{opacity:.72;}
.spelen-bladen{display:flex;gap:6px;overflow-x:auto;flex:0 1 auto;}
.spelen-blad-knop{flex:none;padding:6px 10px;font:inherit;font-size:var(--tekst-s);border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-l);background:none;color:var(--muted);cursor:pointer;}
.spelen-blad-knop[aria-selected=true]{border-color:var(--groen);background:var(--lichtgroen-zacht);color:var(--groen);}
.spelen-blad{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:35vh;}   /* ruimte onder het laatste systeem, zodat ook dat naar boven kan schuiven */
.spelen-blad img{display:block;width:100%;max-width:1100px;height:auto;margin:0 auto;}
.spelen-leeg{padding:40px 20px;text-align:center;color:var(--muted);}
/* Jouw klank in de playmodus (klank.js): Board of multi-effect, de stand die nu geldt en de volgende wissel. */
.spelen-klank{flex:none;display:flex;align-items:flex-start;gap:10px;padding:6px 10px;background:var(--card);
  border-bottom:var(--rand-dikte) solid var(--rand);transition:background .2s;}
.spelen-klank-keuze{display:flex;flex-direction:column;gap:4px;flex:none;}
.spelen-klank-inhoud{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.klank-nu,.klank-volgende{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.klank-stand{font-size:var(--tekst-l);margin-right:4px;}
.klank-stil{color:var(--muted);font-size:var(--tekst-s);}
.klank-knoppen{color:var(--muted);font-size:var(--tekst-s);line-height:1.4;}
.klank-volgende{padding:4px 8px;border-radius:var(--radius-m);border-left:4px solid var(--rand);color:var(--muted);
  font-size:var(--tekst-s);}
.klank-volgende .pedaal-blokje{min-height:24px;}
.klank-komt{border-left-color:var(--waarschuwing);background:var(--waarschuwing-bg);color:var(--tekst);font-weight:700;
  animation:klank-knipper .9s ease-in-out infinite alternate;}
.klank-wissel{background:var(--waarschuwing-bg);}
@keyframes klank-knipper{from{opacity:1;}to{opacity:.6;}}
@media (prefers-reduced-motion: reduce){.klank-komt{animation:none;}}
.spelen-songtekst{max-width:760px;margin:0 auto;padding:14px 16px 0;}
.spelen-songtekst .songtekst{font-size:var(--tekst-3xl);}
.spelen-balk{position:relative;flex:none;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:8px 12px;padding-bottom:max(8px, env(safe-area-inset-bottom));background:var(--card);
  border-top:var(--rand-dikte) solid var(--rand);box-shadow:0 -2px 8px rgba(0,0,0,.06);}
.spelen-speel{flex:none;width:auto;min-width:0;margin:0;padding-left:16px;padding-right:16px;}
.spelen-positie{flex:1 1 100%;order:1;display:flex;align-items:flex-end;gap:8px;min-width:60px;}   /* eigen regel, onderaan de balk */
.spelen-positie input{flex:1;min-width:0;width:auto;accent-color:var(--groen);margin:0;}
/* Secties in de tijdsbalk (Frank 30-09-2026): een strook boven de schuifbalk, elk vak zo breed als de sectie duurt;
   tikken springt naar het begin. De strook staat 8px ingesprongen, zo ver als de knop van de schuifbalk, zodat
   het begin van een vak boven dezelfde tijd staat. Positie en breedte zet spelen.js (CSSOM, geen inline stijl). */
.spelen-tijdlijn{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.spelen-tijdlijn input{width:100%;}
.spelen-secties{position:relative;height:30px;margin:0 8px;}
.spelen-sectie{position:absolute;top:0;bottom:0;min-width:0;padding:0 4px;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;font:inherit;font-size:var(--tekst-xs);line-height:28px;text-align:left;cursor:pointer;
  border:1px solid var(--card);border-radius:var(--radius-xs);background:var(--lichtgroen-zacht);color:var(--groen);
  -webkit-tap-highlight-color:transparent;}
.spelen-sectie:nth-child(even){background:var(--lichtgroen);}
.spelen-sectie[aria-current]{background:var(--groen);color:var(--op-accent);font-weight:700;}
.spelen-sectie:active{opacity:.72;}
.spelen-zang{flex:none;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;}
.spelen-status{flex-basis:100%;margin:0;font-size:var(--tekst-s);color:var(--muted);}
.spelen-status:empty{display:none;}
.spelen-positie .speler-tijd{white-space:nowrap;font-size:var(--tekst-s);}
.spelen-zang small{display:none;}

/* ---- Deel de app (/delen) en de installatiepagina (/installeren), 29-09-2026 ----
   Overgenomen uit de receptenapp (recipe-app/static/css/style.css), met de kleuren van de band-app. */
.install-qr{text-align:center;margin:10px 0 4px;}
.install-qr img{background:#fff;padding:10px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);max-width:100%;height:auto;}
.share-steps{margin:8px 0 0;padding-left:1.2rem;line-height:1.65;}
.share-steps li{margin-bottom:4px;}
/* De link is niet selecteerbaar: kopiëren gaat via de knop ernaast. */
.share-link{display:block;margin:0;font-family:monospace;font-size:var(--tekst-l);word-break:break-all;color:var(--groen);
  background:var(--creme-2);padding:10px 12px;border-radius:var(--radius-m);border:var(--rand-dikte) solid var(--rand);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.share-link-row{display:flex;align-items:stretch;gap:8px;margin-top:6px;}
.share-link-row .share-link{flex:1 1 auto;min-width:0;}
.copy-btn{flex:none;width:var(--knop-hoogte);min-height:var(--knop-hoogte);display:flex;align-items:center;justify-content:center;
  background:none;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);color:var(--groen);cursor:pointer;}
.copy-btn:active{opacity:.72;}
.copy-btn .icon-check{display:none;}
.copy-btn.copied{border-color:var(--groen);}
.copy-btn.copied .icon-copy{display:none;}
.copy-btn.copied .icon-check{display:block;}
.copy-note{min-height:1.1em;margin:6px 0 0;font-size:var(--tekst-m);font-weight:600;color:var(--groen);}
.onzichtbaar-veld{position:fixed;opacity:0;}

body.pagina-installeren{min-height:100vh;margin:0;background:var(--lichtgroen-zacht);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:32px 20px;color:var(--tekst);box-sizing:border-box;}
.pagina-installeren h1{font-family:var(--display);font-size:var(--tekst-6xl);font-weight:400;letter-spacing:.04em;
  margin:0 0 10px;text-align:center;color:var(--groen);}
.pagina-installeren p{font-size:var(--tekst-xl);line-height:1.6;text-align:center;color:var(--muted);max-width:340px;margin:0 auto 24px;}
.pagina-installeren .logo{display:block;width:96px;height:96px;margin:0 auto 24px;border-radius:22px;box-shadow:var(--schaduw-3);}
.pagina-installeren a:not(.btn-install){color:var(--groen);font-weight:600;text-decoration:none;}
.pagina-installeren .steps{background:var(--card);border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-xl);
  padding:24px 20px;max-width:380px;width:100%;margin:0 auto 24px;box-shadow:var(--schaduw-2);box-sizing:border-box;}
.pagina-installeren .steps h2{font-family:var(--display);font-size:var(--tekst-3xl);font-weight:400;letter-spacing:.06em;
  color:var(--groen);margin:0 0 16px;}
.pagina-installeren .step{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;}
.pagina-installeren .step:last-child{margin-bottom:0;}
.pagina-installeren .step-num{flex-shrink:0;width:28px;height:28px;border-radius:var(--radius-rond);background:var(--groen);
  color:var(--op-accent);font-weight:700;font-size:var(--tekst-l);display:flex;align-items:center;justify-content:center;}
.pagina-installeren .step-text{font-size:var(--tekst-xl);line-height:1.4;color:var(--tekst);padding-top:4px;}
.pagina-installeren .step-let-op{display:block;margin-top:2px;font-size:var(--tekst-l);color:var(--muted);}
.pagina-installeren .step-let-op strong{color:var(--groen);}
.pagina-installeren .btn-install{display:none;margin:0 auto 20px;background:var(--groen);color:var(--op-accent);border:none;
  border-radius:var(--radius-l);padding:16px 32px;font-size:var(--tekst-2xl);font-weight:700;cursor:pointer;width:100%;
  max-width:380px;font-family:inherit;box-sizing:border-box;}
.pagina-installeren a.btn-install{display:block;text-align:center;text-decoration:none;}
.pagina-installeren .btn-install:active{opacity:.72;}
.pagina-installeren .platform{display:none;}
.pagina-installeren .platform.active{display:block;}
.pagina-installeren .zonder-knop{display:none;}
.pagina-installeren .geen-knop .met-knop{display:none;}
.pagina-installeren .geen-knop .zonder-knop{display:block;}
/* Op een computer: alleen de QR-code, geen uitleg over installeren. */
.pagina-installeren.op-computer .intro-installeren,.pagina-installeren.op-computer .btn-install{display:none !important;}
.pagina-installeren .al-geinstalleerd{display:none;}
.pagina-installeren.app-al-er .al-geinstalleerd{display:block;}
.pagina-installeren.app-al-er .intro-installeren,.pagina-installeren.app-al-er .btn-install,
.pagina-installeren.app-al-er .platform{display:none;}
.pagina-installeren .note{font-size:var(--tekst-m);}
.pagina-installeren .inline-icon{display:inline-flex;vertical-align:-4px;}
.pagina-installeren .inline-icon svg{width:var(--icoon-m);height:var(--icoon-m);stroke:var(--groen);}
.pagina-installeren .inline-icon.icon-ellipsis svg{fill:var(--groen);stroke:none;}
.pagina-installeren .inline-icon.icon-ellipsis{vertical-align:-5px;}
.pagina-installeren .step-let-op .inline-icon svg{width:var(--icoon-s);height:var(--icoon-s);}
.pagina-installeren #installing-content,.pagina-installeren #success-content{display:none;text-align:center;}
.pagina-installeren #installing-content.active,.pagina-installeren #success-content.active{display:block;}
.pagina-installeren .uitweg{display:none;}
.pagina-installeren #installing-content.duurt-lang .bezig{display:none;}
.pagina-installeren #installing-content.duurt-lang .uitweg{display:block;}
.pagina-installeren .uitweg .btn-install{display:block;}
.pagina-installeren .spinner{width:64px;height:64px;margin:0 auto 28px;border:6px solid var(--rand);border-top-color:var(--groen);
  border-radius:var(--radius-rond);animation:installeren-draai .9s linear infinite;}
@keyframes installeren-draai{to{transform:rotate(360deg);}}
.pagina-installeren .voortgang{width:240px;max-width:80vw;height:8px;margin:0 auto 20px;background:var(--rand);border-radius:var(--radius-pil);overflow:hidden;}
.pagina-installeren .voortgang-balk{width:0;height:100%;background:var(--groen);border-radius:var(--radius-pil);transition:width .25s linear;}
.pagina-installeren .check{width:88px;height:88px;margin:0 auto 24px;border-radius:var(--radius-rond);background:var(--groen);
  display:flex;align-items:center;justify-content:center;}
.pagina-installeren .check svg{width:48px;height:48px;stroke:var(--op-accent);}
.veld-smal{max-width:120px;}
/* Maatteller in de playmodus: over de volle breedte van de balk, groot genoeg om vanaf een standaard te lezen. */
.spelen-maat{flex-basis:100%;order:-1;margin:0;font-family:var(--display);font-size:var(--tekst-4xl);letter-spacing:.04em;
  color:var(--groen);line-height:1.1;}
/* Markering van de huidige maat op de bladmuziek (playmodus), en de genummerde kaders op het scherm Maten. De positie
   zet JavaScript (element.style, geen inline stijl in de HTML: CSP). */
.spelen-pagina,.maten-pagina{position:relative;max-width:1100px;margin:0 auto;}
.spelen-pagina img,.maten-pagina img{display:block;width:100%;height:auto;}
.maat-markering{position:absolute;background:rgba(var(--groen-rgb),.16);border:2px solid rgba(var(--groen-rgb),.55);
  border-radius:4px;pointer-events:none;transition:left .12s ease-out,top .12s ease-out,width .12s ease-out;}
.maten-pagina{margin-bottom:12px;border:var(--rand-dikte) solid var(--rand);}
.maat-kader{position:absolute;border:1.5px solid rgba(var(--groen-rgb),.6);background:rgba(var(--groen-rgb),.06);pointer-events:none;}
.maat-kader span{position:absolute;left:2px;top:1px;font-size:10px;line-height:1;font-weight:700;color:var(--groen);
  background:rgba(255,255,255,.85);padding:1px 2px;border-radius:2px;}
.maat-kader-rust{border-color:#D99A00;background:rgba(217,154,0,.12);}
.maat-kader-rust span{color:#8a6200;}
.maat-rusten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0;}
.maat-rust{display:flex;flex-direction:column;gap:6px;padding:8px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);}
.maat-rust img{width:100%;height:auto;background:#fff;}
.maat-rust input{display:inline-block;width:80px;margin:0 4px;}
.maat-rust .vinkje{min-height:0;margin:0;}
.maat-rust .vinkje input{width:20px;margin:0;}
.maat-rust-uit{border-style:dashed;}                 /* met de hand geen rust: de kaart blijft, om terug te draaien */
.mk-rust-keuze{display:inline-flex;align-items:center;gap:4px;margin:2px 0 0;font-size:var(--tekst-s);font-weight:400;color:inherit;}
.mk-rust-keuze input{width:16px;height:16px;margin:0;accent-color:var(--groen);}

/* De Maatkaart (Frank 04-10-2026, maten.kaart): een rij per maat, de bronnen naast elkaar. Een streep boven de rij
   waar een sectie begint; een bron zonder maat grijs; iets wat niet klopt (rust zonder aantal, twee secties) in de
   foutkleur. De eerste kolom blijft staan bij horizontaal scrollen. */
.maatkaart td,.maatkaart th{white-space:nowrap;}
.maatkaart th:first-child,.maatkaart td:first-child{position:sticky;left:0;z-index:1;background:var(--card);
  box-shadow:inset -2px 0 0 var(--groen);}   /* één doorlopende lijn na de kolom Maat, in elke rij */
.maatkaart th:first-child{background:var(--groen);}
.maatkaart tr.mk-sectiebegin td{border-top:2px solid var(--groen);}
.maatkaart tr.mk-aftel td{color:var(--muted);font-style:italic;}
.maatkaart .mk-leeg{color:var(--muted);background:var(--neutraal-bg);}
.maatkaart .mk-fout{background:var(--fout-bg);color:var(--fout);}
.maatkaart .mk-rust{background:var(--waarschuwing-bg);}
.maatkaart .mk-door{color:var(--muted);font-size:var(--tekst-m);}
.maatkaart .mk-nr{font-variant-numeric:tabular-nums;font-weight:600;}
.maatkaart .mk-blad img{display:block;max-height:44px;max-width:200px;width:auto;background:#fff;border-radius:2px;}
.maatkaart .mk-tekst{white-space:normal;min-width:200px;}
.maatkaart .badge{margin-left:4px;}
.mk-kop-link{color:var(--op-accent);font-weight:400;font-size:var(--tekst-m);margin-left:6px;}
.mk-keuze{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0;}
.mk-keuze label{margin:0;}
.mk-keuze select{width:auto;flex:1 1 200px;min-width:0;max-width:100%;}
.mk-signalen{margin:4px 0 10px;padding-left:20px;font-size:var(--tekst-l);line-height:1.5;}
.mk-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;}
.mk-filter .badge{text-decoration:none;}
.mk-filter .badge:active{opacity:.72;}
.maatkaart td.mk-open{outline:3px solid var(--fout);outline-offset:-3px;}
.mk-rust-veld{display:flex;align-items:center;gap:4px;margin:4px 0 0;font-size:var(--tekst-m);color:inherit;font-weight:400;}
.mk-rust-veld input{width:64px;margin:0;padding:4px 6px;}
.mk-open-melding a{white-space:nowrap;}
/* De Maatkaart per sectie (Frank 04-10-2026): een kopregel per sectie die uitklapt (maatkaart.js), ♪ = het
   MIDI-spoor van de partij speelt, de maat die klinkt gekleurd, en de speelbalk vast onderaan. */
.maatkaart .mk-kopregel td{background:var(--creme-2);border-top:2px solid var(--groen);cursor:pointer;}
.maatkaart .mk-kopregel td.maat{white-space:nowrap;color:var(--groen);font-weight:600;}
.mk-aandacht-stip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;
  border-radius:var(--radius-rond);background:var(--fout-bg);color:var(--fout);font-size:var(--tekst-s);font-weight:700;}
.maatkaart .mk-kopregel:active{opacity:.72;}
.maatkaart .mk-kopregel td:first-child{background:var(--creme-2);}
.mk-klap{font:inherit;font-weight:600;font-variant-numeric:tabular-nums;background:none;border:none;color:var(--groen);
  padding:4px 2px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.mk-klap{min-width:32px;min-height:32px;justify-content:center;border-radius:var(--radius-rond);}
.mk-klap:active{opacity:.72;}
.mk-klap::before{content:'›';display:inline-block;transition:transform .15s;font-size:var(--tekst-3xl);line-height:1;}
.mk-klap[aria-expanded=true]::before{transform:rotate(90deg);}
.mk-speel{font:inherit;border:var(--rand-dikte) solid var(--groen);background:var(--card);color:var(--groen);
  border-radius:var(--radius-rond);width:30px;height:30px;line-height:1;cursor:pointer;margin-right:4px;}
.mk-speel:active{opacity:.72;}
.mk-speel-klein{width:24px;height:24px;font-size:var(--tekst-s);}
.mk-noot{color:var(--groen);font-weight:700;margin-left:4px;}
.mk-gedeeld{color:var(--waarschuwing);margin-left:4px;}
.mk-badge-fout{background:var(--fout-bg);color:var(--fout);}
.maatkaart tr.mk-nu td{background:var(--lichtgroen-zacht);}
.maatkaart td.mk-fout .mk-noot{color:var(--fout);}
.maatkaart td.mk-rust.mk-fout{background:var(--fout-bg);}   /* rust waar de MIDI speelt: rood wint van geel */
.mk-alles{display:flex;gap:8px;margin:0 0 8px;}
.mk-opvalt summary{cursor:pointer;font-weight:600;margin:6px 0;}
.mk-balk{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:16px;
  padding:8px 12px;background:var(--card);border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);
  box-shadow:var(--schaduw-2);}
.mk-balk .mk-balk-speel{width:auto;flex:none;min-width:110px;}
.mk-balk .mk-balk-positie{flex:1 1 120px;min-width:0;margin:0;accent-color:var(--groen);}
.mk-balk-meer{flex:none;}
.mk-balk-meer summary{cursor:pointer;font-size:var(--tekst-m);color:var(--muted);}
.mk-balk-meer[open]{flex-basis:100%;}
.mk-balk-tegels{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;}
.mk-balk-tegels .speler-tegel{padding:6px 10px;}
.mk-balk-tempo{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--tekst-m);}
.mk-balk-tempo input{width:140px;accent-color:var(--groen);}
.mk-balk-status{flex-basis:100%;margin:0;}
.mk-balk-status:empty{display:none;}
/* De Controle op de Maatkaart (Frank 09-10-2026, controle.py): links de vijf stappen, rechts het werkscherm van de
   gekozen stap met de tabel eronder. Op een smal scherm staan de stappen als strook bovenaan. De pagina is breder
   dan .smal-breed, want naast de stappen moet de tabel nog passen. */
.mk-breed{max-width:1400px;margin-left:auto;margin-right:auto;}
.mk-lagen{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start;}
.mk-zijbalk{position:sticky;top:12px;padding:12px;}
.mk-zijbalk h4{margin:0 0 8px;}
.mk-zijbalk h4 .muted{font-weight:400;margin-left:4px;}
.mk-stappen{list-style:none;margin:0;padding:0;}
.mk-stap{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-l);text-decoration:none;color:inherit;}
.mk-stap:active{opacity:.72;}
.mk-stap-actief{background:var(--lichtgroen-zacht);box-shadow:inset 3px 0 0 var(--groen);}
.mk-stap-tekst{display:flex;flex-direction:column;min-width:0;}
.mk-stap-naam{font-weight:600;color:var(--groen);}
.mk-stap-tekst small{color:var(--muted);font-size:var(--tekst-s);}
.mk-overzicht{margin-top:6px;border-top:var(--rand-dikte) solid var(--rand);border-radius:0;padding-top:10px;}
.mk-stap-uitkomst{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:var(--radius-rond);font-size:var(--tekst-m);font-weight:700;}
.mk-uitkomst-klaar{background:var(--groen);color:var(--op-accent);}
.mk-uitkomst-ok{background:var(--ok-bg);color:var(--ok);}
.mk-uitkomst-fout{background:var(--fout-bg);color:var(--fout);}
.mk-uitkomst-niet{background:var(--neutraal-bg);color:var(--neutraal);}
.mk-werk{min-width:0;}
.mk-paneel h3{margin:0 0 4px;}
.mk-paneel h4{margin:14px 0 4px;}
.mk-doen{margin:4px 0 8px;padding-left:20px;line-height:1.55;font-size:var(--tekst-l);}
.mk-fouten li{color:var(--fout);}
.mk-waarschuwingen li{color:var(--waarschuwing);}
.mk-afvinken label{margin-top:10px;}
.mk-ref{color:var(--op-accent);font-weight:400;opacity:.85;}
@media (max-width:860px){
  .mk-lagen{grid-template-columns:minmax(0,1fr);}
  .mk-zijbalk{position:static;}
  .mk-zijbalk h4{display:none;}
  .mk-zijbalk{display:flex;gap:4px;overflow-x:auto;padding:6px;}
  .mk-stappen{display:flex;gap:4px;}
  .mk-stap{flex-direction:column;gap:4px;min-width:76px;text-align:center;padding:6px 4px;}
  .mk-stap-tekst small{display:none;}
  .mk-stap-naam{font-size:var(--tekst-s);}
  .mk-overzicht{margin-top:0;border-top:none;padding-top:6px;}
  .mk-stap-actief{box-shadow:inset 0 -3px 0 var(--groen);}
}
/* De hele partij rechts (Frank 09-10-2026, maatkaart.js): de Maatkaart gebruikt de volle breedte, in drie kolommen —
   stappen, werkscherm met tabel, partij. Het partijpaneel scrolt zelf en blijft naast de tabel staan. Op een kleiner
   scherm staat de partij onder het werkscherm (met een eigen scrollvak), op de telefoon alles onder elkaar. */
.mk-breed{max-width:none;}
.mk-lagen{grid-template-columns:230px minmax(0,1fr) minmax(320px,.75fr);}
.mk-partij{position:sticky;top:12px;max-height:calc(100vh - 110px);overflow-y:auto;padding:12px;}
.mk-partij-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;}
.mk-partij-kop h4{margin:0;}
.mk-partij-keuze{display:flex;flex-wrap:wrap;gap:4px;}
.mk-partij-keuze button{font:inherit;font-size:var(--tekst-s);border:none;cursor:pointer;}
.mk-partij-keuze button:active{opacity:.72;}
.mk-pk-pagina{position:relative;margin-bottom:10px;border:var(--rand-dikte) solid var(--rand);background:#fff;}
.mk-pk-pagina img{display:block;width:100%;height:auto;}
.mk-pk-kader{position:absolute;margin:0;padding:0;border:0;background:transparent;border-radius:3px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.mk-pk-kader:hover{background:rgba(var(--groen-rgb),.08);}
.mk-pk-kader:active{opacity:.72;}
.mk-pk-sectie{background:rgba(var(--groen-rgb),.15);}
.mk-pk-nu{background:rgba(var(--groen-rgb),.3);outline:2px solid rgba(var(--groen-rgb),.85);}
/* Rechts de tabs Partij en Songtekst; in de songtekst kleurt het blok van de sectie en de regel van de maat mee. */
.mk-rechts-tabs{display:flex;gap:4px;margin:0 0 10px;border-bottom:var(--rand-dikte) solid var(--rand);}
.mk-rechts-tab{font:inherit;font-weight:600;background:none;border:none;padding:6px 12px;color:var(--muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;}
.mk-rechts-tab[aria-selected=true]{color:var(--groen);border-bottom-color:var(--groen);}
.mk-rechts-tab:active{opacity:.72;}
.mk-tekst-vak .st-sectie{border-radius:var(--radius-l);padding:4px 8px;margin:0 -8px 6px;}
.mk-tekst-vak .st-regel[data-van]{cursor:pointer;border-radius:4px;}
.mk-tekst-vak .st-regel[data-van]:active{opacity:.72;}
.mk-st-sectie{background:rgba(var(--groen-rgb),.08);box-shadow:inset 3px 0 0 var(--groen);}
.mk-st-nu{background:rgba(var(--groen-rgb),.22);}
@media (max-width:1300px){
  .mk-lagen{grid-template-columns:230px minmax(0,1fr);}
  .mk-partij{grid-column:2;position:static;max-height:75vh;}
}
@media (max-width:860px){
  .mk-lagen{grid-template-columns:minmax(0,1fr);}
  .mk-partij{grid-column:auto;}
}

/* ===========================================================
   Thema's (Frank 30-09-2026, thema.py)
   Elk account kiest een thema onder Mijn account; base.html zet het als data-thema op <html>.
   Het MAW-thema is :root hierboven en heeft hier geen blok; het standaardthema is sinds 15-10-2026
   VandePas Solutions (vdps, thema.py). Een thema zet ALLEEN tokens, plus een handvol eigen regels
   voor wat een decennium herkenbaar maakt (gloed, streep, schaduw).

   De selector is [data-thema=…] en niet :root[…]: zo kleurt dezelfde set ook een voorbeeldtegel
   op het accountscherm. Daarom zet elk blok ook de tokens die in :root van een ander token
   afgeleid zijn (--card, --kop-*, --neutraal-bg, de schaduwen): een afgeleide wordt bij :root
   uitgerekend en erft als vaste waarde, dus in een tegel zou anders de MAW-waarde blijven staan.

   Contrast: tekst en labels minstens 4,5:1, net als MAW (nagerekend 30-09-2026).
   =========================================================== */

/* ---- VandePas Solutions: de huisstijl van het bedrijf en het standaardthema (Frank 15-10-2026). Zwart, wit en
   grijs, zonder accentkleur: een antraciet kop zoals het app-icoon en het opstartscherm, witte kaarten op lichtgrijs, en
   de letter van het woordmerk (Montserrat) voor koppen en de naam van de band. Alleen de statuskleuren hebben kleur.
   Het zet ook de vormen en de hand van de iconen terug, want in een voorbeeldtegel erft het anders die van het
   thema eromheen. ---- */
[data-thema="vdps"]{
  color-scheme:light;
  --groen:#222222;        --groen-rgb:34,34,34;
  --groen-diep:#000000;
  --groen-zacht:#8C8C8C;
  --lichtgroen:#E6E6E6;
  --lichtgroen-diep:#D9D9D9;
  --lichtgroen-zacht:#EFEFEF;
  --goud-ster:#BDBDBD;
  --creme:#F5F5F5;  --creme-2:#EBEBEB;  --card:#FFFFFF;
  --tekst:#1E1E1E;  --muted:#5E5E5E;    --placeholder:#A6A6A6;
  --rand:#DCDCDC;   --rand-zacht:#EBEBEB;
  --op-accent:#FFFFFF; --op-fel:#1E1E1E;
  --ok-bg:#E5F0E3;            --ok:#2F6A2B;
  --waarschuwing-bg:#F6EFD9;  --waarschuwing:#765B14;
  --fout-bg:#F6E2DF;          --fout:#A2352A;
  --neutraal-bg:#EBEBEB;      --neutraal:#5E5E5E;
  --gevaar:#C0392B; --gevaar-diep:#A5301F;
  --schaduw-rgb:0,0,0; --overlay-rgb:20,20,20;
  --schaduw-1:0 1px 4px rgba(0,0,0,.10);
  --schaduw-2:0 4px 16px rgba(0,0,0,.05); --schaduw-3:0 8px 22px rgba(0,0,0,.10);
  --schaduw-4:0 18px 44px -14px rgba(20,20,20,.45);
  --ring-focus:0 0 0 3px rgba(34,34,34,.18);
  --kop-bg:#222222; --kop-merk:#F2F2F2; --kop-tekst:#BDBDBD; --kop-hover:#333333; --kop-rand:#3A3A3A;
  --kop-knop:#F2F2F2; --kop-knop-tekst:#222222;
  --kop-streep:none; --kop-streep-hoogte:0px;
  --radius-xs:4px; --radius-s:6px; --radius-m:8px; --radius-l:10px; --radius-xl:14px;
  --display:'Montserrat',Helvetica,Arial,sans-serif;
  --script:'Montserrat',Helvetica,Arial,sans-serif;
  /* Iconen: een rustige lijn met een lichtgrijs vlak. */
  --icoon-lijn:3; --icoon-uiteinde:round; --icoon-hoek:round;
  --icoon-vlak:rgba(34,34,34,.07); --icoon-filter:none; --icoon-draai:none;
}
/* Montserrat is breder en lichter dan Bebas Neue: koppen vet en zonder extra spatiëring, de titel iets kleiner. */
[data-thema="vdps"] h1, [data-thema="vdps"] h2, [data-thema="vdps"] .cat-tile-label, [data-thema="vdps"] .lid-naam,
[data-thema="vdps"] .volgende-optreden strong, [data-thema="vdps"] .thema-proef-titel{font-weight:700;letter-spacing:-.01em;}
[data-thema="vdps"] h1{font-size:var(--tekst-5xl);}
[data-thema="vdps"] .brand, [data-thema="vdps"] .thema-proef-merk, [data-thema="vdps"] .opstart-naam{font-weight:600;letter-spacing:.01em;}

/* ---- 70's: groovy. Warm papier, mosterd, oranje en bruin; ronde vormen en de drie strepen. ---- */
[data-thema="70s"]{
  color-scheme:light;
  --groen:#A6431A;        --groen-rgb:166,67,26;
  --groen-diep:#843414;
  --groen-zacht:#B98A62;
  --lichtgroen:#F3D9A4;
  --lichtgroen-diep:#EBC57E;
  --lichtgroen-zacht:#F8E6C2;
  --goud-ster:#E2A33A;
  --creme:#FBF1DE;  --creme-2:#F3E2C2;  --card:#FFF9EE;
  --tekst:#3A2314;  --muted:#7A5539;    --placeholder:#BFA385;
  --rand:#E6CFA8;   --rand-zacht:#EFDFC3;
  --op-accent:#FFF9EE; --op-fel:#3A2314;
  --ok-bg:#EDEFD0;            --ok:#56601A;
  --waarschuwing-bg:#F8E4BA;  --waarschuwing:#7A4F08;
  --fout-bg:#F7DDCF;          --fout:#973616;
  --neutraal-bg:#F3E2C2;      --neutraal:#6E5540;
  --gevaar:#B3321B; --gevaar-diep:#8F2512;
  --schaduw-rgb:166,67,26; --overlay-rgb:58,35,20;
  --schaduw-2:0 4px 16px rgba(166,67,26,.08); --schaduw-3:0 8px 22px rgba(166,67,26,.14);
  --ring-focus:0 0 0 3px rgba(166,67,26,.22);
  --kop-bg:#F3D9A4; --kop-merk:#8A3712; --kop-tekst:#6B4529; --kop-hover:#EBC57E; --kop-rand:#E6CFA8;
  --kop-knop:#A6431A; --kop-knop-tekst:#FFF9EE;
  --kop-streep:linear-gradient(#E2A33A 0 33.3%,#D4691E 33.3% 66.6%,#8A3712 66.6%); --kop-streep-hoogte:12px;
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-xl:22px;
  --display:'Shrikhand',Georgia,serif;
  --script:'Shrikhand',Georgia,serif;
  /* Iconen: dik en rond, met een verschoven schaduw in mosterd; vlakken in zacht mosterd. */
  --icoon-lijn:5; --icoon-vlak:rgba(226,163,58,.35); --icoon-filter:drop-shadow(2px 2px 0 #E2A33A);
}
[data-thema="70s"] h1, [data-thema="70s"] h2, [data-thema="70s"] .cat-tile-label{letter-spacing:0;}

/* ---- 80's: neon. Nacht-paars, magenta en cyaan met gloed; de zonsondergang onder de kop. ---- */
[data-thema="80s"]{
  color-scheme:dark;
  --groen:#FF3D97;        --groen-rgb:255,61,151;
  --groen-diep:#FF6FB1;
  --groen-zacht:#8F6BC0;
  --lichtgroen:#241046;
  --lichtgroen-diep:#34196A;
  --lichtgroen-zacht:#2E1352;
  --goud-ster:#2DE2F0;
  --creme:#120822;  --creme-2:#1C0F35;  --card:#190C2E;
  --tekst:#F4ECFF;  --muted:#B9A6D9;    --placeholder:#6E5A92;
  --rand:#3B2566;   --rand-zacht:#2A1850;
  --op-accent:#120822; --op-fel:#120822;
  --ok-bg:#0F3328;            --ok:#6DF2B4;
  --waarschuwing-bg:#3A2A08;  --waarschuwing:#FFD25E;
  --fout-bg:#3F0E22;          --fout:#FF8499;
  --neutraal-bg:#241641;      --neutraal:#B9A6D9;
  --gevaar:#FF4F6E; --gevaar-diep:#FF7A90;
  --schaduw-rgb:255,61,151; --overlay-rgb:0,0,0;
  --schaduw-1:0 1px 4px rgba(0,0,0,.5);
  --schaduw-2:0 0 14px rgba(255,61,151,.12); --schaduw-3:0 0 22px rgba(255,61,151,.28);
  --schaduw-4:0 18px 44px -14px rgba(0,0,0,.8);
  --ring-focus:0 0 0 3px rgba(45,226,240,.35);
  --kop-bg:#0B0417; --kop-merk:#2DE2F0; --kop-tekst:#C9B7E8; --kop-hover:#241046; --kop-rand:#2A1850;
  --kop-knop:#FF3D97; --kop-knop-tekst:#120822;
  --kop-streep:linear-gradient(90deg,#FF3D97,#FF8A3D 50%,#2DE2F0); --kop-streep-hoogte:3px;
  --display:'Orbitron',Impact,sans-serif;
  --script:'Monoton',Impact,sans-serif;
  /* Iconen: dunne neonbuis — de lijn gloeit in zijn eigen kleur, met een cyaan waas eromheen. */
  --icoon-lijn:2.5; --icoon-vlak:rgba(45,226,240,.10);
  --icoon-filter:drop-shadow(0 0 1.5px currentColor) drop-shadow(0 0 5px rgba(45,226,240,.65));
}
[data-thema="80s"] .brand{text-shadow:0 0 4px rgba(45,226,240,.9),0 0 14px rgba(45,226,240,.5);}
[data-thema="80s"] h1, [data-thema="80s"] .volgende-optreden strong{text-shadow:0 0 12px rgba(255,61,151,.55);}
[data-thema="80s"] .btn, [data-thema="80s"] .btn-small{box-shadow:0 0 12px rgba(255,61,151,.45);}
[data-thema="80s"] .cat-tile:hover{border-color:var(--goud-ster);box-shadow:0 0 18px rgba(45,226,240,.35);}

/* ---- 90's: grunge. Een gekopieerde flyer: papier, zwart, flanelrood; typemachine, stift en scherpe hoeken. ---- */
[data-thema="90s"]{
  color-scheme:light;
  --groen:#8C2A1C;        --groen-rgb:140,42,28;
  --groen-diep:#6E1F14;
  --groen-zacht:#8F7C66;
  --lichtgroen:#DCD3BD;
  --lichtgroen-diep:#CFC4A9;
  --lichtgroen-zacht:#E3DBC6;
  --goud-ster:#F2CE2E;
  --creme:#EAE4D4;  --creme-2:#E0D8C4;  --card:#F4F0E5;
  --tekst:#1B1A17;  --muted:#565046;    --placeholder:#A39A88;
  --rand:#C9BFA8;   --rand-zacht:#D8D0BC;
  --op-accent:#F4F0E5; --op-fel:#1B1A17;
  --ok-bg:#DDE3CB;            --ok:#435320;
  --waarschuwing-bg:#F1E2A8;  --waarschuwing:#654E04;
  --fout-bg:#EDD3C9;          --fout:#8C2A1C;
  --neutraal-bg:#E0D8C4;      --neutraal:#565046;
  --gevaar:#A3261A; --gevaar-diep:#801C12;
  --schaduw-rgb:27,26,23; --overlay-rgb:27,26,23;
  --schaduw-2:3px 3px 0 rgba(27,26,23,.16); --schaduw-3:5px 5px 0 rgba(27,26,23,.22);
  --ring-focus:0 0 0 3px rgba(140,42,28,.25);
  --kop-bg:#1B1A17; --kop-merk:#F2CE2E; --kop-tekst:#CFC7B4; --kop-hover:#35322C; --kop-rand:#3A3730;
  --kop-knop:#F2CE2E; --kop-knop-tekst:#1B1A17;
  --kop-streep:repeating-linear-gradient(90deg,#8C2A1C 0 14px,#1B1A17 14px 17px,#8C2A1C 17px 20px,#5A1A12 20px 34px);
  --kop-streep-hoogte:8px;
  --radius-xs:0; --radius-s:1px; --radius-m:2px; --radius-l:2px; --radius-xl:3px; --radius-pil:3px;
  --display:'Special Elite','Courier New',monospace;
  --script:'Permanent Marker','Comic Sans MS',cursive;
  /* Iconen: stift op een flyer — ruwe rand (filter #stift in base.html), hoekig, iets scheef; vlak gemarkeerd. */
  --icoon-lijn:4; --icoon-uiteinde:square; --icoon-hoek:bevel; --icoon-vlak:rgba(242,206,46,.6);
  --icoon-filter:url(#stift) drop-shadow(1.5px 1.5px 0 rgba(27,26,23,.25)); --icoon-draai:rotate(-3deg);
}
[data-thema="90s"] h1, [data-thema="90s"] h2, [data-thema="90s"] .cat-tile-label{letter-spacing:0;}
[data-thema="90s"] .brand{transform:rotate(-2deg);}

/* ---- 00's: Web 2.0. Wit en aquablauw met lime; gelknoppen met een glanslicht, een glimmende kop, ronde letters. ---- */
[data-thema="00s"]{
  color-scheme:light;
  --groen:#0A6FC2;        --groen-rgb:10,111,194;
  --groen-diep:#08589B;
  --groen-zacht:#8FB5D6;
  --lichtgroen:#DDEFFB;
  --lichtgroen-diep:#C5E4F8;
  --lichtgroen-zacht:#EEF7FD;
  --goud-ster:#7AC70C;
  --creme:#F4F7FA;  --creme-2:#E8EEF4;  --card:#FFFFFF;
  --tekst:#1E2A36;  --muted:#566676;    --placeholder:#A7B3BF;
  --rand:#D3DDE6;   --rand-zacht:#E6ECF1;
  --op-accent:#FFFFFF; --op-fel:#1E2A36;
  --ok-bg:#E6F4D7;            --ok:#3D6B0A;
  --waarschuwing-bg:#FFF3CC;  --waarschuwing:#7A5A00;
  --fout-bg:#FBE1E1;          --fout:#A12A2A;
  --neutraal-bg:#E8EEF4;      --neutraal:#566676;
  --gevaar:#D0342C; --gevaar-diep:#A9271F;
  --schaduw-rgb:10,111,194; --overlay-rgb:30,42,54;
  --schaduw-2:0 2px 6px rgba(10,111,194,.12); --schaduw-3:0 6px 18px rgba(10,111,194,.22);
  --ring-focus:0 0 0 3px rgba(10,111,194,.25);
  --kop-bg:#1A6FC0; --kop-merk:#FFFFFF; --kop-tekst:#F2F8FE; --kop-hover:#2A80D0; --kop-rand:#155A9C;
  --kop-knop:#8CD211; --kop-knop-tekst:#1E2A36;
  --kop-streep:linear-gradient(#B4E43C,#7AC70C); --kop-streep-hoogte:4px;
  --radius-s:8px; --radius-m:12px; --radius-l:14px; --radius-xl:18px;
  --display:'Varela Round','Trebuchet MS',sans-serif;
  --script:'Varela Round','Trebuchet MS',sans-serif;
  --sans:'Trebuchet MS','Lucida Grande',Verdana,sans-serif;
  /* Iconen: gewone lijn, het vlak een glanzende gel (verloop #glans in base.html), een zachte schaduw eronder. */
  --icoon-vlak:url(#glans); --icoon-filter:drop-shadow(0 2px 1.5px rgba(10,111,194,.35));
}
/* Het glanslicht: de bovenste helft van een knop of de kop is lichter, met een harde overgang halverwege. */
[data-thema="00s"] .site-header, [data-thema="00s"] .btn, [data-thema="00s"] .btn-small, [data-thema="00s"] .btn-modal-ok{
  background-image:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1));}
[data-thema="00s"] .btn, [data-thema="00s"] .btn-small, [data-thema="00s"] .btn-modal-ok{border-radius:var(--radius-pil);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.18),0 1px 2px rgba(10,111,194,.35);}
[data-thema="00s"] .cat-tile{background-image:linear-gradient(#FFFFFF,#EEF4FA);}
[data-thema="00s"] .brand{text-shadow:0 1px 0 rgba(0,0,0,.25);}

/* ---- 10's: flat design. Wit, rozenkwarts en serenity (Pantone 2016), een munt accent; dunne lijnen,
   hoofdletters met ruimte, het logo in Lobster, en de lange schaduw onder de iconen. ---- */
[data-thema="10s"]{
  color-scheme:light;
  --groen:#1F7A70;        --groen-rgb:31,122,112;
  --groen-diep:#16615A;
  --groen-zacht:#9FB8B3;
  --lichtgroen:#F7CAC9;
  --lichtgroen-diep:#F2B5B4;
  --lichtgroen-zacht:#FCEDEC;
  --goud-ster:#92A8D1;
  --creme:#FFFFFF;  --creme-2:#F5F6F8;  --card:#FFFFFF;
  --tekst:#2C3E50;  --muted:#5D6D7E;    --placeholder:#AEB6BF;
  --rand:#E3E6EA;   --rand-zacht:#EEF0F2;
  --op-accent:#FFFFFF; --op-fel:#2C3E50;
  --ok-bg:#E3F4EE;            --ok:#1E6B50;
  --waarschuwing-bg:#FDF2DC;  --waarschuwing:#7D5A06;
  --fout-bg:#FCE4E4;          --fout:#A93226;
  --neutraal-bg:#F5F6F8;      --neutraal:#5D6D7E;
  --gevaar:#E74C3C; --gevaar-diep:#C0392B;
  --schaduw-rgb:44,62,80; --overlay-rgb:44,62,80;
  --schaduw-1:0 1px 2px rgba(44,62,80,.12);
  --schaduw-2:0 1px 2px rgba(44,62,80,.08); --schaduw-3:0 3px 8px rgba(44,62,80,.14);
  --ring-focus:0 0 0 3px rgba(31,122,112,.22);
  --kop-bg:#F7CAC9; --kop-merk:#2C3E50; --kop-tekst:#4A4F57; --kop-hover:#F2B5B4; --kop-rand:#F2B5B4;
  --kop-knop:#2C3E50; --kop-knop-tekst:#FFFFFF;
  --radius-xs:2px; --radius-s:2px; --radius-m:3px; --radius-l:4px; --radius-xl:4px;
  --display:'Montserrat',Helvetica,Arial,sans-serif;
  --script:'Lobster',Georgia,cursive;
  /* Iconen: dunne lijn en de lange schaduw — elke drop-shadow schuift de vorige een pixel verder. */
  --icoon-lijn:2.5; --icoon-vlak:rgba(146,168,209,.35);
  --icoon-filter:drop-shadow(1px 1px 0 rgba(44,62,80,.22)) drop-shadow(1px 1px 0 rgba(44,62,80,.16))
    drop-shadow(1px 1px 0 rgba(44,62,80,.12)) drop-shadow(1px 1px 0 rgba(44,62,80,.09))
    drop-shadow(1px 1px 0 rgba(44,62,80,.06)) drop-shadow(1px 1px 0 rgba(44,62,80,.04));
}
[data-thema="10s"] h1, [data-thema="10s"] h2, [data-thema="10s"] .cat-tile-label{text-transform:uppercase;letter-spacing:.12em;font-weight:600;}
[data-thema="10s"] .cat-tile-label{font-size:var(--tekst-l);}
[data-thema="10s"] .brand{letter-spacing:0;}

/* ---- 20's: matglas in het donker. Poollicht (violet en munt) achter doorschijnende kaarten; ronde hoeken,
   een strakke grotesk, het logo in een verloop, iconen in twee tinten. ---- */
[data-thema="20s"]{
  color-scheme:dark;
  --groen:#8B7BFF;        --groen-rgb:139,123,255;
  --groen-diep:#A497FF;
  --groen-zacht:#6B7184;
  --lichtgroen:#1A1F2B;
  --lichtgroen-diep:#242A38;
  --lichtgroen-zacht:#151A24;
  --goud-ster:#2EE6C5;
  --creme:#0E1116;  --creme-2:#161A22;  --card:#171B24;
  --tekst:#ECEEF3;  --muted:#9AA3B2;    --placeholder:#5B6474;
  --rand:#2A3040;   --rand-zacht:#1F2430;
  --op-accent:#0E1116; --op-fel:#0E1116;
  --ok-bg:#0F2A24;            --ok:#5EE6B8;
  --waarschuwing-bg:#2E2610;  --waarschuwing:#F5CE62;
  --fout-bg:#33151C;          --fout:#FF8A9A;
  --neutraal-bg:#1A1F2B;      --neutraal:#9AA3B2;
  --gevaar:#FF5C72; --gevaar-diep:#FF8193;
  --schaduw-rgb:0,0,0; --overlay-rgb:0,0,0;
  --schaduw-1:0 1px 4px rgba(0,0,0,.5);
  --schaduw-2:0 8px 24px rgba(0,0,0,.35); --schaduw-3:0 12px 32px rgba(0,0,0,.5);
  --schaduw-4:0 18px 44px -14px rgba(0,0,0,.8);
  --ring-focus:0 0 0 3px rgba(139,123,255,.35);
  --kop-bg:#0E1116; --kop-merk:#ECEEF3; --kop-tekst:#B7BECB; --kop-hover:#1F2430; --kop-rand:#1F2430;
  --kop-knop:#8B7BFF; --kop-knop-tekst:#0E1116;
  --radius-s:10px; --radius-m:14px; --radius-l:18px; --radius-xl:24px;
  --display:'Space Grotesk',Inter,system-ui,sans-serif;
  --script:'Space Grotesk',Inter,system-ui,sans-serif;
  /* Iconen: lijn in de accentkleur, het vlak een zacht verloop van violet naar munt (#poollicht in base.html). */
  --icoon-lijn:3; --icoon-vlak:url(#poollicht);
}
/* Het poollicht staat vast achter alles; kaarten en tegels zijn matglas erboven. Een browser zonder
   backdrop-filter toont een effen donkere kaart, en dat is ook goed. */
[data-thema="20s"] body{background:radial-gradient(60vmax 50vmax at 0 0,rgba(139,123,255,.22),transparent 70%),
  radial-gradient(60vmax 50vmax at 100% 100%,rgba(46,230,197,.14),transparent 70%),var(--creme);background-attachment:fixed;}
[data-thema="20s"] .card, [data-thema="20s"] .cat-tile, [data-thema="20s"] .lijst, [data-thema="20s"] .home-section-vlak{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
[data-thema="20s"] .site-header{background:rgba(14,17,22,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
[data-thema="20s"] h1, [data-thema="20s"] h2, [data-thema="20s"] .cat-tile-label{font-weight:700;letter-spacing:-.01em;}
[data-thema="20s"] .brand{font-weight:700;background:linear-gradient(90deg,#8B7BFF,#2EE6C5);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* De letters van de decennia zijn breder dan Bebas Neue: een titel iets kleiner, anders loopt hij over drie regels. */
[data-thema="70s"] h1, [data-thema="80s"] h1, [data-thema="90s"] h1, [data-thema="00s"] h1, [data-thema="10s"] h1,
[data-thema="20s"] h1{font-size:var(--tekst-5xl);}

/* ---- De iconen in de hand van het thema (tokens --icoon-* hierboven). Een CSS-eigenschap wint van het
   attribuut op de <svg>, dus zonder thema blijft de tekening zoals iconen.py hem schrijft. Een vlak met een
   eigen kleur (fill-attribuut, geen klasse vlak meer) houdt die kleur. ---- */
.tekening{stroke-width:var(--icoon-lijn);stroke-linecap:var(--icoon-uiteinde);stroke-linejoin:var(--icoon-hoek);
  filter:var(--icoon-filter);transform:var(--icoon-draai);overflow:visible;}
.tekening .vlak{fill:var(--icoon-vlak);}
.tekening-24{stroke-width:calc(var(--icoon-lijn) * 4 / 7);}
/* Niet display:none: dan vindt een browser het filter erin niet altijd. */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ---- Thema kiezen (Mijn account): per thema een tegel die zichzelf in dat thema tekent. ---- */
.thema-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0 0;}
.thema-keuze{display:flex;flex-direction:column;margin:0;padding:0;cursor:pointer;color:var(--tekst);font:inherit;
  text-align:left;background:none;border:2px solid var(--rand);border-radius:var(--radius-l);overflow:hidden;
  -webkit-tap-highlight-color:transparent;}
.thema-keuze-actief{border-color:var(--groen);box-shadow:var(--ring-focus);}
.thema-keuze:focus-visible{outline:2px solid var(--groen);outline-offset:2px;}
.thema-keuze:active{opacity:.72;}
.thema-proef{display:flex;flex-direction:column;background:var(--creme);color:var(--tekst);}
.thema-proef-kop{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;background:var(--kop-bg);}
.thema-proef-kop::after{content:"";width:16px;height:16px;flex:none;border-radius:var(--radius-rond);background:var(--kop-knop);}
.thema-proef-streep{display:block;height:var(--kop-streep-hoogte);background:var(--kop-streep);}
.thema-proef-merk{font-family:var(--script);font-size:var(--tekst-2xl);line-height:1.5;color:var(--kop-merk);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.thema-proef-vlak{display:flex;flex-direction:column;gap:6px;margin:8px;padding:8px 10px;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);}
.thema-proef-titel{font-family:var(--display);font-size:var(--tekst-2xl);line-height:1.1;color:var(--groen);}
.thema-proef-knop{align-self:flex-start;padding:2px 10px;border-radius:var(--radius-s);background:var(--groen);
  color:var(--op-accent);font-size:var(--tekst-s);font-weight:700;}
.thema-naam{display:flex;flex-direction:column;padding:6px 10px 8px;background:var(--card);border-top:var(--rand-dikte) solid var(--rand);}
.thema-naam strong{font-size:var(--tekst-xl);}
.thema-naam small{color:var(--muted);font-size:var(--tekst-m);line-height:1.35;}
/* Mijn account: het thema dat je nu hebt, klein, met naam en omschrijving; kiezen in een modal (potlood). */
a.btn-modal{text-decoration:none;}
/* In de modal twee tegels naast elkaar, ook op een telefoon. */
.modal .thema-keuzes{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));}
.card-kop{display:flex;align-items:center;gap:10px;margin:0 0 10px;}
.card-kop h2{flex:1;margin:0;}
.thema-samenvatting{display:flex;align-items:center;gap:14px;}
.thema-samenvatting .thema-proef{flex:none;width:120px;border:2px solid var(--rand);border-radius:var(--radius-l);overflow:hidden;}
.thema-naam-kort{display:flex;flex-direction:column;min-width:0;}
.thema-naam-kort strong{font-size:var(--tekst-xl);}
.thema-naam-kort small{color:var(--muted);font-size:var(--tekst-m);line-height:1.35;}

/* ---- Het woordmerk van VandePas Solutions: alleen letters, op één regel. VandePas vet (700), Solutions normaal (400)
   en grijs (huisstijl/README.md in de mainframe-root). Het grijs mengt de tekstkleur met de achtergrond, zodat het in
   elk thema past; op antraciet en op wit komt het uit op #8C8C8C (Frank 20-10-2026). ---- */
.vps-merk{font-family:var(--merk);font-weight:400;letter-spacing:.01em;white-space:nowrap;}
.vps-merk-vet{font-weight:700;}
.vps-merk-licht{color:color-mix(in srgb,currentColor 52%,transparent);}

/* ---- Het opstartscherm van de geïnstalleerde app (opstart.js). Twee lagen boven elkaar: de neutrale (antraciet met
   het woordmerk, net als het opstartscherm van de telefoon) ligt bovenop en vloeit weg naar die in het thema. ---- */
.opstart{display:none;}
.opstart-aan .opstart{position:fixed;inset:0;z-index:2000;display:block;transition:opacity .3s;}
.opstart-weg .opstart{opacity:0;}
.opstart-thema, .opstart-neutraal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;}
.opstart-thema{gap:18px;background:var(--kop-bg);}
.opstart-neutraal{background:var(--neutraal-app-bg);color:var(--neutraal-app-tekst);transition:opacity .4s;}
/* Even breed als op het opstartbeeld van iOS: 62% van de korte kant; het woordmerk is 10,2 em breed. */
.opstart-neutraal .vps-merk{font-size:calc(62vmin / 10.2);}
.opstart-fase-thema .opstart-neutraal{opacity:0;}
/* Het icoon als app-tegel: een dunne rand en een schaduw, anders valt zijn achtergrond weg in de kopkleur en
   zweeft wat er onderin getekend staat (een streep) los onder de tekening. */
.opstart img{width:128px;height:128px;border-radius:22%;box-shadow:0 0 0 1px color-mix(in srgb,var(--kop-merk) 30%,transparent),var(--schaduw-3);}
.opstart-naam{max-width:100%;padding:0 24px;text-align:center;overflow-wrap:anywhere;font-family:var(--script);
  font-size:var(--tekst-6xl);line-height:1.4;color:var(--kop-merk);}
/* Onderin, zoals bij apps gebruikelijk: van wie de app is. */
.opstart-voet{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));display:flex;
  flex-direction:column;align-items:center;gap:2px;color:var(--kop-merk);opacity:.8;}
.opstart-van{font-size:var(--tekst-s);letter-spacing:.08em;text-transform:lowercase;color:var(--kop-tekst);}
.opstart-voet .vps-merk{font-size:var(--tekst-xl);}

/* ---- Stijl (Beheer → Stijl, stijl.html): het naslagscherm met alle tokens, per thema. De tokens komen er via
   data-stijl en stijl.js op; hier alleen de opmaak van het scherm zelf. ---- */
.stijl-themas{margin:6px 0 10px;}
.stijl-thema-naam{margin:4px 0 10px;color:var(--muted);}
.stijl-appiconen{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;}
.stijl-appiconen figure, .stijl-iconen figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.stijl-appiconen img{border-radius:22%;box-shadow:var(--schaduw-1);}
.stijl-appiconen figcaption, .stijl-iconen figcaption{font-size:var(--tekst-s);color:var(--muted);text-align:center;}
.stijl-statusbalk{width:60px;height:24px;}
.stijl-kop{margin:28px 0 8px;}
.stijl-subkop{margin:16px 0 8px;font-size:var(--tekst-xl);color:var(--muted);font-weight:600;}
.stijl-stalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.stijl-staal{display:flex;flex-direction:column;gap:2px;min-width:0;}
.stijl-staal code, .stijl-vorm code, .stijl-letter code, .stijl-regel code{font-size:var(--tekst-s);word-break:break-all;}
.stijl-vlak{display:block;height:44px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);}
.stijl-waarde{font-size:var(--tekst-xs);color:var(--muted);word-break:break-all;}
.stijl-uitleg{font-size:var(--tekst-xs);color:var(--muted);font-style:italic;}
.stijl-streep{display:block;max-width:420px;}
.stijl-letters{display:grid;gap:12px;}
.stijl-letter{display:flex;flex-direction:column;gap:2px;}
.stijl-letter-voorbeeld{font-size:var(--tekst-5xl);line-height:1.3;color:var(--groen);}
.stijl-schaal{display:grid;gap:4px;margin-top:14px;}
.stijl-regel{display:grid;grid-template-columns:110px 1fr;align-items:baseline;gap:10px;}
.stijl-vormen{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;}
.stijl-vorm{display:flex;flex-direction:column;gap:4px;}
.stijl-blok{display:block;height:56px;background:var(--lichtgroen);border:var(--rand-dikte) solid var(--rand);}
.stijl-blok-kaart{background:var(--card);border-radius:var(--radius-l);}
.stijl-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;}
.stijl-tabelwrap{overflow-x:auto;}
.stijl-tabel{border-collapse:collapse;font-size:var(--tekst-l);}
.stijl-tabel td{padding:4px 12px 4px 0;vertical-align:top;}
.stijl-tabel td:first-child{white-space:nowrap;}
.stijl-iconen{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px;margin-top:12px;color:var(--groen);}

/* Een venster met een vaste kop en voet (het snelmenu onder Mijn account): alleen de inhoud ertussen scrolt, zodat Klaar
   op zijn plek blijft. Een plakkende voet (position:sticky) in een venster dat zelf scrolt, schoof bij het scrollen een
   stukje mee. Slepen scrolt de inhoud mee (volgorde.js, scrollBak). Bewust onderaan: wint van de gewone vensterregels. */
.modal.modal-vast-voet{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);overflow:hidden;margin:0;}
.modal.modal-vast-voet .modal-kop{flex:none;}
.modal.modal-vast-voet .modal-inhoud{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0 -24px;padding:0 24px;}
.modal.modal-vast-voet .modal-acties{flex:none;position:static;padding:12px 0 0;margin-top:0;}

/* ---- Opstelling (migratie 036, opstellingen.py) ---------------------------------------------------------------- */
.form-sectie + .form-sectie{margin-top:16px;padding-top:12px;border-top:1px solid var(--rand);}
.kabel-kant{overflow-wrap:anywhere;}
.kabel-pijl{display:inline-block;margin:0 4px;color:var(--muted);font-weight:600;}
.kabel-let-op{color:var(--waarschuwing);font-weight:600;}
.melding-let-op{margin:0 0 10px;padding:8px 12px;border-radius:var(--radius-m);background:var(--waarschuwing-bg);
  color:var(--waarschuwing);font-size:var(--tekst-l);}
.kabel-formulier{margin-top:16px;}
.kabel-formulier select{width:100%;}
.gear-tegel-gekozen{outline:2px solid var(--groen);outline-offset:-2px;}
/* De tekening van een opstelling (static/js/opstelling.js): de stijl van het bord, met eigen kabelsoorten. */
.opst-blok-naam{font-size:17px;}
.opst-poort-naam{font-size:12px;}
.opst-kabel-draadloos{stroke-dasharray:3 9;}
.opst-kabel-let-op{stroke:var(--waarschuwing);}