/* ===== Smart Peaks Design-System =====
 *
 * Cockpit-Ausrichtung: Flaechen sind ruhig und deckend, damit Diagramme und
 * Zahlen die einzigen Elemente mit Leuchtkraft bleiben. Alle Farben, Groessen
 * und Abstaende kommen aus dieser Token-Schicht — kein Hex-Wert und keine
 * Schriftgroesse gehoert in eine Komponente. Nur so bleiben Hell- und
 * Dunkelmodus dauerhaft synchron.
 */
:root {
  color-scheme: dark;

  /* --- Flaechen --- */
  --bg: #060911;
  --bg-verlauf-1: rgba(56, 189, 248, .07);
  --bg-verlauf-2: rgba(168, 85, 247, .05);
  --surface: #0e1420;         /* Karten, Panels */
  --surface-2: #151d2c;       /* Kennzahlfelder, Eingaben */
  --surface-3: #1d2739;       /* Hervorgehobenes im Panel */
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .16);

  /* --- Text --- */
  --text: #e8edf7;
  --text-2: #9aa7bd;          /* Beschriftungen, Sekundaertext */
  --text-3: #6b7891;          /* Achsen, Fussnoten */
  --auf-akzent: #04121d;      /* Text auf gefuellten Akzentflaechen */

  /* --- Bedeutungsfarben: fest vergeben, nie fuer etwas anderes --- */
  --fitness: #38bdf8;         /* CTL — Langzeitbelastung */
  --fatigue: #ff8a5b;         /* ATL — Kurzzeitbelastung */
  --form: #fbbf24;            /* TSB — Frische */
  --swim: #22d3ee;
  --bike: #ff8a5b;
  --run: #34d399;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --info: #38bdf8;
  --accent: var(--fitness);
  --accent-purple: #a855f7;
  --border-glow: rgba(56, 189, 248, .3);

  /* --- Schriftgroessen: feste Stufen statt Einzelfallwerte --- */
  --fs-2xs: .68rem;
  --fs-xs: .76rem;
  --fs-sm: .84rem;
  --fs-md: .94rem;
  --fs-lg: 1.06rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 2rem;
  --fs-display: 2.9rem;

  /* --- Raster: alle Abstaende sind Vielfache von 4 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  --karte-innen: var(--sp-5);
  --karte-abstand: 14px;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --nav-h: 64px;
  --glass-blur: blur(16px);
  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.28);
  --schatten-klein: 0 1px 3px rgba(0,0,0,.35);

  /* Altnamen — werden von bestehenden Ansichten und Inline-Stilen genutzt */
  --bg-card: var(--surface);
  --bg-card-2: var(--surface-2);
  --border: var(--line);
  --kante: var(--line);
  --text-muted: var(--text-2);
}

/* Heller Modus: draussen bei Sonnenlicht ist das dunkle Cockpit unlesbar.
   Die Bedeutungsfarben werden abgedunkelt, damit der Kontrast auf Weiss
   erhalten bleibt — Cyan auf Weiss ist sonst nicht mehr zu erkennen. */
:root[data-theme="hell"] {
  color-scheme: light;

  --bg: #f2f5fa;
  --bg-verlauf-1: rgba(2, 132, 199, .07);
  --bg-verlauf-2: rgba(168, 85, 247, .05);
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --surface-3: #e3e9f3;
  --line: rgba(15, 26, 46, .10);
  --line-strong: rgba(15, 26, 46, .20);

  --text: #0f1a2e;
  --text-2: #4f5e78;
  --text-3: #74829a;
  --auf-akzent: #ffffff;

  --fitness: #0284c7;
  --fatigue: #ea580c;
  --form: #b45309;
  --swim: #0891b2;
  --bike: #ea580c;
  --run: #059669;
  --ok: #059669;
  --warn: #b45309;
  --danger: #dc2626;
  --info: #0284c7;

  --schatten: 0 1px 2px rgba(15,26,46,.06), 0 8px 24px rgba(15,26,46,.07);
  --schatten-klein: 0 1px 3px rgba(15,26,46,.08);
}

/* Kompakte Dichte: mehr Kennzahlen je Bildschirm, fuer die Auswertung am
   Rechner. Geaendert werden nur Abstaende — die Schriftgroessen bleiben
   lesbar, sonst wird aus Dichte Unlesbarkeit. */
:root[data-density="kompakt"] {
  --karte-innen: 14px;
  --karte-abstand: 10px;
  --radius: 11px;
  --radius-sm: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  background-image:
    radial-gradient(at 0% 0%, var(--bg-verlauf-1) 0px, transparent 55%),
    radial-gradient(at 100% 100%, var(--bg-verlauf-2) 0px, transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Jeder Messwert wird mit gleich breiten Ziffern gesetzt. Ohne das springen
   Zahlen beim Aktualisieren seitlich weg und der Blick verliert die Spalte. */
.num, .metric .val, .kpi-wert, .done-metric .v, .insp-wert, .peak-watt,
.ziel-zeit, .ziel-gesamt-zeit, .hero-score, .saeule-wert {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ===== Symbolsprache ===== */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -.18em;
}
.ico-lg { width: 1.5em; height: 1.5em; }

h1, h2, h3, .brand-title {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -.02em;
  font-weight: 700;
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-sub {
  font-size: var(--fs-2xs);
  color: var(--text-2);
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ===== Kopfzeile ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-brand { display: flex; align-items: center; gap: var(--sp-3); }
/* Das Logo bringt seine eigene abgerundete Flaeche mit — deshalb kein
   zusaetzlicher Rahmen, nur die passende Rundung, damit die Kanten auf
   hellem Grund nicht hart abschneiden. */
.topbar-brand .logo {
  /* Auf die Hoehe des zweizeiligen Schriftzugs daneben abgestimmt */
  width: 38px; height: 38px;
  border-radius: 10px;
  display: block; flex-shrink: 0;
}

/* Sportmodus-Umschalter in der Kopfzeile */
.mode-switcher-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s, background .18s;
}

.mode-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}

.mode-btn.active {
  background: var(--accent);
  color: var(--auf-akzent);
}

/* ===== Layout ===== */
.layout { display: flex; flex: 1; min-height: 0; }
.content {
  flex: 1;
  padding: var(--sp-4);
  /* Breiter als zuvor: Das Cockpit stellt Kennzahlen nebeneinander, dafuer
     braucht es auf grossen Bildschirmen die dritte und vierte Spalte. */
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: calc(var(--nav-h) + var(--sp-6));
}
@media (min-width: 900px) { .content { padding: var(--sp-5) var(--sp-6); } }
.view { display: none; animation: fadeIn .25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ===== Navigation ===== */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex; justify-content: space-around; align-items: stretch;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  z-index: 60;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  flex: 1; min-width: 0;
  background: none; border: none; color: var(--text-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--fs-2xs); cursor: pointer; transition: color .15s, transform .15s;
  padding: 0 2px;
}
.nav-btn .nav-label {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-btn:active { transform: scale(.94); }
.nav-btn .nav-ico { display: flex; }
.nav-btn .nav-ico .ico { width: 21px; height: 21px; }
.nav-btn.active { color: var(--accent); }
.nav-btn:hover { color: var(--text); }

/* Auf dem Handy passen sieben gleichwertige Reiter nicht in eine Leiste, ohne
   dass Beschriftungen abgeschnitten werden. Vier bleiben sichtbar, der Rest
   zieht in ein Blatt hinter "Mehr" — die Trefferflaechen bleiben so gross. */
.nav-btn[data-nav="sekundaer"] { display: none; }
.nav-mehr { display: flex; }
.nav-btn.mehr-offen { color: var(--accent); }

.nav-sheet {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: flex-end;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nav-sheet.offen { display: flex; }
.nav-sheet-box {
  width: 100%;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--sp-4) var(--sp-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-3));
  box-shadow: var(--schatten);
}
.nav-sheet-griff {
  width: 42px; height: 4px; border-radius: 2px;
  background: var(--line-strong); margin: 0 auto var(--sp-4);
}
.nav-sheet-liste { display: grid; gap: var(--sp-1); }
.nav-sheet-btn {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 48px; padding: 0 var(--sp-3);
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-md); font-family: inherit;
  text-align: left; cursor: pointer;
}
.nav-sheet-btn .ico { color: var(--text-3); width: 21px; height: 21px; }
.nav-sheet-btn:hover { background: var(--surface-2); }
.nav-sheet-btn.active { background: var(--surface-2); color: var(--accent); }
.nav-sheet-btn.active .ico { color: var(--accent); }

/* Desktop: Seitenleiste statt Bodenleiste — dort ist Platz fuer alle Reiter.
 *
 * Die Leiste stand der Datendichte rechts daneben deutlich nach: 12,6 px
 * Beschriftung neben 15 px Fliesstext, 41 px hohe Zeilen neben Karten von
 * mehreren hundert Pixeln. Navigation, die kleiner gesetzt ist als der Inhalt,
 * wirkt wie eine Fussnote. Jetzt traegt sie dasselbe Gewicht wie eine Karte:
 * eigene Flaeche, 48 px hohe Zeilen, Beschriftung auf Fliesstextgroesse.
 */
@media (min-width: 900px) {
  .nav {
    position: sticky; top: 62px; bottom: auto;
    height: calc(100vh - 62px);
    width: 232px;
    flex-direction: column; justify-content: flex-start;
    border-top: none; border-right: 1px solid var(--line);
    padding: var(--sp-4) var(--sp-3); gap: var(--sp-1);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-btn {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 14px;
    min-height: 48px; padding: 0 14px;
    border-radius: var(--radius-sm);
    /* Genau die Groesse des Fliesstextes daneben — kleiner gesetzt wirkt
       Navigation wie eine Randnotiz. */
    font-size: 1rem; font-weight: 500;
    color: color-mix(in srgb, var(--text) 78%, var(--text-2));
    position: relative;
  }
  .nav-btn .nav-ico .ico { width: 22px; height: 22px; }
  .nav-btn[data-nav="sekundaer"] { display: flex; }
  .nav-mehr, .nav-sheet { display: none !important; }

  .nav-btn:hover { background: var(--surface-2); }
  .nav-btn.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    font-weight: 600;
  }
  /* Marke am linken Rand: Der aktive Reiter soll auch dann erkennbar sein,
     wenn die Flaechenfarbe im hellen Modus zurueckhaltend ausfaellt. */
  .nav-btn.active::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
  }

  .content { padding-bottom: var(--sp-6); }
}

/* Sehr breite Bildschirme: Die Leiste darf mitwachsen, aber nicht davonlaufen */
@media (min-width: 1600px) {
  .nav { width: 248px; }
}

/* ===== Karten & Grids ===== */
.card {
  background: var(--surface);
  /* Deckende Flaeche statt Glas: Im Cockpit liegen Diagramme auf den Karten,
     und ein durchscheinender Hintergrund macht duenne Linien unlesbar. */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--karte-innen);
  margin-bottom: var(--karte-abstand);
  box-shadow: var(--schatten);
}
.card > h2 {
  font-size: var(--fs-lg);
  margin-bottom: 2px;
}
.card h2 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
  color: var(--text);
  display: flex; align-items: center; gap: var(--sp-2);
}
/* Das Symbol im Kartenkopf traegt keine eigene Aussage — es ist ein Ankerpunkt
   fuers Auge und bleibt deshalb gedaempft. */
.card h2 > .ico { color: var(--text-3); }

/* Einrichtungs-Hinweis auf dem Dashboard */
.card.onboard {
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(56,189,248,.03));
  border-color: rgba(56,189,248,.35);
}
.onboard-steps { display: flex; flex-direction: column; gap: 4px; }
.onboard-steps > span { display: flex; align-items: center; gap: 8px; }
.onboard-steps .done { color: var(--ok); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--auf-akzent);
  font-size: .7rem; font-weight: 700;
}
.onboard-steps .done .step-num { background: var(--ok); color: #06280f; }
.card h3 { font-size: .85rem; margin: 10px 0 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* 104 px statt 118: In einer schmalen Rasterspalte (~390 px) brachen drei
   Kennzahlen sonst auf zwei plus eine um — zwei oben, eine verloren darunter. */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ===== Kennzahlen ===== */
.metric {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: var(--sp-3); text-align: center;
}
.metric .val { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.metric .lbl {
  font-size: var(--fs-2xs); color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
}
.metric .sub { font-size: var(--fs-xs); color: var(--text-2); }

/* Hinweisblock im Konto-Bereich */
.vault-note {
  margin-top: 14px; padding: 11px 13px;
  background: rgba(56,189,248,.06); border: 1px solid rgba(56,189,248,.22);
  border-radius: 10px; font-size: .78rem; line-height: 1.6; color: var(--text-muted);
}
.vault-note strong { color: var(--text); }

/* ===== Karte "Heute absolviert" ===== */
.done-activity { padding: 10px 0; border-bottom: 1px solid var(--border); }
.done-activity:last-of-type { border-bottom: none; }
.done-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px;
}
.done-metric {
  background: var(--bg-card-2); border-radius: 8px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
}
.done-metric .v { font-size: 1.02rem; font-weight: 700; }
.done-metric .l { font-size: .64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.plan-compare {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(56,189,248,.07); border: 1px solid rgba(56,189,248,.2);
  border-radius: 10px; font-size: .88rem;
}

/* Aktualisieren-Knopf in der Kopfzeile */
.icon-btn {
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer;
  width: 34px; height: 34px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s, background .15s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn.spinning { animation: spin 1s linear infinite; pointer-events: none; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); }

/* Streckenlängen des Zielwettkampfs */
.race-dist {
  display: flex; justify-content: space-around; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: .85rem; font-weight: 600;
}

/* ===== Ringe / Readiness ===== */
.readiness-wrap { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring .ring-txt .big { font-size: 1.6rem; font-weight: 700; }
.ring .ring-txt .small { font-size: .65rem; color: var(--text-muted); }

/* ===== Buttons & Formulare ===== */
.btn {
  background: var(--accent); color: var(--auf-akzent); border: none;
  padding: 9px var(--sp-4); border-radius: var(--radius-sm);
  font-weight: 600; font-size: var(--fs-sm); font-family: inherit;
  cursor: pointer; transition: filter .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.btn-sm { padding: 6px 11px; font-size: var(--fs-xs); }
.btn-danger { background: var(--danger); color: var(--auf-akzent); }

label.field { display: block; margin-bottom: 12px; font-size: .82rem; color: var(--text-muted); }
input, select, textarea {
  width: 100%; margin-top: 4px;
  background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; color: var(--text); font-size: .9rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } }

/* Erklärtext unter einem Eingabefeld — standardmäßig ausgeblendet,
   damit das Formular kompakt bleibt. Schalter oben im Setup blendet ein. */
.field-help { display: none; }
.show-help .field-help {
  display: block;
  font-size: .78rem; color: var(--text-muted); line-height: 1.55;
  margin: -6px 0 14px; padding-left: 10px;
  border-left: 2px solid var(--border);
}
.field-help strong { color: var(--text); font-weight: 600; }

.toggle-help {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--text-muted); cursor: pointer;
}
.toggle-help input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* Formulare lesen sich schmaler besser als über die volle Breite */
#view-settings, #view-athlete { max-width: 880px; }

/* ===================================================================
   Athlet — Wettkampf-Kopf
   ===================================================================
   Der Zielwettkampf ist der Bezugspunkt für Periodisierung, Pacing und
   Verpflegung. Als eine Karte unter vielen ging das unter; hier steht er
   als eigener Block vor allem anderen.
   =================================================================== */

.wk-kopf {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-purple);
  border-radius: var(--radius);
  padding: var(--karte-innen);
  margin-bottom: var(--sp-3);
  box-shadow: var(--schatten);
}
@media (min-width: 700px) { .wk-kopf { grid-template-columns: 1fr auto; align-items: center; } }

.wk-name {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.wk-meta { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.wk-strecken {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 600;
}
.wk-strecken span { display: inline-flex; align-items: center; gap: 6px; }

.wk-zahlen { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.wk-zahl { min-width: 76px; }
.wk-wert {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-xl); font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.wk-lbl {
  font-size: var(--fs-2xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
}

.wk-folgen {
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.wk-folgen strong { color: var(--text); font-weight: 600; }

/* Verweis zwischen den Reitern, im Fließtext */
.link-btn {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

.setup-hinweis {
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
  margin-bottom: var(--karte-abstand);
}

/* Datenschutz-Aufzählung im Setup */
.ds-liste { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.ds-liste li {
  position: relative; padding-left: var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55;
}
.ds-liste li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ok);
}
.ds-liste strong { color: var(--text); }

/* ===== Gesundheitsdialog ===== */
.gesund-wahl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2);
}
.gesund-kachel {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3); min-height: 60px; text-align: left;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-left: 3px solid var(--zustandsfarbe);
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.gesund-kachel:hover { background: var(--surface-3); }
.gesund-kachel.aktiv {
  border-color: var(--accent); border-left-color: var(--zustandsfarbe);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.gesund-name { font-size: var(--fs-sm); font-weight: 700; }
.gesund-dauer { font-size: var(--fs-2xs); color: var(--text-2); }

/* ===== Gesundheitsleiste in der Wochenansicht ===== */
.gesund-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.gesund-leiste.aktiv {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
}
.gesund-leiste-titel {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 600;
}
.gesund-leiste-titel .ico { color: var(--text-3); }
.gesund-leiste.aktiv .gesund-leiste-titel .ico { color: var(--warn); }

/* ===== Ernährung: Anlass ===== */
.nutri-anlass { display: flex; margin-bottom: var(--sp-3); }
.nutri-anlass button { flex: 1; min-height: 40px; }

.nutri-bezug {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--karte-innen);
  margin-bottom: var(--karte-abstand);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-purple);
  border-radius: var(--radius);
}
.nutri-bezug-name {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-lg); font-weight: 700; overflow-wrap: anywhere;
}
.nutri-bezug-hinweis {
  padding: var(--sp-3) var(--karte-innen);
  margin-bottom: var(--karte-abstand);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
}

/* Aufklappbare Detailhilfe (Testprotokolle) */
.help-details {
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.help-details > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--accent);
  list-style: none;
}
.help-details > summary::-webkit-details-marker { display: none; }
.help-details > summary::before { content: "▸ "; }
.help-details[open] > summary::before { content: "▾ "; }
.help-details[open] > summary { margin-bottom: 8px; }
.help-details p { margin-bottom: 7px; line-height: 1.6; }
.help-details p:last-child { margin-bottom: 0; }

/* ===== Pills & Badges ===== */
.pill { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.pill-ok { background: rgba(74, 222, 128, .15); color: var(--ok); }
.pill-off { background: rgba(248, 113, 113, .15); color: var(--danger); }
.pill-warn { background: rgba(250, 204, 21, .15); color: var(--warn); }
.pill-info { background: rgba(56, 189, 248, .15); color: var(--accent); }
.badge-sport { padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 700; }
.badge-swim { background: rgba(56,189,248,.18); color: var(--swim); }
.badge-bike { background: rgba(251,146,60,.18); color: var(--bike); }
.badge-run { background: rgba(74,222,128,.18); color: var(--run); }
.badge-rest { background: rgba(139,151,176,.18); color: var(--text-muted); }
.badge-brick { background: rgba(250,204,21,.18); color: var(--warn); }

/* ===== Wochenplan ===== */
.week-day {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 6px; border-bottom: 1px solid var(--border);
}
.week-day:last-child { border-bottom: none; }
.week-day.today-row { background: rgba(56,189,248,.06); border-radius: 8px; }
.week-day .day-name { width: 52px; flex-shrink: 0; font-weight: 700; font-size: .8rem; padding-top: 2px; }
.week-day .day-name .day-date {
  display: block; font-weight: 400; font-size: .68rem; color: var(--text-muted);
}
.week-day .day-body { flex: 1; min-width: 0; }
.week-day .day-title { font-size: .88rem; font-weight: 600; }
.week-day .day-desc { font-size: .78rem; color: var(--text-muted); }

/* ===== Ziel und aktueller Stand ===== */

.ziel-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.ziel-format { font-weight: 600; font-size: .9rem; }
.ziel-gesamt { text-align: right; }
.ziel-gesamt-zeit {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.ziel-teile, .ziel-vergleich { margin-top: 12px; display: grid; gap: 6px; }

.ziel-zeile { display: flex; align-items: center; gap: 8px; }
.ziel-label { width: 96px; flex-shrink: 0; font-size: .76rem; color: var(--text-muted); }
.ziel-bar-wrap {
  flex: 1; height: 14px; background: var(--surface-3);
  border-radius: 7px; overflow: hidden;
}
.ziel-bar { height: 100%; border-radius: 7px; transition: width .3s ease; }
/* Farben je Disziplin, damit die Zuordnung ohne Legende klappt */
.ziel-bar.bar-swim { background: var(--swim); }
.ziel-bar.bar-bike { background: var(--bike); }
.ziel-bar.bar-run  { background: var(--run); }
.ziel-bar.bar-rest { background: var(--text-muted); }
.ziel-bar.bar-ist  { background: var(--warn); }
.ziel-bar.bar-soll { background: var(--accent); }
.ziel-bar.bar-ok   { background: var(--ok); }
.ziel-zeit {
  width: 74px; text-align: right; flex-shrink: 0;
  font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

.ziel-vergleich { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 12px; }
.ziel-luecke { font-size: .8rem; font-weight: 600; margin-top: 4px; }
.ziel-luecke.gut { color: var(--ok); }
.ziel-luecke.offen { color: var(--warn); }

.ziel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ziel-grid .ziel-feld { margin-bottom: 0; }
.ziel-grid input { margin-top: 2px; }
.ziel-hinweis { display: block; font-size: .7rem; color: var(--text-muted); margin-top: 3px; line-height: 1.3; }
.ziel-summe {
  margin-top: 12px; font-size: .82rem; color: var(--text-muted);
  display: flex; justify-content: space-between; align-items: baseline;
}
.ziel-summe strong {
  font-size: 1.2rem; color: var(--accent); font-variant-numeric: tabular-nums;
}

.trend-block {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  display: grid; gap: 6px;
}
.sparkline { width: 100%; height: 40px; display: block; }

.zonen-vorschau {
  margin-top: 12px; padding: 12px;
  background: var(--bg-card-2); border-radius: 10px;
}
.zonen-bereich {
  margin-left: auto; font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* ===== Workout-Inspector ===== */

.inspector {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 14px; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.inspector-box {
  position: relative; width: 100%; max-width: 780px;
  background: var(--bg-card); border: 1px solid var(--kante);
  border-radius: var(--radius); padding: 22px 20px 26px;
  box-shadow: var(--schatten);
}
.inspector-zu {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--bg-card-2); border: 1px solid var(--kante);
  color: var(--text-muted); font-size: .9rem; cursor: pointer;
}
.inspector-zu:hover { color: var(--text); border-color: var(--accent); }

.insp-kopf { margin-bottom: 16px; padding-right: 42px; }
.insp-kopf h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }

.insp-kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.insp-kennzahl { background: var(--bg-card-2); border-radius: 10px; padding: 12px; }
.insp-wert { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.insp-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.insp-hinweis { font-size: .7rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

.insp-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kante); }
.insp-block h3 {
  font-size: .8rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 10px;
}
.insp-chart { width: 100%; height: 150px; display: block; }
.insp-fuss { margin-top: 22px; }

/* Zonenverteilung */
.zonen-liste { display: grid; gap: 5px; }
.zonen-zeile { display: flex; align-items: center; gap: 8px; font-size: .76rem; }
.zonen-key {
  width: 26px; flex-shrink: 0; text-align: center; border-radius: 5px;
  color: var(--auf-akzent); font-weight: 700; font-size: .66rem; padding: 2px 0;
}
.zonen-name { width: 104px; flex-shrink: 0; color: var(--text-muted); }
.zonen-bar-wrap {
  flex: 1; height: 12px; background: var(--surface-3);
  border-radius: 6px; overflow: hidden; min-width: 40px;
}
.zonen-bar { height: 100%; border-radius: 6px; transition: width .3s ease; }
.zonen-zeit, .zonen-proz {
  flex-shrink: 0; font-variant-numeric: tabular-nums; text-align: right;
}
.zonen-zeit { width: 58px; color: var(--text-muted); }
.zonen-proz { width: 38px; font-weight: 600; }

/* Bestwert-Matrix */
.peak-matrix {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px;
}
.peak-feld { background: var(--bg-card-2); border-radius: 9px; padding: 9px; text-align: center; }
.peak-dauer { font-size: .66rem; color: var(--text-muted); text-transform: uppercase; }
.peak-watt { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.peak-rel { font-size: .64rem; color: var(--text-muted); }

/* Auswaehlbare Einheiten */
.einheit-liste { display: grid; gap: 4px; margin-top: 10px; }
.einheit-zeile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 8px; min-height: 44px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--kante);
  color: var(--text); cursor: pointer; border-radius: 8px;
  transition: background .15s;
}
.einheit-zeile:hover { background: var(--surface-2); }
.einheit-datum { width: 48px; flex-shrink: 0; font-size: .72rem; color: var(--text-muted); }
.einheit-name { flex: 1; min-width: 0; font-size: .82rem; display: flex; align-items: center; gap: 6px; }
.einheit-werte { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.einheit-pfeil { color: var(--text-muted); flex-shrink: 0; }

@media (max-width: 560px) {
  .einheit-werte { display: none; }
  .zonen-name { width: 72px; }
}

/* ===== Anmeldung ===== */

.gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(56,189,248,.10), transparent 60%),
    var(--bg);
  overflow-y: auto;
}
.gate[hidden] { display: none; }

.gate-box {
  width: 100%; max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--schatten);
}

.gate-marke { text-align: center; margin-bottom: 20px; }
.gate-logo {
  width: 72px; height: 72px;
  border-radius: 18px;
  display: block; margin: 0 auto 10px;
}
.gate-marke h1 {
  font-size: 1.15rem; letter-spacing: 3px; color: var(--accent); margin-bottom: 2px;
}

.gate-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: var(--bg-card-2); border-radius: 10px; padding: 4px;
}
.gate-tab {
  flex: 1; padding: 9px 8px; min-height: 40px;
  background: none; border: none; border-radius: 8px;
  color: var(--text-muted); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.gate-tab.active { background: var(--accent); color: var(--auf-akzent); }

.gate-box .field { margin-bottom: 12px; }
/* Der Hinweis unter dem Einladungsfeld muss unabhaengig vom Erklaertext-Schalter
   sichtbar bleiben - ohne ihn ist das Feld nicht selbsterklaerend. */
.field-help-immer {
  display: block; font-size: .72rem; color: var(--text-muted); margin-top: 4px;
}

.gate-btn { width: 100%; justify-content: center; margin-top: 4px; }
.gate-btn:disabled { opacity: .6; cursor: default; }

.gate-fehler {
  background: rgba(248,113,113,.10);
  border: 1px solid rgba(248,113,113,.35);
  color: #f87171;
  border-radius: 9px; padding: 9px 11px; margin-bottom: 12px;
  font-size: .78rem; line-height: 1.5;
}
.gate-fehler[hidden] { display: none; }

.gate-hinweis {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--kante);
  line-height: 1.6;
}

/* ===== Modus-Auswahl ===== */

.modus-wahl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 12px;
}
.modus-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; cursor: pointer;
  background: var(--bg-card-2); color: var(--text);
  border: 1px solid var(--kante); border-radius: 12px;
  transition: border-color .15s, background .15s, transform .15s;
}
.modus-kachel:hover { border-color: var(--accent); }
.modus-kachel:active { transform: scale(.97); }
.modus-kachel.aktiv {
  border-color: var(--accent);
  background: rgba(56,189,248,.12);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.modus-symbol { font-size: 1.5rem; line-height: 1; }
.modus-name { font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.modus-sport { font-size: .7rem; color: var(--text-muted); }

/* Schliessen-Knopf des Einrichtungshinweises */
.card.onboard { position: relative; }
.onboard-zu {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 8px;
  background: none; border: none; color: var(--text-muted);
  font-size: .9rem; cursor: pointer; line-height: 1;
  transition: background .15s, color .15s;
}
.onboard-zu:hover { background: var(--surface-2); color: var(--text); }

/* ===== Wochenbelastung ===== */

.wochen-chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 150px; margin-top: 12px;
}
.wochen-saeule {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end; gap: 2px; min-width: 0;
}
.saeule-wert { font-size: .6rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.saeule-bar {
  width: 100%; background: var(--accent); border-radius: 3px 3px 0 0;
  min-height: 2px; transition: height .3s ease;
}
.saeule-label {
  font-size: .58rem; color: var(--text-muted); white-space: nowrap;
  transform: rotate(-45deg); transform-origin: center; margin-top: 6px;
}

/* ===== Trainingstagebuch ===== */

/* Kurzfassung der eigenen Aufzeichnung, direkt in der Wochenuebersicht */
.day-log-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px;
}
.day-log-summary .log-titel { font-size: .78rem; font-weight: 600; }
.day-log-summary .log-notiz {
  font-size: .74rem; color: var(--text-muted); font-style: italic;
  overflow-wrap: anywhere;
}

.rpe-pill {
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
/* Farbverlauf von ruhig nach fordernd - die Abstufung soll auf einen Blick
   erkennbar sein, ohne die Zahl lesen zu muessen. */
.rpe-pill.rpe-leicht { background: rgba(74,222,128,.16); color: #4ade80; }
.rpe-pill.rpe-mittel { background: rgba(56,189,248,.16); color: #38bdf8; }
.rpe-pill.rpe-hart   { background: rgba(251,146,60,.16); color: #fb923c; }
.rpe-pill.rpe-limit  { background: rgba(248,113,113,.18); color: #f87171; }

details.day-log { margin-top: 8px; }
details.day-log > summary {
  cursor: pointer; font-size: .76rem; color: var(--accent);
  padding: 4px 0; list-style: none; user-select: none;
}
details.day-log > summary::-webkit-details-marker { display: none; }
details.day-log > summary::before { content: "✏️ "; }
details.day-log[open] > summary::before { content: "▾ "; }
details.day-log .field { margin-top: 8px; }

.rpe-wrap { margin-top: 10px; }
.rpe-frage { font-size: .78rem; margin-bottom: 6px; }
.rpe-skala { display: flex; flex-wrap: wrap; gap: 4px; }
.rpe-btn {
  /* 44 px ist die uebliche Mindestgroesse fuer ein Tippziel — darunter trifft
     man auf dem Handy regelmaessig daneben. */
  flex: 1 1 34px; min-width: 34px; min-height: 44px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.rpe-btn:hover { border-color: var(--accent); }
.rpe-btn.aktiv {
  background: var(--accent); border-color: var(--accent); color: var(--auf-akzent);
  transform: translateY(-1px);
}
.rpe-echo { margin-top: 6px; }

/* ===== Chat ===== */
.chat-box {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 300px; max-height: 55vh; overflow-y: auto;
  padding: 4px;
}
.msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
.msg-user { align-self: flex-end; background: var(--accent); color: var(--auf-akzent); border-bottom-right-radius: 4px; }
.msg-ai { align-self: flex-start; background: var(--bg-card-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-ai.thinking { color: var(--text-muted); font-style: italic; }
.chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-input-row textarea { resize: none; height: 48px; margin-top: 0; }

/* ===== Checklisten ===== */
.check-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: .88rem; cursor: pointer; }
.check-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.check-item.done span { text-decoration: line-through; color: var(--text-muted); }
.progressbar { height: 6px; background: var(--bg-card-2); border-radius: 3px; overflow: hidden; margin: 6px 0 10px; }
.progressbar > div { height: 100%; background: var(--ok); transition: width .3s; }

/* ===== Diverses ===== */
.muted { color: var(--text-muted); }
.small { font-size: .78rem; }
.hidden { display: none !important; }
.spacer { height: 8px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.ai-output {
  background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; font-size: .88rem; white-space: pre-wrap; margin-top: 10px;
  max-height: 420px; overflow-y: auto;
}
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 14px; font-size: .72rem; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

.spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid var(--line-strong); border-top-color: currentColor;
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%; transform: translateX(-50%);
  background: var(--bg-card-2); border: 1px solid var(--border);
  padding: 10px 18px; border-radius: 10px; font-size: .85rem; z-index: 100;
  box-shadow: var(--schatten);
  max-width: 90vw;
}
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* ===== Wetter ===== */
.weather-row { display: flex; align-items: center; gap: 14px; }
.weather-temp { font-size: 2rem; font-weight: 700; }
.weather-detail { font-size: .78rem; color: var(--text-muted); }

/* ===== Anpassbare Dashboard-Widgets ===== */

/* ===== Kachelraster =====
 *
 * Die Karten schliessen zeilenweise auf gleicher Hoehe ab. Zuvor stand jede
 * fuer sich (align-items: start), wodurch in einer Zeile eine 180 px hohe
 * neben einer 300 px hohen Karte hing und der Rand ausfranste. Der Inhalt
 * bleibt oben ausgerichtet — gestreckt wird nur die Flaeche.
 */
.widget-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--karte-abstand);
  align-items: stretch;
}
.widget-grid .card {
  margin-bottom: 0;
  display: flex; flex-direction: column;
  min-width: 0;
}
/* Der letzte Block einer Karte darf den Rest der Hoehe fuellen, damit
   Diagramme nicht oben kleben, waehrend unten Leerraum steht. */
.widget-grid .card > .chart-wrap:last-child,
.widget-grid .card > .formchart:last-child { margin-top: auto; }

@media (min-width: 700px) {
  .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Diagramme und Listen brauchen Breite, Statuskarten nicht. */
  .widget-grid .card.widget[data-widget="form"],
  .widget-grid .card.widget[data-widget="done"] {
    grid-column: 1 / -1;
  }
}
/* Drei Spalten erst, wenn eine Spalte noch mindestens ~340 px breit bleibt —
   darunter draengen sich die Kennzahlentrios in den Karten zu eng. */
@media (min-width: 1280px) {
  .widget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .widget-grid .card.widget[data-widget="done"] { grid-column: 1 / -1; }
  /* Die Formkurve belegt zwei Spalten UND zwei Zeilen. Nur ueber zwei Spalten
     bliebe rechts daneben eine hohe Karte und darunter eine einsame kurze —
     so fuellen zwei Statuskarten die Hoehe des Diagramms sauber aus. */
  .widget-grid .card.widget[data-widget="form"] {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Modal: Widget-Konfiguration */
.widget-config-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.widget-config-modal.active { display: flex; }

.widget-config-box {
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  box-shadow: var(--schatten);
}

.widget-config-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.widget-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.widget-config-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.widget-config-icon { font-size: 1.3rem; line-height: 1; }
.widget-config-name { font-size: .88rem; font-weight: 600; }

.widget-config-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.widget-move {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.widget-move:disabled {
  opacity: .25;
  cursor: not-allowed;
}

/* Toggle-Switch fuer Widgets */
.widget-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.widget-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.widget-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: 24px;
  transition: background .2s;
}
.widget-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: var(--text);
  border-radius: 50%;
  transition: transform .2s;
}
.widget-toggle input:checked + .widget-toggle-slider {
  background: var(--accent);
}
.widget-toggle input:checked + .widget-toggle-slider::before {
  transform: translateX(20px);
  background: var(--auf-akzent);
}
.widget-toggle input:focus-visible + .widget-toggle-slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===================================================================
   Cockpit — Kopfbereich der Startseite
   ===================================================================
   Bisher standen Leistungsbereitschaft, heutige Einheit und Wettkampf als
   drei gleichwertige Karten nebeneinander. Das Auge fand keinen Einstieg.
   Der Kopfbereich fasst sie zu einer Einheit zusammen und beantwortet die
   drei Fragen des Morgens in Leserichtung: Wie bin ich drauf? Was steht an?
   Wie lange noch bis zum Rennen?
   =================================================================== */

.cockpit-kopf {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--karte-innen);
  margin-bottom: var(--karte-abstand);
  box-shadow: var(--schatten);
}
@media (min-width: 760px) {
  .cockpit-kopf { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
}

/* --- Leistungsbereitschaft --- */
.hero-bereitschaft {
  display: flex; align-items: center; gap: var(--sp-4);
  min-width: 0;
}
.hero-ring { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.hero-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.hero-ring-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1;
}
.hero-score {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em;
}
.hero-score-max { font-size: var(--fs-2xs); color: var(--text-3); }
.hero-status {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em;
}
.hero-rat { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }

/* Vitalwerte als Zeile: HRV, Schlaf, Ruhepuls mit Abweichung zur Basislinie */
.hero-vitals {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.hero-vital { display: flex; align-items: baseline; gap: 5px; font-size: var(--fs-xs); }
.hero-vital-lbl { color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.hero-vital-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-vital-abw { font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.hero-vital-abw.gut { color: var(--ok); }
.hero-vital-abw.schlecht { color: var(--warn); }

/* --- Heutige Einheit --- */
.hero-einheit {
  min-width: 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .hero-einheit {
    padding: 0 0 0 var(--sp-5);
    border-top: none; border-left: 1px solid var(--line);
  }
}
.hero-eyebrow {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--sp-2);
}
.hero-einheit-titel {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.hero-einheit-desc {
  font-size: var(--fs-sm); color: var(--text-2); margin-top: 3px;
}
.hero-aktionen { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* --- Wettkampf-Countdown --- */
.hero-rennen {
  text-align: left;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .hero-rennen {
    text-align: right; min-width: 150px;
    padding: 0 0 0 var(--sp-5);
    border-top: none; border-left: 1px solid var(--line);
  }
}
.hero-tage {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-display); font-weight: 800;
  line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.hero-tage-lbl {
  font-size: var(--fs-2xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.hero-rennen-name {
  font-size: var(--fs-sm); font-weight: 600; margin-top: var(--sp-2);
  overflow-wrap: anywhere;
}
.hero-rennen-meta { font-size: var(--fs-xs); color: var(--text-2); }

/* ===== Kennzahlen-Leiste =====
   Die sechs Werte, die eine Trainingswoche beschreiben — immer an derselben
   Stelle, immer in derselben Reihenfolge. Wiedererkennbarkeit schlaegt hier
   jede Gestaltung: Der Blick soll den Wert finden, ohne zu lesen. */
.kpi-leiste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--karte-abstand);
}
@media (min-width: 760px) { .kpi-leiste { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.kpi {
  background: var(--surface);
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  min-width: 0;
}
.kpi-lbl {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-wert {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.2; margin-top: 2px;
  display: flex; align-items: baseline; gap: 4px;
}
.kpi-einheit { font-size: var(--fs-2xs); font-weight: 500; color: var(--text-3); }
.kpi-fuss { font-size: var(--fs-2xs); color: var(--text-2); }
.kpi-delta { font-variant-numeric: tabular-nums; }
.kpi-delta.rauf { color: var(--ok); }
.kpi-delta.runter { color: var(--danger); }
.kpi-delta.neutral { color: var(--text-3); }

/* Farbmarke am linken Rand: ordnet den Wert seiner Bedeutungsfarbe zu,
   ohne die Zahl selbst einzufaerben (eingefaerbte Zahlen lesen sich schlechter). */
.kpi[data-ton] { border-left: 3px solid transparent; }
.kpi[data-ton="fitness"] { border-left-color: var(--fitness); }
.kpi[data-ton="fatigue"] { border-left-color: var(--fatigue); }
.kpi[data-ton="form"]    { border-left-color: var(--form); }
.kpi[data-ton="neutral"] { border-left-color: var(--line-strong); }

/* ===== Abschnittsueberschrift zwischen Cockpit-Kopf und Kacheln ===== */
.abschnitt {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.abschnitt h2 {
  font-size: var(--fs-xs); color: var(--text-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap;
}
.abschnitt::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.abschnitt .btn { flex-shrink: 0; }

/* ===================================================================
   Formkurve
   =================================================================== */

.formchart-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-2) 0 var(--sp-3);
}
/* Mit .formchart davor, weil die allgemeinen .segment-Regeln weiter unten
   stehen und bei gleicher Spezifitaet sonst gewinnen. */
.formchart .formchart-zeitraum button { padding: 5px 11px; min-height: 30px; }

.formchart-schalter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; min-height: 32px;
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text-2); font-family: inherit;
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.formchart-schalter:hover { color: var(--text); border-color: var(--accent); }
.formchart-schalter.aktiv {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Am Handy wird getippt statt geklickt — unter 44 px trifft man daneben. */
@media (max-width: 700px) {
  .formchart .formchart-zeitraum button,
  .formchart .formchart-schalter { min-height: 44px; }
  .formchart .formchart-zeitraum { flex: 1; }
  .formchart .formchart-zeitraum button { flex: 1; }
}

.formchart-flaeche { position: relative; }
.formchart-flaeche svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.formchart-treffer { cursor: crosshair; }

/* Werte unter dem Zeiger. Zeigt bewusst alle drei Kurven gleichzeitig — CTL
   allein sagt nichts, erst im Verhaeltnis zu ATL und TSB wird es eine Aussage. */
.formchart-info {
  position: absolute; top: 6px;
  min-width: 152px; padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--schatten);
  font-size: var(--fs-xs);
  pointer-events: none;
  z-index: 2;
}
.formchart-info[hidden] { display: none; }
.formchart-info-kopf {
  font-weight: 700; font-size: var(--fs-2xs); color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 5px;
}
.formchart-info-zeile {
  display: flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.formchart-info-zeile b { margin-left: auto; font-weight: 700; }
.formchart-info-fuss {
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line);
  font-size: var(--fs-2xs); color: var(--text-2);
}

.formchart-fazit {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55;
}
.formchart-fazit strong { color: var(--text); }

/* TSB-Deutungsbaender. Sehr schwach gehalten: Sie sind ein Raster im
   Hintergrund, keine Aussage fuer sich — die Kurven muessen davor lesbar
   bleiben. Im hellen Modus braucht es etwas mehr Deckkraft, sonst
   verschwinden sie auf Weiss. */
:root {
  --tsb-ueber:   rgba(148, 163, 184, .10);
  --tsb-frisch:  rgba( 52, 211, 153, .11);
  --tsb-neutral: transparent;
  --tsb-last:    rgba(251, 191,  36, .09);
  --tsb-risiko:  rgba(248, 113, 113, .12);
}
:root[data-theme="hell"] {
  --tsb-ueber:   rgba(100, 116, 139, .10);
  --tsb-frisch:  rgba(  5, 150, 105, .10);
  --tsb-neutral: transparent;
  --tsb-last:    rgba(180,  83,   9, .09);
  --tsb-risiko:  rgba(220,  38,  38, .10);
}

/* ===================================================================
   Fortschritts-Auswertung
   =================================================================== */

.analyse-fortschritt {
  margin-bottom: var(--karte-abstand);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.analyse-fortschritt[hidden] { display: none; }

/* --- Bestwerttabelle --- */
.bestwerte {
  width: 100%; border-collapse: collapse;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}
.bestwerte th {
  text-align: left; padding: 0 var(--sp-2) var(--sp-2) 0;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
}
.bestwerte td {
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.bestwerte tr:last-child td { border-bottom: none; }
.bw-fenster { color: var(--text-2); white-space: nowrap; }
.bw-wert { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bw-delta, .bw-quelle { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bw-quelle { text-align: right; font-size: var(--fs-xs); }

/* --- Schwellenwerte --- */
.schwelle-vorschlag {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin: var(--sp-2) 0 var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bike);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.schwelle-hinweis {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* --- Intensitätsverteilung --- */
.intens-liste { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.intens-zeile { display: flex; align-items: center; gap: var(--sp-3); }
.intens-name {
  width: 132px; flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 600;
}
.intens-sub {
  display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--text-3);
}
.intens-bar-wrap {
  position: relative; flex: 1; min-width: 60px;
  height: 22px; background: var(--surface-3);
  border-radius: var(--radius-sm); overflow: hidden;
}
.intens-bar { height: 100%; border-radius: var(--radius-sm); transition: width .3s ease; }
/* Zielmarke als senkrechter Strich: Der Abstand des Balkenendes zur Marke ist
   die Aussage — zwei Balken uebereinander waeren schwerer zu vergleichen. */
.intens-ziel {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--text); opacity: .65;
}
.intens-wert {
  width: 74px; flex-shrink: 0; text-align: right;
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.intens-zielwert {
  display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--text-3);
}

@media (max-width: 560px) {
  .intens-name { width: 92px; }
  .intens-sub { display: none; }
}

/* ===================================================================
   Belastungssteuerung
   =================================================================== */

.ampel-felder {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  margin-top: var(--sp-3);
}
@media (min-width: 760px) { .ampel-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ampel-feld {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.ampel-feld[data-ton="ok"]     { border-left-color: var(--ok); }
.ampel-feld[data-ton="info"]   { border-left-color: var(--info); }
.ampel-feld[data-ton="warn"]   { border-left-color: var(--warn); }
.ampel-feld[data-ton="danger"] { border-left-color: var(--danger); }

.ampel-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2);
}
.ampel-titel {
  font-size: var(--fs-2xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.ampel-wert {
  font-family: 'Outfit', sans-serif;
  font-size: var(--fs-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Skala mit gruenem Korridor: Der Wert allein sagt nichts, erst seine Lage
   zum tragfaehigen Bereich macht ihn lesbar. */
.ampel-skala {
  position: relative; height: 6px; margin: var(--sp-2) 0;
  background: var(--surface-3); border-radius: 3px;
}
.ampel-korridor {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: 3px;
}
.ampel-marke {
  position: absolute; top: -3px; width: 3px; height: 12px;
  margin-left: -1.5px;
  background: var(--text); border-radius: 2px;
}
.ampel-erklaerung {
  font-size: var(--fs-2xs); color: var(--text-2); line-height: 1.5;
}

.ampel-hinweise {
  margin: var(--sp-3) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--sp-2);
}
.ampel-hinweise li {
  position: relative; padding-left: var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55;
}
.ampel-hinweise li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-3);
}

/* ===== Konsistenz-Kalender ===== */

/* Fünf Stufen von "nichts" bis "harter Tag". Die unterste Stufe muss sich
   deutlich vom Hintergrund abheben, sonst sieht eine trainingsfreie Woche
   aus wie fehlende Daten. */
:root {
  --heat-0: var(--surface-3);
  --heat-1: color-mix(in srgb, var(--fitness) 28%, var(--surface-3));
  --heat-2: color-mix(in srgb, var(--fitness) 52%, var(--surface-3));
  --heat-3: color-mix(in srgb, var(--fitness) 76%, var(--surface-3));
  --heat-4: var(--fitness);
}

/* Gegen die allgemeine Regel `.chart-wrap svg { width: 100% }`: Die Zellen
   behalten ihre Größe, der Umschlag scrollt. */
.chart-wrap svg.heatmap { width: auto; max-width: none; flex-shrink: 0; }

.heat-legende {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-2xs); color: var(--text-2);
}
.heat-punkt {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.heat-serie { margin-left: auto; }
.heat-serie strong { color: var(--text); }

/* ===================================================================
   Rechtstexte (eigenständige Seiten, ohne Anmeldung erreichbar)
   =================================================================== */

.rechtstext-seite { padding: var(--sp-5) var(--sp-4) var(--sp-6); }

.rechtstext {
  max-width: 760px; margin: 0 auto;
  font-size: var(--fs-md); line-height: 1.7;
}
.rechtstext h1 {
  font-size: var(--fs-2xl); margin-bottom: var(--sp-2);
}
.rechtstext h2 {
  font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-2);
  padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.rechtstext h3 {
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
  margin: var(--sp-4) 0 var(--sp-2);
  text-transform: none; letter-spacing: 0;
}
.rechtstext p { margin-bottom: var(--sp-3); color: var(--text-2); }
.rechtstext p strong, .rechtstext li strong { color: var(--text); font-weight: 600; }
.rechtstext ul { margin: 0 0 var(--sp-3) var(--sp-5); }
.rechtstext li { color: var(--text-2); margin-bottom: 6px; }
.rechtstext a { color: var(--accent); }
.rechtstext code {
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
  font-size: .9em;
}

.rechtstext-zurueck {
  display: inline-block; margin-bottom: var(--sp-5);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.rechtstext-fuss {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.gate-rechtliches {
  text-align: center; margin-top: var(--sp-3);
}
.gate-rechtliches a { color: var(--text-2); }
.gate-rechtliches a:hover { color: var(--accent); }

/* ===== Darstellungs-Umschalter (Kopfzeile & Setup) ===== */
.segment {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px;
}
.segment button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; min-height: 34px;
  background: none; border: none; border-radius: 999px;
  color: var(--text-2); font-family: inherit;
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; transition: color .18s, background .18s;
}
.segment button:hover { color: var(--text); background: var(--surface-3); }
.segment button.aktiv { background: var(--accent); color: var(--auf-akzent); }