/* 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:11px 58px 10px;position:sticky;top:0;z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.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:inherit;font-weight:700}
/* App-header: volledig logo (fiets + IMMERLOOTOUR + SINDS 1983), gestapeld en gecentreerd. */
.top .wordmark{flex-direction:column;align-items:center;letter-spacing:.06em}
.top .wordmark .fiets{height:28px;width:auto;margin:0 0 2px}
.top .wm-naam{font-size:21px;font-weight:700;line-height:.95;letter-spacing:.06em}
.top .wm-sinds{font-size:8px;font-weight:700;letter-spacing:.34em;padding-left:.34em;margin-top:3px;color:rgba(250,250,248,.6)}
.admin-top .wordmark{color:var(--wit)}
.admin-top .wordmark .fiets{color:var(--wit)}
.top .tag{position:absolute;left:16px;top:15px;font-family:var(--display);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--beton)}
.top .top-rechts{position:absolute;right:12px;top:11px}
.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;border-color:rgba(200,16,46,.4)}
.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}
/* Puntenblok in de stand: totaal met "+X" van de laatste etappe eronder (punt 1).
   De "+X" is blauw zodat het niet te verwarren is met het groene geldpilletje. */
.ptnblok{font-family:var(--display);width:56px;flex:none;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.04}
.ptnblok b{font-weight:600;font-size:20px;color:var(--asfalt)}
.ptnblok .plus{font-size:12px;font-weight:700;color:#2b59c2;margin-top:1px}
.rij.jij .ptnblok .plus{color:#214a9e}
.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}
/* "Toon meer"-knop onder de stand: toont telkens 100 ploegen extra. */
.stand-meer{width:100%;margin-top:10px;padding:13px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:11px;cursor:pointer;font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--asfalt)}
.stand-meer span{color:var(--beton);font-weight:600;letter-spacing:.04em}
.stand-meer:hover{background:var(--papier)}

/* ═══ kaart ═══ */
/* Op mobiel/tablet krijgt elke kaart een eigen vlak: zachte rand, ronde hoeken en
   een lichte schaduw, zodat secties niet in elkaar overlopen op de grijze achtergrond.
   Op desktop zet de media-query hieronder de hoeken weer strak (3px). */
.kaart{background:var(--wit);margin-bottom:12px;border-radius:11px;
  border:1px solid var(--lijn);box-shadow:0 1px 3px rgba(35,38,43,.07)}
.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-regels mogen over twee regels, zodat "uitgevallen vanaf etappe X" past. */
.renner .naam{white-space:normal;overflow:visible;text-overflow:clip}
.renner .naam em{white-space:normal}
.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)}

/* ═══ kiezer: wielerploeg-filter + populair ═══ */
.k-teams{display:flex;gap:6px;overflow-x:auto;padding:10px 18px 2px;background:var(--wit);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.k-teams:empty{display:none}
.k-chip{flex:none;border:1px solid var(--lijn);background:var(--wit);color:var(--asfalt);border-radius:20px;
  padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.k-chip.aan{background:var(--asfalt);color:#fff;border-color:var(--asfalt)}
.k-pop{margin-left:auto;flex:none;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--oranje);background:#FDEBD3;border-radius:4px;padding:2px 6px}

/* ═══ beheer: plak de uitslag ═══ */
.plak-rij{margin:2px 0 10px}
.plak-knop{width:100%}
.plak-vak{margin:0 0 12px}
.plak-vak.verborgen{display:none}
.plak-vak textarea{width:100%;min-height:118px;border:1px solid var(--lijn);border-radius:8px;padding:10px;
  font-family:inherit;font-size:14px;line-height:1.5;resize:vertical;background:var(--wit);color:var(--asfalt)}
.plak-knoppen{display:flex;gap:8px;margin-top:8px}
.plak-knoppen .knop{flex:1}
.plak-melding{font-size:12.5px;color:var(--beton);margin-top:8px;line-height:1.45}

/* ═══ Jouw duel ═══ */
.duel-start{display:flex;align-items:center;gap:11px;width:100%;margin-top:12px;padding:13px 15px;
  background:var(--asfalt);color:var(--krijt);border:0;border-radius:12px;cursor:pointer;text-align:left}
.duel-start .duel-ic{font-size:20px}
.duel-sttxt b{font-family:var(--display);font-size:16px;font-weight:700;display:block;letter-spacing:.01em}
.duel-sttxt small{font-size:12px;color:#aeb3d0}
.duel-start .duel-pijl{margin-left:auto;font-family:var(--display);font-size:22px;color:var(--geel)}
.duelkaart{margin-top:12px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;
  overflow:hidden;box-shadow:0 1px 3px rgba(35,38,43,.07)}
.duel-kop{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--asfalt);color:var(--krijt)}
.duel-kop .duel-ic{font-size:16px}
.duel-kop b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.02em}
.duel-toevoeg{margin-left:auto;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:7px;
  padding:5px 11px;font-family:var(--display);font-weight:600;font-size:13px;cursor:pointer}
.duel-rij{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--lijn)}
.duel-rang{font-family:var(--display);font-weight:700;font-size:14px;color:var(--beton);min-width:34px}
.duel-naam{flex:1;font-size:14px;font-weight:600;color:var(--asfalt);min-width:0}
.duel-naam em{display:block;font-style:normal;font-size:11.5px;color:var(--beton);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duel-gap{font-family:var(--display);font-weight:700;font-size:17px}
.duel-gap.plus{color:var(--groen)}.duel-gap.minus{color:var(--oranje)}.duel-gap.gelijk{color:var(--beton)}
.duel-weg{background:none;border:0;color:var(--beton);font-size:18px;line-height:1;cursor:pointer;padding:2px 2px 2px 4px}
.duel-vermist{padding:8px 14px;font-size:11.5px;color:var(--beton);border-bottom:1px solid var(--lijn)}
.duel-mail{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;background:none;border:0;
  cursor:pointer;font-size:12.5px;color:var(--asfalt);text-align:left}
.duel-sw{width:34px;height:20px;border-radius:11px;background:var(--beton);position:relative;flex:none;transition:background .15s}
.duel-sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.duel-mail.aan .duel-sw{background:var(--groen)}
.duel-mail.aan .duel-sw::after{left:16px}
.duel-dialog{max-width:360px;text-align:left}
.duel-dtitel{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.01em;margin:0 30px 12px 0}
.duel-zoekrij input{width:100%;padding:11px 13px;font-size:16px;font-family:var(--body);border:1px solid var(--lijn);
  border-radius:9px;background:var(--papier)}
.duel-zoekrij input:focus{outline:none;border-color:var(--asfalt);background:var(--wit)}
.duel-lijst{margin-top:10px;max-height:46vh;overflow-y:auto}
.duel-zrij{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--lijn)}
.duel-znaam{flex:1;font-size:14px;font-weight:600;color:var(--asfalt);min-width:0}
.duel-znaam em{display:block;font-style:normal;font-size:11.5px;color:var(--beton);font-weight:400}
.duel-vknop{flex:none;border:1px solid var(--lijn);background:var(--wit);color:var(--asfalt);border-radius:7px;
  padding:7px 12px;font-family:var(--display);font-weight:600;font-size:13px;cursor:pointer}
.duel-vknop.aan{background:var(--asfalt);color:#fff;border-color:var(--asfalt)}
.duel-dhint{font-size:12px;color:var(--beton);margin:10px 0 0}

/* ═══ onboarding "zo werkt het" ═══ */
.ob-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(12,14,30,.68);padding:22px;animation:dwsFade .2s ease both}
.ob-kaart{width:100%;max-width:330px;background:var(--asfalt);color:var(--krijt);border-radius:18px;
  padding:24px 22px 20px;box-shadow:0 18px 50px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}
.ob-label{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--geel)}
.ob-sub{font-size:13px;color:#c7cae0;margin:4px 0 14px}
.ob-stap{display:flex;gap:12px;align-items:flex-start;padding:7px 0}
.ob-n{width:24px;height:24px;border-radius:50%;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}
.ob-stap b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.01em}
.ob-stap small{display:block;color:#aeb3d0;font-size:12.5px;line-height:1.4;margin-top:1px}
.ob-knop{width:100%;margin-top:16px;padding:13px;border:0;border-radius:6px;background:var(--geel);color:var(--asfalt);
  font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:15px;cursor:pointer}

/* ═══ ploegdetail: renners van een andere deelnemer ═══ */
.detail-renners{margin-top:14px;text-align:left}
.pd-kop,.pd-sub{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--beton);margin:0 0 6px}
.pd-sub{margin-top:14px}
.pd-renner{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--lijn)}
.pd-renner:last-child{border-bottom:0}
.pd-naam{flex:1;font-size:14px;color:var(--asfalt);font-weight:500}
.pd-naam em{font-style:normal;color:var(--beton);font-size:12px;display:block}
.pd-ptn{font-family:var(--display);font-weight:700;font-size:15px;color:var(--asfalt)}
.pd-renner.nul .pd-ptn{color:var(--beton)}
.pd-meer{width:100%;margin:10px 0 0;padding:9px;background:var(--papier);border:0;border-radius:8px;
  font-family:var(--display);font-weight:600;letter-spacing:.03em;color:var(--asfalt);font-size:13px;cursor:pointer}
.pd-slot{text-align:center;color:var(--beton);font-size:13px;line-height:1.5;padding:14px 4px}
.pd-lock{display:block;font-size:24px;margin-bottom:6px}
.pd-laden{text-align:center;color:var(--beton);font-size:13px;padding:12px}

/* ═══ makkelijker betalen: betaalblok + QR + statusbanner ═══ */
.inlegkaart{overflow:hidden}
.betaal-direct{display:block;text-decoration:none;text-align:center;margin:14px 18px 6px;width:auto}
.betaal-of{display:flex;align-items:center;gap:10px;margin:14px 18px 10px;
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--beton)}
.betaal-of::before,.betaal-of::after{content:"";flex:1;height:1px;background:var(--lijn)}
.qr-rij{display:flex;align-items:center;gap:14px;margin:0 18px 6px;padding:12px;
  background:var(--papier);border:1px solid var(--lijn);border-radius:10px}
.qr-img{width:120px;height:120px;flex:none;background:#fff;border-radius:6px;padding:4px;box-sizing:border-box}
.qr-tekst b{display:block;font-family:var(--display);font-size:16px;margin-bottom:3px}
.qr-tekst small{color:var(--beton);font-size:12px;line-height:1.45}
.kenmerkrij{background:#FFF9E3;border-top:1px solid #F0D98A}
/* statusbanner bovenaan Mijn ploeg */
.statusbanner.open{background:#FFF4E6;border:1px solid #F3C98A;border-left:4px solid var(--oranje);
  border-radius:12px;padding:14px 16px;margin-bottom:12px}
.statusbanner .sb-kop{display:flex;gap:10px;align-items:flex-start}
.statusbanner .sb-ic{font-size:22px;line-height:1.1}
.statusbanner .sb-tekst b{display:block;font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.01em}
.statusbanner .sb-tekst small{color:#8a6a32;font-size:13px;line-height:1.4}
.statusbanner .sb-mid{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.statusbanner .sb-bedrag{font-family:var(--display);font-size:24px;font-weight:700;color:var(--asfalt)}
.statusbanner .sb-x{font-family:var(--body);font-size:12px;font-weight:500;color:var(--beton);margin-left:6px}
.statusbanner .sb-kenmerk{font-family:'Courier New',Courier,monospace;font-size:13px;font-weight:700;
  color:var(--asfalt);background:var(--wit);border:1px solid #F0D98A;border-radius:6px;padding:4px 9px}
.statusbanner .sb-knop{background:var(--oranje);color:#fff;width:100%;border:0}

/* ═══ 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)}
/* Kopieer-kaart bovenaan de kiezer: duidelijk zichtbare snelkoppeling om een nieuwe
   ploeg te starten vanaf een kopie van een eerdere ploeg (alleen renners wisselen). */
.k-kopie{background:#EAF3FB;border:1px solid rgba(41,171,226,.35);border-radius:10px;
  padding:13px;margin-bottom:15px}
.k-kopie-kop{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px}
.k-kopie-ic{font-size:22px;line-height:1.1;flex:none}
.k-kopie-tekst b{display:block;font-family:var(--display);font-size:15.5px;font-weight:700;
  letter-spacing:.02em;color:var(--asfalt)}
.k-kopie-tekst small{display:block;font-size:12.5px;color:#3f5f72;margin-top:3px;line-height:1.45}
.k-kopie-knoppen{display:flex;flex-direction:column;gap:7px}
.k-kopie-knop{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--wit);border:1.5px solid rgba(41,171,226,.5);border-radius:8px;
  padding:11px 13px;cursor:pointer;font-family:var(--body);font-size:15px;color:var(--asfalt)}
.k-kopie-knop b{font-weight:700}
.k-kopie-knop:hover{border-color:var(--merk);background:#F5FBFE}
.k-kopie-plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--merk);color:var(--wit);font-weight:700;font-size:15px;flex:none;line-height:1}
.k-kopie-leeg{display:block;width:100%;margin-top:10px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:13px;color:var(--beton);text-decoration:underline;padding:4px}
.k-kopie-leeg:hover{color:var(--asfalt)}
.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;gap:7px;background:var(--wit);border-bottom:1px solid var(--lijn);
  position:sticky;top:49px;z-index:25;overflow-x:auto;scrollbar-width:none;
  padding:9px 14px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;padding:7px 14px;border:1px solid var(--lijn);border-radius:999px;
  background:var(--krijt);cursor:pointer;font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--beton);white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s}
.tabs button:hover{color:var(--asfalt);border-color:var(--beton)}
.tabs button[aria-selected="true"]{background:var(--geel);color:var(--asfalt);border-color:var(--geel)}
.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}
.arch-rij .arch-weg{background:none;border:0;cursor:pointer;color:var(--rood);
  font-family:var(--display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.me-rij{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--lijn)}
.me-rij .me-jaar{flex:none;width:34px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--beton)}
.me-rij .me-mid{flex:1;min-width:0}
.me-rij .me-mid b{font-family:var(--display);font-weight:700;font-size:15.5px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-rij .me-mid em{display:block;font-style:normal;font-size:12px;color:var(--beton);margin-top:1px}
.me-rij .me-rang{flex:none;background:var(--asfalt);color:var(--geel);font-family:var(--display);
  font-weight:700;font-size:14px;padding:3px 10px;border-radius:999px}
.naam em .wpl{color:var(--beton)}

/* ── 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}
/* Gewonnen prijzengeld onder de ploegnaam in de stand: groen labeltje, met ruimte
   na de naam. Lange ploegnamen krimpen met … zodat het bedrag altijd leesbaar blijft. */
.naam em.subgeld{display:flex;align-items:baseline;min-width:0}
.naam em.subgeld .pnaam{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geldpil{flex:none;margin-left:14px;background:#E3F2E9;color:#0B7A44;font-weight:700;
  font-size:11px;padding:1px 8px;border-radius:999px;white-space:nowrap}
.rij.jij .geldpil{background:rgba(255,255,255,.62);color:#0B7A44}
.geldpil .geldplus{font-weight:600;opacity:.8;margin-left:3px}
.reserve-uitleg{margin:2px 18px 8px;background:#EAF6FB;border:1px solid rgba(41,171,226,.35);
  border-radius:8px;padding:8px 11px;font-size:12px;color:#15688F;line-height:1.45}
.spelbadge{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.spelbadge.klassieker{background:var(--geel);color:#4a3b00}
.spelbadge.tour{background:#E3F2FB;color:#15688F}
.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}
/* Volledige breedte, automatische hoogte: de afbeelding houdt altijd zijn eigen
   verhouding (nooit uitgerekt of bijgesneden), ook op oudere telefoons/tablets
   die object-fit niet ondersteunen. */
.nieuwsfoto{display:block;width:100%;height:auto}
.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)}
/* Prijzengeldblok in het uitnodigingsvoorbeeld: plaatsen in twee kolommen,
   kolomsgewijs gevuld (grid-auto-flow:column), plus de dagprijs eronder. */
.uitnod-prijskop{font-weight:700;font-size:16px;color:var(--asfalt);margin:16px 0 2px}
.uitnod-prijssub{font-size:13px;color:var(--beton);margin:0 0 10px}
.uitnod-prijsgrid{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;
  column-gap:20px;margin:0 0 14px}
.uitnod-prijsrij{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--lijn)}
.uitnod-prijsrij .pp{min-width:26px;font-size:13px;color:var(--beton)}
.uitnod-prijsrij .pb{font-weight:700;font-size:15px;color:var(--asfalt)}
.uitnod-dag{background:var(--papier);border-radius:7px;padding:11px 14px;font-size:14px;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)}

/* ═══ Hall of Fame beheer: kaart per editie op telefoon/tablet ═══
   Op desktop blijft de tabel (.hof-desktop); daaronder de smallere schermen
   krijgen stapelkaarten (.hof-mobiel) zodat niets wordt afgekapt. */
.hof-mobiel{padding:0 18px}
.hof-kaart{padding:16px;margin:0 0 12px}
.hof-kkop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--lijn)}
.hof-ktitel{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hof-ksub{font-size:12px;color:var(--beton);white-space:nowrap}
.hof-velden{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px}
.hof-v{display:flex;flex-direction:column;min-width:0}
.hof-v.vol{grid-column:1/-1}
.hof-v label{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beton);margin-bottom:5px}
.hof-v .mini-veld{width:100%;max-width:none;text-align:left;padding:11px 12px;font-size:16px}
.hof-wegrij{margin-top:15px}
.hof-wegknop{width:100%;background:none;border:1px solid var(--lijn);color:var(--merk);
  border-radius:7px;padding:11px;font-family:var(--body);font-size:14px;font-weight:600;
  letter-spacing:.02em;cursor:pointer}
@media (min-width:820px){
  .hof-mobiel{display:none}
}
@media (max-width:819px){
  .hof-desktop{display:none}
}

/* ═══════════ foto's: profielfoto en ploegenfoto (beide rond) ═══════════ */
/* Ronde foto of initiaal in lijsten (stand, zoek, publiek). */
.fotobol{flex:none;align-self:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;
  border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  background:#e3dfd7;color:#8a8475;font-family:var(--display);font-weight:600;font-size:14px;line-height:1}
.fotobol img{width:100%;height:100%;object-fit:cover;display:block}
.fotobol.geen{border:1px solid var(--lijn)}
.fotobol.groot{width:84px;height:84px;min-width:84px;font-size:32px}
.rij.klikbaar{cursor:pointer}
.rij.klikbaar:hover{background:rgba(0,0,0,.025)}
.rij.jij.klikbaar:hover{background:var(--geel)}
/* Profielfoto rechtsboven in de hoek. */
.profielknop.heeft-foto{padding:0;overflow:hidden;background:none}
.profielknop.heeft-foto img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.admin-top .profielknop.heeft-foto{background:none}
/* Account-kaart met avatar. */
.acc{display:flex;align-items:center;gap:16px;padding:18px}
.avatar-knop{position:relative;width:78px;height:78px;flex:none;border:0;padding:0;
  border-radius:50%;cursor:pointer;background:#e3dfd7;overflow:visible}
.avatar-knop img{width:78px;height:78px;border-radius:50%;object-fit:cover;
  border:2px solid var(--lijn);display:block}
.avatar-leeg{width:78px;height:78px;border-radius:50%;border:2px solid var(--lijn);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:600;font-size:34px;color:#8a8475}
.avatar-cam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--asfalt);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;border:2px solid var(--wit)}
.acc-info{min-width:0}
.acc-naam{font-size:17px;font-weight:700;color:var(--asfalt)}
.acc-mail{font-size:13px;color:var(--beton);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.acc-acties{display:flex;gap:14px;margin-top:8px}
.minilink{background:none;border:0;padding:0;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--merk)}
.minilink.rood{color:var(--rood)}
/* Ploegfoto bij "Jouw ploegen". */
.ploegfoto-knop{flex:none;width:46px;height:46px;border-radius:50%;border:0;padding:0;
  cursor:pointer;overflow:hidden;background:#e3dfd7}
.ploegfoto-knop img{width:46px;height:46px;object-fit:cover;display:block}
.pf-leeg{display:flex;width:46px;height:46px;align-items:center;justify-content:center;
  color:#b0a99d;font-size:24px;border:1px dashed #c3bdb2;border-radius:50%;background:#faf9f6}
.regel .naam em a{color:var(--merk);cursor:pointer;text-decoration:none}
/* Bijsnij-venster en ploegdetails. */
.foto-overlay{position:fixed;inset:0;z-index:80;background:rgba(20,19,17,.55);
  display:flex;align-items:center;justify-content:center;padding:18px}
.foto-dialog{background:var(--wit);border-radius:14px;padding:22px 20px 20px;width:100%;
  max-width:330px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.foto-titel{font-size:18px;font-weight:700;color:var(--asfalt);text-align:center}
.foto-sub{font-size:13px;color:var(--beton);text-align:center;margin:4px 0 16px;line-height:1.45}
.foto-vlak{position:relative;margin:0 auto;overflow:hidden;border-radius:12px;background:#1a1816;
  touch-action:none}
.foto-bron{position:absolute;left:0;top:0;user-select:none;-webkit-user-drag:none;max-width:none}
.foto-ring{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);
  border-radius:50%;box-shadow:0 0 0 2000px rgba(26,24,22,.5);border:2px solid rgba(255,255,255,.9);
  pointer-events:none}
.foto-zoomrij{display:flex;align-items:center;gap:12px;margin:16px 2px 4px;color:var(--beton)}
.foto-zoom{flex:1}
.foto-knoppen{display:flex;gap:10px;margin-top:16px}
.foto-knoppen .knop{flex:1}
.foto-dialog.detail{text-align:center;position:relative}
.detail-sluit{position:absolute;right:12px;top:10px;background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;color:var(--beton)}
.detail-fotos{display:flex;justify-content:center;gap:22px;margin:6px 0 14px}
.detail-foto{display:flex;flex-direction:column;align-items:center;gap:6px}
.detail-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--beton)}
.detail-naam{font-size:18px;font-weight:700;color:var(--asfalt)}
.detail-ploeg{font-size:14px;color:var(--beton);margin-top:2px}
.detail-stat{display:flex;justify-content:center;gap:26px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--lijn)}
.detail-stat div{display:flex;flex-direction:column}
.detail-stat b{font-family:var(--display);font-size:22px;font-weight:600;color:var(--asfalt)}
.detail-stat span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--beton);margin-top:2px}

/* ═══════════ Uitvallers-tab (punt 2/3) ═══════════ */
.tekstlink{background:none;border:0;padding:0;color:var(--merk);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.uitval-hint{font-size:12.5px;color:var(--beton);line-height:1.5;padding:2px 2px 10px}
.uv-intro{background:#eef5ff;border:1px solid #cfe0f7;border-radius:10px;padding:12px 14px;
  font-size:13px;color:#2b4a7a;line-height:1.5;margin:14px 18px}
.uv-toevoeg{margin:0 18px 6px}
.uv-zoek{padding:10px 16px 16px;display:flex;flex-direction:column;gap:12px}
.uv-zoek .veld{position:relative}
.uv-vanaf{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--asfalt)}
.uv-vanaf select{padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;font-size:14px;background:#fff}
.uv-lijstkop{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--beton);margin:12px 20px 8px}
.uv-lijst{margin:0 18px 18px;overflow:hidden}
.uv-rij{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--lijn)}
.uv-rij:last-child{border-bottom:0}
.uv-dot{flex:none;width:34px;height:34px;border-radius:50%;background:#fdecec;color:var(--rood);
  display:flex;align-items:center;justify-content:center;font-size:16px}
.uv-mid{flex:1;min-width:0}
.uv-mid b{font-size:14.5px;color:var(--asfalt);display:block}
.uv-mid em{font-style:normal;font-size:12px;color:var(--beton)}
.uv-act{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.uv-terug{background:none;border:0;color:var(--merk);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}

/* ═══════════ Accounts-tab ═══════════ */
.acc-tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 18px}
.acc-tegel{background:#fff;border:1px solid var(--lijn);border-radius:9px;padding:10px 6px;text-align:center}
.acc-tegel b{display:block;font-family:var(--display);font-size:22px;font-weight:600;color:var(--asfalt)}
.acc-tegel span{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--beton)}
.acc-lijst{margin:0 18px 18px;overflow:hidden}
.acc-leeg{padding:22px;text-align:center;color:var(--beton);font-size:14px}
.acc-rij2{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--lijn);cursor:pointer}
.acc-rij2.open{background:#faf9f6}
.acc-rij2:hover{background:rgba(0,0,0,.02)}
.acc-ini{flex:none;width:40px;height:40px;border-radius:50%;background:#e3dfd7;color:#8a8475;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:17px}
.acc-mid2{flex:1;min-width:0}
.acc-mid2 b{font-size:15px;color:var(--asfalt);display:block}
.acc-em{font-size:12.5px;color:var(--beton);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-tags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.acctag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.02em}
.acctag.beheer{background:#e7eefb;color:#2b59c2}
.acctag.ploeg{background:#e2f3ea;color:#1b7a45}
.acctag.geen{background:#f3f0ea;color:#8a8475}
.acctag.schaduw{background:#fdf0e3;color:#b4712a}
.acc-laatst{font-size:11.5px;color:var(--beton);margin-top:4px}
.acc-chev{flex:none;color:#bdb7ac;font-size:20px}
.acc-open{background:#faf9f6;border-bottom:1px solid var(--lijn);padding:4px 16px 14px}
.acc-open .schakelrij{padding:11px 0;border-bottom:1px solid #efece5}
.acc-acties2{display:flex;gap:8px;margin-top:12px}
.acc-acties2 .knopje{flex:1}
.acc-acties2 .knopje.rood{border-color:#e3b9bb;color:#c0201f}

/* ═══ 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{height:34px;width: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{height:30px;width: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}

/* ═══ Eindstand (Tour afgerond) ═══ */
.finishbanner{display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--asfalt),var(--asfalt-2));color:var(--wit);
  border-radius:10px;padding:13px 15px;margin:2px 0 14px}
.finishbanner .vlag{font-size:26px;line-height:1;flex:none}
.finishbanner b{font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:.02em;display:block;line-height:1.15}
.finishbanner span{font-size:12.5px;color:rgba(201,204,224,.95);display:block;margin-top:2px}
.eind-voet{background:#eef7f1;border:1px solid rgba(0,149,79,.25);border-radius:9px;
  padding:13px 16px;margin:14px 18px;font-size:13.5px;line-height:1.55;color:var(--asfalt)}
.eind-voet b{color:var(--groen)}

/* ═══ Accenten: deelnemers vieren ═══ */
/* Prestatie-badges onder het bord op de Stand */
.prestatie{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 2px}
.prestatie-chip{display:inline-flex;align-items:center;gap:5px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:999px;padding:6px 12px;font-size:12.5px;
  font-weight:600;color:var(--asfalt)}
.prestatie-chip.geel{background:rgba(245,197,24,.18);border-color:rgba(245,197,24,.55)}
.prestatie-chip .pc-ic{font-size:14px;line-height:1}
/* Subpoule-koploper bovenaan het subpoule-overzicht */
.subkoploper{display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--asfalt),var(--asfalt-2));color:var(--wit);
  border-radius:12px;padding:12px 15px;margin:0 0 12px}
.subkoploper.jij{background:linear-gradient(135deg,#8a6d00,#b8941a)}
.subkoploper .kr{width:40px;height:40px;border-radius:10px;background:rgba(245,197,24,.95);
  color:var(--asfalt);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.subkoploper .kt b{font-family:var(--display);font-size:16px;display:block;line-height:1.15}
.subkoploper .kt small{font-size:11.5px;color:rgba(255,255,255,.8);display:block;margin-top:1px}
/* Gele-trui-glans op je eigen rij in het klassement */
.lijst .rij.jij{background:linear-gradient(100deg,#FFDE4A 0%,var(--geel) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 3px 0 0 #E8B800}

/* ═══ 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}
.prijs-rijtjes{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.prijs-chip{background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600;white-space:nowrap}
.prijs-chip em{font-style:normal;color:var(--beton);font-weight:700;margin-right:5px}
/* zwevend hulp-knopje rechtsonder (alleen in de ingelogde app) */
.hulp-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:var(--asfalt);color:#fff;
  box-shadow:0 8px 22px rgba(35,38,43,.33);display:flex;align-items:center;justify-content:center}
.hulp-fab:active{transform:scale(.96)}
.hulp-fab svg{width:25px;height:25px}
.hulp-menu{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;
  background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:0 12px 34px rgba(35,38,43,.24);
  overflow:hidden;width:262px;max-width:calc(100vw - 36px)}
.hulp-menu button{display:flex;align-items:center;gap:11px;width:100%;border:0;background:var(--wit);
  padding:12px 14px;cursor:pointer;text-align:left;border-top:1px solid var(--lijn)}
.hulp-menu button:first-child{border-top:0}
.hulp-menu button:active{background:#f2f4f6}
.hulp-menu .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex:none;background:#EAF6FB}
.hulp-menu .t b{display:block;font-size:14px;font-weight:600;color:var(--asfalt);line-height:1.25}
.hulp-menu .t em{font-style:normal;color:var(--beton);font-size:12px}
.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;display:flex;flex-direction:column;gap:7px}
.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}
/* Publieke header: volledig logo (fiets + IMMERLOOTOUR + SINDS 1983) als compacte,
   gestapelde lockup links; knoppen rechts. Zelfde logo-opbouw als overal, maar
   kleiner zodat het naast de in-/registreerknoppen past. */
.pub-top .pub-inner{display:flex;align-items:center;justify-content:space-between}
.pub-merk{display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(250,250,248,.9)}
.pub-merk b{color:inherit;font-weight:700}
.pub-merk .fiets{height:23px;width:auto;margin:0 0 2px;color:var(--krijt)}
.pub-merk .wm-naam{font-size:16px;font-weight:700;line-height:.95;letter-spacing:.05em}
.pub-merk .wm-sinds{font-size:7px;font-weight:700;letter-spacing:.3em;padding-left:.3em;margin-top:2px;color:rgba(250,250,248,.6)}
.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-teller is nu een kale houder; de opvallende balk zit in .pub-teller-a (variant A). */
.pub-teller{display:block;margin:0 0 13px}
.pub-teller.verborgen{display:none}
/* Deadline-teller — variant A, gedeeld tussen publiek en ingelogd (zie kern.js). */
.pub-teller-a,.app-teller{display:flex;align-items:center;gap:11px;border-radius:9px;padding:10px 13px}
.pub-teller-a .dt-ic,.app-teller .dt-ic{font-size:19px;flex:none;line-height:1}
.pub-teller-a .dt-tx b,.app-teller .dt-tx b{font-family:var(--display);font-size:16px;letter-spacing:.03em;
  text-transform:uppercase;display:block;line-height:1.1}
.pub-teller-a .dt-tx em,.app-teller .dt-tx em{font-style:normal;font-size:12px;display:block;margin-top:2px}
.dt-klok{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ═══════════ dagwinnaar-feestmoment (screensaver, 5 sec) ═══════════ */
.dws-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(12,15,30,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:dwsFade .25s ease both;cursor:pointer}
@keyframes dwsFade{from{opacity:0}to{opacity:1}}
.dws-kaart{width:100%;max-width:340px;background:var(--asfalt);color:var(--krijt);
  border:1px solid rgba(245,197,24,.4);border-radius:18px;padding:26px 22px 0;text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden;cursor:default;
  animation:dwsPop .35s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes dwsPop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
.dws-trui{width:78px;height:70px;margin:0 auto 10px;animation:dwsTrui .6s ease both}
@keyframes dwsTrui{from{transform:translateY(-10px) rotate(-7deg);opacity:0}to{transform:none;opacity:1}}
.dws-trui svg{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 12px rgba(245,197,24,.35))}
.dws-label{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--geel);line-height:1}
.dws-etappe{font-size:13px;color:#aeb3d0;margin-top:4px}
.dws-ikoon{width:74px;height:74px;margin:0 auto 10px;animation:dwsTrui .6s ease both}
.dws-ikoon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 12px rgba(0,149,79,.35))}
.feest-sub{font-size:12px;color:#c7cae0;margin:2px 0 4px}
.dws-hoofd{margin:16px 0 2px}
.dws-hoofd b{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:.02em;line-height:1.12;display:block}
.dws-hoofd em{font-style:normal;font-size:14px;color:#c7cae0;display:block;margin-top:4px}
.dws-feiten{display:flex;gap:10px;justify-content:center;margin:16px 0 8px}
.dws-feiten>div{flex:1;max-width:130px;background:rgba(255,255,255,.06);border-radius:10px;padding:10px 6px}
.dws-feiten b{font-family:var(--display);font-size:20px;font-weight:700;color:var(--geel);display:block;line-height:1.1}
.dws-feiten span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#aeb3d0}
.dws-uitleg{font-size:11.5px;color:#aeb3d0;margin:-2px 0 2px}
.dws-sluit{font-size:12px;color:#8e93ab;margin:10px 0 14px}
.dws-balk{height:4px;background:rgba(255,255,255,.12);margin:0 -22px}
.dws-balk span{display:block;height:100%;background:var(--geel);transform-origin:left;
  animation:dwsBalk 5s linear forwards}
@keyframes dwsBalk{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* Jouw Tour in cijfers (terugblik) */
.me-tb-knop{flex:none;background:var(--geel);color:var(--asfalt);border:0;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.02em;padding:6px 13px;cursor:pointer}
.tb-kaart{width:100%;max-width:360px;max-height:92vh;overflow-y:auto;background:var(--asfalt);color:var(--krijt);
  border:1px solid rgba(245,197,24,.4);border-radius:18px;padding:0 0 16px;cursor:default;
  box-shadow:0 24px 70px rgba(0,0,0,.5);animation:dwsPop .35s cubic-bezier(.2,.9,.3,1.3) both}
.tb-hero{background:linear-gradient(160deg,#1D2247,#2a3570);padding:20px 22px 16px;text-align:center;border-radius:18px 18px 0 0}
.tb-vlag{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--geel)}
.tb-ed{font-size:12px;color:#aeb6d6;margin-top:3px}
.tb-pl{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.1;margin:5px 0 2px}
.tb-sub{font-size:11.5px;color:#aeb6d6}
.tb-kiezer{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;padding:12px 16px 2px}
.tb-pil{background:rgba(255,255,255,.08);color:#c7cae0;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:12px;padding:5px 12px;cursor:pointer}
.tb-pil.on{background:var(--geel);color:var(--asfalt);border-color:var(--geel)}
.tb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 16px 4px}
.tb-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:11px 12px}
.tb-tile.vol{grid-column:1/3}
.tb-tile.acc{background:rgba(245,197,24,.14);border-color:rgba(245,197,24,.45)}
.tb-lab{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:10px;color:#aeb6d6}
.tb-val{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1;margin-top:2px;color:#fff}
.tb-val small{display:block;font-size:11px;font-weight:600;color:#aeb6d6;margin-top:1px;letter-spacing:0}
.tb-tile.g .tb-val{color:#4ade80}.tb-tile.r .tb-val{color:#ff8a8a}
.tb-deel{display:block;width:calc(100% - 32px);margin:14px 16px 0;background:var(--geel);color:var(--asfalt);border:0;
  border-radius:11px;font-family:var(--display);font-weight:700;font-size:16px;padding:13px;cursor:pointer}
.tb-sluit-knop{display:block;width:calc(100% - 32px);margin:9px 16px 0;background:transparent;color:#aeb6d6;
  border:1px solid rgba(255,255,255,.2);border-radius:11px;font-family:var(--display);font-weight:700;font-size:14px;padding:10px;cursor:pointer}
/* Publiek: poule in cijfers */
.pc-kaart .pc-sub{color:var(--beton);font-size:12.5px;padding:0 2px 6px;margin:0}
.pc-blok{margin:4px 0 10px}
.pc-lab{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;color:var(--beton);margin-bottom:6px}
.pc-pop{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.pc-pop .pc-nm{flex:none;width:40%;font-size:13px;font-weight:600;color:var(--asfalt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-pop .pc-bar{flex:1;height:10px;background:var(--papier);border-radius:999px;overflow:hidden}
.pc-pop .pc-bar i{display:block;height:100%;background:var(--merk);border-radius:999px}
.pc-pop .pc-pct{flex:none;width:40px;text-align:right;font-family:var(--display);font-weight:700;font-size:13px;color:var(--asfalt)}
.pc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.pc-tile{background:var(--papier);border:1px solid var(--lijn);border-radius:11px;padding:10px 12px}
.pc-tile .pc-lab{margin-bottom:3px}
.pc-tile .pc-val{font-family:var(--display);font-weight:700;font-size:18px;color:var(--asfalt);line-height:1.1}
.pc-tile .pc-cap{font-size:11px;color:var(--beton);margin-top:1px}
/* Beheer: nieuws-status badge */
.nieuws-badge{display:inline-block;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.03em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px}
.nieuws-badge.openbaar{background:rgba(0,149,79,.14);color:#0a6b3c}
.nieuws-badge.intern{background:rgba(139,144,153,.16);color:#5b6068}
.nieuws-badge.concept{background:rgba(217,118,6,.14);color:#9a5a08}
/* Publiek: laatste nieuws */
.pub-nieuws-kaart{margin:0}
.pub-nieuws-kaart .pn-item{padding:12px 0;border-top:1px solid var(--lijn)}
.pub-nieuws-kaart .pn-item:first-of-type{border-top:0;padding-top:4px}
.pub-nieuws-kaart .pn-foto{width:calc(100% - 36px);max-height:200px;border-radius:10px;overflow:hidden;background:var(--papier);margin:0 18px 9px}
.pub-nieuws-kaart .pn-foto img{width:100%;height:100%;max-height:200px;object-fit:cover;display:block}
.pub-nieuws-kaart .pn-tx{min-width:0;padding:0 18px}
.pub-nieuws-kaart .pn-tx>b{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.15;display:block}
.pub-nieuws-kaart .pn-datum{font-size:11px;color:var(--beton);margin:1px 0 6px}
.pub-nieuws-kaart .pn-body{font-size:13px;color:#3a3e49;line-height:1.5}
.pub-nieuws-kaart .pn-body p{margin:0 0 8px}
.pub-nieuws-kaart .pn-body p:last-child{margin-bottom:0}
.pub-nieuws-kaart .pn-body h2{font-family:var(--display);font-weight:700;font-size:15px;margin:8px 0 4px;color:var(--asfalt)}
.pub-nieuws-kaart .pn-body a{color:var(--merk)}
.pub-nieuws-kaart .pn-cta{width:calc(100% - 36px);margin:14px 18px 2px}
/* Publiek: gevulde gele balk op de donkere hero; rood op de laatste dag. */
.pub-teller-a{background:var(--geel);color:var(--asfalt)}
.pub-teller-a .dt-tx em{color:#4a4320;font-weight:500}
.pub-teller-a.urgent{background:var(--rood);color:#fff}
.pub-teller-a.urgent .dt-tx em{color:#ffdcdc}
/* Ingelogd: licht kaartje met gele accentrand, past bij het dashboard; rood op de laatste dag. */
.app-teller{background:var(--wit);border:1px solid var(--lijn);border-left:4px solid var(--geel);margin:0 0 12px}
.app-teller .dt-tx em{color:#6a6f78}
.app-teller.urgent{border-left-color:var(--rood)}
.app-teller.urgent .dt-tx b{color:var(--rood)}
.pub-cta{display:flex;gap:9px;flex-wrap:wrap}
.pub-stand-knop{background:transparent;color:var(--krijt);border:1.5px solid rgba(255,255,255,.35);
  padding:12px 18px;border-radius:8px;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
/* landingsblok voor bezoekers tijdens de inschrijving (punt 10) */
#pub-landing{background:var(--papier)}
.pub-land{padding:18px 18px 8px}
.land-blok{margin-bottom:18px}
.land-blok h2{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--beton);text-align:center;margin-bottom:12px}
.land-stappen{display:flex;gap:12px}
.land-stap{flex:1;background:var(--wit);border:1px solid var(--lijn);border-radius:11px;padding:13px 11px;text-align:center}
.land-stap .n{width:28px;height:28px;border-radius:50%;background:var(--merk);color:#fff;
  font-family:var(--display);font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 7px}
.land-stap b{display:block;font-size:13px;margin-bottom:3px}
.land-stap p{font-size:11.5px;color:#5c616a;line-height:1.4;margin:0}
.land-beelden{display:flex;gap:10px}
.land-beeld{flex:1;background:var(--wit);border:1px solid var(--lijn);border-radius:11px;overflow:hidden;text-align:center}
.land-beeld .shot{height:200px;overflow:hidden;background:#eceddf;border-bottom:1px solid var(--lijn)}
.land-beeld .shot img{width:100%;display:block}
.land-beeld span{display:block;font-size:12.5px;color:#3c4046;font-weight:600;padding:9px 6px}
.land-hof{width:100%;display:flex;align-items:center;gap:11px;background:var(--wit);border:1px solid var(--lijn);
  border-radius:11px;padding:12px 14px;cursor:pointer;text-align:left;margin-bottom:6px}
.land-hof .cup{font-size:22px;flex:none}
.land-hof .t{flex:1}.land-hof .t b{font-family:var(--display);font-size:15px;display:block}
.land-hof .t em{font-style:normal;color:var(--beton);font-size:11.5px}
.land-hof .pijl{color:var(--beton);font-size:20px}
@media(max-width:560px){
  .land-stappen{flex-direction:column}
  .land-beelden{flex-direction:column}
  .land-beeld .shot{height:240px}
}
/* Twee duidelijk herkenbare tab-knoppen: allebei een omrande witte knop met wat
   ruimte ertussen, de actieve gevuld in navy. Zo is in één oogopslag te zien dat
   het twee aparte tabs zijn én welke aanstaat. */
.pub-tabs{background:var(--papier);padding:10px 0;border-bottom:1px solid var(--lijn)}
.pub-tabs .pub-inner{display:flex;gap:8px;padding:0 18px}
.pub-tabs button{flex:1;padding:12px 4px;background:var(--wit);border:1.5px solid rgba(20,24,40,.15);
  border-radius:9px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;color:#4E545C}
.pub-tabs button[aria-selected="true"]{color:var(--wit);background:var(--asfalt);border-color:var(--asfalt);
  box-shadow:0 2px 6px rgba(20,24,40,.2)}
/* Hall of Fame-tab met gouden accent; op de actieve (navy) knop goud op donker. */
#pt-hof{color:#B9821E}
#pt-hof .hof-cup,.pub-tabs .tab-ic{font-size:.95em}
#pt-hof[aria-selected="true"]{color:var(--geel)}
#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}

/* Desktop: bredere kolom, grotere blokken en een uitgelijnde Stand/Hall of Fame-balk
   (niet meer over de volle breedte), zodat de landingspagina in verhouding oogt. */
@media(min-width:820px){
  .pub-inner,#pub-inhoud{max-width:900px}
  .pub-land{padding:26px 24px 10px}
  .land-blok{margin-bottom:26px}
  .land-blok h2{font-size:18px;margin-bottom:18px}
  .land-stappen,.land-beelden{gap:18px}
  .land-stap{padding:26px 22px;border-radius:14px}
  .land-stap .n{width:46px;height:46px;font-size:22px;margin-bottom:14px}
  .land-stap b{font-size:17px;margin-bottom:6px}
  .land-stap p{font-size:13.5px;line-height:1.5}
  .land-beeld{border-radius:14px}
  .land-beeld .shot{height:320px}
  .land-beeld span{font-size:14px;padding:12px 8px}
  .pub-tabs{background:transparent;border-bottom:0;border-top:1px solid var(--lijn);padding:12px 0}
  .pub-tabs button{padding:12px 4px;font-size:15px}
}

/* Foto-lightbox (klik om te vergroten) */
.vergrootbaar{cursor:zoom-in}
img.vergrootbaar{cursor:zoom-in}
.foto-groot{position:fixed;inset:0;z-index:90;background:rgba(15,14,12,.85);
  display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.foto-groot img{max-width:92vw;max-height:88vh;border-radius:12px;object-fit:contain;
  box-shadow:0 12px 44px rgba(0,0,0,.5)}
.fg-x{position:fixed;top:14px;right:20px;background:none;border:0;color:#fff;font-size:34px;
  line-height:1;cursor:pointer;padding:4px 10px}

/* ═══ 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:9px}
.punt-cel{background:#FAFAF9;border:1px solid var(--lijn);border-radius:11px;padding:10px 7px 9px;text-align:center}
.punt-cel .rang{width:27px;height:27px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:13px;color:#fff;background:var(--asfalt)}
.punt-cel.goud .rang{background:var(--geel);color:#4a3b00}
.punt-cel.zilver .rang{background:#C3CAD2;color:#2e3338}
.punt-cel.brons .rang{background:#D8A066;color:#3a2412}
.punt-cel input{width:100%;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);text-align:center;
  font-family:var(--display);font-weight:700;font-size:20px;padding:5px 2px;color:var(--asfalt)}
.punt-cel input:focus{outline:0;border-color:var(--merk)}
.punt-cel .eenheid{font-size:9.5px;color:var(--beton);letter-spacing:.05em;text-transform:uppercase;margin-top:5px}
@media(max-width:400px){.punt-invoer{gap:6px}.punt-cel{padding:8px 4px 7px}.punt-cel input{font-size:17px}}

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

/* ═══════════ Beheer: Uitbetalingen ═══════════ */
.ub-titel{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beton);margin:4px 2px 10px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px;flex-wrap:wrap}
.ub-titel b{color:var(--asfalt);font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;letter-spacing:0}
.ub-samen{display:flex;gap:8px;margin-bottom:14px}
.ub-sv{flex:1;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:12px 8px;text-align:center}
.ub-sv b{display:block;font-family:var(--display);font-weight:700;font-size:26px;line-height:1}
.ub-sv small{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--beton);margin-top:4px}
.ub-sv.t{border-top:3px solid var(--groen)}
.ub-sv.a{border-top:3px solid var(--merk)}
.ub-sv.g{border-top:3px solid var(--beton)}
.ub-info{background:rgba(41,171,226,.09);border-left:3px solid var(--merk);border-radius:8px;
  padding:10px 12px;font-size:12.5px;line-height:1.5;color:#3c4046;margin-bottom:14px}
.ub-waarschuw{background:rgba(217,119,6,.1);border-left:4px solid var(--oranje);border-radius:8px;
  padding:11px 13px;font-size:12.5px;line-height:1.5;color:#7c4a06;margin-bottom:14px}
.ub-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:14px;margin:0 0 12px}
.ub-kaart.zonder{border-left:4px solid var(--oranje)}
.ub-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ub-pl b{font-weight:700;font-size:15px}
.ub-pl em{display:block;font-style:normal;font-size:12px;color:var(--beton);margin-top:2px}
.ub-bedr{font-family:var(--display);font-weight:700;font-size:22px;color:var(--groen);white-space:nowrap}
.ub-rek{margin-top:12px;background:var(--krijt);border:1px solid var(--lijn);border-radius:10px;padding:10px 12px}
.ub-rek.geen{background:var(--wit)}
.ub-lab{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--beton)}
.ub-val{font-size:14px;font-weight:600;margin-top:1px;letter-spacing:.02em}
.ub-toon{color:var(--merk);font-size:12px;font-weight:700;text-decoration:none;margin-left:7px}
.ub-stat{margin-top:11px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.ubpil{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em}
.ubpil.ub-ok{background:rgba(0,149,79,.12);color:var(--groen)}
.ubpil.ub-zelf{background:rgba(41,171,226,.12);color:#1577A8}
.ubpil.ub-wacht{background:rgba(217,119,6,.14);color:#B45309}
.ubpil.ub-bekend{background:rgba(35,38,43,.07);color:#3c4046}
.ubpil.ub-grijs{background:rgba(139,144,153,.16);color:#5b616b}
.ub-copy{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.ub-copy .knopje{flex:1;min-width:120px;text-align:center}
/* Per-veld kopieerknoppen in de uitbetaal-kaart */
.ub-veld{margin:0 0 10px}
.ub-veld:last-child{margin-bottom:0}
.ub-val-rij{display:flex;align-items:center;gap:8px;margin-top:1px}
.ub-val-rij .ub-val{flex:1;min-width:0;word-break:break-word}
.ub-kopknop{flex:none;background:var(--asfalt);color:#fff;border:0;border-radius:6px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px}
.ub-kopknop:hover{background:var(--asfalt-2)}
/* Kas van deze editie (Betalingen-tab) */
.kas{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;overflow:hidden;margin:14px 18px 0}
.kas-kop{background:var(--asfalt);color:#fff;padding:12px 15px;font-family:var(--display);font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.kas-sec{padding:12px 15px;border-bottom:1px solid var(--lijn)}
.kas-sec h3{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--beton);margin-bottom:7px}
.kas-rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:14px}
.kas-rij .lab{color:#3c4046}
.kas-rij .val{font-weight:600;letter-spacing:.02em;white-space:nowrap}
.kas .pos{color:var(--groen)}
.kas .open{color:var(--oranje)}
.kas-saldo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 15px;background:var(--krijt)}
.kas-saldo .lab{font-family:var(--display);font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.kas-saldo .val{font-family:var(--display);font-weight:700;font-size:24px;color:var(--groen);white-space:nowrap}
.kas-prog{font-size:12px;color:var(--beton);line-height:1.5;padding:0 15px 13px;background:var(--krijt)}

/* ═══════════ Winnaar: uitbetaling bevestigen/aanleveren ═══════════ */
#s-uitbetaling h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.01em;
  margin:2px 0 10px;line-height:1.1;color:var(--asfalt)}
#s-uitbetaling p{font-size:14px;line-height:1.55;color:#3c4046;margin:0 0 14px}
.ub-prijs{display:flex;justify-content:space-between;align-items:center;background:var(--krijt);
  border:1px solid var(--lijn);border-radius:11px;padding:11px 14px;margin:0 0 14px}
.ub-prijs span{font-size:12.5px;color:var(--beton)}
.ub-prijs b{font-family:var(--display);font-weight:700;font-size:23px;color:var(--groen)}
.ub-gegeven{background:var(--krijt);border:1px solid var(--lijn);border-radius:11px;padding:12px 14px;margin:0 0 16px}
.ub-gegeven .lab{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--beton)}
.ub-gegeven .val{font-size:15px;font-weight:600;letter-spacing:.02em;margin-top:1px}
.ub-knoppen{display:flex;gap:10px}
.ub-knoppen .knop{flex:1;margin:0}
.ub-mini{font-size:12px;color:var(--beton);line-height:1.5;margin-top:12px}
#s-uitbetaling .ub-terug{display:block;text-align:center;text-decoration:none;margin-top:4px}

/* Winnaarsscherm als witte kaart op de donkere achtergrond (i.p.v. het donkere auth-thema). */
#s-uitbetaling .auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 18px}
#ub-pub{background:var(--wit);color:var(--asfalt);border-radius:16px;max-width:430px;width:100%;
  padding:26px 22px 24px;box-shadow:0 16px 40px rgba(0,0,0,.32)}
#ub-pub .merk,#ub-pub .logo-groot{color:var(--asfalt)}
#s-uitbetaling .ub-gegeven .val{color:var(--asfalt)}
#s-uitbetaling .veldje label{color:#3c4046}
#s-uitbetaling .tekstknop{display:block;margin:12px auto 0;background:none;border:0;color:var(--merk);
  font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline}

/* Winnaarsscherm: witte velden, gecentreerde wordmark, blauwe verstuurknop. */
#ub-pub .merk{text-align:center;font-size:19px}
#ub-pub .logo-groot{text-align:center}
#ub-pub .streep{margin-left:auto;margin-right:auto}
#s-uitbetaling .veldje input{background:var(--wit);color:var(--asfalt);border:1px solid var(--lijn)}
#s-uitbetaling .veldje input::placeholder{color:#b7bcc2}
#s-uitbetaling .ub-verstuur{background:var(--merk);color:#fff}

/* In-app winnaarsmelding (uitbetaling) */
.ub-melding{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#FFF9E3;
  border:1px solid var(--geel);border-left:4px solid var(--geel);border-radius:10px;
  padding:12px 14px;margin:12px 14px 2px}
.ub-m-t{flex:1;min-width:180px}
.ub-m-t>b{display:block;font-size:14px;margin-bottom:2px}
.ub-m-t span b{font-weight:700}
.ub-m-t span{font-size:12.5px;color:#3c4046;line-height:1.45}
.ub-m-t .ub-m-actie{display:block;margin-top:8px}
.ub-m-knop{flex:none;background:var(--asfalt);color:#fff;text-decoration:none;font-size:12.5px;
  font-weight:700;padding:10px 14px;border-radius:8px;white-space:nowrap}

/* ═══ Betaalherinnering: ontvangerslijst-modal ═══ */
.mh-overlay{position:fixed;inset:0;z-index:1000;background:rgba(20,19,17,.55);
  display:flex;align-items:flex-start;justify-content:center;padding:18px;overflow:auto}
.mh{width:100%;max-width:430px;background:var(--wit);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);margin:auto}
.mh-kop{background:var(--asfalt);color:var(--krijt);padding:15px 18px;display:flex;
  align-items:center;justify-content:space-between}
.mh-kop h2{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.02em;margin:0}
.mh-kop .x{background:none;border:0;color:rgba(255,255,255,.8);font-size:24px;cursor:pointer;line-height:1;padding:0 4px}
.mh-intro{padding:13px 18px 4px;font-size:13.5px;color:#4a5160;line-height:1.5}
.mh-balk{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 10px}
.mh-balk .tel{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--asfalt)}
.mh-balk button{background:none;border:0;cursor:pointer;font-size:12.5px;color:var(--merk);text-decoration:underline;font-family:var(--body)}
.mh-lijst{border-top:1px solid var(--lijn);max-height:48vh;overflow:auto}
.mh-rij{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--lijn);cursor:pointer}
.mh-rij input{width:21px;height:21px;flex:none;accent-color:var(--groen)}
.mh-rij .nm{flex:1;min-width:0}
.mh-rij .nm b{display:block;font-size:15px;color:var(--asfalt);font-weight:600}
.mh-rij .nm small{display:block;font-size:12.5px;color:var(--beton);margin-top:1px}
.mh-rij .bedrag{font-family:var(--display);font-weight:700;font-size:15px;color:var(--asfalt)}
.mh-rij .herinnerd{color:var(--oranje)}
.mh-leeg{padding:22px 18px;text-align:center;color:var(--beton);font-size:14px}
.mh-geen{margin:10px 18px 2px;background:#FFF7E8;border:1px solid rgba(217,119,6,.35);
  border-radius:9px;padding:10px 12px;font-size:12.5px;color:#7a4e07;line-height:1.5}
.mh-voet{padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--lijn);background:var(--papier)}
.mh-voet .knop{margin-bottom:8px}
.mh-voet .knop:last-child{margin-bottom:0}

/* ───────── Teltegels als filterknoppen (Uitbetalingen) ───────── */
.filterrij{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.filterknop{flex:1 1 auto;min-width:88px;background:var(--wit);border:1px solid var(--lijn);border-radius:11px;
  padding:9px 8px 8px;text-align:center;cursor:pointer;font-family:var(--body)}
.filterknop b{display:block;font-family:var(--display);font-weight:700;font-size:22px;line-height:1;color:var(--asfalt)}
.filterknop small{display:block;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--beton);margin-top:4px}
.filterknop.actief{background:var(--asfalt);border-color:var(--asfalt)}
.filterknop.actief b,.filterknop.actief small{color:#fff}
.filterknop.t{border-top:3px solid var(--groen)}
.filterknop.a{border-top:3px solid var(--merk)}
.filterknop.g{border-top:3px solid var(--beton)}
.filterknop.o{border-top:3px solid var(--oranje)}

/* ───────── Uitbetalingen: SEPA, bedrag-aanpassing, reconciliatie ───────── */
.ub-verzoek-knop{font-size:12.5px;font-weight:600;color:var(--oranje);text-decoration:none;background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.28);padding:5px 10px;border-radius:8px}
.ub-acties{margin:2px 0 16px}
.ub-acties .knop{margin:0 0 9px}
.ub-afschrift-knop{display:block}
.ub-acties-uit{font-size:12px;color:var(--beton);line-height:1.5;margin-top:2px}
.ub-bedr-oud{text-decoration:line-through;color:var(--beton);font-size:14px;font-weight:600;margin-right:4px;font-family:'Helvetica Neue',Arial,sans-serif}
.ub-aanpas-knop{font-size:12.5px;font-weight:600;color:var(--merk);text-decoration:none;background:rgba(41,171,226,.09);border:1px solid rgba(41,171,226,.25);padding:5px 10px;border-radius:8px}
.ub-wijzig{margin-top:10px;background:#F0FAF4;border:1px solid #c9e9d6;border-radius:9px;padding:8px 11px;font-size:12.5px;color:#1D2247}
.ub-wijzig .oud{text-decoration:line-through;color:var(--beton)}
.ub-wijzig .nieuw{color:var(--groen);font-weight:700}
.ub-wijzig-meta{display:block;color:#5b616b;font-size:11.5px;margin-top:3px;line-height:1.45}
.ub-wijzig-herstel{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--merk);text-decoration:underline}

/* Bedrag-aanpassen venster (overlay) */
.ub-overlay{position:fixed;inset:0;background:rgba(27,31,58,.55);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:60}
.ub-modal{background:var(--wit);border-radius:16px;padding:18px;width:100%;max-width:400px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.ub-modal h3{font-size:17px;margin:0 0 3px}
.ub-modal-sub{font-size:12.5px;color:var(--beton);margin-bottom:12px}
.ub-modal-huidig{font-size:12.5px;color:#3c4046;margin-bottom:14px}
.ub-modal-huidig b{color:var(--asfalt)}
.ub-vld{display:block;margin-bottom:13px}
.ub-vld span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--beton);margin-bottom:5px}
.ub-inp{width:100%;border:1.5px solid var(--lijn);border-radius:10px;padding:11px 12px;font-size:15px;color:var(--asfalt);font-family:var(--body)}
.ub-inp:focus{outline:none;border-color:var(--merk)}
.ub-modal-knop{display:flex;gap:9px;margin-top:4px}
.ub-modal-knop .knop{flex:1;margin:0;padding:12px}

/* Dubbelcheck- en afschrift-paneel */
.ub-paneel.bezig{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:16px;text-align:center;color:var(--beton);margin-bottom:14px}
.dc{margin:2px 0 16px}
.dc-kop{background:var(--asfalt);color:#fff;border-radius:13px 13px 0 0;padding:13px 15px}
.dc-kop h3{font-size:16px;margin:0}
.dc-kop .s{font-size:12px;opacity:.78;margin-top:2px}
.dc-body{background:#fff;border:1px solid var(--lijn);border-top:none;border-radius:0 0 13px 13px;padding:14px 15px}
.dc-tot{display:flex;justify-content:space-between;align-items:center;background:var(--krijt);border:1px solid var(--lijn);border-radius:11px;padding:12px 14px;margin-bottom:12px}
.dc-tot .l{font-size:11px;color:var(--beton);text-transform:uppercase;letter-spacing:.06em}
.dc-tot .aantal{font-size:15px;font-weight:700;margin-top:2px}
.dc-tot .geld{font-family:var(--display);font-size:23px;font-weight:700;color:var(--groen);text-align:right}
.dc-lijst{border:1px solid var(--lijn);border-radius:11px;overflow:hidden;margin-bottom:12px}
.dc-r{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:13px;border-bottom:1px solid var(--lijn)}
.dc-r:last-child{border-bottom:none}
.dc-r .nm{font-weight:600}
.dc-r .ib{font-size:11px;color:var(--beton);font-family:'Courier New',monospace;margin-top:1px}
.dc-r .bd{font-weight:700;white-space:nowrap}
.dc-aangepast{font-size:10px;font-weight:700;color:var(--merk);background:rgba(41,171,226,.12);padding:1px 6px;border-radius:5px;vertical-align:middle}
.dc-leeg{font-size:13px;color:var(--beton);padding:10px 2px;line-height:1.5}
.dc-deb{font-size:12px;color:#3c4046;background:#EAF6FD;border:1px solid #c9e8f8;border-radius:10px;padding:10px 12px;margin-bottom:11px;line-height:1.5}
.dc-deb b{font-family:'Courier New',monospace}
.dc-deb.fout{background:#FEF2F3;border-color:#f0cdd2;color:#9a1b2b}
.dc-waar{font-size:12px;background:#FFF7ED;border:1px solid #f2d9b3;border-left:4px solid var(--oranje);border-radius:0 10px 10px 0;padding:10px 12px;margin-bottom:13px;color:#8a5a12;line-height:1.5}
.dc-waar b{color:#b5620a}
.dc-zonder{margin-top:6px;font-size:11.5px;color:#7a4e07}
.dc-zonder div{padding:1px 0}
.dc-knop{display:flex;gap:9px}
.dc-knop .knop{flex:1;margin:0;padding:12px}