/* ============================================
   Trainings-Tagebuch
   Bold / sportlich, dark, eine Akzentfarbe (Volt).
   ============================================ */

:root {
  --bg: #0a0a0b;
  --surface: #141417;
  --surface-2: #1c1c20;
  --border: #2a2a2f;
  --border-strong: #3f3f46;
  --text: #fafafa;
  --text-dim: #a1a1aa;
  --text-faint: #71717a;
  --accent: #c5ff34;
  --accent-press: #b2ee20;
  --accent-soft: rgba(197, 255, 52, 0.12);
  /* Schrift AUF dem Akzent. Muss eine Variable sein: V2/V3 drehen --accent im
     hellen Design auf dunkelgraphit, eine fest verdrahtete dunkle Schrift waere
     dann unlesbar. v2.css ueberschreibt das je Theme. */
  --accent-ink: #0a0a0b;
  --up: #c5ff34;
  --down: #ff4d4f;
  /* Flaechen-Varianten von --up/--down, nach demselben Muster wie --warn.
     Rueckfall fuer V1; v2.css setzt sie je Theme neu. */
  --up-soft: rgba(197, 255, 52, .10);
  --up-line: rgba(197, 255, 52, .28);
  --down-soft: rgba(255, 77, 79, .10);
  --down-line: rgba(255, 77, 79, .28);
  /* Warnfarbe. Aus demselben Grund eine Variable wie --accent-ink: das Gelb
     traegt nur auf dunklem Grund. Auf der hellen Karte kam der Achtung-Kasten
     auf 1,55:1 und war praktisch unlesbar. v2.css dreht die Werte im hellen
     Design auf ein dunkles Bernstein (dort gemessen 5,01:1). */
  --warn: #e8c14d;
  --warn-soft: rgba(232, 193, 77, .08);
  --warn-line: rgba(232, 193, 77, .25);
  /* Leucht-/Schattenfarben als RGB-Tripel, damit jede Stelle ihre eigene
     Deckkraft behaelt und der Farbton trotzdem EINMAL pro Design gesetzt wird.
     Vorher stand rgba(var(--accent-glow-rgb), ...) 17-mal fest im Code und leuchtete auch in
     V2/V3 gruen, wo der Akzent neutralgrau ist. --pr-rgb bleibt der Belohnung
     vorbehalten (Rekorde, voller Ring), --accent-glow-rgb ist alles andere.
     In V1 sind beide identisch, dort IST der Akzent das Limettengruen. */
  --accent-glow-rgb: 197, 255, 52;
  --pr-rgb: 197, 255, 52;
  --radius-xl: 14px;
  --radius-lg: 10px;
  --radius-sm: 8px;
}

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

body {
  font-family: 'Geist', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* ---------- Login ---------- */
.auth-screen {
  /* 100vh ist auf iOS groesser als der sichtbare Bereich (Browser-Leisten
     werden mitgerechnet) -> die Karte rutscht aus dem Bild. dvh misst den
     wirklich sichtbaren Bereich, vh bleibt als Rueckfall fuer alte Browser. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Sicherheitsnetz: nie breiter als der Bildschirm werden. */
  max-width: 100%;
  overflow-x: hidden;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
}

.auth-title {
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.auth-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 4px;
  background: var(--accent);
  border-radius: 4px;
  margin-top: 12px;
}

.auth-sub { color: var(--text-dim); margin-bottom: 24px; }

#loginForm { display: flex; flex-direction: column; gap: 12px; }
#codeForm { display: flex; flex-direction: column; gap: 12px; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px;
  color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-hint { color: var(--text-faint); font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.auth-alt { width: 100%; }
.auth-btn-row { display: flex; gap: 8px; }
.auth-btn-row > * { flex: 1; }
.cf-turnstile { margin: 4px 0; min-height: 65px; }

.login-msg { margin-top: 12px; font-size: 13px; color: var(--text-dim); min-height: 18px; }
.login-msg.success { color: var(--accent); }
.login-msg.error { color: var(--down); }
.auth-legal { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; font-size: 12px; }
.auth-legal a { color: var(--text-faint); text-decoration: none; }
.auth-legal a:hover { color: var(--text-dim); }
.auth-legal span { color: var(--border-strong); }

/* ---------- Layout ---------- */
.container { max-width: 960px; margin: 0 auto; padding: 24px 16px 56px; }

header { margin-bottom: 24px; }
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: nowrap;
}
header h1 {
  font-size: 18px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
header h1 span { color: var(--accent); }

.account { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; }
.account .icon-btn { flex: 0 0 auto; }   /* Zahnrad nie wegschieben */
/* Konto-Aktionen (Feedback / Abmelden) unter Einstellungen -> Profil */
.account-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.account-actions .btn-ghost { width: 100%; min-height: 44px; }
.feedback-area { width: 100%; margin: 4px 0 8px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-family: inherit;
  font-size: 14px; resize: vertical; }
.feedback-area:focus { outline: none; border-color: var(--accent); }
.user-email { color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.icon-btn {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 50%; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 18px; height: 18px; }
/* Trefferflaeche auf 44px, ohne den Knopf optisch groesser zu machen.
   Der sichtbare Kreis bleibt 36px, die Hitbox waechst per Pseudo-Element. */
.icon-btn { position: relative; }
.icon-btn::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* Auf schmalen Geraeten hat der Name neben drei Symbolen keinen Platz mehr und
   der Titel wuerde abgeschnitten. Der Name steht ohnehin in den Einstellungen. */
@media (max-width: 430px) {
  .user-email { display: none; }
}
/* Theme-Button: Mond bei Dunkel, Sonne bei Hell */
#themeBtn .theme-ic-sun { display: none; }
body.theme-light #themeBtn .theme-ic-moon { display: none; }
body.theme-light #themeBtn .theme-ic-sun { display: block; }

/* ---------- Stats ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px;
}
.stat-card h3 {
  font-size: 11px; font-weight: 600; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}
.stat-card .value {
  font-size: 34px; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Tabs ---------- */
/* Sticky Menuebalken oben, auch am Desktop (wie am Handy). */
.tabs {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;   /* K1: zentriert -> Workout (Mitte) in Bildschirmmitte */
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  margin-bottom: 0; padding: 12px 0;   /* K4: Abstand kommt von den schwebenden Dots */
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  position: relative;   /* K2: Hitbox-Pseudo verankern */
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
}
.tab-btn svg { width: 14px; height: 14px; flex: none; }
.tab-btn:hover { color: var(--text); border-color: var(--border-strong); }
.tab-btn.active {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

/* C2: Workout als dominanter Reiter (groesser + Icon, immer der Primaer-Tab) */
.tab-btn.tab-workout { padding: 9px 18px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tab-btn.tab-workout svg { width: 15px; height: 15px; flex: none; }
.tab-btn.tab-workout:not(.active) { color: var(--accent); border-color: var(--accent); }

/* C1/K4: Positions-Indikator, schwebt mittig im Leerraum zwischen Leiste und Inhalt */
.nav-dots { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 30px; padding: 12px 0 16px; }
.nav-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong); transition: background .2s ease, transform .2s ease; }
.nav-dot.on { background: var(--accent); transform: scale(1.35); }

.tab-content { display: none; }
.tab-content.active { display: block; }
/* K6: kurze Slide-Einblendung beim Reiterwechsel (App-Feel) */
@keyframes tcIn { from { opacity: .4; transform: translateX(var(--tc-from, 10px)); } to { opacity: 1; transform: none; } }
.tab-content.active.tc-anim { animation: tcIn .2s ease; }
@media (prefers-reduced-motion: reduce) { .tab-content.active.tc-anim { animation: none; } }
/* K8: Datum-Schnellwahl im Tracking (letzte 7 Tage, scrollbar) */
.date-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.date-row input[type="date"] { flex: 1 1 130px; min-width: 120px; }
.date-chips-row { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; flex: 0 0 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.date-chips-row::-webkit-scrollbar { display: none; }
.date-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.date-chip:hover { border-color: var(--border-strong); }
.date-chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* C4: Streak-Karte + Flamme (waechst mit der Serie) */
.streak-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px 18px; margin-bottom: 16px; }
.streak-flame { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; transform-origin: center bottom; }
.streak-flame svg { width: 30px; height: 30px; }
.streak-flame svg path { fill: var(--border-strong); }
.streak-flame.lit svg path { fill: var(--accent); }
.streak-flame.lit { filter: drop-shadow(0 0 7px var(--accent-soft)); }
.streak-body { min-width: 0; }
.streak-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.streak-num span { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.streak-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.streak-risk { font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.5; }
.streak-freeze-btn { display: inline-block; margin-top: 6px; min-height: 40px; padding: 8px 12px; cursor: pointer; background: var(--accent); color: var(--accent-ink); border: none; border-radius: var(--radius-sm); font-family: inherit; font-weight: 800; font-size: 12px; }
.streak-freeze-btn:hover { background: var(--accent-press); }

/* C3: Sauna-Sheet am Workout-Ende */
.sauna-sheet-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.sauna-sheet { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
.sauna-sheet-q { font-size: 16px; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 14px; }
.sauna-sheet-btns { display: flex; gap: 10px; }
.sauna-sheet-btns .btn-primary, .sauna-sheet-btns .btn-ghost { flex: 1; min-height: 48px; }
.sauna-sheet-off { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 14px; min-height: 44px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.sauna-sheet-off input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Toggle-Zeile in Einstellungen */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--text); }
.toggle-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* C3: Sauna-Auswertung im Tracking */
.sauna-summary { display: flex; align-items: center; gap: 12px; }
.sauna-badge { font-size: 20px; font-weight: 800; color: var(--accent); flex: none; }
.sauna-txt { font-size: 13px; color: var(--text-dim); line-height: 1.4; }

/* C6: Muskel-Heatmap (Bodymap) */
.bm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.bm-title { font-size: 15px; font-weight: 800; color: var(--text); }
.bm-toggle { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex: none; }
/* #53: Zeitraum-Pillen in eigener Zeile, 44px hoch, aktive Pille neutral-dunkel
   (NIE gruen, das gehoert den Rekorden). */
.bm-ranges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin: 10px 0 4px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; }
.bm-range-btn { min-height: 44px; padding: 0 4px; cursor: pointer; background: transparent;
  border: none; border-radius: 999px; color: var(--text-dim);
  font-family: inherit; font-weight: 700; font-size: 12px; transition: background .15s, color .15s; }
.bm-range-btn:hover { color: var(--text); }
.bm-range-btn.active { background: var(--text); color: var(--bg); }
.bm-range-jump { display: block; width: 100%; min-height: 44px; margin-top: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-weight: 700; font-size: 12px; }
.bm-range-jump:hover { border-color: var(--text-dim); }

.bm-toggle-btn { position: relative; min-height: 32px; padding: 4px 12px; cursor: pointer; background: transparent; border: none; border-radius: 999px; color: var(--text-dim); font-family: inherit; font-weight: 700; font-size: 12px; }
.bm-toggle-btn::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.bm-toggle-btn.active { background: var(--accent); color: var(--accent-ink); }
.bm-sub { font-size: 12px; margin: 0 0 10px; }
.bm-bodies { display: flex; gap: 8px; justify-content: center; }
.bm-body { flex: 1; max-width: 160px; text-align: center; }
.bm-view-lbl { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bm-svg { width: 100%; height: auto; display: block; }
.bm-svg .bm-neutral { fill: var(--surface-2); }
.bm-svg [data-bm] { fill: var(--surface-2); stroke: var(--bg); stroke-width: 0.6; transition: fill .25s ease; }
.bm-legend { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--text-faint); }
.bm-legend-dot { width: 14px; height: 8px; border-radius: 3px; display: inline-block; }
.bm-hint { font-size: 12px; margin-top: 10px; text-align: center; }
.bm-highlight { display: flex; gap: 8px; justify-content: center; }
.bm-highlight .bm-svg { max-width: 110px; }

/* ---------- Forms ---------- */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 16px;
}
.form-section h2 {
  font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.form-group { margin-bottom: 16px; }
.form-group label, .form-group .form-label, .label-strong {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}

input, select, textarea {
  width: 100%; padding: 11px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  /* 16px verhindert das automatische Reinzoomen von iOS Safari beim Fokus */
  font-size: 16px; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
}
textarea { resize: vertical; }

.last-hint {
  margin-top: 8px; font-size: 12px; color: var(--accent);
  font-family: 'Geist Mono', monospace;
}

/* ---------- Sets ---------- */
.set-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 8px;
  margin-bottom: 8px; align-items: start;
}
.reps-container { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-field { width: 64px; text-align: center; padding: 11px 8px; }

/* ---------- Buttons ---------- */
.form-actions { display: flex; gap: 10px; align-items: center; }
.form-actions .btn-primary { flex: 1; }

.btn-primary {
  width: 100%; padding: 12px 16px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  font-family: inherit; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: background .15s, transform .1s;
}
.btn-primary:hover { background: var(--accent-press); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  padding: 9px 14px; background: transparent;
  border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }

.delete-btn, .edit-btn {
  padding: 6px 12px; background: transparent;
  border: 1px solid var(--border); color: var(--text-faint);
  font-family: inherit; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: color .15s, border-color .15s;
}
.delete-btn:hover { color: var(--down); border-color: var(--down); }
.edit-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Uebersicht ---------- */
.overview-group { margin-bottom: 28px; }
.overview-group:last-child { margin-bottom: 0; }
.overview-day {
  font-size: 12px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.overview-day-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.day-start-btn { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font-family: inherit; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; }
.day-start-btn:active { background: var(--accent-press); }
.exercise-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.exercise-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.exercise-card:hover { border-color: var(--accent); background: var(--surface-2); }
.ex-icon {
  flex-shrink: 0; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--accent); background: var(--accent-soft);
}
.ex-icon svg { width: 30px; height: 30px; }
.ex-body h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ex-muscle {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); border: 1px solid var(--border);
  background: var(--accent-soft);
  padding: 2px 8px; border-radius: 999px; margin-bottom: 8px;
}
.ex-note { font-size: 12px; color: var(--text-faint); line-height: 1.5; }

/* ---------- History ---------- */
.history-list, .progress-list { display: flex; flex-direction: column; gap: 12px; }
.history-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
}
.history-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.history-date { font-size: 14px; font-weight: 800; text-transform: capitalize; }

.workout-exercises { display: flex; flex-direction: column; gap: 12px; }
.workout-exercise {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px;
}
.we-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px;
}
.we-head h4 { font-size: 13px; font-weight: 700; }
.workout-sets { display: flex; flex-wrap: wrap; gap: 6px; }
.workout-set {
  background: var(--bg); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-family: 'Geist Mono', monospace;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.workout-note { margin-top: 10px; color: var(--text-faint); font-size: 12px; }

/* ---------- Progress + Chart ---------- */
.progress-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
}
.progress-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px;
}
.progress-head h4 { font-size: 14px; font-weight: 700; }
.trend {
  font-size: 12px; font-weight: 800; font-family: 'Geist Mono', monospace;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
}
.trend-up { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.trend-down { color: var(--down); border-color: var(--down); }
.trend-flat { color: var(--text-faint); }

.progress-main { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.progress-weight {
  font-size: 30px; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.progress-date { font-size: 12px; color: var(--text-faint); }

.progress-chart { width: 100%; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--accent-soft); }
.chart-dots circle { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.lc-wrap { width: 100%; }
.lc-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; pointer-events: none; }
.lc-hit { fill: transparent; cursor: pointer; }
.lc-ylabel { font-size: 9px; fill: var(--text-faint); font-family: 'Geist Mono', monospace; }
.lc-tip { font-size: 11px; color: var(--text-faint); text-align: center; margin: 4px 0 0; min-height: 16px; }
.lc-tip.visible { color: var(--accent); font-weight: 600; }
.wt-chart { margin-top: 12px; }
.chart-empty {
  font-size: 12px; color: var(--text-faint); font-family: 'Geist Mono', monospace;
  padding: 8px 0;
}

/* ---------- Weight ---------- */
.weight-history { display: flex; flex-direction: column; gap: 8px; }
.weight-entry {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.weight-value {
  font-size: 18px; font-weight: 800; font-family: 'Geist Mono', monospace;
  margin-left: auto; font-variant-numeric: tabular-nums;
}

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 48px 16px; color: var(--text-faint); }
.empty-state h3 {
  font-size: 15px; font-weight: 800; color: var(--text-dim); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.muted { color: var(--text-dim); margin-bottom: 16px; }
/* Erklaerung direkt unter dem Titel: praktisch keine Leerzeile dazwischen.
   Gilt app-weit, ohne :has (breite Browser-Unterstuetzung).
   Titelabstaende sind 18px, daher -16px Top -> ~2px Rest. */
.form-section h2 + .muted,
.report-block-head + .muted,
.sec-head-row + .muted {
  margin-top: -16px;
}
.import-block { margin-top: 24px; }
.file-input { padding: 9px; font-size: 13px; }

/* Tagesvolumen im Verlauf */
.day-volume {
  display: inline-block; margin-left: 10px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: none; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Persoenlicher Rekord im Fortschritt */
.progress-pr {
  margin-left: auto;
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Ziel-Einstellung */
.goal-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.goal-input { width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.goal-select { width: auto; min-width: 110px; }
.goal-x { font-size: 13px; color: var(--text-dim); }
.goal-row .btn-primary { width: auto; }

/* ---------- Uebungsverwaltung ---------- */
.exercise-manager { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ex-manage-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 14px;
}
.ex-manage-icon {
  width: 34px; height: 34px; flex-shrink: 0; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.ex-manage-icon svg { width: 24px; height: 24px; }
.ex-manage-info { flex: 1; min-width: 0; }
.ex-manage-info h4 { font-size: 14px; font-weight: 700; color: var(--text); }
.ex-manage-info span { font-size: 12px; color: var(--text-faint); }
.ex-manage-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.exercise-editor {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 16px; margin-top: 16px;
}

.icon-picker {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.icon-choice {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer;
  transition: all 0.15s ease;
}
.icon-choice svg { width: 22px; height: 22px; }
.icon-choice:hover { border-color: var(--border-strong); color: var(--text); }
.icon-choice.selected {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* ---------- Auf-Kurs-Banner (Segment-Gauge) ---------- */
.coach-banner {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 18px 20px; margin-bottom: 20px; background: var(--surface);
  display: flex; flex-direction: column; gap: 16px;
}
.coach-banner:empty { display: none; }
.coach-info { display: flex; align-items: center; gap: 16px; }
.coach-count {
  display: flex; align-items: baseline; gap: 4px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.coach-done {
  font-size: 46px; font-weight: 800; letter-spacing: -0.04em; color: var(--accent);
}
.coach-goal { font-size: 18px; font-weight: 700; color: var(--text-faint); }
.coach-copy { display: flex; flex-direction: column; gap: 2px; }
.coach-head {
  font-size: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text);
}
.coach-sub { font-size: 13px; color: var(--text-dim); }

.coach-segs { display: flex; gap: 6px; }
.coach-seg {
  flex: 1; height: 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
/* #57: Leuchten entfernt. Der Wert war fest verdrahtetes Lime, ignorierte also
   sogar den eigenen Token - und bei erfuelltem Ziel leuchteten drei bis fuenf
   Segmente gleichzeitig gruen. Gruen ist im Projekt allein den Rekorden
   vorbehalten, hoechstens zwei Elemente pro Bildschirm. */
.coach-seg.filled {
  background: var(--accent); border-color: var(--accent);
  animation: segPop .35s ease both;
  animation-delay: calc(var(--i) * 70ms);
}
/* Zugabe jenseits des Ziels: schraffiert, niedriger und durch eine Luecke
   abgesetzt. Der Blick liest "darueber hinaus" statt "hoehere Stufe" - das
   Uebertreffen wird sichtbar, ohne eine neue Messlatte zu setzen.
   opacity:.5 ist bewusst raus, das war im dunklen Design eine Kontrastfalle. */
.coach-seg.extra {
  align-self: center; height: 8px; opacity: 1;
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(115deg,
    var(--accent) 0 3px, transparent 3px 7px);
  border-color: var(--border);
}
.coach-seg:not(.extra) + .coach-seg.extra { margin-left: 6px; }
@keyframes segPop {
  0% { transform: scaleX(.2); opacity: 0; transform-origin: left; }
  100% { transform: scaleX(1); opacity: 1; }
}
.coach-banner.done { border-color: var(--accent); }
.coach-banner.done::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, var(--accent-soft), transparent 60%);
}

/* ---------- Report One-Pager ---------- */
.report-head, .report-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.report-block-head { margin-bottom: 14px; }
.report-range, .report-block-head .muted {
  font-size: 12px; color: var(--text-faint);
  font-family: 'Geist Mono', monospace;
}
.report-top {
  display: grid; grid-template-columns: auto auto 1fr; gap: 24px; align-items: center;
}
.report-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.report-ringcap, .power-cap {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ring { width: 116px; height: 116px; }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.ring-prog {
  fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(var(--accent-glow-rgb), 0.5));
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}
.ring-pct {
  fill: var(--text); font-size: 26px; font-weight: 800;
  text-anchor: middle; font-family: 'Geist', sans-serif;
}
.ring-cap {
  fill: var(--text-faint); font-size: 13px; font-weight: 600;
  text-anchor: middle; font-family: 'Geist Mono', monospace;
}
/* Spannungs-Anzeige: Volumen vs. eigener Schnitt */
.report-power {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--bg);
}
.power-icon { width: 38px; height: 38px; color: var(--text-faint); transition: color .2s, filter .2s; }
.power-icon svg { width: 38px; height: 38px; }
.power-word {
  font-size: 13px; font-weight: 800; color: var(--text); line-height: 1;
}
.report-power.high .power-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(var(--accent-glow-rgb), 0.6));
  animation: boltPulse 1.8s ease-in-out infinite;
}
.report-power.high { border-color: var(--accent); }
.report-power.high .power-word { color: var(--accent); }
.report-power.mid .power-icon { color: var(--text-dim); }
.report-power.low .power-icon { color: var(--text-faint); opacity: .6; }
.report-power.low .power-word { color: var(--text-dim); }
@keyframes boltPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.report-kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.kpi {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-label {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.kpi-value {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.kpi-sub { font-size: 11px; color: var(--text-faint); }

/* ---------- Neue Rekorde ---------- */
.report-records { margin-top: 18px; }
.report-records:empty { display: none; }
.rec-head { margin-bottom: 10px; }
.rec-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rec-flag svg { width: 16px; height: 16px; }
.rec-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.rec-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--accent); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 14px rgba(var(--accent-glow-rgb), 0.12);
}
.rec-badge {
  font-size: 9px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.rec-ex { font-size: 13px; font-weight: 700; color: var(--text); }
.rec-val {
  font-size: 20px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.rec-reps { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.rec-date {
  font-size: 11px; color: var(--text-faint);
  font-family: 'Geist Mono', monospace;
}

/* ---------- Periodenbewertung (Woche/Monat/Jahr) ---------- */
.report-periods { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.report-periods:empty { display: none; }
.prd {
  padding: 14px 16px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-left: 3px solid var(--border-strong);
}
.prd.high { border-left-color: var(--accent); }
.prd.mid { border-left-color: var(--text-dim); }
.prd.low { border-left-color: var(--text-faint); }
.prd-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.prd-label {
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.prd-state { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.prd.high .prd-state { color: var(--accent); }
.prd-main { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.prd-vol {
  font-size: 24px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.prd-diff { font-size: 12px; color: var(--text-faint); font-family: 'Geist Mono', monospace; }

/* ---------- Momentum-Kurve ---------- */
.momentum { width: 100%; }
.momentum-chart { width: 100%; height: 160px; display: block; overflow: hidden; }
.mom-area { fill: url(#momGrad); }
.mom-g0 { stop-color: rgba(var(--accent-glow-rgb), 0.28); }
.mom-gm { stop-color: rgba(var(--accent-glow-rgb), 0.06); }
.mom-g1 { stop-color: rgba(var(--accent-glow-rgb), 0); }
.mom-line {
  stroke: var(--accent); stroke-width: 2;
  vector-effect: non-scaling-stroke;          /* konstante Strichbreite trotz preserveAspectRatio none */
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 1px 6px rgba(var(--accent-glow-rgb), 0.25));
}
.mom-base { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mom-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
/* Datums-Achse als HTML unter dem Chart: scharf, Start links / Mitte / Ende rechts */
.mom-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 0 2px; transition: opacity .15s; }
.mom-x { font-size: 10px; color: var(--text-faint); font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.mom-axis .mom-x:first-child { text-align: left; }
.mom-axis .mom-x:nth-child(2) { text-align: center; }
.mom-axis .mom-x:last-child { text-align: right; }
/* Wert-Readout im Kopf (rechtsbuendig): aktuelles Volumen + Zeitfenster */
#momentumSub { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mom-read { font-size: 20px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.mom-unit { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-left: 3px; }
.mom-range { font-size: 11px; color: var(--text-faint); font-family: 'Geist Mono', monospace; }

/* ---------- Ladezustand-Hero (Motivation) ---------- */
.charge { transition: border-color .2s; }
.charge.high { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), 0 0 24px rgba(var(--accent-glow-rgb), .12); }
.charge-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.charge-bolt { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); }
.charge.high .charge-bolt { color: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-glow-rgb), .6)); animation: chargePulse 1.6s ease-in-out infinite; }
.charge.mid .charge-bolt { color: var(--text-dim); }
@keyframes chargePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }
.charge-bolt svg { width: 30px; height: 30px; }
.charge-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.charge-word { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.charge.high .charge-word { color: var(--accent); }
.charge-sub { font-size: 12px; color: var(--text-dim); }
.charge-pct { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.charge.high .charge-pct { color: var(--accent); }
.charge-bar { position: relative; height: 14px; border-radius: 99px; background: var(--surface-2);
  overflow: hidden; border: 1px solid var(--border); }
.charge-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text-dim);
  border-radius: 99px; transition: width .4s ease; }
.charge.high .charge-fill { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-glow-rgb), .6); }
.charge.mid .charge-fill { background: var(--text-dim); }
.charge.low .charge-fill { background: var(--text-faint); }
.charge-over { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: var(--accent);
  box-shadow: 0 0 12px 2px rgba(var(--accent-glow-rgb), .8); }
.charge-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--text-faint); }
.charge-foot b { color: var(--text); font-weight: 700; }

/* ---------- Momentum: schwebende Rekorde + Gesten ---------- */
.momentum-block { position: relative; }
.momentum-records { display: flex; gap: 8px; overflow-x: auto;
  padding: 8px 4px 12px; margin-bottom: 6px; scrollbar-width: none;
  touch-action: pan-x; overscroll-behavior-x: contain; }
.momentum-records::-webkit-scrollbar { display: none; }
.momentum-records::after { content: ''; flex: 0 0 4px; }
.mom-rec { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 8px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.mom-rec.top { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 1px var(--accent-soft); }
.mr-badge { font-size: 8px; font-weight: 800; letter-spacing: .12em; color: var(--text-faint); }
.mom-rec.top .mr-badge { color: var(--accent); }
.mr-ex { font-size: 12px; font-weight: 700; white-space: nowrap; }
.mr-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mr-date { font-size: 9px; color: var(--text-faint); font-family: 'Geist Mono', monospace; }
.momentum { touch-action: pan-y; cursor: grab; position: relative; }
.momentum:active { cursor: grabbing; }
/* Last-Value-Pille am rechten Rand auf Hoehe des letzten Punkts, nur waehrend der Geste */
.mom-pill { position: absolute; right: 4px; transform: translateY(-50%); z-index: 2;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800;
  font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 999px;
  pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.mom-pill-u { font-weight: 700; margin-left: 1px; }
.momentum.is-panning .mom-pill { opacity: 1; }
.momentum.is-panning .mom-zoom { will-change: transform; }
.momentum.is-panning .mom-line { filter: drop-shadow(0 1px 8px rgba(var(--accent-glow-rgb), .4)); }
.momentum.is-panning .mom-axis { opacity: 0; }
.mom-zoom-hint { font-size: 10px; color: var(--text-faint); text-align: center; margin-top: 8px;
  text-transform: uppercase; letter-spacing: .05em;
  opacity: 0; transition: opacity .4s; pointer-events: none; }
.mom-zoom-hint.show { opacity: 1; }
.mom-zoom-hint.fade { opacity: 0; }

/* AE2: Momentum-Uebersichts-Streifen (Brush) */
.mom-overview { position: relative; width: 100%; height: 38px; margin-top: 8px; touch-action: none; -webkit-user-select: none; user-select: none; }
.mom-ov-spark { width: 100%; height: 100%; display: block; }
.mom-ov-area { fill: var(--surface-2); }
.mom-ov-line { stroke: var(--text-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mom-ov-window { position: absolute; top: 0; bottom: 0; background: rgba(var(--accent-glow-rgb), .12);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); cursor: grab; box-sizing: border-box; }
.mom-ov-window:active { cursor: grabbing; }
.mom-ov-handle { position: absolute; top: 0; bottom: 0; width: 16px; cursor: col-resize; }
.mom-ov-handle.l { left: -8px; }
.mom-ov-handle.r { right: -8px; }

/* ---------- Timeline (Volumen, Auto-Zoom) ---------- */
.timeline-crumbs { display: flex; align-items: center; gap: 6px; }
.crumb, .crumb-nav {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  border-radius: var(--radius-sm); padding: 5px 10px;
  transition: color .15s, border-color .15s;
}
.crumb:hover, .crumb-nav:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.crumb.cur { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); cursor: default; }
.crumb-nav:disabled { opacity: .35; cursor: not-allowed; }
.crumb-nav { padding: 5px 10px; line-height: 1; }
.crumb-sep { color: var(--text-faint); }

.vbars {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; align-items: end; height: 200px;
}
.vbars.dense { gap: 3px; }
.vbar {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; justify-content: flex-end;
}
.vbar.clickable { cursor: pointer; }
.vbar-track {
  width: 100%; flex: 1; display: flex; align-items: flex-end;
  border-radius: 8px 8px 0 0; overflow: hidden;
}
.vbar-fill {
  width: 100%; background: var(--surface-2); border-radius: 8px 8px 2px 2px;
  transition: height .5s cubic-bezier(.4,0,.2,1), background .15s;
}
.vbar.active .vbar-fill {
  background: linear-gradient(180deg, var(--accent), var(--accent-press));
  box-shadow: 0 0 10px rgba(var(--accent-glow-rgb), 0.35);
}
.vbar.clickable:hover .vbar-fill { background: var(--accent); }
.vbar-label {
  font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  font-family: 'Geist Mono', monospace; white-space: nowrap;
}
.vbars.dense .vbar-label { font-size: 8px; }

.day-summary {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px;
  padding: 14px 16px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-dim);
}
.day-summary b { color: var(--accent); font-size: 16px; font-variant-numeric: tabular-nums; }

.timeline-detail { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.day-ex {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
}
.day-ex-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px;
}
.day-ex-head h4 { font-size: 13px; font-weight: 700; }
.day-ex-sets { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-set {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-family: 'Geist Mono', monospace;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.day-ex-note { margin-top: 10px; color: var(--text-faint); font-size: 12px; }
.day-del { margin-top: 4px; align-self: flex-start; }
.day-del:hover { color: var(--down); border-color: var(--down); }

/* ---------- Tracking-Grid + Wochen-Korrektur ---------- */
.track-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.track-grid .form-group { margin-bottom: 0; }

.week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.week-nav-btn { min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.week-nav-btn:hover:not(:disabled) { border-color: var(--border-strong); }
.week-nav-btn:disabled { opacity: 0.3; cursor: default; }
.week-nav-label { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.week-nav-rel { font-weight: 600; font-size: 14px; }
.week-nav-dates { font-size: 11px; color: var(--text-dim); font-weight: 500; white-space: nowrap; }
.week-today-btn { min-height: 44px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.week-today-btn:hover { background: var(--accent-soft); }

.week-grid {
  display: grid; grid-template-columns: auto repeat(var(--cols, 7), 1fr);
  gap: 2px; align-items: stretch;
}
.wg-corner { }
.wg-dayhead {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding-bottom: 6px;
}
.wg-wd {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.wg-dd { font-size: 12px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.wg-rowlabel {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 11px; font-weight: 700; padding: 6px 7px; line-height: 1.15;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
.wg-rowlabel:hover { color: var(--accent); border-color: var(--accent); }
.wg-unit { font-size: 9px; font-weight: 500; color: var(--text-faint); }
.wg-cell {
  width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px;
  padding: 8px 1px; text-align: center; font-size: 16px; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; border-radius: var(--radius-sm);
  -moz-appearance: textfield; appearance: textfield;   /* Spinner-Pfeile weg -> Zahl passt in schmale Zelle */
}
.wg-cell::-webkit-inner-spin-button,
.wg-cell::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Funfact C: ein Fakt gross, zum Durchblaettern ===== */
.ff-card { min-height: 176px; padding: 4px 0 2px; cursor: pointer; }
.ff-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.ff-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ff-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.ff-dots { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.ff-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); display: block; }
.ff-dots i.on { background: var(--text); }
.ff-sentence { min-height: 92px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.ff-big { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums; vertical-align: -2px; }
.ff-big.pr { color: var(--pr, var(--up)); }
.ff-unit { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.ff-spark { display: block; width: 100%; height: 30px; margin-top: 10px; }
.ff-spark path { stroke: var(--text-dim); stroke-width: 1.6; }
.ff-spark circle { fill: var(--text); }
.ff-sparklbl { font-size: 10px; color: var(--text-faint); }
.ff-empty .ff-sentence { min-height: 0; margin-top: 8px; }

/* ===== Muster in deinen Daten ===== */
/* Kein Gruen: die Belohnungsfarbe gehoert ausschliesslich den Rekorden. */
.pat-card { padding: 14px 0; border-top: 1px solid var(--border); }
.pat-card:first-child { border-top: 0; padding-top: 0; }
.pat-sentence { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-dim); }
.pat-sentence b { color: var(--text); font-weight: 700; }
.pat-n { margin: 8px 0 0; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pat-note { margin: 4px 0 0; font-size: 11px; color: var(--text-faint); }

/* ===== Wochenuebersicht als Ausklapp unter dem Trainingsvolumen ===== */
.an-weeknow { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.wn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wn-lbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.wn-running { font-size: 10px; font-weight: 600; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; }
.wn-row { display: flex; gap: 8px; }
.wn-cell { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wn-cell b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums; }
.wn-cell i { font-size: 10px; font-style: normal; color: var(--text-faint); }

.an-disc-btn {
  width: 100%; min-height: 48px; margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600;
}
.an-disc-btn:hover { color: var(--text); border-color: var(--border-strong); }
.an-disc-chev { transition: transform .18s ease; }
.an-disc-btn.open .an-disc-chev { transform: rotate(180deg); }
.an-disc-body { margin-top: 14px; }
.an-sub-h { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 20px 0 10px; }

/* ===== Balance ===== */
.bal-lead { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; color: var(--text); }
.bal-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.bal-nm { width: 74px; flex: none; font-size: 13px; color: var(--text-dim); }
.bal-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border-strong); }
.bal-bar i { display: block; height: 4px; border-radius: 2px; background: var(--text-dim); }
.bal-v { width: 26px; text-align: right; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
/* --text-dim statt --text-faint: die Zeile meldet jetzt fehlende Daten,
   nicht mehr nur eine Fussnote. --text-faint lag auf der hellen Karte bei
   2,99:1 und damit unter der Lesbarkeitsgrenze. */
.bal-foot { font-size: 11px; color: var(--text-dim); margin: 10px 0 0; line-height: 1.5; }
/* Im Rueckfall steht die Waisen-Zeile ganz oben (sie ist die Ursache). Ohne das
   haengt die Karte oben schief, weil der Abstand von der Variante darueber kaeme. */
.bal-foot:first-child { margin-top: 0; }
/* Zwischen Waisen-Zeile und Folgesatz stand null Abstand, dadurch klebten fuenf
   Zeilen Fliesstext ohne Absatzsprung aneinander. Trifft nur diese Kombination,
   .an-hint bleibt ueberall sonst unberuehrt. */
.bal-foot + .an-hint { margin-top: 8px; }
.an-hint { margin: 0; }
.an-window-note { font-size: 11px; }

/* ===== Steigerungs-Kandidaten ===== */
.stag-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 0; border-top: 1px solid var(--border); }
.stag-row:first-child { border-top: 0; }
.stag-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stag-l b { font-size: 13px; font-weight: 600; color: var(--text); }
.stag-l span { font-size: 11px; color: var(--text-faint); }
.stag-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.stag-r b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums; }
.stag-r span { font-size: 10px; color: var(--text-faint); }

/* ===== Konstanz-Raster: kein Rot, kein Gelb ===== */
.cons-sub { font-size: 11px; color: var(--text-faint); margin: -8px 0 0; }
.cons-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 12px; }
.cons-grid i { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--border-strong); display: block; }
.cons-grid i.f { background: var(--text-dim); border-color: var(--text-dim); }
.cons-grid i.now { border-color: var(--text); border-width: 2px; }

/* Marker C: Zeitmarken-Schiene ueber dem Chart. Eigene Ebene ueber dem
   Datenraum -> markiert den Zeitpunkt, nicht den Wert. */
.mom-rail { position: relative; height: 26px; margin-bottom: 2px; }
.mom-rchip {
  position: absolute; top: 0; transform: translateX(-50%);
  min-height: 24px; padding: 0 8px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  color: var(--pr, var(--up)); background: var(--pr-soft, var(--accent-soft));
  border: 1px solid var(--pr-line, var(--border-strong)); border-radius: 7px;
  cursor: pointer; white-space: nowrap; line-height: 22px;
}
/* Hitbox auf 44px, sichtbarer Chip bleibt klein */
.mom-rchip::after { content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px; }
.mom-rline { stroke: var(--pr, var(--up)); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }

/* Momentum-Scrub: Wert + Rekorde an der gehaltenen/ueberfahrenen Stelle */
.mom-scrub-line { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.mom-scrub-dot { fill: var(--accent); }
.mom-scrub {
  position: absolute; top: 4px; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; max-width: 190px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.mom-scrub .ms-date { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.mom-scrub .ms-vol { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums; }
.mom-scrub .ms-vol i { font-size: 11px; font-weight: 600; font-style: normal; color: var(--text-dim); margin-left: 2px; }
.mom-scrub .ms-recs { display: flex; flex-direction: column; gap: 3px; margin-top: 4px;
  padding-top: 5px; border-top: 1px solid var(--border); }
.mom-scrub .ms-rec { font-size: 11px; font-weight: 600; color: var(--up); }
.momentum.scrubbing .mom-pill { opacity: 0; }

/* ---------- Energie ---------- */
.energy-inputs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.energy-inputs .form-group { margin-bottom: 16px; }
.energy-history { display: flex; flex-direction: column; gap: 8px; }
.energy-entry {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 16px;
}
.energy-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.energy-date { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.energy-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.energy-metric {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px;
}
.em-label {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.em-value {
  font-size: 14px; font-weight: 800; font-family: 'Geist Mono', monospace;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.energy-metric.met { border-color: var(--accent); background: var(--accent-soft); }
.energy-metric.met .em-value { color: var(--accent); }
.energy-metric.below .em-value { color: var(--text-dim); }

/* ---------- Live-Session (M2) ---------- */
.live-timer { display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 14px; }
.live-timer.live { border-color: var(--accent); background: var(--accent-soft); }
.lt-left { display: flex; align-items: center; gap: 10px; }
.lt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); }
.live-timer.live .lt-dot { background: var(--accent); animation: ltpulse 1.6s ease-in-out infinite; }
@keyframes ltpulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.lt-time { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lt-sub { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.lt-btn { padding: 9px 16px; min-height: 44px; border-radius: 999px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; }
/* vor dem Start: dezenter Umriss-Button, kein "drueber geworfener" Block */
.lt-btn.start { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.lt-btn.start:hover { border-color: var(--accent); color: var(--accent); }
/* laeuft: Beenden in Akzentfarbe */
/* Beenden ist die Stopp-Aktion: IMMER dunkel mit weisser Schrift.
   Vorher var(--accent) mit fest verdrahteter Textfarbe var(--accent-ink) -> im hellen
   Design war der Knopf dunkelgraphit und die Schrift fast schwarz, also unlesbar. */
.lt-btn.end { background: #1c1f26; border: 1px solid #1c1f26; color: #ffffff; }
.lt-btn.end:hover { background: #2a2e37; border-color: #2a2e37; }
.lt-btn.end[disabled], .lt-btn.end.busy { opacity: .75; cursor: default; }
.live-group-select { width: 100%; padding: 10px 12px; margin: 10px 0 0; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 600; }
.live-group-select:focus { outline: none; border-color: var(--accent); }
.live-msg { font-size: 12px; min-height: 16px; margin: 2px 0 6px; }
.live-msg.ok { color: var(--accent); }
.live-msg.err { color: var(--down); }
.bw-hint { font-size: 11px; color: var(--text-faint); margin: 2px 12px 4px; }

/* K-FB3: Trainer-Tipp bei erster Nutzung einer Übung */
/* Das Blau ist raus (dekorativ, trug in keinem Design den Kontrast). Nur die
   Fuellung zu tauschen reichte aber NICHT: --surface-2 ist derselbe Grund wie
   bei den Eingabefeldern, gemessen Tipp gegen Feld 1,000 und gegen die Karte
   1,044 - eine Haarlinie mit 10% Deckung als einziger Unterschied. Und der
   Tipp erscheint nur bei der Erstnutzung, also genau dann, wenn ein Einsteiger
   ihn braucht.
   Deshalb dieselbe Loesung wie bei .live-ex.is-active weiter oben: Flaeche wie
   die Schwester-Box .last-hint-box (--bg) plus 3px-Kante innen. Farblos, aber
   gemessen sichtbar (Kante 5,81:1) statt einer Randfarbe, die im Studio bei
   Sonne auf dem Glas faktisch nichts ist. */
.trainer-tip { background: var(--bg); border: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--text-dim);
  border-radius: var(--radius-sm); padding: 8px 12px 8px 15px; margin: 4px 12px 4px;
  font-size: 12px; color: var(--text); line-height: 1.4; }
.trainer-tip-btn { background: none; border: none; color: var(--text); font-weight: 700;
  font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit;
  padding: 0; min-height: 44px; }

.live-ex { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
/* #61: zuletzt bearbeitete Kachel. Keine Farbe, keine Bewegung - sie soll
   auffindbar sein, nicht rufen. Ersetzt das Umsortieren, das die Karten unter
   dem Finger springen liesse.
   Die blosse Randfarbe reichte NICHT: gemessen 1,42:1 dunkel und 1,24:1 hell
   auf einer 0,8px-Linie, also am Schreibtisch grenzwertig und im Studio bei
   Sonne und Schweiss auf dem Glas faktisch nichts. Damit waere der Ersatz fuers
   Umsortieren wertlos gewesen. Die 3px-Kante innen liegt bei 7,1:1 / 6,2:1. */
.live-ex.is-active {
  border-color: var(--border-strong);
  box-shadow: inset 3px 0 0 var(--text-dim);
}
/* Padding von 12 auf 4: die Knoepfe rechts sind jetzt 44px hoch, mit 12px waere
   die Kopfzeile von 50 auf 68px gewachsen. So bleibt sie bei 52px. */
.live-ex-head { display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px; border-bottom: 1px solid var(--border); }
/* flex:1 und min-width:0, damit ein langer Name sauber umbricht statt die
   Knoepfe nach rechts aus der Karte zu schieben. */
.live-ex-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  flex: 1; min-width: 0; }
.live-ex-del { background: none; border: none; color: var(--text-faint); font-size: 22px;
  line-height: 1; cursor: pointer; }
.live-row-head, .live-row { display: grid; grid-template-columns: 26px 1fr 1fr 1fr 30px;
  gap: 6px; align-items: center; padding: 4px 14px; }
/* AE5: dezenter Verlauf in der Karte (letzte 2 Einheiten) */
.last-hint-box { margin: 0 14px 4px; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.lh-row { display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; line-height: 1.5; }
.lh-when { color: var(--text-faint); white-space: nowrap; }
.lh-sets { color: var(--text-dim); font-variant-numeric: tabular-nums;
  text-align: right; }
.live-row-head { padding-top: 10px; padding-bottom: 2px; }
.live-row-head span { font-size: 9px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.live-row-head span:first-child { text-align: left; }
.lr-idx { font-size: 12px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.live-row input { width: 100%; text-align: center; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 4px;
  color: var(--text); font-family: inherit; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.live-row input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft); }
/* P6 Floating-Label (nur Live-Modus): leeres Feld zeigt den grossen
   Platzhalter, gefuelltes Feld blendet oben ein Mini-Label ein (Stil wie die
   fruehere Kopfzeile). Padding-Tausch 10/10 -> 15/5 haelt die Hoehe gleich
   (kein Springen). :has braucht iOS 15.4+, sonst faellt es sauber auf
   Platzhalter zurueck. */
.lr-field { position: relative; width: 100%; }
.lr-lab {
  position: absolute; top: 3px; left: 0; right: 0; text-align: center;
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); pointer-events: none; opacity: 0; transition: opacity .12s;
}
.lr-field:has(input:not(:placeholder-shown)) .lr-lab { opacity: 1; }
.lr-field:has(input:not(:placeholder-shown)) input { padding-top: 15px; padding-bottom: 5px; }
/* Trefferflaeche 44px, waechst NUR nach oben, unten und RECHTS. Ein Wachsen
   nach links wuerde die Flaeche ueber das Sets-Feld legen - ein Tipp ins
   Zahlenfeld haette dann die Zeile geloescht. Die Gitterspalte ist 30px breit,
   die 14px nach rechts gehen in das Kartenpolster (.live-row padding 4px 14px),
   deshalb hebt margin-right das Mehr an Breite genau auf. */
.lr-del { background: none; border: none; color: var(--text-faint); font-size: 18px; cursor: pointer;
  width: 44px; min-height: 44px; margin-right: -14px; padding: 0;
  display: flex; align-items: center; justify-content: center; }
/* Gewichts-Flag UI */
.live-flag-badge {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px; padding: 2px 7px; margin-left: 6px; flex-shrink: 0;
}
.live-flag-hint {
  font-size: 12px; color: var(--text-faint); font-style: italic;
  margin: 4px 14px 0; line-height: 1.4;
}
.live-flag-prompt {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 14px 0; padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-sm);
}
.live-flag-prompt span { font-size: 12px; color: var(--text-dim); flex: 1; min-width: 140px; }
.live-flag-prompt button {
  font-size: 11px; font-weight: 600; padding: 5px 12px;
  border-radius: 20px; cursor: pointer; font-family: inherit; min-height: 30px;
}
.live-flag-prompt button:first-of-type {
  background: var(--accent); color: var(--accent-ink); border: none;
}
.live-flag-prompt button:last-of-type {
  background: transparent; color: var(--text-faint);
  border: 1px solid var(--border);
}
.live-flag-remove {
  display: block; margin: 6px 14px 0; background: none; border: none;
  font-size: 11px; color: var(--text-faint); cursor: pointer; text-align: left;
  padding: 0; font-family: inherit;
}
.live-flag-remove:hover { color: var(--text-dim); }
/* Pause-Badge (#36) */
/* #65: Pausenuhr als ruhiger Streifen unter der Kopfzeile. Neutral, kein
   Ampelsystem: Rot bedeutet in dieser App "Fehler", eine kurze Pause ist aber
   keiner - und Gruen gehoert allein den Rekorden. Der Zustand wechselt ueber
   Wortlaut ("Pause" / "Pause erfuellt") und Schriftgewicht. */
.pause-strip {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 16;
  display: flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 4px 0; margin-bottom: 4px;
  background: var(--bg);
  /* KEIN pointer-events:none. Der Streifen ist blickdicht - er wuerde die
     Knoepfe dahinter weiter verdecken, aber Tipps durchlassen. Gemessen
     erreichbar waren u.a. "Session beenden", das Wiederholungs-Feld und
     "+ weiterer Satz": ein Tipp auf die Uhr haette blind das Training beendet.
     Tipps zu schlucken ist das normale, harmlose Verhalten einer Sticky-Leiste;
     durchlassen ist nur bei DURCHSICHTIGEN Overlays richtig. */
}
.ps-label { font-size: 12px; color: var(--text-dim); }
.ps-time {
  margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--text-dim);
}
.ps-time.is-done { color: var(--text); font-weight: 600; }
.ps-line {
  position: absolute; left: 0; bottom: 0; height: 1px;
  background: var(--border-strong); transition: width .4s linear;
}
/* Zielangabe im Hinweis-Block, direkt unter der grossen Zahl */
.ptc-goal { margin: 2px 0 8px; font-size: 12px; color: var(--text-dim); }

/* .pause-badge samt Ampelklassen (.pb-green/.pb-yellow/.pb-red) ist mit #65
   entfallen - der Timer sitzt jetzt als neutraler Streifen oben (.pause-strip)
   und kennt keine Ampelfarben mehr. */

/* Exercise-order warning (#37) */
.order-warning {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 0;
  padding: 10px 14px; background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-sm);
}
.order-warning-text { flex: 1; font-size: 12px; color: var(--text-dim); }
.order-warning-close {
  background: none; border: none; font-size: 16px; color: var(--text-faint);
  cursor: pointer; padding: 2px 4px; min-width: 28px; min-height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.live-add-set { width: calc(100% - 28px); margin: 8px 14px 12px; padding: 9px;
  min-height: 44px;   /* war 35px, Projektregel verlangt 44 */
  background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.live-add-set:hover { color: var(--accent); border-color: var(--accent); }
.live-add-ex { width: 100%; padding: 13px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.live-add-ex:hover { border-color: var(--accent); color: var(--accent); }

.live-picker h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.equip-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.equip-chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text-faint); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.equip-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.live-search { width: 100%; padding: 10px 12px; margin: 10px 0; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: 13px; }
.live-search:focus { outline: none; border-color: var(--accent); }
.live-pick-group { font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px; }
.live-pick-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.live-pick { display: flex; align-items: center; gap: 10px; padding: 12px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); font-family: inherit;
  text-align: left; min-height: 48px; }
.lp-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong);
  flex: 0 0 18px; display: flex; align-items: center; justify-content: center; }
.live-pick.on { border-color: var(--accent); background: var(--accent-soft); }
.live-pick.on .lp-box { background: var(--accent); border-color: var(--accent); }
.live-pick.on .lp-box::after { content: '\2713'; color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.live-pick-cancel { width: 100%; margin-top: 14px; }
/* Ausweg aus der leeren Liste. min-height wie die anderen Knoepfe (48px), damit
   er mit feuchtem Daumen sicher zu treffen ist. */
.live-pick-empty { margin: 12px 0 8px; }
.live-pick-empty-btn { width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }

/* schwebende Hinzufuegen-Leiste: klebt unten am Bildschirm sobald etwas
   ausgewaehlt ist, damit man nicht erst runterscrollen muss */
.live-pick-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  transform: translateY(120%); transition: transform .2s ease; pointer-events: none; }
.live-pick-bar.show { transform: translateY(0); pointer-events: auto; }
.live-pick-bar .btn-primary { width: 100%; max-width: 460px; margin: 0 auto;
  display: block; padding: 15px; font-size: 15px; }

.live-pick-foot { display: flex; gap: 8px; margin-top: 14px; }
.live-pick-foot > * { flex: 1; }

/* Workout-Auswahl: i-Icon (oeffnet Info-Popup) */
.live-pick-wrap { display: flex; align-items: center; gap: 8px; }
.live-pick-wrap .live-pick { flex: 1; }
.live-pick .lp-name { text-align: left; flex: 1; }
.lp-info { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-dim); font-weight: 800; font-style: italic; font-size: 14px;
  cursor: pointer; font-family: Georgia, serif; }
.lp-info:active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* i-Icon in der Session-Karte (ausgewaehltes Workout) */
.live-ex-actions { display: flex; align-items: center; gap: 16px; }
/* Trefferflaechen 44px (Projektregel). BEWUSST als echte Breite/Hoehe und NICHT
   per negativem Inset auf einem Pseudo-Element: bei gap 16px muesste jede Seite
   9px wachsen, das waeren 18px Ueberlappung ueber 16px Luecke - Loeschkreuz und
   Info-i wuerden sich gegenseitig verdecken. Der sichtbare Glyph bleibt klein. */
.live-ex-del { font-size: 22px; line-height: 1; color: var(--text-faint);
  background: none; border: none; cursor: pointer; padding: 0;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; }
/* Beim Info-Knopf ist der KREIS das sichtbare Element, nicht nur der Glyph.
   Er bleibt deshalb 26px und liegt als Pseudo-Element mittig im 44px-Knopf. */
.live-ex-info { position: relative; width: 44px; height: 44px;
  border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-weight: 800; font-style: italic; font-size: 13px;
  cursor: pointer; font-family: Georgia, serif; line-height: 1; }
.live-ex-info::before { content: ''; position: absolute; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); }
.live-ex-info:active { color: var(--accent-ink); }
.live-ex-info:active::before { background: var(--accent); border-color: var(--accent); }

/* Info-Popup (Bubble), schliessbar per X / Daneben-Klick / ESC */
/* #63: Top-Padding reserviert die Notch/Statusleiste wie beim Plan-Overlay -
   .es-card (Uebungs-Erklaerung) kann bis 90vh hoch werden und ruecke beim
   reinen 24px-Padding auf notch-Geraeten sonst bis unter die Statusleiste,
   die dort dann nicht mehr blickdicht war. */
.wi-overlay { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  /* Unten ebenfalls safe-area-faehig. Vorher stand hier nur oben ein Inset:
     weil align-items:center die Karte um den halben Inset nach unten schiebt,
     wanderte die Unterkante mit und lag bei langem Inhalt unter dem
     Home-Indicator. Beide Seiten gleich = die Karte bleibt mittig. */
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px); animation: wiFade .15s ease; }
@keyframes wiFade { from { opacity: 0; } to { opacity: 1; } }
.wi-card { position: relative; width: 100%; max-width: 360px;
  /* 100% des gepolsterten Overlay-Kastens, nicht 88vh: vh kennt die
     Safe-Area-Polsterung nicht, die Karte ragte darueber hinaus und die
     Unterkante landete unter dem Home-Indicator. Gilt fuer ALLE Info-Overlays,
     nicht nur die Uebungs-Erklaerung. */
  max-height: 100%; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-xl); padding: 20px 18px 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6); }
/* C5: groesseres, scrollbares Erklaer-Sheet; X >= 44px */
/* Nur der Textteil scrollt. Titel, Reiter und Koerpergrafik stehen fest - sonst
   scrollt bei einer langen Erklaerung der Zielmuskel weg, und genau der ist der
   Bezug zum Text. Deshalb hier overflow:hidden statt des auto von .wi-card. */
/* max-height: 100% statt 90vh. 90vh kennt die Safe-Area-Polsterung des Overlays
   nicht und liess die Karte ueber den gepolsterten Kasten hinausragen - die
   Unterkante kam bis auf 1,6px an den Home-Indicator heran und machte den
   Safe-Area-Fix damit fast wirkungslos. 100% bezieht sich auf den Kasten. */
.es-card { max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.es-fixed { flex: 0 0 auto; }
/* Scroll-Hinweis. Beide Zeichen erscheinen NUR bei .has-scroll und der Pfeil
   verschwindet am Ende wieder - ein dauerhaftes Zeichen waere eine Luege.
   Die Linie trennt festen Kopf und Scrollbereich, der Pfeil sagt "da kommt
   noch was". Kein eigener Farbton, nur --border und --text-faint. */
.wi-overlay.has-scroll .es-fixed { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.wi-overlay.has-scroll .es-card { position: relative; }
.wi-overlay.has-scroll .es-card::after {
  content: '\25BE'; position: absolute; left: 0; right: 0; bottom: 2px;
  text-align: center; font-size: 13px; line-height: 1; color: var(--text-faint);
  pointer-events: none; opacity: 1; transition: opacity .18s ease; }
.wi-overlay.has-scroll.at-end .es-card::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .wi-overlay.has-scroll .es-card::after { transition: none; }
}
/* min-height:0 ist Pflicht: ohne das schrumpft ein Flex-Kind nicht unter seine
   Inhaltshoehe und der Bereich wuerde nie scrollen, sondern die Karte sprengen. */
.es-card .ex-tabpane { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
.wi-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; }
.wi-title { font-size: 16px; font-weight: 800; margin-bottom: 8px; padding-right: 48px; }

/* ---------- K1: Workout-Abschluss-Feier ---------- */
.cel-overlay { backdrop-filter: blur(6px); align-items: flex-start; overflow-y: auto; }
.cel-card { position: relative; overflow: hidden; text-align: center; width: 100%; max-width: 300px; margin: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 22px;
  padding: 26px 22px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.55);
  animation: celIn .38s cubic-bezier(.16,1,.3,1) both; }
.cel-card.big { box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 50px -12px var(--accent); }
@keyframes celIn { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cel-bloom { position: absolute; left: 50%; top: 44%; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
  animation: celBloom 1.1s ease-out .35s forwards; }
@keyframes celBloom { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: .2; } 100% { opacity: .1; transform: scale(1); } }
.cel-card.big .cel-bloom { animation: celBloomBig 1.2s ease-out .3s forwards; }
@keyframes celBloomBig { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: .34; } 100% { opacity: .16; transform: scale(1.05); } }
.cel-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cel-card > :not(.cel-bloom):not(.cel-canvas) { position: relative; z-index: 1; }
.cel-check { width: 38px; height: 38px; display: block; margin: 0 auto 8px; }
.cel-check-ring { fill: none; stroke: var(--accent-soft); stroke-width: 2; }
.cel-check-tick { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26; animation: celTick .42s ease-out .25s forwards; }
@keyframes celTick { to { stroke-dashoffset: 0; } }
.cel-title { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.cel-pill { display: inline-block; margin-top: 10px; font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent);
  padding: 3px 9px; border-radius: 999px; }
.cel-hero { margin: 12px 0 2px; }
.cel-hero #celVal { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1; }
.cel-unit { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-left: 6px; }
.cel-stats { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.cel-line { font-size: 14px; color: var(--text-dim); margin: 14px 4px 0; line-height: 1.4; }
.cel-foot { margin-top: 14px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-faint); letter-spacing: .03em; }

/* K2: aufklappbare Details */
.cel-toggle { margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; border-top: 1px solid var(--border); padding: 12px 0 0;
  color: var(--text-dim); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; }
.cel-chev { display: inline-block; transition: transform .28s ease; }
.cel-toggle.open .cel-chev { transform: rotate(180deg); }
.cel-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; text-align: left; }
.cel-panel.open { grid-template-rows: 1fr; }
.cel-panel-in { overflow: hidden; min-height: 0; }
.cel-exrow { padding: 8px 0; }
.cel-exline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cel-exname { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-exprtag { font-size: 9px; font-weight: 800; color: var(--accent); letter-spacing: .08em; }
.cel-extop { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-dim); white-space: nowrap; flex: none; }
.cel-exbar { height: 3px; border-radius: 999px; background: var(--border); margin-top: 6px; overflow: hidden; }
.cel-exbar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cel-exprev { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--accent); margin-top: 4px; }
.cel-exmore { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-faint); padding-top: 6px; text-align: center; }

/* K2: Aktionen (Weiter breiter, Teilen Outline) */
.cel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.cel-actions button { width: 100%; margin: 0; }

/* L3: Funfact-Toast direkt nach einer Uebung (klein, dezent, verschwindet) */
/* width:max-content ist Pflicht, nicht Kosmetik: mit left:50% ohne right steht
   fuer die Breite nur die halbe Bildschirmbreite zur Verfuegung (188px auf
   375px), max-width wird nie erreicht und ein langer Coach-Text waechst in die
   Hoehe statt in die Breite. Seit die Flaeche blickdicht ist (#64), legt sich
   der Klotz ueber die Eingabefelder und schluckt den ersten Tipp. */
.funfact-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 70;
  display: flex; align-items: center; gap: 9px; width: max-content; max-width: calc(100% - 32px); min-height: 44px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; cursor: pointer; }
.funfact-toast.show { pointer-events: auto; }
.funfact-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ff-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; box-shadow: 0 0 8px var(--accent); }
.ff-txt { font-size: 13px; color: var(--text); line-height: 1.3; }
/* T4: Coach-Tipp in der Bubble - neutraler grauer Punkt + ruhiges Label */
.ff-dot-coach { background: var(--text-faint); box-shadow: none; }
.ff-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); flex: none; }
@media (prefers-reduced-motion: reduce) { .funfact-toast, .funfact-toast.show { transform: translate(-50%, 0); transition: opacity .2s; } }

@media (prefers-reduced-motion: reduce) {
  .cel-card, .cel-bloom, .cel-check-tick { animation: none !important; }
  .cel-check-tick { stroke-dashoffset: 0; }
  .cel-bloom { opacity: .12; }
  .cel-panel, .cel-chev { transition: none; }
}
.wi-text { font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.wi-text.pre { white-space: pre-line; }
.wi-achtung {
  margin-top: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
}
.wi-actions { display: flex; gap: 8px; margin-top: 16px; }
.wi-actions > * { flex: 1; }

/* Uebungs-Zusammenfassung (Workout-Liste -> Klick) */
.es-card { max-width: 400px; }
.es-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.es-stat { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px; text-align: center; }
.es-l { display: block; font-size: 8px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .05em; }
.es-v { display: block; font-size: 15px; font-weight: 800; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.es-d { display: block; font-size: 8px; color: var(--accent); font-family: 'Geist Mono', monospace; margin-top: 1px; }
.es-hist-title { font-size: 10px; font-weight: 800; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.es-hist { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.es-hist-row { display: flex; gap: 10px; font-size: 12px; padding: 4px 0;
  border-bottom: 1px solid var(--border); }
.es-hist-date { flex: 0 0 64px; color: var(--text-faint); font-family: 'Geist Mono', monospace; font-size: 11px; }
.es-hist-sets { flex: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Info-Textfeld im Editor + Vorschlag-Button */
#exDesc { width: 100%; resize: vertical; min-height: 78px; }
.desc-suggest { margin-top: 8px; font-size: 12px; padding: 7px 12px; }

/* Analyse: logarithmisches Gesamt-Volumen-Balkendiagramm */
.an-logbars { width: 100%; overflow: hidden; position: relative; touch-action: pan-y; cursor: grab; }
.an-logbars.is-panning, .an-logbars:active { cursor: grabbing; }
.an-logbars .zoom-ctl button { cursor: pointer; }
.vol-bars-svg { width: 100%; height: 160px; display: block; overflow: hidden; }
.vb { fill: var(--surface-2); transition: fill .12s; }
.vb.on { fill: var(--accent); }
/* #54: laufender Zeitraum. Transluzent statt voll, damit er sich nicht gegen
   abgeschlossene Zeitraeume rankt - er ist ja noch nicht fertig. Kein Gelb und
   kein Rot: eine laufende Woche ist ein normaler Zustand, keine Warnung. */
.vb.now { fill: var(--accent); fill-opacity: .35; }
.vb.now.is-zero { fill: var(--text-faint); fill-opacity: .45; }
.vb.on.now { fill-opacity: .6; }
.vb-now-dot { fill: var(--text-dim); }
.an-logbars.is-panning .vb { transition: none; }
.vol-read { font-size: 12px; color: var(--text-faint); font-family: 'Geist Mono', monospace; margin-bottom: 12px; }

/* Zoom-Steuerung (Desktop): +/- /Reset als Overlay oben rechts. Auf Touch
   ausgeblendet (dort steuert Pinch). Gleich fuer Momentum und Trainingsvolumen. */
.momentum-wrap { position: relative; }
.zoom-ctl { position: absolute; top: 6px; right: 6px; z-index: 3; display: flex; gap: 4px; }
.zoom-ctl button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-dim); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: color .12s, border-color .12s, transform .12s; }
.zoom-ctl button:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.zoom-ctl button:active { transform: translateY(0); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.zoom-ctl button:disabled { opacity: .35; cursor: default; transform: none; color: var(--text-faint); }
/* Zoom-Buttons auch am Handy sichtbar (eindeutiges Tipp-Zoomen, Pinch als Bonus). */

/* Datums-Achse unter den Balken: 3 scharfe Labels, waehrend Geste ausgeblendet */
.vol-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 0 2px; transition: opacity .15s; }
.vol-x { font-size: 10px; color: var(--text-faint); font-family: 'Geist Mono', monospace; flex: 1; white-space: nowrap; }
.vol-axis .vol-x:nth-child(2) { text-align: center; }
.vol-axis .vol-x:last-child { text-align: right; }
.an-logbars.is-panning .vol-axis { opacity: 0; }
.lb-pop-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
  font-size: 12px; color: var(--text-dim); }
.lb-pop-stats b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Chart-Settings-Zahnrad im Block-Kopf */
.chart-settings-btn { width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.chart-settings-btn svg { width: 16px; height: 16px; }
.chart-settings-btn:active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Median-Infobox in den Einstellungen */
.info-box { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; font-size: 12px; line-height: 1.5;
  color: var(--text-dim); margin-top: 6px; }
.info-box strong { display: block; color: var(--text); margin-bottom: 4px; font-size: 12px; }

/* Dynamische Insight-Kacheln oben (statt Ziel/Serie) */
.stat-card.insight.hot { border-color: var(--accent); background: var(--accent-soft); }
.stat-card.insight.hot .value { color: var(--accent); }

/* Coolster Funfact als Kopfzeile */
/* Home-Bildschirm-Hinweis (dezent, nur Browser-Tab) */
.a2hs-hint { display: flex; align-items: flex-start; gap: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; }
.a2hs-txt { font-size: 12px; color: var(--text-dim); line-height: 1.45; flex: 1; }
.a2hs-txt b { color: var(--text); }
.a2hs-close { background: none; border: none; color: var(--text-faint);
  font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; padding: 0 2px; }

/* F5 Sync-Status: dezent, eine Zeile, kein Drama */
.sync-status { font-size: 11px; font-weight: 700; padding: 6px 12px;
  border-radius: var(--radius-sm); margin-bottom: 12px; display: flex;
  align-items: center; gap: 6px; }
.sync-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.sync-status.off { background: var(--surface-2); color: var(--text-dim); }
.sync-status.off::before { background: var(--text-faint); }
.sync-status.pend { background: var(--accent-soft); color: var(--accent); }
.sync-status.pend::before { background: var(--accent); }
/* err ist die einzige anklickbare Variante -> Mindest-Hitbox 44px */
.sync-status.err { background: var(--down-soft); color: var(--down); min-height: 44px; }
.sync-status.err::before { background: var(--down); }
.sync-status.big { font-size: 13px; padding: 10px 14px; }

.date-warn { background: var(--warn-soft); border: 1px solid var(--warn-line);
  color: var(--warn); border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 13px; margin-bottom: 8px; }
.date-warn-fix { background: none; border: none; color: var(--warn); font-weight: 700;
  font-size: 13px; text-decoration: underline; cursor: pointer; font-family: inherit; padding: 0; }

.top-funfact { display: flex; align-items: center; gap: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 16px; }
.top-funfact .tf-text { font-size: 13px; font-weight: 700; color: var(--text); }

/* Info-Punkt (i) neben Titeln */
.sec-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec-head-row h2 { margin-bottom: 0; }
.sec-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.info-dot { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-dim);
  font-style: italic; font-weight: 800; font-family: Georgia, serif; font-size: 13px;
  cursor: pointer; line-height: 1; }
.info-dot:active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.es-info { display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-strong);
  font-size: 9px; font-style: italic; font-family: Georgia, serif; color: var(--text-faint);
  cursor: pointer; margin-left: 3px; vertical-align: middle; }

/* Profil: Avatar + Name */
.profile-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.profile-avatar { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border-strong); overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--text-faint);
  font-size: 24px; cursor: pointer; position: relative; }
.profile-avatar:active { border-color: var(--accent); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* dezenter Kamera-Hinweis, wenn schon ein Foto da ist */
.profile-avatar.has-photo::after { content: '\270E'; position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; display: flex; align-items: center; justify-content: center; }
.profile-fields { flex: 1; min-width: 0; }
.avatar-upload-btn { display: inline-block; font-size: 12px; padding: 8px 14px; cursor: pointer; }
.profile-sep { height: 1px; background: var(--border); margin: 18px 0 14px; }

/* Einstellungen: Segment-Nav + Panels */
.settings-nav { display: flex; gap: 6px; margin-bottom: 18px;
  position: sticky; top: env(safe-area-inset-top); z-index: 10; background: var(--bg); padding: 8px 0; }
.set-seg { flex: 1; padding: 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.set-seg.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* Uebungs-Unterseite: Reiter (Erklaerung / Statistik) */
.ex-tabbar { display: flex; gap: 6px; margin-bottom: 14px; }
/* Koerpergewichts-Schalter im Uebungs-Editor. Ganze Zeile ist Trefferflaeche
   (das <label> umschliesst das Kaestchen), Hoehe 44px wie alle anderen. */
/* Muss die Label-Grundregel zuruecksetzen: .ex-bw-row IST ein <label> und liegt
   in einer .form-group, erbt von dort sonst Grossbuchstaben, Sperrung und
   fette Schrift - der Kaestchen-Text saehe aus wie eine Feld-Ueberschrift. */
.ex-bw-row { display: flex; align-items: center; gap: 10px; min-height: 44px;
  cursor: pointer; font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: normal; font-weight: 400; margin-bottom: 0; }
.ex-bw-row input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0;
  min-height: 0; padding: 0; accent-color: var(--accent); }
.ex-bw-hint { font-size: 12px; color: var(--text-dim); line-height: 1.45; margin-top: 2px; }
/* Gesperrtes Namensfeld: sichtbar nicht editierbar, aber lesbar und kopierbar. */
.is-locked { color: var(--text-dim); cursor: default; }
.ex-name-hint { font-size: 12px; color: var(--text-dim); line-height: 1.45;
  margin: -10px 0 16px; }

.ex-tab { flex: 1; padding: 9px; border-radius: var(--radius-sm);
  min-height: 44px;   /* war 35px, Projektregel verlangt 44 */
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ex-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ex-photo-ph { width: 100%; height: 120px; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--text-faint);
  font-size: 12px; margin-bottom: 12px; }
.ex-muscle-chip { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
/* C5: Zielmuskel-Bodymap + Schritt-fuer-Schritt-Erklaerung */
.ex-bodymap { display: flex; justify-content: center; margin-bottom: 10px; }
.ex-bodymap .bm-highlight .bm-svg { max-width: 86px; }
/* No frame, no box, no background plate: only the photo itself.
   The image drives its own size via its natural aspect ratio.
   - landscape (3:2 and 4:3) fills the full 324px card width, height follows
     (216px / 242px), both stay under the 244px cap
   - portrait (3:4) hits the cap first and therefore stays narrow + centered
   - never cropped: no object-fit:cover, no fixed height
   - 40vh keeps the scroll area usable on very short screens (iPhone SE)
   Soft edges come from a mask on the image, not from a container. */
.ex-photo-wrap { display: flex; justify-content: center; margin: 0 auto 10px;
  opacity: 0; transform: scale(.97); animation: exPhotoIn .28s ease-out forwards; }
.ex-photo-wrap img { display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(244px, 40vh);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-composite: intersect;
  mask-size: 100% 100%; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; }
@keyframes exPhotoIn { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ex-photo-wrap { animation: none; opacity: 1; transform: none; }
}
.ex-steps { margin: 2px 0 8px; padding-left: 22px; }
.ex-steps li { font-size: 13px; line-height: 1.55; color: var(--text); margin-bottom: 7px; }
.ex-steps li::marker { color: var(--accent); font-weight: 800; }
.ex-tip { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin: 4px 0 8px; }
.ex-tip b { color: var(--text); }

/* Coach: Letzte Trainings (kompakt, aufklappbar) */
.recent-days { display: flex; flex-direction: column; gap: 8px; }
.rd-row { border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; }
.rd-row.open { border-color: var(--accent); }
.rd-summary { width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: transparent; border: none; cursor: pointer;
  color: var(--text); font-family: inherit; text-align: left; }
.rd-date { font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.rd-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-chev { flex: 0 0 auto; color: var(--text-faint); font-size: 13px; }
.rd-detail { padding: 0 14px 14px; }
.rd-ex { padding: 8px 0; border-top: 1px solid var(--border); }
.rd-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-ex-name { font-size: 13px; font-weight: 700; }
.rd-ex-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rd-ex-del { background: none; border: none; color: var(--text-faint);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.rd-ex-del:active { color: var(--down); }
.rd-group { font-size: 10px; font-weight: 800; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 6px; }
.rd-group:first-child { margin-top: 0; }
.rd-ex-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rd-ex-sets .ds-set { font-size: 11px; color: var(--text-dim);
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 2px 7px;
  font-variant-numeric: tabular-nums; }
.rd-del { width: 100%; margin-top: 10px; color: var(--down); }
/* P3: verschachtelte Verlaufs-Knoten (eine Ebene pro Klick) + P2 Tag-Aktionen */
.rd-detail > .rd-row { margin-top: 8px; }
.rd-day-actions { display: flex; gap: 8px; margin-top: 12px; }
.rd-day-actions > * { flex: 1; }
.rd-day-actions .rd-del { width: auto; margin-top: 0; }
.rd-tpl { color: var(--accent); }
/* P3 (B): Pfad-Drilldown - Breadcrumb + flache Navi-Zeilen statt Verschachtelung */
.rd-bc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rd-back { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rd-back:hover { border-color: var(--border-strong); }
.rd-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.rd-crumb { background: none; border: none; padding: 6px 2px; color: var(--text-faint);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rd-crumb.active { color: var(--accent); }
.rd-sep { color: var(--text-faint); font-size: 12px; }
.rd-list { display: flex; flex-direction: column; gap: 8px; }
.rd-nav { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s; }
.rd-nav:hover { border-color: var(--accent); }
.rd-nav-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-nav-label { font-size: 14px; font-weight: 700; color: var(--text); }
.rd-nav-meta { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-nav .rd-chev { flex: 0 0 auto; color: var(--text-faint); font-size: 20px; }
.rd-older { border-style: dashed; }
.rd-older .rd-nav-label { color: var(--text-dim); }
.rd-hint { padding: 6px 2px; }
/* P8: Gewicht-Zusammenfassung + Sparkline (kein zweites Vollchart) */
.wt-summary { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; cursor: pointer; transition: border-color .15s; }
.wt-summary:hover { border-color: var(--accent); }
.wt-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wt-now { font-size: 24px; font-weight: 800; color: var(--text); }
.wt-unit { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.wt-sub { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.spark { width: 100%; height: auto; display: block; margin-top: 10px; }
.wt-link { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--accent); }
.wt-entries-toggle { width: 100%; margin-top: 10px; padding: 9px; background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.wt-entries-toggle:hover { color: var(--text); border-color: var(--text-dim); }
.weight-list-full { margin-top: 8px; }
/* P7: Energie-Ziel-Ringe (letzte 7 Tage), wiederverwendet .ring-track/.ring-prog */
.energy-summary { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; cursor: pointer; transition: border-color .15s; }
.energy-summary:hover { border-color: var(--accent); }
.es-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-family: 'Geist Mono', monospace; margin-bottom: 12px; }
.energy-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.er-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.er-ring { width: 80px; height: 80px; }
.er-ring .ring-track, .er-ring .ring-prog { stroke-width: 10; }
.er-ring.full .ring-prog { filter: drop-shadow(0 0 9px rgba(var(--pr-rgb), .85)); }
/* Groesse kommt aus erValSize() je nach Textlaenge, hier nur der Fallback. */
.er-val { fill: var(--text); font-size: 26px; font-weight: 800; text-anchor: middle; font-family: 'Geist', sans-serif; }
.er-name { font-size: 11px; font-weight: 700; color: var(--text); }
.er-sub { font-size: 10px; color: var(--text-faint); font-family: 'Geist Mono', monospace; }
.er-clickable { cursor: pointer; }
.er-clickable:hover .er-ring { opacity: .85; }
.er-clickable:hover .er-name { color: var(--accent); }
.energy-list-full { margin-top: 8px; }

/* Sauna-Header mit inline Toggle (#25) */
.sauna-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sauna-hdr h2 { margin-bottom: 0; }
.sauna-off-btn { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-dim); cursor: pointer; font-family: inherit; }
.sauna-off-btn:hover { background: var(--surface-raised); color: var(--text); }

/* Energie-Popup-Charts (#22) */
.ep-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9000; display: flex; align-items: flex-end; justify-content: center; }
.ep-sheet { background: var(--bg); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; padding: 0 0 32px; }
.ep-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
.ep-title { font-size: 15px; font-weight: 700; }
.ep-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface-raised); color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ep-body { padding: 16px 20px 0; }
.ep-empty { font-size: 13px; color: var(--text-dim); text-align: center; padding: 24px 0; }
.ep-chart { width: 100%; display: block; overflow: visible; }
.ep-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ep-dot { fill: var(--accent); }
.ep-dot.today { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.ep-val-lbl { fill: var(--text-faint); font-size: 9px; text-anchor: middle; font-family: 'Geist Mono', monospace; }
.ep-axis { fill: var(--text-faint); font-size: 9px; text-anchor: middle; font-family: 'Geist Mono', monospace; }
.ep-goal-line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.ep-goal-lbl { fill: var(--text-faint); font-size: 9px; font-family: 'Geist Mono', monospace; }
.ep-legend-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); margin-top: 10px; flex-wrap: wrap; }
.ep-goal-dot { display: inline-block; width: 20px; height: 1px; border-top: 1px dashed var(--border-strong); vertical-align: middle; }
.ep-cal-legend { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; text-align: center; }
.ep-cal-legend span { font-size: 9px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; }
.ep-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ep-cal-cell { border-radius: 6px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 38px; border: 1px solid transparent; }
.ep-cal-cell.no-data { background: var(--surface-raised); }
.ep-cal-cell.green { background: rgba(22,163,74,.13); border-color: rgba(22,163,74,.25); }
.ep-cal-cell.yellow { background: rgba(217,119,6,.13); border-color: rgba(217,119,6,.25); }
.ep-cal-cell.red { background: rgba(220,38,38,.13); border-color: rgba(220,38,38,.25); }
.ep-cal-cell.empty { background: transparent; border-color: transparent; }
.ep-day-num { font-size: 9px; color: var(--text-faint); font-family: 'Geist Mono', monospace; }
.ep-day-val { font-size: 10px; font-weight: 700; color: var(--text); line-height: 1.2; }
/* Die Zahl bleibt bewusst Text (siehe .ep-day-val). Farbe traegt die Zellflaeche,
   eine farbige Zahl auf farbigem Tint kam auf 1,4:1. */
.ep-krea-week { margin-bottom: 8px; }
.ep-krea-wlbl { font-size: 10px; font-weight: 700; color: var(--text-dim); font-family: 'Geist Mono', monospace; display: block; margin-bottom: 3px; }
.ep-leg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.ep-leg-dot.green { background: rgba(22,163,74,.25); border: 1px solid rgba(22,163,74,.5); }
.ep-leg-dot.red { background: rgba(220,38,38,.25); border: 1px solid rgba(220,38,38,.5); }
.ep-leg-dot.no-data { background: var(--surface-raised); border: 1px solid var(--border); }

/* Modus-Umschalter Live / Nachtragen */
.mode-switch { display: flex; gap: 4px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 4px; margin-bottom: 14px; }
.mode-btn { flex: 1; padding: 10px; border: none; background: transparent;
  color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 700;
  border-radius: var(--radius-sm); cursor: pointer; }
.mode-btn.active { background: var(--accent); color: var(--accent-ink); }

/* Timer-Zeit korrigierbar */
.lt-time.editable { cursor: pointer; border-bottom: 1px dashed var(--border-strong); }
.lt-time.editable:active { color: var(--accent); }

/* Nachtrage-Kopf (Tag/Datum/Dauer) */
.backlog-head { margin-bottom: 14px; }
.backlog-head .form-group { margin-bottom: 12px; }
.backlog-head .track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* iOS date/number-Inputs haben intrinsische Mindestbreite und sprengen
   sonst die Grid-Zelle (Ueberlappung). Hart auf Zellenbreite zwingen. */
.backlog-head .track-grid .form-group { min-width: 0; }
.backlog-head .track-grid input {
  width: 100%; min-width: 0; box-sizing: border-box; }
/* Speichern-Button im Fluss am Ende der Karten (Nachtragen).
   Bewusst NICHT floating, sonst kollidiert er mit der iOS-Tastatur-Leiste.
   Abstand unten, damit er nicht direkt an der iOS-Leiste klebt. */
.backlog-save { display: block; width: 100%; margin-top: 14px;
  margin-bottom: 0; padding: 15px;
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  font-size: 15px; position: sticky; bottom: 0; z-index: 5;
  box-shadow: 0 -10px 16px var(--bg); }

/* ---------- Fortschritt pro Workout: Listenansicht ---------- */
.prog-row { border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin-bottom: 8px; overflow: hidden; background: var(--surface); }
.prog-row.open { border-color: var(--accent); }
.prog-summary { width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: transparent; border: none; cursor: pointer;
  color: var(--text); font-family: inherit; text-align: left; }
.prog-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-spark { flex: 0 0 84px; height: 24px; display: flex; align-items: center; }
.mini-spark { width: 84px; height: 24px; }
.mini-spark path { stroke-width: 2; }
.mini-spark.up path { stroke: var(--accent); }
.mini-spark.down path { stroke: var(--down); }
.mini-spark.flat path { stroke: var(--text-faint); }
.prog-pct { flex: 0 0 auto; width: 56px; text-align: right; font-size: 13px;
  font-weight: 800; font-variant-numeric: tabular-nums; }
.prog-pct.up { color: var(--accent); }
.prog-pct.down { color: var(--down); }
.prog-pct.flat { color: var(--text-faint); }
.prog-chev { flex: 0 0 auto; color: var(--text-faint); font-size: 13px; width: 14px; }
.prog-detail { padding: 0 14px 14px; }
/* Fortschritt-Detail: Start -> Jetzt als eine Aussage (statt 4 Kaesten) */
.prog-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ps-hero { display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px; }
.ps-from, .ps-to { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-l { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.ps-v { font-size: 22px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; letter-spacing: -.02em; }
.ps-u { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-left: 2px; }
.ps-arrow { color: var(--text-faint); flex: none; }
.ps-delta { margin-left: auto; flex: none; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.ps-delta.up { color: var(--accent); background: var(--accent-soft); }
.ps-delta.down { color: var(--down); background: var(--down-soft); }
.ps-delta.flat { color: var(--text-dim); background: var(--surface); }
.ps-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.ps-badge { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 9px; white-space: nowrap; }
.ps-units { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog-last { font-size: 11px; color: var(--text-faint); margin-top: 8px; }

/* ---------- Coach: Unter-Navigation + Schnell einsteigen ---------- */
/* NICHT .coach-seg nennen: das ist schon die Segment-Gauge (height:12px,
   overflow:hidden) im Auf-Kurs-Banner -> kollabiert sonst den Umschalter. */
/* K3: Coach-Untermenue an die Hauptmenue-Pills angeglichen (gleiche Form/Optik,
   kein Kasten-Look mehr). Opaker Hintergrund, damit sticky nichts durchscheint. */
.coach-nav {
  display: flex; gap: 6px; justify-content: center; padding: 8px 0; margin-bottom: 0;
  background: var(--bg); border: none;
  /* T6: direkt unter der Haupt-Tableiste mitfixieren (Hoehe via JS --tabs-h). */
  position: sticky; top: calc(env(safe-area-inset-top) + var(--tabs-h, 54px)); z-index: 15;
}
.coach-nav-btn {
  position: relative; flex: 0 0 auto; min-height: 44px; padding: 9px 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.coach-nav-btn:hover { color: var(--text); border-color: var(--border-strong); }
.coach-nav-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.coach-view { display: none; }
.coach-view.active { display: block; }

.coach-quick { display: flex; flex-direction: column; gap: 10px; }
.quick-hint { margin: 0 0 4px; }
.quick-card {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  padding: 16px; cursor: pointer; background: var(--bg);
  border: 1px solid var(--accent); border-radius: var(--radius-lg);
  transition: background .15s, transform .1s;
}
.quick-card:hover { background: var(--accent-soft); }
.quick-card:active { transform: scale(.99); }
.quick-card.free { border-color: var(--border-strong); }
.quick-card.free:hover { background: var(--surface-2); }
.quick-card-title { font-size: 16px; font-weight: 800; color: var(--text); }
.quick-card-sub { font-size: 12px; color: var(--text-dim); }
.quick-card-go { font-size: 12px; font-weight: 800; color: var(--accent); margin-top: 6px; }
.quick-card.free .quick-card-go { color: var(--text-dim); }
.coach-hints { display: flex; flex-direction: column; gap: 10px; }
.coach-hint-card {
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
}
.coach-hint-card.attn { border-color: var(--accent); background: var(--accent-soft); }
.chc-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text); }
/* T1: aufklappbarer Workout-Vorschlag mit kg (volle Breite, neue Zeile) */
.chc-suggest-btn {
  width: 100%; min-height: 44px; margin-top: 2px; padding: 6px 0; cursor: pointer;
  display: flex; align-items: center; gap: 6px; background: transparent; border: none;
  color: var(--accent); font-family: inherit; font-weight: 700; font-size: 12px; text-align: left;
}
.chc-chev { display: inline-block; margin-left: auto; font-size: 16px; line-height: 1; transition: transform .2s ease; }
.chc-suggest-btn[aria-expanded="true"] .chc-chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .chc-chev { transition: none; } }

/* T5: Kasten "Hilf mir" */
.ch-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ch-btn {
  width: 100%; min-height: 48px; padding: 12px 14px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); font-family: inherit; font-weight: 700; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.ch-btn:hover { border-color: var(--border-strong); background: var(--surface); }
.ch-out { margin-top: 12px; }
.ch-out:empty { display: none; }
/* #31: Ziel-Zeile ueber dem Trainingsvorschlag. Leiser Aendern-Link, damit
   "Als Plan speichern" der einzige laute Knopf bleibt. Trefferflaeche
   trotzdem 44px hoch, sichtbarer Text darf klein sein. */
.ch-goalline {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.ch-goalline-txt { font-size: 13px; color: var(--text-dim); min-width: 0; }
.ch-goalline-txt b { color: var(--text); font-weight: 600; }
.ch-goalline-btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 4px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px;
}
.ch-goalline-btn:hover { color: var(--text); }
.ch-changed { font-size: 12px; color: var(--text-faint); margin-bottom: 8px; }

.ch-intro { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-bottom: 10px; }
.ch-ex { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.ch-ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ch-ex-name { font-size: 14px; font-weight: 800; color: var(--text); }
.ch-ex-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.ch-ex-achtung { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.45; padding-left: 10px; border-left: 2px solid var(--border-strong); }
.ch-save {
  width: 100%; min-height: 44px; margin-top: 4px; padding: 11px; cursor: pointer; border: none;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm);
  font-family: inherit; font-weight: 800; font-size: 13px; transition: background .15s;
}
.ch-save:hover { background: var(--accent-press); }
.ch-saved { font-size: 13px; line-height: 1.5; color: var(--text); }
.ch-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ch-group { font-size: 12px; font-weight: 700; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.ch-group.focus { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.ch-note { font-size: 12px; color: var(--text-faint); line-height: 1.45; }
.chc-suggest {
  width: 100%; display: none; margin-top: 4px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
}
.chc-suggest.open { display: block; }
/* FB4: genannte Uebungen als Chips, je mit Info (i) und Übernehmen (+) */
.chc-ex-chips { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chc-ex-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 4px 4px 12px;
}
.chc-ex-name { font-size: 12px; font-weight: 700; color: var(--text); }
.chc-ex-act {
  width: 32px; height: 32px; flex-shrink: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 800; line-height: 1;
}
/* Hitbox auf 44px ziehen, Glyph bleibt klein */
.chc-ex-act::after { content: ''; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }
.chc-ex-info { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-style: italic; }
.chc-ex-info:hover { border-color: var(--border-strong); color: var(--text); }
/* 14px gap between i and + so the two 44px hitboxes (each ::after +6px) keep a
   ~2px dead strip and a border tap can never trigger the side-effecting + */
.chc-ex-add { margin-left: 10px; background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); }
.chc-ex-add:hover { background: var(--accent-press); border-color: var(--accent-press); }
.chc-ex-add.done { background: transparent; border-color: var(--border); color: var(--text-dim); cursor: default; }
.chc-x {
  width: 44px; height: 44px; flex-shrink: 0; margin: -10px -8px -10px 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-faint);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.chc-x:hover { color: var(--text); }
.coach-optout {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--text-faint); cursor: pointer; padding: 8px 2px; min-height: 44px;
}
.coach-optout input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- Coach nach Pause (K-FB3) ---------- */
.coach-return-card {
  margin: 0 0 12px;
  padding: 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-glow-rgb), 0.3);
  border-radius: var(--radius-lg);
}
.crc-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  font-style: italic;
}

/* ---------- Pause-Tipp (K-FB5) ---------- */
/* #60: Der Slot sitzt seit dieser Welle INNERHALB der Uebungskachel. Ohne
   eigenen Innenabstand klebt die Karte an der Kachelkante (1px statt 15px wie
   "+ weiterer Satz") und .live-ex{overflow:hidden} schneidet den 3px-Leuchtring
   links und rechts weg. */
.pause-tip-slot { padding: 0 14px; }
.pause-tip-card {
  margin: 8px 0 12px;
  padding: 18px 16px 14px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ptc-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin: 0 0 8px;
}
.ptc-text {
  font-size: 13px; line-height: 1.55; color: var(--text-dim);
  margin: 0 0 14px;
}
.ptc-actions { display: flex; gap: 8px; }
.ptc-btn {
  flex: 1; min-height: 44px; padding: 10px 12px;
  border-radius: var(--radius-sm); font-family: inherit;
  font-weight: 700; font-size: 13px; cursor: pointer; border: none;
}
.ptc-timer { background: var(--accent); color: var(--accent-ink); }
.ptc-timer:active { background: var(--accent-press); }
.ptc-dismiss {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim);
}
.ptc-countdown {
  font-size: 52px; font-weight: 700; text-align: center;
  color: var(--accent); padding: 10px 0;
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* ---------- Coach: Trainingsplan (F7) ---------- */
.coach-plan-section h3 {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text);
}

/* aktiver-Plan-Hero */
.coach-hero { margin: 16px 0 8px; }
.coach-hero-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg); padding: 16px;
}
.coach-hero-card.empty { text-align: center; border-style: dashed; border-color: var(--border-strong); }
.coach-hero-card.active { border-color: var(--accent); background: var(--accent-soft); }
.coach-hero-empty-txt { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 6px; }
.coach-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.coach-hero-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-ink); background: var(--accent); padding: 3px 8px; border-radius: 999px;
}
.coach-hero-edit {
  background: transparent; border: none; color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 4px;
}
.coach-hero-edit:hover { color: var(--text); }
.coach-hero-name { font-size: 20px; font-weight: 800; color: var(--text); }
.coach-hero-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.coach-hero-hint { font-size: 12px; color: var(--text-faint); margin-top: 12px; }
.coach-start-btn {
  margin-top: 14px; width: 100%; padding: 13px; border: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-family: inherit; font-weight: 800;
  font-size: 14px; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--radius-sm);
  transition: background .15s;
}
.coach-start-btn:hover { background: var(--accent-press); }
.coach-day-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.coach-day-chip {
  flex: 1 1 auto; min-width: 96px; padding: 11px 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--accent); color: var(--text);
  font-family: inherit; font-weight: 700; font-size: 13px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, transform .1s;
}
.coach-day-chip:hover { background: var(--accent-soft); }
.coach-day-chip:active { transform: scale(.98); }
.cdc-arrow { color: var(--accent); font-weight: 800; }

/* Vorlagen-Disclosure (zurueckgetreten, ausklappbar) */
.coach-templates { margin: 18px 0 4px; }
.coach-tpl-toggle {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  font-family: inherit; color: var(--text); text-align: left;
}
.coach-tpl-toggle:hover { border-color: var(--border-strong); }
.ctt-label { font-size: 13px; font-weight: 800; }
.ctt-count {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: var(--surface-2); padding: 1px 8px; border-radius: 999px;
}
.ctt-chev {
  margin-left: auto; font-size: 20px; line-height: 1; color: var(--text-faint);
  transition: transform .2s ease;
}
.coach-tpl-toggle[aria-expanded="true"] .ctt-chev { transform: rotate(90deg); }
/* Auf/Zu ruckelfrei via grid-template-rows 0fr<->1fr */
.coach-tpl-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.coach-tpl-panel.open { grid-template-rows: 1fr; }
.coach-tpl-panel-in { min-height: 0; overflow: hidden; }
.coach-tpl-strip { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.coach-tpl-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px;
}
.coach-tpl-info { flex: 1; min-width: 0; }
.coach-tpl-name { font-size: 14px; font-weight: 800; color: var(--text); }
.coach-tpl-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.coach-tpl-use {
  flex: 0 0 auto; padding: 11px 13px; min-height: 44px; cursor: pointer; background: transparent;
  border: 1px solid var(--border-strong); color: var(--text); font-family: inherit; font-weight: 700;
  font-size: 12px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.coach-tpl-use:hover { border-color: var(--text-dim); background: var(--surface); }
.coach-tpl-have { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }
.coach-tpl-card.rec { border-color: var(--accent); }
.coach-tpl-rec {
  display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink);
  background: var(--accent); padding: 2px 6px; border-radius: 999px; vertical-align: middle;
}
.link-inline {
  background: transparent; border: none; cursor: pointer;
  font: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 2px;
  /* Hitbox >= 44px ohne den Textfluss zu sprengen (negativer Margin gleicht das Padding aus) */
  padding: 12px 6px; margin: -10px -6px;
}
.link-inline:hover { color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  .coach-tpl-panel { transition: none; }
  .ctt-chev { transition: none; }
}

/* Ziel-Streifen oben im Coach */
.coach-goal-strip {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.cgs-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.cgs-value { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.cgs-change { background: transparent; border: none; color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; padding: 2px 4px; }
.cgs-change:hover { text-decoration: underline; }

/* Onboarding / Ziel-Auswahl (Vollbild) */
.goal-overlay {
  position: fixed; inset: 0; z-index: 120; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.goal-card-wrap { width: 100%; max-width: 420px; position: relative; margin: auto; }
.goal-close {
  position: absolute; top: -4px; right: 0; width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: var(--radius-sm); font-size: 20px; line-height: 1; cursor: pointer;
}
.goal-close:hover { color: var(--text); border-color: var(--border-strong); }
.goal-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.goal-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }
.goal-cards { display: flex; flex-direction: column; gap: 10px; }
.goal-card {
  text-align: left; padding: 16px; cursor: pointer; touch-action: manipulation;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, background .15s;
}
.goal-card:hover { border-color: var(--accent); background: var(--surface-2); }
.goal-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.goal-card-label { font-size: 16px; font-weight: 800; color: var(--text); }
.goal-card-tpl { font-size: 12px; color: var(--text-faint); }
.goal-skip {
  margin-top: 16px; width: 100%; padding: 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
  font-family: inherit; font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: .03em; border-radius: var(--radius-sm);
}
.goal-skip:hover { color: var(--text); border-color: var(--text-dim); }

/* Meine Plaene */
.coach-myplans-head { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; margin-bottom: 10px; }
.coach-add-plan { white-space: nowrap; }
.coach-myplans { display: flex; flex-direction: column; gap: 8px; }
.plan-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px;
}
.plan-row-main { flex: 1; min-width: 0; cursor: pointer; }
.plan-row-name { font-weight: 800; font-size: 14px; color: var(--text); }
.plan-row-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.plan-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.plan-activate-btn {
  padding: 7px 12px; background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-dim); font-family: inherit; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; cursor: pointer; border-radius: var(--radius-sm);
  transition: color .15s, border-color .15s;
}
.plan-activate-btn:hover { color: var(--text); border-color: var(--accent); }
.plan-active-pill {
  padding: 6px 12px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  border-radius: var(--radius-sm);
}
.plan-del-btn {
  width: 30px; height: 30px; flex-shrink: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-faint);
  border-radius: var(--radius-sm); font-size: 16px; line-height: 1;
}
.plan-del-btn:hover { color: var(--down); border-color: var(--down); }

/* Plan-Editor Overlay */
.plan-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  /* oben safe-area + Abstand: Titel/Schliess-X sollen nicht unter Uhr/Island kleben */
  padding: calc(env(safe-area-inset-top, 0px) + 32px) 16px 32px; overflow-y: auto;
}
.plan-card {
  width: 100%; max-width: 480px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 20px; margin: auto;
}
.plan-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.plan-card-head h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.plan-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: var(--radius-sm); font-size: 22px; line-height: 1; cursor: pointer;
}
.plan-close:hover { color: var(--text); border-color: var(--border-strong); }
/* T8: Link zu "Letzte Trainings" im neuen Plan-Editor */
.plan-recent-link {
  width: 100%; min-height: 44px; margin-bottom: 6px; padding: 11px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-weight: 700; font-size: 13px; text-align: left;
  transition: border-color .15s, background .15s;
}
.plan-recent-link:hover { border-color: var(--border-strong); background: var(--surface); }
.plan-recent-hint { font-size: 12px; color: var(--text-dim); margin: 0 2px 14px; line-height: 1.4; }
.plan-card input[type="text"], .plan-day-label, .plan-ex-targets input, .plan-add-ex {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 16px; border-radius: var(--radius-sm); padding: 10px 12px;
}
.plan-card input:focus, .plan-add-ex:focus { outline: none; border-color: var(--accent); }
.plan-days { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.plan-day { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; background: var(--bg); }
.plan-day-head { display: flex; gap: 8px; margin-bottom: 10px; }
.plan-day-label { flex: 1; }
.plan-day-del {
  background: transparent; border: 1px solid var(--border); color: var(--text-faint);
  font-family: inherit; font-size: 11px; font-weight: 700; padding: 0 10px; cursor: pointer;
  border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .03em;
}
.plan-day-del:hover { color: var(--down); border-color: var(--down); }
.plan-day-empty { font-size: 13px; padding: 4px 0 10px; }
/* Plan-Editor-Zeile im Workout-Layout: Name + x oben, darunter die drei
   Felder voll-breit in einer Reihe mit Floating-Label (.lr-field/.lr-lab). */
.plan-ex-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.plan-ex-row:last-of-type { border-bottom: none; }
.plan-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-ex-info { flex: 1; min-width: 0; }
.plan-ex-name { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.plan-ex-grp { display: block; font-size: 11px; color: var(--text-faint); }
.plan-ex-targets { display: flex; gap: 8px; }
.plan-ex-targets .lr-field { flex: 1; }
.plan-ex-targets input { width: 100%; text-align: center; }
.plan-ex-del {
  width: 26px; height: 26px; flex-shrink: 0; background: transparent;
  border: 1px solid var(--border); color: var(--text-faint); border-radius: var(--radius-sm);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.plan-ex-del:hover { color: var(--down); border-color: var(--down); }
.plan-add-ex { width: 100%; margin-top: 10px; }
.plan-add-day { margin-bottom: 4px; }
.plan-actions { display: flex; gap: 8px; margin-top: 16px; }
.plan-actions .btn-primary { flex: 1; }

/* Plan-Kontext + Ziel-Hinweis in der Live-Session */
.plan-ctx-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px;
}
.pcc-txt { font-size: 12px; font-weight: 700; color: var(--text); }
.pcc-x {
  width: 24px; height: 24px; flex-shrink: 0; background: transparent; border: none;
  color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer;
}
.pcc-x:hover { color: var(--text); }
.live-ex-target { font-size: 11px; color: var(--text-faint); margin: 2px 0 8px; font-weight: 600; }

/* ---------- Analyse: Erfolgs-Kreise (Stories) ---------- */
.an-stories { display: flex; flex-direction: column; gap: 12px; }
.an-story {
  display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  cursor: pointer; text-align: left; color: inherit; width: 100%;
  transition: border-color .15s;
  animation: anStoryIn .42s cubic-bezier(.4,0,.2,1) both;
}
.an-story:hover { border-color: var(--border-strong); }
/* Erfolge-Popup (Bottom Sheet) */
.story-popup-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end;
  opacity: 0; transition: opacity .2s;
}
.story-popup-overlay.open { opacity: 1; }
.story-popup {
  width: 100%; background: var(--surface);
  border-radius: 20px 20px 0 0; padding: 24px 20px 40px; position: relative;
  transform: translateY(32px); transition: transform .25s cubic-bezier(.4,0,.2,1);
  max-height: 85vh; overflow-y: auto;
}
.story-popup-overlay.open .story-popup { transform: none; }
.story-popup-close {
  position: absolute; top: 12px; right: 12px;
  min-width: 44px; min-height: 44px; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-dim); font-size: 14px; cursor: pointer;
}
.story-popup-top {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.story-popup-labels { flex: 1; min-width: 0; }
.story-popup-head {
  display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px;
}
.story-popup-text {
  font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 0 0 12px;
}
.story-popup-dates {
  display: block; font-size: 11px; color: var(--text-faint);
  font-family: 'Geist Mono', monospace; margin-top: 8px;
}
.story-popup-lowdata {
  display: block; font-size: 11px; color: var(--text-faint); font-style: normal; margin-top: 4px;
}
@keyframes anStoryIn {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
  to { opacity: 1; transform: none; }
}
.an-ring { position: relative; width: 72px; height: 72px; flex: 0 0 72px; }
.an-ring svg { width: 72px; height: 72px; display: block; }
.an-ring-bg { fill: none; stroke: var(--border-strong); stroke-width: 5; stroke-dasharray: 3 5; opacity: .55; }
.an-ring-fg {
  fill: none; stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}
.an-ring.up .an-ring-fg { stroke: var(--accent); }
.an-ring.down .an-ring-fg { stroke: var(--down); }
.an-ring.neutral .an-ring-fg { stroke: var(--text-faint); }
.an-ring-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.an-ring.up .an-ring-val { color: var(--accent); }
.an-ring.down .an-ring-val { color: var(--down); }
.an-ring.neutral .an-ring-val { color: var(--text-dim); }
.an-story-body { min-width: 0; }
.an-story-label {
  display: block; font-size: 10px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em; font-family: 'Geist Mono', monospace;
}
.an-story-head { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 4px; }
.an-story.up .an-story-head { color: var(--text); }
.an-story-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.an-story-text em { color: var(--text-faint); font-style: normal; }
.an-spark { width: 100%; max-width: 170px; height: 26px; margin-top: 8px; display: block; }
.an-spark path { stroke-width: 2; }
.an-spark.up path { stroke: var(--accent); }
.an-spark.down path { stroke: var(--down); }
.an-story-empty {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); padding: 16px;
}
.an-story-empty-txt strong { display: block; font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.an-story-empty-txt p { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .an-story { animation: none; }
  .an-ring-fg { transition: none; }
}

@media (max-width: 600px) {
  /* Seitenanfang unter Notch/Dynamic Island schieben (Header sonst verdeckt). */
  .container { padding-top: calc(24px + env(safe-area-inset-top)); }
  /* Datum/Dauer nebeneinander, Datum etwas breiter. iOS gibt date-Inputs
     ein eigenes internes Layout mit intrinsischer Hoehe -> appearance:none
     + feste height macht beide Felder exakt gleich hoch. (Stand d5e76c3) */
  .backlog-head .track-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
  .backlog-head .track-grid input {
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box; width: 100%; min-width: 0;
    height: 44px; padding: 0 10px; line-height: normal; }
  .backlog-head .track-grid input[type="date"] { min-height: 0; text-align: left; }
  .an-story { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 14px; }
  .an-ring, .an-ring svg { width: 64px; height: 64px; }
  .an-ring { flex-basis: 64px; }
  /* Floating stat strip: compact, horizontally swipeable */
  .stats-bar {
    display: flex; gap: 8px; overflow-x: scroll;
    margin: 0 -16px 14px; padding: 0 16px 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Bug 3: explizit pan-x damit iOS Safari natives Scrollen nicht blockiert */
    touch-action: pan-x;
  }
  .stats-bar::-webkit-scrollbar { display: none; }
  .stat-card {
    flex: 0 0 auto; min-width: 96px; padding: 9px 12px;
    border-radius: var(--radius-lg); scroll-snap-align: start;
  }
  .stat-card h3 { font-size: 9px; margin-bottom: 4px; }
  .stat-card .value { font-size: 21px; }
  .stat-card:nth-child(2) { border-color: var(--accent); background: var(--accent-soft); }
  .stat-card:nth-child(2) .value { color: var(--accent); }

  /* Tabs become a sticky top menu bar, single swipeable row.
     top: env(safe-area-inset-top) -> die Leiste gleitet hoch und rastet mit
     Oberkante UNTER der Dynamic Island ein. Kein Groessenwechsel beim Andocken
     -> fluessig, kein Snap. inset = 0 ohne Notch / im Browser-Tab (== top:0). */
  .tabs {
    flex-wrap: nowrap; overflow-x: scroll; gap: 6px; justify-content: safe center;   /* K1: zentriert, faellt bei Ueberlauf sicher auf scrollbar zurueck */
    position: sticky; top: env(safe-area-inset-top); z-index: 20;
    background: var(--bg);
    margin: 0 -16px 0; padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
    /* Bug 3: ohne touch-action:pan-x unterbricht iOS den nativen horizontalen Scroll */
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  /* K2: kleinere Pills, 44px-Hitbox via Pseudo (nur vertikal -> klaut keine Nachbar-Klicks) */
  .tab-btn { flex: 0 0 auto; min-width: 0; min-height: 34px; padding: 6px 11px; font-size: 11px; letter-spacing: .02em; border-radius: 999px; }
  .tab-btn.tab-workout { padding: 6px 12px; font-size: 12px; }
  .tab-btn::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  /* K3: Coach-Untermenue auf Mobile wie die Hauptleiste (kompakter, scrollbar-Fallback) */
  .coach-nav { overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
  .coach-nav::-webkit-scrollbar { display: none; }
  .coach-nav-btn { min-height: 34px; padding: 6px 11px; font-size: 11px; letter-spacing: .02em; }
  .coach-nav-btn::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }

  /* Fixierter Hintergrund-Streifen ueber der Statusbar (Uhr/Dynamic Island),
     y = 0..inset. Deckt durchlaufenden Inhalt, der sonst zwischen Bildschirmrand
     und der bei y=inset eingerasteten Leiste durchscheinen wuerde. z-index 15:
     ueber dem Inhalt, aber unter den Tabs (20). +1px schliesst Subpixel-Spalt.
     pointer-events:none -> faengt keine Klicks. Hoehe 0 ohne Notch. */
  body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top) + 1px);
    background: var(--bg); z-index: 15; pointer-events: none;
  }

  .exercise-grid { grid-template-columns: 1fr; }
  .energy-inputs { grid-template-columns: 1fr; }
  .report-top {
    grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .report-kpis { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .coach-done { font-size: 38px; }
  .week-grid { overflow-x: auto; }
}

/* ============================================ */
/* ANALYSE                                       */
/* ============================================ */

/* Serien-Farben fuer Kombi-Chart, Toggles und Punkte */
.s-volume { --s: var(--accent); }
.s-weight { --s: #38bdf8; }
.s-sleep { --s: #a78bfa; }
.s-protein { --s: #fb923c; }
.s-creatine { --s: #2dd4bf; }
.s-reps { --s: #f472b6; }
.s-avgw { --s: #facc15; }

/* Zeitfenster-Schalter */
/* #56: row-gap groesser als gap, damit sich die vergroesserten Tippflaechen
   bei Umbruch nicht ueberlappen (die Pille bleibt optisch 32px, die Flaeche
   waechst per Pseudo-Element nach oben und unten auf 44px). */
.an-window { display: flex; gap: 8px; row-gap: 12px; flex-wrap: wrap; }
.an-win-btn {
  position: relative; min-height: 32px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: all .15s;
}
/* -7px, nicht -6px: das Pseudo-Element haengt an der Padding-Box, der 1px-Rand
   der Pille kommt also NICHT dazu. Mit -6px waren es gemessen 42px statt 44. */
.an-win-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.an-win-btn:hover { border-color: var(--border-strong); color: var(--text); }
.an-win-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Kombi-Chart */
.an-chart { margin-top: 12px; }
.an-chart-svg { width: 100%; height: 210px; display: block; }
.an-line { stroke: var(--s); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.an-dot { fill: var(--s); stroke: var(--bg); stroke-width: 1.5; }
.an-x { fill: var(--text-faint); font-size: 11px; text-anchor: middle; font-family: 'Geist Mono', monospace; }

/* Toggles / Legende */
.an-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.an-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  cursor: pointer; opacity: .45; transition: all .15s;
}
.an-toggle.on { opacity: 1; border-color: var(--s); }
.an-toggle:hover { border-color: var(--border-strong); }
.an-toggle.empty { opacity: .3; cursor: not-allowed; }
.an-dotmark { width: 10px; height: 10px; border-radius: 999px; background: var(--s); flex-shrink: 0; }
.an-tg-label { font-size: 12px; font-weight: 600; color: var(--text); }
.an-tg-val { font-size: 12px; color: var(--text-faint); font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; }

/* Korrelation */
.an-corr-pick { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.an-vs { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; }
.an-corr-chart { margin: 8px 0; }
.an-scatter { width: 100%; height: 240px; display: block; }
.an-sc-dot { fill: var(--accent); fill-opacity: .8; }
.an-reg { stroke: var(--text-dim); stroke-width: 1.5; stroke-dasharray: 5 4; }
.an-ax { fill: var(--text-faint); font-size: 12px; text-anchor: middle; }

.an-verdict {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  border-left-width: 3px;
}
.an-verdict.high { border-left-color: var(--accent); }
.an-verdict.mid { border-left-color: var(--text-dim); }
.an-verdict.low { border-left-color: var(--down); }
.an-r {
  font-size: 18px; font-weight: 800; font-family: 'Geist Mono', monospace;
  color: var(--text); flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.an-verdict.high .an-r { color: var(--accent); }
.an-verdict-txt { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 0; }

/* Insights */
.an-insights { display: flex; flex-direction: column; gap: 10px; }
.an-insight {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.an-insight p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.an-ins-mark { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; flex-shrink: 0; }
.an-insight.up .an-ins-mark { background: var(--accent); }
.an-insight.down .an-ins-mark { background: var(--down); }
.an-insight.flat .an-ins-mark { background: var(--text-faint); }

/* Deep-Dive */
.an-deep-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.an-deep-warn, .an-deep-good {
  padding: 12px 14px; border-radius: var(--radius-lg); font-size: 13px; margin-bottom: 14px;
}
.an-deep-warn { background: var(--down-soft); border: 1px solid var(--down-line); color: var(--down); }
.an-deep-good { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); }
.an-deep-chart .chart { width: 100%; height: auto; }

/* Wochenübersicht: Roundtable */
.an-sort-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.an-sort-pill {
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font-size: 12px; cursor: pointer;
  font-family: inherit; transition: border-color 0.15s, color 0.15s;
  min-height: 44px; display: inline-flex; align-items: center;
}
.an-sort-pill:hover { border-color: var(--border-strong); color: var(--text); }
.an-sort-pill.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.an-card-list { display: flex; flex-direction: column; gap: 6px; }
.an-card-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: var(--surface);
  border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.12s;
}
.an-card-row:hover { background: var(--surface-2); }
.an-card-left {
  display: flex; align-items: center; gap: 8px;
  min-width: 60px; padding-top: 3px; flex-shrink: 0;
}
.an-cdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.an-cdot-on { background: var(--accent); box-shadow: 0 0 5px rgba(var(--accent-glow-rgb), 0.5); }
.an-cdot-off { background: var(--border-strong); }
.an-card-wk { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.an-card-right { flex: 1; min-width: 0; }
.an-card-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.an-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 11px;
}
.an-chip-lbl { color: var(--text-faint); }
.an-chip-val { color: var(--text); font-weight: 600; font-family: 'Geist Mono', monospace; }
.an-chip-empty { font-size: 11px; color: var(--text-faint); padding-top: 2px; }
.an-card-extras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.an-xchip { font-size: 11px; color: var(--text-faint); }
.an-xchip b { color: var(--text-dim); font-weight: 500; }

@media (max-width: 600px) {
  .an-deep-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Z9: Gewichtsverlauf-Detail-Modal ---------- */
/* KEIN eigenes max-height: die 90vh standen spaeter als die 100% von .wi-card
   und gewannen bei gleicher Spezifitaet - dieser eine Overlay behielt dadurch
   die Unterkante unter dem Home-Indicator. Die Hoehe kommt jetzt von .wi-card. */
.wd-card { max-width: 440px; overflow-y: auto; }
@media (max-width: 440px) { .wd-card { max-width: 100%; } }

.wd-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.wd-section:last-child { border-bottom: none; padding-bottom: 4px; }

.wd-sec-label {
  font-size: 9px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
}

.wd-hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wd-hero-val {
  font-size: 32px; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1;
}
.wd-delta {
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px;
}
.wd-delta-up   { color: var(--down); background: var(--down-soft); }
.wd-delta-down { color: var(--accent); background: var(--accent-soft); }
.wd-delta-flat { color: var(--text-faint); background: var(--surface-2); }

.wd-sec-sub {
  font-size: 11px; color: var(--text-faint); margin-top: 5px;
  font-family: 'Geist Mono', monospace;
}

/* Trend-Chart */
.wd-chart-wrap { width: 100%; margin-top: 4px; }
.wd-chart { width: 100%; height: 90px; display: block; overflow: visible; }
.wd-line { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wd-trend {
  stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 4 3;
  stroke-linecap: round;
}
.wd-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.wd-chart-axis {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 10px; color: var(--text-faint); font-family: 'Geist Mono', monospace;
}

/* Wochentabelle */
.wd-table-wrap { max-height: 196px; overflow-y: auto; margin-top: 4px; }
.wd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wd-table th {
  font-size: 9px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left; padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface);
}
.wd-table td { padding: 6px 6px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.wd-table tr:last-child td { border-bottom: none; }
.wd-td-num { text-align: right; font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; }
.wd-td-up   { color: var(--down); }
.wd-td-down { color: var(--accent); }

/* Min/Max Range */
.wd-range { margin-top: 4px; }
.wd-range-bar {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 6px;
}
.wd-range-lbl {
  font-size: 12px; font-weight: 800; font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums; color: var(--text); flex: none; white-space: nowrap;
}
.wd-range-track {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; position: relative;
}
.wd-range-fill {
  position: absolute; left: 0; top: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, var(--text-faint) 0%, var(--accent) 100%);
  border-radius: 999px;
}
.wd-range-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-faint); font-family: 'Geist Mono', monospace;
}
.wd-range-meta b { color: var(--text); font-weight: 700; }

.wd-empty {
  font-size: 12px; color: var(--text-faint);
  font-family: 'Geist Mono', monospace; margin-top: 4px;
}

/* --- Chart-Tooltip (#8) --- */
.chart-tt {
  position: fixed; z-index: 1000;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12px; line-height: 1.7; color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  pointer-events: none; min-width: 140px; max-width: 200px;
}
.ct-wk {
  display: block; font-weight: 700; font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 5px; font-family: 'Geist Mono', monospace;
}
.ct-row { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.ct-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--s); }
.ct-val {
  display: block; font-size: 16px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; font-family: 'Geist Mono', monospace;
}

/* Scatter hit areas */
.an-sc-hit { fill: transparent; cursor: pointer; }

/* --- Volumen-Verlauf (#21) --- */
.vt-svg { width: 100%; height: 180px; display: block; cursor: pointer; }
.vt-area { fill: var(--accent-soft); }
.vt-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.vt-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }