/* RACE RESULT Splits – Oberfläche nach dem freigegebenen Entwurf „Splits“ (Referenzstil: Geräteliste, freigegeben 26.10.2026).
   Dunkler Kopf mit Reitern, Kontextleiste, Karten mit Rajdhani-Überschriften, Status als Form UND Farbe
   (Raute = Störung, Dreieck = Prüfen, Haken im Kreis = in Ordnung, gestrichelter Ring = inaktiv).
   Die Werte der Tokens überschreiben die aus stil.css (gleiche Namen), damit Verwaltung, Übersicht und Anmeldung mitziehen.
   Neue Bauteile stehen unter .sp (Live, Startzeit, Kontextleiste, Overlays), der Kopf kommt aus dem Kit (<rr-kopf>) – so greifen
   die älteren Regeln aus stil.css nicht in die neuen Bauteile.
   Hell/dunkel: prefers-color-scheme oder Schalter im Kopf (data-theme am <html>, thema.mjs). */

:root { --kopf-schrift: var(--schrift-kopf); --band-rot: #a81815; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --band-rot: #c8302f; } }
:root[data-theme="dark"] { --band-rot: #c8302f; }
.sprite { position: absolute; width: 0; height: 0; }
.sp svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(.sp) button {
  font-family: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; white-space: normal; display: block; color: inherit; transition: none;
}
:where(.sp) button:hover { background: transparent; }
.sp button[aria-pressed="true"] { box-shadow: none; }
.sp input, .sp select { min-height: 0; padding: 0; width: auto; border: 0; border-radius: 0; background: none; }
.sp a { color: inherit; }
.sp :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sp .num, .sp .big, .sp .rz, .sp .kmz { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sp .nil { color: var(--text-3); }
.sp h2, .sp h3 { letter-spacing: normal; text-transform: none; }

/* Kopf: <rr-kopf> aus dem Kit; der Halter darf das Haftenbleiben nicht stören */
#kopf { display: contents; }
svg[hidden] { display: none; }

/* Rahmen der neuen Seiten */
.sp-seite { max-width: 1380px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
body > main { flex: 1 0 auto; }

/* Kontextleiste */
.sp .ctx{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.sp .evt{position:relative}
.sp .evb{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 10px;border:1.5px solid var(--linie-stark);border-radius:10px;background:var(--flaeche);font:700 1.08rem var(--schrift-kopf);letter-spacing:.04em;max-width:100%}
.sp .evb small{font:500 .9rem var(--schrift);color:var(--text-2);letter-spacing:0}
.sp .evb span.t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;min-width:0;text-align:left}
.sp .menu{position:absolute;left:0;top:44px;z-index:15;min-width:300px;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:12px;box-shadow:0 8px 28px rgb(0 0 0/.25);padding:6px}
.sp .menu button{display:flex;width:100%;text-align:left;gap:10px;align-items:center;border:0;background:transparent;padding:9px 10px;border-radius:8px}
.sp .menu button:hover{background:var(--flaeche-2)}
.sp .menu button b{font:700 1.05rem var(--schrift-kopf);letter-spacing:.03em}
.sp .menu button small{display:block;color:var(--text-2)}
.sp .menu .ok{margin-left:auto;color:var(--gruen)}
.sp .uhr{display:flex;gap:14px;align-items:center;padding:0 12px;height:38px;border:1.5px solid var(--linie-stark);border-radius:10px;background:var(--flaeche);white-space:nowrap}
.sp .uhr .kv{display:flex;gap:6px;align-items:baseline}
.sp .uhr .kv small{font:700 .875rem var(--schrift-kopf);letter-spacing:.1em;color:var(--text-2);text-transform:uppercase}
.sp .uhr .kv b{font:700 1.25rem var(--schrift-kopf)}
.sp .verb{display:inline-flex;align-items:center;gap:7px;font:700 1rem var(--schrift-kopf);letter-spacing:.08em;text-transform:uppercase;color:var(--gruen)}
.sp .verb i{width:10px;height:10px;border-radius:50%;background:var(--gruen);animation:puls 2s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gruen) 55%,transparent)}
70%,100%{box-shadow:0 0 0 7px transparent}
}
.sp .sp1{flex:1}
.sp .demo{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:13px;border:1.5px dashed var(--linie-stark);color:var(--text-2);font:700 .85rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase}
/* Werkzeugleiste */
.sp .tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.sp .chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 10px;border-radius:19px;background:var(--flaeche);border:1.5px solid var(--linie-stark);font:700 1.1rem var(--schrift-kopf)}
.sp .chip[aria-pressed="true"]{background:var(--text);color:var(--flaeche);border-color:var(--text)}
.sp .chip:disabled{opacity:.5;cursor:default}
.sp .chip svg.st{width:20px;height:20px}
.sp .seg{display:inline-flex;border:1.5px solid var(--linie-stark);border-radius:10px;overflow:hidden;background:var(--flaeche)}
.sp .seg button{height:36px;padding:0 12px;border:0;background:transparent;display:flex;align-items:center;gap:6px;font:700 1rem var(--schrift-kopf);letter-spacing:.04em;white-space:nowrap}
.sp .seg button+button{border-left:1.5px solid var(--linie-stark)}
.sp .seg button[aria-pressed="true"]{background:var(--akzent);color:#fff}
:root[data-theme="dark"] .sp .seg button[aria-pressed="true"]{background:#c8302f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp .seg button[aria-pressed="true"]{background:#c8302f}
}
.sp .seg .c{opacity:.7;font-weight:600;font-variant-numeric:tabular-nums}
.sp .dotc{width:11px;height:11px;border-radius:50%;flex:none;background:var(--fc)}
.sp .dotc.sq{border-radius:2px;transform:rotate(45deg);width:10px;height:10px}
/* Streckenband */
.sp .band{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten);padding:12px 16px 10px;margin-bottom:12px}
.sp .band__k{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.sp .band__k h2, .sp .sek h2{margin:0;font:700 1.05rem var(--schrift-kopf);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sp .abst{margin-left:auto;display:flex;gap:10px;align-items:baseline}
.sp .abst b{font:700 1.7rem/1 var(--schrift-kopf)}
.sp .abst small{font:700 .85rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.sp .lanes{display:grid;grid-template-columns:78px minmax(0,1fr);column-gap:12px;row-gap:0}
.sp .lane-l{display:flex;flex-direction:column;justify-content:center;min-width:0}
.sp .lane-l b{font:700 1.15rem/1.05 var(--schrift-kopf);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.sp .lane-l small{color:var(--text-3);font-size:.875rem;white-space:nowrap}
.sp .lane{position:relative;height:44px}
.sp .lane .tr{position:absolute;left:0;right:0;top:15px;height:14px;border-radius:7px;background:var(--grau-weich);border:1px solid var(--linie)}
.sp .lane .fu{position:absolute;left:0;top:15px;height:14px;border-radius:7px;background:var(--fc);width:0}
.sp .pin{position:absolute;top:2px;height:40px;display:flex;align-items:center;gap:8px;transform:translateX(-50%);z-index:2}
.sp .pin .kn{width:32px;height:32px;border-radius:50%;background:var(--kn-bg,var(--fc));color:#fff;display:grid;place-items:center;font:700 1.05rem var(--schrift-kopf);border:3px solid var(--flaeche);box-shadow:0 0 0 1.5px var(--fc)}
:root[data-theme="dark"] .sp .pin .kn{color:#121212}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp .pin .kn{color:#121212}
}
.sp .pin .kmz{position:absolute;left:calc(50% + 20px);top:6px;font:700 1.5rem/1 var(--schrift-kopf);white-space:nowrap;background:var(--flaeche);padding:2px 5px;border-radius:6px}
.sp .pin .kmz small{font-size:.9rem;color:var(--text-2);font-weight:600}
.sp .pin.re .kmz{left:auto;right:calc(50% + 20px)}
.sp .luecke{grid-column:2;position:relative;height:34px}
.sp .luecke .br{position:absolute;top:2px;height:30px;border-left:2px solid var(--text-2);border-right:2px solid var(--text-2);display:flex;align-items:center;justify-content:center}
.sp .luecke .br::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--text-2)}
.sp .luecke .br span{position:relative;background:var(--flaeche);padding:1px 8px;font:700 1.02rem var(--schrift-kopf);white-space:nowrap;border-radius:6px;border:1.5px solid var(--linie-stark)}
.sp .achse{grid-column:2;position:relative;height:30px;margin-top:4px;border-top:1.5px solid var(--linie-stark)}
.sp .achse i{position:absolute;top:0;width:1.5px;height:7px;background:var(--linie-stark)}
.sp .achse span{position:absolute;top:9px;transform:translateX(-50%);font:600 .875rem var(--schrift-kopf);color:var(--text-3);white-space:nowrap}
.sp .achse .hm{height:12px;background:var(--text-2)}
.sp .achse .hm+span{font-weight:700;color:var(--text-2)}
.sp .achse .zl{transform:translateX(-100%)}
/* Liste */
.sp .liste{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten);overflow:clip}
.sp .cols, .sp .zeile{display:grid;align-items:center;column-gap:14px;padding:0 14px 0 12px}
.sp .cols{height:38px;background:var(--flaeche-2);border-bottom:1px solid var(--linie);font:700 .88rem var(--schrift-kopf);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.sp .cols span{display:flex;gap:5px;align-items:center}
.sp .cols svg.i{width:15px;height:15px}
.sp .cols .ibn, .sp .sek__k .ibn, .sp .band__k .ibn{background:none;border:0;padding:0;color:var(--text-2);display:inline-flex;align-items:center;width:22px;height:22px;justify-content:center}
.sp .tag[hidden]{display:none}
.sp .cols span{white-space:nowrap}
.sp .band__k h2{white-space:nowrap}
.sp .grp{margin:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--flaeche-2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);font:700 1.1rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase}
.sp .grp:first-child{border-top:0}
.sp .grp .mini{display:flex;gap:6px;margin-left:auto}
.sp .dot{display:inline-flex;align-items:center;gap:3px;font:700 .95rem var(--schrift-kopf);letter-spacing:0}
.sp .dot svg.st{width:15px;height:15px}
.sp .eintrag{border-top:1px solid var(--linie);position:relative}
.sp .grp+.eintrag{border-top:0}
.sp .eintrag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sc,transparent)}
.sp .eintrag.s-rot{--sc:var(--rot);--tint:var(--rot-weich)}
.sp .eintrag.s-gelb{--sc:var(--gelb);--tint:var(--gelb-weich)}
.sp .eintrag.s-ok{--sc:var(--gruen)}
.sp .eintrag.s-inaktiv{--sc:var(--grau)}
.sp .eintrag.s-gelb>.zeile{background:linear-gradient(90deg,var(--tint),transparent 55%)}
.sp .eintrag.s-rot>.zeile{background:linear-gradient(90deg,var(--tint),transparent 60%)}
.sp .eintrag.s-inaktiv .zeile{opacity:.72}
.sp .zeile{width:100%;min-height:58px;border:0;background:transparent;text-align:left;padding-block:6px;color:inherit}
.sp .zeile:hover{background:var(--flaeche-2)}
.sp .eintrag.s-gelb>.zeile:hover{background:var(--tint)}
.sp .st{width:24px;height:24px;display:block}
.sp .chev{width:18px;height:18px;transition:transform .2s;color:var(--text-2)}
.sp .eintrag.offen .chev{transform:rotate(180deg)}
.sp .eintrag.offen{background:var(--flaeche-2)}
.sp .eintrag.offen::before{width:6px}
.sp .eintrag.offen>.zeile{background:transparent}
/* Fahrzeugzeilen */
.sp .cols.lv, .sp .zeile.lv{--gt-alle:30px minmax(190px,1.3fr) 84px minmax(150px,1.1fr) 120px 134px 50px 92px 156px 28px;grid-template-columns:var(--gt,var(--gt-alle))}
.sp .dev{display:flex;gap:10px;align-items:center;min-width:0}
.sp .dev>.fz{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--fc) 16%,transparent);color:var(--fc);flex:none}
.sp .dev b{font:700 1.2rem var(--schrift-kopf);letter-spacing:.03em;display:flex;gap:7px;align-items:center;line-height:1.1;flex-wrap:wrap}
.sp .dev small{display:block;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.sp .dev>div{min-width:0}
.sp .tag{white-space:nowrap;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:10px;background:var(--text);color:var(--flaeche);font:700 .875rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase}
.sp .tag.g{background:var(--gelb-text);color:#fff}
:root[data-theme="dark"] .sp .tag.g{color:#1c1c1c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp .tag.g{color:#1c1c1c}
}
.sp .offen-t{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:10px;border:1.5px dashed var(--text-3);background:transparent;color:var(--text-2);font:700 .875rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase}
.sp .c{min-width:0}
.sp .c .v{font:700 1.4rem/1.05 var(--schrift-kopf);display:block;white-space:nowrap}
.sp .c .v small{font-size:.9rem;color:var(--text-2);font-weight:600}
.sp .c .s{display:block;color:var(--text-3);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Kit-Regel: keine einzeiligen „…“-Abschneider. Prognose („+8:57 min Rekordkurs“) und Zuletzt („KM 42 · vor 23 h 59 min“) brechen in zwei Zeilen um */
.sp .zeile.lv .c.pg .s, .sp .zeile.lv .c.lm .s{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
.sp .c .s.g{color:var(--gelb-text);font-weight:600}
.sp .c .s.r{color:var(--rot);font-weight:600}
.sp .c .s.p{color:var(--petrol);font-weight:600}
.sp .kmb{height:5px;border-radius:3px;background:var(--grau-weich);margin-top:5px;overflow:hidden;border:1px solid var(--linie)}
.sp .kmb i{display:block;height:100%;background:var(--fc)}
.sp .sig{width:22px;height:18px;color:var(--text);display:block}
.sp .sig.w{color:var(--gelb-text)}
.sp .akku{display:flex;align-items:center;gap:7px}
.sp .bar{margin-right:4px;position:relative;width:40px;height:12px;border-radius:3px;border:1.5px solid var(--text-3);padding:1px;flex:none}
.sp .bar::after{content:"";position:absolute;right:-5px;top:2px;width:3px;height:4px;background:var(--text-3);border-radius:0 2px 2px 0}
.sp .bar i{display:block;min-width:3px;height:100%;border-radius:1px;background:var(--bc)}
.sp .bar.k{--bc:var(--rot)}
.sp .bar.g{--bc:var(--gelb)}
.sp .bar.o{--bc:var(--gruen)}
.sp .bar.x{--bc:var(--grau)}
.sp .akku b{font:700 1.1rem var(--schrift-kopf)}
.sp .c::before{display:none}
/* Detail */
.sp .det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.sp .eintrag.offen>.det{grid-template-rows:1fr}
.sp .det>div{overflow:hidden;min-height:0}
.sp .det .rahmen{padding:4px 18px 18px 56px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px 20px}
.sp .box{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:12px;min-width:0}
.sp .box h3{margin:0 0 8px;font:700 .95rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:6px}
.sp .box h3 .r{margin-left:auto;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--text-3)}
.sp .chart{display:block;width:100%;height:auto}
.sp .chart text{fill:var(--text-3);font:14px var(--schrift)}
.sp .kach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sp .k{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sp .k .l{display:flex;align-items:center;gap:5px;color:var(--text-2);font:700 .85rem var(--schrift-kopf);letter-spacing:.08em;text-transform:uppercase}
.sp .k .l svg.i{width:15px;height:15px}
.sp .k .vv{font:700 1.45rem var(--schrift-kopf);line-height:1.1;white-space:normal;overflow-wrap:anywhere}
.sp .k .vv small{font-size:.85rem;font-weight:600;color:var(--text-2)}
.sp .k .ss{font-size:.875rem;color:var(--text-3);overflow-wrap:anywhere}
.sp .k.g .vv{color:var(--gelb-text)}
.sp .k.p .vv{color:var(--petrol)}
.sp .span3{grid-column:1/-1}
.sp .sp-r{display:flex;flex-direction:column;gap:12px;min-width:0}
.sp .mel{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;background:var(--gelb-weich);border:1px solid var(--gelb)}
.sp .mel svg{color:var(--gelb-text);margin-top:1px}
.sp .mel.ok{background:var(--gruen-weich);border-color:var(--gruen)}
.sp .mel.ok svg{color:var(--gruen)}
.sp .mel.rt{background:var(--rot-weich);border-color:var(--rot)}
.sp .mel.rt svg{color:var(--rot)}
.sp .mel a, .sp .mel button.lnk{margin-left:auto;white-space:nowrap;font-weight:700;color:var(--text);text-decoration:underline;background:none;border:0;padding:0}
.sp .log{display:flex;flex-direction:column}
.sp .log div{display:grid;grid-template-columns:34px 78px 130px minmax(0,1fr);gap:8px;padding:5px 0;border-top:1px solid var(--linie);align-items:baseline}
.sp .log div:first-child{border-top:0}
.sp .log .q{color:var(--text-3)}
.sp .log .a{font:700 .85rem var(--schrift-kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.sp .log .tx{min-width:0;overflow-wrap:anywhere}
.sp .akt{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp .btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1.5px solid var(--linie-stark);background:var(--flaeche);font:700 1.05rem var(--schrift-kopf);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--text)}
.sp .btn:hover{border-color:var(--text-2)}
.sp .btn.war{background:var(--akzent);border-color:var(--akzent);color:#fff}
:root[data-theme="dark"] .sp .btn.war{background:#c8302f;border-color:#c8302f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp .btn.war{background:#c8302f;border-color:#c8302f}
}
.sp .btn.kl{height:32px;padding:0 11px;font-size:.95rem}
.sp .btn:disabled{opacity:.5;cursor:not-allowed}
.sp .ask{display:none;align-items:center;gap:8px;flex-wrap:wrap}
.sp .ask.an{display:inline-flex}
.sp .ask b{font:700 1rem var(--schrift-kopf);letter-spacing:.04em}
.sp .pill{display:inline-flex;gap:6px;align-items:baseline;padding:3px 10px;border-radius:14px;background:var(--grau-weich);border:1px solid var(--linie)}
.sp .pill b{font:700 1rem var(--schrift-kopf)}
.sp .pill span{color:var(--text-2);font-size:.85rem}
/* Zwischenzeiten + Karte */
.sp .zwei{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-top:14px;align-items:start}
.sp .sek{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten);overflow:clip}
.sp .sek__k{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--flaeche-2);border-bottom:1px solid var(--linie);flex-wrap:wrap}
.sp .sek__k .re{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sp .cols.zw, .sp .zeile.zw{--gt-alle:124px 92px 94px 84px 92px 60px 42px 24px;grid-template-columns:var(--gt,var(--gt-alle));column-gap:10px}
.sp .zeile.zw{min-height:44px}
.sp .zw .kmn{font:700 1.2rem var(--schrift-kopf);display:flex;gap:6px;align-items:center}
.sp .zw .ze{font:700 1.15rem var(--schrift-kopf)}
.sp .dl{display:inline-flex;align-items:center;gap:3px;font:700 1rem var(--schrift-kopf)}
.sp .abw{display:inline-flex;align-items:center;gap:3px;font:700 .85rem var(--schrift-kopf);color:var(--gelb-text,var(--gelb));white-space:nowrap}
.sp .abw svg{width:15px;height:15px}
.sp .dl svg{width:13px;height:13px}
.sp .dl.p{color:var(--petrol)}
.sp .dl.g{color:var(--gelb-text)}
.sp .eintrag.hm{--sc:var(--text-2)}
.sp .eintrag.hm .zeile{background:var(--flaeche-2)}
.sp .zd{padding:2px 14px 14px 62px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 190px;gap:8px}
.sp .zd .k{padding:6px 9px}
.sp .zd .k .vv{font-size:1.1rem}
.sp .zd .mini-s{grid-column:4;grid-row:1/span 3;border:1px solid var(--linie);border-radius:8px;background:var(--karte);overflow:hidden}
.sp .zd .mini-s svg{display:block;width:100%;height:100%}
.sp .zd .korr{grid-column:1/4}
.sp .mehr{display:block;width:100%;border:0;border-top:1px solid var(--linie);background:var(--flaeche-2);padding:10px;font:700 1rem var(--schrift-kopf);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.sp .kart{position:relative;background:var(--karte);aspect-ratio:800/540;overflow:hidden;border-radius:0 0 12px 12px}
.sp .kart svg.bg{position:absolute;inset:0;width:100%;height:100%}
.sp .kart .mk{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:3}
.sp .kart .fzm{width:28px;height:28px;border-radius:50%;background:var(--fc);color:#fff;border:3px solid var(--flaeche);box-shadow:0 0 0 1.5px var(--fc),0 2px 6px rgb(0 0 0/.35);font:700 .95rem var(--schrift-kopf)}
:root[data-theme="dark"] .sp .kart .fzm{color:#121212}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp .kart .fzm{color:#121212}
}
.sp .kart .fzm::after{content:attr(data-km);position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--flaeche);color:var(--text);border:1.5px solid var(--fc);border-radius:9px;padding:0 6px;font:700 .85rem/16px var(--schrift-kopf);white-space:nowrap}
.sp .kart .trk{width:15px;height:15px;transform:translate(-50%,-50%) rotate(45deg);background:var(--grau);border:2px solid var(--flaeche);box-shadow:0 0 0 1.5px var(--grau)}
.sp .kart .trk.stz{background:var(--flaeche)}
.sp .kart .pf{position:absolute;transform:translate(-50%,-100%);z-index:2;font:700 .875rem var(--schrift-kopf);letter-spacing:.06em;color:var(--text);background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:6px;padding:0 5px;white-space:nowrap}
.sp .kart .kmm{position:absolute;transform:translate(-50%,-50%);font:700 .875rem var(--schrift-kopf);color:var(--text-2);background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:8px;padding:0 4px;z-index:1}
.sp .kart .schema{position:absolute;left:8px;bottom:8px;z-index:4}
.sp .kart .zoom{position:absolute;right:8px;top:8px;z-index:4;display:flex;flex-direction:column;border:1px solid var(--linie-stark);border-radius:8px;overflow:hidden;background:var(--flaeche)}
.sp .kart .zoom button{width:30px;height:30px;border:0;background:transparent;font:700 1.1rem var(--schrift-kopf)}
.sp .kart .zoom button+button{border-top:1px solid var(--linie)}
.sp .kebenen{display:flex;gap:6px;flex-wrap:wrap}
.sp .kebenen .chip{height:30px;font-size:.95rem;padding:0 10px 0 8px;gap:6px}
/* Startzeit-Zeilen */
.sp .cols.sz, .sp .zeile.sz{--gt-alle:30px minmax(190px,1.3fr) 110px 150px 130px 130px 170px 28px;grid-template-columns:var(--gt,var(--gt-alle))}
.sp .zeitachse{position:relative;height:152px;margin:6px 4px 0}
.sp .zeitachse .lin{position:absolute;left:0;right:0;top:72px;height:2px;background:var(--linie-stark)}
.sp .zeitachse .kor{position:absolute;top:58px;height:30px;box-sizing:border-box;container-type:inline-size;transform:translateX(-50%);background:var(--petrol-weich);border:1.5px solid var(--petrol);border-radius:6px}
.sp .zeitachse .kor span{position:absolute;left:0;right:0;text-align:center;padding:0 8px;top:5px;font:700 .875rem var(--schrift-kopf);letter-spacing:.08em;color:var(--petrol);white-space:nowrap}
.sp .zeitachse .m{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font:700 .95rem var(--schrift-kopf);white-space:nowrap}
.sp .zeitachse .m.o{top:0}
.sp .zeitachse .m.u{top:108px;flex-direction:column-reverse}
.sp .zeitachse .m svg{width:22px;height:22px}
.sp .zeitachse .m small{font:600 .875rem var(--schrift);color:var(--text-3)}
.sp .zeitachse .tk{position:absolute;top:92px;font:600 .875rem var(--schrift-kopf);color:var(--text-3);transform:translateX(-50%)}
.sp .zeitachse .d{position:absolute;top:54px;height:10px;border-top:3px solid var(--gelb)}
.sp .zeitachse .d.ok{border-color:var(--gruen)}
/* Verwaltung */
.sp .vp{display:none}
.sp .vp.an{display:block}
.sp .vp>.liste+.liste, .sp .vp>.liste+.sek{margin-top:14px}
.sp .cols.vw, .sp .zeile.vw{--gt-alle:30px minmax(180px,1.4fr) 110px 120px minmax(160px,1.6fr) 90px 28px;grid-template-columns:var(--gt,var(--gt-alle))}
.sp .cols.vg, .sp .zeile.vg{--gt-alle:30px minmax(200px,1.5fr) 150px minmax(190px,1.1fr) 110px 100px 90px 28px;grid-template-columns:var(--gt,var(--gt-alle))}
.sp .cols.vt, .sp .zeile.vt{--gt-alle:30px minmax(170px,1.4fr) 120px 110px 110px 130px 28px;grid-template-columns:var(--gt,var(--gt-alle))}
.sp .cols.vb, .sp .zeile.vb{--gt-alle:30px minmax(170px,1.4fr) 130px 190px 28px;grid-template-columns:var(--gt,var(--gt-alle))}
/* Sitzungen: Spalte Gerät braucht Platz für „Pixel 8 Führungsfahrzeug“; zu lange Namen werden gekürzt (title zeigt den ganzen) */
.sp .cols.vs, .sp .zeile.vs{--gt-alle:30px minmax(160px,1.3fr) 130px minmax(190px,1fr) 80px 90px 40px 28px;grid-template-columns:var(--gt,var(--gt-alle))}
.sp .zeile.vs>.c .v{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp .form{padding:6px 18px 16px 56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px}
.sp .fl{display:flex;flex-direction:column;gap:4px;min-width:0}
.sp .fl>span{font:700 .82rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);display:flex;gap:6px;align-items:center}
.sp .in{height:38px;border:1.5px solid var(--linie-stark);border-radius:10px;background:var(--flaeche);padding:0 10px;min-width:0;width:100%}
.sp input[type="color"].in{padding:3px;width:64px}
.sp .s2{grid-column:span 2}
.sp .s4{grid-column:1/-1}
.sp .frow{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp .rk{display:grid;grid-template-columns:minmax(0,1.6fr) 110px minmax(0,1.6fr) 34px;gap:8px;align-items:center}
.sp .nb{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:10px 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sp .sw{display:inline-flex;width:44px;height:26px;border-radius:13px;background:var(--grau);position:relative;border:0;padding:0;flex:none}
.sp .sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.sp .sw[aria-pressed="true"]{background:var(--gruen)}
.sp .sw[aria-pressed="true"]::after{transform:translateX(18px)}
.sp .push{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.sp .pcl{display:flex;gap:6px;flex-wrap:wrap}
.sp .pcl .chip{height:36px;font-size:1rem}
.sp .lad{display:flex;gap:8px;align-items:center}
/* Info-Overlay */
.sp .ov{position:fixed;inset:0;background:rgb(0 0 0/.45);z-index:50;display:grid;place-items:center;padding:16px}
.sp .ov>div{background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:14px;max-width:560px;width:100%;padding:16px 18px;max-height:90vh;overflow:auto}
.sp .ov h2{margin:0 0 12px;font:700 1.2rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center}
.sp .ov h2 .ib{margin-left:auto;border-color:var(--linie-stark);color:var(--text)}
.sp .leg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sp .leg>div{display:flex;gap:10px;align-items:center;border:1px solid var(--linie);border-radius:10px;padding:8px 10px;min-width:0}
.sp .leg b{font:700 1.05rem var(--schrift-kopf);display:block;line-height:1.1}
.sp .leg small{color:var(--text-2)}
.sp .leg .bar{width:44px}
.sp .ov h4{margin:14px 0 6px;font:700 .9rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.sp .lueck{display:flex;flex-direction:column;gap:6px}
.sp .lueck>div{display:flex;gap:10px;align-items:center;border:1.5px dashed var(--linie-stark);border-radius:10px;padding:8px 10px}
.sp .lueck b{font:700 1.05rem var(--schrift-kopf);display:block;line-height:1.1}
.sp .lueck small{color:var(--text-2)}
.sp .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--text);color:var(--flaeche);padding:10px 16px;border-radius:10px;font:700 1rem var(--schrift-kopf);letter-spacing:.04em;z-index:60;max-width:calc(100vw - 32px)}
.sp .fuss{margin-top:18px;display:flex;gap:10px;align-items:center;color:var(--text-3);font-size:.82rem;flex-wrap:wrap}
.sp .fuss button{background:none;border:0;text-decoration:underline;color:var(--text-2);padding:0}
/* schmal */
@media (max-width:1180px){
  .sp .cols{display:none}
  .sp .zeile.lv{grid-template-columns:30px minmax(0,1fr) auto 28px;grid-template-areas:"st dev dev chev" ". rz km km" ". tp pg sg" ". ak lm lm";row-gap:8px;column-gap:10px;padding-block:12px;align-items:start}
  .sp .zeile.lv>.st{grid-area:st;margin-top:3px}
  .sp .zeile.lv>.dev{grid-area:dev}
.sp .zeile.lv>.c.rz{grid-area:rz}
  .sp .zeile.lv>.c.km{grid-area:km}
.sp .zeile.lv>.c.tp{grid-area:tp}
.sp .zeile.lv>.c.pg{grid-area:pg}
.sp .zeile.lv>.c.sg{grid-area:sg;justify-self:end}
  .sp .zeile.lv>.c.ak{grid-area:ak}
.sp .zeile.lv>.c.lm{grid-area:lm;text-align:right}
  .sp .zeile.lv>.chev{grid-area:chev;margin-top:5px}
  .sp .zeile.lv .c::before{display:block;content:attr(data-l);font:700 .72rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:1px}
  .sp .zeile.lv.tr>.c.rz, .sp .zeile.lv.tr>.c.pg{display:none}
  .sp .zeile.lv .c.rz .v{font-size:1.7rem}
  .sp .zeile.lv .c.km .v{font-size:1.7rem}
  .sp .zeile.sz{grid-template-columns:30px repeat(3,minmax(0,1fr));grid-template-areas:"st dev dev chev" ". ge ge ge" ". rr tp df";row-gap:8px;padding-block:12px;align-items:start}
  .sp .zeile.sz>.st{grid-area:st;margin-top:3px}
.sp .zeile.sz>.dev{grid-area:dev}
.sp .zeile.sz>.c.ge{grid-area:ge}
.sp .zeile.sz>.chev{grid-area:chev;margin-top:5px;justify-self:end}
  .sp .zeile.sz>.c.pl{display:none}
.sp .zeile.sz>.c.rv{grid-area:rr}
.sp .zeile.sz>.c.tp{grid-area:tp}
.sp .zeile.sz>.c.df{grid-area:df;text-align:right}
  .sp .zeile.sz .c::before{display:block;content:attr(data-l);font:700 .72rem var(--schrift-kopf);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:1px}
    .sp .zeile.vw, .sp .zeile.vg, .sp .zeile.vs, .sp .zeile.vt, .sp .zeile.vb{grid-template-columns:30px minmax(0,1fr) auto 28px;row-gap:4px;padding-block:10px}
  .sp .zeile.vw>.c.x, .sp .zeile.vg>.c.x, .sp .zeile.vs>.c.x, .sp .zeile.vt>.c.x, .sp .zeile.vb>.c.x{display:none}
  .sp .det .rahmen{padding:4px 14px 16px 16px;grid-template-columns:1fr}
  .sp .zwei{grid-template-columns:1fr}
  .sp .form{padding:6px 14px 16px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp .push{grid-template-columns:1fr}
}
@media (max-width:700px){
  .sp .zeile.zw{grid-template-columns:64px 1fr 82px 70px 24px;column-gap:8px}
  .sp .cols.zw{grid-template-columns:64px 1fr 82px 70px 24px;display:grid;column-gap:8px}
  .sp .zw .c.u, .sp .zw .c.sn, .sp .zw .c.sg2{display:none}
  .sp .zw.cols .u, .sp .zw.cols .sn, .sp .zw.cols .sg2{display:none}
  .sp .cols.zw{padding:0 14px 0 12px}
  .sp .abw{font-size:0}
  .sp .zd{grid-template-columns:repeat(2,minmax(0,1fr));padding:2px 12px 12px 12px}
  .sp .zd .mini-s{grid-column:1/-1;grid-row:auto;height:130px}
  .sp .zd .korr{grid-column:1/-1}
  .sp .log div{grid-template-columns:30px 66px minmax(0,1fr)}
  .sp .log .a{display:none}
}
@media (max-width:560px){
  .sp .tools{gap:8px}
.sp .chip{flex:1;justify-content:center;padding:0 6px}
  .sp .kebenen .chip{flex:none}
  .sp .seg{width:100%}
.sp .seg button{flex:1;justify-content:center;padding:0 6px}
  .sp .tab{flex:1;justify-content:center;padding:0 6px;font-size:.98rem;letter-spacing:.06em}
  .sp .tabs__in{gap:0}
  .sp .tab svg{display:none}
  .sp .evt{width:100%}
.sp .evb{width:100%}
.sp .menu{min-width:0;width:100%}
  .sp .uhr{width:100%;justify-content:space-between;gap:8px;padding:0 10px}
  .sp .ctx .sp1{display:none}
  .sp .kach{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp .band{padding:10px 12px 8px}
  .sp .lanes{grid-template-columns:minmax(0,1fr)}
  .sp .lane-l{flex-direction:row;align-items:center;gap:10px;height:22px;margin-top:2px}
  .sp .luecke, .sp .achse{grid-column:1}
  .sp .abst{flex-wrap:wrap}
  .sp .abst{margin-left:0;width:100%;justify-content:space-between}
  .sp .pin .kmz{font-size:1.25rem}
  .sp .leg{grid-template-columns:1fr}
  .sp .form{grid-template-columns:1fr}
.sp .s2{grid-column:auto}
  .sp .rk{grid-template-columns:1fr 90px 1fr 34px}
  .sp .zeitachse .m small{display:none}
  .sp .zeitachse .tk.e{display:none}
  .sp .zeitachse{height:152px}
}
@keyframes neu-hell{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gruen) 60%,transparent)}
35%{box-shadow:0 0 0 5px color-mix(in srgb,var(--gruen) 35%,transparent)}
100%{box-shadow:0 0 0 0 transparent}
}
.sp .neu-hinweis .mel{animation:neu-hell 1.8s ease-out 1}
@media (prefers-reduced-motion:reduce){.sp .det, .sp .chev{transition:none}
.sp .neu-hinweis .mel{animation:none}
.sp .verb i{animation:none}
}

/* Bausteine, die der Entwurf nur inline zeichnet */
.sp .legband { width: 44px; height: 14px; border-radius: 7px; display: block; }
.sp .legstrich { width: 44px; border-top: 2px dashed var(--text-2); display: block; }
.sp .ibn { background: none; border: 0; padding: 0; color: var(--text-2); display: inline-flex; align-items: center; width: 22px; height: 22px; justify-content: center; }
.sp .ibn:hover { color: var(--text); }
.sp .ib { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; }
.sp .ov h2 .ib { margin-left: auto; border-color: var(--linie-stark); color: var(--text); }
.sp .ov { overflow: auto; }
.sp .verb.warn { color: var(--gelb-text); }
.sp .verb.warn i { background: var(--gelb); animation: none; }
.sp .verb.schlecht { color: var(--rot); }
.sp .verb.schlecht i { background: var(--rot); animation: none; border-radius: 0; transform: rotate(45deg); width: 9px; height: 9px; }

/* ---------- Live: Liste, Zeilen, Detail ---------- */
.sp .st-slot { display: flex; align-items: center; }
.sp .gruppe[hidden] { display: none; }
.sp .eintrag[hidden] { display: none; }
.sp .liste .cols.lv, .sp .liste .zeile.lv { min-width: 0; }
.sp .dev .fz.grau { background: var(--grau-weich); color: var(--grau); }
.sp .eintrag.tracker .zeile { cursor: default; }
.sp .zeile.lv.tr > .chev { visibility: hidden; }
.sp .c .v.nil { font-weight: 600; }
.sp .c .s.g { color: var(--gelb-text); font-weight: 600; }
.sp .c .s.r { color: var(--rot); font-weight: 600; }
.sp .c .s .dl { margin-right: 2px; }
.sp .c.sg .nil { font-weight: 700; }
.sp .eintrag.s-gelb .zeile.lv .st, .sp .eintrag.s-rot .zeile.lv .st { flex: none; }
.sp .karten-knoepfe .btn.an { border-color: var(--text); box-shadow: inset 0 -3px 0 var(--akzent); }
.sp .det .rahmen { align-items: start; }
.sp .sp-l { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp .box .spark { height: 140px; margin: 0 0 4px; }
.sp .achsen-fuss { display: flex; justify-content: space-between; color: var(--text-3); font: 600 .875rem var(--schrift-kopf); }
.sp .box .kach { margin-top: 0; }
.sp .kach.werte, .sp .kach.status-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp .kach.status-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp .box .status-raster .k .vv { font-size: 1.15rem; }
.sp .kach .k.r .vv { color: var(--rot); }
.sp .kach .span3 { grid-column: 1 / -1; }
.sp .kachel-liste { display: grid; gap: 3px; }
.sp .kachel-zeile { display: grid; gap: 0; min-width: 0; }
.sp .kachel-text { font-size: .875rem; color: var(--text-2); }
.sp .kachel-zahl { font: 700 1.1rem var(--schrift-kopf); }
.sp .kachel-zahl.vorn { color: var(--petrol); }
.sp .kachel-zahl.hinten { color: var(--gelb-text); }
.sp .k .km-leiste { margin: 4px 0 2px; }
.sp .meldung { padding: 8px 10px; border-radius: 8px; font-size: .95rem; }
.sp .meldung.warn { background: var(--gelb-weich); border: 1px solid var(--gelb); color: var(--text); }
.sp .meldung.schlecht { background: var(--rot-weich); border: 1px solid var(--rot); border-left-width: 4px; }
.sp .meldung.gut { background: var(--gruen-weich); border: 1px solid var(--gruen); }
.sp .start-zeile { display: grid; gap: 8px; }
.sp .start-zeile .satz { font-size: .9rem; color: var(--text-2); }
.sp .start-zeile .start-quellen { font: 700 1.05rem var(--schrift-kopf); }
.sp .start-zeile .start-quellen .bez { font: 500 .85rem var(--schrift); color: var(--text-2); }
.sp .start-zeile button.haupt { background: var(--akzent); color: #fff; border-radius: 10px; height: 36px; padding: 0 14px; font: 700 1rem var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; }
.sp .start-zeile button { border: 1.5px solid var(--linie-stark); border-radius: 10px; height: 36px; padding: 0 14px; font: 700 1rem var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; margin-right: 6px; }
:root[data-theme="dark"] .sp .start-zeile button.haupt { background: #c8302f; border-color: #c8302f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp .start-zeile button.haupt { background: #c8302f; border-color: #c8302f; } }
.sp .rueckfrage { background: var(--gelb-weich); border: 1px solid var(--gelb); border-radius: 8px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Zwischenzeiten */
.sp .zw-inhalt { min-width: 0; }
.sp .zw-tabelle { padding: 0; }
.sp .zw-tabelle .leer { padding: 14px; color: var(--text-3); }
.sp .zw-tabelle .tabelle-huelle { margin: 0; max-height: 520px; overflow-y: auto; overflow-x: hidden; }
.sp .zw-tabelle table.durchgaenge { font-size: 14px; }
.sp .zw-tabelle table.durchgaenge th { background: var(--flaeche-2); font: 700 .88rem var(--schrift-kopf); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); height: 38px; padding: 0 8px; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--linie); }
.sp .zw-tabelle table.durchgaenge td { padding: 9px 8px; font: 700 1.1rem var(--schrift-kopf); }
.sp .zw-tabelle table.durchgaenge td.km { font-size: 1.2rem; }
.sp .zw-tabelle table.durchgaenge td.spalte-gen, .sp .zw-tabelle table.durchgaenge td.spalte-status { font: 500 .85rem var(--schrift); color: var(--text-2); }
.sp .zw-tabelle table.durchgaenge .status-warn { color: var(--gelb-text); }
.sp .zw-tabelle table.durchgaenge .status-schlecht { color: var(--rot); }
.sp .zw-tabelle table.durchgaenge tr.zeile.gewaehlt td { background: var(--petrol-weich); }
.sp .zw-tabelle table.durchgaenge tr.neu td { background: var(--gelb-weich); }
.sp .zw-tabelle table.durchgaenge th:first-child, .sp .zw-tabelle table.durchgaenge td:first-child { padding-left: 14px; }
.sp .zw-tabelle table.durchgaenge th:last-child, .sp .zw-tabelle table.durchgaenge td:last-child { padding-right: 14px; }
.sp .zw-tabelle .mehr[hidden] { display: none; }
.sp .sek__k .seg button { height: 30px; font-size: .95rem; }
.sp .sek__k .re { margin-left: auto; }
.sp .sek__k .seg + .re { margin-left: auto; }
.sp .sek__k .re .pill { background: var(--flaeche); }

/* Karte */
.sp .karten-flaeche { position: relative; height: 440px; display: block; }
.sp #karte { height: 100%; width: 100%; background: var(--karte); }
.sp .karten-hinweise { top: 10px; left: 52px; right: 120px; }
.sp .karten-profil { border-top: 1px solid var(--linie); background: var(--flaeche); padding: 8px 14px; }
.sp .karten-knoepfe { display: flex; gap: 6px; }
.sp .karten-knoepfe .btn { height: 32px; padding: 0 10px; font-size: .95rem; gap: 6px; }
.sp .sek { overflow: clip; }
.sp .kart-fuss { display: none; }

@media (max-width: 1180px) {
  .sp .zeile.lv { grid-template-columns: 30px minmax(0, 1fr) auto 28px; grid-template-areas: "st dev dev chev" ". rz km km" ". tp pg sg" ". ak lm lm"; row-gap: 8px; column-gap: 10px; padding-block: 12px; align-items: start; }
  .sp .zeile.lv > .st-slot { grid-area: st; margin-top: 3px; }
  .sp .zeile.lv > .dev { grid-area: dev; }
  .sp .zeile.lv > .c.rz { grid-area: rz; } .sp .zeile.lv > .c.km { grid-area: km; } .sp .zeile.lv > .c.tp { grid-area: tp; }
  .sp .zeile.lv > .c.pg { grid-area: pg; } .sp .zeile.lv > .c.sg { grid-area: sg; justify-self: end; }
  .sp .zeile.lv > .c.ak { grid-area: ak; } .sp .zeile.lv > .c.lm { grid-area: lm; text-align: right; }
  .sp .zeile.lv > .chev { grid-area: chev; margin-top: 5px; }
  .sp .zeile.lv .c::before { display: block; content: attr(data-l); font: 700 .72rem var(--schrift-kopf); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1px; }
  .sp .zeile.lv.tr > .c.rz, .sp .zeile.lv.tr > .c.pg, .sp .zeile.lv.tr > .c.km { display: none; }
  .sp .zeile.lv .c.rz .v, .sp .zeile.lv .c.km .v { font-size: 1.7rem; }
  .sp .kach.status-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sp .karten-flaeche { height: 360px; }
  .sp .kach.werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp .sek__k .seg { width: 100%; }
  /* Handy: Kartenknöpfe als 44-px-Symbole in einer Reihe (Name steht im title / aria-label) */
  .sp .karten-knoepfe { flex-wrap: nowrap; }
  .sp .karten-knoepfe .btn { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
  .sp .karten-knoepfe .btn > span { display: none; }
  .sp .tools .seg button { min-width: 0; padding: 0 4px; }
  .sp .zw-tabelle table.durchgaenge .spalte-gen { display: none; }
}

.sp [hidden] { display: none !important; }
/* Tabelle der Zwischenzeiten: die Zeilenklasse .zeile gehört im Entwurf einem Raster – hier bleibt es eine Tabellenzeile */
.sp table.durchgaenge tr.zeile { display: table-row; width: auto; min-height: 0; padding: 0; column-gap: 0; background: transparent; }
.sp table.durchgaenge tr.zeile:hover { background: transparent; }
.sp table.durchgaenge tr.zeile:hover td { background: var(--flaeche-2); }
.sp table.durchgaenge tr.unter { display: table-row; }
.sp .karten-flaeche .ebenen-knopf, .sp .karten-flaeche .karten-legende button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 0; padding: 0 12px; border: 1.5px solid var(--linie-stark); border-radius: 10px;
  background: var(--flaeche); color: var(--text); font: 700 1rem var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--schatten); white-space: nowrap;
}
.sp .karten-flaeche .ebenen-knopf:hover, .sp .karten-flaeche .karten-legende button:hover { background: var(--flaeche-2); }
.sp .karten-flaeche .karten-legende { bottom: 28px; }
.sp .achse .hm-text { font-weight: 700; color: var(--text-2); }
.sp .pin .kmz .kv { font: inherit; }
.sp .pin .kmz.klein { font-size: 1.05rem; }
.sp .sek__k .karten-knoepfe { display: flex; padding: 0; background: transparent; border: 0; gap: 6px; flex-wrap: wrap; }
.sp .zw-tabelle table.durchgaenge th.spalte-startnr { background: var(--flaeche-2); }
@media (max-width: 560px) {
  .sp .zw-tabelle table.durchgaenge td, .sp .zw-tabelle table.durchgaenge th { padding-left: 4px; padding-right: 4px; }
  .sp .zw-tabelle table.durchgaenge td { font-size: 1rem; }
  .sp .zw-tabelle table.durchgaenge .spalte-status { display: none; }
  .sp .zw-tabelle table.durchgaenge th:first-child, .sp .zw-tabelle table.durchgaenge td:first-child { padding-left: 12px; }
}
.sp .zd.ohne-mini{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp .zd .frow{grid-column:1/-1}
.sp .zeile.zw .c.nil, .sp .zeile.zw .nil{font-weight:600}
.sp .zeile.zw s{color:var(--text-3)}
.sp .streich{text-decoration:line-through;color:var(--text-3)}
/* Verwaltung: Ergänzungen zum Entwurf (Formulare in Zeilen, Rückfrage, Benutzer) */
.sp .cols.vn, .sp .zeile.vn{grid-template-columns:30px minmax(0,1fr) 28px}
.sp .cols.vb, .sp .zeile.vb{grid-template-columns:30px minmax(170px,1.4fr) minmax(230px,1.2fr) 150px 28px}
.sp .cols.vb>:nth-child(5), .sp .zeile.vb>:nth-child(5){grid-column:5}
.sp .form.flach{padding-left:18px;padding-top:12px}
.sp .form.pur{padding:0}
.sp .form .box{min-width:0}
.sp .form .box .form{padding:0}
.sp .form.rekorde{grid-template-columns:1fr}
.sp .fl small.nil, .sp .feld-satz{font-size:.875rem;line-height:1.25}
.sp .feld-satz.fehler{color:var(--rot);font-weight:600}
.sp .feld-satz.hinweis{color:var(--gelb-text);font-weight:600}
.sp .rf{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp .mel.klein{padding:5px 8px;font-size:.85rem}
.sp .ask select.in{height:32px}
.sp .lad{width:100%}
.sp .lad .in{flex:1;min-width:0}
.sp .nb input[type="checkbox"]{width:20px;height:20px;accent-color:var(--akzent)}
.sp .nb.s2{grid-column:span 2}
.sp .liste+.liste, .sp .liste+.tools, .sp .tools+.liste{margin-top:14px}
.sp .zeile.vn>*, .sp .zeile.vw>*, .sp .zeile.vg>*, .sp .zeile.vs>*, .sp .zeile.vt>*{min-width:0}
.sp .sw[aria-hidden]{pointer-events:none}
.sp details summary{cursor:pointer;font-weight:700}
.sp .lueck .btn{margin-left:auto}
@media (max-width:1180px){
  .sp .zeile.vn{grid-template-columns:30px minmax(0,1fr) 28px}
  .sp .zeile.vb{grid-template-columns:30px minmax(0,1fr)}
  .sp .zeile.vb>.c{grid-column:2/-1}
  .sp .zeile.vb>span:last-child{display:none}
  .sp .zeile.vw>.c, .sp .zeile.vg>.c, .sp .zeile.vs>.c, .sp .zeile.vt>.c{display:none}
  .sp .zeile.vw, .sp .zeile.vg, .sp .zeile.vs, .sp .zeile.vt{grid-template-columns:30px minmax(0,1fr) 28px}
  .sp .form .s2{grid-column:span 2}
}
@media (max-width:700px){
  .sp .form{grid-template-columns:1fr}
  .sp .form .s2{grid-column:1/-1}
  .sp .nb.s2{grid-column:1/-1}
}
.sp .liste > .eintrag{display:block;padding:0;gap:0}
.sp .zeile{justify-content:start}
/* Überlauf-Befunde der Layout-Prüfung: lange Namen kürzen, Rasterkinder dürfen schrumpfen */
.sp .evt{min-width:0;max-width:100%}
.sp .evb{min-width:0;max-width:100%}
.sp .zwei>*{min-width:0}
.sp .sek{min-width:0;max-width:100%}
.sp .sek__k .seg{max-width:100%;overflow-x:auto}
.sp .sek__k .seg button{min-width:0}
.sp .zd .k{overflow:hidden}
.sp .zd .k .l{white-space:normal;letter-spacing:.03em;overflow-wrap:anywhere}
.sp .karten-legende button, .sp .objekt-karte button{min-height:44px;min-width:44px;padding:0 12px}
.sp .sek__k .seg{flex-wrap:wrap}
.sp .sek__k .seg button{white-space:normal;text-align:left;height:auto;min-height:36px;padding-block:4px}
@media (max-width:700px){
  .sp .karten-flaeche .ebenen-knopf, .sp .karten-flaeche .karten-legende button{height:44px;min-width:44px}
}
@media (min-width:701px){.sp .karten-flaeche .ebenen-knopf{height:44px}}
.sp .mel .btn, .sp .meldung .btn{white-space:normal;height:auto;min-height:40px;padding:6px 14px;text-align:left}
.sp .rueckfrage{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp .rueckfrage p{flex:1 1 220px}

/* =====================================================================================================
   Kit-Nachbesserung (strenge Prüfung splits-r1): Handy zuerst – Ziele ab 44 px, Schrift ab 14 px, Kontrast, Reihenfolge,
   Zeile mit Name + Kernwerten, keine Doppelungen. Steht am Ende, damit es die älteren Regeln übersteuert.
   ===================================================================================================== */
.sp .feld-satz:empty { display: none; }
.sp .rr-k1:empty, .sp .rr-w:empty { display: none; }
.sp .k.nur-handy { display: none; }
.sp .zeitachse .tk.a { transform: none; }
.sp .zeitachse .tk.e { transform: translateX(-100%); }
.sp-seite > .rr-tools { margin-bottom: 12px; }
.sp .rr-liste { margin-bottom: 12px; }
.sp .karten-flaeche .karten-legende { display: none; }

/* Kopf: Abmelden mit Tür-Symbol und Beschriftung (am Desktop sichtbar) */
rr-kopf .rr-ib.abmelden { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; font: 700 14px var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; }
rr-kopf .rr-ib.abmelden svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 20px; height: 20px; }

/* Leaflet-Zoom: Farben aus dem Kit (auch dunkel lesbar), am Handy entfällt er (zoomen per Zwei-Finger-Geste) */
.leaflet-bar { border: 1px solid var(--linie-stark); box-shadow: var(--schatten); }
.leaflet-bar a, .leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--flaeche); color: var(--text); border-bottom-color: var(--linie-stark); }
.leaflet-bar a:hover { background: var(--flaeche-2); }
.leaflet-touch .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; }
.leaflet-bar a.leaflet-disabled { background: var(--flaeche-2); color: var(--text-3); }

/* Übersicht: GPX-Knopf am Zeilenende */
.sp .rr-eintrag--link > .zeile-extra { position: absolute; right: 8px; top: 10px; z-index: 2; }
.sp .rr-eintrag--link:has(> .zeile-extra) > .rr-zeile--link { padding-right: 62px; }

/* Verwaltung: Kit-Segment, ⋯-Menü, Haken */
.sp .mehr-knopf { width: 44px; padding: 0; justify-content: center; cursor: pointer; }
.sp .rr-menue .btn, .sp .rr-menue .rf { width: 100%; justify-content: flex-start; }
.sp .rr-menue .rf { display: flex; }
.sp .haken-zeile { position: relative; cursor: pointer; min-height: 44px; }
.sp .haken-zeile input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sp .haken-zeile .haken { width: 24px; height: 24px; flex: none; border: 1.5px solid var(--linie-stark); border-radius: 6px; background: var(--flaeche); display: grid; place-items: center; color: transparent; }
.sp .haken-zeile .haken svg { width: 16px; height: 16px; }
.sp .haken-zeile input:checked + .haken { background: var(--akzent-flaeche); border-color: var(--akzent-flaeche); color: #fff; }
.sp .haken-zeile input:focus-visible + .haken { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Zwischenzeiten: Wettbewerbswahl bricht nie um */
.sp .sek__k .seg.zw-wahl { flex-wrap: nowrap; overflow: hidden; }
.sp .sek__k .seg.zw-wahl button { white-space: nowrap; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp .zw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp .dev b > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp .dev b .tag { flex: none; }
.sp .dev b { flex-wrap: nowrap; }

/* Live-Zeile bis 1180 px: Name + Rennzeit + KM; Tempo, Prognose, Empfang, Akku stehen aufgeklappt (Kacheln „nur Handy“), Zuletzt nur als Grund */
@media (max-width: 1180px) {
  .sp .zeile.lv { grid-template-columns: 30px minmax(0, 1fr) auto 28px; grid-template-areas: "st dev lm chev" ". rz km km"; row-gap: 6px; }
  .sp .zeile.lv > .c.tp, .sp .zeile.lv > .c.pg, .sp .zeile.lv > .c.sg, .sp .zeile.lv > .c.ak { display: none; }
  .sp .zeile.lv > .c.lm { display: none; grid-area: lm; text-align: right; align-self: center; }
  .sp .zeile.lv > .c.lm.grund { display: block; }
  .sp .zeile.lv > .c.lm .s, .sp .zeile.lv > .c.lm::before { display: none; }
  .sp .zeile.lv > .c.lm .v { color: var(--gelb-text); font: 700 1rem var(--schrift-kopf); }
  .sp .zeile.lv > .c.lm.r .v { color: var(--rot); }
  .sp .zeile.lv.tr { grid-template-areas: "st dev lm chev" ". tp tp tp"; }
  .sp .zeile.lv.tr > .c.tp { display: block; grid-area: tp; }
  .sp .k.nur-handy { display: flex; }
  .live-seite { display: flex; flex-direction: column; }
  .live-seite > .kontext { order: 0; }
  .live-seite > .sitzungen-raster { order: 1; }
  .live-seite > .rr-tools { order: 2; }
  .live-seite > #fahrzeug-liste { order: 3; }
  .live-seite > .band { order: 4; }
  .live-seite > .zwei { order: 5; }
  .sp .zeile.sz { grid-template-columns: 30px repeat(3, minmax(0, 1fr)) 28px; grid-template-areas: "st dev dev dev chev" ". ge ge ge ge" ". rr tp df df"; }
  .sp .zeile.sz > .chev { grid-area: chev; justify-self: end; }
  .sp .det .rahmen > .sp-r { order: -1; }
  .sp .dev b > .tag:not(.mobil) { display: none; }
  .sp .zeile.lv > .c.lm.hat-tag { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .sp .zeile.lv > .c.lm:not(.grund) .v { display: none; }
  .sp .zeile.lv > .c.lm .tag.mobil:not([hidden]) { display: inline-flex; }

}

/* ---------- Handy (bis 560 px) ---------- */
@media (max-width: 560px) {
  /* Ziele ab 44 px */
  .sp .evb, .sp .btn, .sp .btn.kl, .sp .seg button, .sp .in, .sp .start-zeile button, .sp .ask select.in, .sp .menu button, .sp .mehr, .sp .mel .btn, .sp .meldung .btn { min-height: 44px; }
  .sp .evb, .sp .btn, .sp .btn.kl, .sp .in, .sp .start-zeile button, .sp .ask select.in { height: 44px; }
  .sp .mel .btn, .sp .meldung .btn { height: auto; }
  .sp .evb { height: auto; padding-block: 3px; }
  .sp .ibn, .sp .sek__k .ibn, .sp .band__k .ibn, .sp .cols .ibn { width: 44px; height: 44px; margin: -11px -9px; }
  .sp .ib { width: 44px; height: 44px; }
  .km-marke { font-size: 14px; height: 22px; min-width: 26px; }
  .strecken-km, .strecken-km.start, .strecken-km.ziel, .strecken-km.hm { font-size: 14px; }
  .strecken-km { height: 24px; }
  .strecken-km.start, .strecken-km.ziel, .strecken-km.hm { height: 28px; }
  .objekt .etikett, .objekt .etikett .status { font-size: 14px; }
  .sp .seg.rollen { display: flex; width: 100%; }
  .sp .seg.rollen button { flex: 1; height: 44px; font-size: 1rem; }
  .sp .karten-flaeche .ebenen-knopf, .sp .karten-flaeche .karten-legende button { min-width: 44px; height: 44px; }
  .leaflet-control-zoom { display: none; }
  /* Kontextleiste: Veranstaltung (volle Breite), darunter Ortszeit/Rennzeit, Live und TV in einer Zeile */
  .sp .ctx { gap: 8px; }
  .sp .evt { flex: 1 1 100%; width: 100%; }
  .sp .uhr { flex: 1 1 auto; width: auto; height: 52px; padding: 0 10px; gap: 12px; justify-content: space-around; }
  .sp .uhr .kv { flex-direction: column; gap: 0; align-items: flex-start; }
  .sp .uhr .kv b { font-size: 1.2rem; line-height: 1.1; }
  .sp .tv-knopf { width: 44px; padding: 0; justify-content: center; }
  .sp .tv-knopf span { display: none; }
  /* Karte: drei Knöpfe mit Beschriftung in eigener Zeile */
  .sp .sek__k .re { margin-left: 0; flex: 1 1 100%; }
  .sp .karten-knoepfe { flex-wrap: nowrap; width: 100%; }
  .sp .karten-knoepfe { gap: 4px; }
  .sp .karten-knoepfe .btn { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 6px; gap: 4px; justify-content: center; letter-spacing: 0; }
  .sp .karten-knoepfe .btn > span { display: inline; overflow: hidden; text-overflow: ellipsis; }
  .sp .sek__k .seg.zw-wahl { width: 100%; }
  .sp .sek__k .seg.zw-wahl button { flex: 1; height: 44px; padding: 0 8px; }
  /* Zeitachse Startzeit: Beschriftungen am Rand ausgerichtet, die mittlere bleibt */
  .sp .zeitachse .tk.z { display: none; }
  .sp .zeitachse .tk.e { display: block; }
  .sp .zeile.sz .c.df::before { content: "RR − Tipp"; }
  /* Schrift mindestens 14 px */
  .sp .c .s, .sp .dev small, .sp .k .ss, .sp .k .l, .sp .kachel-text, .sp .achse span, .sp .band-zahl, .sp .lane-l small, .sp .abst small,
  .sp .tag, .sp .offen-t, .sp .demo, .sp .log .a, .sp .fl > span, .sp .fl small, .sp .feld-satz, .sp .mel.klein, .sp .start-zeile .satz,
  .sp .start-zeile .start-quellen .bez, .sp .achsen-fuss, .sp .zeile.lv .c::before, .sp .zeile.sz .c::before, .sp .uhr .kv small,
  .sp .zeitachse .tk, .sp .zeitachse .kor span, .sp .zeitachse .m, .sp .pill span, .sp .band-satz, .sp .legende, .sp .splits-satz,
  .sp .profil-skala, .sp .profil-satz, .sp .objekt .etikett .status, .sp .ebene-text small, .sp .ebenen-gruppe-kopf h4, .sp .ebenen-gruppe-zahl,
  .sp .ebenen-leer, .sp .klein, .sp .leise.klein, .sp .zw-tabelle table.durchgaenge .spalte-gen, .sp .zw-tabelle table.durchgaenge th,
  .sp .zd .k .l, .sp .split[data-km]::after, .sp .split-hm span, .sp .efflab, .sp .box h3 .r, .sp .karten-hinweise .meldung,
  .efflab, .fuss, .leaflet-control-attribution, .leaflet-popup-content, .sp .achse .hm-text { font-size: 14px; }
  .sp .karten-hinweise .meldung { font-size: 14px; }
  .sp .zeile.lv .c::before, .sp .zeile.sz .c::before { letter-spacing: .04em; }
  .sp .zeitachse .m small { display: none; }
}

.sp .rr-datei { position: relative; }
.sp .rr-datei input { width: 1px; height: 1px; }

@media (max-width: 560px) {
  /* Handy: Symbol mit dem Wort darunter, damit der Weg zum Abmelden sichtbar ist */
  rr-kopf .rr-ib.abmelden { width: auto; min-width: 44px; padding: 0 4px; flex-direction: column; justify-content: center; gap: 1px; font-size: 10px; letter-spacing: .04em; line-height: 1; }
  rr-kopf .rr-ib.abmelden svg { width: 20px; height: 20px; }
  .sp .vsub button[aria-pressed="true"] .rr-seg__t { display: inline; }
}

.sp .zeile:not(.lv) .dev b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) {
  .sp .zeile.lv { grid-template-columns: 26px minmax(0, 1fr) auto 24px; column-gap: 8px; }
  .sp .dev { gap: 8px; }
  .sp .dev > .fz { width: 30px; height: 30px; }
  .sp .dev b { font-size: 1.1rem; }
  .sp .tag { padding: 0 6px; }
}

.sp .zeile.lv > .c.lm .tag.mobil { display: none; }

/* ===== Nachbesserung Runde 3 (Kit 1.4.0) ===== */
/* Lange Zellenwerte kürzen mit … statt in die Nachbarspalte zu laufen */
.sp .zeile.vg .c .v, .sp .zeile.vs .c .v, .sp .zeile.vw .c .v, .sp .zeile.vt .c .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rollen neutral grau (Kit: Farbe nur für Zustand) */
.sp .seg.rollen button[aria-pressed="true"],
:root[data-theme="dark"] .sp .seg.rollen button[aria-pressed="true"] { background: var(--text); color: var(--flaeche); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp .seg.rollen button[aria-pressed="true"] { background: var(--text); color: var(--flaeche); } }
/* Tracker am Handy: Grund der gelben Zeile unter dem Namen (Kit: Statuswort bei Gelb als Grund); am Desktop gibt es die Spalte */
.sp .zeile.lv.tr .dev .gm { display: none; }
@media (max-width: 1180px) {
  .sp .eintrag.s-gelb .zeile.lv.tr .dev .gm { display: block; color: var(--gelb-text); font-weight: 700; }
  .sp .zeile.lv.tr > .c.tp::before { display: none; }
}
/* Einklappbare Diagramm-Kästen: Handy zu, Desktop immer offen */
.sp details.ein > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.sp details.ein > summary::-webkit-details-marker { display: none; }
.sp details.ein > summary > h3 { margin: 0; flex: 1; min-width: 0; }
.sp details.ein[open] > summary > h3 { margin-bottom: 0; }
.sp details.ein > .ein-inhalt { margin-top: 4px; }
.sp details.ein[open] > summary > .chev { transform: rotate(180deg); }
@media (min-width: 1181px) {
  .sp details.ein > summary { pointer-events: none; min-height: 0; }
  .sp details.ein > summary > .chev { display: none; }
  .sp details.ein > summary button { pointer-events: auto; }
}
.sp .sp-r > .akt { gap: 8px; }
/* Neu-Dialog der Verwaltung */
.sp-neu { border: 1px solid var(--linie-stark); border-radius: 14px; padding: 0; background: var(--flaeche); color: var(--text); width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 18px 50px rgb(0 0 0 / .35); }
.sp-neu::backdrop { background: rgb(0 0 0 / .5); }
.sp-neu__kopf { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.sp-neu__kopf h2 { margin: 0; flex: 1; font: 700 1.25rem var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; }
.sp-neu__kopf button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); display: grid; place-items: center; border-radius: 10px; cursor: pointer; }
.sp-neu__teil { padding: 12px 0 4px; }
.sp-neu__teil + .sp-neu__teil { border-top: 1px solid var(--linie); }
.sp-neu__teil > h3 { margin: 0 18px 4px; font: 700 .95rem var(--schrift-kopf); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.sp details.ein .ibn { flex: none; }
@media (max-width: 1180px) { .sp details.ein h3 .r { display: none; } }
@media (max-width: 700px) {
  .sp .zeile.zw, .sp .cols.zw { grid-template-columns: 44px minmax(86px, 1fr) 68px 64px 24px; column-gap: 8px; }
  .sp .zw .ze { white-space: nowrap; font-size: 1.1rem; }
}

/* Leere Spalten weglassen (Kit-Regel; spalten.mjs): Desktop ganze Spalte samt Kopf, Handy nur die leere Zelle */
@media (min-width: 1181px) {
  .sp .cols.lv > .sp-aus, .sp .zeile.lv > .sp-aus, .sp .cols.sz > .sp-aus, .sp .zeile.sz > .sp-aus,
  .sp .cols.vw > .sp-aus, .sp .zeile.vw > .sp-aus, .sp .cols.vg > .sp-aus, .sp .zeile.vg > .sp-aus, .sp .cols.vs > .sp-aus, .sp .zeile.vs > .sp-aus,
  .sp .cols.vt > .sp-aus, .sp .zeile.vt > .sp-aus, .sp .cols.vb > .sp-aus, .sp .zeile.vb > .sp-aus { display: none; }
}
@media (min-width: 701px) { .sp .cols.zw > .sp-aus, .sp .zeile.zw > .sp-aus { display: none; } }
@media (max-width: 1180px) { .sp .zeile.lv > .c.leer, .sp .zeile.sz > .c.leer { display: none; } }

/* NEU-Dialog: alle Formulare mit gleichem Innenabstand */
.sp-neu .form, .sp-neu .form.pur, .sp-neu .form.flach { padding: 8px 18px 16px; }
/* Dialog: Seite dahinter unlesbar (kein Knopf der Seite blitzt am Rand durch); ⓘ-Legende mindestens 14 px */
.sp-neu::backdrop { background: rgb(0 0 0 / .62); backdrop-filter: blur(6px); }
.sp .leg small { font-size: 14px; }
/* Startzeit am Handy: fehlt die RR-Uhr, rückt der Tipp in die erste Wertspalte (kein Loch links) */
@media (max-width: 1180px) { .sp .zeile.sz > .c.rv.leer + .c.tp { grid-area: 3 / 2; } }

/* Toleranz-Kasten bleibt maßstabsgetreu (±60 s = Breite); die Beschriftung entfällt, wenn sie nicht hineinpasst */
@container (max-width: 125px) { .sp .zeitachse .kor span { display: none; } }
.sp .zeitachse .kor { overflow: hidden; }
/* Startzeit am Handy: RR-Uhr, Tipp und Unterschied je eine Zeile, damit keine Werte ineinanderlaufen oder gekürzt werden */
@media (max-width: 560px) {
  .sp .zeile.sz { grid-template-columns: 30px minmax(0, 1fr) 28px; grid-template-areas: "st dev chev" ". ge ge" ". rr rr" ". tp tp" ". df df"; }
  .sp .zeile.sz > .dev { grid-area: dev; }
  .sp .zeile.sz > .c.df { text-align: left; }
  .sp .zeile.sz > .c.rv.leer + .c.tp { grid-area: tp; }
}
/* Am Handy trägt der Unterschied schon die Beschriftung „RR − Tipp“; die Unterzeile würde sie wiederholen */
@media (max-width: 1180px) { .sp .zeile.sz > .c.df > .s { display: none; } }
/* Archiv */
/* Übersicht: Zeilen im Stil der Geräteliste, Archiv mit Jahres-Chips und Karten. Tippziele mindestens 44 px. */
.sp .ar-r { display: flex; align-items: center; gap: 12px 16px; padding: 10px 14px 10px 16px; min-height: 60px; flex-wrap: wrap; }
.sp .ar-t { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; }
.sp .ar-n { font: 700 1.25rem/1.15 var(--kopf-schrift); letter-spacing: .03em; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.sp a.ar-n:hover { text-decoration: underline; }
.sp .ar-d { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
.sp .ar-d svg.i { width: 15px; height: 15px; }
.sp .ar-akt { display: flex; gap: 8px; flex-wrap: wrap; }
.sp .ar-r .btn, .sp .ar-karte .btn, .sp .ar-v .btn { height: 44px; min-width: 44px; justify-content: center; }
.sp .ar-s { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sp .ar-s a { font-weight: 700; overflow-wrap: anywhere; }
.sp .ar-s svg.st { width: 20px; height: 20px; }
.sp .ar-s .punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sp .ar-leer { padding: 16px; margin: 0; }
.sp .grp .ibn { margin-left: 2px; width: 44px; height: 44px; margin-block: -10px; }

.sp .ar-jahre { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 14px 0; }
.sp .ar-jahr {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1.5px solid var(--linie-stark); background: var(--flaeche); color: var(--text);
  font: 700 1.2rem var(--kopf-schrift); letter-spacing: .06em; font-variant-numeric: tabular-nums; cursor: pointer;
}
.sp .ar-jahr:hover { border-color: var(--text-2); }
.sp .ar-jahr small { font: 700 .82rem var(--kopf-schrift); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--grau-weich); color: var(--text-2); letter-spacing: 0; }
.sp .ar-jahr[aria-pressed="true"] { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.sp .ar-jahr[aria-pressed="true"] small { background: color-mix(in srgb, var(--flaeche) 22%, transparent); color: var(--flaeche); }
@media (prefers-reduced-motion: no-preference) { .sp .ar-jahr { transition: background-color .15s, color .15s, border-color .15s; } }

.sp .ar-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; padding: 14px; }
.sp .ar-karte {
  position: relative; display: grid; gap: 12px; align-content: space-between; padding: 14px 14px 14px 18px; min-width: 0;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; overflow: clip;
}
.sp .ar-karte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grau); }
.sp .ar-kopf { display: grid; gap: 4px; min-width: 0; }
.sp .ar-kz { display: flex; flex-wrap: wrap; gap: 8px; }
.sp .ar-k { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 17px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text-2); }
.sp .ar-k svg.i { width: 18px; height: 18px; }
.sp .ar-k b { font: 700 1.1rem var(--kopf-schrift); color: var(--text); letter-spacing: .02em; white-space: nowrap; }
.sp .ar-karte .ar-akt .btn { flex: 1 1 120px; }
@media (prefers-reduced-motion: no-preference) {
  .sp .ar-karten.ein .ar-karte { animation: ar-ein .3s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
}
@keyframes ar-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Abzeichen „Archiv“: ruhig, grau, mit Schloss – kein Alarm */
.sp .ar-abz, .tv-archiv {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 17px;
  border: 1.5px solid var(--linie-stark); background: var(--grau-weich); color: var(--text-2); white-space: nowrap;
}
.sp .ar-abz b { font: 700 1rem var(--kopf-schrift); letter-spacing: .1em; text-transform: uppercase; }
.sp .ar-abz svg.i { width: 17px; height: 17px; }
.sp .ar-kopf-gruppe { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp .ar-kopf-gruppe[hidden], .sp .verb[hidden] { display: none; }
.sp .ar-kopf-gruppe .btn { height: 44px; }
/* TV: aus 3 m lesbar, ruhig neben dem Datum */
.tv-archiv { height: 32px; font: 700 16px/1 var(--kopf-schrift); letter-spacing: .12em; text-transform: uppercase; margin-left: 14px; align-self: center; }
.tv-archiv b { font-weight: 700; }
.tv-archiv svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Verwaltung: Archivzeile und gesperrte Felder */
.sp .ar-v { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 14px 8px 16px; min-height: 60px; border-top: 1px solid var(--linie); }
.sp .ar-v.ist { background: var(--grau-weich); }
.sp .ar-v__bild { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--grau-weich); color: var(--text-2); }
.sp .ar-v .ibn { width: 44px; height: 44px; }
.sp .ar-grund { display: inline-flex; align-items: center; gap: 8px; }
.sp .ar-grund svg.st { width: 22px; height: 22px; }
.sp .ar-grund b { font: 700 1rem var(--kopf-schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--gelb); }
.sp fieldset.ar-gesperrt { display: contents; border: 0; padding: 0; margin: 0; min-width: 0; }
.sp .ar-gesperrt .in { opacity: .6; background: var(--flaeche-2); cursor: not-allowed; }
.sp .ar-gesperrt .btn, .sp .ar-gesperrt .ib { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) {
  .sp .ar-karten { grid-template-columns: 1fr; padding: 12px; }
  .sp .ar-jahre { padding: 12px 12px 0; }
  .sp .ar-r .ar-akt { width: 100%; }
  .sp .ar-r .ar-akt .btn { flex: 1 1 0; }
  .sp .ar-v .sp1 { display: none; }
}


/* =====================================================================================================
   UI-Feinschliff (Befunde des Durchgangs): Handy-Kopf, Kennleiste, Verbindung weg, Nicht gefunden,
   Erklärungen hinter ⓘ, Tippziele ≥ 44 px, Schrift ≥ 13 px, Kontrast AA, TV-Kopf einzeilig.
   ===================================================================================================== */

/* Schrift: nichts unter 13 px (Nebentexte, Achsen, Marken) */
.sp .lane-l small, .sp .c .s, .sp .k .ss, .sp .achsen-fuss, .sp .kachel-text, .sp .tag, .sp .offen-t, .sp .splits-satz,
.sp .feld-satz, .sp .fl small, .sp .uhr .kv small, .sp .evb small, .sp .dev small, .sp .pill span, .sp .start-zeile .start-quellen .bez,
.sp .dl, .sp .box h3 .r, .sp .log .a, .sp .mini-s, .sp .zeitachse .m small, .sp .zeitachse .tk, .sp .zeitachse .kor span { font-size: 13px; }
.sp .achse span, .sp .band-zahl { font-size: 13px; }
.sp .zeile.lv .c::before, .sp .zeile.sz .c::before { font-size: 13px; }
.efflab, .efflab span, .fuss .efflab { font-size: 13px; }
.tv .efflab, .tv .efflab span, .tv-efflab span { font-size: 16px; }
label.feld > span { font-size: 13px; }
.sp .seg .c { opacity: 1; }
.sp .eintrag.s-inaktiv .zeile { opacity: 1; }
.sp .eintrag.s-inaktiv .zeile .c .v, .sp .eintrag.s-inaktiv .zeile .dev b { color: var(--text-2); }
.sp .chip:disabled { opacity: .6; }

/* Kopf: Rolle sichtbar, Konto-Menü mit Rückfrage */
.sp-kopf .wer-rolle { color: rgb(255 255 255 / .85); font: 600 .95rem var(--kopf-schrift); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 2px 8px; border: 1px solid rgb(255 255 255 / .35); border-radius: 12px; }
.sp-kopf .marke { min-height: 44px; }
.sp-kopf .ib { width: 40px; height: 40px; }
.sp-tab { height: 44px; }
.sp-tabs__in { height: 44px; }
.konto-menue { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); top: 52px; z-index: 1100; width: min(300px, calc(100vw - 24px)); box-sizing: border-box;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie-stark); border-radius: 12px; box-shadow: 0 8px 28px rgb(0 0 0 / .3); padding: 12px; display: grid; gap: 12px; }
.konto-wer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.konto-wer b { font: 700 1.2rem var(--kopf-schrift); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolle-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--grau-weich); border: 1px solid var(--linie-stark); font: 700 .95rem var(--kopf-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--text); flex: none; }
.konto-menue .btn { height: 44px; justify-content: center; }
.konto-aus { width: 100%; }
.konto-frage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.konto-frage[hidden] { display: none; }
.konto-frage b { font: 700 1.1rem var(--kopf-schrift); flex: 1 1 100%; }
.konto-frage .btn { flex: 1 1 0; }
.konto-frage .btn.war { order: 2; }

/* Bildzeichen und Beschriftungen außerhalb von .sp (Anmeldung, TV) */
.anmeldung svg.i, .tv svg.i, .sp-kopf svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anmeldung .ibn, .tv .ibn { background: none; border: 0; padding: 0; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; cursor: pointer; }
.anmeldung .ibn:hover, .tv .ibn:hover { background: none; color: var(--text); }
.anm-kopf { display: flex; align-items: center; gap: 6px; }
.anm-kopf h1 { margin: 0; }
.anmeldung .meldung.schlecht { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.anmeldung .meldung svg.i { color: var(--rot); }
.anmeldung form input { min-height: 44px; font-size: 16px; }
.anmeldung form button.haupt { min-height: 48px; }
.anmeldung form button.zweit { min-height: 48px; background: transparent; color: var(--text); border: 1.5px solid var(--linie-stark, var(--linie)); }
.anm-oder { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: .9rem; }
.anm-oder::before, .anm-oder::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.tv .dl, .tv .legende .dl { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.tv .dl svg.i { width: 14px; height: 14px; }
.tv .dl.p, .sp .dl.p { color: var(--petrol); }
.tv .dl.g { color: var(--gelb); }

/* Info-Overlay: einspaltig für Sätze, Beispielzahlen */
.sp .leg.eins { grid-template-columns: 1fr; }
.sp .leg small.satz { color: var(--text); font-size: .95rem; line-height: 1.4; display: block; }
.sp .grau-zahl, .sp .live-zahl { font: 700 1.4rem var(--kopf-schrift); font-variant-numeric: tabular-nums; min-width: 44px; }
.sp .grau-zahl { color: var(--text-3); }

/* Zustände neutral / aktiv / Fehler: „nicht eingerichtet“ ist grau, nie gelb */
.sp .mel.neutral { background: var(--grau-weich); border: 1px solid var(--linie-stark); }
.sp .mel.neutral svg { color: var(--text-2); }
.sp .mel b { font: 700 1.05rem var(--kopf-schrift); letter-spacing: .04em; }
.sp .mel > .sp1 { flex: 1; }
.sp .start-zeile .satz { font-size: 1rem; color: var(--text); display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.sp .start-zeile .satz b { font: 700 1.05rem var(--kopf-schrift); letter-spacing: .04em; }
.sp .start-zeile .satz.rr-status.neutral { color: var(--text-2); }
.sp .start-zeile .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--grau); flex: none; }
.sp .start-zeile .punkt.gut { background: var(--gruen); }
.sp .start-zeile .punkt.warn { background: var(--gelb); }
.sp .start-zeile .punkt.schlecht { background: var(--rot); border-radius: 0; transform: rotate(45deg); width: 9px; height: 9px; }
.sp .start-zeile .punkt.akzent { background: transparent; border: 2px solid var(--grau); }
.sp .start-quellen { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.sp .start-quellen .bez { font: 700 .9rem var(--kopf-schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.sp .sq { display: inline-flex; align-items: center; gap: 6px; font: 700 1.1rem var(--kopf-schrift); white-space: nowrap; }
.sp .sq svg.i { color: var(--text-2); }
.sp .sq.diff { margin-left: 2px; }
.sp .abweichung { display: grid; gap: 8px; }
.sp .abw-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp .abw-kopf svg.i { color: var(--gelb); }
.sp .rueckfrage p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp .sitzung-hinweis { display: flex; align-items: center; gap: 8px; }
.sp .sitzung-hinweis svg.i { color: var(--gelb); }
.sp .c .s svg.i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.sp .c .s.z { color: var(--gruen); font-weight: 700; }
.sp .c .s.g svg.i { color: var(--gelb); }

/* Abstand nicht mehr frisch (> 30 s): gedimmt, mit Uhr */
.sp .alt, .tv .alt { color: var(--text-3); }
.sp .alt .kachel-zahl, .sp .kachel-zeile.alt .kachel-zahl, .sp .abst.alt b, .tv .tv-abstand.alt { color: var(--text-3); }
.sp .alt-marke, .tv .alt-marke { display: inline-flex; align-items: center; margin-left: 6px; color: var(--text-3); vertical-align: middle; }
.sp .alt-marke svg.i, .tv .alt-marke svg.i { width: 15px; height: 15px; }

/* Verbindung weg: rotes Band mit Wort + Zähler, Zahlen ausgegraut */
.sp .mel.rt.band-aus { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 0 12px; padding: 4px 6px 4px 12px; background: var(--band-rot); border-color: var(--band-rot); color: #fff; border-radius: 10px; }
.sp .mel.rt.band-aus[hidden] { display: none; }
.sp .mel.rt.band-aus svg { color: #fff; }
.sp .mel.rt.band-aus b { font: 700 1.2rem var(--kopf-schrift); letter-spacing: .08em; text-transform: uppercase; }
.sp .mel.rt.band-aus .band-zaehler { font: 600 1.1rem var(--kopf-schrift); color: rgb(255 255 255 / .92); }
.sp .mel.rt.band-aus .ibn { color: #fff; width: 44px; height: 44px; }
.sp .mel.rt.band-aus .ibn:hover { color: #fff; background: rgb(255 255 255 / .15); }
.sp .leiste-huelle > .mel { margin-bottom: 8px; }
body.verbindung-weg .sp .c .v, body.verbindung-weg .sp .pin .kmz, body.verbindung-weg .sp .abst b, body.verbindung-weg .sp .uhr .kv b,
body.verbindung-weg .sp .leiste .lz-wert, body.verbindung-weg .sp .k .vv, body.verbindung-weg .sp .ort-klein,
body.verbindung-weg .tv-laufzeit, body.verbindung-weg .tv-wert, body.verbindung-weg .tv-uhr, body.verbindung-weg .tv-prognose { color: var(--text-3); }
body.verbindung-weg .sp .lane .fu, body.verbindung-weg .sp .pin .kn, body.verbindung-weg .band-fuell, body.verbindung-weg .band-punkt { opacity: .5; }
.tv-verbindung.schlecht { color: #fff; background: var(--band-rot); border-radius: 18px; padding: 4px 14px; font-weight: 700; }
.tv-verbindung.schlecht .punkt { background: #fff; }
.tv-verbindung .vtext { white-space: nowrap; }

/* Kontext schmal: Ortszeit klein neben „Live“, Rennzeit in der Kennleiste */
.sp .ort-klein { display: none; align-items: center; gap: 5px; font: 700 1.1rem var(--kopf-schrift); }
.sp .leiste { display: none; }

/* Höhenprofil einklappbar */
.sp .profil-kopf { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; font: 700 1rem var(--kopf-schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); text-align: left; }
.sp .profil-kopf .chev { margin-left: auto; transition: transform .2s; }
.sp .karten-profil:not(.zu) .profil-kopf .chev { transform: rotate(180deg); }
.sp .karten-profil.zu .profil-inhalt { display: none; }
@media (prefers-reduced-motion: reduce) { .sp .profil-kopf .chev { transition: none; } }

/* Nicht gefunden */
.nicht-gefunden { min-height: 56vh; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 32px 16px; text-align: center; }
.nicht-gefunden h1 { margin: 0; font: 700 clamp(1.8rem, 4vw, 2.6rem) var(--kopf-schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.ng-bild { position: relative; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: var(--grau-weich); border: 2px dashed var(--linie-stark); color: var(--text-2); }
.ng-bild svg.i { width: 64px; height: 64px; stroke-width: 1.4; }
.ng-bild .ng-aus { position: absolute; right: -8px; bottom: -8px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--grund); color: var(--rot); }
.ng-bild .ng-aus svg.i { width: 48px; height: 48px; stroke-width: 2; }
.ng-knopf { height: 52px; padding: 0 28px; font-size: 1.2rem; }
.tv-nicht-gefunden { min-height: 100vh; min-height: 100dvh; }
.tv-nicht-gefunden .ng-bild { width: 180px; height: 180px; }
.tv-nicht-gefunden .ng-bild svg.i { width: 88px; height: 88px; }
.tv-nicht-gefunden h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
@media (prefers-reduced-motion: no-preference) { .nicht-gefunden .ng-bild { animation: ng-ein .35s ease-out both; } }
@keyframes ng-ein { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Verwaltung: Dateiauswahl, getrennte Aktionen, Rückfrage */
.sp .datei-roh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.sp .datei-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.sp .datei-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 120px; }
.sp .leer-zeile { padding: 14px; margin: 0; }
.sp .ask { gap: 10px 12px; }
.sp .ask .btn.ja { margin-left: 8px; }
.sp .fl > span .ibn { margin-left: 2px; }
.sp label.fl > span { order: -1; }
.sp label.fl > .feld-satz { order: 1; }
.sp .feld-satz:empty { display: none; }
/* Eingabe steht im Etikett zuerst (das Etikett gehört so zum Feld, nicht zum ⓘ-Knopf); die Beschriftung wird davor gezeigt */
.sp label.fl > span:first-of-type { order: -1; }
.sp label.fl > .feld-satz { order: 1; }

/* ===== Handy und Touch: Tippziele ≥ 44 px ===== */
@media (max-width: 700px), (pointer: coarse) {
  .sp-kopf .ib { width: 44px; height: 44px; }
  .sp .ib { width: 44px; height: 44px; }
  .sp .ibn, .tv .ibn, .anmeldung .ibn { width: 44px; height: 44px; margin: 0; }
  .sp .btn.kl, .sp .btn { min-height: 44px; height: auto; }
  .sp .chip { height: 44px; }
  .sp .seg button { min-height: 44px; height: auto; }
  .sp .evb { height: auto; min-height: 44px; }
  .sp .in { height: 44px; }
  .sp select.in, .sp input.in { font-size: 16px; }
  .sp .mehr, .sp .zeile.zw { min-height: 44px; }
  .sp .sw { height: 44px; border-radius: 22px; width: 64px; }
  .sp .sw::after { top: 7px; left: 6px; width: 30px; height: 30px; }
  .sp .sw[aria-pressed="true"]::after { transform: translateX(26px); }
  .sp .nb input[type="checkbox"], .sp label.haken input { width: 24px; height: 24px; }
  .sp .nb { min-height: 44px; }
  .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  .sp .rk .ib { width: 44px; height: 44px; }
  .sp .cols .ibn, .sp .sek__k .ibn, .sp .band__k .ibn, .sp .box h3 .ibn, .sp .grp .ibn { width: 44px; height: 44px; margin: 0; }
  .sp .sek__k .seg button { min-height: 44px; }
}

/* ===== Handy (bis 700 px) ===== */
@media (max-width: 700px) {
  /* Reiter: gleichmäßig, ohne Abschneiden */
  .sp-tabs__in { gap: 0; padding-left: 0; padding-right: 0; overflow: visible; }
  .sp-tab { flex: 1 1 0; justify-content: center; padding: 0 4px; font-size: 1.02rem; letter-spacing: .06em; min-width: 0; }
  .sp-tab svg { display: none; }
  .sp-kopf__in { gap: 4px; }

  /* Kontext: Ereignis volle Breite, darunter Ortszeit + Live + TV */
  .sp .uhr { display: none; }
  .sp .ort-klein { display: inline-flex; }
  .sp .ctx { gap: 8px; margin-bottom: 8px; }
  .sp .ctx .btn.kl { margin-left: auto; }
  .sp .ctx .sp1 { display: none; }
  .sp .verb { font-size: 1.05rem; }

  /* Kennleiste: Rennzeit, Tempo, nächster KM, Abstand – fest unter dem Kopf */
  .sp .leiste-huelle { position: sticky; top: 98px; z-index: 900; background: var(--grund); margin: 0 -16px 8px; padding: 6px 16px 0; }
  .sp .leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 12px; box-shadow: var(--schatten); margin-bottom: 6px; overflow: clip; }
  .sp .leiste[data-zellen="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp .lz { display: flex; flex-direction: column; gap: 0; padding: 6px 8px 6px 10px; min-width: 0; border-left: 1px solid var(--linie); }
  .sp .lz:first-child { border-left: 0; }
  .sp .lz[hidden] { display: none; }
  .sp .lz-kopf { display: flex; align-items: center; gap: 4px; color: var(--text-2); height: 18px; }
  .sp .lz-kopf svg.i { width: 16px; height: 16px; }
  .sp .lz-name { display: none; }
  .sp .lz-wert { font: 700 1.35rem/1.1 var(--kopf-schrift); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp .lz small { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; min-height: 15px; }
  .sp .lz.ziel .lz-wert { color: var(--gruen); }
  .sp .lz.ziel .lz-kopf svg.i { color: var(--gruen); }
  .sp .lz.alt .lz-wert, .sp .lz.alt small { color: var(--text-3); }
  .sp .lz.alt .lz-kopf svg.i { color: var(--text-3); }

  /* Karte: Knöpfe nur als Bild; Höhenprofil zugeklappt */
  .sp .karten-knoepfe .btn > span { display: none; }
  .sp .karten-knoepfe .btn { width: 44px; padding: 0; justify-content: center; }
  .sp .karten-profil { padding: 0 14px; }

  /* Schrift auf dem Handy etwas größer: Achsen und Band */
  .sp .achse span, .sp .band-zahl { font-size: 14px; }
  .sp .lane-l small { font-size: 14px; }
  .sp .eintrag .det .box h3 { font-size: 1rem; }

  /* Verwaltung: Reiter in zwei Reihen à drei */
  .sp .vsub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp .vsub button { font-size: .98rem; letter-spacing: .02em; padding: 0 4px; min-height: 46px; flex: none; }
  .sp .vsub button svg { display: block; }
  @media (max-width: 480px) { .sp .vsub button svg { display: none; } }
  .sp .vsub button + button { border-left: 1.5px solid var(--linie-stark); }
  .sp .vsub button:nth-child(3n + 1) { border-left: 0; }
  .sp .vsub button:nth-child(n + 4) { border-top: 1.5px solid var(--linie-stark); }
  .sp .ask .btn { flex: 1 1 0; }
  .sp .ask b { flex: 1 1 100%; }
  .sp .ask .btn.ja { margin-left: 0; }

  /* TV schmal: Kopf einzeilig (Logo-Zeichen, Titel, Live-Punkt, Uhr) */
  .tv-kopf { flex-wrap: nowrap; gap: 10px; }
  .tv-kopf > div:first-child { flex: 1 1 0; min-width: 0; align-items: center; }
  .tv-kopf h1 { font-size: 18px; margin-right: 0; flex: 1 1 0; min-width: 0; }
  .tv-datum { display: none; }
  .tv-rechts { flex-wrap: nowrap; gap: 10px; flex: none; }
  .tv-vollbild { display: none; }
  .tv-uhr { font-size: 24px; }
  .tv-logo { margin-right: 10px; }
  .tv-logo img { height: 28px; width: 28px; }
  .tv-verbindung:not(.schlecht) .vtext { display: none; }
  .tv-verbindung.schlecht { padding: 2px 10px; font-size: 14px; }
  .tv-kopf { font-size: 16px; }
}
@media (max-width: 400px) {
  .tv-verbindung.schlecht .vtext { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== TV: Umbrüche, Ziel, Legende, Hinweis ===== */
.tv .tv-unter, .tv .tv-wert { hyphens: manual; }
.tv .tv-unter { display: flex; flex-wrap: wrap; gap: 0 12px; overflow-wrap: break-word; }
.tv .tv-teil { white-space: nowrap; }
.tv .tv-quelle { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-weight: 600; }
.tv-zeile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }
.tv-ziel { display: inline-flex; align-items: center; gap: 8px; color: var(--gruen); font: 700 clamp(24px, 2.4vw, 36px) var(--kopf-schrift); letter-spacing: .1em; text-transform: uppercase; }
.tv-ziel[hidden] { display: none; }
.tv-ziel svg.i { width: 1.3em; height: 1.3em; fill: currentColor; }
.tv-hinweis { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tv-inoffiziell { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; }
.tv-fuss { display: flex; align-items: center; }
.tv-leer { display: flex; align-items: center; gap: 10px; }
.tv .legende { display: flex; gap: 18px; align-items: center; }
.tv .legende > span, .sp .legende > span { display: inline-flex; align-items: center; gap: 6px; }
.tv .tv-abstand.alt { opacity: 1; }
@media (max-width: 700px) {
  .tv-hinweis { font-size: 14px; }
}

/* Nachträge: Übersicht (Nebentexte ≥ 13 px, Links als Tippziel), Höhenprofil-Skala, ⓘ-Knöpfe nicht gestaucht */
.sp .ar-t small, .sp .ar-d, .sp .ar-s small { font-size: 13px; }
.profil-skala { font-size: 13px; }
.sp .ibn { flex: none; }
@media (max-width: 700px), (pointer: coarse) {
  .sp .ibn, .tv .ibn, .anmeldung .ibn { min-height: 44px; min-width: 44px; }
  .sp .ar-n, .sp .ar-s a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Schmale Ansicht der Zeilen: Spalte Empfang liegt in der 28-px-Spalte; ihre Beschriftung würde in die Nachbarzelle ragen (Symbol genügt) */
@media (max-width: 1180px) { .sp .zeile.lv > .c.sg::before { display: none; } .sp .zeile.lv > .c.sg { justify-self: end; } }
/* Verwaltung: sechs Reiter passen bei Tablet-Breite nur ohne Symbole */
@media (min-width: 701px) and (max-width: 900px) { .sp .vsub button svg { display: none; } .sp .vsub button { min-width: 0; padding: 0 8px; } }
.tv .tv-inoffiziell { font-size: 16px; }