:root{
  --bg:#0e1012; --vlak:#17191c; --vlak2:#202328; --rand:var(--hover); --donker:#0a0b0d;
  --tekst:#eef0f2; --zacht:#8c939c; --geel:#ffc917; --blauw:#003082;
  --groen:#34c56b; --oranje:#ffa31a; --rood:#ef4444;
  --sterk:#fff; --hover:#2a2e34; --hover2:#2f343b; --accent-tekst:#ffc917; --groen-tekst:#86efac; --rood-tekst:#fca5a5;
  color-scheme:dark;
}
/* Licht thema (Mijn account → Weergave): vast licht, of automatisch volgens het toestel */
:root[data-thema="licht"]{
  --bg:#f2f3f5; --vlak:#ffffff; --vlak2:#eceef1; --rand:#d8dce2; --donker:#e6e8ec;
  --tekst:#15181c; --zacht:#5b636d; --groen:#1f9d55; --oranje:#d97706; --rood:#dc2626;
  --sterk:#0f1114; --hover:#e1e4e9; --hover2:#d6dae0; --accent-tekst:#946200; --groen-tekst:#15803d; --rood-tekst:#b91c1c;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root[data-thema="auto"]{
    --bg:#f2f3f5; --vlak:#ffffff; --vlak2:#eceef1; --rand:#d8dce2; --donker:#e6e8ec;
    --tekst:#15181c; --zacht:#5b636d; --groen:#1f9d55; --oranje:#d97706; --rood:#dc2626;
    --sterk:#0f1114; --hover:#e1e4e9; --hover2:#d6dae0; --accent-tekst:#946200; --groen-tekst:#15803d; --rood-tekst:#b91c1c;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--tekst);font:500 16px/1.35 "Barlow",system-ui,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.wrap{max-width:640px;margin:0 auto}
.num{font-variant-numeric:tabular-nums}

/* Kop */
header{display:flex;align-items:center;gap:10px;padding:2px 2px 16px}
header img{width:36px;height:36px;display:block;border-radius:8px}
header h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.welkom{color:var(--zacht);font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-top:3px}
.welkom::before{content:"|";margin-right:10px;color:var(--rand);font-weight:400}
.uitlog{flex:none;margin-left:auto;color:var(--zacht);font-size:13px;font-weight:700;text-decoration:none;padding:6px 12px;border:1px solid var(--rand);border-radius:999px}
.uitlog:hover{color:var(--tekst);border-color:var(--zacht)}

/* Schakelaar tussen de pagina's */
.wrap.breed{max-width:980px}
.appnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--donker);padding:4px;border-radius:12px;margin-bottom:12px}
.appnav a{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:9px;color:var(--tekst);text-decoration:none;font-weight:700}
.appnav a:hover{background:var(--vlak2)}
.appnav a.aan{background:var(--geel);color:#111}

/* Inlogpagina */
.loginpagina{min-height:100vh;display:grid;place-items:center}
.login{width:100%;max-width:360px;padding:24px 20px}
.login-kop{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-kop img{width:40px;height:40px;border-radius:9px}
.login-kop h1{margin:0;font-size:24px;font-weight:800}
/* Knop "Mijn account" in de kop */
.kopknop{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--tekst);font-size:13px;font-weight:700;text-decoration:none;padding:6px 12px;border-radius:999px;background:var(--vlak2)}
.kopknop:hover{background:var(--hover2)}
.kopknop.aan{background:var(--geel);color:#111}
.kopknop + .uitlog{margin-left:0}
@media (max-width:560px){
  .kopknop{padding:7px}
  .kopknop span{display:none}   /* op smalle schermen alleen het icoontje */
  header .welkom{display:none}  /* past niet; het accounticoon neemt het over */
}
.terug{display:inline-block;color:var(--zacht);text-decoration:none;font-weight:700;font-size:14px;margin:0 0 12px}
.terug:hover{color:var(--tekst)}
.kn.opslaan{background:var(--geel);color:#111}
.account-gegevens{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.account-gegevens dt{color:var(--zacht);font-size:14px;font-weight:600}
.account-gegevens dd{margin:0;font-weight:700}
.veld{width:100%;background:var(--donker);color:var(--sterk);border:1px solid transparent;border-radius:10px;padding:12px;font:600 17px "Barlow",system-ui,sans-serif}
.veld:focus{outline:none;border-color:var(--accent-tekst)}
.login-fout{background:rgba(239,68,68,.12);color:var(--rood-tekst);border-radius:10px;padding:10px 12px;font-size:14px;margin:0 0 14px}
.login-ok{background:rgba(52,197,107,.12);color:var(--groen-tekst);border-radius:10px;padding:10px 12px;font-size:14px;margin:0 0 14px}
.login-hint{font-size:12px;color:var(--zacht);margin:5px 0 0}
.login-wissel{text-align:center;color:var(--zacht);font-size:14px;margin:16px 0 0}
.login-wissel a{color:var(--accent-tekst);font-weight:700}
.login a.start{display:block;text-align:center;text-decoration:none}
.onzichtbaar{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Wachtpagina */
.wacht{max-width:420px}
.blok > h2.wacht-titel{margin:0 0 8px;padding:0;font-size:22px;color:var(--tekst)}
.wacht p{color:var(--tekst);line-height:1.5;margin:0 0 10px}
.geel{color:var(--accent-tekst)}

/* Beheer */
.beheer-lijst{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.beheer-rij{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:12px;align-items:center;background:var(--donker);border-radius:12px;padding:12px 14px;border:1px solid transparent}
.beheer-rij.wacht-op{border-color:var(--accent-tekst)}
.beheer-wie b{display:block;font-size:16px}
.beheer-wie b small{font-weight:600;color:var(--zacht)}
.beheer-wie span{display:block;font-size:12px;color:var(--zacht)}
.beheer-nieuw{display:inline-block;margin-top:6px;font-style:normal;font-size:12px;font-weight:700;color:#111;background:var(--geel);border-radius:999px;padding:2px 9px}
.beheer-rollen{display:flex;flex-direction:column;gap:6px}
.vink{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer}
.vink input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:6px;background:var(--vlak2);border:1px solid var(--rand);display:grid;place-items:center;cursor:pointer;margin:0;flex:none}
.vink input:checked{background:var(--geel);border-color:var(--accent-tekst)}
.vink input:checked::after{content:"";width:6px;height:11px;border:solid #111;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.vink.vast{opacity:.6;cursor:not-allowed}
.vink.vast input{cursor:not-allowed}
.beheer-knoppen{display:flex;flex-direction:column;gap:6px}
.beheer-knoppen .opslaan{background:var(--geel);color:#111}
.beheer-knoppen .verwijder{background:transparent;color:var(--rood-tekst);border:1px solid rgba(239,68,68,.4)}
.beheer-knoppen .verwijder:hover{background:rgba(239,68,68,.15)}
.beheer-nieuw.grijs{background:var(--vlak2);color:var(--tekst)}
.beheer-zoek{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.beheer-zoek .seg .kn{padding:6px 12px;font-size:14px}
.beheer-knoppen .kn{font-size:14px}

/* Melding "Vrijrijder als app" */
.installeer{display:flex;align-items:center;gap:12px;background:var(--vlak);border:1px solid var(--geel);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.installeer img{width:40px;height:40px;border-radius:10px;flex:none}
.installeer-tekst{flex:1;min-width:0;font-size:13px;color:var(--zacht);line-height:1.35}
.installeer-tekst b{color:var(--tekst)}
.installeer-tekst > b{display:block;font-size:15px}
.installeer .kn{flex:none;min-height:36px;padding:6px 12px;font-size:14px}
.installeer-weg{flex:none;border:0;background:transparent;color:var(--zacht);font-size:22px;cursor:pointer;padding:0 4px}

/* Getal op het tabblad Beheer: aantal wachtende gebruikers */
.teller{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--rood);color:#fff;font-size:12px;font-weight:800;line-height:1}

/* Tijdelijk wachtwoord (één keer zichtbaar) */
.tijdelijk-ww{border:2px solid var(--geel)}
.tijdelijk-ww b{font-size:17px}
.tijdelijk-ww p{color:var(--zacht);font-size:14px;margin:6px 0 12px}
.ww-regel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.ww-regel span{color:var(--zacht);font-size:13px;min-width:140px}
.ww-regel code{font:800 20px/1 ui-monospace,Consolas,monospace;letter-spacing:.06em;background:var(--donker);color:var(--accent-tekst);padding:8px 12px;border-radius:8px}
.ww-regel .kn{min-height:36px;padding:6px 12px;font-size:14px}

/* Logboek */
.logboek{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto;border-radius:10px;background:var(--donker)}
.logboek li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 12px;padding:9px 12px;border-bottom:1px solid var(--rand);font-size:14px}
.logboek li:last-child{border-bottom:0}
.logboek time{color:var(--zacht);font-variant-numeric:tabular-nums;white-space:nowrap}
.logboek b{color:var(--accent-tekst);white-space:nowrap}
.logboek small{grid-column:1/-1;color:var(--zacht);font-size:12px}

@media (max-width:680px){
  .beheer-zoek{grid-template-columns:1fr}
  .logboek li{grid-template-columns:1fr}
  .beheer-rij{grid-template-columns:1fr}
  .beheer-knoppen{flex-direction:row}
  .beheer-knoppen .kn{flex:1}
}

/* Blokken */
.blok{background:var(--vlak);border-radius:16px;margin-bottom:12px}
.blok > h2{margin:0;padding:14px 16px 0;font-size:14px;font-weight:700;color:var(--zacht)}
.blok > .in{padding:10px 16px 16px}

/* Knoppen: vlak en afgerond */
button{font:inherit}
.kn{background:var(--vlak2);color:var(--tekst);border:0;padding:9px 10px;font-weight:700;cursor:pointer;border-radius:10px;min-height:42px;transition:transform .08s}
.kn:hover{background:var(--hover)}
.kn:active{transform:scale(.97)}
.kn.aan{background:var(--geel);color:#111}
.kn small{display:block;font-weight:500;font-size:12px;color:var(--zacht)}
.kn.aan small{color:#5a4705}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--donker);padding:4px;border-radius:12px}
.seg .kn{background:transparent;min-height:38px}
.seg .kn.aan{background:var(--geel)}
/* Klein Nederlands snelheidsbord op een knop */
.bordje{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:30px;padding:0 3px;background:#fff;color:#111;border:2.5px solid #111;border-radius:2px;font-weight:800;font-size:17px;line-height:1}
.bordje sup{font-size:10px;line-height:1;align-self:start;margin:-1px -1px 0 1px}
.bordje:has(sup){padding:0 4px 0 3px}
.kn.bordkn{padding:5px 2px}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mt{margin-top:12px}

label.f{display:block;font-size:13px;color:var(--zacht);margin-bottom:5px;font-weight:600}
input[type=number]{width:100%;background:var(--donker);color:var(--sterk);border:1px solid transparent;border-radius:10px;padding:10px 12px;font:700 22px "Barlow",system-ui,sans-serif;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input:focus{outline:none;border-color:var(--accent-tekst)}

/* Eigen scrollbalken: pagina, treinstrook en uitklaplijsten.
   Chrome/Edge/Safari gebruiken ::-webkit-scrollbar; Firefox alleen scrollbar-color
   (in Chrome zou scrollbar-color de eigen stijl uitschakelen, daarom apart). */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#3a3f46 var(--bg)}
  .strip,.keuze-lijst{scrollbar-width:thin;scrollbar-color:#3a3f46 transparent}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3a3f46;border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--geel)}
::-webkit-scrollbar-button,::-webkit-scrollbar-corner{display:none;background:transparent}

/* − en + rond een getalveld: compacte pil met ronde knopjes */
.stapper{display:inline-grid;grid-template-columns:36px 64px 36px;align-items:center;gap:2px;background:var(--donker);border-radius:999px;padding:4px;border:1px solid transparent}
.stapper:focus-within{border-color:var(--accent-tekst)}
.stapper input[type=number]{background:transparent;border:0;text-align:center;padding:4px 0;font-size:22px}
.stapper button{width:36px;height:36px;border:0;border-radius:50%;background:var(--vlak2);color:var(--tekst);font:700 20px/1 "Barlow",system-ui,sans-serif;cursor:pointer;display:grid;place-items:center}
.stapper button:hover{background:var(--hover2)}
.stapper button:active{background:var(--geel);color:#111}

/* Regel: tekst links, bediening rechts */
.regel{display:flex;align-items:center;justify-content:space-between;gap:12px}
.regel label{font-weight:700;font-size:15px}
.regel label small{display:block;font-weight:500;font-size:12px;color:var(--zacht)}
/* kopregel boven een raster: label klein, compacte stapper rechts */
.regel.kop{margin-bottom:6px}
.regel.kop label{font-size:13px;font-weight:600;color:var(--zacht)}
.regel.kop .stapper{grid-template-columns:30px 52px 30px;padding:3px}
.regel.kop .stapper button{width:30px;height:30px;font-size:17px}
.regel.kop .stapper input[type=number]{font-size:18px;padding:2px 0}

/* Raster met snelheidsknoppen */
.kies{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;background:var(--donker);padding:4px;border-radius:12px}
.kies .kn{background:transparent;min-height:40px;padding:5px 2px}
.kies .kn:hover{background:var(--vlak2)}
.kies .kn.aan{background:var(--geel);color:#111}

/* Eigen keuzelijst */
.keuze{position:relative;min-width:0}
.keuze-bron{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.keuze-knop{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--donker);color:var(--sterk);border:1px solid transparent;border-radius:10px;padding:12px;font:600 16px "Barlow",system-ui,sans-serif;cursor:pointer;text-align:left;min-height:46px}
.keuze-knop span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.keuze-knop svg{flex:none;color:var(--zacht);transition:transform .15s}
.keuze.open .keuze-knop{border-color:var(--accent-tekst)}
.keuze.open .keuze-knop svg{transform:rotate(180deg);color:var(--accent-tekst)}
.keuze-lijst{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--vlak2);border:1px solid var(--rand);border-radius:12px;padding:4px;box-shadow:0 14px 34px rgba(0,0,0,.55);max-height:260px;overflow:auto}
.keuze.open .keuze-lijst{display:block}
.keuze-lijst button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--tekst);font:600 15px "Barlow",system-ui,sans-serif;padding:10px 12px;border-radius:8px;cursor:pointer}
.keuze-lijst button:hover{background:var(--hover)}
.keuze-lijst button.aan{background:var(--geel);color:#111}

/* Treintypes als lijst */
.types{display:flex;flex-direction:column}
.type{display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rand)}
.type:last-child{border-bottom:0}
.type .pic{height:32px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
.type .pic img{height:32px;width:auto;max-width:none}
.type .naam{font-weight:700;font-size:17px;white-space:nowrap}
.type .btns{display:flex;gap:6px}
.type .btns .kn{min-width:66px;padding:5px 6px;line-height:1.15}

.trein{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;align-items:center}
.trein .leeg{color:var(--zacht);font-size:14px}
.stelk{display:flex;align-items:center;background:var(--geel);color:#111;font-weight:700;font-size:14px;border-radius:999px;padding-left:12px}
.stelk span{padding:6px 2px}
.stelk button{border:0;background:transparent;color:#111;width:30px;height:30px;cursor:pointer;font-weight:700;font-size:17px;border-radius:50%}
.wisalles{margin-left:auto;border:1px solid var(--rand);background:transparent;color:var(--zacht);font-weight:700;font-size:13px;border-radius:999px;padding:6px 12px;cursor:pointer}
.wisalles:hover{color:var(--rood);border-color:var(--rood)}

/* Hele trein als strook: kop rechts, rijrichting naar rechts */
.strip{display:flex;align-items:flex-end;overflow-x:auto;padding:10px 0 8px;margin-top:12px;border-top:1px solid var(--rand);cursor:grab;user-select:none}
.strip.sleept{cursor:grabbing}
.strip img{pointer-events:none}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{border:0;background:#3a3f46}
.strip::-webkit-scrollbar-thumb:hover{background:var(--geel)}
.strip:empty{display:none}
.stel{flex:none;display:block}
.stel.blokje{background:var(--geel);border-radius:10px 2px 2px 2px;box-shadow:inset 0 -10px 0 var(--blauw)}
.uitleg{font-size:13px;color:var(--zacht);margin:10px 0 0}

/* Eigen opname */
.opname{display:flex;align-items:center;gap:8px;background:var(--donker);border-radius:12px;padding:10px 10px 10px 14px}
.opname-tekst{flex:1;min-width:0}
.opname-tekst b{display:block;font-size:15px}
.opname-tekst span{display:block;font-size:12px;color:var(--zacht)}
.opname .kn{min-width:64px}
#opnemen.bezig{background:var(--rood);color:#fff;animation:knipper 1s infinite}
@keyframes knipper{50%{opacity:.6}}

/* Uitkomst */
.uit{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.uit div{padding:10px 6px;text-align:center;background:var(--donker);border-radius:12px}
.uit b{display:block;font-size:30px;font-weight:800;color:var(--sterk);font-variant-numeric:tabular-nums;line-height:1.1}
.uit span{font-size:12px;color:var(--zacht);font-weight:600}

.start{width:100%;border:0;border-radius:16px;padding:18px 10px;font:800 20px "Barlow",system-ui,sans-serif;background:var(--geel);color:#111;cursor:pointer;transition:transform .08s}
.start:active{transform:scale(.98)}
.start:disabled{opacity:.35;cursor:not-allowed}
footer{color:var(--zacht);font-size:12px;text-align:center;margin:12px 0 4px}
footer .copyright{display:block;margin-top:6px;opacity:.7}

/* Rijscherm */
#rit{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;padding:10px 12px calc(12px + env(safe-area-inset-bottom));z-index:10}
#rit.open{display:flex}
#rit .top{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--zacht)}
#rit .top .kn{min-height:36px;padding:6px 12px}
#rit .top .wat{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#rit .groot{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
#rit .meters{font-size:min(30vw,170px);font-weight:800;line-height:.95;color:var(--sterk);font-variant-numeric:tabular-nums}
#rit .eenheid{color:var(--zacht);font-size:16px}
#rit .sec{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
#rit .status{font-size:18px;font-weight:800;margin-top:6px;color:var(--oranje);text-transform:uppercase;letter-spacing:.03em}
#rit.vrij{background:#07301a}
#rit.vrij .meters,#rit.vrij .status{color:var(--groen)}
#rit.vrij .status{font-size:30px;line-height:1.1}
#rit.flits{animation:flits .25s 6 alternate}
@keyframes flits{to{background:#1f7a43}}

/* Camera: wissel of bord staat stil in het midden, de trein rijdt eronderdoor */
.camera{position:relative;height:190px;overflow:hidden;background:var(--vlak);border-radius:16px;margin:10px 0 8px}
.camera svg.decor{position:absolute;inset:0;width:100%;height:100%}
.camera svg.voor{z-index:2}
.cstrip{position:absolute;inset:0;z-index:1}
/* Elke bak los, zodat hij de bocht van het wissel kan volgen */
.bak{position:absolute;left:0;top:0;transform-origin:0 100%;will-change:transform}
.bak .foto{width:100%;height:100%;background-repeat:no-repeat;transform:scaleX(-1)}
/* De trein rijdt naar links (zoals de plaatjes getekend zijn, dus logo's en nummers niet in spiegelbeeld).
   De baan wordt gerekend van links naar rechts en hier als geheel gespiegeld; de bakfoto's
   zijn ook gespiegeld, zodat ze per saldo de goede kant op staan. Wissel/bord-tekst (#markering) niet. */
#decor,#cstrip{transform:scaleX(-1)}
.bak.blokje .foto{background:var(--geel);box-shadow:inset 0 -10px 0 var(--blauw);border-radius:2px}
.bak.margezone{border-left:3px solid var(--groen);background:repeating-linear-gradient(45deg,rgba(62,196,109,.25) 0 6px,transparent 6px 12px)}
.bakinfo{text-align:center;font-weight:700;font-size:16px;min-height:40px}
.bakinfo small{display:block;font-weight:400;color:var(--zacht);font-size:13px}

.snel{display:flex;align-items:center;gap:8px;justify-content:center}
.snel .kn{width:64px;height:52px;font-size:20px}
.snel output{min-width:120px;text-align:center;font-size:26px;font-weight:800;color:var(--sterk)}
/* Snelheidsmeter (tabblad Snelheid) */
.meter-blok .in{text-align:center;padding-top:20px}
.meter{display:block;width:100%;max-width:380px;margin:0 auto -54px}
.meter-baan,.meter-stand{fill:none;stroke-width:14;stroke-linecap:round}
.meter-baan{stroke:var(--donker)}
.meter-stand{stroke:var(--geel);transition:stroke-dasharray .4s ease-out}
#meterStreepjes line{stroke:var(--zacht);stroke-width:2}
#meterStreepjes text{fill:var(--zacht);font:700 10px "Barlow",system-ui,sans-serif;text-anchor:middle}
.meter-waarde{position:relative;line-height:1}
.meter-waarde b{display:block;font-size:min(26vw,120px);font-weight:800;color:var(--sterk);font-variant-numeric:tabular-nums}
.meter-waarde span{color:var(--zacht);font-size:18px;font-weight:700}
.meter-status{color:var(--groen);font-weight:700;margin:10px 0 16px;min-height:22px}
.meter-cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.meter-cijfers div{background:var(--donker);border-radius:12px;padding:10px 4px}
.meter-cijfers b{display:block;font-size:22px;font-weight:800;color:var(--sterk);font-variant-numeric:tabular-nums}
.meter-cijfers span{font-size:12px;color:var(--zacht);font-weight:600}
.meter-blok .acties{margin-top:0}

/* GPS-snelheid op het hoofdscherm */
.gps-nu{display:flex;align-items:center;gap:8px;background:var(--donker);border-radius:12px;padding:10px 10px 10px 14px}
.gps-nu-tekst{flex:1;min-width:0}
.gps-nu-tekst span{display:block;font-size:12px;color:var(--zacht);font-weight:600}
.gps-nu-tekst b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.gps-nu .kn{min-height:38px;padding:6px 12px;font-size:14px}
/* in het rijscherm: groen "GPS"-label bij de snelheid zolang die van GPS komt */
.snel.gps-live output::before{content:"GPS";display:block;font-size:11px;font-weight:800;color:var(--groen);letter-spacing:.08em}
.gps-regel{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px;text-align:center}
.gps-knop{min-height:36px;padding:6px 14px;font-size:14px}
.gps-knop.aan{background:var(--groen);color:#062b14}
.gps-status{font-size:12px;color:var(--zacht);flex-basis:100%}
.acties{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.acties .kn{padding:14px;font-size:16px}

/* ---------- Community ---------- */
.kopknop + .kopknop{margin-left:0}
.kopknop.bel{position:relative;padding:7px}
.kopknop.bel .teller{position:absolute;top:-6px;right:-8px;margin:0;display:inline-grid!important;min-width:18px;height:18px;font-size:11px;padding:0 5px}
span.f{display:block;font-size:13px;color:var(--zacht);margin-bottom:5px;font-weight:600}
textarea.veld{resize:vertical;min-height:70px;font-size:16px;line-height:1.4}
select.veld{appearance:none;-webkit-appearance:none;padding-right:36px;font-size:15px;cursor:pointer;
  background:var(--donker) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238c939c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center}
input[type=date].veld{color-scheme:dark}
.seg label.kn{display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;cursor:pointer}
.seg label.kn input{position:absolute;opacity:0;pointer-events:none}
.seg a.kn{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px}
.kn.klein{min-height:34px;padding:6px 12px;font-size:14px}
.kn.verwijder{background:transparent;color:var(--rood-tekst);border:1px solid rgba(239,68,68,.4)}
.tekstknop{background:none;border:0;color:var(--zacht);font-size:12px;font-weight:700;cursor:pointer;padding:2px 0;text-decoration:underline}
.tekstknop:hover{color:var(--rood-tekst)}
.tussenkop{font-size:14px;margin:14px 0 6px;color:var(--tekst)}
.tussenkop:first-child{margin-top:0}

/* subnavigatie binnen Community */
.subnav{display:flex;gap:6px;overflow-x:auto;margin:-4px 0 12px;padding-bottom:2px;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:var(--vlak);color:var(--tekst);text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--rand)}
.subnav a:hover{border-color:var(--zacht)}
.subnav a.aan{background:var(--tekst);color:#111;border-color:var(--tekst)}

/* profiel */
.profiel-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-top:16px}
.profiel-naam{margin:0;font-size:22px;font-weight:800}
.profiel-naam small{font-size:14px;color:var(--zacht);font-weight:600;margin-left:4px}
.profiel-kop .uitleg{margin-top:4px}
.labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.label{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--vlak2);color:var(--tekst);text-decoration:none}
a.label:hover{background:var(--hover2)}
.label.groen{background:rgba(52,197,107,.16);color:var(--groen-tekst)}
.label.soort{background:rgba(255,201,23,.15);color:var(--accent-tekst)}
.vriendknop,.rij-knoppen{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.profiel-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.profiel-raster > .blok{margin-bottom:0}
.profiel-raster + *{margin-top:12px}
.materieel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.materieel-vink{background:var(--donker);border-radius:10px;padding:8px 10px}
.materieel-vink img{height:20px;width:56px;object-fit:cover;object-position:left center;border-radius:3px;margin-right:2px}
.bv-kies{display:flex;flex-direction:column;gap:2px;max-height:520px;overflow:auto;margin-top:10px;background:var(--donker);border-radius:10px;padding:6px}
.bv-kies .vink{padding:6px 6px;border-radius:8px;font-weight:500;align-items:flex-start;line-height:1.3}
.bv-kies .vink:hover{background:var(--vlak2)}
.bv-kies .vink b{min-width:34px;color:var(--accent-tekst)}
.bv-lijst{list-style:none;margin:0;padding:0;font-size:14px;max-height:260px;overflow:auto}
.bv-lijst li{padding:5px 0;border-bottom:1px solid var(--rand)}
.opslaan-balk{position:sticky;bottom:10px;z-index:5;margin:12px 0;display:flex;justify-content:center}
.opslaan-balk .kn{min-width:220px;padding:14px 22px;font-size:16px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.mijlpalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.mijlpaal{background:var(--donker);border-radius:12px;padding:10px 12px;opacity:.45;border:1px solid transparent}
.mijlpaal b{display:block;font-size:15px}
.mijlpaal span{font-size:12px;color:var(--zacht)}
.mijlpaal.gehaald{opacity:1;border-color:var(--accent-tekst)}
.mijlpaal.gehaald b::before{content:"★ ";color:var(--accent-tekst)}

/* kaart */
.kaart{display:block;width:100%;height:auto;max-height:80vh;border-radius:12px;background:#0b0c0e;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.kaart.ingezoomd{touch-action:none}
.kaart:active{cursor:grabbing}
.kaart-bg path,.bv path,.st{vector-effect:non-scaling-stroke}
.bv-lijn{fill:none;stroke:#8d939b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bv.bekend .bv-lijn{stroke:#5ccfa7;stroke-width:3.6}
.bv-ander{fill:none;stroke:transparent;stroke-width:1.2;stroke-dasharray:5 5;stroke-linecap:round}
.bv.ander .bv-ander{stroke:var(--geel)}
.bv-raak{fill:none;stroke:transparent;stroke-width:14;stroke-linecap:round;cursor:pointer}
.kaart.klikbaar .bv:hover .bv-lijn{stroke:#b4bac2}
.kaart.klikbaar .bv.bekend:hover .bv-lijn{stroke:#8ee6c6}
.st{fill:#2a2d32;stroke:#7d838c;stroke-width:1.3;pointer-events:none;r:calc(5px / var(--z,1))}
.st.bekend{stroke:#fff;stroke-width:1.8;r:calc(7px / var(--z,1))}
.kaart-naam{font-weight:700;paint-order:stroke;stroke:#0b0c0e;stroke-width:calc(5px / var(--z,1));stroke-linejoin:round;pointer-events:none}
.kaart-naam.nl{fill:#e8eaed;font-size:calc(24px / var(--z,1))}
.kaart-naam.buur{fill:#9aa1aa;font-size:calc(24px / var(--z,1));text-anchor:middle}
.kaart-bron{font-size:11px;color:#6b7179;text-align:right;margin-top:4px}
.kaart-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--zacht);margin:8px 0 0}
.kaart-legenda span{display:inline-block;width:18px;height:4px;border-radius:2px;margin-left:6px}
.kaart-legenda span:first-child{margin-left:0}
.lg-groen{background:#5ccfa7}.lg-grijs{background:#70767f}
.lg-geel{background:repeating-linear-gradient(90deg,var(--geel) 0 5px,transparent 5px 9px)}
.kaart-tip{position:absolute;left:16px;right:16px;top:10px;background:rgba(10,11,13,.92);border:1px solid var(--rand);border-radius:10px;padding:8px 12px;font-size:14px;font-weight:700;pointer-events:none}

/* lijsten met personen */
.zoekregel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.lijst{display:flex;flex-direction:column;gap:6px}
.lijst-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--donker);border-radius:12px;padding:10px 12px;color:var(--tekst);text-decoration:none}
a.lijst-rij:hover{background:var(--hover)}
.lijst-rij b,.persoon b{display:block}
.lijst-rij small,.persoon small{display:block;font-size:12px;color:var(--zacht);font-weight:600}
.persoon{display:flex;align-items:center;gap:10px;color:var(--tekst);text-decoration:none;min-width:0}
.persoon > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blauw);color:#fff;font-weight:800}

/* ranglijst */
.ranglijst{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ranglijst li{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(90px,1.1fr) auto auto;gap:10px;align-items:center;background:var(--donker);border-radius:12px;padding:9px 12px}
.ranglijst li.ik{outline:1px solid var(--geel)}
.plek{font-weight:800;color:var(--zacht);text-align:center}
.ranglijst li:nth-child(1) .plek{color:var(--accent-tekst)}
.balk{position:relative;height:22px;border-radius:6px;background:var(--vlak2);overflow:hidden}
.balk i{position:absolute;inset:0 auto 0 0;background:var(--groen);opacity:.75}
.balk em{position:relative;display:block;text-align:center;font-style:normal;font-size:12px;font-weight:800;line-height:22px}
.cijfer{text-align:center;font-weight:800;font-size:14px;min-width:46px}
.cijfer small{display:block;font-size:11px;color:var(--zacht);font-weight:600}
@media (max-width:560px){
  .ranglijst li{grid-template-columns:24px minmax(0,1fr) auto auto}
  .ranglijst li .balk{grid-column:2/-1;grid-row:2}
}

/* meldingen, tips en prikbord */
.tabs2{margin-bottom:12px}
.uitklap > summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;display:flex;align-items:center;gap:8px}
.uitklap > summary::-webkit-details-marker{display:none}
.uitklap > summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--geel);color:#111;font-weight:800}
.uitklap[open] > summary::before{content:"–"}
.uitklap > .in{padding-top:0}
.filterregel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
.meldingen{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.melding{background:var(--donker);border-radius:12px;padding:12px 14px;border-left:3px solid var(--rand)}
.melding.tsb{border-left-color:var(--oranje)}
.melding.werk{border-left-color:var(--accent-tekst)}
.melding.sein{border-left-color:var(--rood)}
.melding.tip{border-left-color:var(--groen)}
.melding-kop{display:flex;flex-wrap:wrap;gap:6px}
.melding p{margin:8px 0;line-height:1.45;overflow-wrap:anywhere}
.melding footer{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;text-align:left;margin:0;font-size:12px}
.melding footer form{margin:0}
.prik-nieuw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.groep-rij .label{flex:none}
@media (max-width:680px){
  .profiel-raster{grid-template-columns:1fr}
  .filterregel,.prik-nieuw{grid-template-columns:1fr}
}

/* seinenquiz */
.groot-kn{display:block;text-align:center;text-decoration:none;padding:16px;font-size:17px;margin-top:12px}
.quiz-voortgang{display:flex;justify-content:space-between;color:var(--zacht);font-weight:700;font-size:14px;padding-top:6px}
.quiz-beeld{display:grid;place-items:center;background:#e9ecef;border-radius:12px;padding:16px;margin:10px 0 4px;min-height:200px}
.quiz-beeld img{max-height:190px;width:auto}
.quiz-vraagtekst{font-size:18px;margin:12px 0 8px}
.quiz-opties{display:flex;flex-direction:column;gap:8px}
.quiz-optie{text-align:left;padding:12px 14px;font-weight:600;line-height:1.35;border:2px solid transparent}
.quiz-optie:disabled{cursor:default;opacity:.65}
.quiz-optie.goed{border-color:var(--groen);background:rgba(52,197,107,.14);opacity:1}
.quiz-optie.fout{border-color:var(--rood);background:rgba(239,68,68,.14);opacity:1}
.quiz-uitleg{font-weight:700;margin:12px 0 0}
.quiz-volgende{width:100%;margin-top:12px;padding:14px}
.quiz-uitslag{display:block;font-size:24px;padding-top:12px}

/* notificaties */
.notificaties{list-style:none;margin:0;padding:0}
.notificaties li{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid var(--rand);font-size:15px}
.notificaties li:last-child{border-bottom:0}
.notificaties li a{color:var(--tekst);text-decoration:none;font-weight:600}
.notificaties li a:hover{color:var(--accent-tekst)}
.notificaties li.nieuw a,.notificaties li.nieuw span{font-weight:800}
.notificaties li.nieuw::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--geel);margin-top:7px}
.notificaties time{flex:none;color:var(--zacht);font-size:12px;margin-left:auto}
@media (max-width:560px){
  .rij2.stapel{grid-template-columns:1fr}
}
@media (max-width:440px){
  .appnav{display:flex}
  .appnav a{flex:1 1 auto;padding:0 5px;font-size:13px}
}

/* Eigen pop-ups (dialoog.js) */
.dialoog-achter{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.6);opacity:0;transition:opacity .15s}
.dialoog-achter.zichtbaar{opacity:1}
.dialoog{width:100%;max-width:380px;background:var(--vlak);border:1px solid var(--rand);border-radius:18px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.6);transform:translateY(8px) scale(.98);transition:transform .15s}
.dialoog-achter.zichtbaar .dialoog{transform:none}
.dialoog p{margin:0 0 18px;font-size:17px;font-weight:600;line-height:1.4}
.dialoog-knoppen{display:flex;gap:8px;justify-content:flex-end}
.dialoog-knoppen .kn{min-width:110px;padding:11px 16px}
.kn.gevaar{background:var(--rood);color:#fff}
.kn.gevaar:hover{background:#dc2626}
.veld.ongeldig,.ongeldig + .keuze-knop{border-color:var(--rood)!important}

/* Zoekveld in lange keuzelijsten */
.keuze.open .keuze-lijst.met-zoek{display:flex;flex-direction:column;overflow:hidden;padding:0;max-height:360px}
.keuze-zoek{flex:none;width:100%;background:var(--vlak2);color:var(--sterk);border:0;border-bottom:1px solid var(--rand);padding:12px 14px;font:600 15px "Barlow",system-ui,sans-serif}
.keuze-opties{flex:1;min-height:0;overflow:auto;padding:4px}
.keuze-zoek:focus{outline:none}
.keuze-lijst{max-height:320px}

/* Eigen datumkiezer */
.keuze-lijst.kalender{right:auto;width:300px;max-width:calc(100vw - 40px);max-height:none;padding:10px}
.kal-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kal-kop b{font-size:16px;text-transform:capitalize}
.kal-pijl{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--tekst);font-size:24px;line-height:1;cursor:pointer}
.kal-pijl:hover{background:var(--hover)}
.kal-pijl:disabled{opacity:.25;cursor:default}
.kal-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.kal-raster span{font-size:12px;color:var(--zacht);font-weight:700;padding:4px 0}
.kal-raster button{aspect-ratio:1;border:0;border-radius:9px;background:transparent;color:var(--tekst);font:600 15px "Barlow",system-ui,sans-serif;cursor:pointer}
.kal-raster button:hover{background:var(--hover)}
.kal-raster button.buiten{color:#5d636b}
.kal-raster button.vandaag{box-shadow:inset 0 0 0 1.5px var(--zacht)}
.kal-raster button.aan{background:var(--geel);color:#111}
.kal-raster button:disabled{color:#3b4047;cursor:default;background:transparent}
.kal-voet{display:flex;justify-content:flex-end;margin-top:6px}
.kal-voet button{border:0;background:transparent;color:var(--accent-tekst);font:700 14px "Barlow",system-ui,sans-serif;padding:6px 8px;border-radius:8px;cursor:pointer}
.kal-voet button:hover{background:var(--hover)}
.kal-voet button:disabled{opacity:.3}

/* Profielfoto en voorbeeld */
img.avatar{object-fit:cover;padding:0}
.avatar.groot{width:84px;height:84px;font-size:34px;flex:none}
.profiel-kop .avatar.groot{align-self:center}
.profiel-wie{flex:1;min-width:180px}
.foto-knoppen{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.foto-knoppen label.kn{display:inline-flex;align-items:center;cursor:pointer}
.foto-knoppen label.bezig{opacity:.6;pointer-events:none}
.foto-knoppen label.bezig::after{content:"…"}
.voorbeeld-knoppen{align-self:center}
.voorbeeld-balk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:rgba(255,201,23,.1);border:1px solid var(--geel);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.voorbeeld-balk > div:first-child{flex:1;min-width:200px}
.voorbeeld-balk b{display:block}
.voorbeeld-balk span{font-size:13px;color:var(--zacht)}
.voorbeeld-balk .seg{min-width:220px}
.kalender .kal-pijl,.kalender .kal-raster button,.kalender .kal-voet button{width:auto;text-align:center}
.kalender .kal-pijl{width:36px;padding:0;display:grid;place-items:center}
.kalender .kal-raster button{padding:0;display:grid;place-items:center}
.kalender .kal-raster button.aan{background:var(--geel);color:#111}
.kalender .kal-raster button:disabled:hover{background:transparent}

/* Kaart: zoomknoppen en eigen tooltip */
.kaart-vak{position:relative}
.kaart-knoppen{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.kaart-knoppen button{width:38px;height:38px;border:1px solid var(--rand);border-radius:10px;background:rgba(23,25,28,.92);color:var(--tekst);font:700 22px/1 "Barlow",system-ui,sans-serif;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.kaart-knoppen button:hover{background:var(--hover)}
.kaart-knoppen button:disabled{opacity:.35;cursor:default}
.kaart-hover{position:absolute;z-index:3;pointer-events:none;background:rgba(10,11,13,.95);border:1px solid var(--rand);border-radius:8px;padding:5px 9px;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.kaart-tip{z-index:3;right:58px}

/* Materieel als plaatjes */
.mat-iconen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mat-icoon{display:inline-flex;align-items:center;gap:7px;background:var(--donker);border-radius:999px;padding:4px 12px 4px 6px;font-size:13px;font-weight:700}
.mat-icoon img{height:20px;width:52px;object-fit:cover;object-position:left center;border-radius:4px}

/* Wie ben ik: de tekst zoals anderen hem zien */
.ruim-onder{margin:0 0 10px}
.wie-ben-ik{line-height:1.6;overflow-wrap:anywhere}
.wie-ben-ik > :first-child{margin-top:0}
.wie-ben-ik > :last-child{margin-bottom:0}
/* zelfde witruimte als in de editor: elke regel is een alinea, een lege regel is een lege alinea */
.wie-ben-ik p{margin:0}
.wie-ben-ik h2{font-size:21px;margin:.3em 0 .15em}
.wie-ben-ik h3{font-size:18px;margin:.3em 0 .15em}
.wie-ben-ik ul,.wie-ben-ik ol{margin:.15em 0;padding-left:1.5em}
.wie-ben-ik a{color:var(--accent-tekst)}
.wie-ben-ik img{max-width:100%;height:auto;border-radius:10px;display:inline-block}
.wie-ben-ik iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:10px}
.wie-ben-ik blockquote{border-left:3px solid var(--geel);background:var(--donker);margin:.6em 0;padding:6px 14px;border-radius:0 10px 10px 0}
.wie-ben-ik pre{background:var(--donker);padding:10px 12px;border-radius:10px;overflow:auto}
.wie-ben-ik table{border-collapse:collapse;margin:.6em 0}
.wie-ben-ik td,.wie-ben-ik th{border:1px solid var(--rand);padding:6px 8px;vertical-align:top}

/* Teksteditor (uit de webshop) in de kleuren van Vrijrijder */
.rich-editor,.ed-modal{--surface:#0a0b0d;--surface-2:#202328;--border-strong:var(--hover2);--ink:#eef0f2;--muted:#8c939c;--accent:#ffc917;--accent-text:#ffc917;--error:#ef4444;--font:"Barlow",system-ui,"Segoe UI",Roboto,sans-serif}
.rich-editor .ed-toolbar.ql-toolbar.ql-snow{border-radius:12px 12px 0 0}
.rich-editor .ql-container.ql-snow{border-radius:0 0 12px 12px}
.rich-editor .ql-editor{min-height:180px}
.ed-btn-primary,.ed-btn-primary:hover,.rich-editor .ed-btn:not(.ed-btn-ghost):not(.ed-btn-primary){color:#111}
.lg-overig{background:repeating-linear-gradient(90deg,#4a4f57 0 5px,transparent 5px 8px)}
.kaart-hover{white-space:pre-line}
.kaart-kiezer{position:absolute;z-index:4;width:280px;max-width:calc(100% - 16px);background:var(--vlak);border:1px solid var(--rand);border-radius:12px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.kaart-kiezer-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 6px;font-size:13px;color:var(--zacht)}
.kaart-kiezer-kop button{border:0;background:transparent;color:var(--zacht);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.kaart-kiezer .vink{padding:7px 6px;border-radius:8px;font-size:14px}
.kaart-kiezer .vink:hover{background:var(--vlak2)}

/* Rechten op de accountpagina: groen vinkje of rood kruis */
.rechten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rechten li{display:flex;align-items:center;gap:8px;font-weight:700}
.rechten svg{flex:none}
.rechten .mag svg{color:var(--groen)}
.rechten .mag-niet{color:var(--zacht);font-weight:600}
.rechten .mag-niet svg{color:var(--rood)}

/* Community-menu: op de telefoon een uitklapmenu in plaats van de rij knoppen */
a.kn{text-decoration:none}
.subnav-klap{display:none;position:relative;margin:-4px 0 12px;z-index:20}
.subnav-klap > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;background:var(--vlak);border:1px solid var(--rand);border-radius:12px;padding:12px 14px;font-weight:800;font-size:16px}
.subnav-klap > summary::-webkit-details-marker{display:none}
.subnav-klap > summary > span{display:inline-flex;align-items:center}
.subnav-klap > summary svg{color:var(--zacht);transition:transform .15s}
.subnav-klap[open] > summary{border-color:var(--accent-tekst)}
.subnav-klap[open] > summary svg{transform:rotate(180deg);color:var(--accent-tekst)}
.subnav-klap-lijst{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--vlak2);border:1px solid var(--rand);border-radius:12px;padding:4px;box-shadow:0 14px 34px rgba(0,0,0,.55);display:flex;flex-direction:column}
.subnav-klap-lijst a{display:flex;align-items:center;padding:12px;border-radius:8px;color:var(--tekst);text-decoration:none;font-weight:700}
.subnav-klap-lijst a:hover{background:var(--hover)}
.subnav-klap-lijst a.aan{background:var(--geel);color:#111}
@media (max-width:680px){
  .subnav{display:none}
  .subnav-klap{display:block}
}
.deel-blok{border-top:1px solid var(--rand);padding-top:12px!important}
.dialoog p{white-space:pre-line;overflow-wrap:anywhere}

/* Maanduitdaging */
.uitdaging .in{display:flex;align-items:center;gap:14px;padding-top:14px}
.uitdaging b{display:block}
.uitdaging span{font-size:13px;color:var(--zacht)}
.uitdaging-icoon{font-size:30px;line-height:1;color:var(--zacht);flex:none}
.uitdaging.gehaald{border:1px solid var(--geel)}
.uitdaging.gehaald .uitdaging-icoon{color:var(--accent-tekst)}
.kaart-kiezer-link{display:block;padding:9px 8px;border-radius:8px;color:var(--tekst);text-decoration:none;font-weight:700;font-size:14px}
.kaart-kiezer-link:hover{background:var(--vlak2)}
.kaart.info .bv-lijn{cursor:pointer}
.bv-kies .vink .bv-naam{flex:1}
.bv-info{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--vlak2);color:var(--zacht);font:800 13px/1 "Barlow",system-ui,sans-serif;text-decoration:none;font-style:italic}
.bv-info:hover{background:var(--geel);color:#111}
.teller.oranje{background:var(--oranje);color:#111}
.fouten li.nieuw b{color:var(--oranje)}
.fouten li.gezien{opacity:.6}
.fouten span{overflow-wrap:anywhere}

/* Cabine: spraak, grote knoppen, trillen */
.cabine-balk{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cabine-balk .kn{flex:1;min-width:110px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cabine-spraak.luistert{background:var(--rood);color:#fff;animation:luister 1s ease-in-out infinite}
@keyframes luister{50%{box-shadow:0 0 0 6px rgba(239,68,68,.25)}}
.spraak-status{margin:-4px 0 12px;background:rgba(52,197,107,.12);color:var(--groen-tekst);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}
.spraak-status.fout{background:rgba(239,68,68,.12);color:var(--rood-tekst)}
#rit .top .cabine-spraak{min-width:44px;padding:0 10px}

/* Grote-knoppenstand: alles groter, minder op het scherm */
body.groot .cabine-weg{display:none}
body.groot .kies .kn,body.groot .seg .kn{min-height:64px;font-size:20px}
body.groot .kies .kn .bordje{transform:scale(1.35)}
body.groot .regel.kop label{font-size:18px}
body.groot .stapper button{min-width:56px;min-height:56px;font-size:24px}
body.groot .start{min-height:84px;font-size:30px}
body.groot .cabine-balk .kn{min-height:56px;font-size:18px}
body.groot .type .btns .kn{min-height:56px;font-size:18px;min-width:70px}
body.groot #rit .snel .kn{min-height:84px;min-width:110px;font-size:28px}
body.groot #rit .snel output{font-size:34px}
body.groot #rit .acties .kn{min-height:76px;font-size:22px}
body.groot #rit .top .kn{min-height:56px;font-size:18px}
body.groot .kies{grid-template-columns:repeat(3,minmax(0,1fr))}
.kaart-knoppen button,.kaart-hover,.kaart-tip{color:#eef0f2}
.kaart-knoppen button{border-color:#2a2e34}
.login-profielen{display:block;margin-top:14px;text-align:center;padding:12px;border:1px solid var(--rand);border-radius:12px;color:var(--tekst);text-decoration:none;font-weight:700;font-size:14px}
.login-profielen:hover{border-color:var(--zacht)}

/* LET OP bij weg- en materieelbekendheid */
.let-op{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:rgba(255,163,26,.12);border-left:3px solid var(--oranje);font-size:13px;line-height:1.45;color:var(--tekst)}
.let-op b{color:var(--oranje)}

/* Wie mag je profiel zien? */
.zicht-keuzes{display:flex;flex-direction:column;gap:6px}
.zicht-keuze{display:flex;align-items:flex-start;gap:10px;background:var(--donker);border:1px solid transparent;border-radius:12px;padding:10px 12px;cursor:pointer}
.zicht-keuze:hover{border-color:var(--rand)}
.zicht-keuze.aan{border-color:var(--geel)}
.zicht-keuze input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:2px 0 0;border-radius:50%;border:2px solid var(--zacht);display:grid;place-items:center;cursor:pointer}
.zicht-keuze input:checked{border-color:var(--geel)}
.zicht-keuze input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--geel)}
.zicht-keuze b{display:block;font-size:15px}
.zicht-keuze small{display:block;font-size:12px;color:var(--zacht);margin-top:2px}

/* Kopje "Regionale treinen" in de lijst met treinen */
.types-kop{padding:14px 2px 6px;border-top:1px solid var(--rand);margin-top:6px}
.types-kop b{display:block;font-size:15px}
.types-kop span{display:block;font-size:12px;color:var(--zacht)}
.types-kop p{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:var(--donker);font-size:13px;color:var(--tekst)}