:root {
  --bg: #f6f7f9; --fl: #ffffff; --tx: #1c2430; --tx2: #5b6675; --rand: #dde2e8; --akz: #1f6feb; --akz-tx: #fff;
  --gruen: #1a7f37; --gelb: #9a6700; --rot: #cf222e; --gruen-bg: #dafbe1; --gelb-bg: #fff8c5; --rot-bg: #ffebe9;
  --int: #8250df; --lang: #0969da; --locker: #57606a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1116; --fl: #161b22; --tx: #e6edf3; --tx2: #9da7b3; --rand: #30363d; --akz: #4493f8;
    --gruen: #3fb950; --gelb: #d29922; --rot: #f85149; --gruen-bg: #12261e; --gelb-bg: #272115; --rot-bg: #2d1416;
    --int: #a371f7; --lang: #58a6ff; --locker: #8b949e; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--tx); }
a { color: var(--akz); text-decoration: none; } a:hover { text-decoration: underline; }
header.kopf { background: var(--fl); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 5; }
header.kopf .innen { max-width: 1180px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header.kopf .marke { font-weight: 700; color: var(--tx); margin-right: 8px; }
nav.haupt a { color: var(--tx2); padding: 6px 8px; border-radius: 6px; }
nav.haupt a.aktiv, nav.haupt a:hover { color: var(--tx); background: var(--bg); text-decoration: none; }
header .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
main { max-width: 1180px; margin: 0 auto; padding: 18px 16px 60px; }
h1 { font-size: 1.5rem; margin: 4px 0 14px; } h2 { font-size: 1.15rem; margin: 22px 0 10px; }
.karte { background: var(--fl); border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; }
.gitter { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.zwei { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 820px) { .zwei { grid-template-columns: 1fr; } }
.kachel .name { color: var(--tx2); font-size: .85rem; } .kachel .wert { font-size: 1.6rem; font-weight: 650; }
.kachel .spark { color: var(--akz); display: block; margin-top: 4px; }
.ampel { display: flex; gap: 14px; align-items: center; border-radius: 10px; padding: 12px 16px; border: 1px solid var(--rand); }
.ampel .punkt { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.ampel.gruen { background: var(--gruen-bg); } .ampel.gruen .punkt { background: var(--gruen); }
.ampel.gelb { background: var(--gelb-bg); } .ampel.gelb .punkt { background: var(--gelb); }
.ampel.rot { background: var(--rot-bg); } .ampel.rot .punkt { background: var(--rot); }
.ampel ul { margin: 2px 0 0; padding-left: 18px; color: var(--tx2); }
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { color: var(--tx2); font-weight: 600; font-size: .85rem; } td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle-scroll { overflow-x: auto; }
.knopf, button { display: inline-block; font: inherit; border: 1px solid var(--rand); background: var(--fl); color: var(--tx); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.knopf.haupt, button.haupt { background: var(--akz); color: var(--akz-tx); border-color: var(--akz); }
.knopf.klein, button.klein { padding: 2px 8px; font-size: .85rem; }
button.gefahr { color: var(--rot); }
form.inline { display: inline; }
.werkzeug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
label { display: block; font-weight: 600; font-size: .9rem; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; max-width: 520px; font: inherit; padding: 7px 9px; border: 1px solid var(--rand); border-radius: 6px; background: var(--fl); color: var(--tx); }
input[type=checkbox] { width: auto; }
.hilfe { color: var(--tx2); font-size: .85rem; } .fehlerliste { color: var(--rot); margin: 4px 0; padding-left: 18px; }
.meldungen { list-style: none; padding: 0; margin: 0 0 14px; } .meldungen li { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; border: 1px solid var(--rand); }
.meldungen .success { background: var(--gruen-bg); } .meldungen .error { background: var(--rot-bg); } .meldungen .warning { background: var(--gelb-bg); }
.etikett { display: inline-block; font-size: .78rem; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--rand); color: var(--tx2); }
.typ-intervalle, .typ-schwelle, .typ-ga2, .typ-wettkampf, .typ-test { border-left: 4px solid var(--int); }
.typ-lang { border-left: 4px solid var(--lang); } .typ-ga1, .typ-locker, .typ-technik, .typ-kraft { border-left: 4px solid var(--locker); }
.typ-ruhe { opacity: .7; }
.einheit { padding: 6px 8px; border-radius: 6px; background: var(--bg); margin-bottom: 6px; }
.einheit.erledigt { outline: 1px solid var(--gruen); } .einheit.verpasst { opacity: .55; text-decoration: line-through; }
.woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } @media (max-width: 900px) { .woche { grid-template-columns: 1fr; } }
.woche .tag.heute { outline: 2px solid var(--akz); }
.monat td { width: 14.28%; height: 92px; font-size: .82rem; } .monat .anders { opacity: .45; }
.monat .mini { display: block; padding: 1px 4px; border-radius: 4px; background: var(--bg); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeitleiste { position: relative; height: 46px; background: var(--bg); border-radius: 8px; margin: 10px 0 4px; overflow: hidden; }
.zeitleiste .balken { position: absolute; top: 0; bottom: 0; padding: 4px 6px; font-size: .78rem; color: #fff; overflow: hidden; white-space: nowrap; border-right: 1px solid var(--fl); }
.p-grundlage { background: #2da44e; } .p-aufbau { background: #bf8700; } .p-spitze { background: #cf222e; } .p-tapering { background: #8250df; }
.p-wettkampf { background: #000; } .p-erholung { background: #57606a; } .p-lager { background: #0969da; } .p-erhalt { background: #6e7781; }
.chat { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.blase { padding: 10px 14px; border-radius: 12px; max-width: 92%; } .blase p { margin: 0 0 8px; } .blase p:last-child { margin: 0; }
.blase.user { align-self: flex-end; background: var(--akz); color: var(--akz-tx); }
.blase.assistant { background: var(--fl); border: 1px solid var(--rand); } .blase.auftrag { background: var(--bg); border: 1px dashed var(--rand); color: var(--tx2); }
.blase .meta { font-size: .75rem; opacity: .75; margin-top: 4px; }
.balkenzone { height: 12px; background: var(--akz); border-radius: 3px; display: inline-block; vertical-align: middle; }
.leer { color: var(--tx2); font-style: italic; }
.anmeldung { max-width: 380px; margin: 8vh auto; }
.qr svg { background: #fff; padding: 8px; border-radius: 8px; }