/* ============================================================================
   TRACKING COACH — PREMIUM DESIGN SYSTEM v23
   Lädt NACH premium.css und überschreibt gezielt Tokens, Typografie,
   Komponenten, Navigation und Motion. Mobile First.
   Keine Klassennamen wurden umbenannt — die gesamte App-Logik bleibt intakt.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0. TYPOGRAFIE-QUELLE
   CSP erlaubt nur style-src 'self' — externe Google-Fonts sind blockiert.
   Auf iPhone/iPad liefert -apple-system exakt SF Pro Display/Text.
   Für Inter: woff2 nach assets/fonts/ legen und den Block unten aktivieren.

   @font-face { font-family:"Inter"; src:url("assets/fonts/Inter-Variable.woff2") format("woff2-variations");
                font-weight:100 900; font-display:swap; font-style:normal; }
--------------------------------------------------------------------------- */

:root {
  /* ---- Farbsystem (Vorgabe) ---- */
  --bg: #0B0F14;
  --bg-deep: #070A0E;
  --surface: #121A23;
  --surface-2: #17212D;
  --surface-3: #1E2A38;
  --text: #FFFFFF;
  --muted: #9CABBC;
  --muted-strong: #C3CFDC;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --accent: #9BEA4B;
  --accent-soft: #C6F58F;
  --accent-ink: #08230A;
  --accent-glow: rgba(155, 234, 75, 0.38);

  --protein: #4ADE80;
  --carbs: #3B82F6;
  --fat: #F59E0B;
  /* Textvarianten der Makrofarben — WCAG-tauglich auf dunklen Karten */
  --protein-text: #6EE7A0;
  --carbs-text: #7FB2FF;
  --fat-text: #FBBF3C;
  --error: #FF8A80;

  /* Legacy-Aliase aus premium.css bleiben gültig */
  --mint: var(--accent);
  --mint-strong: var(--accent-soft);
  --coral: var(--protein);
  --gold: var(--carbs);
  --blue: var(--fat);

  /* ---- Radius ---- */
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Tiefe ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(155, 234, 75, 0.28), 0 12px 38px rgba(155, 234, 75, 0.2);
  --ring-focus: 0 0 0 3px rgba(155, 234, 75, 0.55);

  /* ---- Glassmorphism ---- */
  --glass: rgba(18, 26, 35, 0.72);
  --glass-strong: rgba(11, 15, 20, 0.86);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* ---- Typo-Skala (mobile first, fluid) ---- */
  --fs-micro: 12px;
  --fs-caption: 14px;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-lg: 19px;
  --fs-xl: clamp(21px, 5vw, 24px);
  --fs-h2: clamp(23px, 5.8vw, 30px);
  --fs-h1: clamp(34px, 9vw, 54px);
  --fs-kpi: clamp(40px, 12vw, 58px);
  --fs-kpi-hero: clamp(48px, 15vw, 76px);

  --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
    "Segoe UI Variable Display", "Segoe UI", Roboto, "Poppins", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.28s;
}

:root[data-theme="light"] {
  --bg: #F4F7F2;
  --bg-deep: #E9EEE4;
  --surface: #FFFFFF;
  --surface-2: #F1F5EC;
  --surface-3: #E7EDE0;
  --text: #0F1720;
  --muted: #566372;
  --muted-strong: #33404F;
  --line: rgba(15, 23, 32, 0.1);
  --line-strong: rgba(15, 23, 32, 0.18);
  --accent: #4E7C15;
  --accent-soft: #6FA625;
  --accent-ink: #FFFFFF;
  --accent-glow: rgba(78, 124, 21, 0.25);
  --protein: #18985A;
  --carbs: #1D5FD0;
  --fat: #B4700A;
  --protein-text: #12784A;
  --carbs-text: #1A4FB0;
  --fat-text: #9A5E05;
  --error: #B3261E;
  --glass: rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(15, 23, 32, 0.08);
  --shadow: 0 14px 34px rgba(15, 23, 32, 0.1);
  --shadow-lg: 0 28px 60px rgba(15, 23, 32, 0.14);
}

/* ============================================================================
   1. BASIS & TYPOGRAFIE — Lesbarkeit hat höchste Priorität
   ========================================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(120% 70% at 88% -8%, rgba(155, 234, 75, 0.09), transparent 62%),
    radial-gradient(100% 60% at 4% 0%, rgba(59, 130, 246, 0.07), transparent 58%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root[data-theme="light"] body {
  background-image:
    radial-gradient(120% 70% at 88% -8%, rgba(78, 124, 21, 0.08), transparent 62%),
    radial-gradient(100% 60% at 4% 0%, rgba(29, 95, 208, 0.06), transparent 58%);
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.028em;
  font-weight: 750;
  margin-bottom: 10px;
}
h3 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  letter-spacing: -0.018em;
  font-weight: 700;
}
p { line-height: 1.6; }
small { font-size: var(--fs-caption); }

/* Harte Untergrenze: nichts darf kleiner als 12px werden */
small, span, label, td, th, li, b, i, em, strong, button, input, select, textarea, div, p, a {
  font-size: max(1em, var(--fs-micro));
}

/* Sekundärtext bekommt echten Kontrast statt Grau-in-Grau */
.muted, .section-description, .insight-description, .manual-hint, .hero-text,
.performance-intro, .calendar-help, .modal-intro, .water-note, .settings-note,
.training-view-intro, .wellness-view-intro, .view-intro, .exercise-library-intro {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* Kicker / Eyebrow — lesbar statt 9px */
.section-kicker, .eyebrow, .tools-label, .date-label, .water-visual-kicker,
.weight-history-title, .settings-block-title, .nutrient-group-title,
.performance-group-title, .exercise-group-heading {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-description { margin-bottom: 0; }

/* Alle Zahlenwerte: Tabellenziffern, damit nichts springt */
.calorie-ring-inner strong, .macro-amount, .week-stat strong, .week-summary strong,
.weight-latest strong, .water-overview strong, #waterVisualAmount, .entry-kcal,
.result-kcal, .preview-value, .calendar-day-metrics, .week-table-row,
.nutrient-value, .training-day-summary, .entry-count, .calorie-goal,
.calorie-summary strong, .macro-row-top {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ============================================================================
   2. KARTEN, TIEFE, GLASSMORPHISM
   ========================================================================= */

.panel,
.settings-card,
.login-card,
.modal-card,
.recovery-panel,
.training-entry-panel,
.training-session-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 38%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
}

.panel {
  padding: 22px;
  overflow: hidden;
}

/* Feiner Lichtsaum oben — erzeugt Tiefe wie in Apple Fitness */
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.entry-count,
.source-pill,
.quick-tag,
.frequent-tag,
.calendar-legend span,
.week-legend span {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.source-pill,
.entry-count {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  color: var(--muted-strong);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.source-dot { box-shadow: 0 0 10px var(--accent-glow); }

/* ============================================================================
   3. BUTTONS & TOUCH-ZIELE (min. 48px auf Mobil)
   ========================================================================= */

.button, .today-button, .result-add, .theme-toggle, .exercise-library-toggle,
.link-button, .back-button, .quick-tag, .frequent-tag {
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

.button, .today-button, .result-add, .theme-toggle, .exercise-library-toggle {
  min-height: 48px;
  padding: 12px 18px;
  background: var(--surface-2);
  border-color: var(--line);
}

.button:hover, .today-button:hover, .result-add:hover, .theme-toggle:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.button-primary {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(155, 234, 75, 0.22);
}
.button-primary:hover {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  filter: brightness(1.06);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.button-primary:active { transform: translateY(0) scale(0.985); }

.circle-button, .icon-button, .action-icon-button, .modal-close {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted-strong);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.circle-button:hover, .icon-button:hover, .action-icon-button:hover, .modal-close:hover {
  color: var(--text);
  background: var(--surface-3);
  transform: translateY(-1px);
}
.circle-button:active, .icon-button:active, .action-icon-button:active { transform: scale(0.94); }

.link-button, .back-button {
  font-size: var(--fs-sm);
  min-height: 48px;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 10px;
}

/* Ripple (wird von ux-enhance.js gesetzt) */
.tc-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
  animation: tc-ripple 0.55s var(--ease-out) forwards;
}
@keyframes tc-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ============================================================================
   4. FORMULARE — größer, klarer, iOS-zoomfrei (>=16px)
   ========================================================================= */

input, select, textarea {
  font-size: 16px; /* verhindert Auto-Zoom auf iPhone */
  min-height: 50px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  background: var(--surface-3);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }

.form-field > span,
.weight-field > span,
.water-custom-field > span,
.login-field > span {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--muted-strong);
  letter-spacing: -0.005em;
}

/* ============================================================================
   5. NAVIGATION
   ========================================================================= */

/* --- Desktop Sidebar --- */
@media (min-width: 961px) {
  .app-shell { padding-left: 258px; }
  .view-tabs {
    width: 258px;
    padding: 142px 16px 32px;
    gap: 6px;
    background: linear-gradient(180deg, var(--surface), var(--bg-deep));
    border-right: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }
  .view-tab {
    min-height: 56px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--muted-strong);
    gap: 14px;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
      color var(--dur) var(--ease);
  }
  .view-tab:hover { background: var(--surface-2); color: var(--text); transform: translateX(3px); }
  .view-tab.active {
    background: linear-gradient(135deg, rgba(155, 234, 75, 0.2), rgba(155, 234, 75, 0.06));
    color: var(--accent);
    border-color: rgba(155, 234, 75, 0.32);
    box-shadow: inset 3px 0 0 var(--accent), 0 8px 24px rgba(155, 234, 75, 0.1);
  }
  .view-tab.active .tab-icon { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow)); }
  .view-tabs::after {
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    opacity: 0.55;
  }
  .brand { width: 210px; }
  .brand-copy strong { font-size: 18px; letter-spacing: -0.035em; }
  .brand-copy small { font-size: 10px; letter-spacing: 0.18em; }
}

/* --- Mobile Bottom Navigation: Premium, Glass, Neon-Glow --- */
@media (max-width: 960px) {
  .view-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: var(--glass-strong);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.42);
  }
  .view-tab {
    flex: 1;
    min-height: 60px;
    gap: 5px;
    padding: 8px 4px;
    border-radius: 16px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--muted);
    transition: transform 0.24s var(--ease), color 0.24s var(--ease),
      background 0.24s var(--ease);
  }
  .view-tab .icon { width: 25px; height: 25px; }
  .view-tab.active {
    color: var(--accent);
    background: radial-gradient(120% 120% at 50% 0%, rgba(155, 234, 75, 0.2), rgba(155, 234, 75, 0.04));
    box-shadow: inset 0 0 0 1px rgba(155, 234, 75, 0.28);
  }
  .view-tab.active .tab-icon {
    filter: drop-shadow(0 0 10px var(--accent-glow));
    animation: tc-pop 0.34s var(--ease-out);
  }
  .view-tab:active { transform: scale(0.94); }
  .page-content { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(118px + env(safe-area-inset-bottom)); }
}

@keyframes tc-pop {
  0% { transform: scale(0.72); }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* --- Topbar --- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.sync-status {
  font-size: var(--fs-micro);
  font-weight: 650;
  color: var(--muted-strong);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
}
.sync-status::before { box-shadow: 0 0 9px currentColor; }

/* ============================================================================
   6. HERO
   ========================================================================= */

.hero-copy h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--accent-soft), var(--accent) 55%, #6FD3C8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-text { font-size: var(--fs-base); max-width: 44ch; }

.hero-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0) 30%, rgba(11, 15, 20, 0.82));
  pointer-events: none;
}
.hero-visual-overlay { z-index: 2; }
.hero-visual-overlay span { font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--accent); font-weight: 800; }
.hero-visual-overlay strong { font-size: var(--fs-xl); letter-spacing: -0.028em; }
.hero-visual-overlay small { font-size: var(--fs-caption); }

.mobile-day-bar {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.mobile-day-bar span { font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--accent); font-weight: 800; }
.mobile-day-bar strong { font-size: var(--fs-xl); letter-spacing: -0.03em; }
.mobile-day-bar small { font-size: var(--fs-caption); color: var(--muted); }
.mobile-date-button { min-height: 48px; font-size: var(--fs-caption); font-weight: 700; }

.date-control {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}
.date-display strong { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.date-display input { font-size: 16px; }

/* ============================================================================
   7. KPI / RINGCHART / MAKROS
   ========================================================================= */

.calorie-ring {
  width: min(268px, 74vw);
  height: min(268px, 74vw);
  padding: 14px;
  background:
    conic-gradient(from -90deg, var(--accent) var(--progress, 0deg), rgba(255, 255, 255, 0.07) 0);
  filter: drop-shadow(0 0 22px rgba(155, 234, 75, 0.22));
  transition: --progress 0.9s var(--ease-out);
}
.calorie-ring::after {
  content: "";
  position: absolute;
}
.calorie-ring-inner {
  background: radial-gradient(circle at 50% 30%, var(--surface-2), var(--surface) 70%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 12px 30px rgba(0, 0, 0, 0.4);
  gap: 2px;
}
.calorie-ring-inner strong {
  font-size: var(--fs-kpi);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.calorie-ring-inner span {
  font-size: var(--fs-caption);
  color: var(--muted-strong);
  font-weight: 650;
  letter-spacing: 0.02em;
}

.calorie-summary strong, .calorie-goal strong { font-size: var(--fs-xl); letter-spacing: -0.03em; }
.calorie-summary, .calorie-goal { font-size: var(--fs-sm); }

/* Makros — Protein grün, Kohlenhydrate blau, Fett orange */
.macro-list { gap: 18px; }
.macro-row {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.macro-row:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.macro-row-top { font-size: var(--fs-caption); font-weight: 750; letter-spacing: -0.005em; }
.macro-label { font-size: var(--fs-caption); font-weight: 750; }
.macro-amount { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.03em; }
.macro-amount > span { font-size: var(--fs-micro); color: var(--muted); font-weight: 650; }

.macro-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.macro-dot.protein { background: var(--protein); box-shadow: 0 0 12px rgba(74, 222, 128, 0.55); }
.macro-dot.carbs   { background: var(--carbs);   box-shadow: 0 0 12px rgba(59, 130, 246, 0.55); }
.macro-dot.fat     { background: var(--fat);     box-shadow: 0 0 12px rgba(245, 158, 11, 0.55); }
.macro-dot.fiber   { background: var(--accent);  box-shadow: 0 0 12px var(--accent-glow); }

.macro-row:has(.macro-dot.protein) .macro-label { color: var(--protein-text); }
.macro-row:has(.macro-dot.carbs) .macro-label   { color: var(--carbs-text); }
.macro-row:has(.macro-dot.fat) .macro-label     { color: var(--fat-text); }
.macro-row:has(.macro-dot.protein) { border-color: rgba(74, 222, 128, 0.26); }
.macro-row:has(.macro-dot.carbs)   { border-color: rgba(59, 130, 246, 0.26); }
.macro-row:has(.macro-dot.fat)     { border-color: rgba(245, 158, 11, 0.26); }

.progress-track {
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.progress-fill {
  border-radius: var(--radius-pill);
  transition: width 0.9s var(--ease-out);
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  box-shadow: 0 0 14px var(--accent-glow);
}
.progress-fill.protein { background: linear-gradient(90deg, #86EFAC, var(--protein)); box-shadow: 0 0 14px rgba(74, 222, 128, 0.5); }
.progress-fill.carbs   { background: linear-gradient(90deg, #93C5FD, var(--carbs));   box-shadow: 0 0 14px rgba(59, 130, 246, 0.5); }
.progress-fill.fat     { background: linear-gradient(90deg, #FCD34D, var(--fat));     box-shadow: 0 0 14px rgba(245, 158, 11, 0.5); }
.progress-fill.fiber   { background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }

/* ============================================================================
   7b. GRENZWERTE — individuelle Limits für Zucker, Natrium, Kreatin & Co.
   Wiederverwendet Farbsystem/Tokens der Makro- und Fortschrittskomponenten.
   ========================================================================= */

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

/* Kompakte Chip-Übersicht im Dashboard (nur sichtbar bei aktiven Limits) */
.limits-summary { margin-top: 4px; }
.limits-summary-title {
  font-size: var(--fs-micro);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.limit-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.limit-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 650;
  color: var(--muted-strong);
}
.limit-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.limit-chip.limit-ok .limit-chip-dot,
.limit-chip.limit-reached .limit-chip-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.limit-chip.limit-near .limit-chip-dot { background: var(--fat); box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.limit-chip.limit-exceeded .limit-chip-dot { background: var(--error); box-shadow: 0 0 10px rgba(255, 138, 128, 0.5); }
.limit-chip.limit-exceeded { border-color: rgba(255, 138, 128, 0.4); color: var(--error); }
.limit-chip.limit-reached { border-color: rgba(155, 234, 75, 0.35); }

/* Detailanzeige in der Wellness-Ansicht */
.limits-detail { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.limit-row {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.limit-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-caption); font-weight: 750; margin-bottom: 10px; }
.limit-amount > span { font-size: var(--fs-micro); color: var(--muted); font-weight: 650; }
.limit-status { display: block; margin-top: 8px; font-size: var(--fs-micro); font-weight: 650; color: var(--muted); }
.progress-fill.limit-fill { background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
.limit-row.limit-near .progress-fill.limit-fill { background: linear-gradient(90deg, #FCD34D, var(--fat)); }
.limit-row.limit-exceeded .progress-fill.limit-fill { background: linear-gradient(90deg, #FFB4AC, var(--error)); }
.limit-row.limit-exceeded { border-color: rgba(255, 138, 128, 0.35); }
.limit-row.limit-near { border-color: rgba(245, 158, 11, 0.3); }
.limit-row.limit-reached { border-color: rgba(155, 234, 75, 0.3); }
.limit-row.limit-exceeded .limit-status { color: var(--error); }
.limit-row.limit-near .limit-status { color: var(--fat-text); }
.limit-row.limit-reached .limit-status,
.limit-row.limit-ok .limit-status { color: var(--accent); }

/* Einstellungen-Dialog: eine Zeile je Substanz */
.limits-settings-list { display: flex; flex-direction: column; gap: 14px; }
.limit-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.limit-setting-toggle { display: flex; align-items: center; gap: 10px; font-size: var(--fs-caption); font-weight: 700; min-width: 0; }
.limit-setting-fields { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.limit-setting-fields input[type="number"] { flex: 1; min-width: 0; }
.limit-setting-unit { font-size: var(--fs-caption); color: var(--muted); flex-shrink: 0; }
.limit-setting-fields select { flex: 1.4; min-width: 0; }
.limits-hint { margin-top: 16px; }
@media (max-width: 520px) {
  .limit-setting-row { flex-direction: column; align-items: stretch; }
  .limit-setting-fields { min-width: 0; }
}

/* ============================================================================
   8. WASSERTRACKING — 3D-Flasche, Glow, flüssiger Füllstand
   ========================================================================= */

.water-visual-card {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(155, 234, 75, 0.14), transparent 60%),
    linear-gradient(140deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.water-visual-kicker { color: var(--accent); }
#waterVisualAmount {
  font-size: var(--fs-kpi-hero);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  display: block;
  background: linear-gradient(140deg, #FFFFFF, var(--accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#waterVisualGoal { font-size: var(--fs-sm); color: var(--muted-strong); display: block; margin-top: 6px; }
.water-visual-status { font-size: var(--fs-caption); color: var(--accent); font-weight: 700; display: block; margin-top: 10px; }

.water-visual-glow {
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  filter: blur(14px);
  animation: tc-breathe 4.5s ease-in-out infinite;
}
@keyframes tc-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.08); }
}

/* Die SVG-Flasche */
.tc-bottle { width: 100%; height: auto; max-width: 150px; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); }
.tc-bottle-fill-clip rect { transition: y 0.8s var(--ease-out), height 0.8s var(--ease-out); }
.tc-bottle-wave { animation: tc-wave 3.4s linear infinite; }
@keyframes tc-wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}

.water-track { height: 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.water-progress {
  background: linear-gradient(90deg, #6FD3C8, var(--accent));
  box-shadow: 0 0 18px var(--accent-glow);
  border-radius: var(--radius-pill);
  transition: width 0.8s var(--ease-out);
}

.water-overview strong { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.water-overview span { font-size: var(--fs-sm); color: var(--muted-strong); }
.water-icon { color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); }

.water-quick-add { display: flex; flex-wrap: wrap; gap: 10px; }
.water-quick-add button {
  min-height: 50px;
  flex: 1 1 88px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 750;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.water-quick-add button:hover {
  background: rgba(155, 234, 75, 0.14);
  border-color: rgba(155, 234, 75, 0.4);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.water-quick-add button:active { transform: scale(0.95); }

.water-glasses { display: flex; flex-wrap: wrap; gap: 10px; }
.water-glass {
  width: 58px;
  height: 66px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.water-glass-number { font-size: var(--fs-micro); font-weight: 750; }
.water-glass:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.water-glass:active { transform: scale(0.93); }
.water-glass.filled {
  background: linear-gradient(180deg, rgba(155, 234, 75, 0.22), rgba(155, 234, 75, 0.08));
  border-color: rgba(155, 234, 75, 0.45);
  color: var(--accent);
  box-shadow: 0 0 18px rgba(155, 234, 75, 0.2), inset 0 0 14px rgba(155, 234, 75, 0.12);
  animation: tc-pop 0.34s var(--ease-out);
}
.water-glass.partial {
  background: linear-gradient(180deg, rgba(155, 234, 75, 0.14), transparent);
  border-color: rgba(155, 234, 75, 0.28);
  color: var(--accent-soft);
}

/* ============================================================================
   9. LISTEN, EINTRÄGE, SUCHE
   ========================================================================= */

.food-result, .log-entry, .training-session-card, .exercise-library-item,
.weight-history-row, .week-table-row, .activity-row, .nutrient-row, .performance-row {
  border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.food-result:hover, .exercise-library-item:hover, .log-entry:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.food-result h3 { font-size: var(--fs-base); }
.food-result p { font-size: var(--fs-caption); color: var(--muted); }
.result-kcal { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.result-kcal small { font-size: var(--fs-micro); color: var(--muted); }
.result-add { min-width: 48px; min-height: 48px; }

.entry-kcal { font-size: var(--fs-base); font-weight: 800; letter-spacing: -0.02em; }
.entry-macros { font-size: var(--fs-caption); color: var(--muted); }
.entry-copy strong { font-size: var(--fs-base); }
.entry-action { min-width: 44px; min-height: 44px; }

.meal-heading { font-size: var(--fs-base); font-weight: 750; }
.meal-icon { color: var(--accent); }

.search-box input { min-height: 54px; font-size: 16px; }
.search-form .button-primary { min-height: 54px; }

.empty-state, .log-empty, .search-empty, .frequent-empty, .calendar-empty,
.nutrient-empty, .weight-empty, .training-session-empty, .exercise-library-empty {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
  padding: 26px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}
.empty-icon, .log-empty-icon, .empty-symbol { color: var(--accent); opacity: 0.85; }

/* ============================================================================
   10. WOCHE, KALENDER, TABELLEN
   ========================================================================= */

.week-summary strong { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.week-summary span { font-size: var(--fs-sm); color: var(--muted-strong); }

.week-bar-track { border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); }
.week-bar-fill {
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  box-shadow: 0 0 14px var(--accent-glow);
  transition: height 0.8s var(--ease-out), width 0.8s var(--ease-out);
}

.week-stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
}
.week-stat strong { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.03em; display: block; }
.week-stat span { font-size: var(--fs-micro); color: var(--muted); }

.calendar-day {
  border-radius: var(--radius-sm);
  min-height: 78px;
  padding: 10px 8px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.calendar-day:hover { transform: translateY(-2px); background: var(--surface-2); }
.calendar-day.current {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 20px rgba(155, 234, 75, 0.16);
}
.calendar-day-number { font-size: var(--fs-caption); font-weight: 750; }
.calendar-indicator { width: 7px; height: 7px; border-radius: 50%; }

/* ============================================================================
   11. MODALS
   ========================================================================= */

.modal-card {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}
.modal {
  border-radius: var(--radius-lg);
  animation: tc-modal-in 0.34s var(--ease-out);
}
@keyframes tc-modal-in {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.modal-header h2 { font-size: var(--fs-h2); }
.modal-intro { font-size: var(--fs-sm); }
.modal-actions .button { min-height: 52px; }

.toast {
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 14px 22px;
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  animation: tc-toast-in 0.3s var(--ease-out);
}
@keyframes tc-toast-in {
  from { opacity: 0; transform: translate(-50%, 18px); }
}

/* ============================================================================
   12. MOTION — Karten-Einblendung, 60 FPS (nur transform/opacity)
   ========================================================================= */

/* KEIN will-change hier (bewusst): transform/opacity allein reichen für eine
   einmalige, kurze Karten-Einblendung völlig aus. will-change:transform
   erzeugt einen neuen CSS-Containing-Block — jedes position:fixed-Element
   in einer solchen Karte (z. B. das Übungsauswahl-Sheet im Training)
   würde dann an die Karte statt an den Viewport andocken. Das gilt sowohl
   vor als auch nach der Animation, deshalb wird die Eigenschaft hier
   grundsätzlich nicht gesetzt statt sie nur nachträglich zurückzusetzen. */
.tc-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.tc-reveal.tc-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.view-panel[data-view-panel]:not([hidden]) {
  animation: tc-view-in 0.36s var(--ease-out);
}
@keyframes tc-view-in {
  from { opacity: 0; transform: translateY(10px); }
}

@property --progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ============================================================================
   13. MOBILE-OVERRIDES — überschreibt jede zu kleine Größe aus premium.css
   ========================================================================= */

@media (max-width: 720px) {
  .page-content { padding: 20px 16px calc(132px + env(safe-area-inset-bottom)); }
  .topbar { margin: 0 16px; min-height: 76px; gap: 10px; }
  .brand-copy strong { font-size: 17px; letter-spacing: -0.035em; }
  .brand-copy small { font-size: 10px; letter-spacing: 0.16em; }
  .top-actions { gap: 8px; }
  .top-actions .button,
  .top-actions .theme-toggle,
  .top-actions .action-icon-button { width: 46px; height: 46px; min-height: 46px; padding: 0; }
  .sync-status { font-size: var(--fs-micro); }

  h2 { font-size: var(--fs-h2); }
  .hero-copy h1 { font-size: clamp(36px, 10.5vw, 46px); letter-spacing: -0.04em; max-width: none; }
  .hero-copy .eyebrow { font-size: var(--fs-micro); }
  .hero-text { font-size: var(--fs-base); max-width: none; }
  .section-kicker { font-size: var(--fs-micro); }

  .panel { padding: 20px 18px; border-radius: var(--radius); }

  /* Große Zahlen — Kernanforderung */
  .calorie-ring { width: min(272px, 76vw); height: min(272px, 76vw); }
  .calorie-ring-inner strong { font-size: clamp(46px, 14vw, 60px); }
  .calorie-ring-inner span { font-size: var(--fs-caption); }
  #nutritionRemaining { font-size: var(--fs-base); }
  #nutritionMacros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #nutritionMacros .macro-row-top { font-size: var(--fs-caption); }
  #nutritionMacros .macro-amount { font-size: var(--fs-lg); }
  #nutritionMacros .macro-amount > span { font-size: var(--fs-micro); }
  .week-stat strong { font-size: var(--fs-lg); }
  .week-stat span { font-size: var(--fs-micro); }
  .week-table-header, .week-table-row { font-size: var(--fs-caption); gap: 8px; }
  .week-table-row strong { font-size: var(--fs-caption); }
  .weight-latest strong { font-size: var(--fs-kpi); }

  /* Kalender: 8px war unlesbar */
  .calendar-day { min-height: 74px; padding: 9px 6px; border-radius: 12px; }
  .calendar-day strong, .calendar-day-number { font-size: var(--fs-caption); }
  .calendar-day-metrics { font-size: var(--fs-micro); line-height: 1.35; }
  .calendar-day small { display: block; font-size: var(--fs-micro); }
  .calendar-weekdays, .calendar-grid { gap: 6px; }
  .calendar-weekdays span { font-size: var(--fs-micro); font-weight: 750; }

  /* Suchergebnisse */
  .food-result { padding: 15px; gap: 12px; }
  .food-result h3 { font-size: var(--fs-base); }
  .food-result p { font-size: var(--fs-caption); }
  .result-kcal { font-size: var(--fs-lg); }
  .result-kcal small { font-size: var(--fs-micro); }
  .food-result .result-add { min-width: 48px; min-height: 48px; }

  /* Training */
  .training-session-heading small { font-size: var(--fs-caption); }
  .training-session-heading .button { font-size: var(--fs-caption); min-height: 46px; padding: 10px 14px; }
  /* .training-tools, .exercise-library-toggle und .training-exercise-row sind
     jetzt Teil des konsolidierten TRAINING-Abschnitts weiter unten. */

  /* Sonstiges, das vorher auf 10–13px stand */
  .quick-tag, .frequent-tag { font-size: var(--fs-caption); padding: 9px 14px; min-height: 42px; }
  .view-tab { font-size: var(--fs-micro); }
  .toast { font-size: var(--fs-sm); }
  .inline-actions .button { font-size: var(--fs-caption); }
  .app-footer, .site-footer, .page-footer { font-size: var(--fs-caption); line-height: 1.6; }
  .home-actions p { font-size: var(--fs-sm); }
  .date-control .today-button { font-size: var(--fs-caption); min-height: 46px; }
  .recovery-panel .form-field > span { font-size: var(--fs-caption); }
  .modal .form-field > span { font-size: var(--fs-caption); }
  .modal-card { padding: 22px 18px; }
  .add-panel .section-description { font-size: var(--fs-sm); }

  /* Nährstoffpanel war auf Mobil komplett ausgeblendet — jetzt einklappbar sichtbar */
  .sidebar .nutrients-panel { display: block; }
  .sidebar .privacy-card p, .sidebar .privacy-card strong { display: block; }
  .sidebar .privacy-card { padding: 18px; }

  .water-glass { width: 54px; height: 62px; }
  .water-quick-add button { flex: 1 1 calc(33.333% - 7px); }
  .tc-bottle { max-width: 112px; }
}

/* iPhone SE / sehr schmale Geräte */
@media (max-width: 380px) {
  #nutritionMacros { grid-template-columns: 1fr; }
  .water-quick-add button { flex: 1 1 calc(50% - 5px); }
  .hero-copy h1 { font-size: 32px; }
}

/* ============================================================================
   14. DESKTOP — mehrspaltig, kein aufgeblasenes Mobile-Layout
   ========================================================================= */

@media (min-width: 1200px) {
  .page-content { padding: 40px 48px 64px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; }
  .insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .panel { padding: 28px; }
  .sidebar { position: sticky; top: 24px; align-self: start; }
}

@media (min-width: 1600px) {
  .page-content { max-width: 1760px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; }
  .week-panel .week-chart { min-height: 220px; }
}

/* ============================================================================
   15. ZUGÄNGLICHKEIT & SYSTEMEINSTELLUNGEN
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .tc-reveal { opacity: 1; transform: none; }
  .tc-bottle-wave, .water-visual-glow { animation: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: #C9D5E2; --line: rgba(255, 255, 255, 0.24); }
}

/* Standalone-Modus: echtes App-Gefühl, kein Text-Scrollbounce */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
  .topbar { padding-top: env(safe-area-inset-top); }
  .tc-install-hint { display: none !important; }
}

/* Install-Hinweis (A2HS) */
.tc-install-hint {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(100px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(155, 234, 75, 0.3);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-caption);
  animation: tc-toast-in 0.4s var(--ease-out);
}
.tc-install-hint strong { display: block; font-size: var(--fs-sm); margin-bottom: 3px; }
.tc-install-hint span { color: var(--muted-strong); }
.tc-install-hint button {
  margin-left: auto;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: var(--fs-caption);
  white-space: nowrap;
}
.tc-install-close {
  background: transparent !important;
  color: var(--muted) !important;
  padding: 10px !important;
  margin-left: 0 !important;
  min-width: 44px;
}
@media (min-width: 961px) {
  .tc-install-hint { left: auto; right: 28px; bottom: 28px; max-width: 420px; }
}

/* Splash — an das neue Farbsystem angeglichen */
.app-splash {
  background: radial-gradient(120% 90% at 50% 20%, #142033, var(--bg) 62%);
}
.app-splash strong { font-size: var(--fs-xl); letter-spacing: -0.03em; }
.app-splash span { font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--accent); font-weight: 800; }
.app-splash-mark svg { filter: drop-shadow(0 0 18px var(--accent-glow)); }

/* ============================================================================
   16. 3D-TRINKFLASCHE (CSS-only, füllt sich über --water-level aus app.js)
   ========================================================================= */

.tc-bottle {
  position: relative;
  width: clamp(88px, 26vw, 132px);
  aspect-ratio: 1 / 2.55;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 26px rgba(155, 234, 75, 0.18));
}

.tc-bottle-cap {
  width: 30%;
  height: 6.5%;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(160deg, var(--accent-soft), var(--accent) 45%, #6BA82F);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35), 0 0 16px var(--accent-glow);
  position: relative;
  z-index: 3;
}
.tc-bottle-cap::after {
  content: "";
  position: absolute;
  inset: 12% 14% auto 14%;
  height: 26%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
}

.tc-bottle-neck {
  width: 26%;
  height: 2.5%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0.04) 70%);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.tc-bottle-body {
  position: relative;
  width: 100%;
  flex: 1;
  /* Flaschensilhouette: Hals, Schulter, gerader Korpus, gerundeter Boden */
  clip-path: polygon(
    37% 0%, 63% 0%, 63% 9%, 72% 14%, 84% 21%, 92% 31%,
    92% 91%, 86% 97%, 74% 100%, 26% 100%, 14% 97%, 8% 91%,
    8% 31%, 16% 21%, 28% 14%, 37% 9%
  );
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0.02) 55%,
      rgba(255, 255, 255, 0.1) 84%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, 0.07),
    inset 0 -14px 24px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
}

.tc-bottle-liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--water-level, 0%);
  background: linear-gradient(180deg, #A9F05C 0%, var(--accent) 24%, #4FC4A8 78%, #2E9E8C 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 30px rgba(155, 234, 75, 0.45);
  transition: height 0.85s var(--ease-out);
  will-change: height;
}

/* Wellenoberfläche */
.tc-bottle-wave {
  position: absolute;
  left: -50%;
  top: -7px;
  width: 200%;
  height: 14px;
  background:
    radial-gradient(circle at 12px 14px, transparent 12px, var(--accent) 12px) repeat-x 0 0 / 24px 14px;
  opacity: 0.95;
  animation: tc-wave 2.8s linear infinite;
}
@keyframes tc-wave {
  from { transform: translateX(0); }
  to { transform: translateX(24px); }
}

/* Glanzlicht — sorgt für den 3D-Eindruck */
.tc-bottle-shine {
  position: absolute;
  top: 26%;
  left: 17%;
  width: 11%;
  height: 58%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
  filter: blur(1.5px);
  pointer-events: none;
}
.tc-bottle-body::after {
  content: "";
  position: absolute;
  top: 30%;
  right: 14%;
  width: 5%;
  height: 40%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
  filter: blur(1px);
  pointer-events: none;
}

/* Messskala */
.tc-bottle-ticks {
  position: absolute;
  inset: 34% 0 14% 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.24) 0 1px,
    transparent 1px 19%
  );
  width: 16%;
  left: 68%;
  pointer-events: none;
}

.water-visual-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.water-visual-art:hover .tc-bottle { transform: translateY(-4px) rotate(-1.5deg); }
.tc-bottle { transition: transform 0.4s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .tc-bottle-wave { animation: none; }
  .tc-bottle-liquid { transition: none; }
}

/* ============================================================================
   17. KORREKTUREN GEGEN premium.css & DAS LAUFZEIT-DOM AUS app.js
   app.js baut die Oberfläche in setupPremium() neu auf. Diese Regeln greifen
   auf die tatsächlich gerenderte Struktur zu, nicht auf die Rohfassung im HTML.
   ========================================================================= */

/* --- Wasser-Visual und Gläser waren in premium.css komplett ausgeblendet --- */
.water-glasses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.water-note,
.water-panel > .insight-description {
  display: block;
}
.water-visual-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 4px 0 18px;
}
.water-note { font-size: var(--fs-caption); color: var(--muted); margin: 12px 0 0; }
.water-glasses { margin-top: 16px; }

/* --- Tab-Icons: app.js rendert <svg class="icon icon-md"> ohne .tab-icon --- */
.view-tab .icon {
  transition: transform 0.26s var(--ease-out), filter 0.26s var(--ease-out);
}
.view-tab.active > .icon {
  filter: drop-shadow(0 0 10px var(--accent-glow));
  animation: tc-pop 0.34s var(--ease-out);
}
.view-tab:hover > .icon { transform: translateY(-1px); }

/* --- Reste unter 12px --- */
.home-training .section-kicker { font-size: var(--fs-micro); color: var(--accent-soft); }
.home-training p { font-size: var(--fs-sm); color: #D7E3EF; }
.brand-copy small { font-size: 11px; letter-spacing: 0.14em; }
@media (max-width: 720px) { .brand-copy small { font-size: var(--fs-micro); letter-spacing: 0.1em; } }

/* --- Home-Hero-Karte: große, motivierende Trainingsvisualisierung --- */
.home-training {
  border-radius: var(--radius-lg);
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.home-training > img { filter: saturate(0.85) contrast(1.05); transition: transform 0.9s var(--ease-out); }
.home-training:hover > img { transform: scale(1.04); }
.home-training::after {
  background: linear-gradient(180deg, rgba(11, 15, 20, 0) 8%, rgba(11, 15, 20, 0.82) 62%, var(--bg) 100%);
}
.home-training h2 { font-size: clamp(27px, 6.6vw, 36px); letter-spacing: -0.035em; max-width: 12ch; }

/* --- Tagesprotokoll / Home-Grid --- */
.home-actions p { font-size: var(--fs-base); font-weight: 650; }
.home-grid { gap: 22px; }
@media (min-width: 1200px) { .home-grid { gap: 26px; } }

/* --- Sync-Hinweis --- */
.sync-notice {
  border-radius: var(--radius);
  border-color: rgba(255, 138, 128, 0.45);
  background: linear-gradient(135deg, rgba(255, 138, 128, 0.12), var(--surface));
  font-size: var(--fs-sm);
}

/* --- Installations-Hinweis über dem Toast halten --- */
@media (max-width: 960px) {
  .tc-install-hint { bottom: calc(168px + env(safe-area-inset-bottom)); }
}

/* Wasser-Icon lag auf der Fett-Farbe (Orange) — Hydration gehört zum Akzent */
.water-icon,
.water-overview .water-icon,
.water-glass-icon { color: var(--accent); }
.water-overview .water-icon { filter: drop-shadow(0 0 12px var(--accent-glow)); }

/* Topbar: Marke und Aktionen teilen sich eine Zeile, Statuszeile darunter */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; align-items: center; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .top-actions { flex: 0 0 auto; margin-left: auto; }
  .top-actions .button,
  .top-actions .theme-toggle,
  .top-actions .action-icon-button { width: 44px; height: 44px; min-height: 44px; }
  .sync-status { flex: 1 0 100%; }
}
.brand-copy small { white-space: nowrap; letter-spacing: 0.09em; }

/* ============================================================================
   18. TRAINING — konsolidierter Block (ersetzt die fragmentierten,
   widersprüchlichen Regeln, die zuvor über drei Media Queries in
   premium.css verteilt waren). Mobile-first: die Basis gilt für alle
   Breiten, @media(min-width:...) erweitert gezielt für Tablet/Desktop.
   Betrifft: Seitenkopf, Werkzeugleiste (Letzte Einheit/Neuer Entwurf),
   Formular-Meta-Grid, Übungsauswahl als Bottom Sheet, Übungszeilen,
   Speichern-Button, gespeicherte Einheiten.
   ========================================================================= */

/* --- Seitenkopf: Seitentitel 28-32px, wie gefordert --- */
.training-view-intro h2 { font-size: clamp(28px, 8vw, 34px); letter-spacing: -0.03em; }
.training-view-intro .section-description { max-width: 52ch; }

/* --- Werkzeugleiste: Letzte Einheit / Neuer Entwurf --------------------
   Root Cause des ursprünglichen Bugs: .training-tools nutzte `flex:1` mit
   flex-basis 0 auf beiden Buttons, wodurch der Text unabhängig vom Inhalt
   auf eine feste, zu schmale Breite gepresst wurde. Jetzt: Buttons wachsen
   mit ihrem Inhalt (flex-basis:auto), umbrechen bei Bedarf als eigene Zeile. */
.training-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 22px;
}
.training-tools .button {
  flex: 0 1 auto;
  width: auto;
  min-height: 48px;
  padding: 12px 18px;
  white-space: nowrap;
  font-size: var(--fs-sm);
}
.training-tools > span {
  flex: 1 1 100%;
  order: 3;
  font-size: var(--fs-caption);
  color: var(--muted);
}
@media (min-width: 560px) {
  .training-tools > span { flex: 1 1 auto; order: 0; margin-left: 4px; }
}
@media (max-width: 380px) {
  .training-tools .button { flex: 1 1 100%; }
}

/* --- Formular-Meta-Grid: Datum / Kategorie / Status / Notiz -------------
   Root Cause des Quetsch-Bugs: .training-meta-grid trug zusätzlich die
   Klasse .two-columns, die innerhalb derselben 720px-Media-Query SPÄTER
   im Quellcode stand und dadurch bei gleicher Spezifität gewann — auf
   dem iPhone landete de facto immer die 2-Spalten-Regel für Modals.
   Fix: .training-meta-grid ist jetzt von .two-columns entkoppelt (siehe
   index.html) und bekommt eine eigene, in sich geschlossene Definition. */
.training-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.training-meta-grid .form-field,
.training-meta-grid .full-width { grid-column: 1; width: 100%; min-width: 0; }
@media (min-width: 700px) {
  .training-meta-grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  /* Ab hier greift wieder normale Grid-Auto-Platzierung: Datum + Kategorie
     nebeneinander (Zeile 1). Die feste grid-column:1 von oben wird gezielt
     aufgehoben, statt sie global zu vererben. */
  .training-meta-grid .form-field { grid-column: auto; width: auto; }
  .training-meta-grid .full-width,
  .training-meta-grid label:has(#trainingStage) { grid-column: 1 / -1; }
}

/* --- Übungen: "Übungen"-Überschrift + Liste + Trigger + Eigene Übung --- */
.training-exercise-list { display: grid; gap: 14px; margin-top: 4px; }

.tc-exercise-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line-strong);
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-base);
  font-weight: 750;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.tc-exercise-trigger:hover { background: rgba(155, 234, 75, 0.1); border-color: var(--accent); transform: translateY(-1px); }
.tc-exercise-trigger:active { transform: scale(0.98); }

.add-exercise-button.add-exercise-button {
  display: inline-flex;
  margin: 12px auto 0;
  min-height: 44px;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--muted-strong);
}

/* --- Übungszeile: Name + ✕ oben, darunter 2x2-Raster -------------------
   Nutzt die vorhandenen data-training-field-Attribute, um jedem Feld
   ohne HTML-/JS-Änderung eine Grid-Area zuzuweisen. */
.training-exercise-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
  padding: 18px 56px 18px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  align-items: start;
}
.training-exercise-name { grid-column: 1 / -1; }
.training-exercise-name input { font-size: var(--fs-base); font-weight: 650; }

.training-exercise-row label.form-field:has([data-training-field="sets"])        { grid-column: 1; }
.training-exercise-row label.form-field:has([data-training-field="reps"])        { grid-column: 2; }
.training-exercise-row label.form-field:has([data-training-field="weightKg"])    { grid-column: 1; }
.training-exercise-row label.form-field:has([data-training-field="restSeconds"]) { grid-column: 2; }

.training-remove-button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
}

/* premium.css setzt hier 11px mit höherer Spezifität (.klasse+Element) als
   die globale 12px-Untergrenze (Element allein) — hier gezielt korrigiert,
   statt die alte Regel zu duplizieren oder mit !important zu überschreiben. */
.training-weight-input b {
  top: auto;
  bottom: 15px;
  font-size: var(--fs-micro);
  font-weight: 700;
}

.previous-performance {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--fs-caption);
  padding-top: 4px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}
.previous-performance:empty { display: none; border: 0; margin: 0; padding: 0; }

@media (max-width: 360px) {
  .training-exercise-row { grid-template-columns: 1fr; padding-right: 18px; }
  .training-exercise-row label.form-field:has([data-training-field="sets"]),
  .training-exercise-row label.form-field:has([data-training-field="reps"]),
  .training-exercise-row label.form-field:has([data-training-field="weightKg"]),
  .training-exercise-row label.form-field:has([data-training-field="restSeconds"]) { grid-column: 1; }
  .training-remove-button { position: static; margin-left: auto; }
  .training-exercise-name { display: flex; flex-wrap: wrap; }
}

/* --- Erklärtext (Hinweis-Icon-Stil, ersetzt den langen Fließtext) ------- */
.manual-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.manual-hint span { color: var(--accent); font-weight: 800; flex-shrink: 0; }

/* --- Training speichern: volle Breite, groß, sicherer Abstand nach unten */
.training-form-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 14px;
  margin-top: 24px;
  padding-bottom: 4px;
}
.training-form-actions .button-primary {
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius);
  font-size: var(--fs-lg);
}
.training-form-actions #trainingStatus {
  font-size: var(--fs-caption);
  color: var(--muted);
  text-align: center;
}
@media (min-width: 640px) {
  .training-form-actions { flex-direction: row; justify-content: space-between; align-items: center; }
  .training-form-actions .button-primary { width: auto; min-width: 240px; }
  .training-form-actions #trainingStatus { text-align: left; }
}

/* ============================================================================
   ÜBUNGSAUSWAHL ALS MOBILE BOTTOM SHEET
   #exerciseLibraryPanel bleibt exakt an seiner Stelle im DOM — app.js kennt
   und steuert nur die Klasse .is-collapsed sowie das hidden-Attribut von
   #exerciseLibraryContent (unverändert). Hier wird ausschließlich die
   VISUELLE Rolle umdefiniert: geschlossen = unsichtbar, offen = Overlay,
   das den ganzen Bildschirm abdunkelt und die eigentliche Karte
   (.tc-sheet-card) am unteren Rand andockt.
   ========================================================================= */

.exercise-library-panel.is-collapsed { display: none; }

.exercise-library-panel:not(.is-collapsed) {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 6, 9, 0.6);
  backdrop-filter: blur(3px);
  animation: tc-fade-in 0.22s var(--ease-out);
  padding: 0;
}
@keyframes tc-fade-in { from { opacity: 0; } }

.tc-sheet-card {
  width: 100%;
  max-width: 640px;
  max-height: min(88dvh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-border);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: var(--shadow-lg);
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  animation: tc-sheet-in 0.32s var(--ease-out);
}
@keyframes tc-sheet-in {
  from { transform: translateY(100%); }
}
@media (min-width: 700px) {
  .tc-sheet-card { border-radius: 26px; margin-bottom: 5vh; }
}

.tc-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  margin: 4px auto 12px;
  flex-shrink: 0;
}

.exercise-library-heading {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  background: inherit;
  z-index: 1;
}
.exercise-library-heading #exercise-library-title { font-size: var(--fs-lg); font-weight: 750; }
.exercise-library-heading-actions { display: flex; align-items: center; gap: 10px; }
#exerciseFilterBadge {
  font-size: var(--fs-micro);
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  white-space: nowrap;
}

/* Der bestehende Umschalt-Button wird zum ✕-Icon, sobald das Sheet offen
   ist — der von app.js gesetzte Textinhalt bleibt für Screenreader
   erhalten, wird aber visuell durch ein generiertes ✕ ersetzt. */
.exercise-library-panel:not(.is-collapsed) #exerciseLibraryToggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  flex-shrink: 0;
}
.exercise-library-panel:not(.is-collapsed) #exerciseLibraryToggle::after {
  content: "✕";
  font-size: 17px;
  line-height: 1;
}

.exercise-library-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exercise-search-field input { font-size: 16px; min-height: 52px; }

/* Schnellfilter-Chips */
.exercise-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -4px;
}
.exercise-chip {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted-strong);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.exercise-chip:hover { border-color: var(--line-strong); }
.exercise-chip.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

/* Die Chips übernehmen die primäre Bedienung; das Dropdown bleibt als
   vollwertige Tastatur-/Screenreader-Alternative erhalten (sr-only-Technik,
   nicht display:none — sonst wäre es aus dem Tab-Fokus entfernt). */
.exercise-filter-field {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.exercise-filter-field:focus-within {
  position: static !important;
  width: auto; height: auto; margin: 0; padding: 2px;
  overflow: visible; clip: auto; white-space: normal;
}

.exercise-filter-summary { font-size: var(--fs-caption); }
.exercise-filter-reset { min-height: 36px; font-size: var(--fs-caption); }

.exercise-library-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: none;
  overflow-y: visible;
  margin-top: 0;
}
.exercise-library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface-2);
  text-align: left;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.exercise-library-item:hover { border-color: var(--line-strong); }
.exercise-library-item:active { transform: scale(0.98); }
.exercise-library-item > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.exercise-library-item strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exercise-library-item small { font-size: var(--fs-micro); color: var(--muted); }
.exercise-library-item b {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(155, 234, 75, 0.16);
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.exercise-library-item:hover b { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }

@media (min-width: 560px) {
  .exercise-library-list { grid-template-columns: 1fr 1fr; }
  .exercise-group-heading { grid-column: 1 / -1; }
}

/* --- Gespeicherte Einheiten (Trainingsverlauf des Tages) ---------------- */
.training-session-card { padding: 18px; }
.training-session-heading { gap: 12px; }
.training-session-heading small { color: var(--muted); }

/* --- Body-Scroll-Lock während das Sheet offen ist (von ux-enhance.js gesetzt) */
body.tc-sheet-open { overflow: hidden; }