: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; }
.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: #121212; color: #fff; }
.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 { display: flex; flex-direction: column; align-items: flex-start; gap: 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; }