*,*::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:500}

/* 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)}
/* iOS-Fix: type=time/date brauchen ihr natives Aussehen — appearance:none (oben)
   lässt sie auf iOS Safari sonst leer/unsichtbar erscheinen. Hier zurücksetzen und
   das native Widget links ausrichten, Höhe an die Textfelder angleichen. */
input[type="time"].form-input,input[type="date"].form-input,input[type="datetime-local"].form-input{
  -webkit-appearance:none;appearance:none;
  min-height:40px;text-align:left;
}
input[type="time"].form-input::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="time"].form-input::-webkit-datetime-edit{color:var(--neutral-800);padding:0}
input[type="time"].form-input:invalid::-webkit-datetime-edit,
input[type="time"].form-input:not(:focus):placeholder-shown::-webkit-datetime-edit{color:var(--neutral-400)}
.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 — Font wird lokal aus assets/fonts/ geladen
   (siehe assets/css/tabler/tabler-icons.min.css). Robuste Variante statt CDN,
   damit das System-Emoji-Fallback nie greift, egal welches Netz/AdBlocker. */
.ti{font-size:1em;line-height:1;vertical-align:-0.125em}

/* Profil-Nav-Icons: einheitliche Größe, im aktiven Zustand akzent-farbig.
   Gilt sowohl für die alten ti-Font-Icons (Fallback) als auch für die jetzt
   eingebetteten inline SVGs (stroke="currentColor" folgt der Textfarbe). */
.profile-nav-item .ti{font-size:17px;width:20px;text-align:center;color:var(--neutral-400);transition:color 0.15s;flex-shrink:0}
.profile-nav-item:hover .ti{color:var(--neutral-700)}
.profile-nav-item.active .ti{color:var(--accent-strong)}
.profile-nav-item svg{color:var(--neutral-500);transition:color 0.15s}
.profile-nav-item:hover svg{color:var(--neutral-800)}
.profile-nav-item.active svg{color:var(--accent-strong)}
[data-theme="dark"] .profile-nav-item.active .ti,
[data-theme="dark"] .profile-nav-item.active svg{color:var(--accent-base)}

/* 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="nordicski"]{background:#DEF1FB;color:#0A6FA5}
.sport-icon-dot[data-sport="rowing"]{background:#D5F2EE;color:#0C7A6E}
.sport-icon-dot[data-sport="skitour"]{background:#EBE4FB;color:#6D45C9}
.sport-icon-dot[data-sport="elliptical"]{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}
[data-theme="dark"] .sport-icon-dot[data-sport="nordicski"]{background:rgba(14,165,233,0.12);color:#5EBDEA}
[data-theme="dark"] .sport-icon-dot[data-sport="rowing"]{background:rgba(20,184,166,0.12);color:#5ECFC0}
[data-theme="dark"] .sport-icon-dot[data-sport="skitour"]{background:rgba(139,92,246,0.12);color:#A78BEA}
[data-theme="dark"] .sport-icon-dot[data-sport="elliptical"]{background:rgba(245,158,11,0.12);color:#E0B05E}

/* 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}
  /* Notification-Panel auf Mobile am Viewport ausrichten — der Header-Icon-Container
     kann breiter als der Viewport sein, dann ragt ein am Container rechtsbündiges
     Panel über den Bildschirmrand. Fixed am Viewport verhindert das Abschneiden. */
  .notif-panel{position:fixed!important;top:64px!important;right:12px!important;left:12px!important;width:auto!important;max-width:none!important}
}

/* 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:500;letter-spacing:-0.02em;line-height:1;color:var(--neutral-800);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Modal-Stat-Werte: responsive Schrift, die bei schmalen Kacheln schrumpft statt
   den Wert per Ellipsis abzuschneiden ("12,…"). Überschreibt das nowrap/ellipsis
   der Basisklasse für die Modal-Kacheln. */
.ad-stat-value{font-size:clamp(15px,4.6vw,22px);overflow:visible;text-overflow:clip}
.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:#555;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;background:var(--bg)}
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:calc(52px + env(safe-area-inset-top, 0px))}
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;padding-top:env(safe-area-inset-top, 0px);padding-left:env(safe-area-inset-left, 0px);padding-right:env(safe-area-inset-right, 0px);height:calc(52px + env(safe-area-inset-top, 0px))}
.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:700;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}
/* Projektweite Custom-Checkbox: native Darstellung ersetzen, damit der NICHT
   angehakte Zustand einen dezenten grauen Rahmen mit weißer Füllung hat (accent-color
   beeinflusst nur den angehakten Zustand, nicht den leeren Rahmen). Angehakt = grünes
   Kästchen mit weißem Haken. Einheitlich in allen Browsern (kein accent-color-Verlass). */
input[type="checkbox"]:not(.toggle-switch input){
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  flex-shrink:0;
  margin:0;
  border:1px solid var(--neutral-300);
  border-radius:4px;
  background:var(--card-bg);
  cursor:pointer;
  position:relative;
  vertical-align:middle;
  transition:background 0.12s,border-color 0.12s;
}
input[type="checkbox"]:not(.toggle-switch input):hover{border-color:var(--neutral-400);}
input[type="checkbox"]:not(.toggle-switch input):checked{
  background:#86C922;
  border-color:#86C922;
}
input[type="checkbox"]:not(.toggle-switch input):checked::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
input[type="checkbox"]:not(.toggle-switch input):focus-visible{outline:2px solid #86C922;outline-offset:1px;}
[data-theme="dark"] input[type="checkbox"]:not(.toggle-switch input):checked{background:#9DD15B;border-color:#9DD15B;}
[data-theme="dark"] input[type="checkbox"]:not(.toggle-switch input):checked::after{border-color:#141A21;}
.form-check input[type="checkbox"]{width:18px;height:18px;margin-top:1px;}
.pb-sport-check{width:15px;height:15px;}
.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)}
.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)}
.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-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)}
/* Krankheitstag: dezent rot hinterlegt */
.cal-cell.sick-day{background:rgba(214,69,69,0.10);border-color:rgba(214,69,69,0.40)}
.cal-cell.sick-day:hover{background:rgba(214,69,69,0.16)}
[data-theme="dark"] .cal-cell.sick-day{background:rgba(214,69,69,0.18);border-color:rgba(214,69,69,0.45)}
.cal-sick-label{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#c0392b;background:rgba(214,69,69,0.14);border-radius:4px;padding:1px 5px;margin-bottom:4px;line-height:1.4}
.cal-sick-label .ti{font-size:11px}
[data-theme="dark"] .cal-sick-label{color:#ff8585;background:rgba(214,69,69,0.22)}
/* Kalender-Kontextmenü (Rechtsklick / Long-Press) */
.cal-ctx-menu{position:fixed;z-index:9999;background:var(--card-bg);border:0.5px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow,0 4px 16px rgba(0,0,0,0.18));padding:4px;min-width:190px}
.cal-ctx-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;background:none;border:none;text-align:left;cursor:pointer;border-radius:6px;font-size:13px;color:var(--neutral-800);font-family:inherit}
.cal-ctx-menu button:hover{background:var(--neutral-100)}
.cal-ctx-menu button .ti{font-size:16px;color:var(--neutral-500)}
.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}
/* Desktop zeigt die volle Meta-Zeile (km · Dauer), Mobile-Variante (nur km)
   ist standardmäßig versteckt — wird im Mobile-Block reaktiviert. */
.workout-pill .pill-meta-short{display:none}
/* Wochentags-Kürzel in Kalenderzelle: nur auf Mobile Agenda-Layout sichtbar */
.cal-cell .cal-day-wd{display:none}
.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}
/* 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)}

/* ═══ ERFÜLLTE PLAN-EINHEIT (Vergangenheit) ══════════════════════════════════
   Problem: Ein erfüllter Plan (.done.matched) sah aus wie eine echte Aktivität —
   beide gefüllt, unterschieden nur durch ein winziges Häkchen. In der Vergangenheit
   war deshalb kaum zu erkennen, was Plan war und was tatsächlich absolviert wurde.
   In der ZUKUNFT ist es eindeutig (gestrichelt = Plan) — diese Regel fiel in der
   Vergangenheit einfach weg.

   Lösung: Die Regel "GESTRICHELT = PLAN" gilt jetzt DURCHGEHEND, in Vergangenheit
   wie Zukunft. Der erfüllte Plan bleibt als Plan erkennbar (transparent, gestrichelt),
   wird aber gedämpft — er ist erledigt, er soll nicht mehr um Aufmerksamkeit ringen.
   Die ECHTE Aktivität daneben bleibt kräftig gefüllt: Sie ist die Wahrheit, der Plan
   war die Absicht. So sieht man auf einen Blick, was vorgenommen und was getan wurde
   (inkl. Abweichung: geplant 60', gelaufen 45').
   ══════════════════════════════════════════════════════════════════════════ */
.workout-pill.done.matched{
  background:transparent;
  border:0.5px dashed currentColor;
  padding:1px 5px 1px 3px;
  opacity:0.62;             /* erledigt → tritt zurück, bleibt aber lesbar */
}
/* Aus offiziellem Plan: solider Rand + 📋 — auch im erfüllten Zustand, damit die
   Unterscheidung "offizieller Plan vs. selbst reingelegt" nicht verloren geht. */
.workout-pill.done.matched.source-plan-from-template{
  border-style:solid;
}
.workout-pill.done.matched.source-plan-from-template::before{
  content:"📋";font-size:0.7em;margin-right:2px;opacity:0.85;
}
/* Das Häkchen bleibt voll sichtbar (nicht mitgedämpft) — es ist das Signal
   "wurde erfüllt" und trägt die eigentliche Information der Zeile. */
.workout-pill.done.matched .pill-check{opacity:1}

/* 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-Layout für Mobile (≤900px) ist in der Mobile-Sektion weiter unten
     definiert (iOS-Settings-Stil: gestapelte Liste + Sub-Page mit Zurück-Button). */
}

/* ── 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}

/* Vergleichs-Leiste (Aktivitäten vergleichen). Default = Desktop: unten zentriert.
   Auf Mobile wird sie weiter unten per Media-Query ÜBER die Tab-Bar gehoben. */
#compare-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 950;
}

.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:4px;background:var(--accent-bg);border:1px solid #444;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);color:var(--text);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);color:var(--text);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)}

/* FAB ausblenden wenn ein Modal offen ist — sonst überdeckt der grüne +Button
   den unten/rechts liegenden Modal-Content (z.B. Chart-Avg-Labels rechts oder
   das Ende langer Zeitachsen). Zwei Selektoren als Fallback: :has() ist moderner,
   .modal-open wird von activity-detail.js explizit gesetzt. */
body.modal-open #yama-fab-root,
body:has(.modal-overlay.open) #yama-fab-root { display: none !important; }

/* Hintergrund-Scroll sperren solange ein Modal offen ist (#3: sonst „leakt"
   der Scroll auf die Seite dahinter). overscroll-behavior verhindert das
   Scroll-Chaining vom Modal-Inhalt auf den Body am Scroll-Ende. */
body.modal-open { overflow: hidden; }
.modal-overlay, .modal { overscroll-behavior: contain; }
/* Bottom-Nav (z-index 900) liegt sonst ÜBER dem Sheet (z-index 500) und
   verdeckt dessen unteren Teil → #2: man kommt nicht ganz nach unten.
   Solange ein Modal offen ist, Nav ausblenden. */
body.modal-open #mob-bottom-nav { display: none !important; }

/* Vergleichs-Leiste UND Tab-Bar ausblenden, solange ein Overlay-Modal offen ist
   (z.B. Vergleichen, Ähnliche Strecken) — sonst überlappen sie die unteren Charts
   bzw. das unterste Feld, und man kommt nicht ganz nach unten. Man schließt über X.
   WICHTIG: .modal-overlay.open prüfen, NICHT nur die Element-Existenz — diese Modals
   bleiben nach dem Schließen im DOM (nur ohne .open-Klasse). */
body:has(.modal-overlay.open) #compare-bar,
body:has(.modal-overlay.open) #mob-bottom-nav { display: none !important; }
body:has(#similar-routes-modal) #compare-bar { display: none !important; }

/* Mobile-Modal als Bottom-Sheet — slidet von unten rein, gerundete obere Ecken,
   wirkt wie iOS-native UI. Body bleibt im Hintergrund sichtbar (dimmed).
   "modal-overlay--full" als Override-Klasse für tatsächliche Vollbild-Use-Cases.

   Drag-to-dismiss wird via JS optional, ohne JS ist der ✕-Button die einzige
   Möglichkeit, das Sheet zu schließen. */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;            /* statt center → bottom */
    justify-content: stretch;
    background: rgba(0,0,0,0.45);
  }
  .modal {
    padding: 20px;
    border-radius: 18px 18px 0 0;     /* nur oben gerundet */
    max-height: 92vh;                  /* nicht ganz fullscreen — Hintergrund sichtbar */
    max-width: 100%;
    width: 100%;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal-overlay.open .modal {
    transform: translateY(0);
  }
  .modal-header {
    top: -20px;
    padding: 20px 20px 10px;
    margin: -20px -20px 10px;
  }
  /* Grab-Handle oben am Sheet — visuelle Andeutung dass es ein Sheet ist */
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--neutral-300);
    margin: 0 auto 14px;
    flex-shrink: 0;
  }
  /* Full-Mode Override: alte Vollbild-Anzeige beibehalten wo wirklich nötig */
  .modal-overlay.modal-overlay--full {
    align-items: stretch;
  }
  .modal-overlay--full .modal {
    border-radius: 0;
    max-height: 100vh;
    transform: translateY(0);
  }
  .modal-overlay--full .modal::before {
    display: none;
  }
}

/* ── 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);color:var(--neutral-700);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="nordicski"]{background:#E1F0FB;color:#0A6FA5}
.sport-icon-dot[data-sport="rowing"]{background:#DBF3EF;color:#0C7A6E}
.sport-icon-dot[data-sport="skitour"]{background:#EEE8FB;color:#6D45C9}
.sport-icon-dot[data-sport="elliptical"]{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="nordicski"]{background:rgba(14,165,233,0.15);color:#7dd3fc}
[data-theme="dark"] .sport-icon-dot[data-sport="rowing"]{background:rgba(20,184,166,0.15);color:#5eead4}
[data-theme="dark"] .sport-icon-dot[data-sport="skitour"]{background:rgba(139,92,246,0.15);color:#c4b5fd}
[data-theme="dark"] .sport-icon-dot[data-sport="elliptical"]{background:rgba(245,158,11,0.15);color:#fcd34d}
[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}
/* Popover-Fix: Ist das Kebab-Menü einer Karte offen, muss die Karte über ihren
   Geschwister-Karten liegen. Der z-index am Popover allein reicht nicht, weil jede
   Karte position:relative ist (spätere Geschwister gewinnen) UND :hover einen
   transform setzt, der einen eigenen Stacking-Context erzeugt und das Popover
   einsperrt. Daher: Karte mit offenem Menü hochstapeln und den transform aussetzen. */
.lib-item:has(.lib-item-menu[open]){position:relative;z-index:50}
.lib-item:has(.lib-item-menu[open]):hover{transform:none}
/* B9-Nachtrag: Kebab-Menü der eigenen Bibliothekskarten. Standard-Marker (Dreieck)
   verstecken — inline list-style:none reicht auf iOS/Safari nicht. */
.lib-item-menu > summary{list-style:none}
.lib-item-menu > summary::-webkit-details-marker{display:none}
.lib-item-menu > summary::marker{content:""}
.lib-item-menu > summary:hover{background:var(--neutral-100)}
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}
  /* "Meine Aktivitäten"-Übersicht: die 4 Stat-Kacheln auf Mobile 2-spaltig und
     kompakter (Desktop: padding 18/20, font 32px — zu groß fürs Handy). align-items
     verhindert, dass eine Kachel die anderen auf gemeinsame Höhe streckt. */
  #act-stats-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;align-items:start !important}
  #act-stats-grid > .card{padding:12px 14px !important}
  #act-stats-grid > .card > div:first-child{font-size:24px !important}
  #act-stats-grid > .card > div:last-child{margin-top:5px !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
   ════════════════════════════════════════════════════════════════ */

/* Base: Profil-Mobile-Toolbar ist standardmäßig ausgeblendet.
   Wird nur innerhalb der Mobile-Media-Query + body.profile-mobile-detail
   eingeblendet. Ohne diese Base-Rule erscheint die Toolbar auf Desktop,
   weil das <div> sonst auf display:block defaulted. */
.profile-mobile-toolbar { display: none; }

/* ── Wochenansicht IMMER als Agenda-Liste (Desktop + Mobile) ──────────────
   Auf ausdrücklichen Wunsch: die Wochenansicht zeigt die Tage untereinander
   als horizontale Agenda-Cards (Datum links, Einheiten rechts mit vollem
   Detail) — genau wie die Mobile-Darstellung, nur eben auch auf Desktop.
   Dieselben Regeln stehen zusätzlich in der Mobile-Media-Query (für Geräte,
   die diese Base-Regel nicht bräuchten); doppelt schadet nicht, gleiche Werte. */
#cal-week-grid {
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
}
#cal-week-grid .cal-cell {
  min-height: auto !important;
  padding: 10px 12px !important;
  display: grid !important;
  /* minmax(0, 1fr) statt 1fr: Eine "1fr"-Spalte ist implizit minmax(AUTO, 1fr) und
     WÄCHST über ihren Anteil hinaus, sobald der Inhalt breiter ist — dann quillt die
     ganze Zelle nach rechts aus dem Bildschirm. minmax(0, …) erlaubt ihr zu schrumpfen,
     womit die Ellipsis der Pills überhaupt erst greifen kann. Das ist die Wurzel des
     Abschneide-Problems bei langen Titeln. */
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;   /* beliebig viele Eintrags-Zeilen erlauben */
  gap: 4px 12px !important;
  align-items: start;
  overflow: hidden;
}
#cal-week-grid .cal-cell .cal-day-num {
  grid-row: 1;              /* Tages-Spalte oben fixieren; Einträge stapeln in Spalte 2 */
  grid-column: 1;
  margin: 0 !important;
  line-height: 1.05;
  text-align: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
#cal-week-grid .cal-cell .cal-day-wd {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--neutral-500) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#cal-week-grid .cal-cell .cal-day-d {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--neutral-800) !important;
  line-height: 1;
}
#cal-week-grid .cal-cell.today .cal-day-d { color: var(--accent-text) !important; }
#cal-week-grid .cal-cell.today .cal-day-wd { color: var(--accent-text) !important; }
#cal-week-view .cal-weekdays { display: none !important; }
#cal-week-grid .cal-pill-wrap {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  grid-column: 2 !important;   /* IMMER in die Einträge-Spalte — sonst rutscht ab der
                                  3. Einheit ein Element in die schmale Tages-Spalte
                                  (Grid füllt sonst implizite Zeilen ab Spalte 1). */
  /* OVERFLOW-FIX: Auch ein GRID-Item hat per Default min-width:auto und wächst über
     seine Spalte hinaus, wenn der Inhalt breiter ist. Lange Titel sprengten so die
     Zelle nach rechts. min-width:0 erlaubt das Schrumpfen; die Ellipsis der Kinder
     greift erst dann. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* Auch Renn-Pills und der Krank-Label gehören in die Einträge-Spalte, nie nach links. */
#cal-week-grid .cal-cell > .race-pill,
#cal-week-grid .cal-cell > .cal-sick-label {
  grid-column: 2 !important;
  min-width: 0;
  max-width: 100%;
}
#cal-week-grid .workout-pill {
  flex-direction: row !important;
  gap: 6px !important;
  padding: 5px 9px !important;
  min-height: 0 !important;
  margin-bottom: 4px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;  /* Padding zählt zur Breite — sonst 100% + 18px = Überlauf */
  overflow: hidden;
}
#cal-week-grid .workout-pill .pill-icon { width: 14px !important; height: 14px !important; }
#cal-week-grid .workout-pill .pill-icon svg { width: 14px !important; height: 14px !important; }
#cal-week-grid .workout-pill .pill-content {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px !important;
  flex: 1;
  min-width: 0;
}
#cal-week-grid .workout-pill .pill-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#cal-week-grid .workout-pill .pill-meta-full {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
  flex-shrink: 0;
}
#cal-week-grid .workout-pill .pill-meta-short { display: none !important; }
#cal-week-grid .cal-cell:not(:has(.workout-pill)):not(:has(.race-pill))::after {
  content: 'Ruhetag';
  grid-column: 2;
  font-size: 12px;
  color: var(--neutral-400);
  font-style: italic;
}

@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;
  }
  /* Vorlagen-Filter: EINE Reihe, bei Bedarf horizontal scrollen statt umbrechen */
  #page-plaene .filter-bar {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 16px;
    /* Rechts etwas Luft, damit der letzte Button (⋯) nicht am Rand abgeschnitten
       wird; padding-right am scrollenden Container gibt dem letzten Element Platz. */
    padding-right: 16px;
  }
  #page-plaene .filter-bar::-webkit-scrollbar { display: none; }
  #page-plaene .filter-btn { flex-shrink: 0; }
  /* Analyse-Tab-Leiste (Übersicht/Trends/Wettkampf/Prognosen&PBs): auf Mobile
     passen nicht alle Tabs nebeneinander — der letzte wurde abgeschnitten und war
     nicht erreichbar. Horizontal scrollen statt abschneiden. */
  #an-main-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 12px;
  }
  #an-main-tabs::-webkit-scrollbar { display: none; }
  #an-main-tabs .an-main-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Tools-/Drei-Striche-Menü: auf Mobile am Bildschirmrand ausrichten statt am
     Button. Der Button sitzt nicht ganz rechts (rechts daneben weitere Icons),
     daher ragte das 240px-Panel mit right:0 über den rechten Rand hinaus. Per
     fixed an den Viewport koppeln, mit festem Abstand rechts + Breite gedeckelt. */
  #more-menu-panel {
    position: fixed !important;
    top: calc(52px + env(safe-area-inset-top, 0px) + 6px) !important;
    right: 12px !important;
    left: auto !important;
    width: auto !important;
    min-width: 200px;
    max-width: calc(100vw - 24px) !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; }
  /* Auf Mobile die Plan-Karten kompakter — der graue Header verschwendet sonst viel
     Höhe (nur Icon + Badge), und die Abstände sind großzügig. */
  .plan-card__header { padding: 14px 16px 0 !important; }
  .plan-card__header[style] { padding-top: 14px !important; padding-bottom: 12px !important; }
  .plan-card__header .sport-icon-dot { width: 40px !important; height: 40px !important; }
  .plan-card__body { padding: 14px 16px 16px !important; }
  .plan-card__title { font-size: 1.02rem !important; margin-bottom: 4px !important; }
  .plan-card__desc { margin-bottom: 12px !important; line-height: 1.45 !important; }
  .plan-card__meta { margin-bottom: 10px !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; }

  /* ── Aktivitäten-Karten kompakter (Mobile) ──
        Edit/Delete-Buttons aus dem Flow rausnehmen und in die obere
        rechte Ecke der Card legen. Vorher hatten sie eine eigene Zeile
        unter den Stats → Card war unnötig groß. */
  .act-row { position: relative; padding: 12px 14px !important; }
  /* Die Button-Gruppe ist das letzte direkte Kind der act-row */
  .act-row > div:last-child:has(.act-icon-btn) {
    position: absolute !important;
    top: 6px;
    right: 6px;
    gap: 2px !important;
    z-index: 2;
  }
  /* Damit Titel + Datum nicht hinter die Buttons rutschen — die Sekundär-
        Metadaten (HR/Höhe/Kcal) brauchen aber die volle Breite, sonst
        bricht jedes Item auf eine eigene Zeile. */
  .act-row > div[onclick*="openActivityDetail"] > div:nth-child(1),
  .act-row > div[onclick*="openActivityDetail"] > div:nth-child(2) {
    padding-right: 56px;
  }
  /* Buttons selbst schmal auf Mobile */
  .act-row .act-icon-btn { width: 26px; height: 26px; }

  /* ── Kalender-Pills auf Mobile (Variante A: Icon + km) ────────
        Layout: Icon oben, kompakte km-Zahl direkt darunter, mittig.
        Label wird ausgeblendet (zu klein zum Lesen), Meta wird auf
        Distanz reduziert (km bzw. mi je nach Unit-Setting). */
  .cal-cell { min-height: 56px !important; padding: 3px !important; }
  .workout-pill {
    flex-direction: column !important;
    padding: 2px 1px !important;
    margin-bottom: 2px !important;
    gap: 1px !important;
    justify-content: center;
    align-items: center !important;
    min-height: 26px;
    line-height: 1 !important;
  }
  .workout-pill .pill-icon { width: 12px !important; height: 12px !important; }
  .workout-pill .pill-icon svg { width: 12px !important; height: 12px !important; }
  /* pill-content: nur die meta-Zeile (km) zeigen, Label verstecken */
  .workout-pill .pill-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0 !important;
  }
  .workout-pill .pill-label { display: none !important; }
  /* Mobile: full-meta verstecken (zu lang für die schmale Zelle),
     short-meta (nur km) anzeigen */
  .workout-pill .pill-meta-full { display: none !important; }
  .workout-pill .pill-meta-short { display: block !important; }
  .workout-pill .pill-meta {
    font-size: 9px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    line-height: 1 !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
    /* Nur erstes Segment (km) zeigen, Dauer kürzen wenn beides drin ist */
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
  /* Rest-Pills (Ruhetag / +N weitere) — kein Meta sondern Label sichtbar */
  .workout-pill.rest .pill-label { display: block !important; font-size: 9px; }
  /* Plan-Pills (gestrichelt) kleiner Marker — Icon weiterhin sichtbar */
  .workout-pill.source-plan-from-template:not(.done):not(.missed)::before {
    display: none;
  }

  /* ── Wochenansicht auf Mobile = Agenda-Liste ──────────────────
        Aus dem 7-Spalten-Grid wird ein vertikaler Stack. Jede Cell
        wird zu einer Card mit Datum links und Pills rechts, in voller
        Detailansicht (Icon + Label + km/Dauer/Pace) — wie iOS-Kalender. */
  #cal-week-grid,
  #ca-cal-week-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
  }
  /* Innerhalb der Week-Grid: cal-cell als horizontale Agenda-Card */
  #cal-week-grid .cal-cell,
  #ca-cal-week-grid .cal-cell {
    min-height: auto !important;
    padding: 10px 12px !important;
    display: grid !important;
    /* minmax(0,1fr): sonst wächst die Spalte über ihren Anteil hinaus, sobald ein
       langer Titel drin steht — die Zelle quillt rechts aus dem Bildschirm und die
       Ellipsis greift nie. Siehe Kommentar im Basis-Block. */
    grid-template-columns: 38px minmax(0, 1fr) !important;
    overflow: hidden;
    grid-template-rows: auto auto !important;
    gap: 4px 12px !important;
    align-items: start;
  }
  #cal-week-grid .cal-cell .cal-day-num,
  #ca-cal-week-grid .cal-cell .cal-day-num {
    grid-row: 1 / span 2;
    margin: 0 !important;
    line-height: 1.05;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  #cal-week-grid .cal-cell .cal-day-wd,
  #ca-cal-week-grid .cal-cell .cal-day-wd {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--neutral-500) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  #cal-week-grid .cal-cell .cal-day-d,
  #ca-cal-week-grid .cal-cell .cal-day-d {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--neutral-800) !important;
    line-height: 1;
  }
  #cal-week-grid .cal-cell.today .cal-day-d,
  #ca-cal-week-grid .cal-cell.today .cal-day-d {
    color: var(--accent-text) !important;
  }
  #cal-week-grid .cal-cell.today .cal-day-wd,
  #ca-cal-week-grid .cal-cell.today .cal-day-wd {
    color: var(--accent-text) !important;
  }
  /* Den 7-spaltigen Weekday-Header über dem Week-Grid auf Mobile verstecken
     (passt nicht zum vertikalen Stack-Layout) */
  #cal-week-view .cal-weekdays,
  #ca-cal-week-view .cal-weekdays {
    display: none !important;
  }
  /* Pills wrapper: verhindert iOS-Long-Press-Text-Selection und das System-
     Selektions-Menü ("Kopieren / Nachschlagen"). Ohne diese Regel fängt iOS
     den Touch vor dem Click-Handler ab und der Tap geht ins Leere. */
  #cal-week-grid .cal-pill-wrap,
  #ca-cal-week-grid .cal-pill-wrap {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* OVERFLOW-FIX: Ein Flex-Item hat per Default min-width:auto und WEIGERT SICH
       zu schrumpfen, wenn sein Inhalt breiter ist. Die Kinder (pill-content,
       pill-label) hatten zwar min-width:0 — das nützt aber nichts, solange der
       ELTERN-Container nicht nachgibt. Ergebnis: lange Titel ("Dauerlauf 60' +
       Steigerungen · 60' Z2 · 4×20" Z5") sprengten die Pill aus der Zelle heraus,
       statt mit Ellipsis abzuschneiden. Die Kette braucht min-width:0 auf JEDER
       Ebene, sonst reißt sie an der schwächsten. */
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  /* In Wochenansicht zeigen wir die Pills im vollen Detail-Modus */
  #cal-week-grid .workout-pill,
  #ca-cal-week-grid .workout-pill {
    flex-direction: row !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    min-height: 0 !important;
    margin-bottom: 4px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    min-width: 0;          /* darf schrumpfen (siehe oben) */
    max-width: 100%;
    box-sizing: border-box; /* Padding zählt zur Breite — sonst 100% + 18px */
    overflow: hidden;
  }
  #cal-week-grid .workout-pill .pill-icon,
  #ca-cal-week-grid .workout-pill .pill-icon {
    width: 14px !important;
    height: 14px !important;
  }
  #cal-week-grid .workout-pill .pill-icon svg,
  #ca-cal-week-grid .workout-pill .pill-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  #cal-week-grid .workout-pill .pill-content,
  #ca-cal-week-grid .workout-pill .pill-content {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px !important;
    flex: 1;
    min-width: 0;
  }
  #cal-week-grid .workout-pill .pill-label,
  #ca-cal-week-grid .workout-pill .pill-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  /* In Week-View die volle Meta zeigen (km · Dauer), nicht die kurze */
  #cal-week-grid .workout-pill .pill-meta-full,
  #ca-cal-week-grid .workout-pill .pill-meta-full {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
    flex-shrink: 0;
  }
  #cal-week-grid .workout-pill .pill-meta-short,
  #ca-cal-week-grid .workout-pill .pill-meta-short {
    display: none !important;
  }
  /* Ruhetage in Agenda-View: dezenter "Ruhetag"-Text */
  #cal-week-grid .cal-cell:not(:has(.workout-pill)):not(:has(.race-pill))::after,
  #ca-cal-week-grid .cal-cell:not(:has(.workout-pill)):not(:has(.race-pill))::after {
    content: 'Ruhetag';
    grid-column: 2;
    font-size: 12px;
    color: var(--neutral-400);
    font-style: italic;
  }

  /* ── Profil — Mobile = iOS-Settings-Stil ──────────────────────────
     Statt 14 Tabs oben gestapelt zeigen wir auf Mobile eine Liste aller
     Bereiche (wie iPhone-Einstellungen). Tap auf einen Bereich → Panel
     füllt den Screen, oben Sticky-Bar mit Zurück-Button. Vermeidet den
     langen Tab-Wrap-Scroll der vorher ¾ des Screens fraß.
     Aktiver State wird via .profile-nav-item.active markiert: wenn EIN
     Item aktiv ist, blenden wir die anderen Items aus + zeigen die
     Sub-Page-Toolbar. Wenn KEIN Item aktiv ist (Liste-State), zeigen
     wir alle Items + verstecken alle Panels.
     Desktop bleibt unverändert (240px Sidebar + Content).
  */
  .profile-layout { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Avatar-Card auf Mobile etwas kompakter */
  .profile-layout > div:first-child > div:first-child {
    padding: 18px !important;
  }

  /* Nav als gestapelte Liste (Cards untereinander, NICHT mehr horizontal-wrap) */
  .profile-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    padding: 0 !important;
    background: var(--card-bg);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative !important;
    top: 0 !important;
  }
  .profile-nav-item {
    padding: 14px 16px !important;
    border-radius: 0 !important;
    border-bottom: 0.5px solid var(--border) !important;
    background: var(--card-bg) !important;
    font-size: 0.92rem !important;
    min-height: 48px;
    position: relative;
  }
  .profile-nav-item:last-child { border-bottom: none !important; }
  .profile-nav-item:hover { background: var(--neutral-100) !important; }
  /* Pfeil-Icon rechts (Chevron) auf Mobile, signalisiert "Tap → öffnet" */
  .profile-nav-item::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--neutral-400);
    border-bottom: 1.5px solid var(--neutral-400);
    transform: translateY(-50%) rotate(-45deg);
  }
  /* Aktiver State auf Mobile: NICHT highlightet, sondern alle anderen
     werden ausgeblendet (siehe nächste Regel). Falls trotzdem mal sichtbar:
     normaler Look behalten. */
  .profile-nav-item.active { background: var(--card-bg) !important; }

  /* Wenn ein Panel aktiv ist (also nav-item.active gesetzt wurde), versteckt
     der Body-State .profile-mobile-detail die gesamte Liste + die anderen
     Items + die Avatar-Card. Nur das aktive Panel ist sichtbar. */
  body.profile-mobile-detail .profile-layout > div:first-child {
    display: none;
  }
  body.profile-mobile-detail .profile-mobile-toolbar {
    display: flex;
  }

  /* Sticky Sub-Page-Toolbar mit Zurück-Button. Erscheint nur im Detail-State. */
  .profile-mobile-toolbar {
    /* display:none via Base-Rule unten + via body-class hier umgeschaltet */
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card-bg);
    border-bottom: 0.5px solid var(--border);
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    margin: -8px -4px 12px -4px;
  }
  .profile-mobile-back {
    background: none;
    border: none;
    color: var(--accent-strong);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    font-family: inherit;
  }
  .profile-mobile-back:active { background: var(--neutral-100); }
  .profile-mobile-back svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }
  .profile-mobile-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--neutral-800);
  }

  /* Mobile Default: KEIN Panel sichtbar — User sieht erst die Liste.
     Erst nach Tap auf ein nav-item wird body.profile-mobile-detail gesetzt
     und das aktive Panel angezeigt. */
  body:not(.profile-mobile-detail) #page-profil .profile-panel {
    display: none !important;
  }
  body.profile-mobile-detail #page-profil .profile-panel.active {
    display: block !important;
  }

  .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; }
  /* Ausnahme: der 'Alle gelesen'-Button lebt im Notif-Panel (Nachfahre von
     #nav-actions), soll aber auf Mobile sichtbar bleiben — sonst gibt es dort keinen
     Weg, alle Benachrichtigungen als gelesen zu markieren. */
  #nav-actions .notif-mark-all { display: inline-flex !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 (inkl. iOS Home-Indicator).
     `max(...)` sorgt dafür dass in Safari (wo env() oft 0 ist weil die URL-Leiste
     den Bereich abdeckt) trotzdem ein Mindestabstand zur Wisch-Geste-Zone bleibt.
     In der echten PWA-Standalone übersteigt env() den Mindestwert, dann gilt env(). */
  body { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }

  /* Bottom Navigation
     iOS-PWA-Hinweis: `transform: translateZ(0)` zwingt Safari/WebKit, die
     Nav in eine eigene Compositing-Layer zu legen. Ohne das kann iOS bei
     Scroll-Bounce, App-Switch oder Low-Power-Mode position:fixed-Elemente
     temporär "verrutschen" lassen — die Nav landet dann mitten auf dem
     Screen statt am unteren Rand. Mit eigener Layer bleibt sie stabil.

     Safari-Browser-Modus: env(safe-area-inset-bottom) ist hier 0 weil die
     URL-Leiste den Bereich beansprucht — die iOS-Wisch-Geste-Zone liegt
     trotzdem da. Daher max(8px, env()) als Mindestabstand. */
  #mob-bottom-nav {
    display: flex;
    position: fixed;
    left: 50%;
    width: min(400px, calc(100% - 40px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    height: 62px;
    /* Milchglas / Frosted (abgenommen am nav-glas-vergleich, 7.7. abends).
       Lesbarkeits-Leitplanke: NICHT unter ~70% Weiß-Deckung, Blur nicht sparen —
       sonst machen die kräftigen grün/blauen Kalender-Balken die Labels unlesbar. */
    background: var(--card-bg); /* Fallback ohne backdrop-filter (z.B. Firefox ohne Flag) */
    background: rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 0.5px solid rgba(255,255,255,0.6);
    border-radius: 20px;
    z-index: 900;
    padding: 0 8px;
    gap: 2px;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 6px 20px rgba(30,50,35,0.14), 0 1px 3px rgba(0,0,0,0.08);
  }
  /* Dark-Mode: dunkles Frosted statt weißem Glas (sonst leuchtet die Leiste falsch). */
  [data-theme="dark"] #mob-bottom-nav {
    background: rgba(28,34,40,0.72);
    border: 0.5px solid rgba(255,255,255,0.12);
  }

  /* Vergleichs-Leiste auf Mobile ÜBER die Tab-Bar heben (sonst dahinter verdeckt).
     Tab-Bar: bottom = safe-area + 24px, Höhe 60px. Compare-Bar darüber + Abstand. */
  #compare-bar {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    z-index: 950;
    width: min(380px, calc(100% - 24px));
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    gap: 8px;
  }
  /* Auf schmalen Screens den Zähl-Text kompakt halten, damit die Buttons (Ähnliche
     finden / Abbrechen / Vergleichen) eher in eine Zeile passen statt umzubrechen. */
  #compare-bar .compare-bar-count {
    font-size: 0.8rem;
    flex-basis: 100%;
    text-align: center;
  }
  /* Vergleichs-Spalten auf Mobile schmaler, damit mehr nebeneinander sichtbar ist. */
  .compare-col {
    min-width: 200px !important;
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Vertikaler Abstand hält den aktiven Blob INNERHALB der Pill-Grenzen (Punkt 1):
       oben/unten je 8px Luft zur Pill-Kante, seitlich 3px zwischen den Zellen. */
    margin: 8px 3px;
    padding: 0 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-400);
    font-size: 0.6rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: 14px;
  }

  /* B18 Fix 3: Label unter dem Icon. Kurz, einzeilig, ellipsis bei Überlauf. */
  .mob-nav-label {
    font-size: 0.58rem;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* B18 Fix 1+4: Aktiver Zustand = zwei Signale (Fläche + Farbe). Der Blob ist das
     Item selbst, aber durch das margin ringsum sitzt er als kompakte Zelle IN der
     Pill — gleichmäßiger Abstand zu Ober-/Unterkante und (via margin) zu den Seiten,
     die Rundung folgt der Pill-Form statt bündig-eckig anzuschlagen. */
  .mob-nav-item.active {
    color: var(--accent-strong);
    background: rgba(200,225,175,0.75);
  }
  [data-theme="dark"] .mob-nav-item.active {
    background: color-mix(in srgb, var(--accent-strong) 30%, transparent);
  }

  .mob-nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    flex-shrink: 0;
  }
  .mob-nav-item i {
    font-size: 22px;
    line-height: 1;
    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;
  }
}

/* ─── Touch-Devices: Hover-States deaktivieren ───────────────────────────
   Auf Touch-Devices bleiben :hover-Effekte nach Tap "kleben" und sehen
   buggy aus. Diese Regel deaktiviert Transform/Shadow-Effekte auf Devices
   ohne echtes Hover (Phones, Tablets). Farb-Änderungen bleiben erhalten
   da sie meist auch als Active-State Sinn machen. */
@media (hover: none) {
  .btn-primary:hover,
  .btn-accent:hover,
  .btn-ghost:hover,
  .btn-outline:hover,
  .card:hover,
  .mock-device:hover {
    transform: none !important;
    box-shadow: inherit;
  }
  /* Buttons sollen auf Touch ihren Default-Background behalten.
     ABER: .filter-btn.active hat einen WICHTIGEN visuellen Active-State
     (schwarzer Background). Den nicht versehentlich resetten durch :hover
     auf Touch-Geräten — sticky-hover auf iOS würde sonst den Active-Look
     überschreiben. Daher zielen wir nur auf NICHT-active Filter-Buttons. */
  .filter-btn:not(.active):hover {
    background: inherit;
    border-color: inherit;
    color: inherit;
  }
}

/* ─── Custom Radio (yama-radio) ──────────────────────────────────────────
   Native Radios rendern über Browser/Themes inkonsistent (oft schwarz).
   Custom-Styling wie bei der Compare-Checkbox: heller Outline wenn unchecked,
   Farbe via --rc wenn checked (default = Yama-grün). */
.yama-radio{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border-strong,#cbd5e1);
  background:var(--card-bg,#fff);
  cursor:pointer;flex-shrink:0;position:relative;
  transition:border-color .15s, background .15s;
}
.yama-radio:checked{ border-color:var(--rc,var(--accent-strong)); }
.yama-radio:checked::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:var(--rc,var(--accent-strong));
}
.yama-radio:focus-visible{ outline:2px solid var(--rc,var(--accent-strong));outline-offset:2px; }

/* ─── Compare-Checkbox (Aktivitäten-Liste) ───────────────────────────────
   Custom-Styling statt nativem Browser-Default, damit konsistent über alle
   Browser/Themes. Hellgrau-Outline wenn unchecked, Yama-grün wenn checked. */
.yama-compare-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong, #d1d5db);
  border-radius: 4px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  position: relative;
  margin: 0;
}
.yama-compare-cb:hover {
  border-color: var(--accent-strong);
}
.yama-compare-cb:checked {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.yama-compare-cb:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-theme="dark"] .yama-compare-cb {
  background: var(--neutral-100);
  border-color: var(--border-default);
}
[data-theme="dark"] .yama-compare-cb:checked {
  background: var(--accent-base);
  border-color: var(--accent-base);
}

/* ─── PWA Standalone-Mode: Padding über Status-Bar erzwingen ──────────────
   Im PWA-Standalone-Mode (Homescreen) ohne 'black-translucent' Status-Bar
   gibt env(safe-area-inset-top) 0px zurück. Damit die Nav nicht direkt
   unter der iOS-Status-Bar klebt, hier explizit auffüllen. */
@media all and (display-mode: standalone) {
  .nav {
    padding-top: max(env(safe-area-inset-top, 0px), 12px);
    height: calc(52px + max(env(safe-area-inset-top, 0px), 12px));
  }
  #pages-root {
    padding-top: calc(52px + max(env(safe-area-inset-top, 0px), 12px));
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Native Number-Spinner ausblenden
 * ════════════════════════════════════════════════════════════════════════
 * Browser rendern bei <input type="number"> standardmäßig kleine ▲▼ Buttons,
 * die in Safari (besonders mit Dark-Theme) als schwarze Box erscheinen und
 * den UI-Look brechen. Wir blenden sie aus — User können trotzdem
 * Pfeiltasten + Mausrad nutzen, und auf Mobile zeigt iOS-Tastatur
 * eh den numerischen Layer (durch inputmode="numeric"/"decimal").
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ════════════════════════════════════════════════════════════════════════
 * Plan-Wizard: Form-Felder explizit dunkel
 * ════════════════════════════════════════════════════════════════════════
 * Selects/Inputs in den Plan-Wizards erben sonst eine helle Textfarbe vom
 * Wizard-Container → weiß auf weiß. Die Labels haben explizit color, die
 * Felder nicht. Gleiche Klasse Bug wie damals die yama-radios.
 */
#run-plan-wizard select, #run-plan-wizard input, #run-plan-wizard textarea,
#bike-plan-wizard select, #bike-plan-wizard input, #bike-plan-wizard textarea,
#tri-plan-wizard select, #tri-plan-wizard input, #tri-plan-wizard textarea {
  color: var(--neutral-800);
}
#run-plan-wizard option,
#bike-plan-wizard option,
#tri-plan-wizard option {
  color: var(--neutral-800);
}

/* ── Workout-Builder Block-Zeilen auf Mobile ───────────────────────────────
   Schmale Screens: Kopfzeile (Drag/Farbe/Name/Aktionen) oben, Eingabefelder
   darunter über die VOLLE Breite. Wichtig: das Inline 'flex:1;min-width:0' am
   Felder-Container wird hier mit 'flex:none;width:100%' explizit aufgehoben —
   sonst quetschen sich die Felder rechts statt umzubrechen. Desktop unberührt. */
@media (max-width:640px){
  .blk-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
  .blk-line > *{order:1}                          /* Grip, Dot, Name-Select: Kopfzeile */
  .blk-line .blk-actions{order:1;margin-left:auto} /* Aktionen ans Ende der Kopfzeile */
  .blk-line .blk-fields{
    order:2;                                       /* nach der Kopfzeile → zweite Zeile */
    flex:none !important;                           /* Inline flex:1 aufheben (Inline schlägt Klasse → !important nötig) */
    width:100% !important;                          /* volle Breite erzwingen (überschreibt min-width:0) */
    min-width:0;
    margin-top:6px;
    gap:6px;
    justify-content:flex-start;
  }
  /* Einheitliches Raster: alle Eingabefelder gleich breit + größere Tap-Fläche.
     Überschreibt die uneinheitlichen Inline-Breiten (38/44px etc) per !important. */
  .blk-line .blk-fields input,
  .blk-line .blk-fields select{
    width:72px !important;
    padding-top:6px;padding-bottom:6px;
    font-size:0.8rem;
    text-align:center;
  }
}