:root {
  /* MicroRing: Schwarz #121212, Orange #FF5A1F, Grau #5A5A5A / #B5B5B5 */
  --grund: #f4f4f4; --flaeche: #fff; --text: #121212; --leise: #5a5a5a; --linie: #dedede;
  --akzent: #d9440c; --akzent-hell: #ffe6dc; --knopf: #ff5a1f; --knopf-text: #121212;
  --gefahr: #b42318; --gefahr-hell: #fee4e2; --hinweis-hell: #fff4d6; --kopf-grund: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #121212; --flaeche: #1c1c1c; --text: #f2f2f2; --leise: #b5b5b5; --linie: #303030;
    --akzent: #ff5a1f; --akzent-hell: #3a1d10; --knopf: #ff5a1f; --knopf-text: #121212;
    --gefahr: #f97066; --gefahr-hell: #3d1714; --hinweis-hell: #3a3010; --kopf-grund: #121212; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--grund); color: var(--text); }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
a { color: var(--akzent); }
h1 { font-size: 1.5rem; margin: .4em 0 .6em; }
h2 { font-size: 1.15rem; margin: 0 0 .5em; }
h3 { font-size: 1rem; margin: 0; }
.kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top)); background: var(--kopf-grund); border-bottom: 1px solid var(--linie); }
.kopf .marke { display: flex; align-items: center; text-decoration: none; }
.kopf .marke img { height: 36px; width: auto; display: block; }
.kopf nav, .unternav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kopf nav a, .unternav a { text-decoration: none; }
.unternav { margin-bottom: 8px; font-size: .95rem; }
.fuss { max-width: 760px; margin: 24px auto; padding: 0 16px 32px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--leise); font-size: .9rem; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 14px; margin: 0 0 14px; }
fieldset { border: 1px solid var(--linie); border-radius: 10px; margin: 0 0 14px; }
fieldset.karte legend { font-weight: 600; padding: 0 4px; }
label { display: block; margin: 0 0 12px; }
label small, .klein { color: var(--leise); font-size: .85rem; }
label.zeile { display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-start; }
label.zeile > input { flex: none; margin-top: 2px; }
label.zeile > span { flex: 1; min-width: 0; }
legend { white-space: normal; }
input, select { font: inherit; padding: 9px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); color: var(--text); }
label > input:not([type=checkbox]):not([type=radio]), label > select, .eingabe { display: flex; width: 100%; margin-top: 4px; }
.eingabe { gap: 6px; align-items: center; }
.eingabe input { flex: 1; min-width: 0; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--akzent); }
button, .knopf { font: inherit; font-weight: 700; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--knopf);
  color: var(--knopf-text); cursor: pointer; text-decoration: none; display: inline-block; }
button.klein { padding: 6px 10px; font-size: .85rem; font-weight: 500; background: var(--grund); color: var(--text); border: 1px solid var(--linie); }
button.gefahr { color: var(--gefahr); border-color: var(--gefahr); }
button.link { background: none; color: var(--leise); padding: 0; font-weight: 400; text-decoration: underline; }
button:disabled { opacity: .5; cursor: default; }
.fest-unten { position: sticky; bottom: 12px; width: 100%; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.meldung { padding: 10px 14px; border-radius: 8px; }
.meldung.ok { background: var(--akzent-hell); }
.meldung.fehler { background: var(--gefahr-hell); color: var(--gefahr); }
.meldung.hinweis, .karte.hinweis { background: var(--hinweis-hell); }
.tage { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
.tag { flex: none; padding: 8px 10px; border-radius: 8px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; color: var(--text); font-size: .9rem; }
.tag.aktiv { background: var(--knopf); color: var(--knopf-text); border-color: var(--knopf); font-weight: 700; }
.tag.zu { opacity: .5; }
.slots, .liste, .buchungen, .fahrer, .stimmen { list-style: none; padding: 0; margin: 0; }
.slot a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px; margin-bottom: 8px; border-radius: 10px;
  background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.slot .zeit { font-weight: 700; grid-row: span 2; }
.slot .belegung, .slot .modus { font-size: .9rem; }
.slot .modus { color: var(--leise); }
.slot.meins a { border-color: var(--akzent); box-shadow: inset 4px 0 0 var(--akzent); }
.slot.voll a { opacity: .55; }
.liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zwischen { justify-content: space-between; }
.storniert { opacity: .55; }
.aus { color: var(--leise); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--linie); }
.avatar.gross { width: 88px; height: 88px; }
.profilkopf { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.profilkopf .name { font-size: 1.25rem; font-weight: 700; margin: 0 0 6px; }
.fahrer li { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.knopf.klein-knopf { padding: 6px 12px; font-size: .85rem; margin: 0; }
/* Profil-Kopf wie Playtomic (Steffen 25.10.) */
.pkopf { display: flex; gap: 16px; align-items: center; margin: 4px 0 14px; }
.pkopf-text { min-width: 0; }
.pkopf-name { font-size: 1.35rem; font-weight: 800; margin: 0 0 4px; overflow-wrap: anywhere; }
.pkopf-text .klein { margin: 0; }
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 14px; }
.zahlen > * { display: flex; flex-direction: column; align-items: center; padding: 2px 4px; color: var(--text);
  text-decoration: none; border-left: 1px solid var(--linie); }
.zahlen > :first-child { border-left: 0; }
.zahlen b { font-size: 1.25rem; }
.zahlen span { font-size: .8rem; color: var(--leise); }
.knopfreihe.pkopf-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; align-items: center; }
.pkopf-knoepfe > *, .pkopf-knoepfe > form > * { margin: 0; width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }
.knopfreihe.pkopf-knoepfe.eins { grid-template-columns: 1fr; }
.foto-bearbeiten { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.foto-bearbeiten .knopfreihe { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.foto-bearbeiten form { margin: 0; }
.skill-titel { margin: 0 0 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #b5b5b5; }
.reiter { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linie); margin: 0 0 12px; }
.reiter a { text-align: center; padding: 10px 4px; color: var(--leise); text-decoration: none; border-bottom: 3px solid transparent; }
.reiter a b { color: var(--text); margin-right: 4px; }
.reiter a.aktiv { color: var(--text); font-weight: 700; border-bottom-color: var(--akzent); }
.freunde-hinzu summary { cursor: pointer; }
.fb-problem { border-left: 4px solid #d93a2b; }
.glocke-form { margin: 0; }
.transponder-neu { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linie, #ddd); }
.transponder-neu h4 { margin: 0 0 6px; font-size: .95rem; }
.klassen-wahl { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 6px 0;
  border-top: 1px solid var(--linie, #ddd); }
.klassen-wahl:first-of-type { border-top: 0; }
.klassen-wahl .auch { white-space: nowrap; }
.modell-fehlt { margin-top: 10px; }
.kopplungscode { font: 700 2rem/1.2 ui-monospace, monospace; letter-spacing: .12em; margin: 6px 0; }
.geraet { padding: 8px 0; border-top: 1px solid var(--linie, #ddd); }
.geraet:first-of-type { border-top: 0; }
.aktion-block { margin: 8px 0; }
.aktion-block h4 { margin: 0 0 2px; font-size: .95rem; }
.aktion-block p { margin: 0 0 6px; }
.aktion-block label { display: block; font-size: .85rem; margin-bottom: 2px; }
.mehr-aktionen .trenner { border: 0; border-top: 1px solid var(--linie, #ddd); margin: 10px 0; }
.wert-gross { font-size: 1.15rem; margin-right: 4px; }
.garage.kompakt { grid-template-columns: 1fr; gap: 8px; }
.garage.kompakt .autokarte { display: grid; grid-template-columns: 88px 1fr; align-items: start; }
.garage.kompakt .autokarte img { width: 88px; height: 100%; min-height: 72px; aspect-ratio: auto; }
.garage.kompakt .klassenschild { position: static; display: inline-block; grid-column: 2; margin: 8px 12px 0; justify-self: start; }
.garage.kompakt .autotext { grid-column: 2; padding: 4px 12px 8px; gap: 4px; }
.garage.kompakt .autokarte > img { grid-row: 1 / span 2; }
.fahrer-kasten summary .fahrer-kopf { flex: 1; }
.freunde-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.freunde-filter input[type=search] { flex: 1 1 160px; }
.freunde-filter .tage { margin: 0; padding: 0; }
.avatar-initiale { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
  background: var(--akzent); }
.avatar.gross-mittel { width: 48px; height: 48px; font-size: 1.2rem; }
.avatar.mini { width: 22px; height: 22px; font-size: .75rem; vertical-align: middle; }
.fahrer-kopf { display: flex; gap: 10px; align-items: center; }
a.skill-haupt, .skill-weitere a, a.skill-zahl { color: inherit; text-decoration: none; }
.skill-weitere a.skill-praez, .skill-weitere a.skill-praez b { color: #7cc4ff; }
.wert-link { color: inherit; text-decoration: underline dotted; }
.level-leiter { position: relative; height: 64px; margin: 18px 28px 8px; border-top: 3px solid var(--linie); }
.level-sprosse { position: absolute; top: -10px; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; font-size: .8rem; white-space: nowrap; }
.level-sprosse::before { content: ""; width: 3px; height: 10px; background: var(--leise); margin-bottom: 2px; }
.level-punkt { position: absolute; top: 34px; transform: translateX(-50%); color: var(--akzent); font-weight: 800;
  white-space: nowrap; font-size: .85rem; }
.garage-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.garage-link > span.klein { margin-left: auto; }
.buchungen.kompakt .karte { padding: 0; margin-bottom: 6px; }
.buchungen.kompakt details > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  cursor: pointer; }
.buchungen.kompakt details > summary::-webkit-details-marker { display: none; }
.buchungen.kompakt details > summary > span { flex: 1; }
.buchungen.kompakt details > summary::after { content: "▸"; color: var(--leise); transition: transform .15s; }
.buchungen.kompakt details[open] > summary::after { transform: rotate(90deg); }
.buchungen.kompakt details > :not(summary) { margin-left: 14px; margin-right: 14px; }
.monat-kopf { font-size: .85rem; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }
.zusatz { padding: 0; }
.zusatz > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; }
.zusatz > summary::-webkit-details-marker { display: none; }
.zusatz > summary::after { content: "▸"; margin-left: 8px; color: var(--leise); transition: transform .15s; }
.zusatz[open] > summary::after { transform: rotate(90deg); }
.zusatz-kurz { margin-left: auto; font-size: .85rem; color: var(--leise); }
.zusatz > summary > span:first-child { flex: 1; }
.zusatz-inhalt { padding: 0 16px 14px; }
.live-kopf { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; }
.live-rest { margin-left: auto; font: 800 1.6rem/1 "Arial Black", Impact, sans-serif; font-variant-numeric: tabular-nums; }
.live-tabelle table { font-size: .85rem; }
.live-tabelle td, .live-tabelle th { padding: 6px 4px; }
.chip-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chip-wahl label { display: inline-flex; }
.chip-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-wahl span { padding: 6px 10px; border: 1px solid var(--linie); border-radius: 999px; font-size: .85rem; cursor: pointer;
  background: var(--flaeche); }
.chip-wahl input:checked + span { border-color: var(--akzent); color: var(--akzent); font-weight: 700; }
.chip-wahl input:focus-visible + span { outline: 2px solid var(--akzent); }
.setup-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 10px; }
.setup-vgl.gut { color: #1a8f3a; font-weight: 700; }
.setup-vgl.schlecht { color: #c0392b; font-weight: 700; }
.setup-eintrag { border-bottom: 1px solid var(--linie); padding: 8px 0; }
.setup-eintrag:last-child { border-bottom: 0; }
.setup-eintrag p { margin: 4px 0; }
.setup-hinweis { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.setup-hinweis form { margin: 0 0 0 auto; }
.setup-best { color: #1a8f3a; font-weight: 700; }
.setup-diff td { background: #fff3cd; }
.setup-karte-form fieldset { border: 0; border-top: 1px solid var(--linie); padding: 8px 0; margin: 0; }
.setup-karte-form legend { font-weight: 700; padding: 0 4px 0 0; }
.setup-reifen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 10px; }
.setup-reifen > b { grid-column: 1 / -1; }
.archiv-auto { border-bottom: 1px solid var(--linie); padding: 8px 0; }
.idee p { margin: 4px 0 0; }
.idee form { margin: 0; flex: none; }
.stimme { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 6px 12px;
  font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.stimme.an { border-color: var(--akzent); color: var(--akzent); }
.stimme:disabled { opacity: .5; cursor: default; }
.fb-board { border: 1px dashed var(--linie); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.freund-zeile > a { color: var(--text); text-decoration: none; }
.glocke { background: none; border: 1px solid var(--linie); border-radius: 999px; width: 40px; height: 40px; padding: 0;
  font-size: 1.1rem; line-height: 1; cursor: pointer; filter: grayscale(1); opacity: .7; }
.glocke.an { filter: none; opacity: 1; border-color: var(--akzent); background: var(--flaeche); }
.glocke:disabled { cursor: not-allowed; opacity: .35; }
.glocke-zeile { gap: 10px; align-items: center; margin: -6px 0 14px; }
.glocke-mini { position: absolute; top: -4px; right: -4px; font-style: normal; font-size: .7rem; }
.fb-antwort { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.fb-antwort p { margin: 4px 0 0; }
.eilt .hilfe-knoepfe { margin: 8px 0 4px; }
.leise-meldung { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #121212; color: #f3f1ec; border-radius: 10px; padding: 10px 14px; display: flex; gap: 14px; align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 50; max-width: calc(100vw - 32px); font-size: .9rem; }
.leise-meldung[hidden] { display: none; }
.leise-meldung .link { color: #ff8a5c; font-weight: 700; }
.freunde-hinzu .freunde-qr { margin: 10px 0 14px; }
.knopf.hell { background: var(--flaeche); color: var(--akzent); border: 1px solid var(--akzent); }
form.laedt { opacity: .5; pointer-events: none; }
.garage { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.autokarte { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.autokarte img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #e5ebe6; }
.autotext { padding: 10px 12px; display: grid; gap: 6px; }
.klassenschild { position: absolute; top: 8px; left: 8px; background: #121212; color: #fff; font-size: .75rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; }
.vorschau { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; }
.guthaben .betrag, .betrag { font-size: 2rem; font-weight: 800; margin: 4px 0; }
.klein-betrag { font-size: 1.1rem; }
.betraege { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.betragwahl input { position: absolute; opacity: 0; }
.betragwahl span { display: inline-block; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-weight: 600; }
.betragwahl input:checked + span { background: var(--knopf); color: var(--knopf-text); border-color: var(--knopf); }
.zahlknoepfe { display: grid; gap: 8px; margin-top: 8px; }
.hell-knopf { background: var(--flaeche); color: var(--akzent); border: 1px solid var(--akzent); }
.plus { color: var(--akzent); } .minus { color: var(--gefahr); }
.rechts { text-align: right; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.kacheln .karte { margin: 0; }
.kopf nav small { color: var(--leise); }
@media print { .kopf, .fuss, .nicht-drucken { display: none; } body { background: #fff; } .karte { border: 0; } }
.fach p { margin: 0 0 6px; }
.fach select, .fach input { margin-bottom: 6px; }
.fach-unklar { border-color: #e0a800; }
.fach-gesperrt { border-color: var(--gefahr); }
.status-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--grund); }
.status-chip.ok { background: #dcfce7; color: #14532d; }
.status-chip.laedt { background: #fff4d6; color: #7a5200; }
.status-chip.draussen { background: #ffe6dc; color: #9a2f05; }
.status-chip.defekt { background: var(--gefahr-hell); color: var(--gefahr); }
.status-chip.leer { color: var(--leise); }
.status-chip.pruef, .meldung.pruef { background: #ff5a1f; color: #121212; animation: leuchten 1.6s ease-in-out infinite; }
.pruef-zeile td { background: rgba(255, 90, 31, .12); }
@keyframes leuchten { 50% { box-shadow: 0 0 0 4px rgba(255, 90, 31, .35); } }
@media (prefers-reduced-motion: reduce) { .status-chip.pruef, .meldung.pruef { animation: none; } }
.abholung { line-height: 1.7; }
.tuer { margin: 8px 0; }
.code { font-size: 1.4rem; letter-spacing: .15em; font-family: ui-monospace, monospace; }
.level { display: inline-block; font-size: .8rem; font-weight: 700; padding: 0 7px; border-radius: 999px;
  background: var(--knopf); color: var(--knopf-text); }
.level.praez { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--knopf); }   /* UX 26.10.: gleicher Stil wie ⚡, nur umrandet */
.level.neu { background: var(--grund); color: var(--leise); font-weight: 500; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
label.agb { background: var(--hinweis-hell); padding: 10px; border-radius: 8px; }
details.platzhalter summary { cursor: pointer; font-weight: 600; }
code { font-size: .9em; background: var(--grund); padding: 1px 4px; border-radius: 4px; }
.anleitungen { list-style: none; padding: 0; }
.anleitungen a.karte { display: block; text-decoration: none; color: var(--text); }
.schritte li { margin: 0 0 10px; padding-left: 4px; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 14px; border-radius: 10px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.anleitung-links { font-size: .9rem; }
.kartenangebot { border-top: 1px solid var(--linie); padding-top: 10px; margin-top: 10px; }
.modus-info { margin: -4px 0 12px; }
.modus-karte h2 { color: var(--akzent); }
textarea { font: inherit; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--grund); color: var(--text); resize: vertical; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.knopfreihe form { margin: 0; }
.karte > form + form, .karte > form + .knopfreihe { margin-top: 10px; }
.zahlknoepfe { gap: 12px; }
.zwischentitel { list-style: none; margin: 18px 0 8px; }
table.zeiten { display: table; }
table.zeiten td { white-space: nowrap; }
.kacheln.breit { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 14px; }
.hilfe-knoepfe { display: grid; gap: 12px; margin: 14px 0; } .hilfe-knoepfe .knopf { text-align: center; }
.buchung-kopf p { margin: 0 0 4px; } .buchung-kopf .zeile1 { font-size: 1.05rem; } .buchung-kopf { margin-bottom: 8px; }
.icon { width: 1.5em; height: 1em; vertical-align: -0.12em; color: var(--akzent); }
.faecher { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.fach { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fach p { margin: 0; }
.fach label { margin: 0; }
.fach select, .fach input:not([type=checkbox]) { width: 100%; min-width: 0; margin: 0; }
.fach .zeile { flex-wrap: nowrap; }
.fach .zeile > * { flex: 1; min-width: 0; }
.fach button { align-self: flex-start; }
.fach .status-chip { align-self: flex-start; }
.profil-kurz h2 { margin: 0; }
.profil-kurz p { margin: 6px 0; }
dialog.dialog { width: min(560px, calc(100vw - 24px)); max-height: 90vh; border: 1px solid var(--linie); border-radius: 12px;
  background: var(--flaeche); color: var(--text); padding: 16px; }
dialog.dialog::backdrop { background: rgba(0, 0, 0, .6); }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 8px; }
.abschnitt-kopf h2 { margin: 0; }
button.plus { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; }
button.plus { font-size: 1.6rem; font-weight: 800; color: var(--knopf-text); }
dialog.dialog { width: 560px; max-width: calc(100% - 24px); margin: auto; inset: 0; box-sizing: border-box; overflow-x: hidden; }
dialog.dialog form { min-width: 0; }
table.bestenliste tr.meins td { background: var(--akzent-hell); font-weight: 600; }
table.bestenliste td.platz { font-weight: 700; width: 2em; }
.nowrap { white-space: nowrap; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.kennzahlen > div { background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }
.kennzahlen span, .kennzahlen b { display: block; }
.kennzahlen b { font-size: 1.1rem; }
table.bestenliste { display: table; }
table.bestenliste th, table.bestenliste td { padding: 6px 4px; }
table.bestenliste td.chips { white-space: nowrap; }                     /* UX 26.10.: ⚡ und 🎯 in einer Zeile */
table.bestenliste td.chips .level + .level { margin-left: 3px; }
.levelblock { width: 100%; }
.chipreihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chipreihe .level { font-size: .9rem; padding: 3px 10px; }
.chipreihe .level small { font-weight: 500; }
.levelblock a.mehr { display: inline-block; margin: 2px 14px 2px 0; font-weight: 600; text-decoration: none; }
.sponsor { display: block; max-width: 760px; margin: 16px auto 0; padding: 10px 16px; border: 1px dashed var(--linie);
  border-radius: 10px; color: var(--text); text-decoration: none; font-size: .9rem; text-align: center; }
.sponsor span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); margin-right: 6px; }
.aufsicht { width: 100%; }
.aufsicht p { margin: 4px 0; }
.video.video-aus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #121212; color: #f2f2f2; padding: 16px; text-align: center; }
.video.video-aus p, .video.video-aus a { color: #b5b5b5; }
.sieg-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 10, .62); display: grid; place-items: center; padding: 18px; }
.sieg-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sieg-pop { position: relative; background: #121212; color: #f3f1ec; border-radius: 22px; padding: 26px 20px 18px; text-align: center;
  display: grid; gap: 10px; width: min(380px, 100%); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.sieg-badge { justify-self: center; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #ff5a1f;
  font: 900 34px/1 "Arial Black", Impact, sans-serif; color: #fff; margin-top: -62px; box-shadow: 0 0 0 6px #121212; }
.sieg-pop h3 { font: 900 26px/1.05 "Arial Black", Impact, sans-serif; margin: 4px 0 0; }
.sieg-pop p { margin: 0; font-size: 14px; color: #cfcac2; }
.sieg-pop .sieg-pz { font-weight: 700; color: #ff5a1f; }
.sieg-pop .hell-knopf { background: transparent; color: #f3f1ec; border: 1.5px solid #3a3a3a; }
.einladen textarea { margin: 6px 0; }
.werben #ref-link { flex: 1; min-width: 0; }
.laeufe { margin: 4px 0 12px; }
.lauf-liste { list-style: none; padding: 0; margin: 6px 0 0; }
.lauf-liste li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.code-eingabe { font-size: 1.6rem; letter-spacing: .3em; text-align: center; max-width: 12ch; }
.auszug { list-style: none; padding: 0; margin: 0; }
.auszug li { padding: 8px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 2px; }
.auszug-kopf, .auszug-text { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.auszug .neutral { color: var(--leise); font-weight: 400; }
.auszug li.ohne-guthaben .auszug-text span:first-child { color: var(--leise); }
.gross-knopf { display: block; text-align: center; font-size: 1.15rem; padding: 14px; margin-top: 10px; }
.start-naechste h2 { margin: 2px 0 6px; }
.start-konto .zeile { margin: 2px 0; }
.passkey-zeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linie); }
#passkey-login { margin-top: 8px; }
.reiter-titel { margin: 4px 0 2px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
select.pillen-auswahl { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
table.bestenliste td.chips { display: table-cell; }
table.bestenliste td.chips > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
table.bestenliste td { vertical-align: middle; }
.regeln summary { cursor: pointer; }
.regel-liste { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 4px; font-size: .9rem; }
.regel-liste dt { font-weight: 700; }
.regel-liste dd { margin: 0; }
ul.lauf-liste { list-style: none; padding-left: 0; }
.lauf-liste li { padding: 0; }
.lauf-liste a { display: flex; flex-direction: column; padding: 6px 0; color: var(--text); text-decoration: none; }
.kennzahlen .plus { color: #1d8a3a; } .kennzahlen .minus { color: var(--gefahr, #c62828); }
dialog.bestaetigung { width: 380px; }
dialog.bestaetigung h3 { margin: 0 0 6px; }
dialog.bestaetigung .b-text { color: var(--leise); margin: 0 0 14px; }
dialog.bestaetigung .knopfreihe { justify-content: flex-end; }
button.gefahr-knopf { background: var(--gefahr, #c62828); color: #fff; border-color: var(--gefahr, #c62828); }
.start-buchen { margin: 0 0 14px; }
.runden-titel { margin: 14px 0 4px; }
details.runden { border-top: 1px solid var(--linie); padding: 6px 0; }
details.runden summary { cursor: pointer; }
.runden-phase { margin: 8px 0 2px; font-weight: 700; }
.runden-liste { list-style: none; padding: 0; margin: 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; }
.runden-liste li { display: grid; grid-template-columns: 2em 5em 1fr; gap: 6px; align-items: baseline; padding: 2px 4px; border-radius: 6px; }
.runden-liste li.beste { background: var(--akzent-hell); font-weight: 700; }
.runden-liste li.ungueltig { color: var(--leise); }
.runden-liste li.ungueltig span:nth-child(2) { text-decoration: line-through; text-decoration-thickness: 1px; }
.code-kopf { list-style: none; background: var(--akzent-hell); border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }
.code-kopf p { margin: 2px 0; }
.code-kopf .code { font-size: 1.4rem; letter-spacing: .08em; }
.fach-zeile { margin: 4px 0; }
.storno-hinweis { margin: 10px 0 4px; }
.storniert-liste { margin: 8px 0 16px; }
.start-kopf { display: flex; align-items: center; gap: 14px; margin: 6px 0 12px; }
.start-kopf h1 { margin: 0; }
.start-kopf .avatar.gross { width: 56px; height: 56px; }
.skill-karte { background: #121212; color: #f3f1ec; border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.skill-haupt { display: flex; align-items: center; gap: 14px; }
.skill-zahl { font: 900 40px/1 "Arial Black", Impact, sans-serif; color: #ff5a1f; }
.skill-klein { color: #b5b5b5; font-size: .85rem; }
.skill-weitere { display: flex; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid #333; margin-top: 12px; padding-top: 10px;
  font-size: .9rem; color: #d9d6d0; }
.skill-weitere b { color: #fff; }
.skill-praez, .skill-praez b { color: #7cc4ff; }
.start-titel { margin: 0 0 6px; font-size: 1.2rem; }
.start-wann { font-size: 1.05rem; margin: 0 0 4px; }
.start-zwischen { margin: 10px 0 4px; }
.monats-plaetze { list-style: none; padding: 0; margin: 0 0 8px; }
.monats-plaetze li { padding: 3px 0; }
/* Menü (UX 9, Steffen 26.10.): 5 Tabs mit Linien-Icons – Handy unten fixiert, Computer oben als Leiste */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tab-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--flaeche); border-top: 1px solid var(--linie); padding: 4px 4px max(6px, env(safe-area-inset-bottom)); }
.tab-leiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px;
  font-size: .72rem; font-weight: 500; color: var(--leise); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-leiste a.aktiv { color: var(--akzent); font-weight: 700; }
body.mit-menue { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .tab-leiste { position: static; max-width: 760px; margin: 0 auto; border: 0; border-bottom: 1px solid var(--linie);
    background: transparent; display: flex; justify-content: center; gap: 4px; padding: 4px 16px; }
  .tab-leiste a { flex-direction: row; gap: 6px; min-height: 40px; padding: 0 12px; font-size: .95rem; }
  body.mit-menue { padding-bottom: 0; }
}
.kopf-guthaben { margin-left: auto; text-decoration: none; color: var(--text); font-size: .9rem; font-weight: 600;
  border: 1px solid var(--linie); border-radius: 999px; padding: 4px 12px; }
.kopf-admin { text-decoration: none; color: var(--leise); display: inline-flex; align-items: center; gap: 4px; }
/* „Mehr“-Blatt */
.mehr-blatt { margin: auto 0 0; width: 100%; max-width: 100%; border: 0; border-radius: 16px 16px 0 0; padding: 6px 0
  max(16px, env(safe-area-inset-bottom)); background: var(--flaeche); color: var(--text); }
.mehr-blatt::backdrop { background: rgba(0, 0, 0, .35); }
@media (min-width: 900px) { .mehr-blatt { margin: 80px auto auto; max-width: 420px; border-radius: 16px; padding: 8px 0; } }
.mehr-blatt .griff { width: 40px; height: 4px; background: var(--linie); border-radius: 4px; margin: 6px auto 8px; }
.mehr-liste { list-style: none; margin: 0; padding: 0; }
.mehr-liste a { display: flex; align-items: center; gap: 14px; padding: 13px 20px; color: var(--text); text-decoration: none; min-height: 24px; }
.mehr-liste a .ikon { color: var(--leise); }
.mehr-liste .re { margin-left: auto; color: var(--leise); font-size: .9rem; }
/* „Buchen“: Reiter Kalender | Meine Buchungen */
nav.reiter { display: flex; border-bottom: 1px solid var(--linie); margin: 0 0 12px; }
nav.reiter a { flex: 1; text-align: center; padding: 12px 0; text-decoration: none; color: var(--leise); font-weight: 600; }
nav.reiter a.aktiv { color: var(--akzent); box-shadow: inset 0 -3px 0 var(--akzent); }
.freunde-qr img { display: block; margin: 8px auto; background: #fff; border-radius: 8px; }
.freunde-qr #f-link { flex: 1; min-width: 0; }
.freund-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--text); }
.freund-zeile > span:nth-child(2), .freund-zeile > a { flex: 1; }
.freund-neu { display: flex; align-items: center; gap: 10px; }
.freund-neu > span { flex: 1; }
.freunde-band { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 12px; scroll-snap-type: x mandatory; }
.freunde-slot { flex: none; width: 170px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px; text-decoration: none; color: var(--text); }
.freunde-bilder { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.freund-bild { position: relative; }
.freund-bild img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--flaeche); }
.freund-bild em { position: absolute; right: -4px; bottom: -4px; font: 700 .6rem/1 inherit; font-style: normal; background: #121212;
  color: #ff8a5c; border-radius: 6px; padding: 1px 3px; }
.freunde-slot .frei { font-size: .75rem; font-weight: 700; color: var(--akzent); border: 1px dashed var(--akzent);
  border-radius: 999px; padding: 4px 8px; }
.handicap { border-top: 1px solid var(--linie); margin-top: 10px; padding-top: 6px; }
.handicap p { margin: 4px 0; }
.hc-gesamt b { font-size: 1.15rem; }
.hc-kurve { width: 100%; height: 56px; color: var(--akzent); margin: 4px 0; }
.hc-besser { color: #1f9d55; font-weight: 700; }
.hc-schlechter { color: #d64545; font-weight: 700; }
.hc-klasse summary { cursor: pointer; list-style: none; }
.hc-klasse summary::-webkit-details-marker { display: none; }
.hc-ruhend, .hc-ruhend b { color: var(--leise); font-weight: 500; }
/* Zahl plus Einheit in einer Zeile (Steffen 25.10.: „Das Prozent ist verrutscht“) – wiederverwendbar:
   <label class="wert-zeile"><span>Provision</span><span class="wert-feld"><input …> %</span></label> */
.wert-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.wert-zeile > span:first-child { flex: 1; min-width: 0; }
.wert-feld { display: inline-grid; grid-template-columns: 6.5em minmax(1.1em, auto); align-items: center; gap: 6px;
  white-space: nowrap; flex: none; }
.wert-feld input { width: 6.5em; flex: none; margin: 0; text-align: right; }
/* Teile-Logbuch (Steffen 26.10.) */
.logbuch-gruppe { margin: 2px 0; }
.logbuch-gruppe > summary { cursor: pointer; padding: 4px 0; }
.logbuch-arten { display: flex; flex-wrap: wrap; gap: 6px; }
.logbuch-mehr { margin: 8px 0; }
.logbuch-foto { max-width: 160px; max-height: 120px; border-radius: 8px; display: block; margin: 4px 0; }
/* Meine Akkus: Sicherheitshinweis (Steffen 26.10.) */
.akku-warnung { background: #fde8e8; border: 2px solid #c81e1e; color: #8a1010; border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.akku-warnung p { margin: 4px 0 0; }
.akku-warnung-kurz { color: #c81e1e; font-weight: 700; margin: 2px 0 0; }
.akku-gefahr { border-left: 4px solid #c81e1e; padding-left: 8px; }
@media (prefers-color-scheme: dark) { .akku-warnung { background: #3a1212; color: #ffb4b4; border-color: #ff6b6b; } }
/* Meine Motoren: Felder je Art (Steffen 26.10.) */
.motor-form:has(input[name="art"][value="nitro"]:checked) .nur-elektro,
.motor-form:has(input[name="art"][value="elektro"]:checked) .nur-nitro { display: none; }
/* UX 26.10.: Gast-Startseite mit Foto, Preis im Kalender */
.start-foto { width: calc(100% + 28px); margin: -14px -14px 12px; max-height: 240px; object-fit: cover; border-radius: 10px 10px 0 0; display: block; }
.slot-preis { font-weight: 400; font-size: .85rem; color: var(--leise); margin-left: 6px; }
/* UX 26.10.: Ergebnisse – Filter einklappbar, Chips umbrechen statt aus dem Bild laufen */
.tage-umbruch { flex-wrap: wrap; overflow-x: visible; }
.filter-mehr { margin: 0 0 10px; }
.filter-mehr > summary { cursor: pointer; padding: 6px 0; min-height: 32px; }
/* UX 26.10.: Admin für Vereine – Menü in Gruppen, Einstellungen Grundlagen/Experte, Start-Assistent */
.admin-menue { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.admin-gruppe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.admin-gruppe-name { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); font-weight: 700; }
.admin-menue a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.einst-reiter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.einst-reiter button[aria-selected="true"] { background: var(--knopf); }
.einst-reiter button[aria-selected="false"] { background: var(--flaeche); border: 1px solid var(--linie); }
.einst-reiter input[type=search] { flex: 1 1 220px; }
.einst-einzeln { border: 0; padding: 0; margin: 0; min-width: 0; }
.einst-gruppe > summary { cursor: pointer; }
.fortschritt { height: 8px; background: var(--linie); border-radius: 8px; overflow: hidden; margin: 0 0 14px; }
.fortschritt div { height: 100%; background: var(--knopf); }
.schritt > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; }
.schritt-nr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie); font-weight: 700; font-size: .85rem; }
.schritt-nr.ok { background: var(--knopf); border-color: var(--knopf); }
/* UX 8: zwei Hauptzahlen (⚡ Speed, 🎯 Präzision) und je Klasse eine Zeile */
.skill-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skill-zahl.skill-praez { color: #7cc4ff; }
.skill-klassen { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #333; display: grid; gap: 6px; }
.skill-klassen a { color: inherit; text-decoration: none; display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: space-between; }
.skill-klassen a span { color: #d8d4cc; font-size: .9rem; }
.skill-zwei .skill-haupt { flex-direction: column; align-items: flex-start; gap: 4px; }
/* Startseite: kompakte Profil-Kopfzeile (Steffen 26.10.) */
.nur-screenreader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.start-profil { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.start-profil-kopf { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.start-profil-kopf .avatar { width: 44px; height: 44px; }
.start-zahlen { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 8px; border-top: 1px solid var(--linie); padding-top: 6px; }
.start-zahlen a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text); min-height: 44px; justify-content: center; }
.start-zahlen b { font-size: 1.1rem; }
.start-zahlen span { font-size: .7rem; color: var(--leise); white-space: nowrap; }
.start-zahlen .start-level b { color: var(--akzent); }
.start-zahlen .start-level.praez b { color: #3a8fd6; }
/* Admin → Schäden: Status-Chips */
.status-chip.schaden-offen, .status-chip.schaden-widersprochen { background: #fff3cd; color: #7a5a00; }
.status-chip.schaden-faellig { background: #fde8e8; color: #8a1010; }
.status-chip.schaden-erledigt, .status-chip.schaden-erlassen { background: #e6f4ea; color: #1e6b34; }
/* Klassenzeilen als Raster (Steffen 26.10.): Zahlen aller Zeilen auf einer Höhe, auch bei 375 px in einer Zeile */
.skill-klassen li > a, .skill-klassen li.skill-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 2.4em 2.4em 4em 1.8em;
  gap: 0 8px; align-items: baseline; justify-content: stretch; flex-wrap: nowrap; }
.skill-klassen li.skill-spalten { font-size: .75rem; color: #b5b5b5; margin-bottom: -2px; }
.skill-klassen li.skill-spalten span, .skill-klassen .skill-wert { text-align: right; }
.skill-name { display: flex; flex-direction: column; min-width: 0; }
.skill-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-name .skill-klein { font-size: .75rem; }
.skill-klassen .skill-wert { font-variant-numeric: tabular-nums; white-space: nowrap; color: #f3f1ec; font-size: .95rem; }
.skill-klassen .skill-wert.speed { color: #ff8a5c; }
.skill-klassen .skill-wert.praez { color: #7cc4ff; }
.skill-klassen .skill-wert.zeit, .skill-klassen .skill-wert.platz { color: #d8d4cc; font-size: .85rem; }
/* Meine Ergebnisse: Wert-Pillen (Steffen 26.10.) – keine Unterstreichung, ⚡ orange, 🎯 blau, eigene Zeile */
a.wert-pille { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: .85rem;
  font-weight: 700; text-decoration: none; background: #ffe6dc; color: #a8360b; border: 1.5px solid #ff8a5c;
  font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 32px; box-sizing: border-box; }
a.wert-pille.praez { background: #e3f1fd; color: #135a92; border-color: #7cc4ff; }
a.wert-pille:hover, a.wert-pille:focus-visible { filter: brightness(.95); text-decoration: none; }
.wert-pillen { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; }
h3.klassen-kopf { margin-bottom: 6px; }
/* Kopf „Meine Ergebnisse“ (Steffen 27.10.): Name groß, Gesamtwerte groß, Klassenwerte klein */
.mw-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 6px; }
.mw-name { font-size: 1.6rem; margin: 0; }
.wert-pillen.gross { margin: 0; }
a.wert-pille.gross { font-size: 1.05rem; padding: 6px 14px; min-height: 40px; }
a.wert-pille.klein { font-size: .74rem; padding: 2px 9px; min-height: 26px; border-width: 1px; }
@media (prefers-color-scheme: dark) {
  a.wert-pille { background: #3a1d10; color: #ffb08f; border-color: #a8360b; }
  a.wert-pille.praez { background: #10283b; color: #9fd3ff; border-color: #2f6f9f; }
}
/* Garage → Meine Transponder (Steffen 26.10.) */
.tp-karte { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.tp-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tp-nummer { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tp-notiz { font-size: .85rem; color: var(--leise); }
button.tp-entfernen { background: none; border: 1px solid var(--linie); color: var(--leise); font-size: .8rem; padding: 4px 10px;
  min-height: 32px; border-radius: 8px; }
.tp-warnung { margin: 6px 0 0; padding: 5px 8px; border-radius: 6px; background: #fff3cd; color: #7a5a00; font-size: .8rem; }
details.tp-neu { margin-top: 10px; }
details.tp-neu > summary { cursor: pointer; font-weight: 700; color: var(--akzent); padding: 8px 0; min-height: 32px; }
@media (prefers-color-scheme: dark) { .tp-warnung { background: #3a2f0a; color: #ffd866; } }
/* Schaden am Mietauto melden (Steffen 26.10.) */
.miet-melden .knopf { padding: 8px 12px; font-size: .9rem; }
.miet-ersatz form { margin-top: 6px; }
.miet-admin { border-top: 1px solid var(--linie); padding-top: 8px; margin-top: 8px; }
.miet-admin:first-of-type { border-top: 0; margin-top: 0; }
/* Garage-Platzhalter je Fahrzeugtyp (Steffen 26.10.): antippbar = eigenes Foto */
.platzhalter-foto { position: relative; display: block; cursor: pointer; }
.platzhalter-foto img { display: block; width: 100%; }
.platzhalter-foto span { position: absolute; top: 8px; right: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--akzent); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 4px; padding: 3px 8px; }
/* Startseite (Steffen 26.10.): „Hallo …!“ groß, Profilbild größer */
.start-profil-kopf .avatar { width: 76px; height: 76px; }
.start-profil-kopf { gap: 14px; }
.start-hallo { font-size: 1.7rem; line-height: 1.15; font-weight: 800; overflow-wrap: anywhere; }
/* Setup-Karte (Entwurf 3, Steffen 26.10.): „Datenblatt hell“ bzw. „Blueprint dunkel“ nach System-Modus */
.setup-v3 { --sk-bg:#f3f5f7; --sk-panel:#fff; --sk-ink:#1d242b; --sk-ink2:#6b7783; --sk-line:#dfe4e9; --sk-grid:rgba(30,60,90,.05);
  --sk-grid2:rgba(30,60,90,.09); --sk-akz:#e2550f; --sk-akzbg:rgba(226,85,15,.08); --sk-gruen:#109457; --sk-rot:#d33a3a;
  --sk-fill:rgba(29,36,43,.03); }
@media (prefers-color-scheme: dark) {
  .setup-v3 { --sk-bg:#0e1115; --sk-panel:#141920; --sk-ink:#cfd8e0; --sk-ink2:#7f8c98; --sk-line:#27303a; --sk-grid:rgba(140,170,200,.06);
    --sk-grid2:rgba(140,170,200,.11); --sk-akz:#ff6a2b; --sk-akzbg:rgba(255,106,43,.12); --sk-gruen:#3ccf8a; --sk-rot:#ff5d5d;
    --sk-fill:rgba(207,216,224,.035); }
}
.setup-v3 .mono, .setup-v3 svg .tw, .setup-v3 svg .mz { font-family:"Cascadia Mono","JetBrains Mono",Consolas,ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.setup-v3 .sk-titel { font-size:1.3rem; }
.setup-v3 .sk-titel small { display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--leise); font-weight:500; }
.setup-v3 .cap { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sk-ink2); font-weight:600; }
.setup-v3 .karte.sk-karte, .setup-v3 .sk-svg { background:var(--sk-panel); color:var(--sk-ink); border:1px solid var(--sk-line); border-radius:8px; }
.setup-v3 .sk-svg { padding:0; overflow:hidden; margin-bottom:8px; background:var(--sk-bg); }
.sk-reiter { display:flex; border:1px solid var(--sk-line); border-radius:6px; overflow:hidden; margin:0 0 10px; background:var(--sk-panel); }
.sk-reiter a { flex:1; text-align:center; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:10px 0; color:var(--sk-ink2);
  text-decoration:none; border-right:1px solid var(--sk-line); }
.sk-reiter a:last-child { border-right:0; }
.sk-reiter a.an { color:var(--sk-akz); background:var(--sk-akzbg); box-shadow:inset 0 -2px 0 var(--sk-akz); }
.sk-js .sk-ansicht { display:none; }
.sk-js .sk-ansicht.an { display:block; }
.setup-v3 svg.skizze-svg { display:block; width:100%; height:auto; }
.setup-v3 svg .gr { fill:none; stroke:var(--sk-grid); stroke-width:.6; }
.setup-v3 svg .gr2 { fill:none; stroke:var(--sk-grid2); stroke-width:.8; }
.setup-v3 svg .k { fill:none; stroke:var(--sk-ink); stroke-width:1.15; stroke-linejoin:round; stroke-linecap:round; }
.setup-v3 svg .k.fl { fill:var(--sk-fill); }
.setup-v3 svg .k2 { fill:none; stroke:var(--sk-ink2); stroke-width:.8; }
.setup-v3 svg .k2.strich { stroke-dasharray:3 3; }
.setup-v3 svg .h { fill:none; stroke:var(--sk-ink2); stroke-width:.6; }
.setup-v3 svg .mitte { stroke:var(--sk-ink2); stroke-width:.6; stroke-dasharray:10 3 2 3; fill:none; }
.setup-v3 svg .boden { stroke:var(--sk-ink2); stroke-width:1; }
.setup-v3 svg .loch { fill:var(--sk-panel); stroke:var(--sk-ink); stroke-width:1; }
.setup-v3 svg .loch.an { fill:var(--sk-akz); stroke:var(--sk-akz); }
.setup-v3 svg .clip { fill:none; stroke:var(--sk-ink2); stroke-width:.8; }
.setup-v3 svg .clip.an { fill:var(--sk-akz); stroke:var(--sk-akz); }
.setup-v3 svg .akku { fill:none; stroke:var(--sk-ink2); stroke-width:.8; }
.setup-v3 svg .akku.an { fill:var(--sk-akzbg); stroke:var(--sk-akz); }
.setup-v3 svg .link { stroke:var(--sk-akz); stroke-width:1.2; fill:none; }
.setup-v3 svg .leit { fill:none; stroke:var(--sk-akz); stroke-width:.7; opacity:.85; }
.setup-v3 svg .leitp { fill:var(--sk-akz); }
.setup-v3 svg .tipp { fill:transparent; }
.setup-v3 svg .skz-tag rect { fill:var(--sk-panel); stroke:var(--sk-akz); stroke-width:.8; }
.setup-v3 svg .skz-tag.leer rect { stroke:var(--sk-line); }
.setup-v3 svg .skz-tag.leer .leit { stroke:var(--sk-ink2); opacity:.5; }
.setup-v3 svg .skz-tag.leer .leitp { fill:var(--sk-ink2); }
/* geändert seit dem letzten Lauf (Steffen 27.10.): orange hervorgehoben, alter Wert grau daneben */
.setup-v3 svg .skz-tag.neu rect { stroke:var(--sk-akz); stroke-width:1.6; fill:var(--sk-akzbg); }
.setup-v3 svg .skz-tag.neu .tw { fill:var(--sk-akz); }
.setup-v3 svg .tv { fill:var(--sk-ink2); font-weight:500; }
.setup-v3 svg .tl { font:600 7.4px "Segoe UI",system-ui,sans-serif; letter-spacing:.12em; fill:var(--sk-ink2); }
.setup-v3 svg .tw { font-size:10.5px; font-weight:600; fill:var(--sk-akz); }
.setup-v3 svg .skz-tag.leer .tw { fill:var(--sk-ink2); }
.setup-v3 svg .mass { fill:none; stroke:var(--sk-akz); stroke-width:.8; }
.setup-v3 svg .pfeil { fill:none; stroke:var(--sk-akz); stroke-width:1; }
.setup-v3 svg .hilf { fill:none; stroke:var(--sk-ink2); stroke-width:.5; stroke-dasharray:2 2; }
.setup-v3 svg .mz { font-size:10px; font-weight:600; fill:var(--sk-akz); }
.setup-v3 svg .skz-mass.neu .mz { fill:var(--sk-akz); }
.setup-v3 svg a { cursor:pointer; }
.setup-v3 svg a:focus-visible rect { stroke-width:2; }
.setup-v3 svg .puls { animation:sk-puls .15s ease-out 2 alternate; }
@keyframes sk-puls { to { opacity:.4; } }
.sk-liste { background:var(--sk-panel); color:var(--sk-ink); border:1px solid var(--sk-line); border-radius:8px; padding:4px 12px 10px; margin-bottom:12px; }
.sk-zeile { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--sk-line); flex-wrap:wrap; }
.sk-zeile.neu { box-shadow:inset 3px 0 0 var(--sk-akz); padding-left:8px; }
.sk-vorher { color:var(--sk-ink2); font-size:.68rem; letter-spacing:0; text-transform:none; white-space:nowrap; }
.sk-zeile:target { box-shadow:inset 2px 0 0 var(--sk-akz); background:var(--sk-akzbg); padding-left:8px; }
.sk-label { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sk-ink2); }
.sk-eingabe { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sk-eingabe input:not([type=radio]), .sk-eingabe select { width:7.5em; font-family:"Cascadia Mono",Consolas,ui-monospace,monospace; }
.seg { display:inline-flex; flex-wrap:wrap; border:1px solid var(--sk-line, var(--linie)); border-radius:5px; overflow:hidden; }
.seg label { margin:0; position:relative; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; }
.seg span { display:block; padding:6px 10px; font-size:.78rem; color:var(--sk-ink2, var(--leise)); border-right:1px solid var(--sk-line, var(--linie)); min-height:32px; cursor:pointer; }
.seg label:last-child span { border-right:0; }
.seg input:checked + span { color:var(--sk-akz, var(--akzent)); background:var(--sk-akzbg, var(--akzent-hell)); font-weight:600; }
.seg input:focus-visible + span { outline:2px solid var(--sk-akz, var(--akzent)); outline-offset:-2px; }
.sk-frage { display:flex; flex-direction:column; gap:4px; padding:6px 0; }
.sk-gelernt { border:1px solid var(--sk-line); border-left:2px solid var(--sk-akz); padding:7px 10px; font-size:.8rem; border-radius:4px; }
.sk-von { color:var(--sk-akz); font-size:.65rem; }
.sk-knopf { border:1px solid var(--sk-akz); color:var(--sk-akz); background:var(--sk-akzbg); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.sk-reifen { display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; width:100%; }
.sk-reifen label { font-size:.72rem; color:var(--sk-ink2); }
.sk-reifen input, .sk-reifen select { width:100% !important; }
.sk-plus { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.sk-plus label { flex:1; min-width:180px; }
table.sk-tel { width:100%; border-collapse:collapse; font-size:.8rem; }
table.sk-tel th { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sk-ink2); text-align:right; padding:2px 4px 6px; font-weight:600; }
table.sk-tel th:first-child, table.sk-tel td:first-child { text-align:left; }
table.sk-tel td { padding:6px 4px; border-top:1px solid var(--sk-line); text-align:right; }
table.sk-tel td:first-child { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sk-ink2); font-family:system-ui,sans-serif; }
.setup-v3 .gut { color:var(--sk-gruen); font-weight:600; }
.setup-v3 .schlecht { color:var(--sk-rot); font-weight:600; }
.setup-v3 .alt { color:var(--sk-ink2); text-decoration:line-through; }
.setup-v3 .neu { color:var(--sk-gruen); font-weight:600; }
.setup-v3 svg.spark { display:block; width:100%; height:auto; }
.setup-v3 svg .sp { fill:none; stroke:var(--sk-ink2); stroke-width:1; }
.setup-v3 svg .spp { fill:var(--sk-akz); }
dialog.sk-blatt { margin:auto 0 0; width:100%; max-width:760px; border:0; border-radius:14px 14px 0 0; padding:10px 16px 18px;
  background:var(--sk-panel); color:var(--sk-ink); animation:sk-rein .18s ease-out; }
dialog.sk-blatt::backdrop { background:rgba(0,0,0,.35); }
@keyframes sk-rein { from { transform:translateY(40px); opacity:.4; } }
@media (prefers-reduced-motion: reduce) { .setup-v3 svg .puls, dialog.sk-blatt { animation:none; } }
/* Original-Setup-Sheets (Steffen 26.10.): Seitenbild mit Eingaben an den Originalpositionen */
.sheet-blatt { padding: 0; overflow: hidden; }
.sheet-werkzeug { display: flex; gap: 8px; align-items: center; padding: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 2;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.sheet-werkzeug .seg button { background: none; border: 0; border-right: 1px solid var(--linie); padding: 6px 12px; color: var(--leise); }
.sheet-werkzeug .seg button.an { color: var(--akzent); background: var(--akzent-hell); }
.sheet-speichern.geaendert { box-shadow: 0 0 0 2px var(--akzent); }
.sheet-rahmen { overflow: auto; max-height: 78vh; background: #e8eaec; -webkit-overflow-scrolling: touch; }
.sheet-seite { position: relative; width: 100%; background: #fff; color: #111; container-type: inline-size; }
.sheet-seiten { width: 100%; }
.sheet-seitennr { margin: 0; padding: 8px 8px 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #5b6670; }
.sheet-seiten .sheet-seite + .sheet-seitennr { margin-top: 10px; }
.sheet-seite img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sheet-feld { position: absolute; border: 0; background: rgba(255, 106, 43, .08); color: #0b3d91; font-weight: 600; line-height: 1; font-family: "Cascadia Mono", Consolas, monospace;
  padding: 0 2px; min-height: 0; border-radius: 1px; }
.sheet-feld:focus { outline: 2px solid #ff6a2b; background: #fff; }
.sheet-kreis { position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.sheet-kreis { pointer-events: none; }          /* Treffer rechnet sheet_fahrer.js: nächster Mittelpunkt gewinnt */
.sheet-kreis input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sheet-kreis span { width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 106, 43, .5); box-sizing: border-box; }
.sheet-kreis.eckig span { border-radius: 2px; }
.sheet-kreis input:checked + span { background: #ff6a2b; border-color: #d9440c; box-shadow: 0 0 0 2px rgba(255, 106, 43, .35); }
.sheet-kreis input:focus-visible + span { outline: 2px solid #0b3d91; }
.sheet-admin .sheet-box { position: absolute; border: 1px solid #9aa4ad; background: rgba(154, 164, 173, .12); pointer-events: none; }
.sheet-admin .sheet-box.zugeordnet { border-color: #109457; background: rgba(16, 148, 87, .15); }
.sheet-admin .sheet-box.hand { border-style: dashed; }
.sheet-admin .sheet-box.radio { border-radius: 50%; }
.sheet-admin img { cursor: crosshair; }
table.sheet-zuordnung select { max-width: 13em; }
.sk-sheet-link { margin: -4px 0 10px; }
/* Setup-Karte: Orange nur einmal (Steffen 27.10.) – gespiegelte Seite dunkel, Sturzstange ohne Auswahl grau */
.setup-v3 svg .loch.gespiegelt { fill: var(--sk-ink); stroke: var(--sk-ink); }
.setup-v3 svg .link.neutral { stroke: var(--sk-ink2); stroke-dasharray: 3 2; }
/* Setup-Karte, Farbsystem (Steffen 27.10.): Bauteile neutral, Orange nur für die Auswahl (Symbol + Leitlinie) */
.setup-v3 svg .wahl { fill: var(--sk-akz); stroke: none; }
.setup-v3 svg .wahl-ring { fill: none; stroke: var(--sk-akz); stroke-width: 1.4; }
.setup-v3 svg .auge { fill: var(--sk-panel); stroke: var(--sk-ink); stroke-width: 1.1; }
.setup-v3 svg .stange { stroke: var(--sk-ink); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.setup-v3 svg .stange.neutral { stroke: var(--sk-ink2); stroke-dasharray: 3 2; }
.setup-v3 svg .skz-tag.leer rect { stroke-dasharray: 3 2; }
.setup-v3 svg .skz-tag.leer .leit { stroke-dasharray: 2 2; }
.setup-v3 svg .clip.an { fill: var(--sk-akz); stroke: var(--sk-akz); }
.sk-alle summary { cursor: pointer; }
.sk-blatt-feld { padding: 6px 0; border-bottom: 1px solid var(--sk-line); }
.sk-blatt-feld:last-child { border-bottom: 0; }
/* Dämpfer-Blatt (Steffen 27.10.): Kolben Lochzahl × Lochgröße, Feder-Chips */
.sk-kolben, .sk-feder { display:flex; flex-wrap:wrap; align-items:center; gap:6px; justify-content:flex-end; max-width:100%; }
.sk-kolben input { width:7.5em; }
.sk-feder input { width:10em; }
.sk-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.sk-chip { font:inherit; font-size:.76rem; min-height:32px; padding:4px 10px; border:1px solid var(--sk-line); border-radius:16px;
  background:var(--sk-panel); color:var(--sk-ink2); cursor:pointer; }
.sk-chip.an { color:var(--sk-akz); background:var(--sk-akzbg); border-color:var(--sk-akz); font-weight:600; }
.sk-blatt-feld .sk-kolben, .sk-blatt-feld .sk-feder, .sk-blatt-feld .sk-chips { justify-content:flex-start; }
/* Sheet (Steffen 27.10.): kein Browser-Zoom bzw. Doppeltipp-Zoom im Sheet – eigener Zoom per Knopf bzw. zwei Finger */
.sheet-rahmen { touch-action: pan-x pan-y; }
.sheet-seite .sheet-feld { touch-action: manipulation; }
/* Änderungen seit dem letzten Lauf (Steffen 27.10.): orange = neu (Text orange geschrieben), alter Kreis dunkelgrau
   gefüllt mit kräftigem gestricheltem Rand – deutlich anders als leer (weiß); kein „vorher“-Text im Sheet */
.sheet-feld.geaendert { outline: 2px solid #ff6a2b; outline-offset: 1px; background: rgba(255, 106, 43, .16); color: #d9440c; }
.sheet-kreis.geaendert span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff6a2b; }
.sheet-kreis.vorher span { background: #6b6b6b; border: 2px dashed #1f1f1f; box-shadow: 0 0 0 1.5px #fff; }
.sheet-kreis.eckig.geaendert span { border-color: #ff6a2b; border-width: 2px; }
@media (prefers-color-scheme: dark) { .sheet-kreis.vorher span { background: #8a8a8a; border-color: #111; } }
.sheet-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sheet-leg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.sheet-leg.neu { background: #ff6a2b; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ff6a2b; }
.sheet-leg.alt { background: #6b6b6b; border: 2px dashed #1f1f1f; box-sizing: border-box; }
@media (prefers-color-scheme: dark) { .sheet-leg.alt { background: #8a8a8a; border-color: #ddd; } }
.sheet-lauf { font-size: .85rem; }
.sheet-kreis.getippt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid #ff6a2b; border-radius: 50%; animation: sheet-ring .35s ease-out forwards; }
@keyframes sheet-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.sheet-karte-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); margin-top: 12px; }
.setup-v3 svg .tw.lang { font-size: 8.4px; }
/* „Letzte Änderungen“ unter Sheet und Karte (Steffen 27.10.): je Speichern, Feld alt → neu */
.letzte-aenderungen h2 { margin: 0 0 6px; }
/* Steffen 27.10.: Übergang zwischen den Speicher-Gruppen etwas kräftiger, Datum etwas größer und fett */
.la-gruppe + .la-gruppe { border-top: 2px solid #c6c6c6; margin-top: 8px; padding-top: 8px; }
@media (prefers-color-scheme: dark) { .la-gruppe + .la-gruppe { border-top-color: #4a4a4a; } }
.la-zeit { margin: 0 0 3px; font-size: .82rem; font-weight: 700; color: var(--leise); }
.sheet-text[data-auto]::placeholder { color: #0b3d91; opacity: .8; }
.letzte-aenderungen ul { list-style: none; margin: 0; padding: 0; }
.letzte-aenderungen li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: .88rem; flex-wrap: wrap; }
.la-alt { color: var(--leise); }
.la-werte b { color: var(--akzent); }
.letzte-aenderungen details summary { margin-top: 8px; cursor: pointer; }
/* Eigenes Sheet zuordnen (Steffen 27.10.): je Feld eine Karte, handytauglich */
.sz-feld { padding: 10px 12px; }
.sz-feld.zugeordnet { box-shadow: inset 3px 0 0 var(--akzent); }
.sz-kopf { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.sz-feld select, .sz-feld input[name^="b"] { width: 100%; }
.sz-werte { display: flex; flex-wrap: wrap; gap: 6px; }
.sz-werte input { width: 3.6em; text-align: center; }
.sz-speichern { position: sticky; bottom: 70px; padding: 8px 0; }

/* Standortseite (Steffen 27.10.): kompakter Block mit aktuellen Bestzeiten und Monatswertung */
.mini-liste { list-style: none; margin: 0 0 8px; padding: 0; }
.mini-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: .92rem; }
.standort-aktuell .klassen-kopf { margin: 10px 0 4px; }
.standort-aktuell .wertung-zeilen li { flex-direction: column; gap: 0; padding: 4px 0; border-bottom: 1px solid var(--linie); }
/* „powered by“ mit Plattform-Logo (Standort- und Vereinsseiten) */
.powered-zeile { display: flex; align-items: center; justify-content: flex-end; gap: 8px; opacity: .75; margin-top: 18px; }
.powered-zeile img { height: 30px; width: auto; display: block; }
/* Plattform-Logo „MicroRing – RC RACING SOLUTIONS“ auf der Gast-Startseite: unten klein, bei mehreren Standorten oben groß */
.plattform-logo { display: flex; justify-content: center; margin: 28px 0 8px; }
.plattform-logo img { width: 210px; height: auto; display: block; }
.plattform-logo.gross { margin: 8px 0 18px; }
.plattform-logo.gross img { width: min(340px, 90%); }
/* Gast-Startseite (Steffen 30.10.): zuerst Konto, dann Funktionen, dann Strecke finden */
h1.gast-satz { font-size: 1.25rem; text-align: center; margin: 0 0 16px; line-height: 1.3; }
.gast-knoepfe { display: grid; gap: 10px; }
.gast-knoepfe .gross-knopf { margin: 0; width: 100%; }
.gast-form { margin-top: 14px; }
.gast-form h2 { margin: 0 0 8px; font-size: 1.1rem; }
.gast-form #passkey-login { margin-top: 8px; }
.gast-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.gast-kachel { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px; }
.gast-kachel .gast-sym { font-size: 1.5rem; line-height: 1; }
.gast-kachel a { margin-top: auto; padding-top: 4px; }
.gast-kachel.breit { grid-column: 1 / -1; }
ul.gast-stufen { margin: 6px 0 2px; padding-left: 18px; display: grid; gap: 4px; }
a.gast-vorschlag { text-decoration: none; color: inherit; }
a.gast-vorschlag .klein { color: var(--akzent, #ff5a1f); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gast-halle h3 { margin: 0 0 4px; }
.gast-halle .start-foto { margin-bottom: 10px; }
.such-zeile { gap: 8px; margin-bottom: 10px; }
.such-zeile .ss-feld { flex: 1; min-width: 0; }
.such-zeile .ss-naehe { white-space: nowrap; }
.gast-halle .knopfreihe { align-items: center; margin: 8px 0 0; }
.strecken-suche .gast-halle { padding: 12px 14px; margin-bottom: 10px; }
.strecken-suche .gast-halle h3 { margin: 0 0 2px; font-size: 1.05rem; }
.strecken-suche .gast-halle p { margin: 2px 0; }
.gast-fuss { text-align: center; line-height: 2; margin: 18px 0 0; }
.gast-woche { font-size: 1.05rem; margin: 0 0 8px; }
.gast-woche b { font-size: 1.5rem; color: var(--akzent, #ff5a1f); }
ul.gast-beste { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
ul.gast-beste li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
ul.gast-beste li .klein { grid-column: 1 / -1; color: var(--leise); }
.gast-video video, .gast-video img { width: 100%; border-radius: 8px; display: block; margin-bottom: 8px; background: #000; }
.gast-video-platz { height: 120px; border-radius: 8px; display: grid; place-items: center; font-size: 2.4rem; margin-bottom: 8px;
  background: repeating-linear-gradient(135deg, var(--linie) 0 12px, transparent 12px 24px); }
.gast-video p { margin: 0; }
.gast-teilen { display: flex; gap: 14px; align-items: center; }
.gast-teilen img { flex: 0 0 auto; border-radius: 6px; background: #fff; }
.gast-teilen p { margin: 4px 0; }
.gast-einladung p { margin: 0; }
/* Partner-Verkauf (Steffen 30.10.) */
.code-zeile { gap: 8px; margin: 10px 0; }
.code-zeile input { flex: 1; min-width: 0; text-transform: uppercase; font-family: ui-monospace, monospace; }
.code-gross { font-family: ui-monospace, monospace; font-size: 1.3rem; letter-spacing: .06em; font-weight: 700; }
/* MicroRing Plus: Teaser statt harter Sperre, Kaufhinweis */
.plus-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; margin-top: 10px;
  border: 1px dashed var(--akzent, #ff5a1f); border-radius: 10px; }
.plus-teaser.klein { font-size: .9em; padding: 8px 10px; }
.plus-marke { background: var(--akzent, #ff5a1f); color: #111; font-weight: 800; border-radius: 6px; padding: 1px 7px; font-size: .85em; }
.plus-hinweis { font-weight: 700; }
.plus-kauf { margin-top: 12px; }
/* Setup je Strecke (Steffen 27.10.): Auswahl „Stand“, Vermerk in „Letzte Änderungen“ */
.stand-wahl { display: grid; gap: 8px; }
.stand-wahl select { max-width: 100%; }
.la-herkunft { font-weight: 600; color: var(--akzent, #ff5a1f); }
/* „Meine Strecke“ (Steffen 27.10.): Auswahl oben auf der Startseite, Liste */
.strecke-wahl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
a.strecke-knopf { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--linie); background: var(--flaeche); font-weight: 700; text-decoration: none; color: var(--text); }
/* Streckenwahl als Auswahl-Fenster (Steffen 30.10.) */
dialog.strecke-blatt { margin: auto 0 0; width: 100%; max-width: 560px; max-height: 85vh; box-sizing: border-box; border: 0;
  border-radius: 14px 14px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--flaeche);
  color: var(--text); overflow-y: auto; animation: sb-rein .18s ease-out; }
@media (min-width: 600px) { dialog.strecke-blatt { margin: auto; border-radius: 14px; } }
dialog.strecke-blatt::backdrop { background: rgba(0, 0, 0, .45); }
@keyframes sb-rein { from { transform: translateY(40px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { dialog.strecke-blatt { animation: none; } }
.strecke-blatt h2 { margin: 4px 0; font-size: 1.15rem; outline: none; }
.strecke-blatt .sb-zu { font-size: 1.2rem; min-width: 40px; text-align: center; }
.strecke-blatt input[type=search] { width: 100%; box-sizing: border-box; margin: 6px 0 4px; }
.sb-kopf { margin: 12px 0 2px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
ul.sb-liste { list-style: none; margin: 0; padding: 0; }
.sb-eintrag { display: flex; align-items: stretch; border-bottom: 1px solid var(--linie); }
.sb-eintrag button.sb-knopf { border-bottom: 0; flex: 1; min-width: 0; }
button.sb-stern { background: none; border: 0; border-radius: 0; width: 48px; padding: 0; font-size: 1.35rem; line-height: 1;
  color: var(--leise); cursor: pointer; }
button.sb-stern[aria-pressed=true] { color: #f5b301; }
#sb-suche { margin-top: 14px; }
button.sb-knopf { display: grid; grid-template-columns: 1fr auto; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--linie); border-radius: 0; padding: 10px 2px; color: inherit; font: inherit; cursor: pointer; min-height: 48px; }
button.sb-knopf .sb-name { font-weight: 700; }
button.sb-knopf .klein { grid-column: 1; color: var(--leise); font-weight: 400; }
button.sb-knopf .sb-haken { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--akzent, #ff5a1f); font-weight: 800; }
button.sb-knopf.aktiv .sb-name { color: var(--akzent, #ff5a1f); }
.sb-fuss { margin: 14px 0 0; line-height: 2.2; }
.einzeilig { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.training-heute { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 16px; }
/* Profil der Halle bzw. des Vereins (Steffen 30.10.) */
.galerie { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 0 12px; padding-bottom: 4px; }
.galerie figure { margin: 0; flex: 0 0 85%; max-width: 420px; scroll-snap-align: start; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.steckbrief dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.steckbrief dt { color: var(--leise); }
.steckbrief dd { margin: 0; }
a.sb-info { display: grid; place-items: center; width: 40px; text-decoration: none; color: var(--leise); font-size: 1.15rem; }
/* Private Strecke: Feinschliff (Steffen 30.10.) */
.kat-felder { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px 8px; margin: 8px 0; }
.kat-felder legend { font-size: .9rem; padding: 0 4px; }
.kat-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kat-chips label { display: inline-flex; align-items: center; gap: 4px; }
.kat-klassen label[hidden], .kat-modi-liste[hidden] { display: none; }
.strecke-einstellungen { margin: 6px 0; }
.privat-zahlen { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 8px; }
.privat-zahlen span { display: flex; flex-direction: column; font-size: .85rem; color: var(--leise); }
.privat-zahlen b { font-size: 1.3rem; color: var(--text); }
button.sb-knopf { grid-template-columns: minmax(0, 1fr) auto; }
.strecke-zeile { padding: 8px 0; gap: 8px; }
.strecke-zeile + .strecke-zeile { border-top: 1px solid var(--linie); }
.strecke-zeile.aktiv b { color: var(--akzent, #ff5a1f); }
button.link-knopf { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 40px; }
ul.freunde-strecke { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.strecke-privat { display: grid; gap: 6px; padding: 0 0 10px 6px; border-left: 3px solid var(--linie); margin-left: 4px; }