/* Immerlootour — onderdelen: shell, klassement, lijsten, kaarten, ploegkiezer, beheer, nieuws, menu
   Onderdeel van de gesplitste opzet. Zie index.html voor de koppeling. */

/* ═══ shell ═══ */
.top{background:var(--asfalt);color:var(--krijt);padding:13px 18px;display:flex;
  align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30}
.wordmark{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.11em;
  text-transform:uppercase;display:flex;align-items:center;color:rgba(250,250,248,.85)}
.wordmark span{color:var(--merk);font-weight:700}
.admin-top .wordmark{color:var(--wit)}
.admin-top .wordmark .fiets{color:var(--wit)}
.top .tag{font-family:var(--display);font-size:14px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--beton)}
.top-nav{display:none}
.inhoud{padding-bottom:80px}
.nav{position:fixed;bottom:0;left:0;right:0;z-index:40;max-width:430px;margin:0 auto;
  display:flex;background:var(--wit);border-top:1px solid var(--lijn)}
.nav button{flex:1;padding:12px 2px calc(12px + env(safe-area-inset-bottom));background:none;
  border:0;cursor:pointer;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--beton);line-height:1.15;
  border-top:3px solid transparent;margin-top:-1px}
.nav button[aria-current="page"]{color:var(--asfalt);border-top-color:var(--asfalt)}
.nav button.beheertab{color:var(--rood)}
.top-nav button.beheertab{color:#FF8A94}
.top-nav button.beheertab:hover{background:rgba(200,16,46,.22);color:#FFD3D7}
.paneel{display:none}.paneel.on{display:block}

/* ═══ krijtbord ═══ */
.bord{background:var(--asfalt-2);color:var(--krijt);padding:20px 18px 22px;
  border-bottom:3px solid var(--geel)}
/* oproepkaart 'nog geen ploeg' (punt 14) */
.kaart.geenploeg{background:var(--asfalt);color:var(--krijt);border-left:4px solid var(--geel);padding:0;overflow:hidden}
.geenploeg .gp-label{font-family:var(--display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:12px;color:var(--geel);padding:15px 18px 0}
.geenploeg h2{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.02em;padding:4px 18px 0;color:var(--krijt)}
.geenploeg p{font-size:14px;line-height:1.55;color:rgba(250,250,248,.85);padding:8px 18px 13px}
.geenploeg .knop{margin:0 18px 16px;width:calc(100% - 36px);background:var(--geel);color:var(--asfalt)}
.geenploeg .knop:disabled{background:var(--asfalt-2);color:var(--beton)}
.slotkop{background:var(--asfalt-2);color:var(--krijt);padding:20px 18px 22px;
  border-bottom:3px solid var(--oranje);position:static}
.slotkop .label{margin-bottom:6px}
.bord .label{margin-bottom:6px}
.bord-rij{display:flex;align-items:flex-end;gap:13px}
.plek{font-family:var(--display);font-weight:700;font-size:74px;line-height:.82;color:var(--geel)}
.plek-sub{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--beton);padding-bottom:7px}
.beweging{margin-left:auto;text-align:right;padding-bottom:5px;font-family:var(--display);
  font-weight:700;font-size:28px;line-height:1}
.op{color:#4ED88F}.neer{color:#FF6B6B}.gelijk{color:var(--beton)}
.beweging small{display:block;font-family:var(--display);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--beton);margin-top:4px}
.bord-voet{display:flex;gap:24px;margin-top:17px;padding-top:14px;
  border-top:1px solid rgba(250,250,248,.14)}
.stat b{display:block;font-family:var(--display);font-size:25px;font-weight:600;
  line-height:1;color:var(--krijt)}
.stat small{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--beton)}

/* ═══ lijsten ═══ */
.lijst{background:var(--wit)}
.rij{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid var(--lijn)}
.rang{font-family:var(--display);font-weight:600;font-size:20px;width:38px;text-align:right;
  color:var(--beton);flex:none}
.naam{flex:1;min-width:0;font-size:14.5px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.naam em{display:block;font-style:normal;font-size:12px;color:var(--beton);font-weight:400}
.naam em a{color:var(--merk);text-decoration:none}
.delta{font-family:var(--display);font-size:15px;font-weight:600;width:36px;text-align:right;flex:none}
.delta.op{color:var(--groen)}.delta.neer{color:var(--rood)}.delta.gelijk{color:#C9CBC8}
.ptn{font-family:var(--display);font-weight:600;font-size:20px;width:54px;text-align:right;flex:none}
.rij.jij{background:var(--geel)}
.rij.jij .rang{color:rgba(35,38,43,.65)}.rij.jij .naam{font-weight:600}
.rij.jij .naam em{color:rgba(35,38,43,.7)}
.plakker{position:sticky;bottom:66px;z-index:20;border-top:2px solid var(--asfalt);
  box-shadow:0 -6px 16px rgba(35,38,43,.14)}
.hulp-let{background:var(--asfalt-2);color:var(--krijt);padding:18px;margin-bottom:10px;
  border-left:4px solid var(--oranje)}
.hulp-let b{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.04em;
  display:block;margin-bottom:6px}
.hulp-let p{font-size:13.5px;line-height:1.6;color:var(--beton);margin-bottom:13px}
.stapregel{padding:12px 18px;border-bottom:1px solid var(--lijn);background:var(--wit)}
.stapgenummerd{display:flex;align-items:flex-start;gap:12px}
.stapregel .stapnr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--merk);
  color:#fff;font-family:var(--display);font-weight:700;font-size:14px;display:flex;
  align-items:center;justify-content:center;margin-top:1px}
.stapregel b{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.05em;
  display:block;margin-bottom:3px}
.stapregel p{font-size:13.5px;line-height:1.6;color:#5A5F66}
details.faq{border:0;border-bottom:1px solid var(--lijn);border-radius:0;margin:0;
  background:var(--wit)}
details.faq summary{padding:13px 18px;gap:10px;align-items:flex-start}
details.faq summary span:last-child{flex:1;font-size:14.5px;font-weight:500;line-height:1.45}
details.faq .antwoord{padding:0 18px 15px 41px;font-size:13.5px;line-height:1.65;color:#5A5F66}
details.faq .antwoord b{color:var(--asfalt);font-weight:600}
details.faq[open] summary span:last-child{color:var(--asfalt)}
.ploegstrip{display:flex;align-items:center;gap:7px;padding:11px 18px;background:var(--asfalt-2);
  overflow-x:auto;white-space:nowrap}
.ploegstrip small{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--beton);flex:none;margin-right:3px}
.ploegstrip button{flex:none;background:transparent;border:1px solid rgba(250,250,248,.25);
  color:rgba(250,250,248,.65);border-radius:3px;padding:6px 12px;cursor:pointer;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.04em;text-align:left}
.ploegstrip button em{display:block;font-style:normal;font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--beton);margin-top:1px}
.ploegstrip button[aria-pressed="true"]{background:var(--geel);border-color:var(--geel);
  color:var(--asfalt)}
.ploegstrip button[aria-pressed="true"] em{color:rgba(35,38,43,.7)}
.tussen{padding:8px 18px;background:var(--papier);text-align:center;font-family:var(--display);
  font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--beton)}
.leeg{padding:32px 24px;text-align:center;color:var(--beton);font-size:14px;line-height:1.6}

/* ═══ kaart ═══ */
.kaart{background:var(--wit);margin-bottom:10px}
.kaart-kop{padding:14px 18px 11px;display:flex;align-items:baseline;justify-content:space-between;
  gap:6px 10px;flex-wrap:wrap;border-bottom:1px solid var(--lijn)}
.kaart-kop h2{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;min-width:0}
.kaart-kop span{font-family:var(--display);font-size:14px;color:var(--beton);letter-spacing:.06em}
.blok{padding:16px 18px}
.voetnoot{padding:16px 18px;font-size:12.5px;color:#6E7379;line-height:1.6}
.renner{display:flex;align-items:center;gap:11px;padding:10px 18px;border-bottom:1px solid var(--lijn)}
.dossard{font-family:var(--display);font-weight:600;font-size:13px;background:var(--papier);
  padding:2px 7px;border-radius:2px;flex:none;min-width:32px;text-align:center}
.renner.uit{color:var(--beton)}.renner.uit .naam{text-decoration:line-through}
.renner.uit .dossard{background:transparent;color:var(--beton);border:1px dashed var(--lijn)}
.dossard.geel{background:var(--geel);color:var(--asfalt)}
.rij.mee-flauw{background:#FFF9E0}
.mini-num{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:4px;background:var(--geel);color:var(--asfalt);font-family:var(--display);
  font-weight:700;font-size:11px;vertical-align:middle;margin-right:2px}
.profielregel{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--lijn);background:var(--wit);font-size:14.5px}
.profielregel span:first-child{color:var(--beton)}
.schakelrij{display:flex;align-items:center;gap:14px;padding:13px 18px;background:var(--wit);
  border-bottom:1px solid var(--lijn);cursor:pointer}
.schakelrij span{flex:1;font-size:14.5px;font-weight:500}
.schakelrij em{display:block;font-style:normal;font-size:12.5px;color:var(--beton);
  font-weight:400;margin-top:2px}
.schakelrij input{width:22px;height:22px;flex:none;accent-color:var(--merk)}
.badge{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;flex:none}
.badge.ja{background:rgba(0,149,79,.14);color:var(--groen)}
.badge.nee{background:rgba(200,16,46,.12);color:var(--rood)}
.badge.wacht{background:rgba(217,119,6,.14);color:var(--oranje)}
.badge.donker{background:var(--asfalt);color:var(--krijt)}

/* ═══ betaalkaart ═══ */
.kopieer{display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-bottom:1px solid var(--lijn);background:var(--wit)}
.kopieer .wat{flex:1;min-width:0}
.kopieer .wat small{display:block;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--beton);margin-bottom:2px}
.kopieer .wat b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.03em;
  word-break:break-all}
.kopieer .wat b.groot{font-size:24px;color:var(--asfalt)}

/* ═══ ploegkiezer ═══ */
.kiezer-kop{background:var(--asfalt);color:var(--krijt);padding:22px 20px 20px}
.kiezer-kop h1{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:.03em}
.kiezer-kop p{font-size:13.5px;color:var(--beton);margin-top:6px;line-height:1.55}
.kiezer-instel{background:var(--wit);border-bottom:1px solid var(--lijn);padding:14px 18px}
.k-naamveld span{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--beton);margin-bottom:5px}
.k-naamveld input{width:100%;padding:12px 13px;font-family:var(--body);font-size:16px;
  border:1px solid var(--lijn);border-radius:3px;background:var(--papier)}
.k-naamveld input:focus{outline:none;border-color:var(--asfalt);background:var(--wit)}
.k-start{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--lijn)}
.k-start span{width:100%;font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--beton);margin-bottom:2px}
.k-start button{border:1px solid var(--lijn);background:var(--papier);border-radius:2px;
  padding:7px 12px;cursor:pointer;font-family:var(--display);font-size:14.5px;font-weight:600;
  letter-spacing:.03em;color:var(--asfalt)}
.k-start button:hover{border-color:var(--asfalt);background:var(--geel)}
.ploegstrip button.plus{width:36px;padding:0;text-align:center;font-size:22px;line-height:1;
  color:var(--geel);border-style:dashed}
.ploegstrip button.plus:hover{background:var(--geel);color:var(--asfalt);border-style:solid}
.telbalk{position:sticky;top:0;z-index:25;background:var(--asfalt-2);color:var(--krijt);
  padding:11px 18px;display:flex;align-items:center;gap:12px}
.telbalk b{font-family:var(--display);font-size:22px;font-weight:700}
.telbalk .meter{flex:1;height:3px;background:rgba(250,250,248,.2);border-radius:2px;overflow:hidden}
.telbalk .meter i{display:block;height:100%;background:var(--geel);width:0;transition:width .2s}
.telbalk-2{gap:10px;align-items:stretch}
.telblok{flex:1;display:flex;flex-direction:column;gap:1px;position:relative;
  background:var(--asfalt);border:1.5px solid transparent;border-radius:9px;padding:8px 11px}
.telblok b{font-family:var(--display);font-size:21px;font-weight:700;line-height:1}
.telblok small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--beton)}
.telblok .nu{position:absolute;top:-8px;right:9px;background:var(--geel);color:var(--asfalt);
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.05em;padding:1px 7px;border-radius:10px;display:none}
.telblok.actief{border-color:var(--geel);background:#3a3a2e}
.telblok.actief b{color:var(--geel)}
.telblok.actief .nu{display:block}
/* basis-fase in eigen kleur groen, reserve-fase geel */
#k-telbasis.actief{border-color:var(--groen);background:#25362b}
#k-telbasis.actief b{color:var(--groen)}
#k-telbasis.actief .nu{background:var(--groen);color:var(--wit)}
.telblok.klaar b{color:var(--groen)}
.telblok.klaar small::after{content:" ✓";color:var(--groen)}
/* statusstrip onder de tellers, kleur/tekst per fase */
.fasestrip{margin:0 18px 12px;border-radius:9px;padding:10px 13px;font-size:13.5px;line-height:1.45;
  display:flex;gap:9px;align-items:flex-start}
.fasestrip .ico{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px}
.fasestrip b{color:var(--krijt)}.fasestrip span{color:var(--beton)}
.fasestrip.basis{background:rgba(0,149,79,.14);border:1px solid rgba(0,149,79,.38)}
.fasestrip.basis .ico{background:var(--groen);color:#fff}
.fasestrip.klaar{background:rgba(0,149,79,.15);border:1px solid rgba(0,149,79,.4)}
.fasestrip.klaar .ico{background:var(--groen);color:#fff}
.fasestrip.res{background:rgba(245,197,24,.16);border:1px solid rgba(245,197,24,.45)}
.fasestrip.res .ico{background:var(--geel);color:var(--asfalt)}
/* scheidingsbanner in de lijst zodra de basis vol is */
.overgang{padding:11px 18px;background:linear-gradient(90deg,rgba(245,197,24,.18),transparent);
  border-top:1px solid var(--geel);border-bottom:1px solid var(--lijn)}
.overgang b{font-family:var(--display);font-size:14px;letter-spacing:.04em;color:var(--geel);display:block}
.overgang small{font-size:11.5px;color:var(--beton)}
#k-overgang.verborgen,#k-reserves.verborgen{display:none}
/* reserves-paneel: gekozen reserves op volgorde, met pijltjes */
.reservepaneel{background:var(--wit);border-bottom:1px solid var(--lijn);padding:8px 18px 10px}
.reservepaneel h4{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--beton);margin:2px 0 4px}
.resrij{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--lijn)}
.resrij:last-child{border-bottom:0}
.resrij .num{width:24px;height:24px;border-radius:6px;background:var(--geel);color:var(--asfalt);
  font-family:var(--display);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.resrij .nm{flex:1;font-size:14px}.resrij .nm em{display:block;font-style:normal;font-size:11.5px;color:var(--beton)}
.resrij .pijlen{display:flex;gap:4px;flex:none}
.resrij .pijlen button{background:var(--papier);border:1px solid var(--lijn);color:var(--asfalt);
  width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1}
.resrij .pijlen button:disabled{opacity:.35;cursor:default}
.resrij .weg{background:none;border:0;color:var(--beton);font-size:19px;cursor:pointer;flex:none;padding:0 2px}
/* reserve-badge in de keuzelijst */
.keuze .resnum{width:20px;height:20px;border-radius:5px;background:var(--geel);color:var(--asfalt);
  font-family:var(--display);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
.keuze.is-res{background:#FFF9E0;border-left-color:var(--geel)}
.zoekbalk{padding:12px 18px;background:var(--wit);border-bottom:1px solid var(--lijn)}
.zoekbalk input{width:100%;padding:11px 13px;font-size:16px;font-family:var(--body);
  border:1px solid var(--lijn);border-radius:3px;background:var(--papier)}
.zoekbalk input:focus{outline:none;border-color:var(--asfalt);background:var(--wit)}
.keuze{display:flex;align-items:center;gap:11px;padding:10px 18px;background:var(--wit);
  border-bottom:1px solid var(--lijn);cursor:pointer;width:100%;text-align:left;
  border-left:3px solid transparent}
/* gekozen basisrenner = groen, gekozen reserve (.is-res) = geel */
.keuze[aria-pressed="true"]:not(.is-res){background:#E9F6EC;border-left-color:var(--groen)}
.keuze .vink{font-family:var(--display);font-weight:700;font-size:17px;color:var(--beton);
  width:20px;text-align:center;flex:none}
.keuze[aria-pressed="true"]:not(.is-res) .vink{color:var(--groen)}
.kiezer-knoppen{display:flex;gap:9px}
.kiezer-knoppen .knop{width:auto;flex:1}
.kiezer-knoppen .knop.licht{flex:0 0 40%}
.vastbalk{position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;z-index:40;
  background:var(--wit);border-top:1px solid var(--lijn);
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(35,38,43,.1)}

/* ═══ admin ═══ */
.admin-top{background:var(--rood);color:var(--wit);padding:13px 18px;position:sticky;top:0;
  z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px}
/* De merknaam mag krimpen zodat de Sluiten-knop op smalle schermen altijd
   zichtbaar blijft (geen horizontale overloop van de pagina). */
.admin-top .wordmark{min-width:0;overflow:hidden;white-space:nowrap}
.admin-top .terug{flex:none}
.admin-top .wordmark span{color:var(--wit);font-weight:700}
.terug{background:rgba(255,255,255,.18);border:0;color:var(--wit);padding:6px 12px;border-radius:2px;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
.tabs{display:flex;background:var(--wit);border-bottom:1px solid var(--lijn);
  position:sticky;top:49px;z-index:25;overflow-x:auto}
.tabs button{flex:1;min-width:88px;padding:12px 4px 10px;border:0;background:none;cursor:pointer;
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--beton);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--asfalt);border-bottom-color:var(--asfalt)}
.etappestrip{display:flex;flex-wrap:wrap;gap:5px;padding:14px 18px;background:var(--papier);
  border-bottom:1px solid var(--lijn)}
.etappestrip button{width:38px;height:38px;border:1px solid var(--lijn);background:var(--wit);
  border-radius:3px;cursor:pointer;font-family:var(--display);font-size:16px;font-weight:600;
  color:var(--beton);position:relative}
.etappestrip button:hover{border-color:var(--asfalt);color:var(--asfalt)}
.etappestrip button.klaar{background:var(--asfalt);border-color:var(--asfalt);color:var(--krijt)}
.etappestrip button.bijgewerkt::after{content:"";position:absolute;top:3px;right:3px;
  width:7px;height:7px;border-radius:50%;background:var(--geel)}
.etappestrip button.slot{background:transparent;border-style:dashed;color:#C2C5C0;cursor:pointer}
.etappestrip button.slot:hover{border-color:var(--oranje);color:var(--oranje)}
.legenda{display:flex;flex-wrap:wrap;gap:14px;width:100%;margin-top:4px;
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beton)}
.legenda span{display:flex;align-items:center;gap:5px}
.legenda i.v{width:11px;height:11px;border:1px solid var(--lijn);background:var(--wit);
  border-radius:2px;display:block}
.legenda i.v.klaar{background:var(--asfalt);border-color:var(--asfalt)}
.legenda i.v.bijgewerkt{background:var(--asfalt);border-color:var(--asfalt);
  box-shadow:inset -3px 3px 0 var(--geel)}
.legenda i.v.slot{background:transparent;border-style:dashed}
.tijden{display:flex;flex-wrap:wrap;gap:22px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--lijn)}
.tijden small{display:block;font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--beton)}
.tijden b{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.02em}
.etappekop .status.slot{background:rgba(200,16,46,.12);color:var(--rood)}
.etappestrip button[aria-pressed="true"]{outline:3px solid var(--geel);outline-offset:1px;
  border-color:var(--geel)}
.etappekop{padding:16px 18px 6px;background:var(--wit)}
.etappekop h2{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.02em;
  line-height:1.1}
.etappekop p{font-size:13px;color:var(--beton);margin-top:4px}
.etappekop .status{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;display:inline-block;margin-top:8px}
.etappekop .status.klaar{background:rgba(0,149,79,.14);color:var(--groen)}
.etappekop .status.open{background:rgba(217,119,6,.14);color:var(--oranje)}
.invoer{display:flex;align-items:center;gap:9px;padding:6px 18px;border-bottom:1px solid var(--lijn);
  background:var(--wit)}
.invoer .pos{font-family:var(--display);font-weight:700;font-size:19px;width:24px;
  text-align:right;color:var(--beton);flex:none}
.invoer.vol .pos{color:var(--asfalt)}
.veld{flex:1;min-width:0;position:relative}
.veld input{width:100%;font-size:16px;font-family:var(--body);padding:9px 32px 9px 11px;
  border:1px solid var(--lijn);border-radius:3px;background:var(--papier)}
.veld input:focus{outline:none;border-color:var(--asfalt);background:var(--wit)}
.invoer.vol .veld input{background:var(--wit);border-color:var(--asfalt);font-weight:500}
.wis{position:absolute;right:3px;top:50%;transform:translateY(-50%);border:0;background:none;
  font-size:19px;color:var(--beton);cursor:pointer;padding:4px 7px}
.punt{font-family:var(--display);font-weight:600;font-size:18px;width:46px;text-align:right;
  color:var(--beton);flex:none;line-height:1.05}
.invoer.vol .punt{color:var(--asfalt)}
.punt .x2{display:block;font-size:11px;font-weight:700;color:var(--merk);letter-spacing:.02em}

/* Dubbele punten: schakelaar onder de etappe-kop + 2×-teken op de strip */
.schakelrij{display:flex;align-items:center;gap:12px;margin:0 18px 14px;padding:13px 15px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:6px}
.schakelrij.aan{border-color:var(--merk);background:rgba(41,171,226,.06)}
.schakeltekst{flex:1;min-width:0}
.schakeltekst b{font-family:var(--display);font-size:16px;font-weight:700;display:block}
.schakeltekst small{color:var(--beton);font-size:12.5px;line-height:1.4;display:block;margin-top:2px}
.switch{width:48px;height:28px;border-radius:14px;background:var(--merk);position:relative;
  flex:none;cursor:pointer;border:0;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:23px;width:22px;height:22px;
  border-radius:11px;background:#fff;transition:left .15s}
.switch.uit{background:#C9CCC7}.switch.uit::after{left:3px}
.etappestrip .tweex{position:absolute;bottom:1px;right:3px;font-family:var(--display);
  font-size:9px;font-weight:700;line-height:1;color:var(--merk);letter-spacing:0}
.etappestrip button.klaar .tweex{color:var(--merk-dof)}
.etappestrip .euroteken{position:absolute;bottom:0;left:3px;font-family:var(--display);
  font-size:12px;font-weight:700;line-height:1;color:var(--oranje)}
.etappestrip button.klaar .euroteken{color:var(--geel)}
.legenda b.mrk-p{font-family:var(--display);font-size:11px;color:var(--merk);font-weight:700}
.legenda b.mrk-g{font-family:var(--display);font-size:13px;color:var(--oranje);font-weight:700}

/* ── dagprijs: beheer-kaart ── */
.dagprijs-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;overflow:hidden;margin:0 18px 14px}
.dagprijs-kaart.open{border-left:3px solid var(--geel)}
.dagprijs-kaart.goed{border-left:3px solid var(--groen)}
.dagprijs-kaart .dp-kop{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;border-bottom:1px solid var(--lijn)}
.dagprijs-kaart .dp-kop h3{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.02em}
.dagprijs-kaart .win{display:flex;align-items:center;flex-wrap:wrap;gap:8px 11px;padding:10px 15px;border-bottom:1px solid var(--lijn)}
/* uitbetaald-vinkje + bedrag per winnaar (dag- en eindprijs) */
.dagprijs-kaart .win .win-bedr{font-family:var(--display);font-weight:700;font-size:15px;color:var(--groen);white-space:nowrap}
.dagprijs-kaart .uitbet{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.dagprijs-kaart .uitbet input{width:17px;height:17px;accent-color:var(--groen);margin:0}
.dagprijs-kaart .uitbet.uit{color:var(--beton)}
.dagprijs-kaart .uitbet.aan{color:var(--groen);font-weight:700}
.dagprijs-kaart .win .medal{font-family:var(--display);font-weight:700;font-size:13px;width:30px;height:30px;border-radius:50%;
  background:var(--geel);color:var(--asfalt);display:flex;align-items:center;justify-content:center;flex:none}
.dagprijs-kaart .win .nm{flex:1}.dagprijs-kaart .win .nm b{font-weight:600}
.dagprijs-kaart .win .nm em{display:block;font-style:normal;font-size:12px;color:var(--beton)}
.dagprijs-kaart .dp-mail{font-size:12.5px;color:#41454b;line-height:1.5;padding:11px 15px}
.dagprijs-kaart .dp-voet{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 15px;font-size:13px;color:#41454b}
.dagprijs-kaart .dp-voet span{font-weight:600}
.dagprijs-waarschuw{background:rgba(200,16,46,.07);color:var(--rood);font-size:12.5px;line-height:1.5;padding:10px 15px;border-top:1px solid var(--lijn)}
.dagprijs-kaart .ep-bedr{font-family:var(--display);font-weight:700;font-size:18px;flex:none;color:var(--groen)}
/* eindprijs: handmatig aanpasbaar bedrag per winnaar + totaalregel */
.dagprijs-kaart .veldgeld{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--merk);border-radius:7px;padding:3px 8px;background:#F4FBFE}
.dagprijs-kaart .veldgeld>span{color:var(--beton);font-size:13px}
.dagprijs-kaart .veldgeld input{border:0;background:transparent;width:64px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--groen);text-align:right}
.dagprijs-kaart .ep-totrij{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid var(--lijn);font-size:13px;color:#41454b}
.dagprijs-kaart .ep-totrij b{font-family:var(--display);font-size:18px;color:var(--asfalt)}

/* ── etappe-beheer (blok A) ── */
.et-kop{display:grid;grid-template-columns:24px 1fr 24px;gap:6px;padding:8px 14px;background:var(--papier);border-bottom:1px solid var(--lijn)}
.et-kop span{font-family:var(--display);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--beton);font-weight:700}
.et-rij{display:grid;grid-template-columns:24px 1fr 24px;gap:6px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--lijn)}
.et-rij .nr{font-family:var(--display);font-weight:700;color:var(--beton);text-align:center;font-size:14px}
.et-rij input,.et-rij select{padding:7px 8px;font-size:13.5px;border:1px solid var(--lijn);border-radius:6px;font-family:var(--body);width:100%;background:var(--wit);min-width:0}
.et-rij .weg{background:none;border:0;color:var(--rood);font-size:17px;cursor:pointer;padding:0}
.et-rij .weg:disabled{color:#c9ccc7;cursor:not-allowed}

/* ── editie afsluiten + archief (blok A) ── */
.afsluitkaart{border-left:3px solid var(--rood)}
.wislijst{display:flex;flex-direction:column;gap:2px;padding:2px 16px 10px}
.wisrij{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.4;padding:4px 0}
.wisrij .ic{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none;margin-top:1px}
.wisrij .ic.wis{background:rgba(200,16,46,.12);color:var(--rood)}
.wisrij .ic.houd{background:rgba(0,149,79,.14);color:var(--groen)}
.arch-rij{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--lijn)}
.arch-rij .nm{flex:1;font-size:14px}.arch-rij .nm b{font-family:var(--display);font-size:16px;font-weight:700}
.arch-rij .nm em{display:block;font-style:normal;font-size:12px;color:var(--beton);margin-top:1px}
.arch-rij .dl{font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--merk);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;flex:none}
.arch-rij .arch-dl{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:none}

/* ── dagwinnaar-banner: deelnemer ── */
.dagbanner{background:linear-gradient(135deg,var(--asfalt),var(--asfalt-2));color:var(--krijt);
  border-radius:12px;padding:14px 16px;margin:0 0 12px}
.dagbanner .dw-lbl{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--geel);margin-bottom:6px}
.dagbanner .dw-deel{background:rgba(245,197,24,.18);color:var(--geel);padding:1px 7px;border-radius:4px;font-size:10px;letter-spacing:.04em}
/* "gedeeld"-label bij een gedeelde plek in het klassement */
.deel-pil{display:inline-block;background:#EAF7FE;color:var(--merk);font-size:10px;font-weight:700;
  border-radius:5px;padding:0 6px;margin-left:5px;vertical-align:middle;letter-spacing:.02em}
.dagbanner .dw-rij{display:flex;align-items:center;gap:10px;padding:5px 0}
.dagbanner .dw-rij .cup{font-size:20px;flex:none}
.dagbanner .dw-nm{flex:1;font-family:var(--display);font-size:18px;font-weight:700;line-height:1.1}
.dagbanner .dw-nm em{display:block;font-family:var(--body);font-style:normal;font-size:12px;font-weight:400;color:#c7cad0;margin-top:2px}
.dagbanner .dw-p{font-family:var(--display);font-weight:700;font-size:20px;color:var(--geel);flex:none}
.dagbanner .dw-note{font-size:12px;color:#c7cad0;margin-top:6px}
/* Het zoekveld met een open suggestielijst moet boven de velden eronder komen.
   Een eigen z-index op het actieve veld tilt zijn suggestielijst over de rest;
   geen contain:layout, want dat sloot de z-index van de lijst op in het veld. */
.veld:focus-within{position:relative;z-index:50}
.suggesties{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:35;background:var(--wit);
  border:1px solid var(--asfalt);border-radius:3px;max-height:200px;overflow-y:auto;
  box-shadow:0 8px 20px rgba(35,38,43,.2)}
.suggesties button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;
  border-bottom:1px solid var(--lijn);background:none;cursor:pointer;font-size:14.5px;font-family:var(--body)}
.suggesties button:hover,.suggesties button:focus{background:var(--geel);outline:none}
.suggesties small{color:var(--beton);display:block;font-size:12px}
.balk{position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;background:var(--wit);
  border-top:1px solid var(--lijn);padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  z-index:40;box-shadow:0 -6px 16px rgba(35,38,43,.1)}
.voortgang{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beton)}
.meter{height:3px;background:var(--lijn);margin-bottom:11px;border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--asfalt);width:0;transition:width .25s}
.melding{margin-bottom:11px;padding:12px 14px;background:var(--asfalt);color:var(--krijt);
  border-left:4px solid var(--groen);border-radius:2px}
.melding b{display:block;font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.melding small{color:var(--beton);font-size:12.5px;line-height:1.5;display:block}
.verborgen{display:none}
.puntentabel{display:flex;flex-wrap:wrap;gap:5px;padding:12px 18px;background:var(--papier)}
.puntentabel span{font-family:var(--display);font-size:13px;font-weight:600;background:var(--wit);
  border:1px solid var(--lijn);border-radius:2px;padding:3px 8px;color:#5A5F66}
.puntentabel span b{color:var(--asfalt)}
.herin{display:grid;grid-template-columns:1fr 1fr;gap:0}
.herin-vak{padding:13px 18px;border-bottom:1px solid var(--lijn)}
.herin-vak+.herin-vak{border-left:1px solid var(--lijn)}
.herin-vak small{display:block;font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--beton);margin-bottom:4px}
.herin-vak b{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.2;display:block}
.herin-vak em{display:block;font-style:normal;font-size:12.5px;color:var(--beton);margin-top:2px}
.tegels{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:14px 18px}
.tegel{background:var(--wit);border:1px solid var(--lijn);border-top:3px solid var(--beton);
  padding:12px 13px;border-radius:3px}
.tegel b{display:block;font-family:var(--display);font-size:28px;font-weight:700;line-height:1.05}
.tegel small{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--beton)}
button.tegel{width:100%;text-align:left;cursor:pointer;font-family:inherit;
  transition:border-color .12s,background .12s}
button.tegel:hover{background:#FBFBFA;border-color:var(--beton)}
button.tegel[aria-pressed="true"]{background:var(--asfalt);border-color:var(--asfalt)}
button.tegel[aria-pressed="true"] b,button.tegel[aria-pressed="true"] small{color:var(--krijt)!important}
.filterbalk{display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--papier);
  border-bottom:1px solid var(--lijn);font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--beton)}
.filterbalk span{flex:1}
/* Licht filter op de Deelnemers-tab (betaalstatus): pure chips, geen bedragen. */
.deelfilter{display:flex;gap:7px;flex-wrap:wrap;padding:12px 18px 4px}
.deelfilter button{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:7px 15px;border-radius:999px;border:1px solid var(--lijn);background:var(--wit);
  color:var(--asfalt);cursor:pointer;line-height:1}
.deelfilter button:hover{border-color:var(--beton)}
.deelfilter button[aria-pressed="true"]{background:var(--asfalt);border-color:var(--asfalt);color:var(--krijt)}
.tegel.match{border-top-color:var(--groen)}.tegel.match b{color:var(--groen)}
.tegel.onbekend{border-top-color:var(--oranje)}.tegel.onbekend b{color:var(--oranje)}
.tegel.open{border-top-color:var(--rood)}.tegel.open b{color:var(--rood)}
.regel{display:flex;align-items:center;gap:11px;padding:11px 18px;
  border-bottom:1px solid var(--lijn);background:var(--wit)}

/* ═══ import ═══ */
.zone{margin:14px 18px;border:2px dashed var(--lijn);border-radius:4px;padding:28px 18px;
  text-align:center;background:var(--wit);cursor:pointer}
.zone:hover{border-color:var(--asfalt);background:#F6F7F5}
.zone b{font-family:var(--display);font-size:19px;font-weight:600;display:block}
.zone small{color:var(--beton);font-size:13px;display:block;margin-top:5px}
.bestand{display:flex;align-items:center;gap:12px;margin:14px 18px;padding:13px 15px;
  background:var(--wit);border-left:3px solid var(--groen);border-radius:3px}
.bestand b{font-size:14.5px}
.bestand small{display:block;color:var(--beton);font-size:12.5px;margin-top:2px}
details{background:var(--wit);border:1px solid var(--lijn);border-radius:3px;margin:0 18px 9px}
summary{padding:13px 15px;cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none}
summary::-webkit-details-marker{display:none}
.pijl{font-family:var(--display);font-size:14px;color:var(--beton);transition:transform .15s;
  flex:none;width:13px}
details[open] .pijl{transform:rotate(90deg)}
.stip{width:9px;height:9px;border-radius:50%;flex:none}
.stip.groen{background:var(--groen)}.stip.grijs{background:var(--beton)}
.stip.oranje{background:var(--oranje)}.stip.rood{background:var(--rood)}
summary h3{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.06em;
  flex:1;text-transform:uppercase}
summary .aantal{font-family:var(--display);font-size:19px;font-weight:700;color:var(--beton)}
.tabel{width:100%;border-collapse:collapse;border-top:1px solid var(--lijn)}
.tabel th{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--beton);text-align:left;padding:8px 9px;
  border-bottom:1px solid var(--lijn);background:var(--papier)}
.tabel td{padding:8px 9px;border-bottom:1px solid var(--lijn);font-size:13.5px}
.tabel td.num,.tabel th.num{text-align:right;font-family:var(--display);font-size:14px;font-weight:600}
.nr{font-family:var(--display);font-weight:600;font-size:14px;color:#5A5F66}
.wijze{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;border-radius:2px}
.wijze.k{background:rgba(0,149,79,.13);color:var(--groen)}
.wijze.n{background:rgba(217,119,6,.13);color:var(--oranje)}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--asfalt);cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--papier);
  border:1px solid var(--lijn);border-radius:2px;padding:2px 4px 2px 7px;font-size:12.5px}
.chip button{border:0;background:none;cursor:pointer;color:var(--beton);font-size:15px;
  line-height:1;padding:0 3px}
.chipinfo{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:3px 7px;border-radius:2px}
.chipinfo.ok{background:rgba(0,149,79,.14);color:var(--groen)}
.chipinfo.mis{background:rgba(217,119,6,.14);color:var(--oranje)}
.koppel{font-family:var(--body);font-size:16px;padding:4px 6px;border:1px solid var(--lijn);
  border-radius:3px;background:var(--wit);max-width:150px}
.smal{display:none}


/* ── nieuws en inhoud ── */
.nieuwsbanner{display:block;width:100%;text-align:left;background:var(--asfalt-2);
  color:var(--krijt);border:0;border-left:4px solid var(--merk);cursor:pointer;
  padding:13px 18px;margin-bottom:10px}
.nieuwsbanner .label{display:block;margin-bottom:3px}
.nieuwsbanner b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.03em;
  display:block;line-height:1.25}
.nieuwsbanner em{font-style:normal;font-size:12.5px;color:var(--merk);margin-top:4px;display:block}
.nieuwsitem{overflow:hidden}
.nieuwsfoto{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.nieuws-tekst{padding:16px 18px 18px}
.nieuws-tekst h2{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:.02em;
  line-height:1.15;margin:4px 0 10px}
.nieuws-tekst p,.tekstblok p{font-size:14.5px;line-height:1.7;margin-bottom:12px;color:#3A3F46}
.nieuws-tekst p:last-child,.tekstblok p:last-child{margin-bottom:0}
.tekstblok{padding:16px 18px 20px}
.tekst-kop{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.05em;
  margin:16px 0 6px}
.tekstblok a,.nieuws-tekst a{color:var(--merk)}
.subkop-klein{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.02em;margin-bottom:9px}
.bh-namen{display:flex;gap:8px;margin-bottom:10px}
.bh-namen .vld{flex:1;margin-bottom:0}
.bh-namen .bh-smal{flex:0 0 30%}
@media(max-width:520px){.bh-namen{flex-wrap:wrap}.bh-namen .vld{flex:1 1 100%}.bh-namen .bh-smal{flex:1 1 100%}}
/* ── bewerken (renner + deelnemer, tekstcorrecties) ── */
.mini-bew{font-size:15px;line-height:1;border:1px solid var(--lijn);background:var(--wit);color:#5A5F66;
  padding:6px 9px;border-radius:6px;cursor:pointer;flex:none;margin-right:6px}
.dd-bewerk{background:none;border:0;color:var(--merk);font-weight:600;font-size:12.5px;cursor:pointer;padding:0}
.bewerkrij{gap:10px;flex-wrap:wrap}
.bewerkvelden{display:flex;gap:8px;flex:1;min-width:200px}
.bewerkvelden input{flex:1;min-width:90px;padding:9px 10px;font-size:14px;border:1px solid var(--lijn);border-radius:7px}
.bewerkknoppen{display:flex;gap:6px;flex:none}
.naamrij3{display:flex;gap:8px;margin-bottom:11px}
.naamrij3 .vld{flex:1;margin-bottom:0}
.naamrij3 .vld.smal{flex:0 0 30%}
@media(max-width:520px){.naamrij3{flex-wrap:wrap}.naamrij3 .vld,.naamrij3 .vld.smal{flex:1 1 100%}}
/* ── nieuwe-ronde wizard ── */
.nieuwe-ronde{background:linear-gradient(135deg,var(--asfalt),#31353C);color:#fff;border-radius:12px;padding:18px;margin-bottom:14px}
.nieuwe-ronde b{font-family:var(--display);font-size:20px;font-weight:700;display:block;margin-bottom:5px}
.nieuwe-ronde p{font-size:13px;color:#c7cad0;line-height:1.55;margin-bottom:13px;max-width:520px}
.nieuwe-ronde .knop.geel{width:auto;padding:12px 20px}
.wz-vak{min-height:40vh}
.wz-stappen{display:flex;gap:4px;overflow-x:auto;padding:10px 14px;background:#f4f5f2;border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:10}
.wz-stap{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;flex:none;padding:6px 10px;border-radius:20px;color:#5b6068;font-family:var(--body);font-size:13px;white-space:nowrap}
.wz-stap .wz-bol{width:22px;height:22px;border-radius:50%;border:2px solid var(--lijn);background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.wz-stap.nu{color:var(--asfalt);font-weight:700;background:rgba(41,171,226,.1)}
.wz-stap.nu .wz-bol{border-color:var(--merk);color:var(--merk)}
.wz-stap.af .wz-bol{background:var(--groen);border-color:var(--groen);color:#fff}
.wz-kop{padding:16px 2px 6px}
.wz-kop h2{font-family:var(--display);font-size:24px;font-weight:700}
.wz-kop p{font-size:13.5px;color:var(--beton);line-height:1.5;margin-top:2px;max-width:620px}
.wz-keuze{display:flex;gap:10px;margin-bottom:6px}
.wz-keuze button{flex:1;padding:12px;border:1.5px solid var(--lijn);background:#fff;border-radius:9px;font-family:var(--display);font-weight:700;font-size:15px;cursor:pointer;color:#41454b}
.wz-keuze button.aan{border-color:var(--merk);background:rgba(41,171,226,.07);color:#1c7aa8}
.wz-dubgrid{display:grid;gap:6px}
.wz-dubrij{display:flex;align-items:center;gap:8px;font-size:13.5px}
.wz-dubnr{flex:1;color:#33363b}
.wz-mk{width:34px;height:30px;border-radius:7px;border:1px solid var(--lijn);background:#fff;font-size:12px;font-weight:700;color:var(--beton);cursor:pointer;flex:none}
.wz-mk.aanp{border-color:var(--merk);background:rgba(41,171,226,.1);color:#1c7aa8}
.wz-mk.aang{border-color:var(--oranje);background:rgba(217,119,6,.1);color:var(--oranje)}
.wz-check{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--lijn)}
.wz-v{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex:none;margin-top:1px}
.wz-v.ja{background:var(--groen)}.wz-v.nee{background:var(--oranje)}
.wz-t{flex:1}.wz-t b{font-family:var(--display);font-size:15px}
.wz-t small{display:block;color:var(--beton);font-size:12.5px;margin-top:1px}
.wz-wijzig{background:none;border:0;color:var(--merk);font-weight:600;font-size:12.5px;cursor:pointer;flex:none}
.wz-finale{background:#fbfbfa;border:1px dashed var(--lijn);border-radius:10px;padding:15px;margin:14px 16px}
.wz-finale h3{font-family:var(--display);font-size:16px;margin-bottom:6px}
.wz-finale .knop{width:100%;margin-top:8px}
.wz-voet{display:flex;justify-content:space-between;gap:10px;padding:14px 18px;border-top:1px solid var(--lijn);background:#fafafa}
.wz-voet .knop{width:auto;min-width:130px}
@media(min-width:820px){.wz-finale{margin:14px 0}}
.uitnod-feit{width:100%;border-collapse:collapse;margin:6px 0 14px}
.uitnod-feit td{padding:8px 0;border-bottom:1px solid var(--lijn);font-size:14px}
.uitnod-feit td:first-child{color:var(--beton)}
.uitnod-feit td:last-child{text-align:right;font-weight:700;color:var(--asfalt)}
.teamlijst{display:grid}
.teamlid{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--lijn)}
.teamfoto{width:60px;height:60px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--papier);display:flex;align-items:center;justify-content:center}
.teamfoto img{width:100%;height:100%;object-fit:cover}
.teamfoto span{font-family:var(--display);font-size:26px;font-weight:700;color:var(--beton)}
.teamtekst b{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.03em}
.teamtekst em{font-style:normal;font-size:12px;color:var(--merk);display:block;
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--display);font-weight:600;
  margin-bottom:4px}
.teamtekst p{font-size:13.5px;line-height:1.6;color:#5A5F66}

.menurij{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--wit);border:0;border-bottom:1px solid var(--lijn);cursor:pointer;
  padding:14px 18px;font-family:var(--body)}
.menurij:hover{background:#FBFBFA}
.menurij>span:first-child{flex:1;min-width:0}
.menurij b{display:block;font-size:15px;font-weight:600}
.menurij em{display:block;font-style:normal;font-size:12.5px;color:var(--beton);margin-top:2px}
.pijlrechts{font-family:var(--display);font-size:22px;color:var(--beton);flex:none;
  line-height:1}
.terugrij{background:none;border:0;cursor:pointer;padding:6px 18px 12px;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--beton)}
.terugrij:hover{color:var(--asfalt)}

/* ── inhoudbeheer ── */
.subtabs{display:flex;flex-wrap:wrap;gap:5px;padding:14px 18px;background:var(--papier);
  border-bottom:1px solid var(--lijn)}
.subtabs button{border:1px solid var(--lijn);background:var(--wit);border-radius:2px;
  padding:7px 13px;cursor:pointer;font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#5A5F66}
.subtabs button[aria-pressed="true"]{background:var(--asfalt);border-color:var(--asfalt);
  color:var(--krijt)}
.vld{display:block;margin-bottom:14px}
.vld>span{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--beton);margin-bottom:5px}
.vld input,.vld textarea{width:100%;padding:11px 12px;font-family:var(--body);font-size:16px;
  border:1px solid var(--lijn);border-radius:3px;background:var(--papier);color:var(--asfalt)}
.vld textarea{line-height:1.6;resize:vertical}
.vld input:focus,.vld textarea:focus{outline:none;border-color:var(--asfalt);background:var(--wit)}
.opmaakknoppen{display:flex;gap:5px;margin-bottom:6px}
.opmaakknoppen button{border:1px solid var(--lijn);background:var(--papier);border-radius:2px;
  padding:5px 10px;cursor:pointer;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#5A5F66}
.opmaakknoppen button:hover{background:var(--geel);border-color:var(--geel);color:var(--asfalt)}
.voorbeeldvak{background:var(--papier);padding:14px 18px;border-bottom:1px solid var(--lijn)}
.knoprij{display:flex;gap:8px;flex-wrap:wrap}
.knoprij .knop{width:auto;flex:1;min-width:120px}
.knop.licht.rood{background:var(--wit);color:var(--rood);border-color:rgba(200,16,46,.3)}
.teamrij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-veld{width:100%;padding:6px 8px;font-family:var(--body);font-size:14px;
  border:1px solid var(--lijn);border-radius:2px;background:var(--papier)}
.mini-veld.kort{max-width:80px;text-align:right}
.bewerker{border-left:3px solid var(--merk)}

/* ═══ einduitslag / prijzen ═══ */
.uitslagkaart{border-top:3px solid var(--geel)}
.prijskop{padding:14px 18px;font-size:14px;line-height:1.5;color:#3A3F46;
  border-bottom:1px solid var(--lijn)}
.prijsrij{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--lijn)}
.prijsrij.jij{background:#FFFBEC}
.prijsplek{width:40px;height:40px;flex:none;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--display);font-size:19px;
  font-weight:700;background:var(--papier);color:var(--asfalt)}
.prijsrij.goud .prijsplek{background:#E7B416;color:#3A2E00}
.prijsrij.zilver .prijsplek{background:#C4C8CC;color:#2A2E33}
.prijsrij.brons .prijsplek{background:#CD8B4E;color:#3A2200}
.prijsnaam{flex:1;min-width:0}
.prijsnaam b{font-family:var(--display);font-size:17px;font-weight:600;display:block;
  line-height:1.2}
.prijsnaam em{font-style:normal;font-size:12.5px;color:var(--beton)}
.prijsptn{text-align:right;font-family:var(--display);font-size:20px;font-weight:700;
  color:var(--asfalt)}
.prijsptn small{display:block;font-size:11px;font-weight:600;color:var(--beton);
  letter-spacing:.1em;text-transform:uppercase}

/* telefoonlink in de deelnemerslijst (beheer) */
.tellink{color:var(--merk);text-decoration:none;white-space:nowrap}
.tellink:hover{text-decoration:underline}

/* ═══ AI-hulp: zwevende knop + chatvenster ═══ */
#hulpbol{position:fixed;right:16px;bottom:78px;z-index:40;width:60px;height:60px;
  border:none;border-radius:50%;background:var(--asfalt);color:var(--krijt);
  box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:transform .15s ease,box-shadow .15s ease}
#hulpbol:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34)}
#hulpbol:active{transform:translateY(0)}
#hulpbol .fiets{width:34px;height:auto;color:var(--krijt)}
#hulpbol .vraagteken{position:absolute;top:-3px;right:-3px;width:24px;height:24px;
  background:var(--merk);color:#fff;border-radius:50%;font-family:var(--display);
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--asfalt)}
/* op desktop zit er geen onderbalk, dan mag de bol lager */
@media (min-width:820px){#hulpbol{bottom:20px;right:20px}}

#hulpbot{position:fixed;right:16px;bottom:78px;z-index:41;width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 120px));background:var(--papier);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.34);display:flex;flex-direction:column;overflow:hidden}
#hulpbot.verborgen{display:none}
@media (min-width:820px){#hulpbot{bottom:20px;right:20px}}
.hb-kop{background:var(--asfalt);color:var(--krijt);padding:12px 14px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.hb-titel{display:flex;align-items:center;gap:10px;min-width:0}
.hb-titel .fiets{width:30px;height:auto;flex:none;color:var(--krijt)}
.hb-titel b{font-family:var(--display);font-size:15px;display:block;line-height:1.1}
.hb-titel small{font-size:11.5px;color:var(--beton)}
.hb-sluit{background:none;border:none;color:var(--beton);font-size:17px;cursor:pointer;
  padding:4px 6px;line-height:1}
.hb-sluit:hover{color:var(--krijt)}
.hb-loop{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:var(--papier)}
.hb-bel{max-width:82%;padding:9px 12px;border-radius:13px;font-size:14px;line-height:1.5;
  word-wrap:break-word}
.hb-bel.bot{background:#fff;border:1px solid var(--lijn);align-self:flex-start;
  border-bottom-left-radius:4px}
.hb-bel.ik{background:var(--asfalt);color:var(--krijt);align-self:flex-end;
  border-bottom-right-radius:4px}
.hb-bel.bot b{color:var(--asfalt)}
.hb-tik{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;background:#fff;
  border:1px solid var(--lijn);border-radius:13px;border-bottom-left-radius:4px}
.hb-tik span{width:7px;height:7px;border-radius:50%;background:var(--beton);
  animation:hbtik 1.1s infinite}
.hb-tik span:nth-child(2){animation-delay:.18s}.hb-tik span:nth-child(3){animation-delay:.36s}
@keyframes hbtik{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.hb-onder{display:flex;gap:8px;padding:10px;border-top:1px solid var(--lijn);background:#fff}
.hb-onder input{flex:1;border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;
  font-size:16px;font-family:inherit;background:var(--papier)}
.hb-onder input:focus{outline:none;border-color:var(--merk)}
.hb-stuur{flex:none;width:42px;border:none;border-radius:10px;background:var(--merk);
  color:#fff;font-size:19px;cursor:pointer}
.hb-stuur:hover{filter:brightness(1.06)}
.hb-suggesties{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.hb-suggesties button{background:#fff;border:1px solid var(--lijn);border-radius:14px;
  padding:6px 11px;font-size:12.5px;color:var(--asfalt);cursor:pointer;font-family:inherit}
.hb-suggesties button:hover{border-color:var(--merk);color:var(--merk)}
.hb-mail{align-self:flex-start;margin-top:2px}
.hb-mail button{background:var(--asfalt);color:var(--krijt);border:none;border-radius:10px;
  padding:8px 13px;font-size:13px;cursor:pointer;font-family:inherit}

/* tip-blok in de contact-tab dat naar de assistent verwijst */
.hb-tip{background:#EAF6FC;border:1px solid #BFE3F4;border-radius:9px;padding:11px 13px;
  font-size:13px;line-height:1.55;color:#1C3E4C;margin:10px 0 4px}
.hb-tip b{color:var(--merk)}

/* ═══ Tour de France-tabblad ═══ */
.tour-melding{background:#FFF6E0;border:1px solid #F0D48A;border-radius:9px;
  padding:11px 13px;font-size:13px;line-height:1.55;color:#5A4A1C;margin:0 0 12px}
.tour-melding b{color:#3A2E00}
.tour-etappe{border-top:3px solid var(--merk)}
.tourklassement .kaart-kop h2{display:flex;align-items:center;gap:9px}
/* truitjes als klein gekleurd blokje */
.trui{display:inline-block;width:16px;height:18px;border-radius:2px;flex:none;
  border:1px solid rgba(0,0,0,.15)}
.trui.geel{background:#F5D400}
.trui.groen{background:#1FA84F}
.trui.wit{background:#fff}
.trui.bollen{background:#fff;background-image:radial-gradient(#E3002B 2.4px,transparent 2.6px);
  background-size:6px 6px;background-position:1px 1px}

/* demo-kostenmelding boven in het chatvenster */
.hb-demo-melding{background:#FFF6E0;border-bottom:1px solid #F0D48A;color:#5A4A1C;
  font-size:12px;line-height:1.5;padding:9px 13px}

/* ═══ Profiel-hoek rechtsboven in de header ═══ */
.top-rechts{display:flex;align-items:center;gap:14px}
.profielhoek{position:relative}
.profielknop{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(250,250,248,.12);color:var(--krijt);display:flex;align-items:center;
  justify-content:center;padding:0}
.profielknop:hover{background:rgba(250,250,248,.2)}
.profielknop svg{width:24px;height:24px}
.admin-top .profielknop{background:rgba(255,255,255,.15);color:#fff}
.profieldrop{position:absolute;right:0;top:46px;background:var(--papier);border:1px solid var(--lijn);
  border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.22);min-width:170px;overflow:hidden;
  z-index:50;display:flex;flex-direction:column;padding:5px}
.profieldrop.verborgen{display:none}
.profieldrop button{background:none;border:none;text-align:left;padding:11px 13px;font-size:14.5px;
  font-family:inherit;color:var(--asfalt);cursor:pointer;border-radius:7px;width:100%}
.profieldrop button:hover{background:var(--papier-2,#EFEFEC)}

/* prominente "bijgewerkt t/m etappe"-vermelding boven de stand */
.stand-etappe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 12px}
.stand-etappe .pill{background:var(--asfalt);color:var(--krijt);font-family:var(--display);
  font-size:13px;letter-spacing:.04em;padding:6px 12px;border-radius:20px;font-weight:600}
.stand-etappe em{font-size:12.5px;color:var(--beton);font-style:normal}

/* ═══ Score-opbouw ═══ */
.score-top{background:var(--asfalt);color:var(--krijt);border-radius:14px;padding:18px 18px 16px;
  margin-bottom:14px}
.score-totaal{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.score-totaal b{font-family:var(--display);font-size:38px;font-weight:700;line-height:1;color:#fff}
.score-totaal span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--beton)}
.score-top p{font-size:13px;line-height:1.55;color:rgba(250,250,248,.72);margin:0}
.score-link{width:100%;background:var(--wit);border:1px solid var(--lijn);border-radius:11px;
  padding:13px 15px;margin:12px 0 0;cursor:pointer;display:flex;flex-direction:column;
  align-items:flex-start;gap:2px;text-align:left}
.score-link:hover{border-color:var(--merk)}
.score-link span{font-size:13px;color:var(--beton)}
.score-link b{font-size:14.5px;color:var(--merk)}
.score-etappe{border:1px solid var(--lijn);border-radius:10px;margin:8px 0;overflow:hidden;
  background:var(--wit)}
.score-etappe summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;
  align-items:center;gap:10px;font-family:var(--display);font-weight:600}
.score-etappe summary::-webkit-details-marker{display:none}
.score-etappe .pijl{font-size:10px;color:var(--beton);transition:transform .15s}
.score-etappe[open] .pijl{transform:rotate(90deg)}
.score-etappe .se-titel{flex:1}
.score-etappe .se-ptn{color:var(--merk);font-weight:700}
.se-regels{border-top:1px solid var(--lijn)}
.se-regel{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--lijn2,#F0F0EE)}
.se-regel:last-child{border-bottom:none}
.se-regel.se-leeg{opacity:.5}
.score-etappe .se-aantal{color:var(--beton);font-weight:700;font-size:14px}
.se-plek{width:34px;font-family:var(--display);font-weight:700;color:var(--beton);font-size:13px}
.se-naam{flex:1;font-size:14px}
.se-naam em{display:block;font-size:12px;color:var(--beton);font-style:normal}
.se-p{font-weight:700;color:var(--asfalt)}
.score-etappe .se-p{color:var(--merk)}

/* ═══ Status / fasebeheer (beheer) ═══ */
.status-kop{background:var(--asfalt);color:var(--krijt);border-radius:14px;padding:16px 18px;
  margin:14px 18px}
.status-nu small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--beton)}
.status-nu b{display:block;font-family:var(--display);font-size:22px;font-weight:700;color:#fff;
  margin-top:2px}
.status-cijfers{display:flex;gap:22px;margin-top:14px;border-top:1px solid rgba(250,250,248,.14);
  padding-top:12px}
.status-cijfers b{font-family:var(--display);font-size:20px;font-weight:700;color:#fff;display:block}
.status-cijfers small{font-size:11.5px;color:var(--beton)}
.tijdlijn{padding:6px 4px}
.fase{display:flex;align-items:flex-start;gap:13px;padding:11px 14px;position:relative}
.fase:not(:last-child)::before{content:"";position:absolute;left:31px;top:34px;bottom:-6px;
  width:2px;background:var(--lijn)}
.fase.gedaan:not(:last-child)::before{background:var(--merk)}
.fase-stip{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:14px;
  background:var(--papier-2,#EFEFEC);color:var(--beton);border:2px solid var(--lijn);z-index:1}
.fase.gedaan .fase-stip{background:var(--merk);color:#fff;border-color:var(--merk)}
.fase.nu .fase-stip{background:var(--asfalt);color:#fff;border-color:var(--asfalt)}
.fase-tekst{flex:1;padding-top:2px}
.fase-tekst b{font-family:var(--display);font-size:15px;font-weight:600}
.fase.komt .fase-tekst b{color:var(--beton)}
.fase-tekst p{font-size:12.5px;color:var(--beton);line-height:1.5;margin:2px 0 0}
.fase .badge{margin-top:3px}
.status-acties{padding:6px 18px 16px}
.status-actie{margin-bottom:14px}
.status-actie:last-child{margin-bottom:0}
.status-actie .knop{width:100%}
.status-actie p{font-size:12.5px;color:var(--beton);line-height:1.5;margin:6px 2px 0}
.status-actie.mail .knop{text-align:left}
.status-info{background:var(--papier-2,#EFEFEC);border-radius:10px;padding:13px 15px;margin-bottom:14px}
.status-info b{font-family:var(--display);font-size:15px}
.status-info p{font-size:13px;color:#5A5F66;line-height:1.55;margin:4px 0 0}

/* Sluiting inplannen (Status-tab) */
.plan-invoer{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.plan-invoer label{flex:1;min-width:180px;font-size:12.5px;color:var(--beton);
  display:flex;flex-direction:column;gap:5px}
.plan-invoer input{font-size:15px;padding:10px 12px;border:1px solid var(--lijn);
  border-radius:9px;background:var(--wit);font-family:inherit;color:var(--asfalt)}
.plan-invoer .knop{width:auto;padding-left:22px;padding-right:22px}
.plan-actief{display:flex;align-items:flex-start;gap:12px;background:#FFF7E6;
  border:1px solid #F0D68A;border-radius:11px;padding:13px 15px;margin-bottom:14px}
.plan-actief small{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#8A6D1A}
.plan-actief b{display:block;font-family:var(--display);font-size:16px;margin:2px 0 3px}
.plan-actief em{font-size:12.5px;color:#5A5F66;font-style:normal;line-height:1.5}
.plan-actief .mini{flex:none}

/* ═══ Import (rennerslijst + ploegen via Excel/CSV) ═══ */
.importkaart .blok{padding:2px 2px 4px}
.importtekst{font-size:13.5px;color:#5A5F66;line-height:1.55;margin:0 0 14px}
.spelkiezer{display:flex;gap:9px;margin-bottom:14px}
.spelknop{flex:1;padding:11px 10px;border:2px solid var(--lijn);border-radius:10px;
  background:var(--wit);font-family:inherit;font-size:14px;font-weight:600;color:#5A5F66;cursor:pointer}
.spelknop.actief{border-color:var(--merk);background:#F4FBFE;color:var(--asfalt)}
.importknoppen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.importknoppen .knop{width:auto;flex:1;min-width:150px;padding:13px 14px}
.importlabel{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.importbezig{font-size:13.5px;color:var(--beton);padding:12px 2px 2px}
.importfout{font-size:13.5px;color:var(--rood);padding:12px 2px 2px;line-height:1.5}
.ctrl-blok{display:flex;align-items:flex-start;gap:11px;background:var(--papier2,#EFEFEC);
  border-radius:10px;padding:12px 14px;margin-top:11px}
.ctrl-blok.ok{background:#E7F5EE}
.ctrl-blok.let{background:#FDF3E7}
.ctrl-blok.fout{background:#FBECEC;display:block}
.ctrl-blok b{font-family:var(--display);font-size:14.5px;display:block}
.ctrl-blok span{font-size:12.5px;color:#5A5F66}
.ctrl-blok p{font-size:12.5px;color:#5A5F66;margin:3px 0 0;line-height:1.5}
.ctrl-ico{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;color:#fff;margin-top:1px}
.ctrl-ico.ok{background:var(--groen)}
.ctrl-ico.let{background:var(--oranje)}
.ctrl-detail{background:#FDF3E7;border-radius:8px;padding:8px 12px;font-size:12px;
  color:#8A5A12;margin-top:7px;line-height:1.5}
.knop.breed{width:100%;margin-top:13px}

/* ═══ Hall of Fame ═══ */
.hof-held{background:var(--asfalt);color:var(--krijt);border-radius:16px;padding:26px 20px 22px;
  text-align:center;margin-bottom:14px;position:relative;overflow:hidden}
.hof-held::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(245,197,24,.18),transparent 62%)}
.hof-pokaal{font-size:46px;line-height:1;margin-bottom:8px;position:relative}
.hof-jaar{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--geel);
  font-weight:700;position:relative}
.hof-naam{font-family:var(--display);font-size:26px;font-weight:700;margin:4px 0 2px;
  color:#fff;position:relative}
.hof-ploeg{font-size:15px;color:rgba(250,250,248,.72);position:relative}
.hof-cijfers{display:flex;justify-content:center;gap:26px;margin-top:16px;
  padding-top:14px;border-top:1px solid rgba(250,250,248,.14);position:relative}
.hof-cijfers span{display:flex;flex-direction:column;font-size:11.5px;color:var(--beton);
  letter-spacing:.02em}
.hof-cijfers b{font-family:var(--display);font-size:20px;color:#fff;font-weight:700}

/* ═══ Beheer: deelnemer openklikken (lijst per account + detail) ═══ */
.regel.klikbaar{cursor:pointer;transition:background .12s}
.regel.klikbaar:hover{background:#F6F6F3}
.regel.actief{background:#F1F1EE;box-shadow:inset 3px 0 0 var(--geel)}
.telpil{font-family:var(--display);font-size:11px;font-weight:700;background:var(--asfalt);
  color:var(--krijt);padding:2px 7px;border-radius:10px;margin-left:6px;letter-spacing:.03em;
  white-space:nowrap}
.chev{flex:none;color:#B6BAC0;font-size:18px;width:12px;text-align:center}
.pill{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 10px;border-radius:20px;flex:none;white-space:nowrap}
.pill.open{background:rgba(200,16,46,.12);color:var(--rood)}
.pill.betaald{background:rgba(0,149,79,.13);color:var(--groen)}
.pill.deels{background:rgba(217,119,6,.14);color:var(--oranje)}
.dd-terug{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#4A4F56;padding:14px 18px 12px}
.dd-terug:hover{color:var(--asfalt)}
.dkop{background:var(--asfalt);color:var(--krijt);border-radius:4px;padding:16px;margin:0 18px 12px}
.dkop .num{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--merk-dof)}
.dkop h2{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.02em;
  line-height:1.1;margin:3px 0 2px}
.dkop .sub{font-size:13px;color:rgba(250,250,248,.72)}
.dd-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:4px;
  margin:0 18px 12px;overflow:hidden}
.dd-kaart.ploegkaart{border-color:rgba(35,38,43,.2)}
.dd-kaart.extra-ploeg{border:1.5px dashed var(--merk);background:#F4FBFE}
.dd-kaart.extra-ploeg .knop{width:100%}
.dd-kaart.extra-ploeg.dicht{border-color:var(--lijn);background:var(--wit)}
.kkop{display:flex;align-items:center;gap:8px;padding:12px 14px 8px}
.kkop h3{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.03em;flex:1}
.kkop .telren{font-size:12px;color:var(--beton);font-weight:600}
.reg{display:flex;align-items:center;gap:12px;padding:9px 14px;border-top:1px solid var(--lijn);
  font-size:14px}
.reg .k{color:var(--beton);flex:1}
.reg .v{font-weight:600;text-align:right}
.reg .v a{color:var(--merk);text-decoration:none}
.betaalrij{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-top:1px solid var(--lijn)}
.betaalrij .info small{display:block;font-size:11px;color:var(--beton);text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}
.betaalrij .info b{font-family:var(--display);font-size:17px;font-weight:700}
.knopje{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border:0;border-radius:3px;padding:9px 14px;cursor:pointer;
  white-space:nowrap}
.knopje.zet{background:var(--groen);color:var(--wit)}
.knopje.terugzet{background:var(--wit);border:1px solid var(--lijn);color:#5A5F66}
.knopje.rood{background:var(--wit);border:1px solid rgba(200,16,46,.4);color:var(--rood)}
.mailstatus{padding:11px 0;color:var(--groen);font-size:13.5px;font-weight:600;border-top:1px solid var(--lijn)}
.mailstatus b{font-family:var(--display)}
.toekomst-note{background:var(--wit);border:1px dashed var(--lijn);border-radius:12px;padding:18px 18px;text-align:center}
.toekomst-note b{font-family:var(--display);font-size:17px}
.toekomst-note p{font-size:13.5px;color:var(--beton);line-height:1.55;margin-top:6px}
.dubbel-blok{background:rgba(245,197,24,.16);border-left:3px solid var(--geel);padding:9px 12px;border-radius:5px;margin:8px 0;font-size:14px;line-height:1.65}
.dubbel-blok em{color:var(--beton);font-style:italic}
.euro{position:relative}
.euro .e{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--beton);font-weight:600;pointer-events:none}
.euro input{width:100%;padding:10px 12px 10px 24px;font-size:16px;border:1px solid var(--lijn);border-radius:7px;background:var(--wit);font-family:var(--body)}
.eindprijs-rij{display:flex;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid var(--lijn)}
.eindprijs-rij .pl{font-family:var(--display);font-weight:700;width:74px}
.eindprijs-rij .euro{flex:1}
.eindprijs-rij .weg{background:none;border:0;color:var(--rood);font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
.knop.klein{width:auto;padding:9px 16px;font-size:13px}
.chip-invoeg{background:rgba(41,171,226,.12);color:#1c7aa8;border:1px solid rgba(41,171,226,.3);border-radius:6px;
  padding:3px 9px;font-size:12px;font-weight:600;cursor:pointer;margin-left:6px;font-family:var(--body)}
.kenmerk{font-family:var(--display);font-weight:700;color:var(--merk)}
.ploegtitel{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--papier);
  border-bottom:1px solid var(--lijn)}
.ploegtitel h4{font-family:var(--display);font-size:16px;font-weight:700;flex:1}
.dd-kaart .renner{padding-top:7px;padding-bottom:7px}
.dd-meer{padding:10px 14px;border-top:1px solid var(--lijn);font-size:12.5px;color:var(--beton)}

/* Etappe-switcher (deelnemer): strip om tussen afgeronde etappes te wisselen */
.etappekies{margin:0 0 14px}
.etappekies>small{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--beton);display:block;margin-bottom:7px}
.strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:5px}
.strip::-webkit-scrollbar-thumb{background:#c3c5c1;border-radius:3px}
.strip button{flex:none;min-width:40px;padding:9px 8px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:9px;cursor:pointer;font-family:var(--display);
  font-size:18px;font-weight:700;color:#5A5F66;line-height:1;text-align:center}
.strip button[aria-pressed="true"]{background:var(--geel);border-color:var(--geel);color:var(--asfalt)}

/* Puntentelling onder elkaar (Hulp) */
.punt-lijst{padding:2px 0}
.punt-rij{display:flex;align-items:center;justify-content:space-between;
  padding:9px 18px;border-bottom:1px solid var(--lijn)}
.punt-rij:last-child{border-bottom:0}
.punt-rij span{font-size:14px;color:#41454b}
.punt-rij b{font-family:var(--display);font-size:18px;font-weight:700}
.punt-rij.podium b{color:var(--merk)}

/* "Hoe werkt het?" als geopende FAQ-vraag met genummerde stappen */
details.faq-hoe .antwoord{padding-left:18px}
.faq-stappen{padding-top:2px}
.faq-stap{display:flex;gap:11px;padding:6px 0}
.faq-stap .nr{flex:none;width:23px;height:23px;border-radius:50%;background:var(--merk);color:#fff;
  font-family:var(--display);font-weight:700;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.faq-stap>div>b{display:block;font-size:14px;color:var(--asfalt)}
.faq-stap p{font-size:13px;line-height:1.5;color:#5A5F66;margin:2px 0 0}
.faq-stap p b{color:var(--asfalt);font-weight:600}

/* Uitvallers per etappe — deelnemer (onder de etappe-uitslag) */
.uitval{border-top:2px solid var(--lijn);background:#faf7f2}
.uitval-kop{padding:11px 18px 5px;font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rood)}
.uitval-r{display:flex;align-items:center;gap:11px;padding:7px 18px}
.uitval-r:last-child{padding-bottom:13px}
.uitval-r .dot{width:7px;height:7px;border-radius:50%;background:var(--rood);flex:none}
.uitval-r .naam{font-size:14px;line-height:1.25}
.uitval-r .naam em{display:block;font-style:normal;color:var(--beton);font-size:12px}

/* Uitvallers per etappe — beheer (bij de uitslag-invoer) */
#a-uitval.uitvalkaart{margin-top:14px}
.uitval-zoek{padding:12px 18px 6px}
.uitval-chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 18px 16px}
.uitval-chip{display:flex;align-items:center;gap:7px;background:rgba(200,16,46,.10);
  border:1px solid rgba(200,16,46,.3);border-radius:20px;padding:5px 7px 5px 12px;font-size:13.5px}
.uitval-chip b{font-weight:600}
.uitval-chip .x{width:19px;height:19px;border-radius:50%;background:var(--rood);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;line-height:1}
.uitval-leeg{padding:2px 18px 16px;color:var(--beton);font-size:13px}

/* Melding/bevestiging-venster in de huisstijl (vervangt browser-popups) */
.modaal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modaal.verborgen{display:none}
.modaal-waas{position:absolute;inset:0;background:rgba(20,22,25,.45)}
.modaal .venster{position:relative;width:340px;max-width:100%;background:var(--wit);
  border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.32);
  animation:modaalOp .16s ease-out}
@keyframes modaalOp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.venster-top{height:5px;background:var(--geel)}
.venster-body{padding:20px 20px 8px}
.venster-body h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.venster-body p{font-size:14px;line-height:1.55;color:#4a4e54}
.venster-knoppen{display:flex;gap:9px;padding:14px 20px 18px}
.venster-knoppen .knop{flex:1;font-size:15px;padding:12px;border-radius:8px}

/* Zoeken in de Stand (naam/ploeg/bedrijf/subpoule) + subpoule-overzicht */
.zoekkaart{margin-bottom:12px}
.zoekrij-stand{padding:12px 16px}
.zoekrij-stand input{width:100%;padding:12px 13px;font-size:16px;font-family:var(--body);
  border:1px solid var(--lijn);border-radius:8px;background:var(--papier)}
.zoekrij-stand input:focus{outline:none;border-color:var(--asfalt);background:var(--wit)}
.zoek-sub{padding:0 16px 12px}
.zoek-sub .knop{font-size:14px;padding:11px}
.zoekkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 16px 6px;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.02em}
.zoekkop span{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--beton)}
.zoekleeg{padding:12px 16px 16px;color:var(--beton);font-size:13.5px}
.rij .subrang{font-size:12px;color:var(--beton);width:auto;text-align:right;white-space:nowrap}
.k-hint{display:block;margin-top:5px;font-size:12px;color:var(--beton);line-height:1.5}

/* ═══ publieke landingspagina (punt 15) ═══ */
#s-publiek{background:var(--papier);min-height:100vh}
/* Balken zijn full-bleed; hun inhoud lijnt uit in één gecentreerde kolom, samen met #pub-inhoud. */
.pub-inner{max-width:640px;margin:0 auto;width:100%;padding:0 18px}
.pub-top{background:var(--asfalt);color:var(--krijt);padding:12px 0;position:sticky;top:0;z-index:30}
.pub-top .pub-inner{display:flex;align-items:center;justify-content:space-between}
.pub-merk{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:500;
  font-size:19px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,248,.9)}
.pub-merk b{color:var(--merk);font-weight:700}
.pub-merk .fiets{width:30px;height:auto;color:var(--krijt)}
.pub-knoppen{display:flex;gap:8px}
.pub-knoppen button{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;padding:7px 12px;border-radius:6px;cursor:pointer;border:0}
.pub-knoppen .pub-in{background:transparent;color:var(--krijt);border:1px solid rgba(250,250,248,.3)}
.pub-knoppen .pub-reg{background:var(--geel);color:var(--asfalt)}
.pub-hero{background:var(--asfalt-2);color:var(--krijt);padding:18px 0 20px;border-bottom:3px solid var(--geel)}
.pub-hero h1{font-family:var(--display);font-size:27px;font-weight:700;letter-spacing:.02em;line-height:1.1}
.pub-hero p{font-size:13.5px;color:var(--beton);margin:6px 0 13px;line-height:1.5}
.pub-doe{background:var(--geel);color:var(--asfalt);border:0;padding:12px 18px;border-radius:8px;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.pub-tabs{background:var(--wit);border-bottom:1px solid var(--lijn)}
.pub-tabs .pub-inner{display:flex;padding:0}
.pub-tabs button{flex:1;padding:12px 4px;background:none;border:0;border-bottom:3px solid transparent;
  cursor:pointer;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--beton)}
.pub-tabs button[aria-selected="true"]{color:var(--asfalt);border-bottom-color:var(--asfalt)}
#pub-inhoud{padding:14px 18px 40px;max-width:640px;margin:0 auto}
.pub-hint{background:#EAF3FB;border:1px solid rgba(41,171,226,.3);border-radius:9px;
  padding:9px 12px;font-size:12.5px;color:#2a4a5e;margin-bottom:11px;line-height:1.5}

/* ═══ deelnemer toevoegen (beheer, punt 15) ═══ */
.zoek-plus{display:flex;gap:8px}
.zoek-plus input{flex:1}
.mini-toevoeg{background:var(--asfalt);color:var(--wit);border:0;border-radius:3px;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  padding:0 13px;cursor:pointer;white-space:nowrap}
.tw-rij{display:flex;gap:10px}
.tw-rij .vld{flex:1}
.vld .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--beton);font-style:normal;font-size:11px}
.tw-note{border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.5;margin-top:2px}
.tw-note.groen{background:#EAF6EE;border:1px solid rgba(0,149,79,.3);color:#1e4a34}
.k-voor{background:var(--asfalt-2);border:1px solid var(--lijn);border-radius:8px;padding:10px 13px}
.k-voor span{display:block;font-family:var(--display);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--beton)}
.k-voor b{font-size:16px;color:var(--krijt)}
.k-voor em{display:block;font-style:normal;font-size:12.5px;color:var(--beton);margin-top:2px}

/* ═══════════ Uitslag-tab: etappe-accordeon (nieuwe opzet) ═══════════ */
#a-etappelijst{padding:14px 14px 40px}
/* ruimte onder de open kaart zodat de vaste "Uitslag vaststellen"-balk niets afdekt */
#a-etappelijst.heeft-open{padding-bottom:150px}
.et-leeg{background:var(--wit);border:1px dashed rgba(35,38,43,.28);border-radius:14px;
  padding:30px 20px;text-align:center}
.et-leeg h2{font-family:var(--display);font-size:22px;font-weight:700;margin-bottom:6px}
.et-leeg p{font-size:13px;color:var(--beton);line-height:1.5;margin-bottom:18px}
.et-plus{display:inline-flex;align-items:center;gap:9px;background:var(--asfalt);color:var(--wit);
  border:0;border-radius:9px;padding:13px 20px;font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.et-plus.onderaan{width:100%;justify-content:center;background:none;border:1px dashed rgba(35,38,43,.3);
  color:var(--asfalt);margin-top:4px}
.et-plus .cirkel{width:22px;height:22px;border-radius:50%;background:var(--geel);color:var(--asfalt);
  display:grid;place-items:center;font-size:18px;line-height:1;font-weight:700}
.etk{background:var(--wit);border:1px solid var(--lijn);border-radius:13px;overflow:hidden;margin-bottom:12px}
.etk.open{border-color:var(--merk);box-shadow:0 0 0 3px rgba(41,171,226,.12)}
.etk-kop{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer}
.etk-nr{width:30px;height:30px;border-radius:8px;background:var(--asfalt);color:var(--wit);
  font-family:var(--display);font-weight:700;font-size:16px;display:grid;place-items:center;flex-shrink:0}
.etk-kop .nm{flex:1;min-width:0}
.etk-kop .nm b{font-family:var(--display);font-size:17px;font-weight:700;display:block;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etk-kop .nm em{font-style:normal;font-size:12px;color:var(--beton)}
.etk-vink{color:var(--groen);font-size:18px;font-weight:700;flex-shrink:0}
.etk-slot{font-size:13px;flex-shrink:0;opacity:.6}
.etk-stip{width:9px;height:9px;border-radius:50%;background:var(--oranje);flex-shrink:0}
.etk-kop .chev{color:var(--beton);font-size:15px;flex-shrink:0}
.etk-body{border-top:1px solid var(--lijn)}
.etk-body .et-naam{padding:14px 15px 0;margin-bottom:0}
.etk-body .etappekop{background:transparent;padding:12px 15px 4px}
.etk-body .voetnoot{padding:0 15px 10px}
.et-verwijder{display:block;width:calc(100% - 30px);margin:2px 15px 16px;padding:10px;
  background:none;border:1px solid rgba(200,16,46,.4);color:var(--rood);border-radius:8px;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer}
.et-verwijder:hover{background:rgba(200,16,46,.06)}

/* Boot-splash: tot de opstartcheck klaar is tonen we op het inlogscherm alleen
   het merk (logo + naam), niet het inlog-/registreerformulier. Dat voorkomt een
   korte flits van het inlogscherm voordat de publieke pagina verschijnt. */
#s-auth.booting .auth-tabs,
#s-auth.booting #fout,
#s-auth.booting #dicht,
#s-auth.booting .site-voet,
#s-auth.booting .auth form{display:none}

/* Copyright-footer op de publieke pagina en het inlogscherm. Subtiel grijs,
   leesbaar op zowel de lichte publieke pagina als het donkere inlogscherm.
   Het jaartal wordt door kern.js op het huidige jaar gezet. */
.site-voet{text-align:center;color:var(--beton);font-size:12px;letter-spacing:.02em;padding:22px 16px 12px}
.site-voet .voet-links{margin-bottom:5px}
.site-voet a{color:var(--beton);text-decoration:none;border-bottom:1px solid transparent}
.site-voet a:hover{border-bottom-color:var(--beton)}
.site-voet .voet-scheid{opacity:.5;margin:0 7px}

/* Duidelijke secundaire knop (bijv. "Inschrijving heropenen"): met rand i.p.v. vlak wit */
.knop.rand{background:var(--wit);color:var(--asfalt);border:1.5px solid var(--asfalt)}
.knop.rand:hover{background:var(--asfalt);color:var(--wit)}
/* Markers op de ingeklapte etappe-kaart: 2× (dubbele punten) en € (dubbel prijzengeld) */
.etk-mrk{font-family:var(--display);font-weight:700;font-size:12px;line-height:1.35;
  padding:2px 7px;border-radius:6px;flex-shrink:0}
.etk-mrk.p{background:rgba(41,171,226,.15);color:var(--merk)}
.etk-mrk.g{background:rgba(245,197,24,.22);color:#8a6b00}

/* Puntentelling-editor in Instellingen: 10 compacte velden (plaats 1 t/m 10) */
.punt-invoer{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.punt-invoer label{display:flex;flex-direction:column;gap:3px}
.punt-invoer label span{font-family:var(--display);font-size:11px;font-weight:700;color:var(--beton);text-align:center;letter-spacing:.03em}
.punt-invoer input{width:100%;padding:8px 4px;text-align:center;font-size:15px;border:1px solid var(--lijn);border-radius:7px;background:var(--wit)}
@media(max-width:400px){.punt-invoer{gap:5px}.punt-invoer input{padding:7px 2px;font-size:14px}}

/* Bankafschrift-import: overzicht van het voorstel */
#b-bankuitslag .sectiekop{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#6a6f76;padding:14px 2px 2px}
#b-bankuitslag .rij{display:flex;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--lijn)}
#b-bankuitslag .rij .nm{flex:1;min-width:0}
#b-bankuitslag .rij .nm b{font-weight:600;font-size:14px}
#b-bankuitslag .rij .nm em{display:block;font-style:normal;font-size:12px;color:var(--beton);margin-top:1px}
#b-bankuitslag .bedr{font-family:var(--display);font-weight:700;font-size:15px}
#b-bankuitslag .pill{font-family:var(--display);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;font-weight:700;flex-shrink:0}
#b-bankuitslag .pill.g{background:rgba(0,149,79,.14);color:var(--groen)}
#b-bankuitslag .pill.b{background:var(--papier);color:var(--beton)}
#b-bankuitslag .knoprij{display:flex;gap:10px;padding:16px 0 2px}
#b-bankuitslag .knoprij .knop{flex:1}
.bank-waarschuw{background:rgba(41,171,226,.1);border-left:4px solid var(--merk);padding:11px 13px;
  border-radius:6px;font-size:13px;line-height:1.5;margin:10px 0 2px}
.bank-waarschuw b{color:var(--asfalt)}