/* ============================================================
   Mobile first. Alles ab 860px bekommt die Zweispalter-Variante.
   ============================================================ */
:root{
  --field:#F2F4F3; --paper:#FFFFFF;
  --ink:#10151C; --ink2:#5A646E; --line:#CBD2D7;
  --blue:#0B5FD9; --yellow:#F2C300; --red:#D91E36; --green:#0E7C5A; --warn:#C2410C;
  --cond:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --bar:calc(1rem + env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overscroll-behavior-y:contain}
body{
  background:var(--field);color:var(--ink);
  font-family:var(--body);font-size:16px;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;touch-action:manipulation}
input{font:inherit;color:inherit;border-radius:0;-webkit-appearance:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- Kopfleiste ---------- */
.masthead{
  background:var(--ink);color:#fff;position:sticky;top:0;z-index:40;
  padding-top:env(safe-area-inset-top,0px);
}
.brand{display:flex;align-items:baseline;gap:.55rem;padding:.55rem .9rem .45rem}
.brand b{
  font-family:var(--cond);font-weight:700;font-size:1.15rem;
  letter-spacing:.07em;text-transform:uppercase;
}
.brand span{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#8F9AA5;
}
.roles{display:grid;grid-template-columns:repeat(3,1fr)}
.roles button{
  padding:.6rem .25rem;font-family:var(--cond);font-size:1.02rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#8F9AA5;
  border-bottom:3px solid transparent;
}
.roles button[aria-current="true"]{color:#fff;border-bottom-color:var(--blue)}

.wrap{padding:.85rem .75rem calc(var(--bar) + 1.5rem);max-width:1180px;margin:0 auto}
.eyebrow{
  font-family:var(--cond);font-size:.85rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);margin:0 0 .5rem;
}
.panel{background:var(--paper);border:1px solid var(--line);padding:.85rem}
.panel + .panel{margin-top:.75rem}
.split{display:grid;gap:.75rem}
.note{font-size:.8rem;color:var(--ink2);line-height:1.45}
.stack{display:grid;gap:.5rem}

/* ---------- Nummernanzeige + Pad ---------- */
.bibread{border:1px solid var(--line);background:var(--field);text-align:center;padding:.35rem .6rem 0}
.bibread .num{
  font-family:var(--cond);font-weight:700;font-size:clamp(3.2rem,17vw,4.4rem);
  line-height:.92;letter-spacing:.03em;font-variant-numeric:tabular-nums;
  height:clamp(3.2rem,17vw,4.4rem);display:flex;align-items:center;justify-content:center;
}
.bibread .num.empty{color:var(--line)}
.bibread .cls{
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink2);
  border-top:1px solid var(--line);margin-top:.3rem;
  height:2.1rem;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bibread .cls.bad{color:var(--red);font-weight:600}
.bibread .cls.ex{color:var(--blue);font-weight:600}
select{width:100%;padding:.6rem;border:1px solid var(--line);background:var(--paper);min-height:2.8rem;border-radius:0}
.exrow{display:grid;grid-template-columns:5.5rem 1fr auto;gap:.4rem;align-items:end}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.6rem}
.pad button{
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--cond);font-size:2.1rem;font-weight:600;
  min-height:3.7rem;font-variant-numeric:tabular-nums;
}
.pad button:active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pad button.util{font-size:1.4rem;color:var(--ink2)}

/* ---------- Karten ---------- */
.cards{display:grid;gap:.5rem}
.card{
  display:grid;grid-template-columns:4.2rem 1fr auto;align-items:center;
  border:1px solid var(--line);background:var(--paper);text-align:left;min-height:5rem;
}
.card .chip{align-self:stretch;position:relative}
.card .chip::after{content:"";position:absolute;inset:.7rem;border:2px solid rgba(255,255,255,.55)}
.card.blue .chip{background:var(--blue)}
.card.yellow .chip{background:var(--yellow)}
.card.red .chip{background:var(--red)}
.card.dnf .chip{background:var(--ink2)}
.card.dnf .chip::after{border-style:dashed}
.dot.dnf{background:var(--ink2)}
.card .txt{padding:.6rem .75rem}
.card .txt b{
  display:block;font-family:var(--cond);font-size:1.45rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.05;
}
.card .txt small{display:block;color:var(--ink2);font-size:.78rem;margin-top:.1rem}
.card .dur{
  font-family:var(--mono);font-weight:700;font-size:1.15rem;padding-right:.75rem;
  font-variant-numeric:tabular-nums;
}
.card:disabled{opacity:.32}
.card:not(:disabled):active{transform:translateY(1px)}

.reasons{display:grid;gap:.4rem}
.reasons button{
  border:1px solid var(--line);background:var(--paper);text-align:left;
  padding:.9rem .8rem;font-size:.98rem;line-height:1.3;min-height:3.4rem;
  display:flex;gap:.7rem;align-items:center;
}
.reasons button i{
  font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--ink2);
  border:1px solid var(--line);padding:.15rem .35rem;flex:none;
}
.backbar{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}

/* Kopf der zweiten Stufe: Nummer bleibt sichtbar */
.confirmed{
  display:flex;align-items:center;gap:.75rem;
  border:1px solid var(--ink);background:var(--paper);padding:.5rem .7rem;margin-bottom:.7rem;
}
.confirmed .n{
  font-family:var(--cond);font-weight:700;font-size:2.5rem;line-height:.9;
  font-variant-numeric:tabular-nums;
}
.confirmed .c{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);flex:1}
.confirmed button{border:1px solid var(--line);padding:.45rem .7rem;font-size:.82rem}

/* ---------- Autostart-Streifen ---------- */
.autostrip{
  border:2px solid var(--ink);background:var(--paper);
  position:relative;overflow:hidden;margin:.55rem 0 0;
}
.autostrip .fill{
  position:absolute;inset:0 auto 0 0;background:rgba(11,95,217,.18);
  transition:width .2s linear;
}
.autostrip > *:not(.fill){position:relative}
.autostrip .info{
  padding:.55rem .75rem;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--line);
}
.autostrip .info b{color:var(--ink);font-family:var(--mono);font-size:.95rem;letter-spacing:0}
.autorow{display:grid;grid-template-columns:1fr auto;gap:.5rem;padding:.5rem;align-items:center}
.autorow .cd{font-size:.8rem;line-height:1.3;color:var(--ink2)}
.autorow .cd b{font-family:var(--mono);color:var(--ink);font-size:.95rem}
.btn.go{background:var(--green);border-color:var(--green);font-size:1.35rem;min-height:3.7rem;
  white-space:nowrap;overflow:hidden}
.btn.go:disabled{background:var(--paper);color:var(--ink2);border-color:var(--line);opacity:1}
.btn.go .k{font-family:var(--mono);font-size:1rem;opacity:.8;margin-left:.5rem}

/* ---------- Timerkacheln ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:.6rem}
.tile{border:1px solid var(--line);background:var(--paper);position:relative;overflow:hidden;padding:.75rem .85rem .85rem}
.tile .drain{position:absolute;inset:0 auto 0 0;background:rgba(11,95,217,.13);transition:width .25s linear}
.tile > *:not(.drain){position:relative}
.tile .head{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}
.tile .bib{font-family:var(--cond);font-weight:700;font-size:3rem;line-height:.88;font-variant-numeric:tabular-nums}
.tile .clock{font-family:var(--mono);font-weight:700;font-size:2.2rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile .meta{font-size:.73rem;color:var(--ink2);margin-top:.35rem;line-height:1.35}
.tile .rule{height:1px;background:var(--line);margin:.6rem 0 .55rem}
.tile.done{background:var(--green);border-color:var(--green);color:#fff}
.tile.done .drain{display:none}
.tile.done .meta{color:rgba(255,255,255,.78)}
.tile.done .rule{background:rgba(255,255,255,.3)}
.tile .stamp{font-family:var(--cond);font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:1.05rem}
.tile.done .stamp{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.tile .act{
  width:100%;border:1px solid currentColor;padding:.65rem;min-height:3rem;
  font-family:var(--cond);font-size:1.1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.tile.done .act{background:#fff;color:var(--green);border-color:#fff}
@media (prefers-reduced-motion:reduce){
  .tile.done .stamp{animation:none}
  .tile .drain,.autostrip .fill{transition:none}
}

/* ---------- Listen als Karten (statt Tabelle) ---------- */
.rec{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;
  border:1px solid var(--line);background:var(--paper);padding:.55rem .65rem}
.rec .n{font-family:var(--cond);font-weight:700;font-size:1.75rem;line-height:.9;font-variant-numeric:tabular-nums;min-width:2.4rem}
.rec .b{font-size:.9rem;line-height:1.25}
.rec .b small{display:block;color:var(--ink2);font-size:.72rem;margin-top:.15rem}
.rec .r{text-align:right;display:grid;gap:.3rem;justify-items:end}
.rec .acts{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.rec .t{font-family:var(--mono);font-weight:700;font-size:.95rem}
.dot{display:inline-block;width:.7rem;height:.7rem;border:1px solid rgba(0,0,0,.25);vertical-align:-1px;margin-right:.3rem}
.dot.blue{background:var(--blue)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}
.dot.self{background:repeating-linear-gradient(45deg,var(--warn),var(--warn) 3px,#fff 3px,#fff 6px)}

/* Selbstmeldung: bewusst auffällig, damit sie nach dem Rennen auffällt */
.selfbox{
  border:3px solid var(--warn);background:#FFF7ED;margin-top:.75rem;
  background-image:repeating-linear-gradient(45deg,rgba(194,65,12,.07) 0 10px,transparent 10px 20px);
}
.selfbox .sh{
  background:var(--warn);color:#fff;padding:.55rem .75rem;
  font-family:var(--cond);font-size:1.25rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.selfbox p{margin:0;padding:.75rem;font-size:.85rem;line-height:1.5}
.selfrow{display:grid;gap:.4rem;padding:0 .75rem .75rem}
.btn.warn{background:var(--warn);border-color:var(--warn);color:#fff}
.rec.self{border-left:5px solid var(--warn);background:#FFF7ED}
.tag.self{background:var(--warn);color:#fff;border-color:var(--warn)}
.ruleblock{border-left:4px solid var(--ink);padding:.4rem .65rem;background:var(--field)}
.ruleblock b{display:block;font-size:.88rem}
.ruleblock span{display:block;font-size:.8rem;color:var(--ink2);line-height:1.45;margin-top:.15rem}
.logrow{display:grid;grid-template-columns:4.2rem 7rem 2.6rem 1fr;gap:.5rem;
  font-size:.76rem;padding:.35rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.logrow .lt{font-family:var(--mono);color:var(--ink2)}
.logrow .la{font-family:var(--mono);font-weight:700}
.logrow .lb{font-family:var(--cond);font-weight:700;font-size:1rem}
.logrow .ld small{display:block;color:var(--ink2);font-size:.7rem}
@media (max-width:600px){.logrow{grid-template-columns:3.6rem 1fr;row-gap:.1rem}.logrow .lb{display:none}}
.tag{font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;padding:.18rem .4rem;border:1px solid var(--line);white-space:nowrap}
.tag.offen{border-color:var(--ink)}
.tag.laeuft{background:var(--blue);color:#fff;border-color:var(--blue)}
.tag.erledigt{background:var(--green);color:#fff;border-color:var(--green)}
.tag.fehlt{background:var(--red);color:#fff;border-color:var(--red)}
.tag.dsq{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag.dnf{background:var(--ink2);color:#fff;border-color:var(--ink2)}
.tile .acts2{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.mini{border:1px solid var(--line);padding:.4rem .6rem;font-size:.78rem;background:var(--paper);min-height:2.2rem}

/* ---------- Formulare ---------- */
.field{display:block}
.field span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-bottom:.2rem}
input[type=text],input[type=number]{width:100%;padding:.6rem;border:1px solid var(--line);background:var(--paper);min-height:2.8rem}
input[type=number]{font-family:var(--mono)}
.clsblock{border:1px solid var(--line);padding:.65rem;display:grid;gap:.5rem}
.clsblock .g2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.btn{
  border:1px solid var(--ink);background:var(--ink);color:#fff;padding:.7rem 1rem;min-height:3.1rem;
  font-family:var(--cond);font-size:1.15rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.wide{width:100%}
.btn:disabled{opacity:.3}
.toolbar{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-bottom:.7rem}
.subtabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin-bottom:.75rem}
.subtabs button{padding:.6rem .5rem;font-family:var(--cond);font-size:1.05rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.subtabs button[aria-current="true"]{background:var(--ink);color:#fff}
.empty{border:1px dashed var(--line);padding:1.5rem .9rem;text-align:center;color:var(--ink2);font-size:.88rem;line-height:1.5}
.switch{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--line);padding:.55rem .7rem}
.switch b{font-size:.88rem;font-weight:600}
.switch small{display:block;color:var(--ink2);font-size:.74rem;font-weight:400;margin-top:.1rem}
.switch button{border:1px solid var(--ink);padding:.45rem .8rem;font-family:var(--cond);font-size:1rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;min-width:4.2rem;flex:none}
.switch button[data-on="true"]{background:var(--ink);color:#fff}

/* ---------- Statusleiste unten ---------- */

.toast{
  position:fixed;left:.75rem;right:.75rem;bottom:calc(var(--bar) + .6rem);z-index:60;
  background:var(--ink);color:#fff;padding:.7rem .9rem;display:flex;align-items:center;gap:.6rem;
}
.toast .sq{width:1rem;height:1rem;flex:none}
.toast b{font-family:var(--cond);font-size:1.2rem;letter-spacing:.04em}
.ver{text-align:center;font-size:.65rem;color:var(--line);letter-spacing:.1em;padding:.9rem 0 .2rem}

/* ---------- ab Tablet ---------- */
@media (min-width:860px){
  .masthead{display:flex;align-items:stretch}
  .brand{margin-right:auto;padding:.7rem 1rem}
  .brand b{font-size:1.3rem}
  .roles{display:flex}
  .roles button{padding:.7rem 1.1rem;font-size:1.1rem}
  .wrap{padding:1.2rem 1rem calc(var(--bar) + 2rem)}
  .split{grid-template-columns:minmax(300px,7fr) 9fr;align-items:start}
  .grid{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
  .clsblock{grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;align-items:end}
  .clsblock .g2{display:contents}
  .toast{left:50%;right:auto;transform:translateX(-50%)}
}

/* ============================================================
   Ergänzungen ab v1.1: Anmeldung, Dashboard, DNF-Freitext
   ============================================================ */
.loginwrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:1rem;gap:.75rem}
.loginbox{width:100%;max-width:22rem;border:1px solid var(--line);background:var(--paper)}
.lb-head{background:var(--ink);color:#fff;padding:.9rem 1rem;display:flex;align-items:baseline;gap:.6rem}
.lb-head b{font-family:var(--cond);font-size:1.4rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.lb-head span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#8F9AA5}
.lb-body{padding:1rem}

.brand .back{color:#8F9AA5;font-size:1.3rem;padding:0 .5rem 0 0;line-height:1}
.brand .back:hover{color:#fff}

.evgrid{display:grid;gap:.6rem}
.evgrid.dim{opacity:.55}
.evcard{border:1px solid var(--line);background:var(--paper);padding:.8rem;cursor:pointer}
.evcard:hover{border-color:var(--ink)}
.evtop{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.evtop b{font-family:var(--cond);font-size:1.5rem;font-weight:700;letter-spacing:.03em;line-height:1.1}
.evtop span{font-family:var(--mono);font-size:.78rem;color:var(--ink2);flex:none}
.evstats{display:flex;gap:1.1rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line)}
.evstats span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.evstats i{display:block;font-style:normal;font-family:var(--cond);font-size:1.45rem;
  font-weight:700;color:var(--ink);letter-spacing:0}
.evstats .live i{color:var(--blue)}
.evacts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.6rem}
.newev{display:grid;gap:.5rem}
@media (min-width:860px){
  .evgrid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
  .newev{grid-template-columns:2fr 1fr 2fr}
}

textarea{width:100%;padding:.6rem;border:1px solid var(--line);background:var(--paper);
  font:inherit;font-size:.95rem;border-radius:0;resize:vertical;min-height:4.5rem}
.reasons button.sel{border-color:var(--ink);border-width:2px;background:var(--field)}
.rec .notetext{font-style:italic;color:var(--ink2)}

/* ---------- v1.3: Klassen ohne Penalty Box ---------- */
.tag.add{background:#1F6FB2;color:#fff;border-color:#1F6FB2}
.addnote{border-left:4px solid #1F6FB2;background:var(--field);padding:.5rem .65rem;
  font-size:.8rem;line-height:1.4;margin-bottom:.7rem}
.nobox{border:2px solid #1F6FB2;background:#EFF6FC;margin-top:.75rem}
.nobox .nh{background:#1F6FB2;color:#fff;padding:.55rem .75rem;font-family:var(--cond);
  font-size:1.2rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.nobox p{margin:0;padding:.75rem;font-size:.85rem;line-height:1.5}
.nbl{display:grid;gap:.3rem;padding:0 .75rem .75rem}
.nbl span{font-size:.82rem;color:var(--ink2)}
.nbl b{font-family:var(--mono);color:var(--ink)}

/* ---------- v1.4: Aufschlüsselung der offenen Strafen ---------- */
.opendetail{border:1px solid var(--line);border-top:none;background:var(--paper)}
.od{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;
  padding:.45rem .65rem;border-bottom:1px solid var(--line)}
.od:last-child{border-bottom:none}
.odr{font-size:.85rem;line-height:1.25}
.odr small{display:block;color:var(--ink2);font-size:.7rem;margin-top:.1rem}
.odt{font-family:var(--mono);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}

/* ---------- v1.4.1: Vergehen auf der laufenden Kachel ---------- */
.tile .plist{margin-top:.45rem;border-top:1px solid var(--line);padding-top:.4rem}
.tile.done .plist{border-top-color:rgba(255,255,255,.3)}
.tile .pl{display:grid;grid-template-columns:auto 1fr auto;gap:.45rem;align-items:center;
  font-size:.78rem;line-height:1.3;padding:.12rem 0}
.tile .plr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .plt{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.tile.done .pl{color:rgba(255,255,255,.9)}
.tile.done .dot{border-color:rgba(255,255,255,.5)}