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

/* ════════════════════════════════════════════════════════════════════════
   YAMA DESIGN SYSTEM — "GRAPHITE LAB"
   Wissenschaftlich-präzise. Cyan-Akzent auf neutralem Grau (Light)
   bzw. Tinten-Anthrazit (Dark). Manrope für UI, JetBrains Mono für Daten.
   Alte Variablen-Namen bleiben — nur Werte werden ersetzt.
═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Neutralpalette — kühl-grau (Light Default) */
  --neutral-0:#FFFFFF; --neutral-50:#F7F8FA; --neutral-100:#F1F3F6;
  --neutral-200:#E4E7EC; --neutral-300:#CBD0D8; --neutral-400:#9CA3AF;
  --neutral-500:#6B7280; --neutral-600:#4B5563; --neutral-700:#1F2937;
  --neutral-800:#0F1419; --neutral-900:#000000;

  /* Akzent — Yama Green, im Graphite Lab Stil */
  --accent-bg:rgba(134,201,34,0.10); --accent-soft:rgba(134,201,34,0.20);
  --accent-base:#86C922; --accent-strong:#5A8D14; --accent-text:#3B6D11;

  /* Status */
  --success-bg:rgba(5,150,105,0.10); --success-text:#047857; --success-base:#059669;
  --warning-bg:rgba(217,119,6,0.12); --warning-text:#92400E; --warning-base:#D97706;
  --danger-bg:rgba(220,38,38,0.10); --danger-text:#991B1B; --danger-base:#DC2626;
  --info-bg:rgba(134,201,34,0.10); --info-text:#0E7490; --info-base:#0891B2;

  /* Border */
  --border-default:rgba(15,20,25,0.08);
  --border-strong:rgba(15,20,25,0.15);

  /* Typografie — gleiche Stufen */
  --text-xs:11px; --text-sm:12px; --text-base:13px;
  --text-body:14px; --text-title:16px; --text-h2:22px;
  --text-h1:28px; --text-display:40px;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* Border-Radien */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px;
  --radius-lg:12px; --radius-pill:9999px;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(15,20,25,0.04);
  --shadow-2:0 2px 8px rgba(15,20,25,0.06);
  --shadow-3:0 12px 32px rgba(15,20,25,0.08),0 4px 8px rgba(15,20,25,0.04);

  /* Motion */
  --ease:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:100ms;
  --duration-base:180ms;
  --duration-slow:300ms;

  /* Schriften */
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* ── Alias-Layer: alte Variablen zeigen auf neue ── */
  --bg:var(--neutral-50);
  --bg-1:var(--neutral-0);
  --bg-2:var(--neutral-100);
  --bg-3:var(--neutral-200);
  --border:var(--border-default);
  --border-md:var(--border-strong);
  --text:var(--neutral-800);
  --text-2:var(--neutral-500);
  --text-3:var(--neutral-400);
  --accent:var(--accent-base);
  --accent-dark:var(--accent-strong);
  --accent-dim:var(--accent-bg);
  --accent-glow:rgba(134,201,34,0.20);
  --stat-bg:var(--neutral-800);
  --stat-text-2:var(--neutral-400);
  --r-sm:var(--radius-sm);
  --r-md:var(--radius-md);
  --r-lg:var(--radius-md);
  --r-xl:var(--radius-lg);
  --shadow:var(--shadow-1);
  --shadow-md:var(--shadow-2);
  --shadow-card:var(--shadow-2);
  --card-bg:var(--neutral-0);
  --input-bg:var(--neutral-0);
  /* Semantische Aliase ohne Suffix */
  --success:var(--success-base);
  --warning:var(--warning-base);
  --danger:var(--danger-base);
  --info:var(--info-base);
}
[data-theme="dark"]{
  /* Dark Mode: Graphit-Anthrazit mit leuchtendem Cyan */
  --neutral-0:#141A21; --neutral-50:#0F1419; --neutral-100:#1A2129;
  --neutral-200:#252D36; --neutral-300:#3A434E; --neutral-400:#6B7585;
  --neutral-500:#94A0B0; --neutral-600:#B0BBC9; --neutral-700:#D1D8E0;
  --neutral-800:#E8EDF2; --neutral-900:#FFFFFF;

  /* Akzent: helleres Yama-Grün, glow-tauglich */
  --accent-bg:rgba(157,209,91,0.10); --accent-soft:rgba(157,209,91,0.22);
  --accent-base:#9DD15B; --accent-strong:#B4DE82; --accent-text:#9DD15B;

  --success-bg:rgba(157,209,91,0.10); --success-text:#9DD15B;
  --warning-bg:rgba(255,180,84,0.12); --warning-text:#FFB454;
  --danger-bg:rgba(255,107,107,0.14); --danger-text:#FF8B8B;
  --info-bg:rgba(157,209,91,0.12); --info-text:#43D9D9;

  --border-default:rgba(232,237,242,0.08);
  --border-strong:rgba(232,237,242,0.15);
  --border:rgba(232,237,242,0.08);
  --shadow-1:none;
  --shadow-2:0 0 0 1px rgba(232,237,242,0.05);
  --shadow-3:0 0 0 1px rgba(232,237,242,0.07),0 12px 32px rgba(0,0,0,0.5);

  /* Aliase */
  --bg:#0F1419;
  --bg-1:#141A21;
  --bg-2:#1A2129;
  --bg-3:#252D36;
  --text:#E8EDF2; --text-2:#94A0B0; --text-3:#6B7585;
  --card-bg:#141A21; --input-bg:#1A2129;
  --accent:var(--accent-base); --accent-dark:var(--accent-base); --accent-dim:var(--accent-bg);
  --accent-glow:rgba(157,209,91,0.30);
  --stat-bg:#0F1419; --stat-text-2:#6B7585;
  /* Semantische Aliase im Dark Mode */
  --success:var(--success-text);
  --warning:var(--warning-text);
  --danger:var(--danger-text);
  --info:var(--info-text);
}

/* ── Body: Manrope-Schrift, Grid-Hintergrund ────────────────────────────── */
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}
/* Subtiler Grid-Hintergrund nur auf der Hero-Section */
body::before{
  content:'';
  position:fixed;
  top:0; left:0; right:0;
  height:80vh;
  background-image:
    linear-gradient(rgba(15,20,25,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,20,25,0.04) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
  z-index:-1;
  -webkit-mask-image:radial-gradient(ellipse at center top, black 0%, transparent 70%);
  mask-image:radial-gradient(ellipse at center top, black 0%, transparent 70%);
  opacity:0.7;
}
[data-theme="dark"] body::before{
  background-image:
    linear-gradient(rgba(232,237,242,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,237,242,0.025) 1px, transparent 1px);
}

/* ── Tabular nums + Mono für Daten-Klassen ──────────────────────────────── */
.mono,
[class*="metric-val"],
[class*="stat-num"],
[class*="-num"]{
  font-family:var(--font-mono);
}

/* ── Globale Komponenten-Updates ──────────────────────────────────────── */

/* Headings: Manrope Bold-Black für Display, weight 600 für H1-H4, klare Stufen */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-0.015em;font-weight:600;color:var(--neutral-800);font-family:var(--font-body)}
h1{font-size:var(--text-h1);letter-spacing:-0.025em;font-weight:700}
h2{font-size:var(--text-h2);font-weight:700}
h3{font-size:var(--text-title);font-weight:600}
h4{font-size:var(--text-body);font-weight:600}

/* Display-Klasse: für Hero-Moments, Manrope Bold mit engem Tracking */
.display{font-size:var(--text-display);font-weight:800;letter-spacing:-0.035em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--neutral-800)}

/* Headline: für Marketing-Hero — fett und kompakt */
.headline{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-0.035em;line-height:0.95;color:var(--neutral-800)}

/* Tabular numerals + Mono für ALLE Datenwerte */
.num,[class*="-val"],[class*="-value"]{font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-weight:600}

/* Buttons: kantiger, JetBrains Mono für Labels, weight 600, leicht uppercase */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 18px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all var(--duration-base) var(--ease);white-space:nowrap;line-height:1.4}
.btn-primary{background:var(--neutral-800);color:var(--neutral-0);border-color:var(--neutral-800)}
.btn-primary:hover{background:var(--accent-base);border-color:var(--accent-base);color:var(--neutral-0);box-shadow:0 8px 32px var(--accent-glow);transform:translateY(-1px)}
[data-theme="dark"] .btn-primary{background:var(--accent-base);color:#0F1419;border-color:var(--accent-base)}
[data-theme="dark"] .btn-primary:hover{background:#FFF;border-color:#FFF;box-shadow:0 0 32px var(--accent-glow)}
.btn-accent{background:var(--accent-base);color:#FFF;border-color:var(--accent-base)}
.btn-accent:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#FFF;transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-glow)}
[data-theme="dark"] .btn-accent{color:#0F1419}
.btn-ghost{background:transparent;color:var(--neutral-700);border-color:var(--border-strong)}
.btn-ghost:hover{color:var(--accent-base);border-color:var(--accent-base);background:transparent}
.btn-outline{background:var(--card-bg);color:var(--neutral-800);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--neutral-100);border-color:var(--accent-base);color:var(--accent-base)}
.btn-sm{padding:7px 14px;font-size:11px}
.btn-lg{padding:14px 26px;font-size:var(--text-base)}
.btn-pill{border-radius:var(--radius-pill);text-transform:none;letter-spacing:0.02em}

/* Cards: dezent, 1px Border, schwacher Schatten */
.card{background:var(--card-bg);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-5);transition:all var(--duration-base) var(--ease);box-shadow:var(--shadow-1)}
.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.card-accent{border-color:rgba(134,201,34,0.30);background:linear-gradient(180deg,var(--accent-bg) 0%,transparent 40%)}
[data-theme="dark"] .card-accent{border-color:rgba(157,209,91,0.30);background:linear-gradient(180deg,var(--accent-bg) 0%,transparent 40%)}

/* Badges: monospace mit leichtem uppercase */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px 9px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.badge-accent{background:var(--accent-bg);color:var(--accent-text);border:1px solid rgba(134,201,34,0.2)}
[data-theme="dark"] .badge-accent{border-color:rgba(157,209,91,0.3)}
.badge-neutral{background:var(--neutral-100);color:var(--neutral-600);border:1px solid var(--border-default)}

/* Tags */
.tag{display:inline-block;padding:2px 8px;border-radius:var(--radius-xs);font-size:var(--text-sm);font-weight:500;letter-spacing:0;background:var(--neutral-100);color:var(--neutral-600)}
.tag-accent{background:var(--accent-bg);color:var(--accent-text)}
.tag-green{background:var(--success-bg);color:var(--success-text)}
.tag-orange{background:var(--warning-bg);color:var(--warning-text)}
.tag-blue{background:var(--info-bg);color:var(--info-text)}
.tag-red{background:rgba(184,58,46,0.10);color:#B83A2E}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Plan-Detail: Pace+HF-Zeilen ausblenden im 'Nur Zonen'-Modus */
#plan-detail-weeks.hide-targets .plan-target { display: none !important; }

/* Forms */
.form-input,.form-select,.form-textarea{width:100%;background:var(--input-bg);border:0.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 12px;color:var(--neutral-800);font-size:var(--text-body);font-family:inherit;transition:border-color var(--duration-base),box-shadow var(--duration-base);outline:none;appearance:none;line-height:1.4}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent-base);box-shadow:0 0 0 3px var(--accent-bg)}
.form-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--neutral-600);margin-bottom:6px;letter-spacing:0}

/* Filter pills: kantiger, einheitliche Größe */
.filter-btn{padding:6px 14px;border-radius:var(--radius-pill);background:var(--card-bg);border:0.5px solid var(--border-strong);color:var(--neutral-500);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--duration-base);font-family:inherit;line-height:1.4}
.filter-btn:hover{border-color:var(--neutral-300);color:var(--neutral-800)}
.filter-btn.active{background:var(--neutral-800);border-color:var(--neutral-800);color:var(--neutral-0)}

/* Caption: kleiner, ruhiger */
.caption{font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;font-weight:500;color:var(--neutral-500)}

/* Modal: kantiger, weniger drama */
.modal{background:var(--card-bg);border:0.5px solid var(--border-strong);border-radius:var(--radius-md);padding:24px;width:100%;max-width:500px;box-shadow:var(--shadow-3);transform:translateY(10px);transition:transform var(--duration-slow) var(--ease)}

/* Pulse-Animation deaktivieren (war zu unruhig) */
@keyframes pulse{0%,100%{opacity:1;transform:none}50%{opacity:1;transform:none}}

/* 3D-Tilt am Mock-Device abschalten — wirkte 2017 */
.mock-device{transform:none !important}
.mock-device:hover{transform:none !important}

/* Hero-Glow deutlich dezenter */
.hero__glow{opacity:0.4}

/* Tabler Icons Defaults */
.ti{font-size:1em;line-height:1;vertical-align:-0.125em}

/* Sport-Icon-Dots: bleiben farbcodiert, aber kleiner Border-Radius nur wenn explizit */
.sport-icon-dot{width:36px;height:36px;border-radius:50%;background:var(--neutral-100);color:var(--neutral-700);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.sport-icon-dot[data-sport="run"]{background:var(--accent-bg);color:var(--accent-strong)}
.sport-icon-dot[data-sport="bike"]{background:#E0EDF8;color:#185FA5}
.sport-icon-dot[data-sport="swim"]{background:#D8EFE7;color:#0F6E56}
.sport-icon-dot[data-sport="strength"]{background:#FBEDD5;color:#854F0B}
.sport-icon-dot[data-sport="rest"]{background:var(--neutral-100);color:var(--neutral-400)}
[data-theme="dark"] .sport-icon-dot[data-sport="run"]{background:var(--accent-bg);color:var(--accent-base)}
[data-theme="dark"] .sport-icon-dot[data-sport="bike"]{background:rgba(111,165,217,0.12);color:#6FA5D9}
[data-theme="dark"] .sport-icon-dot[data-sport="swim"]{background:rgba(94,205,178,0.12);color:#5ECDB2}
[data-theme="dark"] .sport-icon-dot[data-sport="strength"]{background:rgba(212,163,86,0.12);color:#D4A356}

/* Glow auf Buttons im Dark-Mode entfernt (war zu auffällig) */
[data-theme="dark"] .btn-primary{box-shadow:none}
[data-theme="dark"] .btn-primary:hover{box-shadow:none}

/* Activity Row v2: dichte Listenform für Aktivitäten-Liste */
.act-row{display:grid;grid-template-columns:36px 1fr auto;gap:var(--space-4);align-items:center;padding:14px 16px;border-bottom:0.5px solid var(--border-default);transition:background var(--duration-base);cursor:pointer;text-decoration:none;color:inherit}
.act-row:hover{background:var(--neutral-50)}
.act-row:last-child{border-bottom:none}

/* Monats-Volumen-Chart Bar-Default (wird auf Mobile via Media-Query überschrieben) */
.mvol-bar { width: 11px; }
.wvol-bar { width: 11px; }

/* Sport-Mix-Donut: Desktop zweispaltig (Donut + Legende daneben), Mobile gestapelt */
.sport-mix-layout {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
}
.sport-mix-legend { min-width: 0; }
.act-row__title{font-size:var(--text-body);font-weight:500;color:var(--neutral-800);margin-bottom:2px;display:flex;align-items:center;gap:8px}
.act-row__sub{font-size:var(--text-sm);color:var(--neutral-500)}
.act-row__stats{display:flex;gap:20px;align-items:center;font-variant-numeric:tabular-nums}
.act-row__stat{font-size:var(--text-body);color:var(--neutral-800);font-weight:500;text-align:right;min-width:56px}
.act-row__stat-unit{font-size:var(--text-xs);color:var(--neutral-500);font-weight:400;margin-left:2px}
@media (max-width:640px){
  .act-row{grid-template-columns:32px 1fr auto;padding:12px}
  .act-row__stats{flex-direction:column;gap:2px;align-items:flex-end}
  .act-row__stat{min-width:0}
}

/* Stat-Block für Aktivitäts-Detail: Display-Zahlen kompakt, alle in einer Zeile */
.stat-block{display:flex;flex-direction:column;gap:5px;min-width:0}
.stat-block__label{font-size:var(--text-xs);letter-spacing:0.06em;text-transform:uppercase;color:var(--neutral-500);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-block__value{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1;color:var(--neutral-800);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-block__value--accent{color:var(--accent-text)}
.stat-block__unit{font-size:12px;color:var(--neutral-500);font-weight:400;margin-left:2px}

/* PR-Pill */
.pr-pill{background:var(--accent-bg);color:var(--accent-text);font-size:var(--text-xs);font-weight:500;padding:2px 8px;border-radius:var(--radius-xs);letter-spacing:0.04em}

/* (Alte :root und [data-theme="dark"] Token-Blöcke wurden durch das neue
   Designsystem oben ersetzt — Aliase sorgen dafür dass bestehender Code
   weiterhin funktioniert.) */
[data-theme="dark"] body{background:var(--bg);color:var(--neutral-800)}
/* Header-Action-Buttons (Chat, Wellness, Notif-Bell, Settings) im Dark Mode:
   Icons innen erben currentColor → muss explizit auf hellen Text gesetzt
   sein, sonst sind die Icons unsichtbar. Wir machen das für ALLE Buttons
   in der nav-actions-Leiste die nur SVG/Icon enthalten. */
[data-theme="dark"] #nav-actions button{color:var(--neutral-800)}
[data-theme="dark"] #nav-actions button svg,
[data-theme="dark"] #nav-actions button i{color:var(--neutral-800)}
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea{background:var(--input-bg);color:var(--neutral-800);border-color:var(--border)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--neutral-400)}
[data-theme="dark"] .equip-item{background:var(--card-bg)}
[data-theme="dark"] .equip-delete{background:rgba(220,38,38,0.15);color:#f87171}
[data-theme="dark"] .equip-delete:hover{background:rgba(220,38,38,0.25)}
[data-theme="dark"] nav,[data-theme="dark"] .nav,[data-theme="dark"] .navbar{background:rgba(13,14,16,0.85);border-color:var(--border)}
[data-theme="dark"] .toast{background:var(--card-bg);color:var(--neutral-800);border:0.5px solid var(--border)}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.65)}
[data-theme="dark"] .cal-cell.today{background:rgba(134,201,34,0.15)}
[data-theme="dark"] .cal-cell.other-month{background:transparent;opacity:0.4}
[data-theme="dark"] .btn-primary{background:var(--accent);color:#0d0e10}
[data-theme="dark"] .btn-primary:hover{background:var(--accent-strong)}
[data-theme="dark"] .btn-ghost{background:transparent;color:var(--neutral-800);border-color:var(--border-md)}
[data-theme="dark"] .filter-btn.active{background:var(--accent);border-color:var(--accent);color:#0d0e10}
[data-theme="dark"] .sport-chip.active,[data-theme="dark"] .level-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
[data-theme="dark"] .nav__avatar{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
[data-theme="dark"] .auth-card{background:var(--card-bg)}
[data-theme="dark"] .conn-card,[data-theme="dark"] .act-card,[data-theme="dark"] .race-dist-card{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] hr{border-color:var(--border)}
[data-theme="dark"] .progress-bar,[data-theme="dark"] .equip-bar{background:var(--bg-3)}


/* Theme toggle button styles */
.theme-toggle{position:relative;width:36px;height:36px;border-radius:50%;border:0.5px solid var(--border);background:var(--neutral-100);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s var(--ease);padding:0;color:var(--neutral-800)}
.theme-toggle:hover{background:var(--bg-3);transform:scale(1.05)}
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}

.notif-bell{color:var(--neutral-800);transition:all 0.2s var(--ease)}
.notif-bell:hover{background:var(--bg-3) !important;transform:scale(1.05)}
.notif-bell svg{color:inherit}

.settings-btn{transition:all 0.2s var(--ease)}
.settings-btn:hover{background:var(--bg-3) !important;transform:scale(1.05)}
.settings-btn svg{color:inherit}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--neutral-800);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Pages müssen Platz für die fixed Navbar (52px) lassen.
   Wird bei Auth-Seiten und der Marketing-Home via body-Klasse abgeschaltet. */
#pages-root{padding-top:52px}
body.no-nav-offset #pages-root{padding-top:0}
/* (h1-h4, .display, .headline werden vom neuen Designsystem oben kontrolliert.) */
.title{font-size:18px;font-weight:500}
.caption{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;font-weight:500}
.text-2{color:var(--neutral-500)}.text-3{color:var(--neutral-400)}.text-accent{color:var(--accent-text)}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.container--sm{max-width:720px;margin:0 auto;padding:0 24px}
section{padding:72px 0}section.sm{padding:48px 0}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;display:flex;align-items:center;transition:all 0.4s ease;border-bottom:0.5px solid transparent}
.nav.scrolled{background:rgba(247,248,250,0.82);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom-color:var(--border)}
[data-theme="dark"] .nav.scrolled{background:rgba(15,20,25,0.82)}
.nav__inner{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:40px}
.nav__logo{font-family:var(--font-body);font-size:1.2rem;font-weight:800;letter-spacing:-0.03em;color:var(--neutral-800);text-decoration:none;flex-shrink:0;cursor:pointer}
.nav__logo span{color:var(--accent-base)}
/* Light/Dark Mark-Swap */
[data-theme="dark"] .nav__logo-mark--light{display:none !important}
[data-theme="dark"] .nav__logo-mark--dark{display:block !important}
.nav__links{display:flex;align-items:center;gap:4px;list-style:none;flex:1}
.nav__links a{color:var(--neutral-500);text-decoration:none;font-size:0.82rem;padding:6px 12px;border-radius:var(--r-sm);transition:color 0.2s;cursor:pointer;white-space:nowrap}
.nav__links a:hover{color:var(--neutral-800)}
.nav__links a.active{color:var(--neutral-800)}
.nav__actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--neutral-800);border-radius:2px;transition:transform 0.3s var(--ease),opacity 0.3s}

/* (Alte Button/Card/Badge/Tag-Definitionen wurden entfernt — werden vom
   neuen Designsystem oben kontrolliert. Hier ehemals: .btn pill-shaped,
   .card 28px Padding mit Schatten, .badge/.tag mit weight:600 etc.) */

/* Section label */
.section-label{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-label::before{content:'';display:block;width:20px;height:2px;background:var(--accent-strong);border-radius:2px}

/* Hero */
.hero{display:flex;align-items:flex-start;padding:20px 0 64px;position:relative;overflow:hidden}
.hero__glow{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:1000px;height:700px;background:radial-gradient(ellipse 80% 60% at 50% 10%,rgba(134,201,34,0.20) 0%,transparent 70%);filter:blur(40px);pointer-events:none}
[data-theme="dark"] .hero__glow{background:radial-gradient(ellipse 80% 60% at 50% 10%,rgba(157,209,91,0.30) 0%,transparent 70%)}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.hero__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.hero__dot{width:8px;height:8px;border-radius:50%;background:var(--accent-strong);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
.hero__sub{font-size:1.05rem;color:var(--neutral-500);max-width:480px;margin-bottom:28px;line-height:1.6;font-weight:400}
.hero__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero__stats{display:flex;gap:32px;margin-top:36px;padding-top:24px;border-top:0.5px solid var(--border)}
.hero__stat-value{font-size:1.75rem;font-weight:600;letter-spacing:-0.03em}
.hero__stat-label{font-size:0.8rem;color:var(--neutral-500);margin-top:2px}

/* Mock Device — white card */
.mock-device{background:#fff;border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow-card);transform:perspective(1000px) rotateY(-4deg) rotateX(2deg);transition:transform 0.4s var(--ease)}
.mock-device:hover{transform:perspective(1000px) rotateY(-1deg) rotateX(0deg)}
.mock-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mock-title{font-size:0.9rem;font-weight:500;color:var(--neutral-800)}
.mock-sub{font-size:0.72rem;color:var(--neutral-500)}
.mock-week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:20px}
.mock-day{display:flex;flex-direction:column;align-items:center;gap:4px}
.mock-day-label{font-size:0.6rem;color:var(--neutral-400);font-weight:600}
.mock-bar-wrap{width:100%;height:60px;background:var(--neutral-100);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden;border:0.5px solid var(--border)}
.mock-bar{width:100%;border-radius:4px}
.mock-bar.run{background:linear-gradient(to top,var(--accent-strong),var(--accent))}
.mock-bar.bike{background:linear-gradient(to top,#3b82f6,#93c5fd)}
.mock-bar.rest{background:var(--bg-3)}
.mock-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-metric{background:var(--neutral-100);border-radius:var(--radius-md);padding:12px}
.mock-metric-val{font-size:1.1rem;font-weight:600;letter-spacing:-0.03em;color:var(--neutral-800)}
.mock-metric-lbl{font-size:0.65rem;color:var(--neutral-500);margin-top:2px}
.mock-integrations{display:flex;align-items:center;gap:8px;margin-top:14px}
.mock-int-badge{font-size:0.65rem;font-weight:500;padding:3px 8px;border-radius:999px;background:var(--neutral-100);color:var(--neutral-500);border:0.5px solid var(--border)}

/* Features */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--accent-bg);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:1.4rem}
.feature-title{font-size:1.1rem;font-weight:500;margin-bottom:10px}
.feature-desc{font-size:0.88rem;color:var(--neutral-500);line-height:1.65}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.steps::before{content:'';position:absolute;top:28px;left:15%;right:15%;height:1px;background:linear-gradient(to right,transparent,var(--border) 20%,var(--border) 80%,transparent)}
.step-number{width:56px;height:56px;border-radius:50%;background:var(--card-bg);border:0.5px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;color:var(--accent-strong);margin-bottom:20px;position:relative;z-index:1}

/* Sport cards */
.sports-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sport-card{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/4;position:relative;cursor:pointer;transition:transform 0.3s var(--ease)}
.sport-card:hover{transform:scale(1.02)}
.sport-card__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.sport-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,15,20,0.88) 0%,rgba(15,15,20,0.15) 60%)}
.sport-card__content{position:absolute;bottom:0;left:0;right:0;padding:28px}
.sport-card__emoji{font-size:2.5rem;margin-bottom:12px;display:block}
.sport-card__title{font-size:1.4rem;font-weight:600;margin-bottom:4px;color:#fff}
.sport-card__sub{font-size:0.82rem;color:rgba(255,255,255,0.6)}
.sport-card--run .sport-card__bg{background-image:linear-gradient(135deg,#c8f5a0 0%,#6db33f 40%,#2d6a0a 100%)}
.sport-card--bike .sport-card__bg{background-image:linear-gradient(135deg,#bfdbfe 0%,#3b82f6 40%,#1e3a8a 100%)}
.sport-card--tri .sport-card__bg{background-image:linear-gradient(135deg,#e9d5ff 0%,#8b5cf6 40%,#3b0764 100%)}

/* CTA Banner */
.cta-banner{background:var(--neutral-800);border-radius:var(--r-xl);padding:80px 48px;text-align:center;position:relative;overflow:hidden}
.cta-banner h2,.cta-banner .headline{color:#fff}
.cta-banner .text-2{color:rgba(255,255,255,0.6)}
.cta-banner__glow{position:absolute;bottom:-40%;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(134,201,34,0.15) 0%,transparent 65%);pointer-events:none}

/* Plans */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan-card{background:var(--card-bg);border:0.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:transform 0.25s var(--ease),box-shadow 0.25s;box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.plan-card.featured{border-color:rgba(134,201,34,0.35)}
.plan-card__header{padding:24px 24px 0;background:var(--neutral-100)}
.plan-card__sport{font-size:2rem;margin-bottom:12px}
.plan-card__body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1;min-height:0}
.plan-card__title{font-size:1.1rem;font-weight:500;margin-bottom:6px}
/* Description nimmt verbleibenden Platz ein, damit Tags/Stats/Button bei
   allen Cards auf gleicher Höhe stehen */
.plan-card__desc{font-size:0.83rem;color:var(--neutral-500);margin-bottom:16px;line-height:1.55;flex:1 1 auto}
.plan-card__meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.plan-card__price{font-size:1.6rem;font-weight:600;letter-spacing:-0.03em;margin-bottom:16px}
.plan-card__price span{font-size:0.85rem;font-weight:400;color:var(--neutral-500)}
/* Letzter Button in der Plan-Card-Body: nach unten ankern */
.plan-card__body > .btn:last-child{margin-top:auto}

/* Filter */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:40px}
/* (Alte .filter-btn Definition entfernt — neue ist im Designsystem oben.) */

/* Generator */
.gen-progress{display:flex;align-items:center;gap:0;margin-bottom:48px}
.gen-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative}
.gen-step::after{content:'';position:absolute;top:18px;left:calc(50% + 20px);right:calc(-50% + 20px);height:1px;background:var(--border)}
.gen-step:last-child::after{display:none}
.gen-step__dot{width:36px;height:36px;border-radius:50%;background:var(--card-bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:500;color:var(--neutral-400);transition:all 0.3s var(--ease);position:relative;z-index:1;box-shadow:var(--shadow)}
.gen-step.active .gen-step__dot{background:var(--neutral-800);border-color:var(--neutral-800);color:#fff}
.gen-step.done .gen-step__dot{background:var(--accent);border-color:var(--accent-strong);color:var(--neutral-800)}
.gen-step__label{font-size:0.7rem;font-weight:600;color:var(--neutral-400);letter-spacing:0.04em;text-transform:uppercase}
.gen-step.active .gen-step__label{color:var(--neutral-800)}
.gen-step.done .gen-step__label{color:var(--accent-strong)}
.gen-panel{display:none}.gen-panel.active{display:block}
.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.option-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.option-btn{background:var(--card-bg);border:2px solid var(--border);border-radius:var(--radius-md);padding:20px;cursor:pointer;text-align:left;transition:all 0.2s var(--ease);color:var(--neutral-800);font-family:inherit;box-shadow:var(--shadow)}
.option-btn:hover{border-color:var(--border-md);box-shadow:var(--shadow-md)}
.option-btn.selected{border-color:var(--accent-strong);background:var(--accent-bg)}
.option-btn__icon{font-size:1.8rem;margin-bottom:8px;display:block}
.option-btn__title{font-size:0.95rem;font-weight:500}
.option-btn__sub{font-size:0.78rem;color:var(--neutral-500);margin-top:3px}

/* Forms */
.form-group{margin-bottom:24px}
.form-label{display:block;font-size:0.82rem;font-weight:600;color:var(--neutral-500);margin-bottom:8px;letter-spacing:0.02em}
.form-input,.form-select,.form-textarea{width:100%;background:var(--input-bg);border:0.5px solid var(--border);border-radius:var(--radius-md);padding:12px 16px;color:var(--neutral-800);font-size:0.9rem;font-family:inherit;transition:border-color 0.2s,box-shadow 0.2s;outline:none;appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent-strong);box-shadow:0 0 0 3px rgba(134,201,34,0.2)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-check{display:flex;align-items:flex-start;gap:12px}
.form-check input[type="checkbox"]{width:18px;height:18px;margin-top:1px;accent-color:var(--accent-strong);cursor:pointer;flex-shrink:0}
.form-check label{font-size:0.85rem;color:var(--neutral-500);cursor:pointer}
.form-check a{color:var(--accent-strong);text-decoration:none}

/* Calendar */
.calendar-layout{display:grid;grid-template-columns:1fr 220px;gap:16px;align-items:start}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-nav-btn{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--card-bg);border:0.5px solid var(--border-strong);color:var(--neutral-700);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all var(--duration-base);font-family:inherit;box-shadow:none;padding:0}
.cal-nav-btn:hover{background:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-800)}
.cal-month-year{font-size:15px;font-weight:500;min-width:160px;text-align:center;color:var(--neutral-800);letter-spacing:-0.01em;margin-left:6px}
.cal-view-toggle{display:flex;gap:3px;background:var(--neutral-100);border-radius:var(--radius-pill);padding:3px}
.cal-view-btn{padding:5px 12px;border-radius:var(--radius-pill);background:none;border:none;color:var(--neutral-500);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all var(--duration-base)}
.cal-view-btn.active{background:var(--card-bg);color:var(--neutral-800);box-shadow:0 1px 2px rgba(0,0,0,0.06)}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-weekdays--ext{grid-template-columns:30px repeat(7,1fr) 50px}
.cal-weekday--small{font-size:10px;color:var(--neutral-400)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid--ext{grid-template-columns:30px repeat(7,1fr) 50px}
.cal-kw{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--neutral-400);font-variant-numeric:tabular-nums}
.cal-kw.this-week{color:var(--accent-text);font-weight:500}
.cal-km{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--neutral-500);font-variant-numeric:tabular-nums;line-height:1.2;padding:4px 2px;text-align:center}
.cal-km.this-week{color:var(--accent-text);font-weight:500}
.cal-km__plan{font-size:9px;color:var(--neutral-400);font-weight:400}
.cal-weekday{text-align:center;font-size:10px;font-weight:500;color:var(--neutral-500);padding:6px 0;letter-spacing:0.08em;text-transform:uppercase}
.cal-cell{min-height:110px;border-radius:var(--radius-sm);background:var(--card-bg);border:0.5px solid var(--border-default);padding:8px;cursor:pointer;transition:border-color var(--duration-base),background var(--duration-base);position:relative;overflow:hidden;box-shadow:none}
.cal-cell:hover{border-color:var(--border-strong);background:var(--neutral-50);box-shadow:none}
.cal-cell.today{border-color:var(--accent-base);background:var(--accent-bg)}
.cal-cell.other-month{opacity:0.35;background:var(--neutral-50)}
.cal-cell__day{font-size:11px;font-weight:500;color:var(--neutral-500);margin-bottom:6px;font-variant-numeric:tabular-nums}
.cal-cell.today .cal-cell__day{color:var(--accent-text);font-weight:600}
@media (min-width: 1024px) {
  .cal-cell{min-height:140px;padding:8px 10px}
  .cal-cell__day{font-size:12px;margin-bottom:6px}
  .workout-pill{font-size:11px;padding:3px 7px 3px 6px;margin-bottom:4px}
  .workout-pill .pill-icon{width:12px;height:12px}
  .workout-pill .pill-icon svg{width:12px;height:12px}
  .workout-pill .pill-meta{font-size:10px}
}
.workout-pill{display:flex;align-items:center;gap:5px;padding:3px 6px 3px 5px;border-radius:4px;font-size:10px;font-weight:500;margin-bottom:3px;line-height:1.3;overflow:hidden}
.workout-pill .pill-icon{flex-shrink:0;width:11px;height:11px;display:inline-flex;align-items:center;justify-content:center}
.workout-pill .pill-icon svg{width:11px;height:11px;display:block}
/* Inhalt-Wrapper: stapelt Titel über Meta-Zeile */
.workout-pill .pill-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.workout-pill .pill-label{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.workout-pill .pill-meta{font-size:9px;opacity:0.75;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.workout-pill.run{background:rgba(134,201,34,0.18);color:var(--accent-strong)}
.workout-pill.bike{background:rgba(31,111,178,0.10);color:#103E6E}
.workout-pill.swim{background:rgba(15,110,86,0.10);color:#0B4E3B}
.workout-pill.strength{background:rgba(176,124,12,0.10);color:#704A07}
.workout-pill.rest{background:var(--neutral-100);color:var(--neutral-500)}
/* Geplant in der Zukunft (Default = manuell hinzugefügt, z.B. Drag-Drop) —
   gestrichelter Border, dezent. Diese Workouts sind "Notizen" — der User hat
   sie selbst reingelegt, oft spontan. */
.workout-pill.source-plan:not(.done):not(.missed){background:transparent;border:0.5px dashed currentColor;padding:1px 5px 1px 3px}
/* Aus Trainingsplan — durchgezogener Border + 📋-Symbol, optisch "verbindlich":
   das ist der offizielle Plan, kein Ad-hoc-Eintrag. */
.workout-pill.source-plan-from-template:not(.done):not(.missed){border-style:solid;border-color:currentColor}
.workout-pill.source-plan-from-template:not(.done):not(.missed)::before{content:"📋";font-size:0.7em;margin-right:2px;opacity:0.85}
/* Erledigt — kleiner Akzent-Streifen links */
.workout-pill.done{box-shadow:inset 2px 0 0 var(--accent-base)}
/* Matched — grünes Häkchen */
.workout-pill.matched .pill-check{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:0.78em;color:var(--accent-strong);font-weight:600;margin-left:2px}
[data-theme="dark"] .workout-pill.matched .pill-check{color:var(--accent-base)}
/* Verpasst */
.workout-pill.missed{background:rgba(184,58,46,0.06);color:#7A2017;border:0.5px dashed rgba(184,58,46,0.4);padding:1px 5px 1px 3px}
.workout-pill.missed .pill-label{text-decoration:line-through;text-decoration-thickness:1px;opacity:0.85}
[data-theme="dark"] .workout-pill.run{background:var(--accent-bg);color:var(--accent-base)}
[data-theme="dark"] .workout-pill.bike{background:rgba(111,165,217,0.14);color:#6FA5D9}
[data-theme="dark"] .workout-pill.swim{background:rgba(94,205,178,0.14);color:#5ECDB2}
[data-theme="dark"] .workout-pill.strength{background:rgba(212,163,86,0.14);color:#D4A356}
.cal-sidebar{display:flex;flex-direction:column;gap:14px}
.sidebar-card{background:var(--card-bg);border:0.5px solid var(--border-default);border-radius:var(--radius-md);padding:16px 18px;box-shadow:none}
.sidebar-card h3{font-size:11px;font-weight:500;color:var(--neutral-500);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px}
.week-stat{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.week-stat-label{font-size:12px;color:var(--neutral-500)}
.week-stat-value{font-size:13px;font-weight:500;color:var(--neutral-800);font-variant-numeric:tabular-nums}
.progress-bar{height:3px;background:var(--neutral-100);border-radius:999px;overflow:hidden;margin-bottom:14px}
.progress-bar__fill{height:100%;background:var(--accent-base);border-radius:999px}
.upcoming-workout{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:0.5px solid var(--border-default)}
.upcoming-workout:last-child{border-bottom:none;padding-bottom:0}
.upcoming-dot{width:6px;height:6px;border-radius:50%;margin-top:6px;flex-shrink:0}
.upcoming-dot.run{background:var(--accent-base)}.upcoming-dot.bike{background:var(--info-base)}.upcoming-dot.swim{background:#0F6E56}
.upcoming-title{font-size:13px;font-weight:500;color:var(--neutral-800)}
.upcoming-meta{font-size:11px;color:var(--neutral-500);margin-top:2px;font-variant-numeric:tabular-nums}
.int-chips{display:flex;flex-direction:column;gap:8px}
.int-chip{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-md);background:var(--neutral-100);border:0.5px solid var(--border);cursor:pointer;transition:all 0.2s;font-size:0.85rem;font-weight:600;color:var(--neutral-500)}
.int-chip:hover{border-color:var(--border-md);color:var(--neutral-800)}
.int-chip.connected{border-color:rgba(22,163,74,0.3);background:rgba(22,163,74,0.05);color:var(--neutral-800)}
.int-chip-icon{font-size:1.2rem}
.int-chip-status{margin-left:auto;font-size:0.7rem}
.int-chip.connected .int-chip-status{color:#16a34a}

/* Page Hero */
.page-hero{padding:120px 0 64px;text-align:center;position:relative;overflow:hidden;background:var(--bg)}
.page-hero__glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(134,201,34,0.18) 0%,transparent 70%);filter:blur(30px);pointer-events:none}
[data-theme="dark"] .page-hero__glow{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(157,209,91,0.25) 0%,transparent 70%)}
.page-hero__title{margin-bottom:16px}
.page-hero__sub{font-size:1.05rem;color:var(--neutral-500);max-width:560px;margin:0 auto}

/* Auth */
.auth-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 24px;position:relative;background:var(--neutral-100)}
.auth-glow{position:fixed;top:-20%;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(ellipse at 50% 0%,rgba(134,201,34,0.15) 0%,transparent 60%);pointer-events:none}
.auth-card{background:var(--card-bg);border:0.5px solid var(--border);border-radius:var(--r-xl);padding:48px;width:100%;max-width:440px;box-shadow:var(--shadow-card)}
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo a{font-size:1.6rem;font-weight:600;letter-spacing:-0.03em;color:var(--neutral-800);text-decoration:none;cursor:pointer}
.auth-logo span{color:var(--accent-strong)}
.auth-title{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:6px;letter-spacing:-0.03em}
.auth-sub{font-size:0.88rem;color:var(--neutral-500);text-align:center;margin-bottom:32px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--neutral-400);font-size:0.78rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-footer{text-align:center;margin-top:24px;font-size:0.85rem;color:var(--neutral-500)}
.auth-footer a{color:var(--accent-strong);text-decoration:none;font-weight:600;cursor:pointer}

/* Footer */
.footer{padding:64px 0 40px;border-top:0.5px solid var(--border);margin-top:80px;background:var(--neutral-100)}
.footer__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer__brand-logo{font-size:1.3rem;font-weight:600;letter-spacing:-0.03em;color:var(--neutral-800);margin-bottom:12px}
.footer__brand-logo span{color:var(--accent-strong)}
.footer__brand-desc{font-size:0.85rem;color:var(--neutral-500);line-height:1.7;max-width:260px}
.footer__col-title{font-size:0.75rem;font-weight:500;color:var(--neutral-800);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:16px}
.footer__links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer__links a{font-size:0.85rem;color:var(--neutral-500);text-decoration:none;transition:color 0.2s;cursor:pointer}
.footer__links a:hover{color:var(--neutral-800)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:0.5px solid var(--border)}
.footer__copy{font-size:0.8rem;color:var(--neutral-400)}
.footer__bottom-links{display:flex;gap:20px}
.footer__bottom-links a{font-size:0.8rem;color:var(--neutral-400);text-decoration:none}

/* Animations */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up:nth-child(2){transition-delay:0.1s}.fade-up:nth-child(3){transition-delay:0.2s}
.fade-up:nth-child(4){transition-delay:0.3s}.fade-up:nth-child(5){transition-delay:0.4s}

/* Mobile Nav */
.nav__mobile{display:none;position:fixed;top:52px;left:0;right:0;bottom:0;background:rgba(247,248,250,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:32px 24px;flex-direction:column;gap:8px;z-index:200;border-top:0.5px solid var(--border);overflow-y:auto}
[data-theme="dark"] .nav__mobile{background:rgba(15,20,25,0.97)}
.nav__mobile.open{display:flex}
.nav__mobile a{font-size:1.2rem;font-weight:600;color:var(--neutral-500);text-decoration:none;padding:14px 0;border-bottom:0.5px solid var(--border);transition:color 0.2s;cursor:pointer;display:block}
.nav__mobile a:hover{color:var(--neutral-800)}

/* Responsive */
@media(max-width:960px){
  .hero__grid{grid-template-columns:1fr}.hero__visual{display:none}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .sports-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr}.steps::before{display:none}
  .footer__inner{grid-template-columns:1fr 1fr}
  .calendar-layout{grid-template-columns:1fr}.cal-sidebar{display:none}
  .plans-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  section{padding:64px 0}
  .features-grid{grid-template-columns:1fr}.sports-grid{grid-template-columns:1fr}
  .option-grid{grid-template-columns:1fr}.option-grid.cols-3{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .hero__stats{flex-direction:column;gap:20px}
  .form-row{grid-template-columns:1fr}
  .auth-card{padding:32px 24px}
  .nav__links{display:none}.nav__toggle{display:flex}
  .plans-grid{grid-template-columns:1fr}
  .cta-banner{padding:48px 24px}
  .profile-layout{grid-template-columns:1fr}
  .profile-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px}
}

/* ── Toast ── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--neutral-800);color:#fff;padding:12px 24px;border-radius:980px;font-size:0.85rem;font-weight:600;z-index:9999;opacity:0;transition:all 0.3s ease;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:#16a34a}
.toast.error{background:var(--danger)}

/* ── Nav user state ── */
.nav__avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-bg);border:2px solid var(--accent-strong);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600;color:var(--accent-strong);cursor:pointer;flex-shrink:0;text-decoration:none;transition:transform 0.2s}
.nav__avatar:hover{transform:scale(1.08)}
.nav__username{font-size:0.82rem;font-weight:600;color:var(--neutral-800);cursor:pointer;white-space:nowrap}
.nav__username:hover{color:var(--accent-strong)}
@media (max-width:780px){.nav__username{display:none}}

/* ── Form error ── */
.form-error{font-size:0.78rem;color:var(--danger);margin-top:-16px;margin-bottom:16px;display:none;padding:8px 12px;background:rgba(220,38,38,0.06);border-radius:var(--r-sm);border:0.5px solid rgba(220,38,38,0.2)}

/* ── Profile page ── */
.profile-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.profile-nav{background:var(--card-bg);border:0.5px solid var(--border);border-radius:var(--radius-md);padding:8px;box-shadow:var(--shadow);position:sticky;top:72px}
.profile-nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-md);cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--neutral-500);transition:all 0.15s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.profile-nav-item:hover{color:var(--neutral-800);background:var(--neutral-100)}
.profile-nav-item.active{color:var(--neutral-800);background:var(--neutral-100)}
.profile-panel{display:none}.profile-panel.active{display:block}
.profile-card{background:var(--card-bg);border:0.5px solid var(--border);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow);margin-bottom:20px}
.profile-card h2{font-size:1rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:4px;color:var(--neutral-800)}
.profile-card .sub{font-size:0.82rem;color:var(--neutral-500);margin-bottom:24px}
.avatar-circle{width:80px;height:80px;border-radius:50%;background:var(--accent-bg);border:3px solid var(--accent-strong);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:600;color:var(--accent-strong);flex-shrink:0}
.sport-chips{display:flex;gap:8px;flex-wrap:wrap}
.sport-chip{padding:8px 16px;border-radius:980px;border:2px solid var(--border);font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.15s;background:var(--card-bg);font-family:inherit}
.sport-chip:hover{border-color:var(--border-md)}
.sport-chip.active{border-color:var(--accent-strong);background:var(--accent-bg);color:var(--accent-strong)}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.level-btn{padding:12px 8px;border-radius:var(--radius-md);border:2px solid var(--border);font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.15s;background:var(--card-bg);font-family:inherit;text-align:center}
.level-btn:hover{border-color:var(--border-md)}
.level-btn.active{border-color:var(--accent-strong);background:var(--accent-bg);color:var(--accent-strong)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.38);backdrop-filter:blur(6px);z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity 0.2s;overflow-y:auto}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--card-bg);border-radius:var(--r-xl);padding:32px;width:100%;max-width:500px;max-height:calc(100vh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-md);transform:translateY(10px);transition:transform 0.25s var(--ease)}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;position:sticky;top:-32px;background:var(--card-bg);padding:32px 32px 12px;margin:-32px -32px 12px;border-bottom:0.5px solid var(--border);z-index:2}
.modal-title{font-size:1.1rem;font-weight:600;letter-spacing:-0.02em}
.modal-close{background:none;border:none;cursor:pointer;color:var(--neutral-400);font-size:1.4rem;line-height:1;padding:2px 6px;border-radius:var(--r-sm);transition:background 0.15s}
.modal-close:hover{background:var(--neutral-100)}

/* Mobile-Modal: weniger Padding, Vollbild-ähnlich */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal {
    padding: 20px;
    border-radius: 0;
    max-height: 100vh;
    max-width: 100%;
  }
  .modal-header {
    top: -20px;
    padding: 20px 20px 10px;
    margin: -20px -20px 10px;
  }
}

/* ── Sport-Selector im Modal ── */
.sport-select-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:4px}
@media (max-width: 640px){.sport-select-row{grid-template-columns:repeat(3,1fr)}}
.sport-select-btn{border:2px solid var(--border);border-radius:var(--radius-md);padding:10px 4px;text-align:center;font-size:0.63rem;font-weight:500;cursor:pointer;background:var(--card-bg);transition:all 0.15s;font-family:inherit;line-height:1.3}
.sport-select-btn .s-icon{display:block;font-size:1.2rem;margin-bottom:3px}
.sport-select-btn:hover{border-color:var(--border-md)}
.sport-select-btn.active{border-color:var(--accent-strong);background:var(--accent-bg);color:var(--accent-strong)}

/* ── Ausrüstung ── */
.equip-item{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--radius-md);border:0.5px solid var(--border);background:var(--card-bg);margin-bottom:10px;transition:box-shadow 0.2s;position:relative}
.equip-item:hover{box-shadow:var(--shadow)}
.equip-item:hover .equip-delete{opacity:1}
.equip-item:hover .equip-recalc{opacity:1}
.equip-item:hover .equip-edit{opacity:1}
.equip-delete{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:none;background:#fef2f2;color:var(--danger);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s,background 0.15s;padding:0}
.equip-delete:hover{background:#fecaca}
.equip-recalc{position:absolute;top:8px;right:42px;width:26px;height:26px;border-radius:50%;border:none;background:var(--neutral-100);color:var(--neutral-600);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s,background 0.15s;padding:0}
.equip-recalc:hover{background:var(--accent-bg);color:var(--accent-text)}
.equip-edit{position:absolute;top:8px;right:76px;width:26px;height:26px;border-radius:50%;border:none;background:var(--neutral-100);color:var(--neutral-600);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s,background 0.15s;padding:0}
.equip-edit:hover{background:var(--accent-bg);color:var(--accent-text)}
.equip-item-warn{border-color:rgba(184,58,46,0.35);background:rgba(184,58,46,0.03)}
.equip-icon{width:46px;height:46px;border-radius:var(--radius-md);background:var(--neutral-100);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.equip-name{font-size:0.9rem;font-weight:500}
.equip-meta{font-size:0.75rem;color:var(--neutral-500);margin-top:2px}
.equip-km{margin-left:auto;text-align:right;flex-shrink:0}
.equip-km-val{font-size:1rem;font-weight:600}
.equip-km-lbl{font-size:0.65rem;color:var(--neutral-500)}
.equip-bar{height:4px;background:var(--bg-3);border-radius:999px;overflow:hidden;margin-top:4px;width:80px}
.equip-bar-fill{height:100%;border-radius:999px;background:var(--accent-strong)}

/* ── Zone-Toggle ── */
.zone-mode-toggle{display:flex;gap:3px;background:var(--neutral-100);border-radius:999px;padding:3px;width:fit-content;margin-bottom:20px}
.zone-mode-btn{padding:7px 18px;border-radius:999px;border:none;font-size:0.78rem;font-weight:600;cursor:pointer;background:none;color:var(--neutral-500);font-family:inherit;transition:all 0.15s}
.zone-mode-btn.active{background:var(--card-bg);color:var(--neutral-800);box-shadow:0 1px 6px rgba(0,0,0,0.1)}
.custom-zone-row{display:grid;grid-template-columns:1fr 90px 90px;gap:10px;align-items:center;padding:10px 0;border-bottom:0.5px solid var(--border);font-size:0.82rem}
.custom-zone-row:last-child{border-bottom:none}
.custom-zone-row input{text-align:center}

/* ── Wettkampfschätzung ── */
.race-dist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
@media (max-width: 640px){.race-dist-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
.race-dist-card{background:var(--card-bg);border:2px solid var(--border);border-radius:var(--radius-md);padding:14px 8px;text-align:center;cursor:pointer;transition:all 0.15s;font-family:inherit}
.race-dist-card:hover{border-color:var(--border-md)}
.race-dist-card.active{border-color:var(--accent-strong);background:var(--accent-bg)}
.race-dist-card__label{font-size:0.68rem;font-weight:500;color:var(--neutral-500);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.04em}
.race-dist-card__km{font-size:0.9rem;font-weight:600}
.race-result-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:var(--radius-md);background:var(--neutral-100);margin-bottom:8px}
.race-result-row.highlight{background:var(--accent-bg);border:0.5px solid rgba(134,201,34,0.3)}
.race-result-row .dist{font-size:0.88rem;font-weight:500;min-width:80px}
.race-result-row .time{font-size:1.05rem;font-weight:600;letter-spacing:-0.02em}
.race-result-row .pace{font-size:0.78rem;color:var(--neutral-500)}

/* ── Verbindungen ── */
.conn-card{border:0.5px solid var(--border);border-radius:var(--radius-md);padding:20px;background:var(--card-bg);display:flex;align-items:center;gap:16px;margin-bottom:12px;transition:box-shadow 0.2s}
.conn-card:hover{box-shadow:var(--shadow)}
.conn-icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--neutral-100);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.conn-name{font-size:0.95rem;font-weight:500}
.conn-desc{font-size:0.78rem;color:var(--neutral-500);margin-top:2px}
.conn-status{margin-left:auto;flex-shrink:0}
.conn-btn-connect{padding:8px 20px;border-radius:980px;border:0.5px solid var(--border);background:var(--card-bg);font-size:0.78rem;font-weight:600;cursor:pointer;color:var(--neutral-800);font-family:inherit;transition:all 0.15s}
.conn-btn-connect:hover{border-color:var(--accent-strong);color:var(--accent-strong)}
.conn-btn-connected{padding:8px 20px;border-radius:980px;border:0.5px solid rgba(22,163,74,0.3);background:rgba(22,163,74,0.06);font-size:0.78rem;font-weight:600;cursor:pointer;color:#16a34a;font-family:inherit}
/* ════════════════════════════════════════════════════════════════════════
   NEON-DESIGN: ZUSATZ-STILE
   Mini-Stat-Inseln + Akzent-Highlights für Apple-Fitness-Look
═══════════════════════════════════════════════════════════════════════ */

/* Stat-Insel: dunkle Card mit Neon-Text — funktioniert in beiden Modi */
.stat-island{background:var(--stat-bg);border-radius:12px;padding:14px 16px;color:#fff}
.stat-island .stat-num,
.stat-island .week-stat-value{color:var(--accent) !important}
.stat-island .week-stat-label,
.stat-island .stat-label{color:var(--stat-text-2) !important}
[data-theme="dark"] .stat-island{border:0.5px solid rgba(157,209,91,0.18)}

/* Aktiver-Plan-Card — dezenter Akzent statt Neon-Wash */
.plan-active-card{
  background:var(--card-bg) !important;
  border:0.5px solid rgba(134,201,34,0.30) !important;
  color:var(--neutral-800);
  background-image:none !important;
  box-shadow:none !important;
}
.plan-active-card h3{color:var(--accent-text) !important}
.plan-active-card .plan-active-pulse{display:none}

/* Dunkel-Modus */
[data-theme="dark"] .plan-active-card{
  background:var(--card-bg) !important;
  background-image:none !important;
  border:0.5px solid rgba(157,209,91,0.30) !important;
  color:var(--neutral-800);
  box-shadow:none !important;
}
[data-theme="dark"] .plan-active-card h3{color:var(--accent-base) !important}

/* Sport-Icon-Kreis in Activity-Rows: kräftiger Akzent statt pastell */
/* Sport-Icon-Badge: pastelliger Hintergrund + dunkleres Icon je nach Sportart */
.sport-icon-dot{width:38px;height:38px;border-radius:50%;background:var(--accent-bg);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.sport-icon-dot[data-sport="bike"]{background:#E6F1FB;color:#185FA5}
.sport-icon-dot[data-sport="swim"]{background:#E1F5EE;color:#0F6E56}
.sport-icon-dot[data-sport="strength"]{background:#FAEEDA;color:#854F0B}
.sport-icon-dot[data-sport="rest"]{background:var(--bg-3);color:var(--neutral-400)}
[data-theme="dark"] .sport-icon-dot{background:rgba(134,201,34,0.15);color:var(--accent)}
[data-theme="dark"] .sport-icon-dot[data-sport="bike"]{background:rgba(59,130,246,0.15);color:#93c5fd}
[data-theme="dark"] .sport-icon-dot[data-sport="swim"]{background:rgba(52,211,153,0.15);color:#6ee7b7}
[data-theme="dark"] .sport-icon-dot[data-sport="strength"]{background:rgba(251,146,60,0.15);color:#fdba74}
[data-theme="dark"] .sport-icon-dot[data-sport="rest"]{background:var(--neutral-100);color:var(--neutral-400)}

/* Subtile Glühkanten bei Akzent-Buttons im Dunkelmodus */
[data-theme="dark"] .btn-primary{box-shadow:0 0 0 0 var(--accent-glow);transition:box-shadow 0.25s var(--ease)}
[data-theme="dark"] .btn-primary:hover{box-shadow:0 0 18px var(--accent-glow)}

/* Badge-Accent: weicheres Pill mit Neon-Outline */
[data-theme="dark"] .badge-accent{background:transparent;border:0.5px solid var(--accent);color:var(--accent)}

/* Cards: leicht ausgeprägtere Rundungen */
/* (Alte Sammel-Override für border-radius entfernt — neue Tokens regeln das pro Element.) */

/* Auswahl-Hervorhebung beim Vergleichen */
.card.compare-selected{border-color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent-strong),0 0 18px var(--accent-glow)}
[data-theme="dark"] .card.compare-selected{box-shadow:0 0 0 1px var(--accent),0 0 24px rgba(134,201,34,0.20)}

/* Workout-Bibliothek (Variante A): DnD-Highlights */
.lib-item{transition:transform 0.1s var(--ease),box-shadow 0.15s}
.lib-item:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.lib-item:active{cursor:grabbing}
body.lib-dragging{cursor:grabbing !important}
body.lib-dragging .cal-cell{outline:1px dashed transparent;transition:outline-color 0.1s}
.cal-cell.drop-target{outline:2px solid var(--accent-strong) !important;outline-offset:-2px;background:var(--accent-bg) !important}

/* Analyse-Seite: responsive grid */
@media (max-width:960px){
  #an-headlines{grid-template-columns:repeat(3,1fr) !important}
  #page-analyse section .container > div[style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr !important}
}
@media (max-width:600px){
  #an-headlines{grid-template-columns:repeat(2,1fr) !important}
}

/* Feed: Like-/Comment-Buttons */
.feed-action:hover{background:var(--neutral-100)}
.feed-action.liked svg{fill:var(--danger) !important;stroke:var(--danger) !important}

/* Aktivitäten-Liste: gleichmäßiges Layout, fester Höhe */
.act-row{transition:transform 0.15s var(--ease),box-shadow 0.15s}
.act-row:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.act-icon-btn{width:30px;height:30px;border:none;background:transparent;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--neutral-500);transition:background 0.15s}
.act-icon-btn:hover{background:var(--neutral-100);color:var(--neutral-800)}
@media (max-width:880px){
  .act-row{flex-wrap:wrap !important}
  .act-row__primary{width:100%;justify-content:flex-end;gap:24px !important;padding-top:8px;border-top:0.5px solid var(--border)}
}

/* Feed-Karten: dezenter Hover */
.feed-card{transition:transform 0.15s var(--ease),box-shadow 0.15s,border-color 0.15s}
.feed-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--accent-strong)}
.feed-action:hover{background:var(--neutral-100)}

/* Feed: Sidebar auf Mobile unter dem Feed stacken */
@media (max-width:880px){
  #page-feed section .container--md{grid-template-columns:1fr !important}
  #page-feed aside{position:relative !important;top:0 !important}
}

/* Hamburger-Button: X-Animation beim Öffnen */
.nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
[data-theme="dark"] .nav__mobile{background:rgba(0,0,0,0.97)}

/* Toggle-Switch (iOS-Style) */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--bg-3);border-radius:24px;transition:background 0.2s}
.toggle-slider::before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle-switch input:checked + .toggle-slider{background:#FC4C02}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px)}

/* Coach-Modus: Pläne-Seite */
#page-plaene[data-coach-mode="true"] #plaene-plans-section,
#page-plaene[data-coach-mode="true"] #plaene-ki-section {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIERUNG — umfassend für alle App-Seiten
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Basis ── */
  .container, .container--sm, .container--md {
    padding: 0 16px;
  }
  section { padding: 64px 0; }

  /* ── Nav ── */
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__username { display: none; }
  #coach-mode-toggle { padding: 0 8px !important; font-size: 0.7rem !important; height: 32px !important; }
  #coach-mode-toggle span { display: none; }

  /* ── Analyse ── */
  #page-analyse section,
  #page-coach-analyse section {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }
  .filter-bar { flex-wrap: wrap; gap: 4px; }
  .filter-btn { font-size: 0.74rem; padding: 6px 10px; }
  #an-sport-filter, #ca-sport-filter { flex-wrap: wrap; border-radius: 12px; }

  /* ── Aktivitäten-Filter-Bar: Pills + Dropdown + Filter-Button
        auf Mobile vertikal stapeln (sonst überschneiden sich Bereiche
        weil die Sport-Pills jede in eigener Zeile sind) ── */
  #page-aktivitaeten > section > div[style*="display:flex"][style*="align-items:center"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #page-aktivitaeten .filter-bar {
    flex: 0 0 auto !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* Visueller Hinweis dass rechts noch mehr ist */
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
  }
  #page-aktivitaeten .filter-bar .filter-btn { flex-shrink: 0; }
  #page-aktivitaeten #time-filter-select { width: 100% !important; min-width: 0 !important; }
  #page-aktivitaeten #act-adv-toggle { width: 100%; justify-content: center; }

  /* ── Monats-Volumen-Chart: schmalere Bars auf Mobile + Padding reduziert,
        damit alle 12 Monate sichtbar bleiben ── */
  #an-monthly-chart { font-size: 0.66rem; }
  #an-monthly-chart .mvol-bar { width: 6px !important; }
  #an-monthly-chart > div:last-child { padding-left: 30px !important; }

  /* ── Volumen-pro-Woche: gleich wie Monats-Chart, aber Labels rotieren
        damit Datums-Strings nicht überlappen ── */
  #an-volume-chart .wvol-bar { width: 6px !important; }
  #an-volume-chart > div:last-child { padding-left: 30px !important; }
  #an-volume-chart .wvol-label {
    font-size: 0.58rem !important;
    transform: rotate(-45deg);
    transform-origin: center top;
    white-space: nowrap;
    margin-top: 4px !important;
  }

  /* ── Sport-Mix-Karte: Donut + Legende auf Mobile vertikal stapeln
        (auf Desktop nebeneinander, auf Mobile gestapelt damit
        Legende-Texte nicht abgeschnitten werden) ── */
  .sport-mix-layout {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }
  .sport-mix-legend {
    width: 100%;
    max-width: 280px;
  }

  /* ── Analyse: zwei-spaltige Reihen (Intensität + Sport-Mix) auf Mobile
        untereinander stapeln statt nebeneinander quetschen ── */
  #page-analyse [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Heatmap mobile: horizontal scrollbar wenn zu schmal,
        sonst läuft sie rechts über den Rand ── */
  #an-yearly-heatmap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -18px;
    padding: 0 18px 4px;
  }

  /* ── Dashboard Cards ── */
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Kalender ── */
  .calendar-layout { grid-template-columns: 1fr !important; }
  .cal-sidebar { display: none !important; }
  .cal-cell { min-height: 44px; padding: 4px !important; }
  .cal-cell__day { font-size: 0.72rem; }
  .workout-pill { font-size: 0.6rem; padding: 1px 4px; }
  .cal-header { flex-wrap: wrap; gap: 8px; }
  .cal-view-toggle { width: 100%; justify-content: center; }
  .cal-month-year { font-size: 0.9rem; }
  .cal-weekday { font-size: 0.65rem; }

  /* ── Coach Dashboard ── */
  #cd-athletes-grid { grid-template-columns: 1fr !important; }
  .coach-athlete-card { padding: 14px !important; }

  /* ── Coach Analyse ── */
  #ca-athlete-bar { flex-direction: column; align-items: stretch; }
  #ca-athlete-bar select { width: 100%; }
  #ca-tabs { flex-wrap: nowrap; }
  #ca-cal-sidebar { display: none !important; }

  /* ── Pläne & Templates ── */
  #cp-peak-grid { grid-template-columns: 1fr !important; }
  .plan-card { padding: 16px !important; }

  /* ── Modals ── */
  [id$="-modal"] > div,
  [id="coach-template-modal"] > div,
  [id="group-detail-modal"] > div,
  [id="create-group-modal"] > div,
  [id="coach-cat-modal"] > div {
    max-width: 100% !important;
    margin: 8px !important;
    padding: 20px 16px !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
  }

  /* Intervall-Builder Grid auf Mobile */
  #interval-blocks-wrap [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #interval-blocks-wrap [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Athleten-Übersicht (Aktivitäten) ── */
  .act-row { flex-wrap: wrap; gap: 8px; }
  .act-meta { flex-direction: column; gap: 4px; }

  /* ── Profil ── */
  .profile-layout { grid-template-columns: 1fr !important; }
  .profile-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .profile-card { padding: 20px 16px !important; }

  /* ── Feed ── */
  #page-feed section .container--md { grid-template-columns: 1fr !important; }
  #page-feed aside { position: relative !important; top: 0 !important; }

  /* ── Gruppen ── */
  #cd-groups-wrap [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Meine Einheiten ── */
  .coach-template-row { flex-wrap: wrap; }
  [id="cp-library-section"] [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Form & Belastung Chart ── */
  #an-form-section svg { height: 120px !important; }

  /* ── Übersichts-Stats (4 Karten) ── */
  #page-aktivitaeten .overview-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Aktivitäten-Header-Buttons (Manuell / Hochladen) ──
        Auf Mobile: vertikal gestapelt, jeweils volle Breite, kleinerer Text */
  #page-aktivitaeten > section > .container > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #page-aktivitaeten > section > .container > div:first-child > div:last-child {
    width: 100%;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #page-aktivitaeten > section > .container > div:first-child > div:last-child > .btn {
    width: 100%;
    font-size: 0.78rem !important;
    padding: 10px 16px !important;
    white-space: nowrap;
  }

  /* ── Buttons in Header-Zeilen ── */
  [style*="display:flex;justify-content:space-between"] {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── Toast ── */
  .toast { font-size: 0.78rem; padding: 10px 16px; max-width: 90vw; white-space: normal; text-align: center; }
}

/* Tablet (641–960px) */
@media (min-width: 641px) and (max-width: 960px) {
  .container { padding: 0 20px; }
  .calendar-layout { grid-template-columns: 1fr !important; }
  .cal-sidebar { display: none !important; }
  #cd-athletes-grid { grid-template-columns: 1fr !important; }
  #cp-peak-grid { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  .profile-layout { grid-template-columns: 200px 1fr !important; }
}


/* Touch-Targets minimum 44px */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .cal-nav-btn { width: 44px !important; height: 44px !important; }
  input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
    font-size: 16px !important; /* Verhindert Auto-Zoom auf iOS */
    min-height: 44px;
  }
  .filter-btn { min-height: 36px; }
  
  /* Sections mit padding-top:80px auf Mobile reduzieren */
  section[style*="padding-top:80px"] { padding-top: 72px !important; }
  section[style*="padding-top:48px"] { padding-top: 40px !important; }
  
  /* Coach Nav Badge kleiner */
  #coach-mode-badge { font-size: 0.5rem !important; padding: 1px 4px !important; }
  
  /* Analyse Subtitle kürzen */
  #an-subtitle, #ca-subtitle { font-size: 0.78rem; }
  
  /* Kachel-Ansicht Coach Dashboard */
  #cd-athletes-grid .card { padding: 14px !important; }
  
  /* Inline Grids die nicht brechen */
  [style*="display:grid;grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   ════════════════════════════════════════════════════════════════ */

#mob-bottom-nav {
  display: none;
}

@media (max-width: 640px) {
  /* Top Nav auf Mobile stark vereinfachen */
  .nav__links { display: none !important; }
  .nav__toggle { display: none !important; }
  #mob-nav { display: none !important; }
  .nav__inner { padding: 0 12px; height: 52px; }
  .nav__logo { font-size: 1.05rem; }
  #nav-actions .btn { display: none !important; }
  #nav-actions { gap: 4px; }

  /* Action-Buttons auf Mobile kompakter — sonst überlaufen sie */
  #nav-actions > button {
    width: 30px !important;
    height: 30px !important;
  }
  #nav-actions > button svg,
  #nav-actions > button i {
    width: 15px !important;
    height: 15px !important;
    font-size: 15px !important;
  }
  /* Coach-Toggle: Text-Label verstecken, nur Icon zeigen.
     Inline-styles am Button (background etc.) sind via JS gesetzt und sehr
     spezifisch — deshalb hier auf das innere Span-Label zielen, nicht den
     Button selbst. */
  #coach-mode-toggle {
    padding: 0 6px !important;
    height: 30px !important;
    min-width: 30px !important;
    gap: 0 !important;
  }
  #coach-mode-toggle .coach-toggle-label {
    display: none !important;
  }

  /* Body Padding für Bottom Nav */
  body { padding-bottom: 64px; }

  /* Bottom Navigation */
  #mob-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--card-bg);
    border-top: 0.5px solid var(--border);
    z-index: 900;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-400);
    font-size: 0.6rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-nav-item.active {
    color: var(--accent-strong);
  }

  .mob-nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    flex-shrink: 0;
  }

  .mob-nav-item.active svg {
    stroke-width: 2.4;
  }

  /* Sections Padding anpassen */
  section[style*="padding-top:80px"],
  section[style*="padding-top: 80px"] {
    padding-top: 64px !important;
  }
  
  /* Page content nicht hinter Bottom Nav */
  #page-home, #page-feed, #page-kalender, #page-analyse,
  #page-aktivitaeten, #page-profil, #page-coach-dashboard,
  #page-coach-analyse, #page-plaene {
    padding-bottom: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UX POLISH — Konsistente Hover & Focus States
   ════════════════════════════════════════════════════════════════ */

/* Karten — einheitlicher Hover */
.card {
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.card:hover {
  transform: translateY(-1px);
  border-color: var(--border-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Klickbare Karten (mit cursor:pointer) */
.card[onclick],
.card[role="button"],
button.card {
  cursor: pointer;
}
.card[onclick]:hover,
.card[role="button"]:hover,
button.card:hover {
  border-color: var(--accent-strong);
}

/* Alle Buttons brauchen sichtbares Focus für Keyboard-User */
button:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons im Modal: Focus ist ggf. auf inset outline */
.ui-modal-content button:focus-visible {
  outline-offset: -2px;
}

/* Sanfte Übergänge für interaktive Elemente */
button,
a,
.filter-btn,
.plan-card,
.feed-card,
.coach-template-row,
[role="button"] {
  transition: all 0.15s var(--ease);
}

/* Disabled State immer erkennbar */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
button:disabled:hover {
  transform: none !important;
}

/* Loading Buttons (aria-busy) */
button[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

/* Skeleton Loader — basis (auch ohne UI lib) */
.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--bg-3, #f1f5f9) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  display: block;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .card { border-width: 2px; }
  button { border-width: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Utility-Klassen — ersetzen häufige inline-styles in app.js
   ═══════════════════════════════════════════════════════════════════════ */

/* Flex / Text-Layout */
.u-flex-1   { flex: 1; min-width: 0; }
.u-text-r   { text-align: right; }
.u-text-c   { text-align: center; }
.u-w-100    { width: 100%; }
.u-w-100-m0 { width: 100%; margin: 0; }
.u-inline-row { display: inline-flex; align-items: center; gap: 5px; }

/* Margin-Bottom Skala (am häufigsten benutzt) */
.u-mb-10 { margin-bottom: 10px; }
.u-mb-14 { margin-bottom: 14px; }

/* Padding Skala */
.u-p-18 { padding: 18px; }

/* Text-Hierarchie — abgestimmt auf bestehende Farbtokens */
.u-label-sm     { font-size: 11px; font-weight: 500; color: var(--neutral-500); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.u-label        { font-size: 0.75rem; font-weight: 600; color: var(--neutral-500); display: block; margin-bottom: 5px; }
.u-muted        { color: var(--neutral-500); }
.u-muted-xs     { font-size: 0.7rem; color: var(--neutral-400); }
.u-muted-sm     { font-size: 0.74rem; color: var(--neutral-500); }
.u-muted-11     { font-size: 11px; color: var(--neutral-500); }
.u-hint-tiny    { font-size: 0.63rem; color: var(--neutral-400); margin-bottom: 2px; }
.u-fs-14        { font-size: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL FOOTER — dezent, auf allen Seiten außer Login/Register
═══════════════════════════════════════════════════════════════════════ */
.global-footer{
  border-top:0.5px solid var(--border-default);
  background:var(--neutral-100);
  padding:24px 0 28px;
  margin-top:48px;
  color:var(--neutral-500);
  font-size:0.78rem;
}
.global-footer__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.global-footer__links{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.global-footer__links a{
  color:var(--neutral-500);
  text-decoration:none;
  cursor:pointer;
  transition:color 0.15s;
}
.global-footer__links a:hover{
  color:var(--neutral-800);
}
.global-footer__meta{
  font-size:0.72rem;
  color:var(--neutral-400);
  letter-spacing:0.02em;
}
@media (max-width:640px){
  .global-footer__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .global-footer__links{
    gap:14px;
    font-size:0.74rem;
  }
}

/* ── MOBILE FIXES ─────────────────────────────────────────────────────── */
/* Coach-Library Template-Rows: Buttons als Icons auf schmalen Screens */
@media (max-width: 640px) {
  .coach-tpl-row { gap: 8px !important; padding: 8px 10px !important; }
  .coach-tpl-row .ct-lbl { display: none !important; }
  .coach-tpl-row .ct-ico { display: inline !important; font-size: 0.95rem; }
  .coach-tpl-row .coach-tpl-actions { gap: 2px !important; }
  .coach-tpl-row .coach-tpl-actions button { padding: 5px 9px !important; min-width: 30px; }
}

/* AI-Coach-Modal soll auf Mobile praktisch full-screen sein */
@media (max-width: 640px) {
  #ai-coach-chat-modal .ui-modal-content {
    max-height: 92vh !important;
    margin: 0 8px !important;
    width: calc(100vw - 16px) !important;
  }
  #ai-coach-chat-modal #aic-messages {
    max-height: 42vh !important;
  }
}