*,*::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;

  /* Button-System — Primär Variante A (Fast-Schwarz), Sekundär Outline, Link grün */
  --btn-primary-bg:#15191E;
  --btn-primary-fg:#FFFFFF;
  --btn-primary-hover:#252A31;
  --btn-secondary-bg:#FFFFFF;
  --btn-secondary-border:#E1E5DD;
  --btn-secondary-fg:#15191E;
  --btn-secondary-hover:#F5F6F3;
  --btn-link:#4E7A16;
  --btn-radius:10px;

  /* Trends-Charts: Linie (VO₂max / Pace) dunkler, Volumen-Balken weicher */
  --trends-line:#4D8420;
  --trends-bar:#8DBB58;

  /* 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;
  --chart-hr:var(--danger-base);
  --chart-pace:var(--info-base);
  --chart-power:var(--warning-base);
  --chart-cadence:var(--neutral-600);

  /* Form-Kennzahlen: dieselbe Farbe an jeder Stelle (Dashboard + Form-Verlauf) */
  --form-ctl:var(--accent-strong);
  --form-atl:var(--warning-base);
  --form-tsb:var(--info-base);

  /* Radraum Höhenprofil — Steigungsfarben (Light) */
  --rr-grade-down:#7F93A8;
  --rr-grade-flat:#4E9A2B;
  --rr-grade-mod:#D9A514;
  --rr-grade-steep:#E0761C;
  --rr-grade-very:#CF3A2F;

  /* Wetter-Icons (Dashboard) */
  --wx-sun:var(--warning-base);
  --wx-moon:var(--neutral-500);
  --wx-cloud:var(--neutral-500);
  --wx-rain:var(--info-base);
  --wx-snow:var(--info-text);
  --wx-storm:var(--warning-text);
  --wx-fog:var(--neutral-400);
  --wx-wind:var(--neutral-500);

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

  /* Safe-Area: Capacitor SystemBars setzt --safe-area-inset-* auf <html>.
     max(Var, env): wenn Capacitor 0px setzt, trotzdem echtes env() nutzen
     (sonst maskiert 0px den Dynamic-Island-Inset). */
  --yama-safe-top: max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --yama-safe-right: max(var(--safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
  --yama-safe-bottom: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --yama-safe-left: max(var(--safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));

  /* 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;
  /* Dashboard-Widget-Raster (Mobile unverändert): kurz 112 · groß 236 · xl 280 */
  --dash-widget-sm:112px;
  --dash-widget-lg:236px;
  --dash-widget-xl:280px;
  --dash-widget-gap:var(--space-3);

  /* 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-1:var(--text);
  --text-2:var(--neutral-500);
  --text-3:var(--neutral-500); /* Audit #27: ≥4.5:1 auf Weiß (vorher neutral-400 ≈2.5:1) */
  --muted:var(--text-3);
  /* Legacy aliases used by older inline overlays (password reset etc.) */
  --fg:var(--text);
  --fg-muted:var(--text-2);
  --fg-dim:var(--text-3);
  --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);

  /* App-Rollen (Designregeln 15.09.2026) — Desktop-Defaults */
  --yama-metric:28px;
  --yama-title:16px;
  --yama-text:13px;
  --yama-label:11px;
  --yama-micro:10px;
  --tabbar-height:96px;
  /* Hinweis-Punkt in der Navigation (Social, Profil, Hilfe) */
  --nav-hint:#8CC63F;
  --nav-hint-ring:var(--bg);

  /* Mobile Bottom-Nav — Liquid-Glass-CSS-Approx clear */
  --nav-accent:#3F7A1A;
  --nav-accent-tint:rgba(63,122,26,0.10);
  --nav-icon:#1C211B;
  --nav-icon-cut:#FFFFFF;
  --nav-glass-fill:rgba(255,255,255,0.15);
  --nav-glass-shadow:0 10px 32px rgba(20,30,20,0.16), 0 2px 8px rgba(20,30,20,0.07);
  --nav-glass-inset:
    inset 1.5px 2px 0 rgba(255,255,255,0.82),
    inset -1px -1.5px 0 rgba(255,255,255,0.28),
    inset 0 0 22px rgba(255,255,255,0.18);
  --nav-glass-edge:linear-gradient(
    135deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.55) 14%,
    rgba(255,255,255,0.08) 38%,
    rgba(255,255,255,0.04) 55%,
    rgba(255,255,255,0.40) 78%,
    rgba(255,255,255,0.95) 100%
  );
  --nav-glass-fallback:#FFFFFF;
  --nav-drop-fill:rgba(255,255,255,0.38);
  --nav-drop-inset:
    inset 1.5px 2px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(255,255,255,0.35),
    inset 0 0 18px rgba(255,255,255,0.32);
  --nav-drop-shadow:0 2px 10px rgba(20,30,20,0.12);
  --nav-drop-edge:linear-gradient(
    135deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.25) 38%,
    rgba(255,255,255,0.90) 100%
  );
  --card-bg:var(--neutral-0);
  --input-bg:var(--neutral-0);
  /* Hero „go“: Light = Accent-Tint; Dark überschreibt auf neutrale Fläche */
  --dash-hero-go-bg:var(--accent-bg);
  --dash-hero-go-border:color-mix(in srgb, var(--accent-base) 35%, transparent);
  /* 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 (Mobile-first, 22.09.2026):
   * Neutral charcoal statt Grau-Oliv. Flächen über Stufen, kaum Schatten.
   * Yama-Grün nur als Akzent — keine eingefärbten Ganzkarten.
   * Palette: bg #111416 · Fläche #1A1E21 · erhöht #22272B · Trenner #343A3F
   * Text #F2F5F3 · Sekundär #A6B0B7 · Dezent #7A858D · Grün #8BCB43
   */
  --neutral-0:#22272B;   /* erhöht / nested */
  --neutral-50:#111416;  /* page / canvas */
  --neutral-100:#1A1E21; /* Fläche / hover */
  --neutral-200:#1A1E21; /* Karte = Fläche (max. 2 Ebenen) */
  --neutral-300:#343A3F; /* Trenner */
  --neutral-400:#7A858D; /* dezent */
  --neutral-500:#A6B0B7; /* sekundär */
  --neutral-600:#B8C0C6;
  --neutral-700:#D5DBDE;
  --neutral-800:#F2F5F3; /* primär Text */
  --neutral-900:#FFFFFF;

  /* Akzent: Yama-Grün — ruhig, kein Neon-Lift */
  --accent-bg:rgba(139,203,67,0.12); --accent-soft:rgba(139,203,67,0.20);
  --accent-base:#8BCB43; --accent-strong:#9AD64F; --accent-text:#8BCB43;

  /* Button-System Dark — Primär hell, Sekundär Outline, Link Grün */
  --btn-primary-bg:#F2F5F3;
  --btn-primary-fg:#111416;
  --btn-primary-hover:#FFFFFF;
  --btn-secondary-bg:transparent;
  --btn-secondary-border:#3F464C;
  --btn-secondary-fg:#F2F5F3;
  --btn-secondary-hover:#22272B;
  --btn-link:#8BCB43;
  --btn-radius:10px;

  --trends-line:#8BCB43;
  --trends-bar:#6FA832;

  --success-bg:rgba(139,203,67,0.12); --success-text:#8BCB43; --success-base:#8BCB43;
  --warning-bg:rgba(255,180,84,0.14); --warning-text:#FFB454; --warning-base:#FFB454;
  --danger-bg:rgba(255,120,120,0.14); --danger-text:#FF8B8B; --danger-base:#FF8B8B;
  --info-bg:rgba(94,205,178,0.14); --info-text:#5ECDB2; --info-base:#5ECDB2;

  /* Radraum Höhenprofil — Steigungsfarben (Dark) */
  --rr-grade-down:#6E8499;
  --rr-grade-flat:#8FD14F;
  --rr-grade-mod:#F2C94C;
  --rr-grade-steep:#F29B4C;
  --rr-grade-very:#FF6B66;

  --wx-sun:var(--warning-base);
  --wx-moon:var(--neutral-400);
  --wx-cloud:var(--neutral-400);
  --wx-rain:var(--info-base);
  --wx-snow:var(--info-text);
  --wx-storm:var(--warning-base);
  --wx-fog:var(--neutral-400);
  --wx-wind:var(--neutral-400);

  /* Trenner klarer als weiße Glas-Borders — sonst verschwinden Kanten */
  --border-default:#343A3F;
  --border-strong:#3F464C;
  --border:var(--border-default);
  --border-md:var(--border-strong);
  --shadow-1:none;
  --shadow-2:0 0 0 1px var(--border-default);
  --shadow-3:0 0 0 1px var(--border-default);

  /* Aliase — klare Stufen */
  --bg:#111416;
  --bg-1:#1A1E21;
  --bg-2:#22272B;
  --bg-3:#22272B;
  --text:#F2F5F3;
  --text-1:var(--text);
  --text-2:#A6B0B7;
  --text-3:#7A858D;
  --muted:var(--text-3);
  --card-bg:#1A1E21;
  --input-bg:#1A1E21;
  --accent:var(--accent-base); --accent-dark:var(--accent-strong); --accent-dim:var(--accent-bg);
  --accent-glow:rgba(139,203,67,0.28);
  --stat-bg:#111416; --stat-text-2:#A6B0B7;
  --success:var(--success-text);
  --warning:var(--warning-text);
  --danger:var(--danger-text);
  --info:var(--info-text);

  /* Hero „go“: neutrale Karte, Grün nur am Label */
  --dash-hero-go-bg:var(--bg-1);
  --dash-hero-go-border:var(--border-default);

  --nav-hint:#8CC63F;
  --nav-hint-ring:var(--bg);

  /* Mobile Bottom-Nav Dark — Liquid-Glass-Approx */
  --nav-accent:#B8E26E;
  --nav-accent-tint:rgba(184,226,110,0.12);
  --nav-icon:#ECEFEA;
  --nav-icon-cut:#232723;
  --nav-glass-fill:rgba(40,44,42,0.16);
  --nav-glass-shadow:0 10px 32px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.28);
  --nav-glass-inset:
    inset 1.5px 1.5px 0 rgba(255,255,255,0.38),
    inset -1px -1px 0 rgba(255,255,255,0.10),
    inset 0 0 18px rgba(255,255,255,0.06);
  --nav-glass-edge:linear-gradient(
    135deg,
    rgba(255,255,255,0.70) 0%,
    rgba(255,255,255,0.18) 22%,
    rgba(255,255,255,0.04) 48%,
    rgba(255,255,255,0.06) 62%,
    rgba(255,255,255,0.28) 82%,
    rgba(255,255,255,0.55) 100%
  );
  --nav-glass-fallback:#232723;
  --nav-drop-fill:rgba(255,255,255,0.12);
  --nav-drop-inset:
    inset 1.5px 1.5px 0 rgba(255,255,255,0.45),
    inset -1px -1px 0 rgba(255,255,255,0.12),
    inset 0 0 14px rgba(255,255,255,0.08);
  --nav-drop-shadow:0 2px 10px rgba(0,0,0,0.40);
  --nav-drop-edge:linear-gradient(
    135deg,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.08) 42%,
    rgba(255,255,255,0.40) 100%
  );
}

/* ── 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(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 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 — Primär Fast-Schwarz · Sekundär Outline · Link Grün */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:10px 18px;border-radius:var(--btn-radius,10px);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:normal;text-transform:none;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease),color var(--duration-base) var(--ease);white-space:nowrap;line-height:1.4}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:var(--btn-primary-bg)}
.btn-primary:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover);color:var(--btn-primary-fg)}
.btn-primary:disabled,.btn-primary[disabled]{opacity:0.45;cursor:not-allowed;pointer-events:none}
.btn-accent{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:var(--btn-primary-bg)}
.btn-accent:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover);color:var(--btn-primary-fg)}
.btn-secondary,.btn-ghost,.btn-outline{background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);border:1px solid var(--btn-secondary-border)}
.btn-secondary:hover,.btn-ghost:hover,.btn-outline:hover{background:var(--btn-secondary-hover);border-color:var(--btn-secondary-border);color:var(--btn-secondary-fg)}
.btn-link,.btn-text{background:transparent;border-color:transparent;color:var(--btn-link);padding-left:0;padding-right:0;font-weight:600;box-shadow:none}
.btn-link:hover,.btn-text:hover{background:transparent;border-color:transparent;color:var(--accent-strong);text-decoration:underline}
.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)}
.btn-full{width:100%}

/* 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:var(--border-default);
  background:var(--bg-1);
}

/* 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:color-mix(in srgb, var(--accent-base) 40%, transparent)}
.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:none}
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .card,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .pref-chip,
[data-theme="dark"] .modal{
  border-width:1px;
}
/* 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: dunkler Active-Stil NUR für kleine Chips/Filter — nicht Tabs/Dropdowns */
.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(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
/* Text-Tabs (Coach/Gruppen): Unterstrich statt dunkler Chip */
.filter-bar--tabs{
  display:flex;flex-wrap:wrap;gap:4px;
  border-bottom:0.5px solid var(--border);
  margin-bottom:var(--space-4);
  padding:0;
  background:transparent;
}
.filter-bar--tabs .filter-btn{
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--neutral-500);
  padding:10px 14px;
  margin-bottom:-0.5px;
  font-size:var(--yama-text);
  font-weight:500;
}
.filter-bar--tabs .filter-btn:hover{
  color:var(--neutral-800);
  background:transparent;
  border-color:transparent;
  border-bottom-color:transparent;
}
.filter-bar--tabs .filter-btn.active{
  background:transparent;
  border-color:transparent;
  border-bottom-color:var(--accent-strong);
  color:var(--neutral-800);
}
[data-theme="dark"] .filter-bar--tabs .filter-btn.active{
  background:transparent;
  border-color:transparent;
  border-bottom-color:var(--accent-base);
  color:var(--neutral-800);
}

/* 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-Icons: farbiges Glyph ohne Hintergrundkreis */
.sport-icon-dot{width:36px;height:36px;border-radius:0;background:transparent;color:var(--neutral-700);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
/* Racket icon: icons8 black-on-transparent PNG as plain <img> (no mask). */
img.sport-icon-racket{
  display:block;
  object-fit:contain;
  flex-shrink:0;
  vertical-align:middle;
}
[data-theme="dark"] img.sport-icon-racket{
  filter:invert(1) brightness(0.92);
}
.workout-pill .pill-icon .sport-icon-racket,
.workout-pill .pill-icon img.sport-icon-racket{
  width:11px;height:11px;
}
.feed-sport-chip .sport-icon-racket,
.feed-sport-chip img.sport-icon-racket{
  width:12px;height:12px;flex-shrink:0;
}
.sport-icon-dot[data-sport="run"]{background:transparent;color:var(--accent-strong)}
.sport-icon-dot[data-sport="bike"]{background:transparent;color:#185FA5}
.sport-icon-dot[data-sport="swim"]{background:transparent;color:#0F6E56}
.sport-icon-dot[data-sport="strength"]{background:transparent;color:#854F0B}
.sport-icon-dot[data-sport="nordicski"]{background:transparent;color:#0A6FA5}
.sport-icon-dot[data-sport="rowing"]{background:transparent;color:#0C7A6E}
.sport-icon-dot[data-sport="skitour"]{background:transparent;color:#6D45C9}
.sport-icon-dot[data-sport="elliptical"]{background:transparent;color:#854F0B}
.sport-icon-dot[data-sport="rest"]{background:transparent;color:var(--neutral-400)}
.sport-icon-dot[data-sport="triathlon"]{background:transparent;color:#6D28D9}
[data-theme="dark"] .sport-icon-dot[data-sport="run"]{background:transparent;color:var(--accent-base)}
[data-theme="dark"] .sport-icon-dot[data-sport="bike"]{background:transparent;color:#6FA5D9}
[data-theme="dark"] .sport-icon-dot[data-sport="swim"]{background:transparent;color:#5ECDB2}
[data-theme="dark"] .sport-icon-dot[data-sport="strength"]{background:transparent;color:#D4A356}
[data-theme="dark"] .sport-icon-dot[data-sport="nordicski"]{background:transparent;color:#5EBDEA}
[data-theme="dark"] .sport-icon-dot[data-sport="rowing"]{background:transparent;color:#5ECFC0}
[data-theme="dark"] .sport-icon-dot[data-sport="skitour"]{background:transparent;color:#A78BEA}
[data-theme="dark"] .sport-icon-dot[data-sport="elliptical"]{background:transparent;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;text-transform:none;color:var(--neutral-500);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ad-stats .stat-block__label,
#activity-detail-overlay .stat-block__label,
.ad-stat-lbl{
  text-transform:none;letter-spacing:0.02em;font-family:var(--font-body);
  font-size:var(--yama-label);font-weight:400;
}
.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}
#ad-stats .stat-block__value,
#ad-stats .ad-stat-value,
#activity-detail-overlay .stat-block__value,
#activity-detail-overlay [id$="-val"],
.ad-stat-num,
.ad-stat-num[class*="-val"]{
  font-family:var(--font-body);
}
/* 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"] .filter-btn.active{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
[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}

/* Workout-Builder + Radraum-Profil: ohne eigene Fläche — Seite (--bg) scheint durch */
#interval-chart,
.wb-interval-chart,
.rr-timeline{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:none !important;
}
/* Leerzustand Struktur: gestrichelter Rahmen + zentrierter Hinweis */
#interval-chart.wb-interval-chart--empty,
.wb-interval-chart.wb-interval-chart--empty{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:110px !important;
  height:auto !important;
  padding:var(--space-4) !important;
  border:1px dashed var(--border-strong) !important;
  border-radius:var(--radius-md) !important;
  background:transparent !important;
  overflow:hidden !important;
}
.wb-interval-chart__empty,
.wb-interval-chart__empty.yama-text{
  max-width:36em;
  margin:0;
  text-align:center;
  color:var(--muted);
  line-height:1.45;
}
/* Builder-Steuerfelder: einheitliche Box-Höhe (Web + Mobile) */
#interval-blocks-wrap .wb-ctrl{
  box-sizing:border-box !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  padding:0 8px !important;
  font-size:13px !important;
  line-height:32px !important;
  margin:0 !important;
  border:0.5px solid var(--border-strong) !important;
  border-radius:var(--radius-sm) !important;
  background:var(--input-bg) !important;
  color:var(--neutral-800) !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
#interval-blocks-wrap select.wb-ctrl{
  padding-right:20px !important;
  line-height:30px !important;
  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 5px center;
  background-size:10px;
}
/* Native Number-Spinner ausblenden (überdecken sonst die Ziffern) */
#interval-blocks-wrap input[type="number"].wb-ctrl{
  -moz-appearance:textfield !important;
}
#interval-blocks-wrap input[type="number"].wb-ctrl::-webkit-outer-spin-button,
#interval-blocks-wrap input[type="number"].wb-ctrl::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
  display:none !important;
}
/* Zahlfeld mit Einheit rechts im Feld */
#interval-blocks-wrap .wb-num{
  position:relative;
  display:inline-flex;
  align-items:stretch;
  width:56px;
  height:32px;
  flex-shrink:0;
}
#interval-blocks-wrap .wb-num--md{width:64px}
#interval-blocks-wrap .wb-num--lg{width:76px}
#interval-blocks-wrap .wb-num--sm{width:48px}
#interval-blocks-wrap .wb-num input.wb-ctrl{
  width:100% !important;
  padding-right:20px !important;
  text-align:left;
}
#interval-blocks-wrap .wb-num--sm input.wb-ctrl{padding-right:8px !important}
#interval-blocks-wrap .wb-num__unit{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  font-weight:400;
  color:var(--text-3);
  pointer-events:none;
  line-height:1;
}
#interval-blocks-wrap .wb-dur,
#interval-blocks-wrap .wb-num--dur{
  width:108px;
  align-items:stretch !important;
  height:32px !important;
  border:0.5px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--input-bg);
  overflow:hidden;
}
#interval-blocks-wrap .wb-num--dur input.wb-ctrl{
  flex:1 1 auto;
  width:auto !important;
  min-width:0;
  border:none !important;
  border-radius:0 !important;
  padding-right:4px !important;
  background:transparent !important;
}
/* Einheit + Chevron: braucht Platz für „min“/„Sek“ (vorher max 3.2em → angeschnitten) */
#interval-blocks-wrap .wb-num__unit-select{
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  max-width:44px;
  height:100% !important;
  border:none !important;
  border-left:0.5px solid var(--border);
  border-radius:0 !important;
  background:transparent !important;
  color:var(--text-3) !important;
  font-size:11px !important;
  font-weight:400 !important;
  padding:0 16px 0 5px !important;
  line-height:30px !important;
  cursor:pointer;
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 3px center !important;
  background-size:9px !important;
}
#interval-blocks-wrap .wb-drop-gap{
  height:3px;
  margin:2px 0;
  border-radius:var(--radius-pill);
  background:var(--accent-base);
  flex-shrink:0;
  pointer-events:none;
}
/* Workout-Builder: Kopf + dezente Einheit-Auswahl */
.ab-builder-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.ab-builder-head__title{
  margin:0;
}
.ab-builder-metrics{
  font-size:var(--yama-title);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.3;
}
#ab-quickopen-row,
.ab-mode-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.ab-mode-row .btn{
  flex:0 0 auto;
  box-sizing:border-box;
  /* Gleiche Box wie Meta-.form-input (padding 12/16, 0.9rem) */
  height:auto;
  min-height:0;
  padding:12px 16px;
  line-height:1.4;
  font-size:0.9rem;
  font-weight:500;
  white-space:nowrap;
}
#ab-quickopen,
.ab-mode-select.form-input,
.ab-mode-select{
  flex:1 1 220px;
  width:auto;
  min-width:12em;
  max-width:360px;
  box-sizing:border-box;
  /* Wie Meta-.form-input — fester height:40 + Padding schnitt den Text ab */
  height:auto;
  min-height:0;
  margin:0;
  padding:12px 40px 12px 16px;
  line-height:1.4;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  font-size:0.9rem;
  font-weight:400;
  color:var(--neutral-800);
  background-color:var(--input-bg);
  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;
  background-size:12px;
  border:0.5px solid var(--border);
  border-radius:var(--radius-md);
}
/* Vier Meta-Felder: gleiche Spaltenbreite, umbrechen statt abschneiden */
#workout-builder-content .ab-meta-grid,
#athlete-workout-modal .ab-meta-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
#workout-builder-content .ab-meta-grid > *,
#athlete-workout-modal .ab-meta-grid > *{
  min-width:0;
}
#workout-builder-content .ab-meta-grid .form-input,
#athlete-workout-modal .ab-meta-grid .form-input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
}
@media (max-width:1100px){
  #workout-builder-content .ab-meta-grid,
  #athlete-workout-modal .ab-meta-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:560px){
  #workout-builder-content .ab-meta-grid,
  #athlete-workout-modal .ab-meta-grid{
    grid-template-columns:minmax(0, 1fr);
  }
}
body.wb-block-dragging{
  overflow:hidden;
  touch-action:none;
}
/* 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}
/* Inaktive Pages hart ausblenden — kein Rest-Header/Sticky-Leak zwischen Ansichten */
#pages-root > [id^="page-"]:not(.is-active){
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#pages-root > [id^="page-"].is-active{
  display:block !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
/* (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}
.plan-card{cursor:pointer}
.plan-card .btn{cursor:pointer}
.badge-plain{
  font-family:var(--font-body) !important;
  font-weight:500 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}

/* 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:none}
.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}
/* Eine Checkbox für die ganze App (.yama-checkbox). Wie Aktivitätenliste:
   16px, 1,5px heller Rahmen, gewählt = --accent-base + --btn-primary-fg.
   Schalter (.yama-switch / .toggle-switch) bleiben ebenfalls grün. */
input[type="checkbox"].yama-checkbox,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch){
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  flex-shrink:0;
  margin:0;
  border:0;
  border-radius:4px;
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--neutral-300);
  cursor:pointer;
  position:relative;
  vertical-align:middle;
  transition:box-shadow 0.12s,background 0.12s;
}
input[type="checkbox"].yama-checkbox:hover,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch):hover{
  box-shadow:inset 0 0 0 1.5px var(--neutral-400);
  background:transparent;
}
input[type="checkbox"].yama-checkbox:checked,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch):checked{
  background:var(--accent-base);
  box-shadow:inset 0 0 0 1.5px var(--accent-base);
}
input[type="checkbox"].yama-checkbox:checked::after,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch):checked::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:5px;
  height:9px;
  border:solid var(--btn-primary-fg);
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
input[type="checkbox"].yama-checkbox:disabled,
input[type="checkbox"].yama-checkbox:disabled:hover,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch):disabled,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch):disabled:hover{
  box-shadow:inset 0 0 0 1.5px var(--neutral-200);
  background:transparent;
  cursor:default;
}
input[type="checkbox"].yama-checkbox:disabled:checked,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch):disabled:checked{
  background:var(--neutral-400);
  box-shadow:inset 0 0 0 1.5px var(--neutral-400);
}
input[type="checkbox"].yama-checkbox:focus-visible,
input[type="checkbox"]:not(.toggle-switch input):not(.yama-switch):focus-visible{
  outline:2px solid var(--neutral-400);
  outline-offset:2px;
}
.form-check input[type="checkbox"]{margin-top:1px;}
.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;display:flex;flex-direction:column;align-items:stretch}
.cal-cell:hover{border-color:var(--border-strong);background:var(--neutral-50);box-shadow:none}
.cal-cell.today{border-color:var(--accent-base);background:var(--accent-bg)}
.cal-cell.other-month{opacity:0.35;background:var(--neutral-50)}
.cal-cell__add{display:none;align-items:center;justify-content:center;margin-top:auto;flex:0 0 auto;width:100%;min-height:28px;padding:4px 0;border:0.5px dashed var(--border-strong);border-radius:6px;background:var(--card-bg);color:var(--neutral-500);cursor:pointer;font-size:14px;line-height:1;font-family:inherit;transition:border-color var(--duration-base),color var(--duration-base),background var(--duration-base)}
.cal-cell__add .ti{font-size:15px;line-height:1}
.cal-cell__add:hover{border-color:var(--accent-base);color:var(--accent-text);background:var(--accent-bg)}
@media (hover:hover) and (pointer:fine){
  .cal-cell:not(.other-month):hover .cal-cell__add,
  .cal-cell:not(.other-month):focus-within .cal-cell__add{display:flex}
}
/* 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)}
.cal-rtp-label{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--warning-text);background:var(--warning-bg);border-radius:4px;padding:1px 5px;margin-bottom:4px;line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-rtp-label .ti{font-size:11px;flex-shrink:0}
#cal-week-grid .cal-rtp-label{white-space:normal;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical}
/* 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-empty{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;margin:0 0 4px}
.cal-empty-lbl{font-size:13px;font-weight:400;line-height:1.25;color:#B0B5BB}
.cal-empty-plan{
  margin:0;padding:0;border:0;background:transparent;box-shadow:none;
  color:var(--btn-link);font-family:inherit;font-size:13px;font-weight:500;
  line-height:1.25;text-align:left;cursor:pointer;opacity:0;pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .cal-cell:hover .cal-empty-plan,
  .cal-cell:focus-within .cal-empty-plan{opacity:1;pointer-events:auto}
}
.cal-empty-plan:hover,.cal-empty-plan:focus-visible{color:var(--btn-link);background:transparent;text-decoration:underline}
@media (hover:none){
  .cal-empty-plan{opacity:1;pointer-events:auto;font-size:11px}
}
.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):not(.replaced){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):not(.replaced){border-style:solid;border-color:currentColor}
.workout-pill.source-plan-from-template:not(.done):not(.missed):not(.replaced)::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.replaced{
  background:transparent;
  border:0.5px dashed currentColor;
  padding:1px 5px 1px 3px;
  opacity:0.72;
  color:var(--text-3);
}
.workout-pill.replaced .pill-label{
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.workout-pill.replaced .pill-replaced-by{
  display:block;
  color:var(--text-3);
}
.cal-existing-replaced,
.cal-existing-replaced-badge{
  color:var(--text-3);
}
.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}
.workout-pill.cancelled-sick{background:var(--danger-bg);color:var(--danger-text);border:0.5px dashed var(--danger-base);padding:1px 5px 1px 3px;opacity:0.85}
.workout-pill.cancelled-sick .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;text-transform:none;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 (legacy peak-toast hidden; YamaToast below) ── */
.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}
#peak-toast.toast{display:none!important}

/* 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;
}
#compare-bar.compare-bar-legacy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  background: var(--stat-bg);
  color: var(--neutral-0);
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--accent);
}

.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:#16a34a}
.toast.error{background:var(--danger);pointer-events:auto;white-space:normal;max-width:min(90vw,420px);display:inline-flex;align-items:center;gap:var(--space-2);text-align:left}
.toast-msg{flex:1;min-width:0}
.toast-dismiss{flex-shrink:0;margin:-8px -12px -8px 0;padding:0;min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer}

/* ── Nav user state ── */
.nav__avatar{width:32px;height:32px;border-radius:var(--yama-avatar-radius,28%);background:var(--accent-bg);border:0;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;overflow:hidden;object-fit:cover;background-size:cover;background-position:center}
.nav__avatar:hover{transform:scale(1.08)}
.nav__avatar--icon{background:var(--bg-2);color:var(--text-3);font-size:16px}
.nav__avatar--wrap{padding:0;background:transparent}
.nav__avatar--wrap .yama-avatar{width:100%!important;height:100%!important}
.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-side{min-width:0}
.profile-main{min-width:0;max-width:720px}
.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-group{padding:4px 0 8px}
.profile-nav-group + .profile-nav-group{border-top:0.5px solid var(--border-default);margin-top:4px;padding-top:10px}
.profile-nav-group__card{display:contents}
.profile-nav-group__label{
  font-size:9px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--neutral-500);padding:4px 14px 6px;
}
.profile-nav-item{position:relative;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-nav-item--pro svg{color:#D97706}
.profile-nav-item__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.profile-nav-item__hint{display:none;font-weight:400;color:var(--text-3)}
.profile-page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4);
}
.profile-page-head__actions{
  display:flex;align-items:flex-start;flex-shrink:0;margin-left:auto;
}
.profile-page-head__actions:empty{display:none}
.profile-page-head__title{
  font-size:1.75rem;font-weight:500;letter-spacing:-0.02em;
  margin:0 0 4px;color:var(--neutral-800);line-height:1.2;
}
.profile-page-head__sub{
  margin:0;font-size:var(--yama-text);font-weight:400;
  color:var(--text-3,var(--neutral-500));max-width:42em;
}
.profile-page-head__action{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  border-radius:var(--radius-pill);
}
.profile-panel{display:none}.profile-panel.active{display:block}
.profile-card{
  background:var(--bg-1);
  border:0.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
  margin-bottom:var(--space-2);
}
/* Sicherheit: E-Mail + Passwort side-by-side on desktop, equal height */
.profile-sec-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
  align-items:stretch;
}
.profile-sec-grid > .profile-card{
  margin-bottom:0;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
.profile-sec-grid > .profile-card > .btn{
  margin-top:auto;
  align-self:flex-start;
}
@media (min-width:768px){
  .profile-card{padding:var(--space-4);}
  .profile-main{max-width:820px}
  .profile-sec-grid{grid-template-columns:1fr 1fr}
}
.profile-card h2,.profile-card .profile-card__title{
  font-size:var(--yama-title);font-weight:500;letter-spacing:-0.02em;margin:0 0 4px;color:var(--neutral-800)
}
.profile-card .sub,.profile-card .profile-card__sub{
  font-size:var(--yama-text);font-weight:400;color:var(--text-3,var(--neutral-500));margin:0 0 var(--space-4)
}
.profile-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  flex-wrap:wrap;margin-bottom:var(--space-4);
}
.profile-panel-head__title{margin:0 0 4px}
.profile-panel-head__sub{margin:0;color:var(--text-3,var(--neutral-500))}
.profile-panel-head__action{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.profile-card__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.profile-card__view{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  border-radius:var(--radius-pill);white-space:nowrap;
}
.profile-card__link{
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:var(--yama-text);font-weight:500;color:var(--accent-text);
  white-space:nowrap;text-decoration:none;
}
.profile-card__link:hover{text-decoration:underline}
.profil-v2-only{display:none !important}
body.layout-v2 .profil-v2-only{display:block !important}
#card-personal .profile-card__head .profile-card__sub{display:none}
body.layout-v2 #card-personal .profile-card__head .profile-card__sub{display:block}
.profile-card--widget .profile-card__sub{margin-bottom:var(--space-3)}
.profile-toggle-row{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:var(--bg-2,var(--neutral-100));
  cursor:pointer;
}
.profile-toggle-row__icon{
  flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-bg);color:var(--accent-text);
  font-size:18px;
}
.profile-toggle-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.profile-toggle-row__title{font-size:var(--yama-text);font-weight:500;color:var(--neutral-800)}
.profile-toggle-row__hint{color:var(--text-3,var(--neutral-500));line-height:1.35}
/* Flat lime toggle — Profil-Sichtbarkeit / Yama Wächter (außerhalb globaler Checkbox-Styles) */
input.yama-switch[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  position:relative;flex-shrink:0;
  width:48px !important;height:28px !important;margin:0;
  border:none !important;border-radius:var(--radius-pill) !important;
  background:var(--neutral-300);
  cursor:pointer;outline:none;vertical-align:middle;
  transition:background 0.15s ease;
  box-shadow:none;
}
input.yama-switch[type="checkbox"]::after{
  content:"" !important;
  position:absolute;top:3px;left:3px;
  width:22px !important;height:22px !important;
  border:none !important;border-radius:50% !important;
  background:var(--neutral-0);
  box-shadow:none;transform:none !important;
  transition:transform 0.15s ease;
}
input.yama-switch[type="checkbox"]:checked{
  background:var(--accent-base) !important;
  border:none !important;
}
input.yama-switch[type="checkbox"]:checked::after{
  content:"" !important;
  left:3px;top:3px;
  width:22px !important;height:22px !important;
  border:none !important;border-radius:50% !important;
  background:var(--neutral-0) !important;
  transform:translateX(20px) !important;
}
input.yama-switch[type="checkbox"]:focus-visible{outline:2px solid var(--accent-base);outline-offset:2px}
.profile-hero{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  background:var(--bg-1);border:0.5px solid var(--border);border-radius:var(--radius-lg);
  padding:0;box-shadow:var(--shadow-1);margin-bottom:var(--space-2);
  position:relative;overflow:hidden;
}
.profile-hero__main{
  display:flex;align-items:center;gap:32px;flex:1 1 280px;min-width:0;
  padding:24px 28px;
}
.profile-hero__aside{
  flex:0 1 260px;min-width:min(100%,220px);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);
  padding:24px 24px;
  border-left:0.5px solid var(--border-default);
  background:var(--bg-1);
}
.profile-hero__view{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--btn-radius,10px);width:100%;
  white-space:nowrap;
  font:inherit;font-size:var(--yama-text);font-weight:600;color:var(--btn-secondary-fg);
  background:var(--btn-secondary-bg);border:1px solid var(--btn-secondary-border);padding:10px 14px;cursor:pointer;
  transition:background var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease),color var(--duration-base) var(--ease);
}
.profile-hero__view:hover{
  background:var(--btn-secondary-hover);border-color:var(--btn-secondary-border);color:var(--btn-secondary-fg);
}
.profile-hero__privacy{
  display:flex;align-items:center;gap:var(--space-3);
  padding:0;background:transparent;cursor:pointer;
}
.profile-hero__privacy-link{
  border:0;font:inherit;text-align:left;color:inherit;appearance:none;
}
.profile-hero__privacy-text{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
}
.profile-hero__privacy-title{
  font-size:var(--yama-text);font-weight:500;color:var(--neutral-800);line-height:1.25;
}
.profile-hero__privacy-hint{
  color:var(--text-3,var(--neutral-500));line-height:1.3;
}
.profile-hero__avatar-wrap{
  position:relative;width:132px;height:132px;aspect-ratio:1 / 1;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.profile-hero__avatar,
.profile-hero__avatar.avatar-circle{
  margin:0;width:132px !important;height:132px !important;aspect-ratio:1 / 1;
  border-radius:var(--yama-avatar-radius,28%);position:relative;
  border:0;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;font-weight:600;color:var(--neutral-500);
  background-color:var(--neutral-100);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  cursor:pointer;flex-shrink:0;
  overflow:hidden;
  transform:translateZ(0);
  clip-path:none;
}
.profile-hero__avatar.has-photo{
  border-color:transparent;
  background-color:transparent;
  box-shadow:none;
}
.profile-hero__avatar-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  border-radius:inherit;display:block;z-index:0;
  /* Subpixel-Fransen an rounded corners vermeiden */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  image-rendering:auto;
}
.profile-hero__avatar-img[hidden]{display:none !important}
.profile-hero__avatar-fallback{position:relative;z-index:1;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.profile-hero__avatar.has-photo .profile-hero__avatar-fallback{display:none}
.profile-hero__avatar-fallback .ti{font-size:0.42em;color:var(--text-3)}
.profile-hero__cam{
  position:absolute;bottom:0;right:0;width:34px;height:34px;border-radius:50%;
  background:var(--accent-strong);color:var(--neutral-0,#fff);border:2px solid var(--bg-1);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  z-index:2;
}
.profile-hero__meta{min-width:0;flex:1}
.profile-hero__name{font-size:1.35rem;font-weight:600;letter-spacing:-0.02em;color:var(--neutral-800);line-height:1.2}
.profile-hero__user{font-size:0.9rem;color:var(--accent-text);font-weight:600;margin-top:4px}
.profile-hero__email{font-size:0.82rem;color:var(--neutral-500);margin-top:2px}
.profile-hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.avatar-menu-overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.4);padding:var(--space-4);
}
.avatar-menu{
  width:100%;max-width:360px;
  background:var(--bg-1);border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:var(--shadow-3);
}
.avatar-menu__handle{display:none}
.avatar-menu__btn{
  width:100%;display:flex;align-items:center;gap:12px;
  text-align:left;padding:14px;margin-bottom:8px;
  background:var(--bg-1);border:0.5px solid var(--border);border-radius:var(--radius-md);
  color:var(--neutral-800);font-size:var(--yama-text);font-family:inherit;cursor:pointer;
}
.avatar-menu__btn:last-child{margin-bottom:0}
.avatar-menu__btn .ti{font-size:18px;color:var(--accent-text);flex-shrink:0}
.avatar-menu__btn--danger{color:var(--danger-text,var(--neutral-800))}
.avatar-menu__btn--danger .ti{color:var(--danger-text,var(--neutral-500))}
.avatar-menu__cancel{
  width:100%;margin-top:8px;padding:12px;border:1px solid var(--btn-secondary-border);border-radius:var(--btn-radius,10px);
  background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);font-size:var(--yama-text);font-weight:600;cursor:pointer;
  transition:background var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease),color var(--duration-base) var(--ease);
}
.avatar-menu__cancel:hover{
  background:var(--btn-secondary-hover);border-color:var(--btn-secondary-border);color:var(--btn-secondary-fg);
}

/* Avatar crop (Audit #16) */
.avatar-crop-overlay{
  position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;padding:var(--space-4);
}
.avatar-crop{
  width:min(100%,380px);background:var(--bg-1);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);
}
.avatar-crop__title{margin:0;text-align:center}
.avatar-crop__stage{
  position:relative;margin:0 auto;border-radius:var(--yama-avatar-radius,28%);overflow:hidden;
  background:var(--bg-2);touch-action:none;cursor:grab;user-select:none;
}
.avatar-crop__stage:active{cursor:grabbing}
.avatar-crop__img{
  position:absolute;max-width:none;pointer-events:none;user-select:none;
}
.avatar-crop__mask{
  position:absolute;inset:0;border-radius:var(--yama-avatar-radius,28%);
  box-shadow:inset 0 0 0 1px var(--border);pointer-events:none;
}
.avatar-crop__zoom{
  display:flex;flex-direction:column;gap:6px;color:var(--text-3);
}
.avatar-crop__zoom input[type=range]{width:100%;accent-color:var(--accent-strong)}
.avatar-crop__actions{display:flex;gap:var(--space-2)}
.avatar-crop__btn{
  flex:1;padding:12px;border:1px solid transparent;border-radius:var(--btn-radius,10px);
  font-size:var(--yama-text);font-weight:600;cursor:pointer;
  transition:background var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease),color var(--duration-base) var(--ease);
}
.avatar-crop__btn--ghost{
  background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);border-color:var(--btn-secondary-border);
}
.avatar-crop__btn--ghost:hover{
  background:var(--btn-secondary-hover);border-color:var(--btn-secondary-border);color:var(--btn-secondary-fg);
}
.avatar-crop__btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:var(--btn-primary-bg)}
.avatar-crop__btn--primary:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover);color:var(--btn-primary-fg)}

/* Zentrale Avatar-Komponente — abgerundetes Quadrat (~28 % Kantenlänge) */
:root{
  --yama-avatar-radius:28%;
}
.yama-avatar-wrap{
  position:relative;
  display:inline-flex;
  flex-shrink:0;
  line-height:0;
  vertical-align:middle;
  overflow:visible;
}
.yama-avatar,
.yama-avatar img{
  border-radius:var(--yama-avatar-radius);
  object-fit:cover;
  flex-shrink:0;
  display:block;
  border:0;
  box-shadow:none;
  overflow:hidden;
  aspect-ratio:1 / 1;
  box-sizing:border-box;
}
.yama-avatar--fall{
  background:var(--bg-2);
  color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  font-weight:500;line-height:1;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.yama-avatar--fall.yama-avatar--icon{
  text-transform:none;
  letter-spacing:0;
  color:var(--text-3);
  background:var(--bg-2);
}
.yama-avatar__badge{
  position:absolute;
  top:-2px;
  right:-2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent-strong);
  border:2px solid var(--bg-1);
  box-sizing:content-box;
  z-index:2;
  pointer-events:none;
}
.yama-avatar__badge--online{
  background:var(--success-base);
}
.yama-avatar__badge--unread{
  background:var(--accent-strong);
}
.yama-avatar__badge--count{
  top:-4px;
  right:-4px;
  width:auto;
  min-width:16px;
  height:16px;
  padding:0 4px;
  font-size:9px;
  font-weight:600;
  line-height:1;
  color:var(--neutral-0,#fff);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.profile-hero__badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:999px;font-size:0.75rem;font-weight:600;
  background:var(--accent-bg);color:var(--accent-text);
  border:0.5px solid rgba(134,201,34,0.35);
}
.profile-hero__badge .ti{font-size:13px}
.profile-hero__badge--pro{
  /* Gleicher Chip-Look wie Sport — kein Amber/Blau, das mit Feed-Kodierung kollidiert */
  background:var(--accent-bg);color:var(--accent-text);
  border-color:rgba(134,201,34,0.45);
}
.profile-hero__badge[hidden]{display:none !important}
.profile-hero__sport-pick{
  display:inline-flex;align-items:center;gap:4px;
  margin:0;padding:0;border:none;background:transparent;cursor:pointer;
  font:inherit;font-size:var(--yama-text);font-weight:500;
  color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;
}
.profile-hero__sport-pick[hidden]{display:none !important}
.profile-hero__sport-pick:hover{color:var(--accent-strong)}
.profile-hero__sport-pick:focus-visible{outline:2px solid var(--accent-base);outline-offset:2px;border-radius:var(--radius-sm)}
.profil-sport-quickpick{
  z-index:1200;
  min-width:180px;
  max-width:min(240px, calc(100vw - 16px));
  padding:6px;
  border-radius:var(--radius-md);
  background:var(--bg-1);
  border:0.5px solid var(--border-default);
  box-shadow:var(--shadow-3);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.profil-sport-quickpick__btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:var(--yama-text);
  font-weight:500;
  text-align:left;
  cursor:pointer;
}
.profil-sport-quickpick__btn:hover,
.profil-sport-quickpick__btn:focus-visible{
  background:var(--bg-2);
  outline:none;
}
.profil-sport-quickpick__btn .ti{font-size:16px;color:var(--text-3)}
/* Formathinweise deutlich heller als echte Eingaben */
#page-profil .form-input::placeholder,
#page-profil .form-textarea::placeholder,
#page-profil textarea.form-input::placeholder{
  color:var(--neutral-400);
  opacity:1;
}
[data-theme="dark"] #page-profil .form-input::placeholder,
[data-theme="dark"] #page-profil .form-textarea::placeholder,
[data-theme="dark"] #page-profil textarea.form-input::placeholder{
  color:var(--neutral-500);
  opacity:0.7;
}
.yama-pro-card{margin-bottom:16px;max-width:720px}
.yama-pro-card[hidden]{display:none !important}
.form-hint{font-size:0.72rem;color:var(--neutral-500);margin-top:4px;line-height:1.4}
.form-section-label{font-size:0.78rem;font-weight:500;color:var(--neutral-400);letter-spacing:0;text-transform:none;margin:18px 0 8px}
.form-group--check{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--neutral-100);border-radius:var(--radius-md)}
.form-group--check-border{background:var(--neutral-50);border:0.5px solid var(--border-default)}
.form-check-title{font-size:0.88rem;font-weight:600;cursor:pointer;color:var(--neutral-800)}
.profile-card--form{
  position:relative;
  overflow:hidden;
}
.profile-form-actions{
  display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  margin-top:var(--space-4);padding-top:var(--space-3);
  background:transparent;
  border-top:none;
  box-shadow:none;
  position:relative;
  min-height:44px;
}
.profile-form-actions__btns{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-left:auto;
}
.profile-form-actions__hint{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-size:0.78rem;color:var(--accent-strong);
  pointer-events:none;
}
.profile-form-actions--inline{
  position:static;margin:0;padding:0;border:none;justify-content:flex-start;
  background:transparent;box-shadow:none;min-height:0;
}
.profile-form-actions--inline .profile-form-actions__hint{position:static;transform:none}
.pref-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.pref-chip{
  padding:8px 14px;border:0.5px solid var(--border-default);border-radius:var(--radius-sm);
  background:transparent;color:var(--neutral-600);font-size:0.85rem;font-weight:500;
  cursor:pointer;font-family:inherit;
}
.pref-chip:hover{background:var(--neutral-100);color:var(--neutral-800)}
.pref-chip.is-active{
  background:var(--neutral-100);color:var(--neutral-800);border-color:var(--border-strong);
}
.avatar-circle{width:80px;height:80px;border-radius:var(--yama-avatar-radius,28%);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}
/* Hero-Avatar muss .avatar-circle (80px) überschreiben — Spezifität + Reihenfolge */
.profile-hero .profile-hero__avatar,
.profile-hero .profile-hero__avatar.avatar-circle{
  width:132px !important;height:132px !important;aspect-ratio:1 / 1;
  border-radius:var(--yama-avatar-radius,28%);
  border:1px solid var(--neutral-800);background-color:var(--neutral-100);color:var(--neutral-500);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  font-size:2.4rem;
}
.profile-hero .profile-hero__avatar.has-photo{
  border-color:transparent;background-color:transparent;
  box-shadow:0 0 0 1px var(--border);
}
.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:1100;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)}

/* ── Aktivitäts-Detail: Panel rechts im Shell-Frame (nicht Viewport) ─────── */
body.shell-v2 #shell-v2-frame{position:relative}
.modal-overlay.ad-drawer-overlay{
  position:absolute;inset:0;
  display:flex;align-items:stretch;justify-content:flex-end;
  padding:16px;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  /* Liste/Sidebar bleiben bedienbar — nur das Panel fängt Pointer ab */
  pointer-events:none !important;
  z-index:40;
  overflow:visible;
  visibility:hidden;
}
.modal-overlay.ad-drawer-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:none !important;
}
.modal-overlay.ad-drawer-overlay .ad-drawer{
  /* Wichtig: ohne :not(.open) würde das unsichtbare Panel nach dem Schließen
     weiter Klicks fangen (pointer-events:auto auf Child trotz Parent none). */
  pointer-events:none;
  /* Schnelle Detailansicht — breiter als zuvor (~520), aber unter Vollansicht */
  width:clamp(560px, 42vw, 680px);
  max-width:min(680px, calc(100% - 32px));
  height:100%;max-height:100%;align-self:stretch;
  margin:0;border-radius:14px;
  border:0.5px solid var(--border-default);
  box-shadow:0 8px 28px rgba(15,20,25,0.12), 0 2px 8px rgba(15,20,25,0.06);
  transform:translateX(18px);opacity:0.98;
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  background:var(--card-bg);
  transition:transform 0.28s var(--ease, ease), opacity 0.2s ease;
}
.modal-overlay.ad-drawer-overlay.open .ad-drawer{
  pointer-events:auto;
  transform:translateX(0);opacity:1;
}
/* Ohne Shell-Frame: Fallback am Viewport */
body:not(.shell-v2) .modal-overlay.ad-drawer-overlay,
body.shell-v2.shell-v2--classic .modal-overlay.ad-drawer-overlay{
  position:fixed;inset:0;padding:16px;z-index:500;
}
.ad-drawer__header{
  display:flex;flex-direction:column;gap:10px;
  padding:12px 14px 12px;border-bottom:0.5px solid var(--border-default);
  flex-shrink:0;background:var(--card-bg);z-index:2;
  border-radius:14px 14px 0 0;
  position:sticky;top:0;
}
.ad-drawer__header-top{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.ad-drawer__header-main{
  display:flex;align-items:flex-start;gap:10px;min-width:0;
}
.ad-drawer__nav{
  display:inline-flex;flex-shrink:0;gap:0;
  border:0.5px solid var(--border-default);border-radius:8px;overflow:hidden;
}
.ad-drawer__nav .ad-drawer__iconbtn{
  width:30px;height:30px;border:0;border-radius:0;
}
.ad-drawer__nav .ad-drawer__iconbtn + .ad-drawer__iconbtn{
  border-left:0.5px solid var(--border-default);
}
.ad-drawer__kicker{
  flex:1;min-width:0;
  font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.ad-drawer__close{margin-left:auto;flex-shrink:0}
.ad-drawer__title{
  flex:1;min-width:0;margin:0;
  font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;line-height:1.3;
  color:var(--neutral-900, var(--neutral-800));
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.ad-drawer__actions{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  margin-left:4px;
}
.ad-drawer__actions .btn-primary.btn-sm{
  padding:5px 10px;font-weight:600;
}
.ad-drawer__actions #ad-open-page{
  opacity:0.85;
}
.ad-drawer__meta{
  font-size:0.75rem;color:var(--neutral-500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.35;min-height:1.1em;
}
.ad-drawer__meta:empty{display:none}
.ad-drawer__iconbtn{
  width:34px;height:34px;border-radius:8px;border:0.5px solid var(--border-default);
  background:transparent;color:var(--neutral-700);display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
}
.ad-drawer__iconbtn:hover{background:var(--neutral-100)}
.ad-drawer__iconbtn:disabled{opacity:0.35;cursor:default}
.ad-drawer__body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 18px 28px;
}
.ad-drawer__grab{display:none}
#ad-stats.ad-stats{
  display:flex;flex-direction:column;gap:8px;margin-bottom:14px;
}
#ad-stats .ad-stats__row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
#ad-stats .ad-stat{
  background:var(--card-bg);border:0.5px solid var(--border-default);
  border-radius:8px;padding:10px 12px;min-width:0;
}
#ad-stats .ad-stat--sec{padding:8px 10px}
#ad-stats .ad-stat--sec .stat-block__label{font-size:0.65rem}
#ad-stats .ad-stat--sec .stat-block__value{font-size:0.95rem}
#ad-map{height:250px}
.yama-ms-legs__table th,
.yama-ms-legs__table td{
  padding:6px 8px 6px 0;
  text-align:left;
  vertical-align:baseline;
}
.yama-ms-legs__table td{color:var(--text-1)}
.aa-ms-legs table th,
.aa-ms-legs table td{
  padding:6px 8px 6px 0;
  text-align:left;
}
/* Mobile Metrics: Kerndaten-Karten + Messwert-Liste (ohne Überschriften) */
.ad-metrics{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.ad-metrics__core{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.ad-metrics__core-card{
  background:var(--bg-1,var(--card-bg));
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-md,10px);
  padding:10px 8px;
  min-width:0;
  box-shadow:var(--shadow-1);
}
.ad-metrics__core-lbl{
  font-size:9px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--neutral-500);margin-bottom:5px;
}
.ad-metrics__core-val{
  font-size:clamp(0.85rem,3.6vw,1.1rem);font-weight:600;letter-spacing:-0.02em;line-height:1.15;
  color:var(--neutral-800);font-variant-numeric:tabular-nums;
  word-break:break-word;
}
.ad-metrics__unit{
  font-size:0.65rem;font-weight:400;color:var(--neutral-500);margin-left:2px;
}
.ad-metrics__core-note{
  font-size:9px;color:var(--neutral-400);margin-top:5px;line-height:1.25;
}
.ad-metrics__more{
  background:var(--bg-1,var(--card-bg));
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-md,10px);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  box-shadow:var(--shadow-1);
}
.ad-metrics__more-item{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-bottom:0.5px solid var(--border-default);
  min-width:0;
}
.ad-metrics__more-item:nth-child(odd){border-right:0.5px solid var(--border-default)}
.ad-metrics__more-item:nth-last-child(-n+2){border-bottom:0}
.ad-metrics__more-item:last-child:nth-child(odd){border-bottom:0}
.ad-metrics__more-icon{
  width:28px;height:28px;border-radius:999px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-2,var(--neutral-100));color:var(--neutral-500);
}
.ad-metrics__more-icon .ti{font-size:14px}
.ad-metrics__more-text{min-width:0;overflow:hidden}
.ad-metrics__more-lbl{
  font-size:10px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--neutral-500);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ad-metrics__more-sub{
  font-size:10px;color:var(--neutral-400);margin-top:2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ad-metrics__more-val{
  font-size:0.95rem;font-weight:600;color:var(--neutral-800);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  justify-self:end;text-align:right;padding-left:6px;
}
/* Vollansicht: Flagge / Link als Icon-only Buttons */
.adp-icon-btn{
  min-height:0 !important;
  width:34px;height:34px;padding:0 !important;
  justify-content:center;gap:0;flex-shrink:0;
}
.adp-icon-btn .ti{font-size:15px;margin:0}
.adp-hero-row{display:grid;gap:var(--space-3);margin-bottom:var(--space-3)}
.act-row.is-detail-open{
  background:var(--accent-bg) !important;
  border-color:var(--border-default);
}
/* Unter ~980px: Einschub volle Breite, Liste tritt zurück */
@media (max-width:980px){
  .modal-overlay.ad-drawer-overlay{padding:12px}
  .modal-overlay.ad-drawer-overlay .ad-drawer{
    width:100%;max-width:100%;
  }
}
@media (max-width:720px){
  .modal-overlay.ad-drawer-overlay{padding:12px}
  .modal-overlay.ad-drawer-overlay .ad-drawer{
    width:100%;max-width:100%;
  }
  /* Titel + Aktionen in einer Zeile; Labels klein, nicht ausblenden */
  .ad-drawer__header-main{
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
  }
  .ad-drawer__title{
    font-size:0.95rem;
    -webkit-line-clamp:1;
  }
  .ad-drawer__actions{
    margin-left:0;
    width:auto;
    flex-shrink:0;
    gap:4px;
    justify-content:flex-end;
  }
  .ad-drawer__actions .btn,
  .ad-drawer__actions .btn-sm{
    min-height:0;
    height:auto;
    padding:4px 8px;
    font-size:10px;
    letter-spacing:normal;
    gap:4px;
  }
  .ad-drawer__actions .btn .ti{
    font-size:12px;
  }
  .ad-drawer__full-label{display:inline}
  .ad-drawer__header{gap:6px}
  .ad-drawer__meta{margin-top:0}
  #ad-stats .ad-stats__row{gap:6px}
}

/* Mobile: Aktivitäts-Detail als Bottom-Sheet (von unten, X + Drag-to-Dismiss) */
@media (max-width: 899px) {
  .modal-overlay.ad-drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:520 !important;
    padding:0;
    align-items:flex-end;
    justify-content:stretch;
    background:transparent;
    visibility:hidden;
    pointer-events:none !important;
  }
  .modal-overlay.ad-drawer-overlay.open{
    visibility:visible;
    pointer-events:auto !important;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  .modal-overlay.ad-drawer-overlay .ad-drawer{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:min(92dvh, calc(100% - 28px));
    align-self:flex-end;
    margin:0;
    border-radius:18px 18px 0 0;
    border:0;
    border-top:0.5px solid var(--border-default);
    box-shadow:var(--shadow-3, 0 -8px 40px rgba(15,20,25,0.18));
    transform:translateY(100%);
    opacity:1;
    padding:0;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .modal-overlay.ad-drawer-overlay.open .ad-drawer{
    transform:translateY(0);
  }
  .ad-drawer__grab{
    display:block;
    width:36px;height:4px;border-radius:999px;
    background:var(--neutral-300);
    margin:10px auto 4px;
    flex-shrink:0;
  }
  .ad-drawer__header{
    border-radius:18px 18px 0 0;
    padding-top:4px;
  }
  .ad-drawer__close{
    width:44px;height:44px;
    border-radius:var(--radius-md, 10px);
    margin-left:auto;
  }
  .ad-drawer__nav .ad-drawer__iconbtn{
    width:40px;height:40px;
  }
  .ad-drawer__header{gap:6px;padding:4px 14px 10px}
  .ad-drawer__header-main{
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
  }
  .ad-drawer__title{
    font-size:0.95rem;
    -webkit-line-clamp:1;
  }
  .ad-drawer__actions{
    margin-left:0;
    width:auto;
    flex-shrink:0;
    gap:4px;
  }
  .ad-drawer__actions .btn,
  .ad-drawer__actions .btn-sm{
    min-height:0 !important;
    height:auto;
    padding:4px 8px;
    font-size:10px;
    letter-spacing:normal;
    gap:4px;
  }
  .ad-drawer__actions .btn .ti{font-size:12px}
  .ad-drawer__full-label{display:inline}
  /* Generischer Modal-Grabber am .modal::before ausblenden — eigener .ad-drawer__grab */
  .modal-overlay.ad-drawer-overlay .ad-drawer::before{display:none}
}
@media (min-width:900px){
  .ad-drawer__grab{display:none}
}
/* Drawer offen (Desktop): Body-Scroll nicht sperren — Liste bleibt bedienbar.
   Mobile-Sheet setzt zusätzlich .modal-open → dort greift body.modal-open { overflow:hidden }. */
body.ad-drawer-open:not(.modal-open){overflow:auto}
.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; }
html.yama-act-adv-open { overflow: hidden; }
/* Shell-v2 setzt #mob-bottom-nav auf display:flex !important (höhere Spezifität) —
   deshalb hier explizit mit gleichem Body-Selektor ausblenden. */
html.yama-act-adv-open #mob-bottom-nav,
html.yama-act-adv-open #yama-fab-root,
html.yama-act-adv-open body.shell-v2 #mob-bottom-nav,
html.yama-act-adv-open body.shell-v2:not(.shell-v2--classic):not(.shell-v2--auth) #mob-bottom-nav {
  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 und verdeckt den unteren Teil.
   Shell-v2 setzt display:flex !important mit höherer Spezifität — deshalb hier
   denselben Body-Selektor + :has(.modal-overlay.open). */
body.modal-open #mob-bottom-nav,
body.modal-open #yama-fab-root,
body.shell-v2.modal-open #mob-bottom-nav,
body.shell-v2.modal-open #yama-fab-root,
body.shell-v2:not(.shell-v2--classic):not(.shell-v2--auth).modal-open #mob-bottom-nav,
body.shell-v2:not(.shell-v2--classic):not(.shell-v2--auth).modal-open #yama-fab-root,
body:has(.modal-overlay.open) #compare-bar,
body:has(.modal-overlay.open) #mob-bottom-nav,
body:has(.modal-overlay.open) #yama-fab-root,
body.shell-v2:has(.modal-overlay.open) #mob-bottom-nav,
body.shell-v2:has(.modal-overlay.open) #yama-fab-root,
body.shell-v2:not(.shell-v2--classic):not(.shell-v2--auth):has(.modal-overlay.open) #mob-bottom-nav,
body.shell-v2:not(.shell-v2--classic):not(.shell-v2--auth):has(.modal-overlay.open) #yama-fab-root {
  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:36px;
  height:36px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, currentColor 12%, transparent);
  color:var(--accent-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:0;
}
.equip-icon .ti{
  font-size:20px;
  line-height:1;
}
.equip-icon svg,
.equip-icon img.equip-png{
  width:20px;
  height:20px;
  display:block;
  object-fit:contain;
}
.equip-icon[data-equip="schuh"]{color:var(--accent-strong)}
.equip-icon[data-equip="fahrrad"]{color:#185FA5}
.equip-icon[data-equip="sonstiges"]{
  color:var(--text-3);
  background:var(--bg-2);
}
[data-theme="dark"] .equip-icon[data-equip="fahrrad"]{color:#6FA5D9}
[data-theme="dark"] .equip-icon[data-equip="schuh"]{color:var(--accent-base)}
.equip-inline-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, currentColor 12%, transparent);
  color:var(--accent-strong);
  vertical-align:middle;
  flex-shrink:0;
}
.equip-inline-ico .ti{font-size:14px;line-height:1}
.equip-inline-ico svg{display:block;flex-shrink:0}
.equip-inline-ico[data-equip="schuh"]{color:var(--accent-strong)}
.equip-inline-ico[data-equip="fahrrad"]{color:#185FA5}
.equip-inline-ico[data-equip="sonstiges"]{color:var(--text-3);background:var(--bg-2)}
.equip-empty-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin:0 auto 6px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, currentColor 12%, transparent);
  color:var(--accent-strong);
}
.equip-empty-icon .ti{font-size:20px;line-height:1}
.equip-empty-icon svg,
.equip-empty-icon img.equip-png{width:20px;height:20px;display:block;object-fit:contain}
.equip-inline-ico img.equip-png{width:14px;height:14px;display:block;object-fit:contain}
[data-theme="dark"] .equip-icon img.equip-png,
[data-theme="dark"] .equip-empty-icon img.equip-png,
[data-theme="dark"] .equip-inline-ico img.equip-png{
  filter:brightness(0) invert(1);
  opacity:0.92;
}
.equip-empty-icon[data-equip="schuh"]{color:var(--accent-strong)}
.equip-empty-icon[data-equip="fahrrad"]{color:#185FA5}
.equip-empty-icon[data-equip="sonstiges"]{color:var(--text-3);background:var(--bg-2)}
.equip-badge{
  font-size:var(--yama-micro);
  font-weight:500;
  padding:2px 6px;
  border-radius:var(--radius-pill);
  margin-left:6px;
  vertical-align:middle;
  letter-spacing:0;
  text-transform:none;
  font-family:var(--font-body);
}
.equip-badge--warn{
  color:var(--danger-text);
  background:var(--danger-bg);
}
.equip-badge--near{
  color:var(--warning-text);
  background:var(--warning-bg);
}
.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-icon--logo{background:var(--bg-2);padding:8px;overflow:hidden}
.conn-icon--logo img{width:100%;height:100%;object-fit:contain;display:block}
.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:var(--btn-radius,10px);border:1px solid var(--btn-primary-bg);background:var(--btn-primary-bg);font-size:0.78rem;font-weight:600;cursor:pointer;color:var(--btn-primary-fg);font-family:var(--font-body);letter-spacing:normal;text-transform:none;transition:background 0.15s,border-color 0.15s}
.conn-btn-connect:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover);color:var(--btn-primary-fg);box-shadow:none}
.conn-btn-connect:disabled{opacity:0.45;cursor:not-allowed;box-shadow:none}
.conn-btn-connected{padding:8px 20px;border-radius:var(--radius-xs);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}
.conn-soon-badge{
  font-size:0.66rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  background:var(--neutral-100);padding:2px 8px;border-radius:999px;
  color:var(--neutral-500);margin-left:6px;border:0.5px solid var(--border-default);
  vertical-align:middle;
}
.pr-est-badge{
  display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
  padding:2px 7px;border-radius:999px;
  font-size:0.66rem;font-weight:600;letter-spacing:0.02em;
  color:var(--neutral-600);background:var(--neutral-100);
  border:0.5px solid var(--border-default);cursor:help;
}
.pr-est-badge .ti{font-size:11px;line-height:1}
/* ════════════════════════════════════════════════════════════════════════
   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-Icons: farbiges Glyph ohne Hintergrundkreis */
.sport-icon-dot{width:38px;height:38px;border-radius:0;background:transparent;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:transparent;color:#185FA5}
.sport-icon-dot[data-sport="swim"]{background:transparent;color:#0F6E56}
.sport-icon-dot[data-sport="strength"]{background:transparent;color:#854F0B}
.sport-icon-dot[data-sport="nordicski"]{background:transparent;color:#0A6FA5}
.sport-icon-dot[data-sport="rowing"]{background:transparent;color:#0C7A6E}
.sport-icon-dot[data-sport="skitour"]{background:transparent;color:#6D45C9}
.sport-icon-dot[data-sport="elliptical"]{background:transparent;color:#854F0B}
.sport-icon-dot[data-sport="rest"]{background:transparent;color:var(--neutral-400)}
.sport-icon-dot[data-sport="triathlon"]{background:transparent;color:#6D28D9}
[data-theme="dark"] .sport-icon-dot{background:transparent;color:var(--accent)}
[data-theme="dark"] .sport-icon-dot[data-sport="bike"]{background:transparent;color:#93c5fd}
[data-theme="dark"] .sport-icon-dot[data-sport="swim"]{background:transparent;color:#6ee7b7}
[data-theme="dark"] .sport-icon-dot[data-sport="strength"]{background:transparent;color:#fdba74}
[data-theme="dark"] .sport-icon-dot[data-sport="nordicski"]{background:transparent;color:#7dd3fc}
[data-theme="dark"] .sport-icon-dot[data-sport="rowing"]{background:transparent;color:#5eead4}
[data-theme="dark"] .sport-icon-dot[data-sport="skitour"]{background:transparent;color:#c4b5fd}
[data-theme="dark"] .sport-icon-dot[data-sport="elliptical"]{background:transparent;color:#fcd34d}
[data-theme="dark"] .sport-icon-dot[data-sport="rest"]{background:transparent;color:var(--neutral-400)}

/* Subtile Glühkanten bei Akzent-Buttons im Dunkelmodus */
[data-theme="dark"] .btn-primary{box-shadow:none}
[data-theme="dark"] .btn-primary:hover{box-shadow:none}

/* 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: KPI-Kacheln 4 in einer Reihe, Phone 2×2 (unabhängig vom Vorperioden-Vergleich) */
.an-headlines{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.an-headlines > .card{min-width:0}
.an-headlines--empty{grid-template-columns:1fr}
/* 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}
  .an-headlines:not(.an-headlines--empty){grid-template-columns:repeat(2,minmax(0,1fr))}
  /* act-stats-grid: Layout via .act-stats-grid / .act-stat */
}

/* 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)}
.act-icon-btn--del:hover{color:var(--danger-text)}
@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 > .cal-empty,
#ca-cal-week-grid .cal-cell > .cal-empty{
  grid-column: 2;
  align-self: start;
  min-width: 0;
  margin: 0;
}

@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. */
  /* Die drei Nav-Panels: nur noch z-index und Deckelung hier. Position und
     Umhängen an den body macht app.js/_panelAnBodyHaengen — nötig, weil
     #nav-actions mit -webkit-overflow-scrolling:touch auf iOS einen eigenen
     Rendering-Layer erzeugt, in dem position:fixed bei KINDERN gebrochen wird.
     Eine reine CSS-Lösung reicht deshalb nicht (Befund 21.07.2026). */
  #more-menu-panel,
  #settings-panel,
  #notif-panel {
    z-index: 2000;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    max-width: calc(100vw - 24px);
  }

  .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: ≤640px Legacy — Phone-Toolbar (≤899) überschreibt ── */
  #page-aktivitaeten .act-list-toolbar {
    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;
    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 #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;
  }
  /* Dashboard-Bereitschaft ausnehmen — dort sollen 2 Spalten bleiben */
  [style*="grid-template-columns:repeat(2"]:not(.dash-readiness-metrics) {
    grid-template-columns: 1fr !important;
  }
  /* Bereitschaft-Metriken: 2 Spalten behalten (Screenshot-Layout).
     Wichtig: „1fr 1fr“ — die Regel darunter matched auf den String „repeat(2“. */
  .dash-readiness-metrics,
  #dash-status-swipe .dash-readiness-metrics,
  #page-dashboard #dash-readiness-host .dash-readiness-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 16px !important;
  }
  /* Aktivität-Detail: TSS + IF bleiben nebeneinander */
  .adp-hero-row,
  .adp-hero-row[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .adp-hero-row:has(> :only-child) {
    grid-template-columns: 1fr !important;
  }
  /* Vollansicht: Flagge / Link als kompakte Icon-Buttons */
  #act-detail-content .adp-icon-btn,
  #page-aktivitaet .adp-icon-btn {
    min-height: 0 !important;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    justify-content: center;
    gap: 0;
  }
  #act-detail-content .adp-icon-btn .ti,
  #page-aktivitaet .adp-icon-btn .ti {
    font-size: 15px;
    margin: 0;
  }
  [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;
  }

  /* Builder-Felder: gleiche Höhe auf iOS (Select sonst ≠ Input → versetzt) */
  #interval-blocks-wrap .wb-ctrl {
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 16px !important;
    line-height: 36px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: var(--radius-sm) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  #interval-blocks-wrap select.wb-ctrl {
    padding-right: 16px !important;
    line-height: 34px !important;
    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 4px center;
    background-size: 10px;
  }
  #interval-blocks-wrap .wb-cell > select.wb-ctrl {
    width: 48px !important;
    min-width: 0 !important;
  }
  #interval-blocks-wrap .wb-num{
    height: 36px;
  }
  #interval-blocks-wrap .wb-num--sm{width: 52px}
  #interval-blocks-wrap .wb-num--md{width: 68px}
  #interval-blocks-wrap .wb-num--lg{width: 80px}
  #interval-blocks-wrap .wb-dur,
  #interval-blocks-wrap .wb-num--dur {
    height: 36px !important;
    width: 116px;
  }
  #interval-blocks-wrap .wb-num__unit-select {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    font-size: 12px !important;
    line-height: 34px !important;
  }
  #interval-blocks-wrap .wb-row {
    align-items: flex-end !important;
    gap: 6px 7px !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;
  }
  #cal-week-grid .cal-cell > .cal-empty,
  #ca-cal-week-grid .cal-cell > .cal-empty{
    grid-column: 2;
    align-self: start;
    min-width: 0;
  }

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

/* ── Profil — Phone/Tablet ≤899px = iOS-Settings-Stil ───────────────────
   Breakpoint aligned mit shell-v2 Phone-Chrome. Liste → Tap → Sub-Page
   mit Zurück. Detail-Hide braucht !important gegen shell-v2 Nav-Restore. */
@media (max-width: 899px) {
  #page-profil > section {
    padding: 16px 0 calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #page-profil .profile-page-head {
    margin-bottom: 16px !important;
    gap: 10px !important;
  }
  #page-profil .profile-page-head__title {
    font-size: calc(var(--yama-title) + 4px) !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
  }
  #page-profil .profile-page-head__sub { display: none !important; }

  .profile-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-3) !important;
    width: 100% !important;
  }
  .profile-side,
  .profile-main,
  .profile-nav {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  /* Liste: Hero oben, Nav darunter. Detail: nur Panel. */
  body:not(.profile-mobile-detail) #page-profil .profile-main { order: -1; }

  .profile-hero {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-1) !important;
    border: 0.5px solid var(--border) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden;
  }
  .profile-hero__main {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    gap: 14px !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  .profile-hero__aside {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    border-left: none !important;
    border-top: 0.5px solid var(--border-default) !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }
  .profile-hero__avatar-wrap {
    width: 64px !important;
    height: 64px !important;
    aspect-ratio: 1 / 1;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: var(--yama-avatar-radius, 28%);
  }
  /* Spezifität muss .profile-hero .profile-hero__avatar (Desktop 132px) schlagen */
  .profile-hero .profile-hero__avatar,
  .profile-hero .profile-hero__avatar.avatar-circle {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--yama-avatar-radius, 28%) !important;
    clip-path: none !important;
    background-color: var(--accent-base) !important;
    color: var(--neutral-800) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .profile-hero .profile-hero__avatar.has-photo {
    background-color: transparent !important;
    box-shadow: none !important;
  }
  .profile-hero__avatar-img {
    border-radius: var(--yama-avatar-radius, 28%) !important;
  }
  .profile-hero__avatar-fallback {
    color: var(--neutral-800) !important;
  }
  .profile-hero__cam { display: none !important; }
  .profile-hero__meta {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden;
  }
  .profile-hero__name {
    font-size: var(--yama-title) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .profile-hero__user {
    font-size: var(--yama-text) !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    color: var(--accent-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .profile-hero__email,
  .profile-hero__badges { display: none !important; }
  .profile-hero__sport-pick {
    margin-top: 4px !important;
    font-size: var(--yama-text) !important;
  }

  .profile-hero__privacy {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    min-height: 52px;
    box-sizing: border-box;
    border-top: none !important;
  }
  .profile-hero__privacy-title {
    font-size: var(--yama-text) !important;
    font-weight: 500 !important;
    color: var(--neutral-800) !important;
  }
  .profile-hero__view {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    min-height: 48px;
    border: none !important;
    border-radius: 0 !important;
    border-top: 0.5px solid var(--border-default) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: var(--yama-text) !important;
    font-weight: 500 !important;
    color: var(--neutral-800) !important;
    text-align: left !important;
    position: relative;
  }
  .profile-hero__view::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--neutral-400);
    border-bottom: 1.5px solid var(--neutral-400);
    transform: rotate(-45deg);
    flex-shrink: 0;
  }

  .profile-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
    padding: 0 0 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative !important;
    top: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  .profile-nav-group {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .profile-nav-group + .profile-nav-group {
    border-top: none !important;
    margin-top: var(--space-2) !important;
    padding-top: 0 !important;
  }
  .profile-nav-group__label {
    padding: 4px 4px 10px !important;
    background: transparent !important;
    border: none !important;
    font-size: var(--yama-label, 11px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--text-2) !important;
  }
  .profile-nav-group__card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: var(--bg-1) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-1);
  }
  .profile-nav-item {
    padding: 14px 40px 14px 16px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 0.5px solid var(--border-default) !important;
    background: transparent !important;
    font-size: var(--yama-text) !important;
    font-weight: 500 !important;
    color: var(--neutral-800) !important;
    min-height: 48px;
    position: relative;
    width: 100% !important;
    text-align: left;
    box-sizing: border-box;
  }
  .profile-nav-group__card .profile-nav-item:last-child { border-bottom: none !important; }
  .profile-nav-item:hover,
  .profile-nav-item:active { background: var(--bg-2) !important; }
  .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);
  }
  .profile-nav-item.active { background: transparent !important; color: inherit !important; }
  .profile-nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--neutral-500);
  }
  .profile-nav-item__hint {
    display: block !important;
    margin-top: 1px;
    color: var(--text-3) !important;
  }

  body.profile-mobile-detail #page-profil .profile-side,
  body.profile-mobile-detail #page-profil .profile-layout > div:first-child {
    display: none !important;
  }
  body.profile-mobile-detail #page-profil .profile-hero,
  body.profile-mobile-detail #page-profil .yama-pro-card,
  body.profile-mobile-detail #page-profil > section > .container > div:first-child {
    display: none !important;
  }
  body.profile-mobile-detail #page-profil .profile-mobile-toolbar {
    display: none !important;
  }

  /* Inhaltstitel entfällt im Detail — Titel sitzt in der Blur-Leiste */
  .profile-mobile-toolbar {
    position: static;
    z-index: auto;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin: 0;
  }
  .profile-mobile-back {
    display: none !important;
  }
  .profile-mobile-title {
    display: none;
  }

  /* Panel-Titel nicht doppelt zur Toolbar */
  body.profile-mobile-detail #page-profil .profile-card__head,
  body.profile-mobile-detail #page-profil .profile-panel-head {
    display: none !important;
  }

  body:not(.profile-mobile-detail) #page-profil .profile-panel {
    display: none !important;
  }
  body.profile-mobile-detail #page-profil .profile-panel.active {
    display: block !important;
  }

  /* Formular-Dichte im Profil-Detail */
  body.profile-mobile-detail #page-profil .profile-card {
    padding: var(--space-4) !important;
  }
  body.profile-mobile-detail #page-profil .form-group {
    margin-bottom: 18px;
  }
  body.profile-mobile-detail #page-profil .form-label {
    margin-bottom: 6px;
  }
  body.profile-mobile-detail #page-profil .form-input,
  body.profile-mobile-detail #page-profil .form-select,
  body.profile-mobile-detail #page-profil select.form-input,
  body.profile-mobile-detail #page-profil input.form-input {
    min-height: 48px;
    height: 48px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.profile-mobile-detail #page-profil .form-textarea {
    min-height: 96px;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  body.profile-mobile-detail #page-profil .form-hint {
    margin-top: 4px;
  }
  body.profile-mobile-detail #page-profil .form-section-label {
    margin-top: 18px;
    margin-bottom: 8px;
  }
  body.profile-mobile-detail #page-profil .form-row {
    gap: 18px;
    row-gap: 0;
  }
  .profile-card { padding: var(--space-4) !important; }
}

/* 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; }
}
@media (min-width: 900px) and (max-width: 960px) {
  .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;
  }

  /* ── Überlauf der oberen Leiste (gemessen 19.07.2026) ──────────────────
     Befund: #nav-actions war 272px breit und ragte bei 402px Viewport 112px
     über den rechten Rand — Glocke, Einstellungen und Avatar lagen außerhalb.
     Weil das Element die Seite aufspannte, erschienen ALLE Inhaltskarten
     verschoben und angeschnitten (Screenshots Analyse/Pläne/Athleten).

     Rechnung: 8 Buttons à 30px + 7 Abstände à 4px = 268px. Nach Logo (~120px),
     Avatar (32px) und Padding (24px) bleiben bei 402px nur ~226px übrig.

     Die vorhandenen Regeln schrumpften die Buttons, änderten aber nichts an
     ihrer Zahl. Statt Funktionen zu verstecken: Die Leiste darf schrumpfen und
     bei Bedarf horizontal scrollen — alle Ziele bleiben erreichbar. */
  .nav__inner {
    max-width: 100vw;
    overflow: hidden;
  }
  #nav-actions {
    /* flex-basis:0 + min-width:0 ist der entscheidende Teil: Ohne beides
       behält ein Flex-Element seine Inhaltsbreite und schrumpft nicht, egal
       was flex-shrink sagt. margin-left:auto (aus .nav__actions) muss weg,
       sonst wird der Block trotzdem nach rechts gedrückt. */
    flex: 1 1 0;
    min-width: 0;
    margin-left: 8px !important;
    /* NICHT flex-end: Das drückt die Elemente nach rechts und schiebt die
       linken aus dem Container, ohne dass gescrollt werden kann (gemessen:
       coach-mode-toggle, menu-btn und wellness-btn waren unerreichbar).
       flex-start lässt sie stattdessen nach rechts überstehen — dann greift
       overflow-x und alles bleibt per Wischen erreichbar. */
    justify-content: flex-start;
    /* overflow-x:auto + overflow-y:hidden machten den Container zum
       Scroll-Container. Nebenwirkung (gefunden 20.07.2026): Die drei
       Nav-Panels (Menü, Einstellungen, Benachrichtigungen) sind Kinder
       dieses Containers und position:absolute — overflow-y:hidden schnitt
       sie ab, sie klappten unsichtbar auf. Auf Mobil war damit der Zugang
       zu Aero Hub, Radraum und Admin-Bereich verloren.

       clip-path:none allein reicht nicht; overflow ist die Ursache. Lösung:
       Der Container scrollt weiterhin, aber die Panels werden über eine
       eigene Regel davon ausgenommen (siehe unten) — sie liegen visuell
       außerhalb, obwohl sie im DOM Kinder bleiben. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -webkit-overflow-scrolling: touch;
  }
  #nav-actions::-webkit-scrollbar { display: none; }
  /* Buttons dürfen NICHT schrumpfen — sonst werden die Symbole unlesbar.
     Sie rutschen stattdessen in den scrollbaren Bereich. */
  #nav-actions > button,
  #nav-actions > a {
    flex-shrink: 0;
  }
  /* ── Athleten-Auswahlleiste (Coach-Analyse) ───────────────────────────
     Vier Elemente (Label, Auswahlfeld, Chat, Status) mit flex-wrap brachen
     auf Mobil in VIER Zeilen um: Das Auswahlfeld hat flex:1 und beansprucht
     die volle Breite, alles andere rutscht einzeln darunter. Gemessen bei
     402px: 334px sind fest belegt, für das Feld blieben 36px bei
     min-width:180px.

     Jetzt zwei Zeilen: Auswahlfeld oben über die volle Breite, darunter
     Chat-Knopf und Statuszeile nebeneinander. Das Label entfällt — das Feld
     zeigt ohnehin "— Athlet auswählen —", solange nichts gewählt ist. */
  #ca-athlete-bar {
    /* Hebt die frühere Regel #ca-athlete-bar{flex-direction:column} auf
       (weiter oben im selben Stylesheet, eigener 640px-Block). In Spalten-
       richtung bekommt JEDES Kind eine eigene Zeile — die flex-Angaben unten
       hatten dort keine Wirkung. Zeile plus Umbruch statt Spalte: Auswahlfeld
       oben über die volle Breite, Chat und Status teilen sich Zeile 2. */
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  /* Ebenfalls aus dem früheren Block: width:100% am select ist hier richtig,
     wird aber über flex-basis gesteuert — sonst kollidieren beide. */
  #ca-athlete-bar select {
    width: auto !important;
  }
  #ca-athlete-bar > [data-i18n="coach.athlete"] {
    display: none;
  }
  #ca-athlete-select {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Chat und Status teilen sich Zeile 2. Ohne min-width:0 am Status bricht
     er in eine eigene Zeile um, sobald sein Text länger wird — gemessen
     brauchen beide zusammen 229px von 346px verfügbaren, es passt also. */
  #ca-chat-btn {
    flex: 0 0 auto;
    order: 1;
  }
  #ca-athlete-status {
    flex: 0 1 auto;
    min-width: 0;
    order: 2;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Scrollbare Pillenreihen (Sport-Filter u. ä.) ─────────────────────
     Reihen mit width:fit-content spannten die ganze Seite auf, statt in sich
     zu scrollen — der Nutzer musste den gesamten Bildschirm schieben, um an
     den letzten Eintrag zu kommen ("Kraft" in der Bibliothek, 19.07.2026).

     Die Container tragen jetzt max-width:100% + overflow-x:auto. Damit man
     sieht, DASS es weitergeht, bekommt eine überlaufende Reihe rechts einen
     weichen Verlauf. Ohne ihn sieht ein angeschnittenes Wort nach Fehler aus,
     nicht nach Scrollhinweis. */
  [data-coach-lib-sport-row],
  #ca-sport-filter {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  /* Kein Verlauf, wenn ohnehin alles passt — sonst wirkt der letzte Eintrag
     grundlos ausgeblendet. Umgesetzt über animation-timeline wäre eleganter,
     ist aber noch nicht breit unterstützt; deshalb bewusst simpel gehalten:
     Der Verlauf kostet nur 24px und stört auch bei voller Reihe kaum. */
  [data-coach-lib-sport-row]::-webkit-scrollbar,
  #ca-sport-filter::-webkit-scrollbar { display: none; }

  /* ── Athletenzeile (gemessen 19.07.2026) ──────────────────────────────
     Befund: Der Zahlenblock (km / Zeit / Einheiten / Chat) hat flex-shrink:0
     und beansprucht 237px. Bei 370px Kartenbreite bleiben nach Avatar (44px)
     und Abständen (42px) nur 47px für den Namen — "Letzte Aktivität: 19. Juli"
     brach um, das Chat-Symbol wurde abgeschnitten. Bei 375px Viewport lief die
     Karte um 10px über.

     Lösung: Auf Mobil umbricht die Zeile. Name und Avatar stehen oben, die
     Zahlen darunter über die volle Breite verteilt. Nichts wird versteckt. */
  .ath-row {
    flex-wrap: wrap;
    row-gap: 10px !important;
  }
  .ath-row-stats {
    flex-shrink: 1 !important;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 10px !important;
    padding-top: 10px;
    border-top: 0.5px solid var(--border-default);
  }
  /* Der Chevron am Zeilenende nimmt Platz weg, ohne Funktion zu tragen —
     die ganze Karte ist klickbar. */
  .ath-row > .ti-chevron-right {
    display: none;
  }

  /* Das Logo gibt Platz ab, bevor die Aktionen es tun. */
  .nav__logo {
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 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(). */
  /* ── SCROLL-PADDING (B18 Punkt 6, Pflicht-Fix 13.7.) ────────────────────────
     Der letzte Inhalt muss VOLLSTÄNDIG über die Leiste scrollen können — auf
     Marcos Foto verschwanden „Ruhetag" und die Tageszahl HINTER der Leiste.

     Der Wert ist jetzt AUS DER LEISTENGEOMETRIE ABGELEITET statt geraten:

        64px  Leistenhöhe
      + 20px  Abstand zum Bildschirmrand (bottom)
      + 12px  Luft zwischen Inhalt und Leiste
      ─────
       96px  + env(safe-area-inset-bottom)

     = --tabbar-height. Shell-v2 #pages-root nutzt denselben Wert.
     WARUM env() ADDIERT WIRD, statt max(): Die Leiste sitzt bei
     `env(safe-area) + 20px`. Der Inhalt muss über der Leiste enden — beides addiert sich. */
  body { padding-bottom: calc(96px + var(--yama-safe-bottom, 0px)); }

  /* Bottom Navigation — Liquid-Glass-CSS-Approx (Pfad A)
     Echte DOM-Schichten (.mob-nav-glass / .mob-nav-rim): backdrop-filter auf
     Pseudo-Elementen ist in WebKit/Chromium unzuverlässig. */
  #mob-bottom-nav {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: calc(18px + var(--yama-safe-bottom, 0px));
    width: auto;
    max-width: calc(100% - 32px);
    height: auto;
    box-sizing: border-box;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-radius: 30px;
    z-index: 900;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: var(--nav-glass-shadow);
    --icon-cut: var(--nav-icon-cut);
  }
  /* Frost-Layer (clear): dünn, 12px Blur, Sättigung + Aufhellung */
  #mob-bottom-nav > .mob-nav-glass {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: var(--nav-glass-fill);
    -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.14) contrast(1.06);
    backdrop-filter: blur(12px) saturate(200%) brightness(1.14) contrast(1.06);
    box-shadow: var(--nav-glass-inset);
  }
  /* Lensing-Rim: Lichtkante NW/SE hell */
  #mob-bottom-nav > .mob-nav-rim {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    padding: 1.5px;
    background: var(--nav-glass-edge);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  #mob-bottom-nav > .mob-nav-item {
    position: relative;
    z-index: 1;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #mob-bottom-nav > .mob-nav-glass { background: var(--nav-glass-fallback); }
  }
  @media (prefers-reduced-transparency: reduce) {
    #mob-bottom-nav > .mob-nav-glass {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: var(--nav-glass-fallback);
    }
    #mob-bottom-nav > .mob-nav-rim { opacity: 0.35; }
  }

  html.yama-native #mob-bottom-nav { background: transparent; }
  html.yama-native #mob-bottom-nav > .mob-nav-glass {
    -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.14) contrast(1.06);
    backdrop-filter: blur(12px) saturate(200%) brightness(1.14) contrast(1.06);
  }

  /* Alte Pseudo-Layer abschalten (falls Cache noch Regeln hat) */
  #mob-bottom-nav::before,
  #mob-bottom-nav::after { content: none !important; display: none !important; }

  /* Vergleichs-Leiste auf Mobile ÜBER die Tab-Bar heben (sonst dahinter verdeckt). */
  #compare-bar {
    bottom: calc(var(--yama-safe-bottom, 0px) + 110px);
    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: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 52px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 22px;
    background: transparent;
    cursor: pointer;
    color: var(--nav-icon);
    opacity: 0.82;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    transition: width 200ms ease-out, padding 200ms ease-out, gap 200ms ease-out,
      background-color 200ms ease-out, opacity 200ms ease-out, color 200ms ease-out,
      box-shadow 200ms ease-out;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: visible;
  }

  .mob-nav-label {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    transition: max-width 200ms ease-out, opacity 200ms ease-out;
  }

  /* Aktiver Punkt = Glastropfen (hellere clear-Kapsel + eigene Rim) */
  .mob-nav-item.active,
  .mob-nav-item[aria-current="page"] {
    width: auto;
    min-width: 44px;
    opacity: 1;
    gap: 8px;
    padding: 0 16px 0 12px;
    background: var(--nav-drop-fill);
    color: var(--nav-accent);
    -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.12);
    backdrop-filter: blur(10px) saturate(190%) brightness(1.12);
    box-shadow: var(--nav-drop-shadow), var(--nav-drop-inset);
  }
  .mob-nav-item.active::before,
  .mob-nav-item[aria-current="page"]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--nav-drop-edge);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
  }
  .mob-nav-item.active > *,
  .mob-nav-item[aria-current="page"] > * {
    position: relative;
    z-index: 1;
  }
  .mob-nav-item:active {
    transform: scale(0.96);
  }
  .mob-nav-item.active:active,
  .mob-nav-item[aria-current="page"]:active {
    transform: scale(0.98);
  }

  #mob-bottom-nav.nav-show-active-label .mob-nav-item.active .mob-nav-label {
    display: inline;
    max-width: 9em;
    opacity: 1;
  }

  .mob-nav-ico-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }
  .mob-nav-ico {
    display: flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .mob-nav-ico svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  .mob-nav-ico--fill { display: none; }
  .mob-nav-item.active .mob-nav-ico--out,
  .mob-nav-item[aria-current="page"] .mob-nav-ico--out { display: none; }
  .mob-nav-item.active .mob-nav-ico--fill,
  .mob-nav-item[aria-current="page"] .mob-nav-ico--fill { display: flex; }

  .mob-nav-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nav-hint);
    border: 2px solid var(--nav-glass-fallback, var(--bg));
    box-sizing: content-box;
    pointer-events: none;
    z-index: 2;
  }
  .mob-nav-unread-dot[hidden] { display: none !important; }

  /* Coach / Logged-out: Tabler-Icons */
  .mob-nav-item > i {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
  }

  /* 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);
}

/* Buttons/Links: sichtbares Focus für Keyboard-User */
button:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Formulare: nur Border-Farbe (.form-input:focus) — kein zusätzlicher Outline-Ring
   (sonst „fetter grüner Balken“ um Titel & Co.) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}
/* Login/Register: Fokus am Wrapper, nicht am Input (sonst Doppelrand auf Mobile) */
#page-login .login-input input:focus-visible,
#page-register .login-input input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* 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; text-transform: none; 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,
.global-footer__links button{
  color:var(--neutral-500);
  text-decoration:none;
  cursor:pointer;
  transition:color 0.15s;
  background:none;border:none;padding:0;font:inherit;
}
.global-footer__links a:hover,
.global-footer__links button:hover{
  color:var(--neutral-800);
}

/* Hilfe / Release Notes */
.nav-hint-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--nav-hint);
  border:2px solid var(--nav-hint-ring);
  box-sizing:content-box;
  flex-shrink:0;
  pointer-events:none;
}
.nav-hint-dot[hidden]{display:none !important}
.profile-nav-ico,
.shell-v2-item-ico{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.profile-nav-ico{width:16px;height:16px}
.profile-nav-ico .nav-hint-dot,
.shell-v2-item-ico .nav-hint-dot{
  position:absolute;
  top:-3px;
  right:-3px;
  z-index:2;
}
.profile-nav-item.active .nav-hint-dot{
  border-color:var(--neutral-100);
}
.mehr-hub-ico .nav-hint-dot{
  position:absolute;
  top:-2px;
  right:-2px;
  border-color:var(--bg-1);
  z-index:2;
}
.releases-page{
  padding:var(--space-4) 0;
  padding-bottom:calc(var(--tabbar-height) + env(safe-area-inset-bottom));
}
.releases-page-head{margin-bottom:var(--space-3)}
.releases-page__sub{margin:0 0 var(--space-4);color:var(--text-3)}
.releases-page .releases-list{max-width:40rem}
.releases-list{display:flex;flex-direction:column;gap:var(--space-3)}
.releases-card{
  background:var(--bg-1);
  border:0.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
}
.releases-card__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.releases-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.releases-item{display:flex;align-items:flex-start;gap:var(--space-2)}
.releases-item__tag{
  flex-shrink:0;padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--bg-2);color:var(--text-3);letter-spacing:.04em;
}
.releases-item--neu .releases-item__tag{background:var(--success-bg);color:var(--success-text)}
.releases-item--verbessert .releases-item__tag{background:var(--accent-bg);color:var(--accent-text)}
.releases-item--behoben .releases-item__tag{background:var(--warning-bg,var(--bg-2));color:var(--warning-text,var(--text-2))}
.glossar-page{
  --glossar-pad-l:32px;
  --glossar-pad-r:24px;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:32px var(--glossar-pad-r) 48px var(--glossar-pad-l);
  text-align:left;
}
.glossar-head{margin:0 0 var(--space-4)}
.glossar-head .yama-page-title{text-align:left}
.glossar-head__sub{
  margin:var(--space-2) 0 0;
  color:var(--text-3);
  text-align:left;
}
.glossar-sticky{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--bg-1);
  margin:0 calc(var(--glossar-pad-r) * -1) var(--space-4) calc(var(--glossar-pad-l) * -1);
  padding:var(--space-2) var(--glossar-pad-r) var(--space-2) var(--glossar-pad-l);
}
.glossar-sticky__row{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  min-width:0;
}
.glossar-search-wrap{
  position:relative;
  flex:1 1 240px;
  max-width:360px;
  min-width:160px;
  margin:0;
}
.glossar-search-wrap .form-input{padding-left:40px}
.glossar-search-wrap .ti-search{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:16px;color:var(--text-3);pointer-events:none;
}
.glossar-az{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--space-2);
  margin:0;
  padding:0;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
}
.glossar-az[hidden]{display:none !important}
.glossar-az__btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  min-width:32px;height:32px;padding:0 var(--space-2);
  border:0.5px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--bg-2);color:var(--text-2);
  font-size:var(--yama-text);font-weight:500;cursor:pointer;
}
.glossar-az__btn:hover{color:var(--accent-text);border-color:var(--accent-base)}
.glossar-az__btn:disabled,
.glossar-az__btn.is-disabled{
  opacity:0.35;cursor:default;pointer-events:none;
}
.glossar-letter{
  margin:0;padding:0;min-height:0;
  scroll-margin-top:72px;
}
.glossar-letter + .glossar-letter{margin-top:var(--space-5)}
.glossar-letter__title{
  margin:0 0 var(--space-4);
  width:100%;
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--neutral-800);
  text-align:left;
}
.glossar-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  align-items:stretch;
}
@media (min-width:1200px){
  .glossar-grid{grid-template-columns:1fr 1fr}
}
.glossar-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  padding:var(--space-4);
  background:var(--bg-1);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  text-align:left;
  scroll-margin-top:80px;
}
.glossar-card.is-flash{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
  animation:glossar-flash 1.8s ease forwards;
}
@keyframes glossar-flash{
  0%{outline-color:var(--accent-base)}
  100%{outline-color:transparent}
}
.glossar-card__head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.glossar-card__term{
  margin:0;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  color:var(--neutral-800);
}
.glossar-card__short{
  margin:var(--space-2) 0 0;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--neutral-800);
}
.glossar-card__long{
  margin:var(--space-2) 0 0;
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  color:var(--text-3);
}
.glossar-entry__abbr{
  display:inline-flex;align-items:center;
  color:var(--accent-text);background:var(--accent-bg);
  padding:2px 7px;border-radius:var(--radius-md);letter-spacing:.04em;
  line-height:1.2;
}
.glossar-entry__sources{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.glossar-entry__sources a{color:var(--accent-text)}
.glossar-card__calc{
  margin-top:var(--space-3);
  padding-top:var(--space-2);
  border-top:0.5px solid var(--border-default);
}
.glossar-card__calc summary{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--text-2);
  list-style:none;
}
.glossar-card__calc summary::-webkit-details-marker{display:none}
.glossar-card__chev{display:inline-block;line-height:1}
.glossar-card__calc[open] .glossar-card__chev{transform:rotate(180deg)}
.glossar-card__calc-body{
  margin:var(--space-2) 0 0;
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  color:var(--text-2);
}
.glossar-card__where{
  margin-top:auto;
  padding-top:var(--space-3);
  font-size:13px;
  font-weight:500;
  color:var(--accent-text);
  text-decoration:none;
}
.glossar-card__where:hover{text-decoration:underline}
.glossar-hit{
  background:var(--accent-bg);
  color:inherit;
  border-radius:2px;
  padding:0 1px;
}
.glossar-empty{
  margin:0;
  padding:var(--space-5) 0;
  color:var(--text-3);
  text-align:left;
}
@media (max-width:767px){
  .glossar-page{
    --glossar-pad-l:16px;
    --glossar-pad-r:16px;
    padding-top:16px;
  }
  .glossar-card{padding:var(--space-3)}
  .glossar-sticky__row{gap:var(--space-2)}
}
.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-Haken = dieselbe .yama-checkbox */

/* Kraftraum: Übungs-SVGs im Dark Mode invertieren (schwarz auf hell → hell auf dunkel) */
[data-theme="dark"] { --kraftraum-img-filter: invert(0.92); }

/* Workout Builder: Sticky-Actions = Seitenhintergrund (kein weißer Kartenbalken) */
#athlete-workout-modal .wb-sticky-actions {
  background: var(--card-bg) !important;
}

/* Kraftraum: Phone 3 Kacheln pro Zeile */
@media (max-width:899px){
  #page-kraftraum .kr-muscle-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:var(--space-2) !important;
  }
  #page-kraftraum .kr-muscle-card__media{
    padding:var(--space-2) !important;
  }
  #page-kraftraum .kr-muscle-card__media img{
    max-height:64px !important;
  }
  #page-kraftraum .kr-muscle-card__meta{
    padding:8px !important;
  }
  #page-kraftraum .kr-muscle-card__title{
    font-size:var(--yama-label) !important;
    font-weight:500 !important;
    line-height:1.25;
  }
  #page-kraftraum .kr-muscle-card__count{
    font-size:var(--yama-micro) !important;
  }
}

/* Kraftraum › Workout erstellen — Formular + Sticky-Vorschau */
.kr-gen__head{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.kr-gen__title{
  margin:0;
}
/* Seitenüberschrift Tool-Seiten — wie Kalender/Profil (--yama-metric) */
.yama-page-title{
  font-size:var(--yama-metric);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--neutral-800);
  margin:0;
}
.kr-gen__layout{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.kr-gen__form{
  min-width:0;
  max-width:720px;
  width:100%;
}
.kr-gen__section{margin-bottom:var(--space-5)}
.kr-gen__section:last-child{margin-bottom:0}
.kr-gen__label{
  font-size:var(--yama-label);
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:0 0 var(--space-2);
}
.kr-gen__hint{
  margin:var(--space-2) 0 0;
  font-size:var(--yama-micro);
  font-weight:400;
  line-height:1.45;
  color:var(--muted) !important;
}
.kr-gen-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.kr-gen-chips .filter-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  white-space:nowrap;
}
.kr-gen-chips .filter-btn .ti{font-size:14px;line-height:1}
.kr-gen__preview{
  width:100%;
  max-width:720px;
  box-sizing:border-box;
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:var(--bg-1);
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
}
.kr-gen__preview-title{
  margin:0;
  font-size:var(--yama-title);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.3;
}
.kr-gen__preview-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  color:var(--text-2);
}
.kr-gen__preview-stat{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  font-variant-numeric:tabular-nums;
}
.kr-gen__preview-stat strong{
  font-weight:500;
  color:var(--neutral-800);
}
.kr-gen__preview-block{min-width:0}
.kr-gen__preview-k{
  display:block;
  margin-bottom:4px;
  color:var(--text-3);
}
.kr-gen__preview-v{
  color:var(--neutral-800);
  line-height:1.4;
}
.kr-gen__preview-empty{color:var(--text-3)}
.kr-gen__preview .btn{width:100%;margin-top:var(--space-1)}
@media (min-width:1100px){
  .kr-gen__layout{
    flex-direction:row;
    align-items:flex-start;
    gap:var(--space-5);
  }
  .kr-gen__form{
    flex:1 1 auto;
    max-width:720px;
  }
  .kr-gen__preview{
    flex:0 0 300px;
    width:300px;
    max-width:300px;
    position:sticky;
    top:72px;
  }
}

/* ─── PWA Standalone-Mode: klassische Top-Nav (Marketing/Classic)
   App-Shell (has-mob-chrome) nutzt --mob-chrome-safe-top / --yama-safe-*.
   Klassische .nav: echter Safe-Inset, kein fester Floor (sonst Doppel-Lücke
   wenn env() schon greift). */
@media all and (display-mode: standalone) {
  body:not(.has-mob-chrome) .nav {
    padding-top: var(--yama-safe-top, env(safe-area-inset-top, 0px));
    height: calc(52px + var(--yama-safe-top, env(safe-area-inset-top, 0px)));
  }
  body:not(.has-mob-chrome) #pages-root {
    padding-top: calc(52px + var(--yama-safe-top, env(safe-area-inset-top, 0px)));
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * 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;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEED v2 — scharfe Karten, sticky Toolbar, Zwei-Spalten + Kontext-Rail
   ═══════════════════════════════════════════════════════════════════════════ */
.feed-page{
  padding:0 0 48px;
}
.feed-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:28px;
  max-width:980px;
  margin:0 auto;
  padding:0 20px;
  align-items:start;
}
.feed-stream{min-width:0}
.feed-toolbar{
  position:sticky;
  top:0;
  z-index:8;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:4px 0 14px;
  margin:0 0 4px;
  /* Gleicher Ton wie #pages-root — kein eigener Grau-Streifen */
  background:var(--neutral-50);
}
.feed-toolbar__title{
  font-size:28px;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.2;
  margin:0;
  color:var(--neutral-800);
}
.feed-toolbar__meta{
  font-size:13px;
  color:var(--neutral-500);
  margin-top:4px;
}
.feed-toolbar__actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
  padding-top:4px;
}
.feed-sport-filter{
  display:flex;
  gap:3px;
  background:var(--neutral-100);
  border-radius:var(--radius-pill);
  padding:3px;
}
.feed-sport-btn{
  padding:5px 12px;
  border:none;
  background:transparent;
  border-radius:var(--radius-pill);
  font-size:12px;
  font-weight:400;
  color:var(--neutral-500);
  cursor:pointer;
  font-family:inherit;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:26px;
}
.feed-sport-btn .ti{font-size:14px}
.feed-sport-btn.active{
  background:var(--card-bg);
  color:var(--neutral-800);
  font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.feed-search-toggle{
  padding:6px;
  width:34px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feed-search-drawer{
  background:var(--card-bg);
  border:0.5px solid var(--border-default);
  border-radius:0;
  padding:14px 16px;
  margin-bottom:12px;
}
.feed-search-drawer__row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.feed-search-drawer__row .ti{font-size:14px;color:var(--neutral-500)}
.feed-search-drawer__row input{
  flex:1;
  padding:6px 0;
  border:none;
  background:transparent;
  font-size:13px;
  color:var(--neutral-800);
  outline:none;
  font-family:inherit;
}
.feed-search-results{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:280px;
  overflow-y:auto;
}
.feed-requests{
  background:var(--card-bg);
  border:0.5px solid var(--border-default);
  border-radius:0;
  padding:14px 16px;
  margin-bottom:12px;
}
.feed-requests #feed-requests-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.feed-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.feed-empty{
  padding:48px 24px;
  text-align:center;
  border:0.5px solid var(--border-strong);
  border-radius:var(--radius-lg);
}
.feed-empty > .ti{
  font-size:24px;
  color:var(--neutral-400);
  display:block;
  margin-bottom:8px;
}
.feed-empty__title{
  font-size:14px;
  font-weight:500;
  color:var(--neutral-700);
  margin-bottom:4px;
}
.feed-empty__text{
  font-size:12px;
  color:var(--neutral-500);
  margin-bottom:14px;
}

/* Feed cards — rounded, padded, mock structure */
.feed-card.card,
.card.feed-card{
  padding:var(--space-3);
  border-radius:var(--radius-lg) !important;
  border:0.5px solid var(--border-default) !important;
  box-shadow:var(--shadow-1) !important;
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-1);
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base), border-color var(--duration-base);
}
.feed-card.card:hover,
.card.feed-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-2) !important;
  border-color:var(--border-strong) !important;
}
@media (min-width:768px){
  .feed-card.card,
  .card.feed-card{
    padding:var(--space-4);
  }
}
.feed-bucket{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-bottom:0;
}
.feed-bucket__sep{
  display:block;
  margin:10px 0 2px;
  padding:0;
  background:none;
  border:0;
}
.feed-bucket__sep-label{
  font-size:var(--yama-label);
  font-weight:500;
  letter-spacing:0.02em;
  text-transform:none;
  color:var(--text-3);
}
.feed-bucket__sep-line,
.feed-bucket__sep-count{display:none}
/* Feed / dash-feed avatars — abgerundetes Quadrat (zentral .yama-avatar) */
.feed-avatar{
  aspect-ratio:1 / 1;
  border-radius:var(--yama-avatar-radius,28%);
  object-fit:cover;
  flex-shrink:0;
  border:0;
  box-shadow:none;
  box-sizing:border-box;
  overflow:hidden;
  background:var(--bg-2);
}
.dash-w-feed__av .feed-avatar{display:block}
.feed-card__head{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  padding:0;
}
.feed-card__who{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:1px;
}
.feed-card__who-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.feed-card__name{
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.3;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.feed-sport-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px 4px 8px;
  border-radius:var(--radius-pill);
  border:0.5px solid currentColor;
  background:transparent;
  font-size:var(--yama-label);
  font-weight:500;
  line-height:1.3;
  flex-shrink:0;
  white-space:nowrap;
  margin-left:auto;
  align-self:flex-start;
}
.feed-sport-chip .ti,
.feed-sport-chip svg{
  width:12px;
  height:12px;
  flex-shrink:0;
}
.feed-card__dur{
  font-size:var(--yama-micro);
  font-weight:400;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  flex-shrink:0;
}
.feed-card__head-right{
  display:none;
}
.feed-card__time{
  color:var(--text-3);
  flex-shrink:0;
  white-space:nowrap;
}
.feed-card__intro{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  padding:0;
  min-width:0;
}
.feed-card__title{
  padding:0;
  margin:0;
  color:var(--neutral-800);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.feed-card__comment{
  padding:0;
  margin:0;
  color:var(--text-2);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.feed-card__map{
  margin:0;
  background:var(--bg-2);
  height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.feed-card__map--photo{
  position:relative;
  aspect-ratio:2 / 1;
  height:auto;
  min-height:0;
  width:100%;
}
.feed-card__map-attr{
  position:absolute;
  right:var(--space-2);
  bottom:var(--space-1);
  color:var(--text-3);
  pointer-events:none;
}
.feed-card__map--icon{
  height:72px;
  min-height:72px;
  background:transparent;
}
.feed-card__spark{
  height:28px;
  margin:0;
  color:var(--text-3);
}
.feed-card__spark svg{
  display:block;
  width:100%;
  height:28px;
}
.feed-card__map > div,
.feed-card__map img{
  border-radius:var(--radius-lg);
  width:100%;
  height:100%;
  display:block;
}
.feed-card__map img{
  object-fit:fill;
}
.feed-card__meta-row{
  display:none;
}
.feed-card__stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--space-3) var(--space-4);
  padding:0;
  min-width:0;
}
.feed-card__stat{
  min-width:0;
}
.feed-card__elev,
.feed-card__blocks{
  position:relative;
  height:56px;
  color:var(--text-3);
  margin-top:var(--space-2);
}
.feed-card__elev svg,
.feed-card__blocks-line{
  display:block;
  width:100%;
  height:100%;
}
.feed-card__elev-area{
  fill:var(--bg-2);
}
.feed-card__elev-line,
.feed-card__blocks-line path{
  stroke:var(--text-3);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feed-card__blocks .ride-v2-profile{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:48px;
  width:100%;
}
.feed-card__blocks .ride-v2-bar{
  min-width:3px;
  border-radius:2px 2px 0 0;
}
.feed-card__blocks-line{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.feed-card__stat-lbl,
.yama-label.feed-card__stat-lbl{
  margin:0 0 2px;
  text-transform:none;
  letter-spacing:0;
}
.feed-card__stat-val{
  font-size:var(--yama-title);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.25;
  font-variant-numeric:tabular-nums;
}
.feed-card__stat-unit{
  margin-left:2px;
  font-weight:400;
}
.feed-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:0;
  margin:0;
  border-top:0.5px solid var(--border-default);
  padding-top:var(--space-3);
}
.feed-card__actions{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex-shrink:0;
  flex-wrap:wrap;
}
.feed-card__cta{
  margin-left:auto;
  flex-shrink:0;
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--accent-text);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.feed-card__cta-arrow{
  font-size:0.9em;
  line-height:1;
}
.feed-card__comments{
  padding:var(--space-3) 0 0;
  border-top:0.5px solid var(--border-default);
}
.feed-action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px 8px;
  border-radius:var(--radius-md);
  font-size:var(--yama-text);
  font-weight:400;
  color:var(--text-2);
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  transition:color var(--duration-base), background var(--duration-base);
}
.feed-action:hover{
  color:var(--neutral-800);
  background:var(--bg-2);
}
.feed-action .ti{font-size:16px;line-height:1}
.feed-action__lbl{
  font-size:var(--yama-text);
  font-weight:400;
}
.feed-action.is-liked,
.feed-action.liked{
  color:var(--accent-text);
}
.feed-action.is-liked:hover,
.feed-action.liked:hover{
  color:var(--accent-text);
  background:var(--accent-bg);
}
.feed-card--highlight{
  border-color:color-mix(in srgb, var(--feed-hl, var(--accent-base)) 40%, var(--border-default)) !important;
}
.feed-card__badge{
  padding:0 0 var(--space-2);
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:0.5px solid color-mix(in srgb, var(--feed-hl, var(--accent-base)) 30%, transparent);
  margin:calc(-1 * var(--space-1)) 0 0;
}
.feed-card__badge-text{
  font-size:var(--yama-label);
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--feed-hl, var(--accent-base));
}
.feed-card__insight{
  padding:var(--space-2) var(--space-3);
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:var(--radius-md);
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--feed-hl, var(--accent-base));
}
.feed-card--compact{
  gap:0;
}
.feed-card--compact .feed-card__head{
  padding:0;
}
.feed-card--v2{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.feed-card--v2 .feed-card__title{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}
.feed-card__avatar-wrap{
  position:relative;
  flex-shrink:0;
  width:36px;
  height:36px;
}
.feed-card__avatar-wrap .feed-avatar,
.feed-card__avatar-wrap .yama-avatar{
  width:36px;
  height:36px;
}
.feed-card__sport-badge{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--bg-1);
  border:1px solid var(--bg-1);
}
.feed-card__sport-badge svg{
  width:12px;
  height:12px;
}
.feed-card--v2 .feed-card__name{
  background:none;
  border:none;
  padding:0;
  text-align:left;
  font-family:inherit;
}
.feed-card__menu{
  flex-shrink:0;
  min-width:44px;
  min-height:44px;
  margin:-4px -12px -4px 0;
  padding:0;
  border:none;
  background:none;
  color:var(--text-3);
  cursor:pointer;
  font-family:inherit;
  font-size:var(--yama-title);
  line-height:1;
}
.feed-card--v2 .feed-card__stat-val.yama-metric{
  font-size:var(--yama-metric);
  font-weight:500;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.feed-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.feed-card__chip{
  display:inline-flex;
  align-items:center;
  padding:2px var(--space-2);
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  color:var(--text-3);
}
.feed-card--v2 .feed-card__actions{
  width:100%;
  border-top:0.5px solid var(--border-default);
  padding-top:var(--space-3);
  margin:0;
}
.feed-card--v2 .feed-card__comment-form{
  display:flex;
  gap:var(--space-2);
  align-items:flex-start;
}
.feed-card--v2 .feed-card__comment-form textarea{
  flex:1;
  min-height:34px;
  max-height:120px;
  resize:vertical;
  font-family:inherit;
  padding:var(--space-2) var(--space-3);
  border:0.5px solid var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--bg);
  color:var(--neutral-800);
}
.ad-charts-denied{
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:0.5px solid var(--border-default);
  color:var(--text-3);
}

/* Kontext-Rail */
.feed-rail{
  position:sticky;
  top:8px;
  align-self:start;
  padding:10px 0 10px 18px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  border-left:0.5px solid var(--border-default);
}
.feed-rail__block{margin:0;padding:0}
.feed-rail__block[hidden]{display:none !important}
.feed-rail__label{
  font-size:10px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--neutral-500);
  margin:0 0 8px;
}
.feed-rail__list{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.feed-rail__empty{
  font-size:12px;
  color:var(--neutral-400);
  padding:2px 0;
}
.feed-rail__row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 2px;
  border-radius:0;
  min-height:32px;
}
.feed-rail__row-name{
  flex:1;
  min-width:0;
  font-size:13px;
  font-weight:500;
  color:var(--neutral-800);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.feed-rail__row-meta{
  font-size:12px;
  color:var(--neutral-500);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.feed-rail__follow{
  width:28px;
  height:28px;
  border:0.5px solid var(--border-strong);
  background:transparent;
  color:var(--neutral-600);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  padding:0;
  font-size:14px;
  line-height:1;
  flex-shrink:0;
}
.feed-rail__follow:hover{
  background:var(--neutral-100);
  color:var(--neutral-800);
}
.feed-load-more{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:18px;
  flex-wrap:wrap;
}

@media (max-width:960px){
  .feed-layout{
    grid-template-columns:1fr;
    gap:0;
    max-width:720px;
  }
  .feed-rail{
    display:none;
  }
}
@media (max-width:640px){
  .feed-layout{padding:0 12px}
  .feed-toolbar{
    flex-wrap:wrap;
    align-items:center;
  }
  .feed-toolbar__actions{
    width:100%;
    justify-content:space-between;
    padding-top:0;
  }
  .feed-card__stats{
    gap:var(--space-2) var(--space-3);
  }
  .feed-card__stat{
    max-width:none;
    min-width:3.75rem;
  }
  .feed-card__footer{
    flex-wrap:wrap;
    gap:var(--space-2);
  }
  .feed-action{
    padding:6px 4px;
  }
  .feed-card__cta{
    font-size:var(--yama-text);
  }
}
.msg-page{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
  height:100%;
  box-sizing:border-box;
  padding:0 20px 20px;
  max-width:1100px;
  margin:0 auto;
}
.msg-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:4px 0 14px;
  flex-shrink:0;
  background:var(--neutral-50);
}
body.shell-v2:not(.shell-v2--classic):not(.shell-v2--auth) .msg-toolbar{
  padding-top:24px;
}
.msg-toolbar__title{
  font-size:28px;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.2;
  margin:0;
  color:var(--neutral-800);
}
.msg-toolbar__meta{
  font-size:13px;
  color:var(--neutral-500);
  margin-top:4px;
}
.msg-canvas{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  border:0.5px solid var(--border-default);
  background:var(--card-bg);
  border-radius:0;
  overflow:hidden;
}
.msg-heads{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  flex-shrink:0;
  min-height:56px;
  border-bottom:0.5px solid var(--border-default);
  background:var(--card-bg);
}
.msg-heads__list{
  display:flex;
  align-items:center;
  padding:0 12px;
  border-right:0.5px solid var(--border-default);
  box-sizing:border-box;
  min-width:0;
}
.msg-heads__thread{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  min-width:0;
  box-sizing:border-box;
}
.msg-heads__thread-placeholder{
  flex:1;
  min-height:1px;
}
.msg-body{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
}
.msg-sidebar{
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:0.5px solid var(--border-default);
  background:var(--card-bg);
}
.msg-search{
  width:100%;
  padding:8px 10px;
  border:0.5px solid var(--border-default);
  border-radius:0;
  background:var(--neutral-50);
  color:var(--neutral-800);
  font-size:13px;
  font-family:inherit;
  box-sizing:border-box;
}
.msg-search:focus{
  outline:none;
  border-color:var(--border-strong);
  background:var(--card-bg);
}
.msg-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
}
.msg-list__loading,
.msg-list__empty{
  padding:36px 20px;
  text-align:center;
  color:var(--neutral-500);
  font-size:13px;
  line-height:1.45;
}
.msg-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px 12px 14px;
  cursor:pointer;
  border:none;
  border-bottom:0.5px solid var(--border-default);
  border-left:2px solid transparent;
  background:transparent;
  width:100%;
  text-align:left;
  font-family:inherit;
  box-sizing:border-box;
  transition:background 0.12s ease;
}
.msg-item:hover{
  background:var(--neutral-50);
}
.msg-item.is-active{
  background:var(--neutral-100);
  border-left-color:var(--accent-base);
}
.msg-item.is-unread{
  background:var(--accent-bg);
  border-left-color:var(--accent-base);
}
.msg-item.is-unread:hover{
  background:var(--accent-soft);
}
.msg-item.is-unread.is-active{
  background:var(--neutral-100);
  border-left-color:var(--accent-base);
}
.msg-item.is-unread .msg-item__name{
  font-weight:700;
  color:var(--neutral-800);
}
.msg-item__avatar{
  width:40px;
  height:40px;
  border-radius:var(--yama-avatar-radius,28%);
  object-fit:cover;
  flex-shrink:0;
}
.msg-item__avatar-fallback{
  width:40px;
  height:40px;
  border-radius:var(--yama-avatar-radius,28%);
  background:var(--accent-bg);
  color:var(--accent-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:500;
  flex-shrink:0;
}
.msg-item__body{flex:1;min-width:0}
.msg-item__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.msg-item__name{
  font-size:13px;
  font-weight:600;
  color:var(--neutral-800);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msg-item__time{
  font-size:11px;
  color:var(--neutral-500);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.msg-item__row--preview{
  align-items:center;
  margin-top:2px;
  gap:8px;
}
.msg-item__preview{
  flex:1;
  min-width:0;
  font-size:12px;
  color:var(--neutral-500);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msg-item.is-unread .msg-item__preview{color:var(--neutral-800);font-weight:500}
.msg-item__badge{
  background:var(--accent-strong);
  color:#fff;
  border-radius:999px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  font-size:10px;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.msg-item__ended{
  color:var(--text-3);
  border:0.5px solid var(--border);
  border-radius:var(--radius-pill);
  padding:2px 8px;
  flex-shrink:0;
  line-height:1.2;
}
.msg-item.is-ended .msg-item__name{
  color:var(--neutral-500);
  font-weight:400;
}
.msg-ended-banner{
  padding:var(--space-3);
  text-align:center;
  color:var(--text-2);
  border-bottom:0.5px solid var(--border);
  flex-shrink:0;
}
[data-theme="dark"] .msg-item__badge{
  background:var(--accent-base);
  color:#0F1419;
}
.msg-main{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:var(--card-bg);
  border-left:none;
}
.msg-empty{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:var(--card-bg);
}
.msg-empty__box{
  text-align:center;
  color:var(--neutral-500);
  max-width:34ch;
}
.msg-empty__icon{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border-radius:0;
  border:0.5px solid var(--border-default);
  background:var(--neutral-50);
  color:var(--neutral-600);
  display:flex;
  align-items:center;
  justify-content:center;
}
.msg-empty__icon .ti{font-size:22px;line-height:1}
.msg-empty__title{
  font-size:15px;
  font-weight:600;
  color:var(--neutral-800);
  margin-bottom:6px;
}
.msg-empty__text{
  font-size:13px;
  line-height:1.5;
  color:var(--neutral-500);
}
.msg-thread-head__back{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--neutral-500);
  padding:6px;
  line-height:1;
  flex-shrink:0;
}
.msg-thread-head__who{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.msg-thread-head__name{
  font-size:14px;
  font-weight:600;
  color:var(--neutral-800);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msg-thread-head__user{
  font-size:13px;
  font-weight:400;
  color:var(--neutral-500);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msg-messages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--card-bg);
  scrollbar-width:thin;
}
.msg-thread-empty{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:40px 20px;
  text-align:center;
  color:var(--neutral-500);
  font-size:13px;
  line-height:1.45;
}
.msg-thread-empty .msg-empty__icon{
  margin:0 auto;
}
.msg-composer{
  display:flex;
  gap:6px;
  align-items:flex-end;
  padding:10px 12px 12px;
  border-top:0.5px solid var(--border-default);
  flex-shrink:0;
  background:var(--card-bg);
}
.msg-composer__btn{
  width:36px;
  height:38px;
  border:0.5px solid var(--border-default);
  border-radius:0;
  background:transparent;
  color:var(--neutral-600);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.msg-composer__btn:hover{background:var(--neutral-50);color:var(--neutral-800)}
.msg-composer__workout{
  height:38px;
  padding:0 10px;
  border:0.5px solid var(--border-default);
  border-radius:0;
  background:transparent;
  color:var(--neutral-600);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  font-size:12px;
  font-weight:500;
  font-family:inherit;
}
.msg-composer__workout:hover{background:var(--neutral-50);color:var(--neutral-800)}
.msg-composer__workout .ti{font-size:15px;line-height:1}
.msg-composer__input{
  flex:1;
  padding:10px 12px;
  border:0.5px solid var(--border-default);
  border-radius:0;
  background:var(--neutral-50);
  color:var(--neutral-800);
  font-size:14px;
  font-family:inherit;
  resize:none;
  outline:none;
  line-height:1.4;
  max-height:120px;
  min-height:38px;
}
.msg-composer__input:focus{border-color:var(--border-strong);background:var(--card-bg)}
.msg-composer__send{
  width:38px;
  height:38px;
  border:none;
  border-radius:var(--btn-radius,10px);
  background:var(--btn-primary-bg);
  color:var(--btn-primary-fg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.msg-composer__send:hover{background:var(--btn-primary-hover);color:var(--btn-primary-fg)}
.msg-attach-preview{
  display:none;
  margin:0 12px 0;
  padding:8px 10px;
  border:0.5px dashed var(--border-strong);
  border-radius:0;
  background:var(--neutral-50);
  font-size:12px;
  align-items:center;
  gap:8px;
}
.msg-bubble{
  max-width:75%;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.msg-bubble--own{align-items:flex-end;margin-left:auto}
.msg-bubble--peer{align-items:flex-start;margin-right:auto}
.msg-bubble__text{
  padding:8px 12px;
  border-radius:0;
  font-size:13px;
  line-height:1.45;
  word-wrap:break-word;
}
.msg-bubble--own .msg-bubble__text{
  background:var(--accent-strong);
  color:#fff;
}
.msg-bubble--peer .msg-bubble__text{
  background:var(--neutral-50);
  border:0.5px solid var(--border-default);
  color:var(--neutral-800);
}
.msg-bubble__time{
  font-size:10px;
  color:var(--neutral-500);
  padding:0 2px;
}
.msg-day-sep{
  text-align:center;
  font-size:10px;
  color:var(--neutral-500);
  font-weight:600;
  margin:12px 0 6px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

@media (max-width:760px){
  .msg-page{padding:0 12px 12px;height:auto;min-height:calc(100dvh - 80px)}
  .msg-heads{
    grid-template-columns:1fr;
  }
  .msg-heads__list{border-right:none}
  .msg-heads__thread{display:none}
  .msg-body{
    grid-template-columns:1fr;
    min-height:70dvh;
  }
  .msg-sidebar{border-right:none}
  .msg-main{display:none}
  .msg-canvas.is-thread .msg-heads__list{display:none}
  .msg-canvas.is-thread .msg-heads__thread{display:flex}
  .msg-canvas.is-thread .msg-sidebar{display:none}
  .msg-canvas.is-thread .msg-main{display:flex}
  .msg-thread-head__back{display:flex}
  .msg-composer__workout span{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BENACHRICHTIGUNGEN — vollwertige Seite (wie Feed / Nachrichten)
   ═══════════════════════════════════════════════════════════════════════════ */
.ntf-page{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
  box-sizing:border-box;
  padding:0 20px 28px;
  max-width:760px;
  margin:0 auto;
}
.ntf-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:4px 0 12px;
  flex-shrink:0;
  background:var(--neutral-50);
}
body.shell-v2:not(.shell-v2--classic):not(.shell-v2--auth) .ntf-toolbar{
  padding-top:24px;
}
.ntf-toolbar__title{
  font-size:28px;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.2;
  margin:0;
  color:var(--neutral-800);
}
.ntf-toolbar__meta{
  font-size:13px;
  color:var(--neutral-500);
  margin-top:4px;
}
.ntf-toolbar__mark{
  background:none;
  border:none;
  padding:6px 0;
  font-size:13px;
  font-weight:500;
  color:var(--accent-text);
  cursor:pointer;
  font-family:inherit;
  flex-shrink:0;
  white-space:nowrap;
}
.ntf-toolbar__mark:hover{color:var(--accent-strong);text-decoration:underline}
.ntf-toolbar__mark:disabled{
  color:var(--neutral-400);
  cursor:default;
  text-decoration:none;
}
.ntf-layout{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ntf-main{min-width:0}
.ntf-settings{display:none}
.ntf-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 0 14px;
}
.ntf-filter{
  padding:6px 12px;
  border:0.5px solid var(--border-default);
  border-radius:0;
  background:transparent;
  color:var(--neutral-500);
  font-size:12px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  line-height:1.2;
}
.ntf-filter:hover{background:var(--neutral-50);color:var(--neutral-800)}
.ntf-filter.is-active{
  background:var(--neutral-100);
  color:var(--neutral-800);
  border-color:var(--border-strong);
  box-shadow:inset 2px 0 0 var(--accent-base);
}
.ntf-canvas{
  border:0.5px solid var(--border-default);
  border-radius:0;
  background:var(--card-bg);
  overflow:hidden;
}
.ntf-list{min-height:0}
.ntf-group{padding:0;margin:0}
.ntf-group:not(:has(.ntf-item)){display:none}
.ntf-group__label{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--neutral-500);
  padding:10px 16px 6px;
  background:var(--card-bg);
}
.ntf-group:first-child .ntf-group__label{padding-top:10px}
.ntf-group:not(:first-child) .ntf-group__label{
  padding-top:16px;
  border-top:0.5px solid var(--border-default);
}
.ntf-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  padding:12px 16px;
  border:none;
  border-top:0.5px solid var(--border-default);
  background:transparent;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  box-sizing:border-box;
  position:relative;
}
.ntf-group .ntf-item:first-of-type{border-top:0.5px solid var(--border-default)}
.ntf-item:hover{background:var(--neutral-50)}
.ntf-item.is-unread{
  background:rgba(37,99,235,0.06);
}
.ntf-item.is-unread:hover{
  background:rgba(37,99,235,0.09);
}
.ntf-item__icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ntf-item__avatar{
  flex-shrink:0;
}
.ntf-item__icon .ti{font-size:16px;line-height:1}
.ntf-item__icon--social{background:rgba(236,72,153,0.12);color:#DB2777}
.ntf-item__icon--pr{background:rgba(245,158,11,0.14);color:#D97706}
.ntf-item__icon--guardian{background:rgba(20,184,166,0.14);color:#0D9488}
.ntf-item__icon--streak{background:rgba(234,88,12,0.14);color:#EA580C}
.ntf-item__icon--sync{background:var(--neutral-100);color:var(--neutral-600)}
.ntf-item__icon--sync-err{background:rgba(220,38,38,0.12);color:var(--danger)}
.ntf-item__icon--race{background:rgba(59,130,246,0.12);color:#2563EB}
.ntf-item__icon--review{background:var(--accent-bg);color:var(--accent-text)}
.ntf-item__icon--system{background:var(--neutral-100);color:var(--neutral-600)}
.ntf-toolbar__mark[hidden],
.ntf-toolbar__meta[hidden]{display:none !important}
.ntf-item__body{flex:1;min-width:0}
.ntf-item__title{
  font-size:13px;
  font-weight:600;
  color:var(--neutral-800);
  line-height:1.35;
}
.ntf-item__title strong{font-weight:700}
.ntf-item__meta{
  font-size:12px;
  color:var(--neutral-500);
  margin-top:3px;
  line-height:1.4;
}
.ntf-item__mono{
  font-size:12px;
  color:var(--neutral-600);
  margin-top:4px;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  font-family:var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ntf-item__actions{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.ntf-item__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success-base);
  flex-shrink:0;
  margin:0;
  align-self:center;
}
.ntf-list-head{
  display:flex;
  justify-content:flex-end;
  margin-bottom:4px;
}
.ntf-item__side{
  flex-shrink:0;
  margin-left:auto;
  display:flex;
  align-items:center;
}
.ntf-item__dot-spacer{
  width:8px;
  height:8px;
  flex-shrink:0;
}
.ntf-settings__quiet{
  margin-top:12px;
  padding-top:12px;
  border-top:0.5px solid var(--border-default);
}
.ntf-settings__all{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  font-weight:500;
  color:var(--accent-text);
  text-decoration:none;
}
.ntf-empty{
  padding:48px 24px;
  text-align:center;
  color:var(--neutral-500);
}
.ntf-empty__icon{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border:0.5px solid var(--border-default);
  border-radius:0;
  background:var(--neutral-50);
  color:var(--neutral-600);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ntf-empty__icon .ti{font-size:22px}
.ntf-empty__title{
  font-size:15px;
  font-weight:600;
  color:var(--neutral-800);
  margin-bottom:6px;
}
.ntf-empty__text{
  font-size:13px;
  line-height:1.5;
  max-width:34ch;
  margin:0 auto;
}

@media (max-width:640px){
  .ntf-page{padding:0 12px 20px}
  .ntf-toolbar{flex-wrap:wrap}
  .ntf-item__mono{white-space:normal}
}

/* ── Dashboard-Grid: Desktop zweispaltig, Mobile gestapelt ───────────────── */
.dash-block{margin-bottom:var(--space-3)}
.dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
  align-items:stretch;
}
.dashboard-grid > .dash-cell,
.dashboard-grid > .card{min-width:0}
.dashboard-grid > .dash-cell > .card,
.dashboard-grid > .card{height:100%;margin-bottom:0 !important}
.dashboard-grid--lg > .card.dash-widget--lg{
  height:var(--dash-widget-lg) !important;
  min-height:var(--dash-widget-lg) !important;
  max-height:var(--dash-widget-lg);
  margin-bottom:0 !important;
}
/* Gleiche Spaltenbreite wie Status-Widgets (Konsistenz = 1/3) */
@media (min-width:900px){
  .dashboard-grid--lg{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  /* XL-Reihe: 6 Spalten — lg = span 2 (1/3), xl = span 3 (1/2 → max. 2 pro Reihe) */
  .dashboard-grid--xl{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:var(--space-3);
    margin-bottom:var(--space-3);
    align-items:stretch;
  }
  .dashboard-grid--xl > .dash-cell,
  .dashboard-grid--xl > .card{min-width:0}
  .dashboard-grid--xl > .dash-cell--xl,
  .dashboard-grid--xl > .card.dash-widget--xl{
    grid-column:span 3;
  }
  .dashboard-grid--xl > .dash-cell--lg,
  .dashboard-grid--xl > .card.dash-widget--lg{
    grid-column:span 2;
  }
  /* Höhe am Host-Child — im Custom-Grid gilt Standard (lg) für alle.
     Die frühere XL-Höhe (280) machte Woche/Form-Verlauf größer als Feed/Nächste 3. */
  #dash-week-host > .card,
  #dash-form-host > .card,
  #dash-preview-host > .card,
  .dashboard-grid--xl > .dash-cell--xl > .card.dash-widget--xl,
  .dashboard-grid--xl > .card.dash-widget--xl{
    height:var(--dash-widget-lg) !important;
    min-height:var(--dash-widget-lg) !important;
    max-height:var(--dash-widget-lg) !important;
    margin-bottom:0 !important;
    overflow:hidden;
  }
}
@media (max-width:899px){
  .dashboard-grid--lg{
    grid-template-columns:1fr;
  }
  /* XL nur Desktop — Mobile behält sm/lg-Swipe */
  .dashboard-grid--xl{display:none !important}
}
/* Leere Hosts ausblenden; Partner bekommt volle Breite */
.dashboard-grid > .dash-cell:empty{display:none}
.dashboard-grid:has(> .dash-cell:empty) > .dash-cell:not(:empty){grid-column:1 / -1}
.dashboard-grid:has(> .dash-cell):not(:has(> .dash-cell:not(:empty))){
  display:none;
  margin:0;
}
@media (max-width:720px){
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-grid:has(> .dash-cell:empty) > .dash-cell:not(:empty){grid-column:auto}
}

/* Bereitschaft ↔ Konsistenz: Mobile wischen, Desktop nebeneinander.
   Grid-auto-flow statt Flex-% — in Shell-Flex-Parents löst flex-basis:100%
   oft auf „auto“ auf → Slides stapeln sich vertikal. */
.dash-readiness-metrics{
  display:grid !important;
  /* absichtlich „1fr 1fr“, nicht repeat(2…) — Mobile-Regel
     [style*="grid-template-columns:repeat(2"] würde sonst auf 1 Spalte zwingen */
  grid-template-columns:1fr 1fr !important;
  gap:8px 16px;
}
#page-dashboard #dash-readiness-host .dash-readiness-metrics,
#dash-status-swipe #dash-readiness-host .dash-readiness-metrics{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px 16px !important;
}
.dash-swipe{
  margin-bottom:var(--space-3);
  min-width:0;
  max-width:100%;
  width:100%;
  background:transparent;
}
.dash-swipe__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:var(--dash-widget-gap, var(--space-3));
  align-items:stretch;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
  background:transparent;
}
.dash-swipe__track::-webkit-scrollbar{display:none}
.dash-swipe__slide{
  min-width:0;
  height:auto;
  align-self:stretch;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:transparent;
  display:flex;
  flex-direction:column;
}
.dash-swipe__slide:empty,
.dash-swipe__slide[hidden]{display:none}
.dash-swipe__slide > .card{
  height:100% !important;
  min-height:0;
  margin-bottom:0 !important;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  background:var(--bg-1);
}
.dash-swipe__footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-top:var(--space-2);
}
.dash-swipe__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.dash-swipe__dot{
  width:6px;
  height:6px;
  border:0;
  padding:0;
  border-radius:var(--radius-pill);
  background:var(--neutral-300);
  cursor:pointer;
  transition:width .15s var(--ease), background .15s var(--ease);
}
.dash-swipe__dot.is-active{
  width:16px;
  background:var(--accent-base);
}
.dash-swipe__hint{
  color:var(--text-3);
  text-align:center;
}
.dash-swipe--single .dash-swipe__footer{display:none}
.dash-swipe--single .dash-swipe__track{
  grid-auto-columns:100%;
  padding-inline:0;
}
.dash-swipe--single .dash-swipe__slide{scroll-snap-align:start}

@media (max-width:899px){
  /* Zentriert: Peek nur über Track-Padding — Slide = volle Content-Breite
     (kein doppeltes Abziehen, sonst 1-Spalten-Metriken + zu hohe Karte). */
  .dash-swipe:not(.dash-swipe--single) .dash-swipe__track{
    grid-auto-columns:100%;
    padding-inline:14px;
    scroll-padding-inline:14px;
  }
  .dash-swipe:not(.dash-swipe--single) .dash-swipe__slide{
    scroll-snap-align:center;
  }
}
@media (min-width:900px){
  .dash-swipe__track{
    display:grid;
    grid-auto-flow:row;
    grid-auto-columns:unset;
    gap:var(--space-3);
    overflow:visible;
    scroll-snap-type:none;
    padding-inline:0;
  }
  /* Große Status-Widgets: 3 nebeneinander */
  #dash-status-swipe .dash-swipe__track{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  /* Kleine Session-Widgets: 4 nebeneinander */
  #dash-session-swipe .dash-swipe__track{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
  .dash-swipe__footer{display:none}
}

/* Mobile Dashboard: Widgets mit mehr Tiefe (nicht flach „aufgeklebt“) */
@media (max-width:899px){
  #page-dashboard .card{
    border-radius:var(--radius-lg);
    border-color:color-mix(in srgb, var(--border-default) 55%, transparent);
    box-shadow:
      var(--shadow-2),
      0 10px 28px color-mix(in srgb, var(--neutral-900) 7%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 88%, transparent);
    transform:translateZ(0);
    padding:var(--space-4) !important;
  }
  /* Raster-Widgets behalten ihr eigenes Padding — sonst knallt space-4
     die sm-Karten (112px) auf Mobile zu und Abstände weichen vom Desktop ab. */
  #page-dashboard .card.dash-widget--sm,
  #page-dashboard .card.dash-w-sm{
    padding:var(--space-3) var(--space-4) !important;
  }
  #page-dashboard .card.dash-widget--lg,
  #page-dashboard .card.dash-w{
    padding:var(--space-4) !important;
  }
  [data-theme="dark"] #page-dashboard .card{
    border-color:var(--border-default);
    box-shadow:none;
  }
  [data-theme="dark"] #page-dashboard .card:hover{
    box-shadow:none;
    border-color:var(--border-strong);
  }
  /* Hero + Wächter: flach, ohne Schattierung (Mobile) */
  #page-dashboard .card.dash-hero,
  #page-dashboard .card.dash-hero:hover,
  #page-dashboard .card.dash-guard,
  #page-dashboard .card.dash-guard:hover,
  #page-dashboard .dash-guardian-mob .card,
  #page-dashboard .dash-guardian-mob .card:hover{
    box-shadow:none !important;
  }
  #page-dashboard .dash-block,
  #page-dashboard .dashboard-grid,
  #page-dashboard .dash-swipe{
    gap:var(--space-3);
    margin-bottom:var(--space-3) !important;
  }
  #page-dashboard .dash-block{margin-bottom:var(--space-3) !important}
  #page-dashboard .dash-swipe,
  #page-dashboard .dash-swipe__track,
  #page-dashboard .dash-swipe__slide{
    background:transparent !important;
  }
  #page-dashboard .dashboard-grid > .card,
  #page-dashboard .dash-swipe .card{
    margin-bottom:0 !important;
    box-shadow:var(--shadow-1);
  }
  /* Kartentitel: Satzschreibweise, gedämpft — Caps nur für kurze Status-Tags */
  #page-dashboard .dash-card-label,
  #page-dashboard .caption{
    font-size:var(--yama-label);
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    color:var(--text-3);
  }
  #page-dashboard .dash-card-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  /* Pro Karte: Tile-Zahlen unter der Hero-Kennzahl halten */
  #page-dashboard .dash-tile-metric{
    font-size:var(--yama-title);
    font-weight:500;
    font-variant-numeric:tabular-nums;
    line-height:1.2;
    color:var(--neutral-800);
  }
  #page-dashboard .dash-tile-label{
    font-size:var(--yama-micro);
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    color:var(--text-3);
    margin-top:2px;
  }
  #page-dashboard .dash-status-tag{
    font-size:var(--yama-micro);
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
}

/* ── App-Typo-Rollen (vorhanden, schrittweise Nutzung) ───────────────────── */
.yama-metric{
  font-size:var(--yama-metric);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--neutral-800);
}
.yama-title{
  font-size:var(--yama-title);
  font-weight:500;
  line-height:1.3;
  color:var(--neutral-800);
}
.yama-text{
  font-size:var(--yama-text);
  font-weight:400;
  line-height:1.45;
  color:var(--neutral-800);
}
.yama-label{
  font-size:var(--yama-label);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--text-3);
}
.yama-micro{
  font-size:var(--yama-micro);
  font-weight:400;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  line-height:1.35;
}
.yama-loadstate{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding:var(--space-3) 0;
  color:var(--text-2);
}
.yama-loadstate .yama-text{color:inherit}
.yama-loadstate__spin{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid var(--border-default);
  border-top-color:var(--accent-base);
  animation:spin .8s linear infinite;
  flex-shrink:0;
}
.yama-loadstate__retry{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  font-size:var(--yama-text);
  color:var(--accent-strong);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.yama-loadstate__why{
  flex-basis:100%;
  color:var(--text-3);
}
@media (prefers-reduced-motion:reduce){.yama-loadstate__spin{animation:none}}
/* Dashboard-Kartentitel: ruhig, Satzschreibweise (Caps nur für Status-Tags) */
.dash-card-label{
  font-size:var(--yama-label);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--text-3);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dash-card-label .ti{
  font-size:1.1em;
  color:inherit;
}
.dash-tile-metric{
  font-size:var(--yama-title);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  color:var(--neutral-800);
}
.dash-tile-label{
  font-size:var(--yama-micro);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--text-3);
  margin-top:2px;
}
.dash-status-tag{
  font-size:var(--yama-micro);
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
#page-dashboard > section .card{
  padding:var(--space-4);
  margin-bottom:var(--space-3);
}
#page-dashboard .dashboard-grid > .card,
#page-dashboard .dash-swipe .card,
#page-dashboard .dash-cell > .card{
  margin-bottom:0;
}


/* Dashboard-Hero: volle Containerbreite, feste Höhe je Inhalt (kein Widget-Raster) */



/* Diese Woche (Dashboard) */

.dash-week.dash-w{
  gap:8px;
  overflow:hidden;
}
.dash-week__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.dash-week__body--strip{
  justify-content:space-between;
}
.dash-week__daygrid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
  flex:1 1 auto;
  min-height:0;
  align-content:center;
}
.dash-week__day{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  padding:4px;
  border-radius:var(--radius-md);
  min-width:0;
}
.dash-week__day.is-today{
  border:1.5px solid var(--accent-strong);
}
.dash-week__day-label{
  font-size:var(--yama-micro);
  color:var(--text-3);
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.dash-week__day-label.is-today{color:var(--accent-text);font-weight:600}
.dash-week__day-num{
  font-size:var(--yama-text);
  color:var(--text);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}
.dash-week__day-num.is-today{color:var(--accent-text);font-weight:600}
.dash-week__day-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:2px;
}
.dash-week__pill{
  width:100%;
  border-radius:2px;
  background:var(--accent-strong);
  opacity:0.85;
}
.dash-week__pill.is-planned{opacity:0.30}
.dash-week__pill[data-sport="bike"]{background:#185FA5}
.dash-week__pill[data-sport="swim"]{background:#0F6E56}
.dash-week__pill[data-sport="strength"]{background:#854F0B}
.dash-week__pill[data-sport="other"]{background:var(--neutral-400)}
.dash-week__legend{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  font-size:var(--yama-micro);
  color:var(--text-3);
}
.dash-week__legend-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.dash-week__legend-swatch{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
  background:var(--accent-strong);
  opacity:0.85;
}
.dash-week__legend-swatch.is-planned{opacity:0.30}
.dash-week__metric{
  padding:8px 10px;
}
.dash-week__metric-val{
  margin:2px 0;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dash-week__plan,
.dash-week__still{
  padding-top:6px;
}
.dash-week__row{
  padding:6px 10px;
  gap:10px;
}
.dash-week__row-icon{
  width:28px;
  height:28px;
}
.dash-week__cta{
  padding:10px 12px;
  gap:10px;
}
.dash-week__cta-icon{
  width:28px;
  height:28px;
}
.dash-week__footnote{display:none}

.dash-form-trend.dash-w{
  gap:6px;
  overflow:hidden;
}
.dash-form-trend__status{
  margin:0;
  gap:8px;
}
/* Chart eats leftover flex space; absolute fill so SVG % height resolves
   (viewBox alone would keep ~85px intrinsic height and letterbox). */
.dash-form-trend__chart{
  flex:1 1 0;
  min-height:0;
  position:relative;
  margin:0 -4px;
}
.dash-form-trend__chart > div{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  min-height:0;
}
.dash-form-trend__chart svg{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  display:block;
}

/* Preview (Nächste 7 Tage) — feste XL-Höhe, Liste scrollt innen */
.dash-w-preview.dash-w{
  gap:8px;
}
.dash-w-preview__list{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}

/* Nachrichten: so viele Zeilen wie vollständig in die Kartenhöhe passen */
.dash-w-msg.dash-w{
  gap:8px;
  --dash-msg-row-h:48px;
}
.dash-w-msg__list{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.dash-w-msg__row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:0 0 auto;
  min-height:var(--dash-msg-row-h);
  height:var(--dash-msg-row-h);
  box-sizing:border-box;
  padding:6px 8px;
  border-radius:var(--radius-md);
  cursor:pointer;
  background:transparent;
}
.dash-w-msg__row:hover,
.dash-w-msg__row:focus-visible{
  background:var(--bg-2);
  outline:none;
}
.dash-w-msg__row--unread{
  background:transparent;
}
.dash-w-msg__avatar{
  width:32px;
  height:32px;
  border-radius:var(--yama-avatar-radius,28%);
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 0 0 1px var(--border);
  background:var(--bg-2);
}
.dash-w-msg__avatar--initials{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--yama-micro);
  font-weight:600;
  letter-spacing:0.04em;
  background:var(--bg-2);
  color:var(--neutral-500);
}
.dash-w-msg__main{flex:1;min-width:0}
.dash-w-msg__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.dash-w-msg__from{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:hidden;
}
.dash-w-msg__meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.dash-w-msg__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-base);
  flex-shrink:0;
}
.dash-w-msg__name{
  font-size:var(--yama-text);
  font-weight:400;
  color:var(--neutral-800);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-msg__row--unread .dash-w-msg__name{
  font-weight:600;
}
.dash-w-msg__role{
  font-size:var(--yama-micro);
  color:var(--text-3);
  flex-shrink:0;
}
.dash-w-msg__when{
  font-size:var(--yama-micro);
  color:var(--text-3);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.dash-w-msg__preview-txt{
  font-size:var(--yama-micro);
  font-weight:400;
  color:var(--text-2);
  line-height:1.25;
  margin-top:1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-msg__row--unread .dash-w-msg__preview-txt{
  font-weight:600;
  color:var(--neutral-700);
}
.dash-w-msg__empty{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:var(--space-2);
  min-height:0;
}
.dash-w-msg__compose{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  cursor:pointer;
}
.dash-w-msg__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
  margin-top:auto;
  padding-top:8px;
}
.dash-w-msg__all{
  border:0;
  background:none;
  padding:0;
  margin:0 0 0 auto;
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.dash-w-msg__new{
  border:0.5px solid var(--border-strong);
  border-radius:var(--radius-pill);
  padding:5px 10px;
  background:var(--bg-1);
  color:var(--neutral-700);
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  cursor:pointer;
}

.dash-week{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.dash-week__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.dash-week__metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  flex-shrink:0;
}
.dash-week__metric{
  background:var(--bg-2);
  border-radius:var(--radius-md);
  padding:8px 10px 7px;
  min-width:0;
}
.dash-week__metric .yama-title,
.dash-week__metric-val{
  font-family:var(--font-body) !important;
  font-size:var(--yama-text) !important;
  font-weight:500;
  line-height:1.2;
  margin:2px 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dash-week__metric-lbl--short,
.dash-week__metric-val--short{
  display:none;
}
.dash-week__metric-bar{
  height:3px;
  margin-top:6px;
  border-radius:var(--radius-pill);
  background:var(--bg);
  overflow:hidden;
}
.dash-week__metric-bar-fill{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--accent-strong);
  max-width:100%;
}
/* Satzschreibweise wie andere Widget-Labels (nicht .yama-label Uppercase) */
.dash-week__metric .yama-label{
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  color:var(--text-3);
}
@media (max-width:600px){
  .dash-week__metrics{gap:4px}
  .dash-week__metric{
    padding:6px 8px 5px;
  }
  .dash-week__metric-lbl--full,
  .dash-week__metric-val--full,
  .dash-week__metric-sub{
    display:none !important;
  }
  .dash-week__metric-lbl--short,
  .dash-week__metric-val--short{
    display:block;
  }
  /* Kein Ellipsis — bei Engpass etwas kleinere Wertschrift (Token), nicht kürzen */
  .dash-week__metric .dash-week__metric-val--short{
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    font-size:var(--yama-label) !important;
    margin:1px 0 0;
  }
  .dash-week__metric-bar{margin-top:4px}
}
.dash-week__plan{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:var(--space-2);
  border-top:0.5px solid var(--border-default);
}
.dash-week__plan-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.dash-week__strip{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:4px;
  align-items:end;
}
.dash-week__daycol{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  min-width:0;
}
.dash-week__seg{
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  min-width:0;
  height:10px;
}
.dash-week__seg--done{background:var(--accent-strong)}
.dash-week__seg--planned{background:color-mix(in srgb, var(--accent-strong) 28%, transparent)}
.dash-week__seg--empty{background:var(--bg-2)}
.dash-week__seg--sick{background:var(--danger-base)}
.dash-week__dow.is-sick{color:var(--danger-text);font-weight:500}
.dash-week__dow{
  font-size:var(--yama-micro);
  color:var(--text-3);
  text-align:center;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.dash-week__dow.is-today{
  color:var(--neutral-800);
  font-weight:600;
}
.dash-week__still{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:var(--space-2);
  flex-shrink:0;
}
.dash-week__still-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.dash-week__rows{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dash-week__row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:var(--bg-2);
  border-radius:var(--radius-md);
  cursor:pointer;
}
.dash-week__row-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--accent-bg);
  color:var(--accent-text);
}
.dash-week__row-icon[data-sport="bike"]{
  background:color-mix(in srgb, #185FA5 14%, transparent);
  color:#185FA5;
}
.dash-week__row-icon[data-sport="swim"]{
  background:color-mix(in srgb, #0F6E56 14%, transparent);
  color:#0F6E56;
}
.dash-week__row-icon[data-sport="run"]{
  background:var(--accent-bg);
  color:var(--accent-text);
}
.dash-week__row-icon[data-sport="strength"]{
  background:color-mix(in srgb, #854F0B 14%, transparent);
  color:#854F0B;
}
.dash-week__row-main{flex:1;min-width:0}
.dash-week__row-main .yama-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-week__row-dur{
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  font-weight:500;
  color:var(--neutral-800);
}
.dash-week__cta{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--accent-bg);
  border-radius:var(--radius-md);
}
.dash-week__cta-icon{
  width:36px;
  height:36px;
  border-radius:var(--radius-md);
  background:var(--bg-1);
  color:var(--accent-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.dash-week__cta-icon .ti{font-size:18px}
.dash-week__cta-main{flex:1;min-width:0}
.dash-week__cta-btn{
  flex-shrink:0;
  padding:8px 14px;
  border:none;
  border-radius:var(--radius-md);
  background:var(--accent-strong);
  color:var(--neutral-0);
  font-size:var(--yama-text);
  font-weight:500;
  cursor:pointer;
}
.dash-week__footnote{
  text-align:center;
  color:var(--text-3);
  margin-top:2px;
}
@media (max-width:420px){
  .dash-week__cta{flex-wrap:wrap}
  .dash-week__cta-btn{width:100%}
}

.dash-form-trend__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:0;
  flex-shrink:0;
}
.dash-form-trend__status{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:0;
  flex-shrink:0;
}
.dash-form-trend__status-main{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.dash-form-trend__note{
  font-size:var(--yama-micro);
  color:var(--text-3);
  text-align:right;
  flex-shrink:0;
  max-width:48%;
  line-height:1.35;
}
.dash-form-trend__legend{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:0;
  flex-shrink:0;
  font-size:var(--yama-micro);
  color:var(--neutral-400);
  font-variant-numeric:tabular-nums;
}
.dash-form-trend__swatch{
  display:inline-block;
  width:10px;
  height:2px;
  vertical-align:middle;
  margin-right:5px;
  border-radius:1px;
}
.dash-form-trend__swatch--ctl{background:var(--accent-strong)}
.dash-form-trend__swatch--atl{background:var(--warning-base)}
.dash-form-trend__swatch--tsb{background:var(--neutral-500)}

.dash-w-form{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  overflow:hidden;
  cursor:pointer;
}
.dash-w-form:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
}
.dash-w-form__metrics{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-shrink:0;
  min-width:0;
}
.dash-w-form__now{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.dash-w-form__now-val{
  font-size:var(--yama-metric);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.02em;
  font-family:inherit;
  color:var(--text);
}
.dash-w-form__now-zone{
  font-size:var(--yama-title);
  font-weight:500;
  line-height:1.2;
}
.dash-w-form__proj{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  min-width:0;
  max-width:55%;
  cursor:help;
}
.dash-w-form__proj-line{
  font-size:var(--yama-micro);
  font-weight:400;
  line-height:1.3;
  color:var(--text-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.dash-w-form__proj-num{
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  margin-left:2px;
}
.dash-w-form__proj-zone{
  font-weight:500;
  margin-left:3px;
}
.dash-w-form__charts{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dash-w-form__svg{
  width:100%;
  flex:1 1 auto;
  min-height:48px;
  display:block;
  overflow:visible;
}
.dash-w-form__axis{
  position:relative;
  flex:0 0 14px;
  height:14px;
  width:100%;
  overflow:visible;
}
.dash-w-form__ax-lbl,
.dash-w-form__ax-today{
  position:absolute;
  top:0;
  font-size:var(--yama-micro);
  line-height:1.2;
  color:var(--text-3);
  white-space:nowrap;
  pointer-events:none;
}
.dash-w-form__ax-today{
  color:var(--text-2);
  font-weight:500;
}
.dash-w-form__ax-lbl--start{transform:translateX(0)}
.dash-w-form__ax-lbl--middle{transform:translateX(-50%)}
.dash-w-form__ax-lbl--end{transform:translateX(-100%)}
.dash-w-form__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  flex-shrink:0;
  min-width:0;
}
.dash-w-form__ctl{
  font-size:var(--yama-micro);
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dash-w-form__ctl--warn{color:var(--danger-text)}
.dash-w-form__plan{
  border:0;
  background:none;
  padding:0;
  margin:0 0 0 auto;
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:2px;
}

.dash-hero{
  padding:var(--space-4);
  margin-bottom:var(--space-5); /* 24px bis zur Widget-Zeile */
  border-radius:var(--radius-lg);
}
.dash-hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
}
.dash-hero__top-main{min-width:0;flex:1}
.dash-hero__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--yama-label);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:8px;
}
.dash-hero__label--accent{color:var(--accent-text)}
.dash-hero__status-icon{font-size:18px;line-height:1;flex-shrink:0}
.dash-hero__title{
  font-size:var(--yama-title);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.35;
}
.dash-hero__sub{
  margin-top:4px;
  font-size:var(--yama-text);
  font-weight:400;
  color:var(--neutral-600);
  line-height:1.4;
}
.dash-hero__form{
  flex-shrink:0;
  font-size:var(--yama-micro);
  color:var(--neutral-500);
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.dash-hero__form strong{color:var(--neutral-700);font-weight:500}
.dash-hero__suggest{
  margin-top:6px;
  font-size:var(--yama-text);
  font-weight:500;
}
.dash-hero__secondary{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:10px;
  padding-top:9px;
  border-top:0.5px solid var(--border-default);
  font-size:var(--yama-text);
  color:var(--neutral-700);
  line-height:1.45;
}
.dash-hero__secondary .ti{font-size:13px;flex-shrink:0;margin-top:2px}
.dash-hero__stack{
  margin-top:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dash-hero__section-label{
  font-size:var(--yama-label);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:2px;
}
.dash-hero__activity{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--bg-1);
  border-radius:var(--radius-md);
  cursor:pointer;
}
.dash-hero__activity-icon{
  flex-shrink:0;
  color:var(--accent-text);
  display:flex;
  align-items:center;
}
.dash-hero__activity-body{flex:1;min-width:0}
.dash-hero__activity-title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-hero__activity-meta{
  margin-top:2px;
  font-size:var(--yama-micro);
  color:var(--neutral-500);
  font-variant-numeric:tabular-nums;
}
.dash-hero__check{
  font-size:16px;
  color:var(--accent-base);
  flex-shrink:0;
  margin-left:auto;
}
.dash-hero__pill{
  margin-left:auto;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--neutral-500);
  background:var(--bg-2);
  flex-shrink:0;
}
.dash-hero__pill--partial{
  color:var(--warning-text);
  background:var(--warning-bg);
}
.dash-hero__details{
  margin-left:auto;
  flex-shrink:0;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  padding:6px 12px;
  background:var(--bg-1);
  color:var(--neutral-700);
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  cursor:pointer;
}
.dash-hero__details--move{
  padding:6px 14px;
}
.dash-hero__details:hover{
  color:var(--neutral-800);
}
.dash-hero__race{
  display:flex;
  align-items:stretch;
  margin-top:var(--space-3);
  padding:0;
  background:var(--bg-1);
  border-radius:var(--radius-md);
  cursor:pointer;
  overflow:hidden;
}
.dash-hero__race--secondary{
  margin-top:var(--space-2);
  opacity:0.92;
}
.dash-hero__race-main{
  flex:1;
  min-width:0;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:center;
}
.dash-hero__race-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:0;
}
.dash-hero__race-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--yama-label);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-3);
  white-space:nowrap;
  flex-shrink:0;
}
.dash-hero__race-label .ti{
  font-size:14px;
  flex-shrink:0;
}
@media (max-width:899px){
  .dash-hero__race-label{
    font-size:var(--yama-micro);
    font-weight:500;
    letter-spacing:0.04em;
  }
  .dash-hero__race-label .ti{
    font-size:11px;
  }
}
.dash-hero__race-date{
  font-size:var(--yama-micro);
  color:var(--neutral-500);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.dash-hero__race-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.dash-hero__race-name{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex-shrink:1;
  min-width:0;
}
.dash-hero__race-meta{
  font-size:var(--yama-micro);
  color:var(--neutral-500);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-shrink:1;
  min-width:0;
}
.dash-hero__race-count{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:12px 16px;
  border-left:0.5px solid var(--border-default);
  text-align:center;
  font-variant-numeric:tabular-nums;
  min-width:76px;
}
.dash-hero__race-count-val{
  font-size:var(--yama-title);
  font-weight:500;
  color:var(--neutral-700);
  line-height:1.1;
}
.dash-hero__race-count-val--muted{
  font-size:var(--yama-title);
  color:var(--neutral-600);
}
.dash-hero__race-count-lbl{
  font-size:var(--yama-micro);
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-2);
}
@media (max-width:899px){
  .dash-hero{padding:var(--space-3)}
  .dash-hero__race-count{min-width:68px;padding:10px 12px}
  .dash-hero__race-meta{display:none}
}

.dash-hero__layout{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.dash-hero__main{min-width:0;flex:1}
.dash-hero__aside{
  min-width:0;
}
/* Wächter: Desktop im Hero-Aside, Mobile eigene Zeile unter Tages-/Willkommens-Karte */
@media (max-width:899px){
  .dash-hero__aside{display:none !important}
  .dash-guardian-mob{display:block}
}
@media (min-width:900px){
  .dash-guardian-mob{display:none !important}
}

.dash-hero-guard{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dash-hero-guard__head{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
  cursor:pointer;
}
.dash-hero-guard__icon{
  font-size:16px;
  flex-shrink:0;
}
.dash-hero-guard__title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-700);
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-hero-guard__status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  /* Unter Titel einrücken: Icon 16 + Gap 8 */
  padding-left:24px;
  font-size:var(--yama-micro);
  color:var(--text-3);
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.dash-hero-guard__status--plain{color:var(--neutral-500)}
.dash-hero-guard__chev{
  font-size:14px;
  color:var(--neutral-400);
  margin-left:auto;
  transition:transform 0.15s;
  flex-shrink:0;
}
.dash-hero-guard__explain{
  margin-top:4px;
  padding-top:10px;
  border-top:0.5px solid var(--border-default);
}
.dash-hero-guard__explain-title{
  font-size:var(--yama-micro);
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:6px;
}
.dash-hero-guard__list{
  margin:0;
  padding:0 0 0 16px;
  font-size:var(--yama-micro);
  color:var(--neutral-600);
  line-height:1.55;
}
.dash-hero-guard__footnote{
  margin-top:8px;
  font-size:var(--yama-micro);
  color:var(--neutral-500);
  line-height:1.45;
}
.dash-hero-guard__suggest-title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
}
.dash-hero-guard__suggest-body{
  font-size:var(--yama-micro);
  color:var(--neutral-600);
  line-height:1.45;
}
.dash-hero-guard__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.dash-hero-guard__btn{
  padding:6px 12px;
  border:0.5px solid var(--border-default);
  background:var(--bg-1);
  color:var(--neutral-600);
  font-size:var(--yama-text);
  border-radius:var(--radius-md);
  cursor:pointer;
}
.dash-hero-guard__btn--primary{
  border-color:var(--accent-strong);
  background:var(--accent-strong);
  color:var(--neutral-0);
}
@media (min-width:900px){
  .dash-hero__layout{
    flex-direction:row;
    align-items:stretch;
    gap:0;
  }
  .dash-hero__main{
    padding-right:var(--space-4);
  }
  .dash-hero__aside{
    flex:0 0 240px;
    max-width:280px;
    padding-left:var(--space-4);
    border-left:0.5px solid var(--border-default);
  }
  /* Keine Auffälligkeiten: Statuszeile unter dem Inhalt, Karte niedriger */
  .dash-hero--guard-compact .dash-hero__layout{
    flex-direction:column;
    gap:var(--space-2);
  }
  .dash-hero--guard-compact .dash-hero__main{
    padding-right:0;
  }
  .dash-hero--guard-compact .dash-hero__aside{
    flex:0 0 auto;
    max-width:none;
    width:100%;
    padding-left:0;
    padding-top:var(--space-2);
    border-left:none;
    border-top:0.5px solid var(--border-default);
  }
  /* Krankheit / leerer Aside: keine Trennlinie unter dem Wettkampf-Block */
  .dash-hero--no-aside .dash-hero__aside,
  .dash-hero__aside:empty,
  .dash-hero__aside[hidden]{
    display:none !important;
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
    flex:0 0 0 !important;
    width:0 !important;
    max-width:0 !important;
  }
  .dash-hero--no-aside .dash-hero__main,
  .dash-hero--no-aside.dash-hero--guard-compact .dash-hero__main{
    padding-right:0;
  }
}
.dash-hero-guard__line{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  cursor:pointer;
}
.dash-hero-guard__line-text{
  font-size:var(--yama-micro);
  color:var(--text-2);
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-hero-guard--line .dash-hero-guard__explain{
  margin-top:6px;
}
.dash-hero-guard__illness-line{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.4;
  margin-bottom:4px;
}
.dash-hero-guard__illness-line--muted{
  font-weight:400;
  font-size:var(--yama-micro);
  color:var(--neutral-600);
  margin-bottom:8px;
}
.dash-hero-guard__list--actions{
  list-style:none;
  padding-left:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dash-hero-guard__affected{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:var(--yama-micro);
  color:var(--neutral-700);
  line-height:1.4;
}
.dash-hero-guard__btn--sm{
  padding:4px 10px;
  font-size:var(--yama-micro);
}
@media (max-width:899px){
  /* Mobile-Wächter: kompakte eigene Karte, aufklappbare Details */
  .dash-guardian-mob .dash-hero-guard,
  .dash-guardian-mob .card.dash-guard{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  #page-dashboard .dash-guardian-mob .card.dash-guard,
  #page-dashboard .dash-guardian-mob .card.dash-guard:hover{
    padding:6px 12px !important;
  }
  .dash-guardian-mob .dash-hero-guard__line{
    min-height:44px;
    align-items:center;
  }
  .dash-guardian-mob .dash-hero-guard__status,
  .dash-guardian-mob .dash-hero-guard__status--plain{
    padding-left:22px;
    font-size:var(--yama-micro);
    line-height:1.2;
  }
  .dash-guardian-mob .dash-hero-guard__title{
    font-size:var(--yama-label);
    line-height:1.2;
  }
  .dash-guardian-mob .dash-hero-guard__icon{
    font-size:14px;
  }
  .dash-guardian-mob .dash-hero-guard__head{
    gap:6px;
    min-height:0;
  }
  .dash-guardian-mob .dash-hero-guard__explain{
    margin-top:6px;
    padding-top:10px;
  }
  .dash-guardian-mob .dash-hero-guard__affected{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Dashboard-Begrüßung + Anpassen in der Seitenkopfzeile */
.dash-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-5);
}
.dash-page-head__text{min-width:0;flex:1}
.dash-page-head__greet{
  font-size:var(--yama-metric);
  font-weight:500;
  color:var(--neutral-800);
  margin:0;
  letter-spacing:-0.02em;
  line-height:1.2;
}
.dash-page-head__date{
  color:var(--text-3);
  margin-top:4px;
}
.dash-page-head__customize{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  margin:0;
  /* Optisch mittig zur Begrüßungszeile (nicht zur ganzen Kopfzeile inkl. Datum) */
  margin-top:calc((1.2 * var(--yama-metric) - 40px) / 2);
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s var(--ease), background-color .15s var(--ease);
}
.dash-page-head__customize:hover{
  color:var(--neutral-700);
  background:var(--bg-2);
}
.dash-page-head__customize:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
}
.dash-page-head__customize .ti{
  font-size:20px;
  line-height:1;
  width:20px;
  height:20px;
}
.dash-page-head__customize-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
body.dash-is-editing .dash-page-head__customize,
body.dash-cx-modal-open .dash-page-head__customize{
  display:none !important;
}

/* Mobile: „Deine Übersicht“ + Anpassen unter dem Wächter */
.dash-overview-bar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-height:44px;
  margin:0 0 var(--space-2);
  position:relative;
}
.dash-overview-bar__label{
  color:var(--text-3);
  font-size:14px;
  font-weight:400;
  letter-spacing:0.02em;
  line-height:1.2;
}
.dash-overview-bar__customize{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:8px 4px 8px 10px;
  margin:0;
  border:0;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-size:14px;
  font-weight:400;
  line-height:1.2;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dash-overview-bar__customize .ti{
  font-size:16px;
  line-height:1;
}
.dash-overview-bar__customize:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
  border-radius:var(--radius-md);
}
.dash-overview-bar__tip{
  position:absolute;
  right:0;
  top:calc(100% + 4px);
  z-index:5;
  max-width:min(260px, 78vw);
  padding:10px 12px;
  border-radius:var(--radius-md);
  background:var(--bg-1);
  border:1px solid var(--border-default);
  box-shadow:var(--shadow-3);
  color:var(--neutral-800);
  font-size:var(--yama-text);
  line-height:1.35;
}
.dash-overview-bar__tip[hidden]{display:none !important}
.dash-overview-bar__tip-close{
  display:block;
  margin-top:8px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-size:var(--yama-label);
  font-weight:500;
  cursor:pointer;
  min-height:28px;
}
@media (max-width:899px){
  .dash-overview-bar{display:flex}
  body.dash-cx-modal-open .dash-overview-bar__customize{opacity:0.5}
}
@media (min-width:900px){
  .dash-overview-bar{display:none !important}
}

.dash-guard__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
}
.dash-guard__title{
  font-size:13px;
  color:var(--neutral-700);
  flex-shrink:0;
}
.dash-guard__status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:12px;
  font-size:13px;
  color:var(--neutral-600);
  min-width:0;
}

/* Toolbar unter Wächter: Dashboard | Anpassen-Icon */
.dash-widgets-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 var(--dash-widget-gap, var(--space-3));
  padding-inline:14px;
}
.dash-widgets-toolbar__title{
  margin:0;
  font-size:var(--yama-label);
  font-weight:500;
  color:var(--text-3);
  letter-spacing:0;
  line-height:1.25;
  text-transform:none;
}
.dash-widgets-toolbar__customize{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:44px;
  height:44px;
  margin:0;
  margin-right:-10px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent-text);
  font:inherit;
  cursor:default;
  pointer-events:none;
}
.dash-widgets-toolbar__customize .ti{
  font-size:20px;
  line-height:1;
}
.dash-widgets-toolbar__customize-label{display:none}
.dash-swipe__hint{display:none !important}

/* ── Dashboard customize (web ≥768px) ─────────────────────────────────── */
/* Desktop: kompakt 160 · standard 236 (= bisherige große Kartenhöhe). */
/* Bearbeiten-Leiste (+36) kommt zusätzlich — Inhalt behält die Kartenhöhe. */
@media (min-width:768px){
  :root,
  [data-theme="dark"]{
    --dash-widget-sm:160px;
    --dash-widget-lg:236px;
    --dash-widget-xl:236px;
  }
}
.dash-edit-banner--desktop,
.dash-custom-grid,
.dash-hidden-bar:not(.dash-hidden-bar--mobile),
.dash-widgets-toolbar--desktop,
.dash-dnd-hint,
.dash-grid-pop,
.dash-mobile-layout,
.dash-edit-banner--mobile,
.dash-hidden-bar--mobile,
.dash-widgets-toolbar--mobile .dash-widgets-toolbar__customize-label{display:none}
@media (min-width:768px){
  .dash-mobile-layout,
  .dash-edit-banner--mobile,
  .dash-hidden-bar--mobile,
  .dash-widgets-toolbar--mobile{display:none !important}
  .dash-widgets-toolbar--desktop{display:flex}
  .dash-widgets-toolbar__customize{
    width:auto;
    height:auto;
    min-height:44px;
    padding:6px 10px;
    gap:6px;
    margin-right:0;
    pointer-events:auto;
    cursor:pointer;
    color:var(--accent-text);
  }
  .dash-widgets-toolbar__customize-label{
    display:inline;
    font-size:var(--yama-text);
    font-weight:500;
  }
  .dash-edit-banner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-3);
    position:sticky;
    top:0;
    z-index:20;
    margin:0 0 var(--space-3);
    padding:var(--space-3) var(--space-3);
    background:var(--bg-1);
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-1);
  }
  /* Runde 3: Tagesstatus im Bearbeiten ausblenden; Widget-Köpfe nur in der Leiste */
  body.dash-is-editing .dash-hero{
    display:none !important;
  }
  body.dash-is-editing .dash-custom-grid .dash-w__head,
  body.dash-is-editing .dash-custom-grid .dash-tile__body .dash-card-label{
    display:none !important;
  }
  .dash-edit-banner[hidden]{display:none !important}
  .dash-edit-banner__lead{
    min-width:0;
    flex:1 1 auto;
  }
  .dash-edit-banner__title{
    margin:0 0 4px;
    color:var(--neutral-800);
  }
  .dash-edit-banner__text{
    margin:0;
    color:var(--text-3);
  }
  .dash-edit-banner__actions{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex-shrink:0;
  }
  .dash-grid-wrap{position:relative}
  .dash-edit-banner__grid-btn{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .dash-edit-banner__grid-btn .ti{font-size:var(--yama-micro);opacity:0.7}
  .dash-grid-pop{
    display:block;
    position:absolute;
    top:calc(100% + 4px);
    right:0;
    z-index:30;
    min-width:200px;
    max-width:240px;
    padding:var(--space-2);
    background:var(--bg-1);
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-3);
  }
  .dash-grid-pop[hidden]{display:none !important}
  .dash-grid-pop__rows{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:6px;
  }
  .dash-grid-pop__row{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .dash-grid-pop__label{
    flex:0 0 auto;
    min-width:3.6em;
    color:var(--text-3);
  }
  .dash-grid-pop__seg{
    display:inline-flex;
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--bg-2);
  }
  .dash-grid-pop__seg-btn{
    width:28px;
    height:26px;
    padding:0;
    border:0;
    border-right:0.5px solid var(--border-default);
    background:transparent;
    color:var(--text-2);
    font-size:var(--yama-micro);
    font-variant-numeric:tabular-nums;
    cursor:pointer;
  }
  .dash-grid-pop__seg-btn:last-child{border-right:0}
  .dash-grid-pop__seg-btn.is-active{
    background:var(--accent-bg);
    color:var(--accent-text);
    font-weight:500;
  }
  .dash-grid-pop__remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin-left:auto;
    padding:0;
    border:0;
    border-radius:var(--radius-md);
    background:transparent;
    color:var(--text-3);
    cursor:pointer;
  }
  .dash-grid-pop__remove:disabled{opacity:0.35;cursor:default}
  .dash-grid-pop__add{
    display:inline-flex;
    align-items:center;
    gap:4px;
    width:100%;
    justify-content:center;
    padding:4px 0;
    border:0;
    border-top:0.5px solid var(--border-default);
    background:transparent;
    color:var(--text-2);
    cursor:pointer;
  }
  .dash-grid-pop__cap{
    display:block;
    text-align:center;
    padding-top:4px;
    border-top:0.5px solid var(--border-default);
    color:var(--text-3);
  }
  /* View + Edit: immer genau 2 gleiche Spalten (halbe Breite). */
  .dash-custom-grid{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:var(--space-3);
  }
  .dash-custom-grid:not(.is-editing){
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
    align-items:stretch;
  }
  .dash-custom-grid:not(.is-editing) .dash-row,
  .dash-custom-grid:not(.is-editing) .dash-row__slots{
    display:contents;
  }
  .dash-custom-grid:not(.is-editing) .dash-slot--size-s,
  .dash-custom-grid:not(.is-editing) .dash-slot--size-m,
  .dash-custom-grid:not(.is-editing) .dash-slot--size-l,
  .dash-custom-grid:not(.is-editing) .dash-slot{
    grid-column:span 1;
    width:auto;
    max-width:none;
  }
  .dash-custom-grid:not(.is-editing) .dash-slot--stretch{
    grid-column:span 1;
  }
  .dash-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-2);
    margin:var(--space-2) 0;
    position:relative;
  }
  .dash-row.is-row-dragging{opacity:0.55}
  .dash-row__tools{
    display:none;
    align-items:center;
    gap:var(--space-2);
  }
  .dash-custom-grid.is-editing .dash-row__tools{display:flex}
  .dash-row__tools-label{
    color:var(--text-3);
    flex-shrink:0;
  }
  .dash-row__seg{
    display:inline-flex;
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--bg-2);
  }
  .dash-row__seg-btn{
    width:32px;
    height:28px;
    padding:0;
    border:0;
    border-right:0.5px solid var(--border-default);
    background:transparent;
    color:var(--text-2);
    font-size:var(--yama-text);
    font-weight:500;
    cursor:pointer;
  }
  .dash-row__seg-btn:last-child{border-right:0}
  .dash-row__seg-btn.is-active{
    background:var(--bg-1);
    color:var(--accent-text);
  }
  .dash-row__remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    margin-left:auto;
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-md);
    background:var(--bg-1);
    color:var(--text-3);
    cursor:pointer;
  }
  .dash-row__remove:disabled{opacity:0.35;cursor:default}
  .dash-row__chrome{
    display:none;
  }
  .dash-row__slots{
    flex:1 1 auto;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:var(--space-3);
    align-items:stretch;
    justify-content:start;
  }
  .dash-add-row{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    margin:var(--space-2) 0 0;
    padding:10px var(--space-3);
    border:1px dashed var(--border-default);
    border-radius:var(--radius-lg);
    background:transparent;
    color:var(--text-2);
    cursor:pointer;
  }
  .dash-add-row:disabled{opacity:0.4;cursor:default}
  .dash-add-row:not(:disabled):hover{
    border-color:var(--accent-base);
    color:var(--accent-text);
  }
  .dash-slot{
    position:relative;
    min-width:0;
    min-height:var(--dash-widget-sm);
    width:auto;
    max-width:100%;
  }
  .dash-slot--size-s{grid-column:span 3}
  .dash-slot--size-m{grid-column:span 4}
  .dash-slot--size-l{grid-column:span 6}
  .dash-slot--h-sm{min-height:var(--dash-widget-sm);height:var(--dash-widget-sm)}
  .dash-slot--h-lg{min-height:var(--dash-widget-lg);height:var(--dash-widget-lg)}
  .dash-slot--h-xl{min-height:var(--dash-widget-lg);height:var(--dash-widget-lg)}
  /* Desktop-Custom-Grid: eine Kartenhöhe (Standard) für alle Slots */
  .dash-custom-grid .dash-slot--h-sm,
  .dash-custom-grid .dash-slot--h-lg,
  .dash-custom-grid .dash-slot--h-xl{
    height:var(--dash-widget-lg);
    min-height:var(--dash-widget-lg);
  }
  /* Edit: Leiste zusätzlich — Inhalt bleibt Standardhöhe */
  .dash-custom-grid.is-editing .dash-slot--h-sm,
  .dash-custom-grid.is-editing .dash-slot--h-lg,
  .dash-custom-grid.is-editing .dash-slot--h-xl{
    height:calc(var(--dash-widget-lg) + 36px);
    min-height:calc(var(--dash-widget-lg) + 36px);
  }
  .dash-tile--h-sm,
  .dash-tile--h-lg,
  .dash-tile--h-xl{
    height:100%;
  }
  .dash-custom-grid.is-editing .dash-tile--h-sm .dash-tile__body,
  .dash-custom-grid.is-editing .dash-tile--h-lg .dash-tile__body,
  .dash-custom-grid.is-editing .dash-tile--h-xl .dash-tile__body{
    flex:0 0 var(--dash-widget-lg);
    height:var(--dash-widget-lg);
    max-height:var(--dash-widget-lg);
  }
  .dash-tile__body > .card,
  .dash-tile__body > .dash-widget{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden;
  }
  .dash-custom-grid #dash-week-host > .card,
  .dash-custom-grid #dash-form-host > .card,
  .dash-custom-grid #dash-preview-host > .card,
  .dash-custom-grid #dash-feed-host > .card,
  .dash-custom-grid #dash-next3-host > .card,
  .dash-custom-grid #dash-msg-host > .card,
  .dash-custom-grid #dash-quick-host > .card,
  .dash-custom-grid #dash-last-host > .card,
  .dash-custom-grid #dash-next-host > .card,
  .dash-custom-grid #dash-goals-host > .card{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
  }
  .dash-slot--empty .dash-slot__empty{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:inherit;
    height:100%;
    border:1px dashed transparent;
    border-radius:var(--radius-lg);
    color:var(--text-3);
    background:transparent;
    cursor:pointer;
    padding:0;
    font:inherit;
  }
  /* View mode: empty / contentless slots must not keep a blank grid row */
  .dash-custom-grid:not(.is-editing) .dash-slot--collapsed,
  .dash-custom-grid:not(.is-editing) .dash-slot--empty[hidden],
  .dash-custom-grid:not(.is-editing) .dash-row--collapsed{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
  }
  .dash-custom-grid:not(.is-editing) .dash-slot--stretch{
    grid-column:span 1;
  }
  .dash-slot__plus-label{
    color:var(--text-3);
  }
  .dash-custom-grid.is-editing .dash-slot--empty .dash-slot__empty{
    border-color:var(--border-default);
    background:color-mix(in srgb, var(--bg-2) 70%, transparent);
  }
  .dash-custom-grid.is-editing .dash-slot--empty .dash-slot__empty:hover{
    border-color:var(--accent-base);
    color:var(--accent-text);
  }
  .dash-custom-grid.is-editing .dash-slot.is-drop-target{
    outline:1.5px dashed color-mix(in srgb, var(--accent-base) 55%, transparent);
    outline-offset:2px;
    border-radius:var(--radius-lg);
  }
  .dash-custom-grid.is-editing .dash-slot.is-drop-hover{
    outline:2px solid var(--accent-base);
    outline-offset:2px;
    border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--accent-bg) 70%, transparent);
  }
  .dash-custom-grid.is-editing .dash-slot.is-drop-swap{
    outline:2px solid var(--accent-base);
    outline-offset:2px;
    border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--accent-bg) 70%, transparent);
  }
  .dash-custom-grid.is-editing .dash-slot.is-swap-dest{
    outline:2px dashed var(--accent-base);
    outline-offset:2px;
    border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--accent-bg) 45%, transparent);
  }
  .dash-custom-grid.is-editing .dash-slot.is-drop-invalid{
    outline:2px solid var(--danger-base);
    outline-offset:2px;
    border-radius:var(--radius-lg);
  }
  .dash-custom-grid.is-editing .dash-slot.is-drag-origin,
  .dash-hidden-bar__chip.is-drag-origin{
    opacity:0.4;
  }
  .dash-custom-grid.is-swap-anim .dash-tile{
    transition:opacity 150ms ease, transform 150ms ease;
  }
  .dash-swap-badge{
    position:absolute;
    top:8px;
    right:8px;
    z-index:4;
    padding:2px 8px;
    border-radius:var(--radius-pill);
    background:var(--accent-base);
    color:var(--neutral-900);
    font-size:var(--yama-micro);
    letter-spacing:0.06em;
    text-transform:uppercase;
    pointer-events:none;
    box-shadow:var(--shadow-1);
  }
  .dash-slot.is-swap-dest .dash-swap-badge{
    background:var(--bg-1);
    color:var(--accent-text);
    border:0.5px solid var(--accent-base);
  }
  .dash-drag-ghost{
    pointer-events:none !important;
    box-shadow:var(--shadow-3);
    border-radius:var(--radius-lg);
    background:var(--bg-1);
    cursor:grabbing;
  }
  .dash-drag-ghost.dash-hidden-bar__chip{
    border-radius:var(--radius-pill);
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border:0.5px solid var(--border-default);
    background:var(--bg-1);
    color:var(--neutral-800);
    font-size:var(--yama-text);
  }
  .dash-slot-picker{
    position:fixed;
    z-index:60;
    min-width:180px;
    max-width:240px;
    max-height:240px;
    overflow:auto;
    padding:var(--space-2);
    background:var(--bg-1);
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-3);
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .dash-slot-picker__item{
    display:block;
    width:100%;
    text-align:left;
    padding:8px 10px;
    border:0;
    border-radius:var(--radius-md);
    background:transparent;
    color:var(--neutral-800);
    font-size:var(--yama-text);
    cursor:pointer;
  }
  .dash-slot-picker__item:hover{
    background:var(--bg-2);
  }
  .dash-slot-picker__empty{
    color:var(--text-3);
    padding:6px;
  }
  .dash-row-insert{
    display:none;
    height:12px;
    margin:0;
    position:relative;
    z-index:2;
  }
  .dash-custom-grid.is-editing .dash-row-insert{display:block}
  .dash-custom-grid.is-editing .dash-row-insert.is-drop-capable .dash-row-insert__line{
    border-top-color:color-mix(in srgb, var(--accent-base) 45%, transparent);
  }
  .dash-row-insert__btn{
    display:block;
    width:100%;
    height:12px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    position:relative;
  }
  .dash-row-insert__line{
    position:absolute;
    left:40px;
    right:0;
    top:50%;
    height:0;
    border-top:1px dashed transparent;
    transform:translateY(-50%);
    transition:border-color 0.12s ease;
  }
  .dash-row-insert__plus{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:20px;
    height:20px;
    border-radius:var(--radius-pill);
    background:var(--bg-1);
    border:0.5px solid var(--border-default);
    color:var(--text-3);
    font-size:var(--yama-micro);
    line-height:18px;
    text-align:center;
    opacity:0;
    pointer-events:none;
  }
  .dash-row-insert:hover .dash-row-insert__line,
  .dash-row-insert.is-drop-capable:hover .dash-row-insert__line,
  .dash-row-insert.is-drop-hover .dash-row-insert__line{
    border-top-color:var(--accent-base);
  }
  .dash-row-insert:hover .dash-row-insert__plus,
  .dash-row-insert.is-drop-hover .dash-row-insert__plus{
    opacity:1;
    color:var(--accent-text);
    border-color:var(--accent-base);
  }
  .dash-row-insert.is-drop-hover .dash-row-insert__line{
    border-top-color:var(--success-base);
  }
  .dash-tile{
    position:relative;
    min-width:0;
    width:100%;
    max-width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    flex:0 0 auto;
  }
  .dash-tile__body{
    flex:1 1 auto;
    min-height:0;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  .dash-tile__body > .card,
  .dash-tile__body > .dash-widget{
    flex:1 1 auto;
    margin-bottom:0 !important;
    height:100%;
    width:100%;
    max-width:100%;
  }
  .dash-tile--h-sm .dash-tile__body > .card{
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .dash-tile--h-lg .dash-tile__body > .card{
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .dash-tile--h-xl .dash-tile__body > .card{
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .dash-custom-grid.is-editing .dash-tile{
    outline:1px solid color-mix(in srgb, var(--border-default) 80%, transparent);
    outline-offset:0;
    border-radius:var(--radius-lg);
    cursor:grab;
    touch-action:none;
    user-select:none;
    overflow:hidden;
  }
  .dash-custom-grid.is-editing .dash-tile__body{
    pointer-events:none;
    opacity:0.6;
  }
  /* Während Drag: Karteninhalt darf keine Pointer-Events schlucken */
  body.dash-dnd-active .dash-custom-grid .dash-tile__body,
  body.dash-dnd-active .dash-custom-grid .dash-slot__empty{
    pointer-events:none !important;
  }
  body.dash-dnd-active .dash-drag-ghost,
  body.dash-dnd-active .dash-dnd-hint{
    pointer-events:none !important;
  }
  .dash-tile__bar{
    display:none;
    flex:0 0 36px;
    height:36px;
    align-items:center;
    gap:6px;
    padding:0 8px;
    border-bottom:0.5px solid var(--border-default);
    background:var(--bg-1);
    position:relative;
    z-index:2;
  }
  .dash-custom-grid.is-editing .dash-tile__bar{display:flex}
  .dash-tile__handle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:28px;
    color:var(--text-3);
    flex-shrink:0;
  }
  .dash-tile__name{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-2);
  }
  .dash-tile__arrows{
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
  }
  .dash-tile__arrow,
  .dash-tile__hide{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border:0;
    border-radius:var(--radius-md);
    background:transparent;
    color:var(--text-3);
    cursor:pointer;
    padding:0;
  }
  .dash-tile__arrow:hover,
  .dash-tile__hide:hover{color:var(--text-2);background:var(--bg-2)}
  .dash-tile__arrow.is-disabled,
  .dash-tile__arrow:disabled{
    opacity:0.3;
    cursor:default;
    pointer-events:none;
  }
  .dash-tile__arrow.is-disabled:hover,
  .dash-tile__arrow:disabled:hover{
    color:var(--text-3);
    background:transparent;
  }
  .dash-tile.is-dragging{
    opacity:0.9;
    box-shadow:var(--shadow-3);
    z-index:40;
    pointer-events:none;
  }
  .dash-hidden-bar{
    display:none;
    margin:var(--space-3) 0 0;
    padding:var(--space-3);
    background:var(--bg-1);
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-1);
  }
  .dash-hidden-bar.is-visible,
  .dash-hidden-bar:not([hidden]){display:block}
  .dash-hidden-bar[hidden]{display:none !important}
  .dash-hidden-bar__label{
    margin:0 0 var(--space-2);
    color:var(--text-3);
  }
  .dash-hidden-bar__chips{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
  }
  .dash-hidden-bar__chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-pill);
    background:var(--bg-2);
    color:var(--neutral-800);
    font-size:var(--yama-text);
    cursor:grab;
    touch-action:none;
    user-select:none;
  }
  .dash-hidden-bar__empty{color:var(--text-3)}
  .dash-dnd-hint{
    position:fixed;
    z-index:50;
    display:none;
    padding:6px 10px;
    background:var(--bg-1);
    border:0.5px solid var(--border-default);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-3);
    color:var(--text-2);
    pointer-events:none;
    max-width:220px;
  }
  .dash-dnd-hint.is-visible{display:block}
  body.dash-dnd-active{user-select:none;cursor:grabbing}
}
@media (max-width:767px){
  .dash-edit-banner--desktop,
  .dash-custom-grid,
  .dash-widgets-toolbar--desktop,
  .dash-grid-pop,
  .dash-slot-picker,
  .dash-add-row{display:none !important}

  .dash-widgets-toolbar--mobile{display:flex}
  .dash-widgets-toolbar__customize{
    pointer-events:auto;
    cursor:pointer;
  }
  .dash-widgets-toolbar__customize.is-active{
    color:var(--neutral-800);
  }

  .dash-edit-banner--mobile,
  .dash-hidden-bar--mobile{display:none !important}

  .dash-mobile-layout{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    margin-bottom:var(--space-3);
  }
  .dash-mobile-zone__label{
    margin:0 0 6px;
    padding-inline:14px;
    color:var(--text-3);
  }

  .dash-mobile-stack{
    display:flex;
    flex-direction:column;
    gap:var(--dash-widget-gap, var(--space-3));
    padding-inline:14px;
  }
  .dash-mobile-stack__row{
    display:flex;
    gap:var(--dash-widget-gap, var(--space-3));
    align-items:stretch;
  }
  .dash-mobile-stack__row--full > .dash-mtile,
  .dash-mobile-stack__row--half > .dash-mtile,
  .dash-mobile-stack__row--solo > .dash-mtile{
    flex:1 1 100%;
    min-width:0;
    width:100%;
    max-width:100%;
  }

  .dash-mtile{
    position:relative;
    min-width:0;
    width:100%;
  }
  .dash-mtile__body{
    min-width:0;
    width:100%;
  }
  .dash-mtile__body > .card,
  .dash-mtile__body > .dash-widget{
    margin-bottom:0 !important;
    width:100%;
    max-width:100%;
  }
  .dash-mtile--h-sm .dash-mtile__body > .card{
    height:var(--dash-widget-sm) !important;
    min-height:var(--dash-widget-sm) !important;
    max-height:var(--dash-widget-sm);
  }
  .dash-mtile--h-lg .dash-mtile__body > .card{
    height:var(--dash-widget-lg) !important;
    min-height:var(--dash-widget-lg) !important;
    max-height:var(--dash-widget-lg);
  }
  .dash-swipe__slide > .dash-mtile{
    height:100%;
  }
  .dash-swipe__slide > .dash-mtile .dash-mtile__body > .card{
    height:var(--dash-widget-lg) !important;
    min-height:var(--dash-widget-lg) !important;
    max-height:var(--dash-widget-lg) !important;
  }
}

/* Customize modal — light mock layout (desktop centered / mobile sheet) */
.dash-cx-modal-overlay,
.dash-mob-modal-overlay{
  align-items:flex-end;
  padding:0;
  z-index:520;
}
.dash-cx-modal-overlay--desktop{
  align-items:center;
  justify-content:center;
  padding:24px;
}
.dash-cx-modal,
.dash-mob-modal{
  width:100%;
  max-width:100%;
  max-height:min(94dvh, 960px);
  margin:0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg-1);
  border:0.5px solid var(--border-default);
  box-shadow:var(--shadow-3);
}
.dash-cx-modal--desktop{
  width:min(640px, 100%);
  max-width:640px;
  max-height:min(90vh, 880px);
  border-radius:var(--radius-lg);
}
.dash-cx-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  flex-shrink:0;
  padding:var(--space-4) var(--space-4) var(--space-3);
}
.dash-cx-modal__head-main{min-width:0;flex:1}
.dash-cx-modal__head-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px;
}
.dash-cx-modal__head-icon{
  font-size:18px;
  line-height:1;
  color:var(--accent-text);
  flex-shrink:0;
}
.dash-cx-modal__head .yama-title{margin:0}
.dash-cx-modal__sub{
  margin:0;
  color:var(--text-3);
  line-height:1.4;
}
.dash-cx-modal__close{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin:-6px -6px 0 0;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
}
.dash-cx-modal__close:hover{background:var(--bg-2);color:var(--neutral-800)}
.dash-cx-modal__banner{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin:0 var(--space-4) var(--space-3);
  padding:10px 12px;
  border-radius:var(--radius-md);
  background:var(--accent-bg);
  color:var(--accent-text);
  border:0.5px solid var(--accent-soft, var(--accent-bg));
}
.dash-cx-modal__banner .ti{font-size:16px;line-height:1;flex-shrink:0}
.dash-cx-modal__body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 var(--space-4) var(--space-3);
}
.dash-cx-modal__rows{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.dash-cx-modal__row{margin:0;padding:0;border:0}
.dash-cx-modal__row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  margin:0 0 var(--space-2);
  flex-wrap:wrap;
}
.dash-cx-modal__row-title{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.dash-cx-modal__row-num{
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.04em;
}
.dash-cx-modal__row-name{
  margin:0;
  font-weight:500;
  color:var(--neutral-800);
}
.dash-cx-modal__row-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
}
.dash-cx-modal__cols-label{
  color:var(--text-3);
}
.dash-cx-modal__seg{
  display:inline-flex;
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg-2);
}
.dash-cx-modal__seg-btn{
  width:28px;
  height:26px;
  padding:0;
  border:0;
  border-right:0.5px solid var(--border-default);
  background:transparent;
  color:var(--text-2);
  font-size:var(--yama-micro);
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.dash-cx-modal__seg-btn:last-child{border-right:0}
.dash-cx-modal__seg-btn.is-active{
  background:var(--accent-base);
  color:var(--neutral-900);
  font-weight:500;
}
.dash-cx-modal__row-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
}
.dash-cx-modal--mobile-list{
  max-width:min(480px, 100%);
  max-height:min(92vh, 720px);
}
.dash-cx-modal__head--simple{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-3) var(--space-2);
  border-bottom:1px solid var(--border-default);
}
.dash-cx-modal__head--simple .yama-title{margin:0;flex:1;min-width:0}
.dash-cx-modal__head--simple #dash-cx-done{flex-shrink:0}
.dash-cx-done-btn{
  font-family:var(--font-body) !important;
  font-weight:500 !important;
  letter-spacing:0.01em !important;
  text-transform:none !important;
}
.dash-cx-mob__places{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.dash-cx-mob__place{
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--bg-1);
  overflow:hidden;
}
.dash-cx-mob__place.is-dragging{opacity:0.55}
.dash-cx-mob__place-title{
  display:flex;
  width:100%;
  margin:0;
  padding:10px var(--space-3);
  border:0;
  border-bottom:1px solid var(--border-default);
  background:transparent;
  color:var(--text-3);
  text-align:left;
  cursor:grab;
  font:inherit;
}
.dash-cx-mob__place-title:active{cursor:grabbing}
.dash-cx-mob__add-to-place,
.dash-cx-mob__new-place{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  margin:0;
  padding:10px var(--space-3);
  border:0;
  border-top:1px solid var(--border-default);
  background:transparent;
  color:var(--accent);
  font:inherit;
  cursor:pointer;
}
.dash-cx-mob__new-place{
  border:1px dashed var(--border-default);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-4);
}
.dash-cx-mob__add-to-place:disabled{
  color:var(--text-3);
  cursor:default;
  opacity:0.6;
}
.dash-cx-mob__meta--tap{
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font:inherit;
  padding:0;
  flex:1;
  min-width:0;
}
.dash-cx-place-pick{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:var(--space-3);
  background:color-mix(in srgb, var(--neutral-900) 35%, transparent);
}
.dash-cx-place-pick__card{
  width:100%;
  max-width:420px;
  max-height:70vh;
  overflow:auto;
  padding:var(--space-3);
  border-radius:var(--radius-lg);
  background:var(--bg-1);
  border:1px solid var(--border-default);
  box-shadow:var(--shadow-3);
}
.dash-cx-place-pick__list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:var(--space-2);
}
.dash-cx-place-pick__opt{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-1);
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.dash-cx-place-pick__opt:active{background:var(--bg-2)}
.dash-mobile-place{
  margin-bottom:var(--space-2);
}
.dash-mobile-place--card{
  padding-inline:14px;
}
.dash-cx-modal__foot--simple{
  display:flex;
  justify-content:center;
  padding:var(--space-2) var(--space-3) var(--space-3);
  border-top:1px solid var(--border-default);
}
.dash-cx-modal__reset-link{
  margin:0;
  padding:8px 12px;
  min-height:44px;
  border:0;
  background:transparent;
  color:var(--text-3);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.dash-cx-modal__reset-link:active{color:var(--neutral-800)}
.dash-cx-mob__section{margin:0 0 var(--space-4)}
.dash-cx-mob__section:last-child{margin-bottom:0}
.dash-cx-mob__section-title{
  margin:0 0 var(--space-2);
  color:var(--text-3);
}
.dash-cx-mob__list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.dash-cx-mob__empty{
  margin:0;
  padding:8px 0;
  color:var(--text-3);
}
.dash-cx-mob__row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:8px 0;
  border-top:1px solid var(--border-default);
  background:var(--bg-1);
  touch-action:none;
}
.dash-cx-mob__row:first-child{border-top:0}
.dash-cx-mob__row.is-dragging{
  position:relative;
  z-index:3;
  opacity:0.92;
  box-shadow:var(--shadow-3);
  border-radius:var(--radius-md);
}
.dash-cx-mob__pm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.dash-cx-mob__pm .ti{font-size:22px;line-height:1}
.dash-cx-mob__pm--minus{color:var(--danger-base, var(--danger-text))}
.dash-cx-mob__pm--plus{color:var(--accent)}
.dash-cx-mob__pm:active{background:var(--bg-2)}
.dash-cx-mob__meta{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.dash-cx-mob__icon{
  font-size:16px;
  color:var(--neutral-600);
  flex-shrink:0;
}
.dash-cx-mob__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-cx-mob__grip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-3);
  cursor:grab;
  flex-shrink:0;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.dash-cx-mob__grip .ti{font-size:18px;line-height:1}
.dash-cx-mob__grip:active{cursor:grabbing;background:var(--bg-2)}
.is-mob-list-dragging{cursor:grabbing}
.is-mob-list-dragging .dash-cx-mob__row--shown{user-select:none}

.dash-cx-modal__row-remove:hover{color:var(--danger-text, var(--neutral-800));background:var(--bg-2)}
.dash-cx-modal__row-remove:disabled{opacity:0.35;cursor:default}
.dash-cx-modal__slots{
  display:grid;
  gap:var(--space-2);
  grid-template-columns:repeat(var(--mob-slots, 3), minmax(0, 1fr));
}
.dash-cx-modal__slots[data-slots="2"]{--mob-slots:2}
.dash-cx-modal__slots[data-slots="3"]{--mob-slots:3}
.dash-cx-modal__slot{
  position:relative;
  min-height:72px;
  border-radius:var(--radius-md);
  border:0.5px solid var(--border-default);
  background:var(--bg-2);
  padding:var(--space-3);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  text-align:left;
  color:var(--neutral-800);
  cursor:pointer;
}
.dash-cx-modal__slot--empty{
  border-style:dashed;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--text-3);
  background:transparent;
  box-shadow:none;
}
.dash-cx-modal__slot--empty .ti{font-size:16px;line-height:1;opacity:0.7}
.dash-cx-modal__slot.is-pick,
.dash-hidden-bar__chip.is-pick{
  outline:2px solid var(--accent-base);
  outline-offset:1px;
}
.dash-cx-modal__slot.is-drag-origin,
.dash-hidden-bar__chip.is-drag-origin{
  opacity:0.45;
}
.dash-cx-modal__slot.is-drop-hover{
  outline:2px solid var(--accent-base);
  outline-offset:1px;
  background:var(--accent-bg, color-mix(in srgb, var(--accent-base) 12%, transparent));
}
.dash-cx-modal__slot.is-drop-invalid{
  outline:2px solid var(--danger-base, #c0392b);
  outline-offset:1px;
}
.dash-cx-modal__slot--fill[draggable="true"],
.dash-hidden-bar__chip[draggable="true"]{
  cursor:grab;
}
.dash-cx-modal__slot--fill[draggable="true"]:active,
.dash-hidden-bar__chip[draggable="true"]:active{
  cursor:grabbing;
}
.dash-cx-modal__slot-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin:0 0 4px;
  border-radius:var(--radius-md);
  background:var(--bg-1);
  color:var(--text-2);
}
.dash-cx-modal__slot-icon .ti{font-size:15px;line-height:1}
.dash-cx-modal__slot-label{
  margin:0;
  padding-right:22px;
  font-weight:500;
  color:var(--neutral-800);
}
.dash-cx-modal__slot-size{
  color:var(--text-3);
}
.dash-cx-modal__slot-hide{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  padding:0;
}
.dash-cx-modal__slot-hide:hover{background:var(--bg-2);color:var(--neutral-800)}
.dash-cx-modal__slot[data-span="2"]{grid-column:span 2}
.dash-cx-modal__add{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  margin-top:var(--space-3);
  padding:10px;
  border:0.5px dashed var(--border-default);
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-2);
  cursor:pointer;
}
.dash-cx-modal__cap{
  margin:var(--space-3) 0 0;
  text-align:center;
  color:var(--text-3);
}
.dash-cx-modal__hidden{
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:0.5px solid var(--border-default);
}
.dash-cx-modal__hidden .dash-hidden-bar__label{
  margin:0 0 var(--space-2);
  color:var(--text-3);
}
.dash-cx-modal__hidden .dash-hidden-bar__chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.dash-cx-modal__hidden .dash-hidden-bar__chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  color:var(--text-2);
  font:inherit;
  cursor:pointer;
}
.dash-cx-modal__hidden .dash-hidden-bar__empty{color:var(--text-3)}
.dash-cx-modal__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  flex-shrink:0;
  padding:var(--space-3) var(--space-4);
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top:0.5px solid var(--border-default);
  background:var(--bg-1);
}
.dash-cx-modal__reset{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dash-cx-modal__foot-right{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-left:auto;
}
.dash-cx-modal--desktop .dash-cx-modal__foot{
  padding-bottom:var(--space-4);
}

/* Widget-Raster: Mobile sm/lg/xl · Desktop (≥768) compact 160 / standard 240 */
.dash-widget{
  box-sizing:border-box;
  overflow:hidden;
}
.dash-widget--sm{
  height:var(--dash-widget-sm);
  min-height:var(--dash-widget-sm);
  max-height:var(--dash-widget-sm);
}
.dash-widget--lg{
  height:var(--dash-widget-lg);
  min-height:var(--dash-widget-lg);
  max-height:var(--dash-widget-lg);
}
.dash-widget--xl{
  height:var(--dash-widget-xl) !important;
  min-height:var(--dash-widget-xl) !important;
  max-height:var(--dash-widget-xl);
}
#dash-status-swipe .dash-swipe__slide > .card.dash-widget--lg,
#dash-status-swipe .dash-swipe__slide > .card{
  height:var(--dash-widget-lg) !important;
  min-height:var(--dash-widget-lg) !important;
  max-height:var(--dash-widget-lg) !important;
}
/* Feed/Nachrichten/Wetter im Status-Swipe — gleiche feste Höhe wie Konsistenz (lg). */
#dash-feed-host > .card.dash-widget--lg,
#dash-feed-host > .card.dash-w-feed,
#dash-msg-host > .card.dash-widget--lg,
#dash-msg-host > .card.dash-w-msg,
#dash-weather-host > .card.dash-widget--lg,
#dash-weather-host > .card.dash-w-wx,
#dash-consistency-host > .card.dash-widget--lg,
#dash-status-swipe #dash-feed-host > .card,
#dash-status-swipe #dash-msg-host > .card,
#dash-status-swipe #dash-weather-host > .card{
  height:var(--dash-widget-lg) !important;
  min-height:var(--dash-widget-lg) !important;
  max-height:var(--dash-widget-lg) !important;
  margin-bottom:0 !important;
  overflow:hidden;
}

/* ── Status-Widgets 236px: Bereitschaft + Form-Vorhersage ─────────────── */
.dash-w{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  padding:var(--space-4) !important;
  gap:10px;
}
.dash-w__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-shrink:0;
}
.dash-w__head-right{
  font-size:var(--yama-micro);
  color:var(--text-3);
  font-weight:400;
}
.dash-w-ready__hero{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-shrink:0;
  min-width:0;
}
.dash-w-ready__score{
  display:flex;
  align-items:baseline;
  gap:4px;
  flex-shrink:0;
}
.dash-w-ready__score-num{
  font-size:var(--yama-metric);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--accent-text);
}
.dash-w-ready__score-den{
  font-size:var(--yama-micro);
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.dash-w-ready__sick-ico{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:var(--radius-md);
  background:var(--danger-bg);
  color:var(--danger-text);
  display:flex;
  align-items:center;
  justify-content:center;
}
.dash-w-ready__sick-ico .ti{
  font-size:20px;
  line-height:1;
}
.dash-w-ready__verdict{
  min-width:0;
  flex:1;
}
.dash-w-ready__verdict-title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dash-w-ready__verdict-title--sick{
  color:var(--danger-text);
}
.dash-w-ready__verdict-sub{
  font-size:var(--yama-micro);
  color:var(--text-3);
  line-height:1.35;
  margin-top:3px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dash-w-ready__steps{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:56px;
}
.dash-w-ready__step-bar{
  display:flex;
  gap:3px;
  height:6px;
  width:56px;
}
.dash-w-ready__step-seg{
  flex:1;
  min-width:0;
  border-radius:var(--radius-pill);
  background:var(--bg-2);
}
.dash-w-ready__step-seg.is-on{
  background:var(--accent-base);
}
.dash-w-ready__step-lbl{
  font-size:var(--yama-micro);
  color:var(--text-3);
  line-height:1.2;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dash-w-ready__est{
  cursor:help;
  border-bottom:1px dotted var(--text-3);
}
.dash-w-ready__scale{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:var(--space-2);
}
.dash-w-ready__scale-lbls{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:4px;
  font-size:var(--yama-micro);
  color:var(--muted);
  line-height:1.2;
}
.dash-w-ready__scale-lbls span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-weight:400;
}
.dash-w-ready__scale-lbls span:nth-child(2),
.dash-w-ready__scale-lbls span:nth-child(3){
  text-align:center;
}
.dash-w-ready__scale-lbls span:nth-child(4){
  text-align:right;
}
.dash-w-ready__scale-lbls .is-active{
  color:var(--neutral-800);
  font-weight:500;
}
.dash-w-ready__scale-lbls .is-muted,
.dash-w-ready__scale-lbls .is-locked-lbl{
  color:var(--muted);
  font-weight:400;
}
.dash-w-ready__scale-lbls .is-locked-lbl .ti{
  font-size:10px;
  vertical-align:-1px;
  margin-right:2px;
  color:var(--muted);
}
.dash-w-ready__gauge{
  position:relative;
  height:14px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:3px;
  align-items:center;
}
.dash-w-ready__seg{
  height:6px;
  min-width:0;
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  position:relative;
}
.dash-w-ready__seg--pause{background:var(--danger-bg)}
.dash-w-ready__seg--reduce{background:var(--neutral-200)}
.dash-w-ready__seg--normal{background:color-mix(in srgb, var(--accent-base) 22%, var(--neutral-100))}
.dash-w-ready__seg--hard{background:color-mix(in srgb, var(--accent-base) 40%, var(--neutral-100))}
.dash-w-ready__seg.is-active.dash-w-ready__seg--pause{background:var(--danger-base)}
.dash-w-ready__seg.is-active.dash-w-ready__seg--reduce{background:var(--neutral-400)}
.dash-w-ready__seg.is-active.dash-w-ready__seg--normal,
.dash-w-ready__seg.is-active.dash-w-ready__seg--hard{background:var(--accent-base)}
.dash-w-ready__seg.is-muted{
  background:var(--bg-2) !important;
  opacity:0.85;
}
.dash-w-ready__seg.is-locked{
  background:
    repeating-linear-gradient(
      -45deg,
      var(--bg-2),
      var(--bg-2) 3px,
      color-mix(in srgb, var(--neutral-400) 35%, var(--bg-2)) 3px,
      color-mix(in srgb, var(--neutral-400) 35%, var(--bg-2)) 6px
    ) !important;
  opacity:1;
}
.dash-w-ready__lock{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  color:var(--text-3);
  line-height:1;
}
.dash-w-ready__thumb{
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  margin-left:-7px;
  border-radius:50%;
  background:var(--neutral-800);
  border:2px solid var(--bg-1);
  box-shadow:var(--shadow-1);
  transform:translateY(-50%);
  pointer-events:none;
  z-index:1;
}
.dash-w-ready__thumb::after{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--bg-1);
}
.dash-w-ready__factors{
  flex-shrink:0;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--border-default);
  min-width:0;
}
.dash-w-ready__factors-lbl{
  font-size:var(--yama-micro);
  color:var(--text-3);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:8px;
  line-height:1.2;
}
.dash-w-ready__factors-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px 12px;
  min-width:0;
}
.dash-w-ready__factor-arrow.is-up{color:var(--accent-text)}
.dash-w-ready__factor-arrow.is-down{color:var(--danger-text)}
.dash-w-ready__factor-arrow.is-flat{color:var(--text-3)}
.dash-w-ready__factor{
  min-width:0;
}
.dash-w-ready__factor-lbl{
  font-size:var(--yama-micro);
  color:var(--text-3);
  line-height:1.2;
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-w-ready__factor-val{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  min-width:0;
}
.dash-w-ready__factor-num{
  font-weight:500;
  color:inherit;
}
.dash-w-ready__factor-unit{
  font-size:var(--yama-micro);
  font-weight:400;
  color:var(--text-3);
  margin-left:1px;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.dash-w-ready__factor-arrow{
  font-size:11px;
  line-height:1;
  flex-shrink:0;
  margin-left:2px;
  align-self:center;
}
.dash-w-ready--sick .dash-w-ready__verdict-title{
  color:var(--danger-text);
}
.dash-w-ready--sick .dash-w-ready__factor-val{
  color:var(--danger-text);
}
.dash-w-ready--sick .dash-w-ready__factor-arrow.is-down,
.dash-w-ready--sick .dash-w-ready__factor-arrow.is-up{
  color:var(--danger-text);
}

.dash-w-fc__metrics{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-shrink:0;
}
.dash-w-fc__metric{min-width:0}
.dash-w-fc__metric-label{
  font-size:var(--yama-micro);
  color:var(--text-3);
  margin-bottom:2px;
}
.dash-w-fc__metric-value{
  font-size:var(--yama-metric);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--neutral-800);
}
.dash-w-fc__chart-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:80px;
  width:100%;
  padding-right:52px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.dash-w-fc__chart{
  width:100%;
  flex:1 1 auto;
  min-height:72px;
  display:block;
  overflow:visible;
}
.dash-w-fc__band-labels{
  position:absolute;
  top:0;
  right:0;
  bottom:18px;
  width:50px;
  pointer-events:none;
}
.dash-w-fc__band-lbl{
  position:absolute;
  right:0;
  transform:translateY(-50%);
  font-size:var(--yama-micro);
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  opacity:0.9;
  text-align:right;
  max-width:50px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-w-fc__flag{
  font-size:10px;
  font-family:var(--font-body);
  pointer-events:none;
}
.dash-w-fc__axis{
  position:relative;
  height:14px;
  margin-top:2px;
  flex-shrink:0;
  font-size:var(--yama-micro);
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.dash-w-fc__axis-start{
  position:absolute;
  left:0;
  top:0;
}
.dash-w-fc__axis-end{
  position:absolute;
  right:0;
  top:0;
}
.dash-w-fc__axis-today{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  white-space:nowrap;
}
.dash-w-fc__basis{
  flex:1;
  min-width:0;
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-fc__race{
  font-size:var(--yama-micro);
  font-weight:400;
  line-height:1.3;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  color:var(--text-2);
}
.dash-w-fc__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
  margin-top:auto;
  min-width:0;
}
.dash-w-fc__foot-right{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-shrink:0;
  min-width:0;
}
.dash-w-fc__ctl{
  flex-shrink:0;
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dash-w-fc__ctl--warn{
  color:var(--danger-text);
}
.dash-w-fc__plan-link{
  border:0;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Konsistenz 236 — 4 Wochen × 7 Tage */
.dash-w-cons{
  justify-content:space-between;
  gap:8px;
}
.dash-w-cons .dash-w-ready__hero{
  margin:0;
}
.dash-w-cons__weeks{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex:1 1 auto;
  min-height:36px;
  padding:0;
  margin-top:auto;
}
.dash-w-cons__week{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:0;
}
.dash-w-cons__days{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  height:28px;
  width:100%;
}
.dash-w-cons__day{
  flex:1;
  max-width:8px;
  height:24px;
  border-radius:var(--radius-pill);
  background:var(--neutral-200);
  box-sizing:border-box;
  position:relative;
}
.dash-w-cons__day--on{
  background:var(--accent-base);
  border:none;
}
.dash-w-cons__day--off{
  background:var(--neutral-200);
}
.dash-w-cons__day--sick{
  /* helles Krank-Rot wie Kalender (.cal-cell.sick-day) */
  background:var(--danger-bg);
  border:1px solid color-mix(in srgb, var(--danger-base) 40%, transparent);
}
.dash-w-cons__day--today{
  background:transparent;
  border:1.5px solid var(--neutral-500);
}
.dash-w-cons__day--today::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:3px;
  margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:var(--neutral-500);
}
.dash-w-cons__day--future{
  background:transparent;
  border:1px solid var(--neutral-300);
  opacity:1;
}
.dash-w-cons__legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  color:var(--text-3);
  flex-shrink:0;
}
.dash-w-cons__legend-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.dash-w-cons__legend-item .dash-w-cons__day{
  flex:none;
  width:6px;
  max-width:6px;
  height:12px;
}
.dash-w-cons__legend-item .dash-w-cons__day--today::after{
  width:2px;
  height:2px;
  margin:-1px 0 0 -1px;
}
.dash-w-cons__legend-note{
  margin-left:auto;
}
.dash-w-cons__bar-lbl{
  font-size:var(--yama-micro);
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
  color:var(--text-3);
}
.dash-w-cons__foot{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  margin-top:4px;
  flex-shrink:0;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.dash-w-cons__stat{
  min-width:0;
  padding:0 10px;
}
.dash-w-cons__stat:first-child{padding-left:0}
.dash-w-cons__stat:last-child{padding-right:0}
.dash-w-cons__stat + .dash-w-cons__stat{
  border-left:1px solid var(--border);
}
.dash-w-cons__stat-lbl{
  font-size:var(--yama-micro);
  color:var(--text-3);
  line-height:1.2;
}
.dash-w-cons__stat-val{
  font-size:var(--yama-label);
  font-weight:500;
  font-family:var(--font-body);
  color:var(--neutral-800);
  margin-top:3px;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-cons .dash-w-ready__score-num,
.dash-w-cons .dash-w-ready__score-den{
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
}
@media (min-width:900px){
  .dash-w-cons__stat-val{font-size:var(--yama-text)}
  .dash-w-cons__foot{margin-top:auto}
}

/* Wetter 236 — Open-Meteo */
.dash-w-wx{
  gap:0;
}
.dash-w-wx__place{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
  flex-shrink:0;
  color:var(--text-2);
}
.dash-w-wx .dash-w__head-right{
  color:var(--text-2);
}
.dash-w-wx__gear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-2);
  cursor:pointer;
  flex-shrink:0;
}
.dash-w-wx__gear:hover,
.dash-w-wx__gear:focus-visible{
  color:var(--neutral-800);
  background:var(--bg-2);
  outline:none;
}
.dash-w-wx__gear .ti{font-size:14px;line-height:1}
.dash-w-wx__hero{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-shrink:0;
  padding:2px 0 8px;
}
.dash-w-wx__icon{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  flex-shrink:0;
  line-height:0;
}
.dash-w-wx__icon .ti,
.dash-w-wx__icon .dash-w-wx__fog-svg{
  font-size:40px;
  width:40px;
  height:40px;
  line-height:1;
  color:inherit;
  display:block;
}
.dash-w-wx__tone--sun{ color:var(--wx-sun); }
.dash-w-wx__tone--moon{ color:var(--wx-moon); }
.dash-w-wx__tone--cloud{ color:var(--wx-cloud); }
.dash-w-wx__tone--rain{ color:var(--wx-rain); }
.dash-w-wx__tone--snow{ color:var(--wx-snow); }
.dash-w-wx__tone--storm{ color:var(--wx-storm); }
.dash-w-wx__tone--fog{ color:var(--wx-fog); }
.dash-w-wx__tone--wind{ color:var(--wx-wind); }
.dash-w-wx__temp{
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--neutral-800);
  flex-shrink:0;
}
.dash-w-wx__condline{
  min-width:0;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-wx__cond{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--text-2);
}
.dash-w-wx__feels{
  font-size:var(--yama-text);
  font-weight:400;
  color:var(--text-2);
}
.dash-w-wx__hours{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0;
  margin-top:auto;
  padding:8px 0;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.dash-w-wx__slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:0;
  padding:0 2px;
  text-align:center;
}
.dash-w-wx__slot + .dash-w-wx__slot{
  border-left:1px solid var(--border);
}
.dash-w-wx__slot-time{
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.dash-w-wx__slot-icon{
  font-size:16px;
  line-height:1;
}
.dash-w-wx__slot-icon .dash-w-wx__fog-svg,
.dash-w-wx__fog-svg{
  width:1em;
  height:1em;
  display:block;
}
.dash-w-wx__slot-icon:not([class*="dash-w-wx__tone--"]){
  color:var(--wx-cloud);
}
.dash-w-wx__slot-temp{
  font-size:var(--yama-label);
  font-weight:500;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.dash-w-wx__slot-rain{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  font-size:var(--yama-micro);
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  min-height:14px;
}
.dash-w-wx__slot-rain .ti{
  font-size:10px;
  color:var(--text-2);
}
.dash-w-wx__slot-rain--empty{
  visibility:hidden;
}
.dash-w-wx__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding-top:8px;
  border-top:1px solid var(--border);
  flex-shrink:0;
  min-width:0;
  font-size:var(--yama-micro);
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.dash-w-wx__foot-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-w-wx__wind-arrow{
  font-size:12px;
  line-height:1;
  color:var(--text-2);
  display:inline-block;
  transform-origin:center center;
}
.dash-w-wx__sunset{
  font-size:14px;
  line-height:1;
  color:var(--text-2);
}
.dash-w-wx__foot-range{
  flex-shrink:0;
}
.dash-w-wx__tip{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--border);
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.35;
  flex-shrink:0;
  min-width:0;
}
.dash-w-wx__tip .ti{
  font-size:12px;
  flex-shrink:0;
  margin-top:1px;
  color:var(--text-2);
}
.dash-w-wx__days{
  display:flex;
  flex-direction:column;
  margin-top:var(--space-3);
  border-top:1px solid var(--border);
  min-height:0;
}
.dash-w-wx__day{
  display:grid;
  grid-template-columns:4.8rem 20px minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--space-2);
  min-height:32px;
  font-size:var(--yama-text);
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.dash-w-wx__day + .dash-w-wx__day{border-top:1px solid var(--border);}
.dash-w-wx__wd{color:var(--text);font-weight:500;}
.dash-w-wx__temps{color:var(--text);white-space:nowrap;}
.dash-w-wx__rain{color:var(--text-2);white-space:nowrap;}
.dash-w-wx__dico{font-size:16px;line-height:1;}
.dash-w-wx__sport{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dash-w-wx__sport svg{width:14px;height:14px;display:block;}
.dash-w-wx__empty{
  flex:1;
  display:flex;
  align-items:center;
  color:var(--text-2);
  padding:8px 0;
}
.dash-w-wx-modal{
  max-width:400px;
  padding:var(--space-4);
}
.dash-w-wx-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.dash-w-wx-modal__head .yama-title{margin:0}
.dash-w-wx-modal__hint{
  margin:0 0 12px;
  color:var(--text-3);
}
.dash-w-wx-modal__search{
  display:flex;
  align-items:center;
  gap:6px;
}
.dash-w-wx-modal__input{
  flex:1;
  min-width:0;
  height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-2);
  color:var(--neutral-800);
  font-size:var(--yama-text);
  font-family:inherit;
}
.dash-w-wx-modal__input:focus{
  outline:none;
  border-color:var(--accent-base);
}
.dash-w-wx-modal__results{
  margin-top:10px;
  max-height:220px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dash-w-wx-modal__hit{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--neutral-800);
  cursor:pointer;
  font-family:inherit;
}
.dash-w-wx-modal__hit:hover,
.dash-w-wx-modal__hit:focus-visible{
  background:var(--bg-2);
  outline:none;
}
.dash-w-wx-modal__empty{
  padding:8px 4px;
  color:var(--text-3);
}
.dash-w-wx-modal__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* Session-Widgets — Standardhöhe (lg) */
#dash-session-swipe .dash-swipe__slide > .card,
#dash-session-swipe .dash-swipe__slide > .card.dash-widget--sm,
#dash-session-swipe .dash-swipe__slide > .card.dash-widget--lg{
  height:var(--dash-widget-lg) !important;
  min-height:var(--dash-widget-lg) !important;
  max-height:var(--dash-widget-lg);
}
.dash-w-sm{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  padding:var(--space-3) var(--space-4) !important;
  gap:8px;
  box-sizing:border-box;
  overflow:hidden;
}
.dash-w-last__body,
.dash-w-next__body,
.dash-w-goal__body{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  flex:0 0 auto;
  margin-top:0;
}
.dash-w-sm__metrics{
  display:flex;
  gap:14px;
  flex-shrink:0;
  margin-top:0;
}
.dash-w-sm__row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.dash-w-sm__icon{
  width:36px;
  height:36px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--accent-bg);
  color:var(--accent-text);
}
.dash-w-sm__icon[data-sport="bike"]{
  background:color-mix(in srgb, #185FA5 14%, transparent);
  color:#185FA5;
}
.dash-w-sm__icon[data-sport="swim"]{
  background:color-mix(in srgb, #0F6E56 14%, transparent);
  color:#0F6E56;
}
.dash-w-sm__icon[data-sport="run"]{
  background:var(--accent-bg);
  color:var(--accent-text);
}
.dash-w-sm__icon[data-tone="race"]{
  background:color-mix(in srgb, var(--warning-base) 16%, transparent);
  color:var(--warning-text);
}
.dash-w-sm__icon .ti{font-size:18px;line-height:1}
.dash-w-sm__main{flex:1;min-width:0}
.dash-w-sm__title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-sm__sub{
  font-size:var(--yama-micro);
  color:var(--text-3);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-sm__metric{
  text-align:right;
  flex-shrink:0;
}
.dash-w-sm__metric-val{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.dash-w-sm__metric-val--accent{color:var(--accent-text)}
.dash-w-sm__metric-lbl{
  font-size:var(--yama-micro);
  color:var(--text-3);
  margin-top:2px;
}
.dash-w-sm__bar{
  height:6px;
  margin-top:6px;
  background:var(--bg-2);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.dash-w-sm__bar-fill{
  height:100%;
  background:var(--accent-base);
  border-radius:var(--radius-pill);
}


.dash-w-last{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  gap:0 !important;
  justify-content:flex-start;
  border-color:var(--border-default) !important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  box-sizing:border-box;
}
.dash-w-last:hover{
  border-color:var(--border-strong) !important;
}
.dash-w-last:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
  border-color:var(--accent-base) !important;
}
.dash-w-last--empty{
  cursor:default;
}
.dash-w-last__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-shrink:0;
  margin-bottom:8px;
}
.dash-w-last__eyebrow{
  margin:0;
}
.dash-w-last__date{
  color:var(--text-3);
  flex-shrink:0;
}
.dash-w-last__title-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  flex-shrink:0;
  margin-bottom:10px;
}
.dash-w-last__sport{
  width:36px;
  height:36px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, currentColor 12%, transparent);
  color:var(--accent-strong);
}
.dash-w-last__sport .ti,
.dash-w-last__sport svg{font-size:20px;width:20px;height:20px;line-height:1}
.dash-w-last__sport[data-sport="bike"]{color:#185FA5}
.dash-w-last__sport[data-sport="swim"]{color:#0F6E56}
.dash-w-last__sport[data-sport="run"]{color:var(--accent-strong)}
.dash-w-last__sport[data-sport="strength"]{color:#854F0B}
.dash-w-last__sport[data-sport="other"],
.dash-w-last__sport--empty{
  color:var(--text-3);
  background:var(--bg-2);
}
[data-theme="dark"] .dash-w-last__sport[data-sport="bike"]{color:#6FA5D9}
[data-theme="dark"] .dash-w-last__sport[data-sport="swim"]{color:#5ECDB2}
[data-theme="dark"] .dash-w-last__sport[data-sport="run"]{color:var(--accent-base)}
[data-theme="dark"] .dash-w-last__sport[data-sport="strength"]{color:#D4A356}
.dash-w-last__title-wrap{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dash-w-last__title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
  line-height:1.25;
}
.dash-w-last__sub{
  color:var(--text-3);
  line-height:1.3;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  display:block;
}
.dash-w-last__chip{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  align-self:flex-start;
  margin-top:2px;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  font-size:var(--yama-micro);
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
  background:var(--bg-2);
  color:var(--text-2);
}
.dash-w-last__chip--ok{
  background:var(--accent-bg);
  color:var(--accent-text);
}
.dash-w-last__chip--over{
  background:var(--warning-bg);
  color:var(--warning-text);
}
.dash-w-last__chip--under{
  background:var(--bg-2);
  color:var(--text-2);
}
.dash-w-last__metrics{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:6px 10px;
  min-width:0;
  flex:0 0 auto;
  margin-top:12px;
  width:100%;
}
/* Ohne Fuß: Kennzahlen nah unter Titel, kein leeres Mittelfeld */
.dash-w-last--sparse{
  justify-content:flex-start;
}
.dash-w-last--sparse .dash-w-last__metrics{
  margin-top:14px;
  margin-bottom:0;
}
.dash-w-last--sparse .dash-w-last__title-row{
  margin-bottom:0;
}
.dash-w-last__m{
  min-width:0;
  flex:1 1 0;
}
.dash-w-last__m:first-child .dash-w-last__m-val{
  font-size:calc(var(--yama-title) + 2px);
}
.dash-w-last__m-val{
  font-family:var(--font-body);
  font-size:var(--yama-title);
  font-weight:500;
  color:var(--neutral-800);
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  white-space:nowrap;
  overflow:visible;
}
.dash-w-last__m-unit{
  font-size:var(--yama-micro);
  font-weight:400;
  color:var(--text-3);
  margin-left:2px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dash-w-last__m-lbl{
  font-size:var(--yama-micro);
  color:var(--text-3);
  line-height:1.2;
  margin-top:3px;
}
.dash-w-last__foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  min-width:0;
  min-height:0;
  flex:0 1 auto;
  overflow:hidden;
  padding-top:8px;
}
.dash-w-last__plan{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.dash-w-last__plan-bar{
  width:100%;
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  overflow:hidden;
}
.dash-w-last__plan-fill{
  display:block;
  height:100%;
  border-radius:var(--radius-pill);
  background:var(--accent-base);
}
.dash-w-last__plan-txt{
  color:var(--text-3);
}
.dash-w-last__compare{
  color:var(--text-2);
  line-height:1.35;
  margin:0;
  min-width:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.dash-w-last__cmp{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  width:100%;
}
.dash-w-last__cmp-title{
  margin:0;
  color:var(--text-3);
}
.dash-w-last__cmp-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.dash-w-last__cmp-track{
  position:relative;
  flex:1 1 auto;
  height:14px;
  min-width:0;
}
.dash-w-last__cmp-rail{
  position:absolute;
  left:0;right:0;
  top:50%;
  height:4px;
  margin-top:-2px;
  border-radius:var(--radius-pill);
  background:var(--bg-2);
}
.dash-w-last__cmp-avg-line{
  position:absolute;
  top:1px;
  bottom:1px;
  width:2px;
  margin-left:-1px;
  background:var(--neutral-500);
  border-radius:1px;
}
.dash-w-last__cmp-own{
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--neutral-800);
  border:2px solid var(--bg-1);
}
.dash-w-last__cmp-avg-val{
  flex-shrink:0;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  min-width:2.4em;
  text-align:right;
}
.dash-w-last__cmp-delta{
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.dash-w-last__zones{
  width:100%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:hidden;
}
.dash-w-last__zones-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.dash-w-last__zones-label{
  margin:0;
  color:var(--text-3);
}
.dash-w-last__zones-dom{
  color:var(--neutral-800);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.dash-w-last__zonebar{
  display:flex;
  width:100%;
  height:8px;
  border-radius:var(--radius-pill);
  overflow:hidden;
  background:transparent;
  gap:2px;
}
.dash-w-last__zonebar-seg{
  min-width:0;
  height:100%;
  border-radius:1px;
}
.dash-w-last__zonebar-seg:first-child{border-radius:var(--radius-pill) 1px 1px var(--radius-pill)}
.dash-w-last__zonebar-seg:last-child{border-radius:1px var(--radius-pill) var(--radius-pill) 1px}
.dash-w-last__zonebar-seg:only-child{border-radius:var(--radius-pill)}
.dash-w-last__zoneleg{
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  gap:0;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  line-height:1.25;
  margin-top:0;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.dash-w-last__zoneleg-item{
  font-weight:500;
  white-space:nowrap;
}
.dash-w-last__zoneleg-sep{
  color:var(--text-3);
  font-weight:400;
  margin:0 1px;
}
.dash-w-last__exercises{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.dash-w-last__ex-row{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
  overflow:hidden;
}
.dash-w-last__ex{
  display:inline-flex;
  align-items:center;
  flex-shrink:1;
  min-width:0;
  max-width:38%;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  border:0.5px solid var(--border-default);
  background:var(--bg-1);
  color:var(--neutral-800);
  font-size:var(--yama-micro);
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-w-last__ex--more{
  flex-shrink:0;
  max-width:none;
  color:var(--text-2);
  background:var(--bg-2);
}
.dash-w-last__empty-body{
  color:var(--text-2);
  line-height:1.45;
  margin-top:8px;
  flex:1 1 auto;
}
.dash-w-last__add{
  display:inline-flex;
  align-self:flex-start;
  margin-top:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent-text);
  font:inherit;
  font-weight:500;
  cursor:pointer;
  text-align:left;
}
.dash-w-last__add:hover{
  color:var(--accent-strong);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media (min-width:768px){
  .dash-w-last__metrics{
    gap:12px 18px;
  }
  .dash-w-last__m-val{
    font-size:var(--yama-title);
  }
}

.dash-w-race__body{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  flex:1;
}
.dash-w-race__main{
  min-width:0;
  flex:1;
}
.dash-w-race__count{
  text-align:right;
  flex-shrink:0;
}
.dash-w-race .dash-w-sm__title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


.dash-w__head-link{
  border:0;
  background:transparent;
  padding:0;
  font-size:var(--yama-micro);
  color:var(--accent-text);
  font-weight:500;
  cursor:pointer;
}
.dash-w-feed.dash-w{
  gap:8px;
  --dash-feed-row-h:60px; /* Avatar 40 + Padding 10+10 */
}
.dash-w-feed__head-left{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.dash-w-feed__sep{
  display:none;
  color:var(--text-3);
  font-size:var(--yama-micro);
  font-weight:400;
  flex-shrink:0;
}
.dash-w-feed__sub{
  font-size:var(--yama-micro);
  color:var(--text-3);
  line-height:1.2;
  padding-left:calc(14px + 6px); /* Icon + Abstand wie Label — Mobil */
}
/* Web: Untertitel in der Titelzeile → eine Kopfzeile, 3 Einträge */
@media (min-width:768px){
  .dash-w-feed.dash-w{
    --dash-feed-row-h:54px;
    gap:6px;
  }
  .dash-w-feed__head-left{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    gap:0 4px;
  }
  .dash-w-feed__sep{display:inline}
  .dash-w-feed__sub{
    padding-left:0;
    font-weight:400;
  }
  .dash-w-feed__row{
    min-height:var(--dash-feed-row-h);
    padding:7px 0;
  }
}
.dash-w-feed__list{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1;
  overflow:hidden;
  gap:0;
  justify-content:flex-start;
}
/* Ein Layout Web+Mobil: Avatar | Name+Zeit / Sport·Dauer | Reacts */
.dash-w-feed__row{
  display:grid;
  grid-template-columns:40px minmax(0, 1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  row-gap:2px;
  min-width:0;
  min-height:var(--dash-feed-row-h);
  padding:10px 0;
  flex:0 0 auto;
  border-radius:0;
  box-sizing:border-box;
}
.dash-w-feed__row:not(:last-child){
  border-bottom:0.5px solid var(--border-strong);
}
.dash-w-feed__av{
  width:40px;
  height:40px;
  flex-shrink:0;
  line-height:0;
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
}
.dash-w-feed__av .feed-avatar{
  width:40px !important;
  height:40px !important;
  border-radius:var(--yama-avatar-radius,28%);
  object-fit:cover;
}
.dash-w-feed__main{display:contents}
.dash-w-feed__who{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  width:auto;
  grid-column:2;
  grid-row:1;
}
.dash-w-feed__name{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex:1 1 auto;
}
.dash-w-feed__who-sep{display:none}
.dash-w-feed__when{
  font-size:var(--yama-micro);
  color:var(--text-3);
  flex:0 0 auto;
  margin-left:auto;
  white-space:nowrap;
}
.dash-w-feed__line2-main{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  margin-top:0;
  grid-column:2;
  grid-row:2;
}
.dash-w-feed__sport-inline{
  display:inline-flex;
  width:14px;
  height:14px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.dash-w-feed__sport-inline .ti,
.dash-w-feed__sport-inline svg{
  width:14px;
  height:14px;
  font-size:14px;
}
.dash-w-feed__sport-line{
  display:inline;
  font-size:var(--yama-label);
  font-weight:400;
  color:var(--text-3);
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex:1 1 auto;
  font-variant-numeric:tabular-nums;
}
/* Alte Web-Spalten entfernt — DOM-Reste ausblenden */
.dash-w-feed__title,
.dash-w-feed__metrics,
.dash-w-feed__sport{display:none !important}
.dash-w-feed__reacts{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  flex-shrink:0;
  min-width:0;
  width:auto;
  grid-column:3;
  grid-row:1 / span 2;
  align-self:center;
}
.dash-w-feed__react{
  display:inline-flex;
  align-items:center;
  gap:2px;
  border:0;
  background:transparent;
  padding:4px 2px;
  margin:0;
  border-radius:var(--radius-md);
  font:inherit;
  font-size:var(--yama-micro);
  font-variant-numeric:tabular-nums;
  color:var(--text-2);
  cursor:pointer;
  line-height:1;
  min-width:0;
}
.dash-w-feed__react .ti{font-size:14px;line-height:1;flex-shrink:0}
.dash-w-feed__react:hover{color:var(--neutral-800);background:var(--bg-2)}
.dash-w-feed__react.is-liked{color:var(--accent-text)}
.dash-w-feed__react.is-liked:hover{color:var(--accent-text)}
.dash-w-feed__react [data-like-count],
.dash-w-feed__react [data-comment-count]{
  display:inline-block !important;
  min-width:2ch;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.dash-w-feed__react [data-like-count][hidden],
.dash-w-feed__react [data-comment-count][hidden]{
  visibility:hidden;
}
.dash-w-feed__empty{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:var(--space-2);
  min-height:0;
}
.dash-w-feed__find{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  cursor:pointer;
}

.dash-w-next__cal-btn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:inherit;
  color:inherit;
}
.dash-w-next{
  gap:8px !important;
  justify-content:flex-start;
}
.dash-w-next__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  flex-shrink:0;
}
.dash-w-next__main{min-width:0;flex:1}
.dash-w-next__title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.25;
}
.dash-w-next__presc{
  margin-top:2px;
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dash-w-next__side{
  text-align:right;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.dash-w-next__dur{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.2;
}
.dash-w-next__dist{
  margin-top:1px;
  font-size:var(--yama-micro);
  color:var(--text-3);
}
.dash-w-next__profile{
  flex-shrink:0;
  min-width:0;
  margin-top:4px;
}
.dash-w-next__profile > div{
  height:60px !important;
  margin-top:0 !important;
}
.dash-w-next__empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
}
.dash-w-next__link{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  cursor:pointer;
}


/* Nächste 3 Tage (lg) — Kacheln + Detail; alles in --dash-widget-lg, kein Clip */
.dash-w-n3{
  overflow:hidden;
  gap:4px !important;
  padding:var(--space-3) !important;
}
.dash-w-n3--all-free{
  justify-content:flex-start;
}
.dash-w-n3--all-free .dash-w-n3__detail-host{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  min-height:0;
}
.dash-w-n3__chips{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-bottom:0;
  flex-shrink:0;
}
.dash-w-n3__chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:4px 6px;
  border:1.5px solid transparent;
  border-radius:var(--radius-md);
  background:var(--bg-2);
  color:var(--neutral-800);
  cursor:pointer;
  text-align:left;
  font:inherit;
  min-width:0;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
.dash-w-n3__chip:focus{outline:none}
.dash-w-n3__chip:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
}
/* Auswahl ≠ Status: aktiv = weißer Grund + dunkler Rahmen */
.dash-w-n3__chip.is-active{
  background:var(--bg-1);
  border-color:var(--neutral-800);
  color:var(--neutral-800);
}
.dash-w-n3__detail-host{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  margin-top:4px;
  overflow:hidden;
}
.dash-w-n3__chip-day{
  font-size:var(--yama-text);
  font-weight:500;
  line-height:1.2;
  color:var(--neutral-800);
}
.dash-w-n3__chip-status,
.dash-w-n3__chip-session,
.dash-w-n3__chip-dur{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:var(--yama-micro);
  line-height:1.3;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.dash-w-n3__chip-dur{
  color:var(--text-3);
}
/* Dauer / frei / Session-Meta: immer grau — auch bei ausgewählter Kachel */
.dash-w-n3__chip.is-active .dash-w-n3__chip-dur,
.dash-w-n3__chip.is-active .dash-w-n3__chip-session,
.dash-w-n3__chip.is-active .dash-w-n3__chip-status:not(.dash-w-n3__chip-status--sick){
  color:var(--text-3);
}
.dash-w-n3__chip.is-active .dash-w-n3__chip-sport[data-sport="bike"]{color:#185FA5}
.dash-w-n3__chip.is-active .dash-w-n3__chip-sport[data-sport="run"]{color:var(--accent-strong)}
.dash-w-n3__chip.is-active .dash-w-n3__chip-sport[data-sport="swim"]{color:#0F6E56}
.dash-w-n3__chip.is-active .dash-w-n3__chip-sport[data-sport="strength"]{color:#854F0B}
.dash-w-n3__chip-status--sick{
  color:var(--danger-text);
}
.dash-w-n3__chip-status--sick .ti{
  font-size:11px;
  color:var(--danger-text);
  flex-shrink:0;
}
.dash-w-n3__chip-status--done .ti{
  font-size:12px;
  color:var(--accent-text);
  flex-shrink:0;
}
.dash-w-n3__chip-warn{
  color:var(--warning-text);
  font-size:11px;
  line-height:1;
  flex-shrink:0;
}
.dash-w-n3__chip-sport{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
  color:var(--text-3);
}
.dash-w-n3__chip-sport[data-sport="run"]{color:var(--accent-strong)}
.dash-w-n3__chip-sport[data-sport="bike"]{color:#185FA5}
.dash-w-n3__chip-sport[data-sport="swim"]{color:#0F6E56}
.dash-w-n3__chip-sport[data-sport="strength"]{color:#854F0B}
.dash-w-n3__chip-sport .ti{font-size:12px}
.dash-w-n3__detail{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
  min-height:0;
  padding:6px 8px;
  border:none;
  box-shadow:none;
  background:var(--bg-2);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.dash-w-n3__detail--sick{
  background:var(--bg-2);
  color:var(--neutral-800);
}
.dash-w-n3__sick-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}
.dash-w-n3__sick-ico{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:var(--radius-md);
  background:var(--danger-bg);
  color:var(--danger-text);
  display:flex;
  align-items:center;
  justify-content:center;
}
.dash-w-n3__sick-ico .ti{font-size:18px;line-height:1}
.dash-w-n3__sick-body{min-width:0;flex:1}
.dash-w-n3__sick-title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.3;
}
.dash-w-n3__sick-txt{
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.4;
  margin-top:4px;
}
/* Frei: eine zentrierte Zeile, keine große graue Fläche */
.dash-w-n3__detail--free,
.dash-w-n3__detail--all-free{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0;
  flex:0 0 auto;
  min-height:0;
  padding:8px 4px;
  background:transparent;
  box-shadow:none;
}
.dash-w-n3__free-line{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
}
.dash-w-n3__free-title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--text-3);
}
.dash-w-n3__rows{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.dash-w-n3__row{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.dash-w-n3__row + .dash-w-n3__row{
  border-top:1px solid var(--border-default);
  padding-top:8px;
}
.dash-w-n3__row-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  flex:0 0 auto;
}
.dash-w-n3__row-titleline{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:1;
}
.dash-w-n3__row-titleblock{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:1;
}
.dash-w-n3__done-check{
  color:var(--accent-text);
  flex-shrink:0;
  display:inline-flex;
  line-height:1;
}
.dash-w-n3__done-check .ti{font-size:16px}
.dash-w-n3__row-title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.25;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-n3__row-meta{
  flex-shrink:0;
  text-align:right;
  font-size:var(--yama-micro);
  font-weight:400;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  line-height:1.3;
}
/* Profil: füllt Platz zwischen Kopfzeile und Buttons; Balken unten auf Grundlinie */
.dash-w-n3__profile{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:flex-start;
  gap:2px;
  flex:1 1 0;
  min-height:0;
  width:100%;
  margin-top:6px;
  margin-bottom:0;
  min-width:0;
  padding:0;
  border-bottom:0.5px solid var(--border-default);
  box-sizing:border-box;
  overflow:hidden;
}
/* Slot = volle Profilhöhe; Balken darin mit height:% der Zone, unten bündig */
.dash-w-n3__bar-slot{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-self:stretch;
  height:100%;
  min-width:3px;
  min-height:0;
  flex-shrink:1;
}
.dash-w-n3__bar{
  width:100%;
  min-width:0;
  /* Oben rund, unten bündig auf der Grundlinie — kein Spalt darunter */
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  position:relative;
  margin:0;
  flex-shrink:0;
}
.dash-w-n3__bar--ramp{
  height:100%;
  flex:1 1 auto;
}
.dash-w-n3__bar--goal{
  /* Drill/Technik bei gleicher Zone: dunklerer Ton + Schraffur vs. Pause */
  background-image:repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 2px,
    color-mix(in srgb, var(--neutral-900) 28%, transparent) 2px,
    color-mix(in srgb, var(--neutral-900) 28%, transparent) 3.5px
  );
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--neutral-900) 18%, transparent);
}
.dash-w-n3__bar-ramp{
  position:absolute;
  inset:0;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
/* Erledigt: Zonenbalken/Kennzahlen unter der Kopfzeile, kein Profil-Stretch */
.dash-w-n3__row--done{
  flex:0 0 auto;
}
.dash-w-n3__row--done .dash-w-n3__zones{
  margin-top:8px;
  flex:0 0 auto;
}
.dash-w-n3__metrics{
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
  min-width:0;
  margin-top:8px;
}
.dash-w-n3__metrics--lg .dash-w-n3__m-val{
  font-size:var(--yama-metric);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  color:var(--neutral-800);
}
.dash-w-n3__m-unit{
  margin-left:3px;
  color:var(--text-3);
  font-weight:400;
}
.dash-w-n3__m-lbl{
  margin-top:2px;
  color:var(--text-3);
}
/* Legacy-Beschreibung (nicht mehr gerendert) */
.dash-w-n3__row-presc{
  display:none !important;
}
.dash-w-n3__rtp-fit,
.dash-w-n3__rtp-warn{
  flex-shrink:0;
  font-size:var(--yama-micro);
  line-height:1.2;
  white-space:nowrap;
}
.dash-w-n3__rtp-fit{
  color:var(--text-3);
}
.dash-w-n3__rtp-warn{
  color:var(--warning-text);
}
.dash-w-n3__row--tap{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:6px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dash-w-n3__row--tap:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
  border-radius:var(--radius-md);
}
.dash-w-n3__row-main{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.dash-w-n3__chev{
  flex:0 0 auto;
  align-self:center;
  color:var(--text-3);
  font-size:18px;
  line-height:1;
  font-weight:400;
  padding:0 2px 0 0;
}
.dash-w-n3__actions{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  margin-top:6px;
  padding-top:0;
}
.dash-w-n3__action{
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  padding:5px 10px;
  background:var(--bg-1);
  color:var(--neutral-800);
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  cursor:pointer;
  line-height:1.2;
  white-space:nowrap;
}
/* Primär = App-Primary (schwarz), nicht Accent-Grün */
.dash-w-n3__action--primary{
  border-color:var(--btn-primary-bg);
  background:var(--btn-primary-bg);
  color:var(--btn-primary-fg);
}
.dash-w-n3__action--primary:hover{
  border-color:var(--btn-primary-hover);
  background:var(--btn-primary-hover);
  color:var(--btn-primary-fg);
}
.dash-w-n3__action--secondary{
  border-color:var(--border-default);
  background:var(--bg-1);
  color:var(--neutral-800);
}
.dash-w-n3__action--link{
  border:0;
  background:transparent;
  color:var(--accent-text);
  padding:4px 0;
  text-decoration:underline;
  text-underline-offset:2px;
}
.dash-w-n3__row--done .dash-w-n3__actions{
  justify-content:flex-start;
}
@media (min-width:768px){
  .dash-w-n3__detail,
  .dash-w-n3__rows,
  .dash-w-n3__row{
    flex:1 1 auto;
    min-height:0;
  }
  .dash-w-n3__profile{
    flex:1 1 0;
    min-height:0;
  }
  .dash-w-n3__row--tap .dash-w-n3__chev{
    display:none;
  }
}
@media (max-width:767px){
  .dash-w-n3__row-titleblock{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .dash-w-n3__row-titleline{
    width:100%;
  }
  .dash-w-n3__row-title{
    flex:1 1 auto;
    max-width:100%;
  }
  .dash-w-n3__rtp-fit,
  .dash-w-n3__rtp-warn{
    white-space:normal;
  }
  .dash-w-n3__row-top{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .dash-w-n3__row-meta{
    text-align:left;
  }
  .dash-w-n3__profile{
    margin-top:6px;
    flex:1 1 0;
    min-height:0;
  }
  .dash-w-n3__actions{
    display:none;
  }
  .dash-w-n3__detail--free,
  .dash-w-n3__detail--all-free{
    justify-content:center;
  }
  .dash-w-n3__detail--free .dash-w-n3__action,
  .dash-w-n3__detail--all-free .dash-w-n3__action{
    width:auto;
  }
}

/* Nachrichten — Styles oben bei Dashboard-Widgets */

.dash-w-goal{
  gap:6px !important;
  justify-content:flex-start;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.dash-w-goal__footer{
  margin-top:auto;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  width:100%;
}
.dash-w-goal__line1{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.dash-w-goal__title{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
  line-height:1.3;
  min-width:0;
}
.dash-w-goal__accent{
  flex-shrink:0;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dash-w-goal__race{
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.3;
}
.dash-w-goal__chart{
  display:block;
  width:100%;
  height:124px;
  flex-shrink:0;
  margin-top:2px;
  overflow:visible;
}
.dash-w-goal__single{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
  min-width:0;
  flex:1 1 auto;
}
.dash-w-goal__single-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 8px;
  min-width:0;
}
.dash-w-goal__single-best,
.dash-w-goal__single-goal{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 6px;
  min-width:0;
}
.dash-w-goal__single-arrow{
  color:var(--text-3);
  flex-shrink:0;
}
.dash-w-goal__single-val{
  font-size:var(--yama-title);
  font-weight:500;
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
  color:var(--neutral-800);
  line-height:1.2;
}
.dash-w-goal__single-meta{
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.dash-w-goal__single-gap{
  font-weight:500;
  color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}
.dash-w-goal__empty--inline{
  margin-top:4px;
}
.dash-w-goal__bar{
  display:block;
  width:100%;
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  overflow:hidden;
  flex-shrink:0;
}
.dash-w-goal__bar-fill{
  height:100%;
  background:var(--accent-base);
  border-radius:var(--radius-pill);
}
.dash-w-goal__bar-lbl{
  display:none !important;
}
.dash-w-goal__forecast{
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.35;
}
.dash-w-goal__forecast strong{font-weight:500;color:var(--neutral-800)}
.dash-w-goal__est{color:var(--text-3)}
.dash-w-goal__empty{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.dash-w-quick{
  gap:0 !important;
  padding:var(--space-3) !important;
}
.dash-w-quick__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2);
  flex:1;
  align-items:stretch;
  min-height:0;
  height:100%;
}
.dash-w-quick__tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  height:100%;
  width:100%;
  padding:var(--space-3);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--bg-1);
  box-sizing:border-box;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.dash-w-quick__tile:hover{
  background:var(--bg-2);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-1);
}
.dash-w-quick__tile:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:2px;
  border-color:var(--accent-base);
  box-shadow:var(--shadow-1);
}
.dash-w-quick__tile:active{
  transform:scale(0.985);
  background:var(--bg-2);
  border-color:var(--accent-base);
}
@media (hover:none){
  .dash-w-quick__tile:active{
    box-shadow:var(--shadow-1);
  }
}
.dash-w-quick__ico{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-base);
  flex-shrink:0;
}
.dash-w-quick__ico .ti{font-size:22px;line-height:1}
.dash-w-quick__name{
  font-size:var(--yama-title);
  font-weight:600;
  color:var(--neutral-800);
  line-height:1.2;
}
.dash-w-quick__desc{
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.35;
  flex:1;
}
.dash-w-quick__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin-top:auto;
  width:100%;
}
.dash-w-quick__cta{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--accent-text);
  text-align:left;
  pointer-events:none;
}
.dash-w-quick__sub{
  font-size:var(--yama-micro);
  color:var(--text-3);
  line-height:1.3;
}
.dash-w-quick__last{
  display:block;
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.3;
  margin-top:2px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-w-quick__sublink{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  font-size:var(--yama-micro);
  color:var(--text-2);
  cursor:pointer;
  text-align:left;
  text-decoration:underline;
  text-underline-offset:2px;
}

.cal-page-head__title{
  font-size:var(--yama-metric);
  font-weight:500;
  color:var(--neutral-800);
}

/* ── Aktivitäten-Übersicht (Desktop-Basis + Mobile-Feinschliff) ─────────── */
.act-overview{margin-bottom:var(--space-5)}
.act-range-sub{display:none}
.act-rail{margin-bottom:var(--space-5)}
.act-rail__range{
  display:flex;justify-content:flex-end;margin-bottom:var(--space-3);
}
.act-overview__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin-bottom:var(--space-3);flex-wrap:wrap;
}
.act-overview__eyebrow{margin:0}
.act-overview__range{
  font:inherit;font-size:0.72rem;font-weight:500;color:var(--neutral-500);
  padding:4px 26px 4px 10px;border-radius:var(--radius-pill);
  border:0.5px solid var(--border-default);background-color:transparent;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239CA3AF%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
}
.act-stats-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);margin-bottom:0;
}
.act-stat{
  padding:var(--space-4);min-width:0;display:flex;flex-direction:column;justify-content:flex-start;
  box-shadow:var(--shadow-1);
}
.act-stat__value{margin:0}
.act-stat__value--accent{color:var(--accent-text)}
.act-stat__value--sm{font-size:22px}
@media (max-width:899px){.act-stat__value--sm{font-size:24px}}
.act-stat__lbl{margin-top:var(--space-2)}
.act-stat__topline{
  display:flex;align-items:center;gap:6px;margin-bottom:var(--space-2);color:var(--neutral-500);
}
.act-stat__topline .ti{font-size:14px;line-height:1}
.act-stat__topline .act-stat__lbl{margin-top:0}
.act-stat-sport{display:flex;flex-direction:column;gap:6px;width:100%}
.act-stat-sport__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;line-height:1.25;
}
.act-stat-sport__name{font-size:var(--yama-micro,11px);font-weight:500}
.act-stat-sport__name[data-sport="run"]{color:var(--accent-text)}
.act-stat-sport__name[data-sport="bike"]{color:#185FA5}
.act-stat-sport__name[data-sport="swim"]{color:#0F6E56}
[data-theme="dark"] .act-stat-sport__name[data-sport="run"]{color:var(--accent-base)}
[data-theme="dark"] .act-stat-sport__name[data-sport="bike"]{color:#6FA5D9}
[data-theme="dark"] .act-stat-sport__name[data-sport="swim"]{color:#5ECDB2}
.act-stat-sport__val{
  font-size:16px;font-weight:500;color:var(--neutral-800);font-variant-numeric:tabular-nums;
}
.act-stat-sport__unit{font-size:10px;font-weight:400;color:var(--text-3);margin-left:2px}
.act-month-head{
  margin:var(--space-3) 0 var(--space-2);
  color:var(--text-3);
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.act-month-head:first-child{margin-top:0}
.act-row--compact{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:var(--space-3);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);cursor:pointer;
}
.act-row--compact .act-card__head{
  display:flex;align-items:flex-start;gap:var(--space-3);
}
.act-row--compact .act-card__titles{flex:1;min-width:0}
.act-row--compact .act-row__title{
  font-size:var(--yama-title);font-weight:500;color:var(--neutral-800);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25;
}
.act-row--compact .act-card__sub{
  margin-top:2px;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  font-size:var(--yama-micro);color:var(--text-3);line-height:1.3;
}
.act-row--compact .act-card__chev{
  flex-shrink:0;font-size:16px;color:var(--text-3);margin-top:2px;
}
.act-row--compact .act-card__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--border);
}
.act-row--compact .act-card__stats--solo{grid-template-columns:1fr}
.act-row--compact .act-card__stat .yama-label{color:var(--text-3)}
.act-row--compact .act-card__val{
  margin-top:2px;font-size:var(--yama-text);font-weight:500;color:var(--neutral-800);
  font-variant-numeric:tabular-nums;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.act-row--compact .act-card__sec{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--border);
  font-size:var(--yama-micro);color:var(--text-3);
}
.act-row--compact .act-card__chip{
  display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;
}
.act-row--compact .act-card__chip .ti{font-size:12px;line-height:1}

/* Aktivitäten-Toolbar + erweiterte Filter (Desktop-Defaults) */
.act-list-toolbar{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.act-list-toolbar .filter-bar{
  margin:0;
  flex:1;
  min-width:0;
}
.act-sport-dd{display:none}
.act-toolbar-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  border:0.5px solid var(--border-strong);
  background:var(--card-bg);
  color:var(--neutral-600);
  font-size:var(--text-sm);
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  line-height:1.4;
}
.act-toolbar-btn:hover{border-color:var(--neutral-300);color:var(--neutral-800)}
.act-filter-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  background:var(--accent-strong);
  color:var(--neutral-0);
  font-size:var(--yama-micro);
  font-weight:600;
  border-radius:var(--radius-pill);
  padding:1px 7px;
  line-height:1.3;
}
.act-sport-dd__menu{
  position:fixed;
  z-index:9999;
  min-width:200px;
  max-width:min(320px, calc(100vw - 16px));
  max-height:min(60vh, 360px);
  overflow-y:auto;
  padding:4px;
  background:var(--bg-1);
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
}
.act-sport-dd__item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--neutral-800);
  font-size:var(--yama-text);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.act-sport-dd__item:hover,
.act-sport-dd__item.is-active{background:var(--neutral-100)}
.act-sport-dd__item .ti,
.act-sport-dd__item .sport-icon-dot{flex-shrink:0;color:var(--neutral-600)}
.act-adv-panel{
  background:var(--neutral-100);
  border-radius:var(--radius-md);
  padding:16px;
  margin-bottom:16px;
}
.act-adv-panel[hidden]{display:none !important}
.act-adv-panel__backdrop{display:none}
.act-adv-panel__head{display:none}
.act-adv-panel__done{display:none}
.act-adv-panel__sheet{min-width:0}
.act-adv-panel__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:18px;
  align-items:start;
}
.act-adv-panel__lbl{
  display:block;
  font-size:var(--yama-label);
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:6px;
}
.act-adv-panel__range{
  display:flex;
  gap:6px;
  align-items:center;
}
.act-adv-panel__input{
  flex:1;
  min-width:0;
  padding:7px 10px;
  border:0.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card-bg);
  color:var(--neutral-800);
  font-size:var(--yama-text);
  box-sizing:border-box;
  font-family:inherit;
}
.act-adv-panel__dash{color:var(--neutral-400);font-size:var(--yama-text);flex-shrink:0}
.act-adv-panel__presets{
  display:flex;
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}
.act-adv-panel__preset{padding:4px 12px;font-size:var(--yama-micro)}
.act-adv-panel__foot{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:0.5px solid var(--border);
}
.act-adv-panel__reset{display:inline-flex;align-items:center;gap:6px}

@media (max-width:899px){
  :root{
    --yama-metric:34px;
    --yama-title:20px;
    --yama-text:16px;
    --yama-label:13px;
    --yama-micro:11px;
  }

  /* Aktivitäten Phone: ÜBERSICHT + Zeitraum als Titel, 2×2 Kacheln, schlanke Liste */
  #page-aktivitaeten .act-overview__head{
    flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:var(--space-3);
  }
  /* act-overview__eyebrow as title */
  #page-aktivitaeten .act-overview__eyebrow{
    font-size:var(--yama-title);
    font-weight:500;
    letter-spacing:-0.02em;
    text-transform:none;
    color:var(--neutral-800);
    line-height:1.25;
  }
  #page-aktivitaeten .act-overview__range{
    width:auto;max-width:100%;padding:0 22px 0 0;border:none;border-radius:0;
    font-size:var(--yama-title);font-weight:500;color:var(--neutral-800);
    letter-spacing:-0.02em;line-height:1.25;
    background-position:right 2px center;background-size:14px;
  }
  #page-aktivitaeten .act-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:var(--space-2) !important;align-items:stretch !important;
    margin-bottom:var(--space-4);
  }
  #page-aktivitaeten .act-stat{
    padding:var(--space-3) !important;min-height:88px;
  }
  #page-aktivitaeten .act-stat--dist .act-stat__lbl[hidden],
  #page-aktivitaeten .act-stat--dist .act-stat__lbl:empty{display:none !important}
  #page-aktivitaeten .act-stat--dist .act-stat-sport ~ .act-stat__lbl,
  #page-aktivitaeten .act-stat--dist:has(.act-stat-sport) .act-stat__lbl{display:none !important}
  #page-aktivitaeten .act-stat__value--sm{font-size:24px !important;line-height:1.15}
  #page-aktivitaeten .act-overview{margin-bottom:var(--space-3)}

  #page-aktivitaeten .act-overview__head{margin-bottom:var(--space-2)}
  #page-aktivitaeten .act-row:not(.act-row--compact){padding:10px 12px !important;gap:8px !important}
  #page-aktivitaeten .act-row:not(.act-row--compact) .act-row__primary{gap:12px !important;padding-top:6px !important}
  #page-aktivitaeten .act-row--compact{padding:var(--space-3)}
  #page-aktivitaeten .act-row--compact .act-row__title{font-size:var(--yama-title)}
  #page-aktivitaeten .act-row--compact .act-card__val{font-size:var(--yama-text)}
  #page-aktivitaeten .act-list{gap:var(--space-2) !important}
  #page-aktivitaeten .act-row--compact .sport-icon-dot{
    width:36px;height:36px;border-radius:var(--radius-md);flex-shrink:0;
  }
  #page-aktivitaeten .act-upload-prompt{display:none}
  /* Phone: Sport-Dropdown + Filter nebeneinander (Pills nur Desktop) */
  #page-aktivitaeten .act-list-toolbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    flex-wrap:nowrap !important;
    gap:var(--space-2) !important;
    margin-bottom:var(--space-3);
  }
  #page-aktivitaeten .act-filter-bar--pills{
    display:none !important;
  }
  #page-aktivitaeten .act-sport-dd{
    display:block;
    flex:1 1 0;
    min-width:0;
  }
  #page-aktivitaeten #act-adv-toggle{
    width:auto;
    flex:1 1 0;
    min-width:0;
    justify-content:center;
  }
  #page-aktivitaeten .act-toolbar-btn{
    width:100%;
    min-height:44px;
    padding:0 var(--space-3);
    border-radius:var(--radius-md);
    border:0.5px solid var(--border-strong);
    background:var(--bg-1);
    color:var(--neutral-700);
    font-size:var(--yama-text);
    font-weight:500;
    font-family:inherit;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    box-shadow:none;
    -webkit-tap-highlight-color:transparent;
  }
  #page-aktivitaeten .act-toolbar-btn .ti{
    font-size:18px;
    line-height:1;
    color:var(--neutral-500);
  }
  #page-aktivitaeten .act-sport-dd__label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #page-aktivitaeten .act-sport-dd__chev{
    font-size:14px !important;
    margin-left:auto;
    flex-shrink:0;
  }
  #page-aktivitaeten .act-toolbar-btn--filter .act-filter-count{
    margin-left:2px;
  }
  /* Erweiterte Filter als Bottom-Sheet-Modal (über Tabbar z-index 900) */
  #page-aktivitaeten .act-adv-panel{
    position:fixed;
    inset:0;
    z-index:1100;
    margin:0;
    padding:0;
    border-radius:0;
    background:transparent;
    display:none;
  }
  #page-aktivitaeten .act-adv-panel.is-open{
    display:block !important;
  }
  #page-aktivitaeten .act-adv-panel__backdrop{
    display:block;
    position:absolute;
    inset:0;
    border:0;
    padding:0;
    margin:0;
    cursor:pointer;
    background:color-mix(in srgb, var(--neutral-900) 45%, transparent);
  }
  #page-aktivitaeten .act-adv-panel__sheet{
    position:absolute;
    left:0;right:0;bottom:0;
    max-height:min(85vh, 640px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--bg-1);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:var(--space-4);
    padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    box-shadow:var(--shadow-3);
  }
  #page-aktivitaeten .act-adv-panel__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    margin-bottom:var(--space-4);
  }
  #page-aktivitaeten .act-adv-panel__close{
    width:36px;height:36px;
    border:0;
    border-radius:var(--radius-md);
    background:var(--bg-2);
    color:var(--neutral-600);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font:inherit;
  }
  #page-aktivitaeten .act-adv-panel__grid{
    grid-template-columns:1fr;
    gap:var(--space-4);
  }
  #page-aktivitaeten .act-adv-panel__done{display:inline-flex}
  #page-aktivitaeten .act-adv-panel__foot{
    justify-content:space-between;
  }
  /* Mobile-Canvas: Seite = --bg, Karten = --bg-1 — damit Kacheln schweben */
  html,body{
    background:var(--bg);
  }
  #pages-root{
    background:var(--bg);
    min-height:100dvh;
  }
  #pages-root > [id^="page-"],
  #pages-root > [id^="page-"] > section{
    background:transparent;
  }
  /* Subtiles Grid auf dem Canvas (wie Landing), ohne dritte Flächenebene */
  body::before{
    height:100dvh;
    opacity:0.55;
    -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, black 20%, transparent 75%);
    mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, black 20%, transparent 75%);
  }
  .adp-hero-row > div{
    box-shadow:var(--shadow-1);
  }
  /* Unterer Scroll-Abstand: Tab-Leiste + Safe Area — letzte Karte voll sichtbar */
  #pages-root,
  #page-dashboard,
  #page-kalender,
  #page-aktivitaeten,
  #page-analyse,
  #page-mehr,
  #page-profil,
  #page-dashboard > section,
  #page-kalender > section,
  #page-aktivitaet > section,
  #page-analyse > section,
  #page-mehr > section,
  #page-profil > section{
    padding-bottom:calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Native auth boot splash + Login Screen (Mockup) ── */
.yama-native-boot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  align-items: stretch;
  justify-content: stretch;
}
html.yama-native .yama-native-boot:not([hidden]),
html.yama-native.yama-native--booting .yama-native-boot {
  display: flex;
}
.yama-native-boot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.yama-native-boot.is-done {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* Login / Register — web modal (Berg links→Fade) · native phone sheet */
#page-login .auth-stage,
#page-register .auth-stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  position: relative;
  background: var(--bg);
}
#page-login .auth-stage__scrim,
#page-register .auth-stage__scrim {
  display: none;
}
#page-login .auth-modal,
#page-register .auth-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1, var(--neutral-0));
  overflow: hidden;
}

/* Web brand pane: Startseiten-Berg von links, soft nach rechts ausblenden */
#page-login .auth-brand,
#page-register .auth-brand {
  display: none;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-base) 7%, var(--neutral-100));
}
#page-login .auth-brand__mount,
#page-register .auth-brand__mount {
  position: absolute;
  inset: -8% -18% -4% -12%;
  background-image: url("../branding/yama-auth-mountains.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  opacity: 0.72;
  filter: saturate(0.7) contrast(0.94);
  pointer-events: none;
}
#page-login .auth-brand__fade,
#page-register .auth-brand__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 42%,
      color-mix(in srgb, var(--bg-1) 55%, transparent) 72%,
      var(--bg-1) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--neutral-100) 35%, transparent) 0%,
      transparent 38%,
      color-mix(in srgb, var(--neutral-900) 28%, transparent) 100%
    );
}
#page-login .auth-brand__logo,
#page-register .auth-brand__logo {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--neutral-800);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
#page-login .auth-brand__logo img,
#page-register .auth-brand__logo img {
  width: 28px;
  height: 28px;
  display: block;
}
#page-login .auth-brand__copy,
#page-register .auth-brand__copy {
  position: absolute;
  left: var(--space-4);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  max-width: 28ch;
}
#page-login .auth-brand__title,
#page-register .auth-brand__title {
  margin: 0 0 var(--space-2);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--neutral-0);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--neutral-900) 35%, transparent);
}
#page-login .auth-brand__accent,
#page-register .auth-brand__accent {
  color: var(--accent-base);
  display: inline;
}
#page-login .auth-brand__sub,
#page-register .auth-brand__sub {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: color-mix(in srgb, var(--neutral-0) 88%, transparent);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--neutral-900) 40%, transparent);
}

/* Phone hero (native + schmale Web-Fallbacks bleiben über yama-native) */
#page-login .login-hero--photo,
#page-register .login-hero--photo {
  position: relative;
  height: min(42vh, 300px);
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-text) 55%, var(--neutral-900));
}
#page-login .login-hero__photo,
#page-register .login-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#page-login .login-hero__shade,
#page-register .login-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--neutral-900) 18%, transparent) 0%,
    transparent 50%,
    color-mix(in srgb, var(--neutral-900) 42%, transparent) 100%
  );
  pointer-events: none;
}

#page-login .login-lang,
#page-register .login-lang {
  display: flex;
  align-items: center;
  gap: 2px;
}
#page-login .login-lang--hero,
#page-register .login-lang--hero {
  position: absolute;
  top: calc(12px + var(--yama-safe-top, 0px));
  right: var(--space-3);
  z-index: 2;
  padding: 3px;
  border: 0.5px solid color-mix(in srgb, var(--neutral-0) 28%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--neutral-900) 28%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#page-login .login-lang__btn,
#page-register .login-lang__btn {
  min-width: 38px;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--neutral-0) 76%, transparent);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}
#page-login .login-lang--hero .login-lang__btn[aria-pressed="true"],
#page-register .login-lang--hero .login-lang__btn[aria-pressed="true"] {
  color: var(--neutral-800);
  background: color-mix(in srgb, var(--neutral-0) 94%, transparent);
}
#page-login .login-lang--form,
#page-register .login-lang--form {
  gap: 0;
}
#page-login .login-lang--form .login-lang__btn,
#page-register .login-lang--form .login-lang__btn {
  min-width: 0;
  height: auto;
  padding: 0;
  color: var(--neutral-400);
  background: transparent;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
}
#page-login .login-lang--form .login-lang__btn[aria-pressed="true"],
#page-register .login-lang--form .login-lang__btn[aria-pressed="true"] {
  color: var(--neutral-800);
  background: transparent;
}
#page-login .login-lang--form .login-lang__btn[aria-pressed="true"]::after,
#page-register .login-lang--form .login-lang__btn[aria-pressed="true"]::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: var(--accent-base);
  vertical-align: middle;
}
#page-login .login-lang__sep,
#page-register .login-lang__sep {
  color: var(--neutral-300);
  font-size: 11px;
  padding: 0 4px;
}

#page-login .auth-form__chrome,
#page-register .auth-form__chrome {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
#page-login .auth-back,
#page-register .auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--neutral-600);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
#page-login .auth-back:hover,
#page-register .auth-back:hover {
  color: var(--neutral-800);
}

#page-login .login-panel,
#page-register .login-panel {
  flex: 1;
  background: var(--bg-1, var(--neutral-0));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--yama-safe-bottom, 0px));
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}
#page-login .login-panel__grabber,
#page-register .login-panel__grabber {
  width: 38px;
  height: 4px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
}
#page-login .login-panel__mark,
#page-register .login-panel__mark {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto var(--space-2);
  object-fit: contain;
}
#page-login .login-panel__title,
#page-register .login-panel__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--neutral-800);
  margin-bottom: 4px;
  text-align: center;
}
#page-login .login-panel__sub,
#page-register .login-panel__sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-500);
  margin-bottom: var(--space-4);
  text-align: center;
}
#page-login .login-field,
#page-register .login-field { margin-bottom: var(--space-3); }
#page-login .login-forgot,
#page-register .login-forgot {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-strong);
  text-decoration: none;
}
#page-login .login-input,
#page-register .login-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2, var(--neutral-100));
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 12px;
  min-height: 48px;
}
#page-login .login-input--trail,
#page-register .login-input--trail {
  padding-right: 4px;
}
#page-login .login-input:focus-within,
#page-register .login-input:focus-within {
  border-color: var(--border-strong);
  background: var(--bg-1, var(--neutral-0));
  box-shadow: none !important;
  outline: none !important;
}
#page-login .login-input .ti,
#page-register .login-input .ti {
  font-size: 18px;
  color: var(--neutral-400);
  flex-shrink: 0;
}
#page-login .login-input .form-input,
#page-login .login-input input,
#page-register .login-input .form-input,
#page-register .login-input input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 0 !important;
  flex: 1;
  min-width: 0;
}
/* Fokus nur am Wrapper (neutral) — Accents aus .form-input:focus + iOS-Ringe killen */
#page-login .login-input .form-input:focus,
#page-login .login-input .form-input:focus-visible,
#page-login .login-input input:focus,
#page-login .login-input input:focus-visible,
#page-register .login-input .form-input:focus,
#page-register .login-input .form-input:focus-visible,
#page-register .login-input input:focus,
#page-register .login-input input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  caret-color: var(--neutral-800);
}
/* Browser-Autofill: hellblaues Chrome-Highlight auf Token-Fläche ziehen */
#page-login .login-input .form-input:-webkit-autofill,
#page-login .login-input .form-input:-webkit-autofill:hover,
#page-login .login-input .form-input:-webkit-autofill:focus,
#page-register .login-input .form-input:-webkit-autofill,
#page-register .login-input .form-input:-webkit-autofill:hover,
#page-register .login-input .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--neutral-800);
  caret-color: var(--neutral-800);
  box-shadow: 0 0 0 1000px var(--bg-2) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset !important;
  transition: background-color 99999s ease-out 0s;
}
#page-login .login-input:focus-within .form-input:-webkit-autofill,
#page-register .login-input:focus-within .form-input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--bg-1) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset !important;
}
#page-login .login-input__eye,
#page-register .login-input__eye {
  border: none;
  background: transparent;
  color: var(--neutral-400);
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-login .login-meta,
#page-register .login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--space-4);
  flex-wrap: wrap;
}
#page-login .login-form,
#page-register .login-form {
  width: 100%;
}
#page-register .yama-turnstile,
#page-register [data-yama-turnstile] {
  width: 100%;
  margin: 0 0 var(--space-3);
}
#page-register .login-submit:disabled[data-wait-captcha] {
  cursor: not-allowed;
}
#page-login .login-submit--accent,
#page-register .login-submit--accent {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border-radius: var(--btn-radius, 10px) !important;
  min-height: 52px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  font-size: 14px;
  font-family: var(--font-body);
  box-shadow: none;
}
#page-login .login-submit--accent:hover,
#page-register .login-submit--accent:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
}
#page-login .login-social,
#page-register .login-social {
  margin-top: var(--space-4);
}
#page-login .login-social__divider,
#page-register .login-social__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
  color: var(--neutral-400);
  font-size: 11px;
}
#page-login .login-social__divider::before,
#page-register .login-social__divider::before,
#page-login .login-social__divider::after,
#page-register .login-social__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
#page-login .login-social__row,
#page-register .login-social__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#page-login .login-social__row--single,
#page-register .login-social__row--single {
  display: flex;
  justify-content: center;
  grid-template-columns: none;
}
#page-login .login-social__row--single .login-social__btn,
#page-register .login-social__row--single .login-social__btn {
  width: min(100%, 240px);
  flex: 0 1 240px;
}
#page-login .login-social__btn,
#page-register .login-social__btn {
  min-height: 48px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border);
  background: var(--bg-1, var(--neutral-0));
  color: var(--neutral-800);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
#page-login .login-social__btn:active,
#page-register .login-social__btn:active {
  background: var(--neutral-100);
}
#page-login .login-social__g,
#page-register .login-social__g {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--neutral-100);
  flex-shrink: 0;
}
#page-login .login-social__apple,
#page-register .login-social__apple {
  border-color: var(--neutral-800);
  color: var(--neutral-0);
  background: var(--neutral-800);
}
#page-login .login-social__apple .ti,
#page-register .login-social__apple .ti {
  font-size: 18px;
}
/* Native: Google via Credential Manager (YamaGoogleAuth). Apple still deferred. */
html.yama-native .login-social__apple {
  display: none !important;
}
#page-login .login-panel__footer,
#page-register .login-panel__footer {
  text-align: center;
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--neutral-500);
}
#page-login .login-panel__footer a,
#page-register .login-panel__footer a {
  color: var(--accent-strong);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
#page-login .login-panel__legal,
#page-register .login-panel__legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--neutral-400);
}
#page-login .login-panel__legal a,
#page-register .login-panel__legal a {
  color: var(--neutral-400);
  text-decoration: none;
  cursor: pointer;
}
#page-login .form-error,
#page-register .form-error {
  margin-top: 0;
  margin-bottom: 12px;
}
html.yama-native #page-login .form-error,
html.yama-native #page-register .form-error {
  position: relative;
  z-index: 2;
  max-height: none;
  overflow: visible;
}

#page-register .login-social--top {
  margin-top: 0;
  margin-bottom: var(--space-1);
}
#page-register .login-social__google--wide {
  width: 100%;
  margin-bottom: var(--space-3);
}
#page-register .register-pw-strength {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
#page-register .register-pw-strength div {
  height: 3px;
  flex: 1;
  border-radius: var(--radius-pill);
  background: var(--bg-3, var(--neutral-200));
}
#page-register .register-legal {
  margin: 0 0 var(--space-3);
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--neutral-500);
}
#page-register .register-legal a {
  color: var(--accent-strong);
  font-weight: 500;
  text-decoration: none;
}
#page-register .register-legal input[type="checkbox"] {
  margin-top: 2px;
}
#page-register .register-legal--health {
  font-size: 11px;
  color: var(--neutral-500);
}
#page-register .register-legal--email {
  margin-bottom: var(--space-4);
  font-size: 11px;
  color: var(--neutral-500);
}
.onb-consent .form-check {
  margin: 0 0 var(--space-3);
}
.onb-consent__err {
  color: var(--warning-text);
  margin: 0;
}
#page-register .register-onboarding-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--neutral-400);
  text-align: center;
}
#page-register .register-onboarding-note .ti {
  font-size: 14px;
  color: var(--neutral-400);
}

/* Web (nicht native): Modal mit Berg-Split ab Desktop */
html:not(.yama-native) #page-login .auth-stage,
html:not(.yama-native) #page-register .auth-stage {
  align-items: center;
  padding: var(--space-4);
  background:
    radial-gradient(
      120% 80% at 12% 100%,
      color-mix(in srgb, var(--accent-base) 10%, transparent) 0%,
      transparent 55%
    ),
    var(--bg);
}
html:not(.yama-native) #page-login .auth-stage__scrim,
html:not(.yama-native) #page-register .auth-stage__scrim {
  display: block;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--neutral-900) 4%, transparent) 0%,
      color-mix(in srgb, var(--neutral-900) 10%, transparent) 100%
    );
  pointer-events: none;
}
html:not(.yama-native) #page-login .auth-phone-hero,
html:not(.yama-native) #page-register .auth-phone-hero {
  display: none;
}
html:not(.yama-native) #page-login .auth-form__chrome,
html:not(.yama-native) #page-register .auth-form__chrome {
  display: flex;
}
html:not(.yama-native) #page-login .login-panel__grabber,
html:not(.yama-native) #page-register .login-panel__grabber {
  display: none;
}
html:not(.yama-native) #page-login .login-panel,
html:not(.yama-native) #page-register .login-panel {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-4);
}

@media (min-width: 900px) {
  html:not(.yama-native) #page-login .auth-modal,
  html:not(.yama-native) #page-register .auth-modal {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(340px, 1fr);
    width: min(980px, calc(100vw - 48px));
    min-height: min(680px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
  }
  html:not(.yama-native) #page-login .auth-brand,
  html:not(.yama-native) #page-register .auth-brand {
    display: block;
    min-height: 100%;
  }
  html:not(.yama-native) #page-login .login-panel,
  html:not(.yama-native) #page-register .login-panel {
    overflow: auto;
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
}

@media (max-width: 899px) {
  html:not(.yama-native) #page-login .auth-modal,
  html:not(.yama-native) #page-register .auth-modal {
    width: min(440px, 100%);
    min-height: auto;
    max-height: calc(100dvh - 32px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    overflow: auto;
  }
  html:not(.yama-native) #page-login .auth-brand,
  html:not(.yama-native) #page-register .auth-brand {
    display: block;
    min-height: 168px;
  }
  html:not(.yama-native) #page-login .auth-brand__copy,
  html:not(.yama-native) #page-register .auth-brand__copy {
    max-width: none;
    right: var(--space-4);
  }
  html:not(.yama-native) #page-login .auth-brand__title,
  html:not(.yama-native) #page-register .auth-brand__title {
    font-size: 20px;
  }
  html:not(.yama-native) #page-login .auth-brand__sub,
  html:not(.yama-native) #page-register .auth-brand__sub {
    display: none;
  }
  html:not(.yama-native) #page-login .auth-brand__fade,
  html:not(.yama-native) #page-register .auth-brand__fade {
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 45%,
        color-mix(in srgb, var(--bg-1) 55%, transparent) 78%,
        var(--bg-1) 100%
      );
  }
}

/* Native: Phone-Sheet, kein Web-Modal */
html.yama-native #page-login .auth-stage,
html.yama-native #page-register .auth-stage {
  padding: 0;
  background: var(--bg-1, var(--neutral-0));
}
html.yama-native #page-login .auth-stage__scrim,
html.yama-native #page-register .auth-stage__scrim,
html.yama-native #page-login .auth-brand,
html.yama-native #page-register .auth-brand,
html.yama-native #page-login .auth-form__chrome,
html.yama-native #page-register .auth-form__chrome {
  display: none !important;
}
html.yama-native #page-login .auth-modal,
html.yama-native #page-register .auth-modal {
  min-height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}

#page-login .auth-glow,
#page-register .auth-glow { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Onboarding Modal (5 Schritte, Rail + Content)
   ═══════════════════════════════════════════════════════════════════════════ */
body.yama-onb-open { overflow: hidden; }

.onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
}
.onb-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--neutral-900) 42%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.onb-modal {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1.35fr);
  background: var(--bg-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.onb-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-4);
  color: var(--neutral-0);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-base) 10%, var(--neutral-900)) 0%,
      var(--neutral-900) 55%,
      color-mix(in srgb, var(--accent-base) 8%, var(--neutral-900)) 100%
    );
  overflow: hidden;
}
.onb-rail__brand {
  display: inline-flex;
  align-items: center;
  z-index: 1;
}
.onb-rail__brand img {
  width: 40px;
  height: 40px;
  display: block;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.onb-rail__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  z-index: 1;
}
.onb-rail__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--neutral-0) 55%, transparent);
}
.onb-rail__step.is-active {
  background: color-mix(in srgb, var(--neutral-0) 10%, transparent);
  color: var(--neutral-0);
}
.onb-rail__step.is-done { color: color-mix(in srgb, var(--neutral-0) 72%, transparent); }
.onb-rail__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  border: 0.5px solid color-mix(in srgb, var(--neutral-0) 28%, transparent);
}
.onb-rail__step.is-active .onb-rail__num {
  background: var(--accent-base);
  border-color: var(--accent-base);
  color: var(--neutral-900);
}
.onb-rail__step.is-done .onb-rail__num {
  background: color-mix(in srgb, var(--accent-base) 28%, transparent);
  border-color: transparent;
  color: var(--accent-base);
}
.onb-rail__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.onb-rail__title { font-size: 13px; font-weight: 500; line-height: 1.25; }
.onb-rail__sub { font-size: 11px; line-height: 1.35; opacity: 0.72; }
.onb-rail__note {
  margin-top: auto;
  z-index: 1;
  font-size: 11px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--neutral-0) 62%, transparent);
  max-width: 28ch;
  padding-bottom: var(--space-4);
  position: relative;
}
.onb-rail__mount {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  pointer-events: none;
  background: url("../branding/yama-auth-mountains.webp") no-repeat center bottom / cover;
  opacity: 0.45;
  filter: saturate(0.55) brightness(0.55);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
}

.onb-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-1);
}
.onb-main__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-2);
  flex-shrink: 0;
}
.onb-main__progress {
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.onb-link {
  border: 0;
  background: transparent;
  color: var(--text-2, var(--neutral-500));
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.onb-link:hover { color: var(--accent-strong); }
.onb-main__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-5) var(--space-4);
}
.onb-step { max-width: 560px; }
.onb-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--accent-strong);
  text-transform: uppercase;
}
.onb-headline {
  margin: 0 0 var(--space-2);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--neutral-800);
}
.onb-lead {
  margin: 0 0 var(--space-5);
  color: var(--text-2, var(--neutral-500));
  max-width: 48ch;
}
.onb-main__foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--border-default);
  background: var(--bg-1);
}
.onb-main__foot .onb-skip { margin-left: auto; margin-right: var(--space-2); }
.onb-btn-next { min-height: 44px; }

.onb-sport-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.onb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
  width: 100%;
  padding: var(--space-4);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.onb-card > .ti:first-child {
  font-size: 24px;
  color: var(--accent-strong);
  margin-bottom: var(--space-1);
}
.onb-card__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--neutral-800);
}
.onb-card__desc {
  font-size: 13px;
  color: var(--text-2, var(--neutral-500));
  line-height: 1.4;
}
.onb-card__check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 16px;
  color: var(--accent-strong);
}
.onb-card.is-selected {
  border-color: var(--accent-base);
  background: var(--accent-bg);
}
.onb-card--row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.onb-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2, var(--neutral-100));
  color: var(--accent-strong);
}
.onb-card__icon .ti { font-size: 20px; }
.onb-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--border-strong, var(--neutral-300));
  box-sizing: border-box;
}
.onb-card--row.is-selected .onb-radio {
  border: 6px solid var(--accent-base);
}
.onb-level-list { display: flex; flex-direction: column; gap: var(--space-2); }
.onb-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.onb-card--goal {
  min-height: 148px;
  justify-content: flex-start;
}
.onb-card--goal > .ti:first-child { font-size: 28px; }

.onb-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.onb-fields__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.onb-hint { margin-top: var(--space-1); color: var(--text-3); }
.onb-req { color: var(--danger-base, var(--danger)); }
.onb-field-err {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--danger-base, var(--danger));
}

.onb-connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.onb-connect {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
}
.onb-connect.is-connected {
  border-color: var(--accent-base);
  background: var(--accent-bg);
}
.onb-connect__mark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-2, var(--neutral-100));
  color: var(--neutral-700);
}
.onb-connect__body { flex: 1; min-width: 0; }
.onb-connect__name { font-size: 13px; font-weight: 500; color: var(--neutral-800); }
.onb-connect__desc { font-size: 11px; color: var(--text-3); line-height: 1.35; margin-top: 2px; }
.onb-connect__ok { color: var(--accent-strong); font-size: 20px; }
.onb-connect-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-2, var(--neutral-100));
  color: var(--text-2, var(--neutral-500));
}

.onb-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border: 0.5px solid color-mix(in srgb, var(--accent-base) 30%, var(--border-default));
  border-radius: var(--radius-lg);
  background: var(--accent-bg);
}
.onb-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--accent-base);
  color: var(--neutral-900);
  flex-shrink: 0;
}
.onb-banner__copy { flex: 1; min-width: 200px; }
.onb-banner__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ── Dashboard Start-Setup (neue Nutzer) ─────────────────────────────── */
.dash-setup{
  padding:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
@media (min-width:768px){
  .dash-setup{ padding:var(--space-4); }
}
.dash-setup__welcome{ margin:0; }
.dash-setup__list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.dash-setup__step{
  display:flex;
  gap:var(--space-2);
  align-items:flex-start;
  padding:var(--space-2) 0;
  border-top:0.5px solid var(--border-default);
  border-radius:0;
  background:transparent;
}
.dash-setup__step:first-child{ border-top:0; padding-top:0; }
.dash-setup__step.is-primary{
  margin:0 calc(var(--space-2) * -1);
  padding:var(--space-2);
  border-top:0;
  border-radius:var(--radius-md);
  border:0.5px solid color-mix(in srgb, var(--accent-base) 45%, var(--border-default));
  background:var(--accent-bg);
}
.dash-setup__step.is-primary + .dash-setup__step{ border-top:0; }
.dash-setup__icon{
  width:24px;height:24px;
  margin-top:2px;
  display:grid;place-items:center;
  border-radius:var(--radius-md);
  background:var(--bg-2);
  color:var(--text-2);
  flex-shrink:0;
  font-size:14px;
}
.dash-setup__step.is-primary .dash-setup__icon{
  background:color-mix(in srgb, var(--accent-base) 22%, transparent);
  color:var(--accent-text);
}
.dash-setup__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}
.dash-setup__copy{ min-width:0; }
.dash-setup__title{ margin:0; font-weight:500; line-height:1.25; }
.dash-setup__hint{ margin:1px 0 0; color:var(--text-3); line-height:1.3; }
.dash-setup__actions{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--space-2);
  margin:0;
}
.dash-setup__btn.btn,
.dash-setup .btn{
  font-weight:500;
}
.ch-toolbar-btn.btn,
.ch-toolbar-actions .btn{
  font-weight:500;
  font-size:var(--yama-text, 13px);
}
.dash-setup__skip{
  border:0; background:transparent; padding:0;
  font-family:var(--font-body);
  font-size:var(--yama-micro); color:var(--text-3);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
  white-space:nowrap;
}
.dash-setup__skip:hover{ color:var(--text-2); }
@media (min-width:768px){
  .dash-setup__body{
    flex-direction:row;
    align-items:center;
    gap:var(--space-2) var(--space-3);
  }
  .dash-setup__copy{ flex:1 1 12rem; }
  .dash-setup__actions{ margin-left:auto; flex-shrink:0; }
}

.yama-data-empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
}
.yama-data-empty__text{
  margin:0;
  color:var(--text-2);
  line-height:1.45;
}
.yama-data-empty__cta{
  margin-top:var(--space-1);
}
.yama-data-empty-card .yama-metric{
  font-size:var(--yama-metric);
  font-weight:500;
}
.dash-w-empty__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
  flex:1;
  min-height:0;
}
.dash-w-empty__ico{
  width:36px;height:36px;
  border-radius:var(--radius-md);
  display:grid;place-items:center;
  background:var(--bg-2);
  color:var(--text-3);
  font-size:18px;
}
.dash-w-empty__text{
  margin:0;
  color:var(--text-2);
  line-height:1.45;
  max-width:28rem;
}
.dash-w-empty__action{
  display:inline-flex;
  align-items:center;
  margin-top:2px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent-text);
  font-family:var(--font-body);
  font-size:var(--yama-text);
  font-weight:500;
  line-height:1.3;
  cursor:pointer;
  text-decoration:none;
  text-align:left;
}
.dash-w-empty__action:hover{
  color:var(--accent-strong);
  text-decoration:underline;
  text-underline-offset:2px;
}
.dash-w-empty__action--secondary{
  color:var(--text-2);
  font-weight:400;
}
.dash-w-wx__first-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  align-items:center;
}
.dash-w-n3--all-free .dash-w-n3__detail--all-free{
  width:100%;
}

@media (max-width: 899px) {
  .onb-overlay { padding: 0; align-items: stretch; }
  .onb-modal {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    grid-template-columns: 1fr;
    box-shadow: none;
  }
  .onb-rail {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: calc(10px + env(safe-area-inset-top, 0px)) var(--space-3) var(--space-3);
    min-height: 0;
  }
  .onb-rail__steps {
    flex-direction: row;
    flex: 1;
    margin-top: 0;
    gap: 0;
    overflow-x: auto;
  }
  .onb-rail__step {
    padding: var(--space-1);
    flex: 0 0 auto;
  }
  .onb-rail__copy,
  .onb-rail__note,
  .onb-rail__mount { display: none; }
  .onb-rail__num { width: 24px; height: 24px; font-size: 11px; }
  .onb-main__top { padding: var(--space-3) var(--space-4) var(--space-2); }
  .onb-main__scroll { padding: var(--space-2) var(--space-4) var(--space-4); }
  .onb-headline { font-size: 24px; }
  .onb-main__foot {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  .onb-main__foot .onb-skip { order: 3; width: 100%; margin: var(--space-1) 0 0; text-align: center; }
  .onb-btn-back { order: 1; }
  .onb-btn-next { order: 2; margin-left: auto; }
  .onb-sport-grid,
  .onb-goal-grid,
  .onb-connect-grid,
  .onb-fields__row { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .onb-modal { min-height: min(680px, calc(100dvh - 48px)); }
}

/* ── Trends: Trainings-Volumen ─────────────────────────────────────────── */
.trends-volume-card{
  padding:var(--space-4);
}
.trends-volume-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-bottom:var(--space-2);
}
.trends-volume-sub{
  margin:4px 0 0;
}
.trends-volume-stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3) var(--space-4);
  color:var(--text-2);
}
.trends-volume-stats .tabular{
  color:var(--neutral-800);
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.trends-volume-legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3) var(--space-4);
  margin-bottom:var(--space-3);
}
.trends-volume-legend > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.trends-volume-swatch{
  display:inline-block;
  flex:none;
}
.trends-volume-swatch--bar{
  width:10px;height:10px;
  border-radius:2px;
  background:var(--trends-bar);
}
.trends-volume-swatch--ma{
  width:14px;height:2px;
  background:var(--warning-base);
}
.trends-volume-swatch--race{
  width:8px;height:8px;
  background:var(--accent-base);
  transform:rotate(45deg);
}
.trends-volume-svg{
  width:100%;
  height:auto;
  display:block;
}
.trends-volume-svg .tv-axis{
  font-size:var(--yama-micro);
  fill:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.trends-volume-svg .tv-month{
  font-size:var(--yama-micro);
  fill:var(--text-2);
  font-weight:500;
}
.trends-volume-svg .tv-axis-title{
  font-size:var(--yama-micro);
  fill:var(--text-3);
}
.trends-volume-foot{
  margin:var(--space-2) 0 0;
}
.trends-volume-plot{
  position:relative;
}
.trends-volume-tip{
  position:absolute;
  display:none;
  pointer-events:none;
  z-index:10;
  min-width:140px;
  max-width:240px;
  padding:8px 10px;
  border-radius:var(--radius-md);
  border:0.5px solid var(--border-strong);
  background:var(--bg-1);
  box-shadow:var(--shadow-3);
  font-variant-numeric:tabular-nums;
}
.trends-volume-tip__title{
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--neutral-800);
  margin-bottom:4px;
}
.trends-volume-tip__row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.45;
}
.trends-volume-tip__row strong{
  color:var(--neutral-800);
  font-weight:500;
}
.trends-volume-tip__swatch{
  display:inline-block;
  flex:none;
}
.trends-volume-tip__swatch--bar{
  width:8px;height:8px;border-radius:2px;background:var(--trends-bar);
}
.trends-volume-tip__swatch--ma{
  width:12px;height:2px;background:var(--warning-base);
}
.trends-volume-tip__swatch--race{
  width:7px;height:7px;background:var(--accent-base);transform:rotate(45deg);
}

@media (max-width: 899px) {
  .trends-volume-card{ padding:var(--space-3); }
  .trends-volume-stats{ gap:var(--space-2) var(--space-3); }
}

/* ── Trends: Pace-Effizienz ────────────────────────────────────────────── */
.trends-pace-card{
  padding:var(--space-4);
}
.trends-pace-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.trends-pace-title-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.trends-pace-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  padding:0;
  border:none;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--text-3);
  cursor:help;
}
.trends-pace-info:hover{ color:var(--text-2); background:var(--bg-2); }
.trends-pace-sub{ margin:4px 0 0; color:var(--text-3); }
.trends-pace-current{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.trends-pace-metric{
  line-height:1.1;
  color:var(--neutral-800);
}
.trends-pace-metric .yama-micro{
  font-size:var(--yama-micro);
  font-weight:400;
  color:var(--text-3);
  margin-left:2px;
}
.trends-pace-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--yama-micro);
  font-weight:500;
  line-height:1.3;
}
.trends-pace-badge--up{
  background:var(--accent-soft);
  color:var(--trends-line);
}
.trends-pace-badge--down{
  background:var(--danger-bg);
  color:var(--danger-text);
}
.trends-pace-badge--flat{
  background:var(--bg-2);
  color:var(--text-2);
}
.trends-pace-svg{
  width:100%;
  height:auto;
  display:block;
}
.trends-pace-svg .tp-axis{
  font-size:var(--yama-micro);
  fill:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.trends-pace-svg .tp-axis-title{
  font-size:var(--yama-micro);
  fill:var(--text-3);
}
.trends-pace-svg .tp-last{
  font-size:var(--yama-micro);
  fill:var(--neutral-800);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.trends-pace-plot{ position:relative; }
.trends-pace-tip{
  position:absolute;
  display:none;
  pointer-events:none;
  z-index:10;
  min-width:120px;
  max-width:220px;
  padding:8px 10px;
  border-radius:var(--radius-md);
  border:0.5px solid var(--border-strong);
  background:var(--bg-1);
  box-shadow:var(--shadow-3);
  font-variant-numeric:tabular-nums;
}
.trends-pace-tip__title{
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--neutral-800);
  margin-bottom:4px;
}
.trends-pace-tip__row{
  font-size:var(--yama-micro);
  color:var(--text-2);
  line-height:1.45;
}
.trends-pace-tip__row strong{
  color:var(--neutral-800);
  font-weight:500;
}
.trends-pace-foot{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:var(--space-2) 0 0;
  color:var(--text-3);
  line-height:1.45;
}
.trends-pace-foot-icon{
  flex:none;
  margin-top:2px;
  color:var(--text-3);
}

@media (max-width: 899px) {
  .trends-pace-card{ padding:var(--space-3); }
  .trends-pace-current{ align-items:flex-start; text-align:left; }
}

/* ── Trends: VO₂max-Entwicklung ────────────────────────────────────────── */
.trends-vo2-card{
  padding:var(--space-4);
}
.trends-vo2-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.trends-vo2-sub{ margin:4px 0 0; color:var(--text-3); }
.trends-vo2-current{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.trends-vo2-current-row{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.trends-vo2-current-metric{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.trends-vo2-current-metric .yama-label{
  text-transform:none;
  letter-spacing:0;
}
.trends-vo2-metric{
  line-height:1.05;
  color:var(--neutral-800);
}
.trends-vo2-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--yama-micro);
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
}
.trends-vo2-badge--up{
  background:var(--accent-soft);
  color:var(--trends-line);
}
.trends-vo2-badge--down{
  background:var(--danger-bg);
  color:var(--danger-text);
}
.trends-vo2-badge--flat{
  background:var(--bg-2);
  color:var(--text-2);
}
.trends-vo2-svg{
  width:100%;
  height:auto;
  display:block;
}
.trends-vo2-svg .tv2-axis{
  font-size:var(--yama-micro);
  fill:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.trends-vo2-svg .tv2-axis-title{
  font-size:var(--yama-micro);
  fill:var(--text-3);
}
.trends-vo2-svg .tv2-val{
  font-size:var(--yama-micro);
  fill:var(--neutral-800);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.trends-vo2-plot{ position:relative; }
.trends-vo2-tip{
  position:absolute;
  display:none;
  pointer-events:none;
  z-index:10;
  min-width:72px;
  max-width:160px;
  padding:8px 10px;
  border-radius:var(--radius-md);
  border:0.5px solid var(--border-strong);
  background:var(--bg-1);
  box-shadow:var(--shadow-3);
  font-variant-numeric:tabular-nums;
}
.trends-vo2-tip__title{
  font-size:var(--yama-micro);
  font-weight:500;
  color:var(--neutral-800);
  margin-bottom:2px;
}
.trends-vo2-tip__row{
  font-size:var(--yama-text);
  color:var(--text-2);
}
.trends-vo2-tip__row strong{
  color:var(--neutral-800);
  font-weight:500;
}
.trends-vo2-foot{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:var(--space-2) 0 0;
  color:var(--text-3);
  line-height:1.45;
}
.trends-vo2-foot-icon{
  flex:none;
  margin-top:2px;
  color:var(--text-3);
}

@media (max-width: 899px) {
  .trends-vo2-card{ padding:var(--space-3); }
  .trends-vo2-current{ align-items:flex-start; }
  .trends-vo2-current-row{ flex-wrap:wrap; }
  .trends-vo2-current-metric{ align-items:flex-start; text-align:left; }
}

/* ── Diagnostik (Profil) ───────────────────────────────────────────────── */
.diag-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.diag-page-head .sub{ margin-top:4px; }
#diag-lactate-host,
.diag-page{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  width:100%;
  max-width:none;
}
.diag-page .profile-card,
.diag-page .card{
  margin-bottom:0;
}
.diag-card{
  padding:var(--space-4);
}
.diag-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.diag-card-sub{ margin:4px 0 0; color:var(--text-3); }

.diag-hero{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  flex-wrap:wrap;
}
.diag-hero-icon{
  width:44px;height:44px;
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  color:var(--trends-line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.diag-hero-body{ flex:1; min-width:140px; }
.diag-hero-metric{ margin-top:2px; color:var(--neutral-800); }
.diag-hero-side{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  margin-left:auto;
}
.diag-hero-delta{
  font-size:var(--yama-text);
  font-weight:500;
}
.diag-hero-delta--up{ color:var(--trends-line); }
.diag-hero-delta--down{ color:var(--danger-text); }
.diag-hero-meta{ color:var(--text-3); }

.diag-legend{
  display:flex;
  gap:var(--space-3);
  align-items:center;
  margin-bottom:var(--space-2);
  flex:none;
}
.diag-legend > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--text-sm);
  color:var(--text-2);
}
.diag-legend-swatch{
  display:inline-block;
  width:14px;height:2px;
  flex:none;
}
.diag-legend-swatch--lt2{ background:var(--trends-line); }
.diag-legend-swatch--lt1{
  background:transparent;
  border-top:2px dashed var(--neutral-400);
  height:0;
}
.diag-legend-swatch--thr1,
.diag-legend-swatch--thr2{
  background:transparent;
  height:0;
}
.diag-legend-swatch--thr1{ border-top:1px dotted var(--text-3); }
.diag-legend-swatch--thr2{ border-top:2px dashed var(--text-3); }
.diag-delta-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--yama-micro);
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
  flex:none;
}
.diag-delta-badge--up{
  background:var(--accent-soft);
  color:var(--trends-line);
}
.diag-delta-badge--down{
  background:var(--danger-bg);
  color:var(--danger-text);
}
.diag-delta-badge--flat{
  background:var(--bg-2);
  color:var(--text-2);
}
.diag-hist-stack{ display:flex; flex-direction:column; gap:var(--space-4); }
.diag-hist-block{ min-width:0; }
.diag-chart-wrap{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:220px;
  max-width:100%;
  position:relative;
}
.diag-chart-plot{
  flex:1 1 auto;
  min-height:220px;
  width:100%;
  position:relative;
}
.diag-chart-svg,
.diag-chart-plot > svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.diag-chart-axis,
.diag-chart-axis-title,
.diag-chart-val,
.diag-chart-vline{
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
}
.diag-chart-axis{
  font-size:var(--text-xs);
  fill:var(--text-3);
}
.diag-chart-axis-title{
  font-size:var(--text-sm);
  fill:var(--text-2);
}
.diag-chart-val{
  font-size:var(--text-sm);
  font-weight:500;
  fill:var(--text);
}
.diag-chart-vline{
  font-size:var(--text-xs);
  font-weight:500;
}
.diag-hist-tip{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  background:var(--neutral-800);
  color:var(--neutral-0);
  font-size:var(--yama-micro);
  font-family:inherit;
  padding:4px 9px;
  border-radius:var(--radius-md);
  white-space:nowrap;
  box-shadow:var(--shadow-3);
  transform:translate(-50%,-130%);
  opacity:0;
  transition:opacity .08s;
}

.diag-cmp-stack{ display:flex; flex-direction:column; gap:var(--space-4); }
.diag-cmp-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.diag-select{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.diag-cmp-body{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.diag-cmp-foot{
  margin:0 0 var(--space-2);
  color:var(--text-3);
  font-size:var(--text-sm);
  line-height:1.45;
  flex:none;
}
.diag-cmp-table{
  width:100%;
  border-collapse:collapse;
  margin-top:var(--space-3);
  font-size:var(--yama-text);
}
.diag-cmp-table th,
.diag-cmp-table td{
  padding:6px 4px;
  border-bottom:0.5px solid var(--border-default);
}
.diag-cmp-table th{
  font-weight:500;
  color:var(--text-3);
  text-align:left;
}
.diag-cmp-table th.diag-cmp-a,
.diag-cmp-table td.diag-cmp-a{
  text-align:right;
  color:var(--trends-line);
  font-weight:500;
}
.diag-cmp-table th.diag-cmp-b,
.diag-cmp-table td.diag-cmp-b{
  text-align:right;
  color:var(--text-2);
  font-weight:500;
}
.diag-cmp-label{ color:var(--text-3); }
.diag-cmp-note{ margin-top:4px; color:var(--text-3); }
.diag-callout{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:var(--space-2);
  padding:10px 12px;
  border-radius:var(--radius-md);
  background:var(--bg-2);
  color:var(--text-2);
  font-size:var(--text-sm);
  line-height:1.45;
  flex:none;
}
.diag-callout--warn{ background:var(--warning-bg); color:var(--warning-text); }
.diag-callout svg{ flex:none; margin-top:1px; }

.diag-fvl-empty{ color:var(--text-3); margin:0; }

.diag-tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-2);
}
.diag-tile{
  padding:var(--space-4);
  min-width:0;
}
button.diag-tile{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.diag-tile-value{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:4px 0 6px;
}
/* Globale Mono-Regel ([class*="-value"], [class*="-num"]) gilt in der Diagnostik nicht */
.diag-tile,
.diag-tile-value,
.diag-table .tabular-nums,
.diag-card [class*="-val"],
.diag-card [class*="-num"]{
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
}
.diag-tile-meta{ margin-bottom:var(--space-1); }
.diag-tile-label{ text-transform:none; letter-spacing:0; }
.diag-tile-empty{
  color:var(--text-3);
  margin-top:var(--space-2);
}
.diag-tile-main{
  margin:4px 0 6px;
  font-variant-numeric:tabular-nums;
  font-family:var(--font-body);
}
.diag-tile-profile{
  color:var(--text-3);
  margin-bottom:4px;
}
.diag-tile-stale{
  color:var(--text-3);
  margin-top:4px;
}
.diag-tile-link{
  display:inline;
  padding:0;
  border:none;
  background:none;
  font:inherit;
  font-size:inherit;
  color:var(--accent-text);
  cursor:pointer;
  text-decoration:none;
}
.diag-tile-link:hover{ text-decoration:underline; }
.diag-tile-delta{font-weight:500}
.diag-tile-delta--up{color:var(--trends-line)}
.diag-tile-delta--down{color:var(--warning-text)}
.diag-charts-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2);
  align-items:stretch;
}
.diag-chart-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:380px;
  height:100%;
}
.diag-chart-body{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.diag-chart-card .diag-chart-wrap{flex:1}
.diag-chart-empty{
  color:var(--text-3);
  margin:auto 0;
}
.diag-sport-seg{flex:none}
.diag-local-bar{
  display:flex;
  justify-content:flex-end;
}
.diag-table-wrap{overflow-x:auto}
.diag-table,
.diag-table th,
.diag-table td,
.diag-table .tabular-nums{
  font-family:var(--font-body);
}
.diag-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--yama-text);
}
.diag-table th{
  font-size:var(--yama-label);
  font-weight:400;
  letter-spacing:.06em;
  color:var(--text-3);
  text-align:left;
  padding:8px 10px 8px 0;
  border-bottom:0.5px solid var(--border);
}
.diag-table td{
  padding:10px 10px 10px 0;
  border-bottom:0.5px solid var(--border);
  font-variant-numeric:tabular-nums;
}
.diag-table-more{
  width:44px;
  text-align:right;
  padding-right:0;
}
.diag-table-empty{color:var(--text-3)}
.diag-more{position:relative;display:inline-flex;justify-content:flex-end}
.diag-more-btn{
  width:36px;height:36px;
  border:none;
  background:transparent;
  color:var(--text-2);
  border-radius:var(--radius-md);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.diag-more-pop{
  position:absolute;
  right:0;
  top:100%;
  min-width:148px;
  background:var(--bg-1);
  border:0.5px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
  padding:4px;
  z-index:5;
}
.diag-more-pop button{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:none;
  padding:8px 10px;
  font:inherit;
  font-size:var(--yama-text);
  color:var(--text);
  border-radius:var(--radius-md);
  cursor:pointer;
}
.diag-more-pop .diag-more-danger{color:var(--danger-text)}
.diag-list{
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:0.5px solid var(--border-default);
}
.diag-list-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  padding:12px 0;
  border-bottom:0.5px solid var(--border-default);
}
.diag-list-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-align:left;
  color:inherit;
  font:inherit;
}
.diag-list-icon{
  width:36px;height:36px;
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  color:var(--trends-line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.diag-list-body{ min-width:0; }
.diag-list-actions{
  display:flex;
  gap:2px;
  flex:none;
}
.diag-list-detail{
  grid-column:1 / -1;
  padding-top:10px;
  border-top:0.5px solid var(--border-default);
  margin-top:4px;
}
.lac-row-arrow{
  color:var(--text-3);
  flex:none;
  transition:transform 0.18s ease;
}

@media (max-width: 1099px) {
  .diag-tiles{ grid-template-columns:1fr 1fr; }
  .diag-charts-row{ grid-template-columns:1fr; }
  .diag-chart-card{ min-height:300px; }
}
@media (max-width: 899px) {
  .diag-card,
  .diag-tile{ padding:var(--space-3); }
  .diag-hero{ padding:var(--space-3); }
  .diag-hero-side{ align-items:flex-start; text-align:left; margin-left:0; width:100%; }
  .diag-cmp-controls{ grid-template-columns:1fr; }
}

/* ── Trainingszonen (Profil) ───────────────────────────────────────────── */
.tz-page{ display:flex; flex-direction:column; gap:var(--space-2); }
.tz-page-head{ margin-bottom:var(--space-1); }
.tz-page-head .sub{ margin-top:4px; }
.tz-form{ display:flex; flex-direction:column; gap:var(--space-2); }

.tz-basis-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-3);
  padding:var(--space-4);
  min-width:0;
}
.tz-basis-intro{ margin:4px 0 0; color:var(--text-3); }
.tz-basis-grid,
.tz-field-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-3);
  min-width:0;
}
.tz-field{ min-width:0; }
.tz-field-box{
  position:relative;
  display:flex;
  align-items:center;
  margin-top:4px;
}
.tz-field-box .form-input{
  width:100%;
  padding-right:var(--space-7);
  font-variant-numeric:tabular-nums;
}
.tz-field-unit{
  position:absolute;
  right:10px;
  color:var(--text-3);
  pointer-events:none;
}
.tz-sport-head{
  font-weight:600;
  color:var(--neutral-800);
}
.tz-basis-metrics{
  display:flex;
  align-items:stretch;
  gap:var(--space-3);
}
.tz-basis-metric{ min-width:88px; }
.tz-hrmax-source{
  margin-top:6px;
  color:var(--text-3);
  max-width:14rem;
  line-height:1.3;
}
.tz-hrmax-source--missing{ color:var(--warning-text, var(--text-2)); }
.tz-hrmax-source__btn{
  border:0; background:transparent; padding:0; margin:0;
  font:inherit; font-size:inherit; color:var(--accent-text);
  cursor:pointer; text-align:left; text-decoration:underline;
  text-underline-offset:2px;
}
.tz-hrmax-source__btn:hover{ color:var(--accent-strong); }
.tz-basis-input-row{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:4px;
}
.tz-basis-input{
  width:100%;
  padding:9px 12px;
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.tz-basis-divider{
  width:1px;
  background:var(--border-default);
  align-self:stretch;
}

.tz-sports-card{ padding:0; overflow:hidden; }
.tz-sport-tabs{
  display:flex;
  gap:0;
  border-bottom:0.5px solid var(--border-default);
  padding:0 var(--space-2);
}
.tz-sport-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border:none;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:var(--yama-text);
  font-weight:500;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tz-sport-tab.is-active{
  color:var(--trends-line);
  border-bottom-color:var(--trends-line);
}
.tz-sport-tab-icon{
  display:inline-flex;
  color:inherit;
}
.tz-sport-panel{ padding:var(--space-4); }
.tz-sport-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.tz-sport-panel-sub{ margin:4px 0 0; color:var(--text-3); }

.tz-metric-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}
.tz-metric-card{
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-3);
  background:var(--bg-1);
}
.tz-metric-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.tz-source-badge{
  display:inline-flex;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  border:0.5px solid var(--trends-line);
  color:var(--trends-line);
  font-size:var(--yama-micro);
  font-weight:500;
}
.tz-source-switch{ display:flex; gap:4px; flex-wrap:nowrap; }
.tz-source-pill{
  padding:2px 8px;
  border-radius:var(--radius-pill);
  border:0.5px solid var(--border-default);
  background:transparent;
  color:var(--text-3);
  font-size:var(--yama-micro);
  font-weight:500;
  cursor:pointer;
}
.tz-source-pill.is-active{
  border-color:var(--trends-line);
  background:var(--accent-soft);
  color:var(--trends-line);
  cursor:default;
}
.tz-metric-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  margin-bottom:var(--space-2);
  padding-bottom:8px;
  border-bottom:0.5px solid var(--border-default);
}
.tz-metric-meta strong{
  font-weight:500;
  color:var(--neutral-800);
  font-size:var(--yama-text);
}
.tz-zone-list{ display:flex; flex-direction:column; gap:2px; }
.tz-zone-row{
  display:grid;
  grid-template-columns:6px 1fr auto;
  align-items:center;
  gap:10px;
  padding:6px 0;
}
.tz-zone-bar{
  width:4px;
  height:18px;
  border-radius:var(--radius-pill);
  background:var(--trends-line);
}
.tz-zone-bar--z1{ background:var(--trends-line); opacity:0.55; }
.tz-zone-bar--z2{ background:var(--trends-line); opacity:0.7; }
.tz-zone-bar--z3{ background:var(--trends-bar); }
.tz-zone-bar--z4{ background:var(--trends-bar); filter:brightness(1.08); }
.tz-zone-bar--z5{ background:var(--accent-base); }
.tz-zone-name{
  font-size:var(--yama-text);
  color:var(--text-2);
}
.tz-zone-val{
  font-size:var(--yama-text);
  color:var(--neutral-800);
  font-weight:500;
}

.tz-thresholds{
  padding:0;
  overflow:hidden;
}
.tz-thresholds-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  cursor:pointer;
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-800);
}
.tz-thresholds-summary::-webkit-details-marker{ display:none; }
.tz-thresholds-summary-left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.tz-thresholds-summary-left svg{ color:var(--text-3); }
.tz-thresholds-chevron{
  color:var(--text-3);
  transition:transform 0.15s ease;
}
.tz-thresholds[open] .tz-thresholds-chevron{ transform:rotate(180deg); }
.tz-thresholds-body{
  padding:0 var(--space-4) var(--space-4);
  border-top:0.5px solid var(--border-default);
}
.tz-thresholds-intro{ margin:var(--space-2) 0 var(--space-3); color:var(--text-3); }
.tz-thresholds-grid{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  align-items:stretch;
  min-width:0;
}
.tz-thresholds-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.tz-thresholds-col + .tz-thresholds-col{
  border-top:0.5px solid var(--border-default);
  padding-top:var(--space-3);
}
.tz-thresholds-col .yama-label{ margin:0; display:block; }
.tz-thresholds-col .form-group{ margin:0; }
.tz-thresholds-col .form-label{
  font-size:var(--yama-micro);
  color:var(--text-3);
  margin-bottom:4px;
}
.tz-thresholds-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:var(--space-3);
}

@media (max-width: 899px) {
  .tz-basis-card{ align-items:flex-start; }
  .tz-metric-grid{ grid-template-columns:1fr; }
  .tz-sport-tabs{ overflow-x:auto; }
}
@media (max-width: 599px) {
  .tz-basis-grid,
  .tz-field-row{ gap:var(--space-2); }
}

/* ── Saisonziele ───────────────────────────────────────────────────────── */
.goals-page{ display:flex; flex-direction:column; gap:var(--space-3); }
.goals-page-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.goals-page-sub{ margin:4px 0 0; color:var(--text-3); }
.goals-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.goals-section-count{ color:var(--text-3); }
.goals-active-stack{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.goals-card{
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  cursor:pointer;
}
.goals-card--near{
  border-color:var(--trends-line);
}
.goals-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}
.goals-card-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
}
.goals-card-meta .ti{ color:var(--trends-line); font-size:15px; }
.goals-card-title{ margin:0; color:var(--neutral-800); }
.goals-card-actions{ display:inline-flex; gap:2px; }
.goals-icon-btn{
  width:32px;height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--text-3);
  border-radius:var(--radius-md);
  cursor:pointer;
}
.goals-icon-btn:hover{ background:var(--bg-2); color:var(--text-2); }
.goals-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--yama-micro);
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
}
.goals-badge--near{
  background:var(--accent-soft);
  color:var(--trends-line);
}
.goals-compare{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.goals-compare-side{ min-width:0; }
.goals-compare-side--target{ margin-left:auto; text-align:right; }
.goals-compare-val{ margin-top:2px; }
.goals-compare-arrow{
  color:var(--trends-line);
  font-size:var(--yama-title);
  font-weight:500;
  flex:none;
}
.goals-empty-state{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.goals-empty-dot{
  width:14px;height:14px;
  margin-top:3px;
  border:1.5px dashed var(--neutral-400);
  border-radius:50%;
  flex:none;
}
.goals-progress-block{ display:flex; flex-direction:column; gap:6px; }
.goals-progress-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.goals-progress-bar{
  height:6px;
  background:var(--bg-2);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.goals-progress-fill{
  height:100%;
  background:var(--trends-line);
  border-radius:var(--radius-pill);
}
.goals-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.goals-gap{ color:var(--trends-line); font-weight:500; }
.goals-empty{ padding:var(--space-4); text-align:center; }

.goals-achieved{ padding:0; overflow:hidden; }
.goals-active-stack + .goals-achieved{ margin-top: var(--space-4); }
.goals-achieved-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  cursor:pointer;
}
.goals-achieved-summary::-webkit-details-marker{ display:none; }
.goals-achieved-summary-left{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.goals-achieved-summary-left > svg{ color:var(--trends-line); flex:none; }
.goals-achieved-chevron{
  color:var(--text-3);
  transition:transform 0.15s ease;
  flex:none;
}
.goals-achieved[open] .goals-achieved-chevron{ transform:rotate(180deg); }
.goals-achieved-list{
  border-top:0.5px solid var(--border-default);
}
.goals-achieved-row{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px var(--space-4);
  border:none;
  border-bottom:0.5px solid var(--border-default);
  background:transparent;
  text-align:left;
  cursor:pointer;
  color:inherit;
  font:inherit;
}
.goals-achieved-row:last-child{ border-bottom:none; }
.goals-achieved-check{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--trends-line);
  color:var(--neutral-0);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.goals-achieved-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.goals-achieved-result{ color:var(--text-3); }
.goals-achieved-date{ color:var(--text-3); white-space:nowrap; }

@media (max-width: 899px) {
  .goals-card{ padding:var(--space-3); }
}

/* ── Long-Runs Histogramm (Race Shape) ─────────────────────────────────── */
.lr-hist{
  padding:var(--space-4);
  border:0.5px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--bg-1);
}
.lr-hist-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.lr-hist-meta{ margin:0; color:var(--text-3); }
.lr-hist-plot{ overflow-x:auto; max-width:100%; }
.lr-hist-svg{ width:100%; height:auto; display:block; }
.lr-hist-grid{
  stroke:var(--border-default);
  stroke-width:0.5;
}
.lr-hist-axis{
  font-size:var(--yama-micro);
  fill:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.lr-hist-axis-title{
  font-size:var(--yama-micro);
  fill:var(--text-3);
}
.lr-hist-val{
  font-size:var(--yama-micro);
  font-weight:500;
  fill:var(--neutral-800);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.lr-hist-thresh{
  stroke:var(--neutral-500);
  stroke-width:1;
  stroke-dasharray:2 3;
  opacity:0.7;
}
.lr-hist-ziel{
  stroke:var(--neutral-800);
  stroke-width:1.25;
  stroke-dasharray:5 4;
}
.lr-hist-ziel-lbl{
  font-size:var(--yama-micro);
  fill:var(--neutral-800);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.lr-hist-legend{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  align-items:center;
  margin:0 0 var(--space-2);
}
.lr-hist-legend > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--yama-micro);
  color:var(--text-2);
}
.lr-hist-swatch{
  display:inline-block;
  width:10px;height:10px;
  border-radius:2px;
  flex:none;
}
.lr-hist-swatch--ok{ background:var(--info-base); }
.lr-hist-swatch--short{ background:var(--trends-bar); }
.lr-hist-swatch--empty{ background:var(--neutral-300); }

@media (max-width: 899px) {
  .lr-hist{ padding:var(--space-3); }
}

/* Prognosen: Long-Run-Histogramm und Shape-Trend nebeneinander */
.shape-chart-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-2);
  margin-bottom:var(--space-5);
  align-items:stretch;
}
.shape-chart-pair > *{ min-width:0; }
.shape-chart-pair > .lr-hist{ height:100%; box-sizing:border-box; }
.shape-chart-pair > .lr-hist:has(.shape-trend-plot){
  display:flex;
  flex-direction:column;
}
.shape-trend-plot{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  aspect-ratio:640 / 248;
}
.shape-trend-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.shape-trend-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.shape-trend-grid{
  stroke:var(--border-default);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.shape-trend-grid.is-100{
  stroke:var(--accent-strong);
  stroke-dasharray:4 3;
  opacity:0.6;
}
.shape-trend-line{
  fill:none;
  stroke:var(--accent-strong);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.shape-trend-tick{
  stroke:var(--text-3);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.shape-trend-ylab,
.shape-trend-xlab{
  position:absolute;
  font-size:var(--yama-micro);
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.shape-trend-ylab{ transform:translate(-100%, -50%); }
.shape-trend-ylab.is-100{
  color:var(--accent-strong);
  font-weight:500;
}
.shape-trend-xlab{ transform:translate(-50%, -100%); }
.shape-trend-dot{
  position:absolute;
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  appearance:none;
  line-height:0;
  transform:translate(-50%, -50%);
  pointer-events:auto;
  cursor:pointer;
}
.shape-trend-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  transform:translate(-50%, -50%);
  border:2px solid var(--accent-strong);
  border-radius:var(--radius-pill);
  background:var(--bg-1);
  box-sizing:border-box;
}
.shape-trend-dot.is-last::after{
  width:10px;
  height:10px;
}
@media (min-width: 900px) {
  .shape-chart-pair > .lr-hist:has(.shape-trend-plot) .shape-trend-plot{
    flex:1 1 0;
    min-height:0;
    aspect-ratio:auto;
  }
}
.shape-chart-pair:has(> :only-child){
  grid-template-columns:minmax(0, 1fr);
}
@media (max-width: 899px) {
  .shape-chart-pair{ grid-template-columns:minmax(0, 1fr); }
}

/* Trends: Form+Volumen und VO2max+Pace nebeneinander */
.trends-chart-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-2);
  margin-bottom:var(--space-5);
  align-items:stretch;
}
.trends-chart-pair > *{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.trends-chart-pair > * > .card{
  flex:1 1 auto;
  box-sizing:border-box;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-self:stretch;
}
@media (max-width: 899px) {
  .trends-chart-pair{ grid-template-columns:minmax(0, 1fr); }
}

/* Gemeinsame Trend-Karte: Kopf / wachsender Chart / Fuß */
.trends-card{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
  align-self:stretch;
  box-sizing:border-box;
}
.trends-card__head{ flex:0 0 auto; }
.trends-card__mid{
  flex:1 1 auto;
  min-height:220px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.trends-card--general .trends-card__mid{ min-height:260px; }
.trends-card--run .trends-card__mid,
.trends-card--bike .trends-card__mid,
.trends-card--swim .trends-card__mid{ min-height:220px; }
.trends-card--empty .trends-card__mid{
  min-height:220px;
  display:flex;
  align-items:center;
}
.trends-card--general.trends-card--empty .trends-card__mid{ min-height:260px; }
.trends-empty{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.trends-empty__txt{
  margin:0;
  color:var(--text-2);
}
.trends-empty__link{
  align-self:flex-start;
  padding:0;
  border:0;
  background:none;
  color:var(--accent-text);
  font:inherit;
  font-size:var(--yama-text);
  font-weight:500;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.trends-card__mid:empty{
  display:none;
  min-height:0;
  flex:0 0 auto;
}
.trends-card__mid > .trends-axis-plot,
.trends-card__mid > .form-trend-plot,
.trends-card__mid > .trends-volume-plot,
.trends-card__mid > .trends-vo2-plot,
.trends-card__mid > .trends-pace-plot{
  flex:1 1 auto;
  min-height:220px;
  width:100%;
}
.trends-card--general .trends-card__mid > .form-trend-plot,
.trends-card--general .trends-card__mid > .trends-volume-plot,
.trends-card--general .trends-card__mid > .trends-axis-plot{
  min-height:260px;
}
.trends-card__mid > .trends-volume-plot,
.trends-card__mid > .trends-vo2-plot,
.trends-card__mid > .trends-pace-plot{
  position:relative;
}
.trends-card__mid > .trends-volume-plot > svg,
.trends-card__mid > .trends-vo2-plot > svg,
.trends-card__mid > .trends-pace-plot > svg,
.trends-card__mid > .trends-axis-plot > svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.trends-card__foot{
  flex:0 0 auto;
  margin-top:auto;
}
.trends-card__foot--axis{
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
/* Achsen-Overlay der Trend-Charts — gilt auch ohne body.layout-v2 (Prod, native App). */
#an-section-trends .trends-sec{ padding:0; }
#an-section-trends .trends-sec + .trends-sec{ margin-top:var(--space-6); }
#an-section-trends .trends-sec[hidden]{ display:none; }
.trends-axis-plot{
  position:relative;
  width:100%;
}
.trends-axis-plot svg line,
.trends-axis-plot svg polyline,
.trends-axis-plot svg path{
  vector-effect:non-scaling-stroke;
}
.trends-axis-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.trends-axis{
  position:absolute;
  white-space:nowrap;
  font-size:var(--yama-micro);
  line-height:1;
  color:var(--trend-axis);
  font-variant-numeric:tabular-nums;
}
.trends-axis--y{ transform:translate(-100%,-50%); }
.trends-axis--x{ transform:translate(-50%,-100%); }
.trends-axis--start{ transform:translate(0,-100%); }
.trends-axis--end{ transform:translate(-100%,-50%); }
.trends-axis--xend{ transform:translate(-100%,-100%); }
.trends-card__axis .trends-axis--x{ transform:translate(-50%,0); }
.trends-card__axis .trends-axis--start{ transform:none; }
.trends-card__axis .trends-axis--xend{ transform:translate(-100%,0); }
.trends-axis-dot{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-strong);
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
.trends-card__mid--rows{
  justify-content:space-between;
  gap:0;
}
.trends-card__mid--rows .trends-bike-row{
  flex:1 1 0;
  min-height:28px;
}
.trends-card__mid--rows .trends-bike-row__track{
  height:11px;
}
.trends-card__axis{
  position:relative;
  width:100%;
  min-height:1.2em;
}
.trends-card__axis .trends-axis{
  top:0;
}
.trends-card__foot .trends-pc{
  margin-top:0;
  padding-top:0;
  border-top:0;
  width:100%;
}
.trends-card__foot .trends-verdict,
.trends-card__foot .trends-decouple{
  margin-top:0;
}
.trends-card__foot .trends-decouple-tbl{ margin-top:var(--space-2); }
.trends-card.trends-skel .trends-skel__plot{
  flex:1 1 auto;
  min-height:132px;
  height:auto;
  margin-top:0;
}

/* Form-Verlauf füllt die Kartenhöhe neben Trainings-Volumen.
   Achsenbeschriftung liegt als HTML darüber, damit sie beim Strecken nicht verzerrt. */
.form-trend-card{
  box-sizing:border-box;
}
.form-trend-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.form-trend-head,
.form-trend-note{
  flex:none;
}
.form-trend-note{
  margin:var(--space-1) 0 0;
  color:var(--text-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.form-trend-zonelab{
  transform:translate(-100%, -50%);
  color:var(--text-3);
  padding-right:6px;
}
.form-trend-legend__race{
  display:inline-block;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:7px solid var(--trend-mean);
  vertical-align:middle;
  margin-right:6px;
}
.trends-vol-axis__kw,
.trends-vol-axis__mo{
  position:relative;
  height:1.2em;
}
.form-trend-plot{
  position:relative;
  width:100%;
}
.form-trend-plot > svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.form-trend-plot svg line,
.form-trend-plot svg polyline{
  vector-effect:non-scaling-stroke;
}
.form-trend-plot .form-trend-hit{
  pointer-events:all;
}
.form-trend-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.form-trend-ylab,
.form-trend-xlab,
.form-trend-bandlab,
.form-trend-vlab,
.form-trend-zonelab{
  position:absolute;
  line-height:1;
  white-space:nowrap;
  color:var(--text-3);
}
.form-trend-ylab{
  transform:translate(-100%, -50%);
  color:var(--neutral-500);
}
.form-trend-xlab{
  transform:translate(-50%, -0.85em);
  color:var(--neutral-500);
}
.form-trend-vlab{
  font-weight:600;
}
.form-trend-vlab--start{ transform:translate(0, -0.85em); }
.form-trend-vlab--end{ transform:translate(-100%, -0.85em); }
@media (min-width: 900px) {
  .trends-chart-pair > #trends-form-section > .form-trend-card{
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .trends-chart-pair > #trends-form-section .form-trend-plot{
    flex:1 1 0;
    min-height:260px;
  }
}

/* Rad-Paar: Power-Entwicklung und Saison-Vergleich, Plot flacher als volle Breite */
.card.trends-bike-card{
  padding:var(--space-4);
}
.trends-bike-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
  min-width:0;
}
.trends-bike-kicker{
  font-size:var(--yama-text);
  font-weight:500;
  color:var(--neutral-700);
}
.trends-bike-legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1) var(--space-3);
  min-width:0;
}
.trends-bike-legend > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.trends-bike-swatch{
  display:inline-block;
  width:10px;
  height:2px;
  flex:none;
  background:var(--accent-strong);
}
.trends-bike-swatch--90{ background:var(--warning-base); }
.trends-bike-swatch--365{ background:var(--neutral-400); }
.trends-bike-swatch--box{
  width:10px;
  height:10px;
  border-radius:2px;
}
.trends-bike-swatch--fresh{
  background:var(--accent-base);
  opacity:0.6;
}
.trends-bike-swatch--fatigue{ background:var(--accent-strong); }
.trends-bike-plot{
  width:100%;
  min-width:0;
  overflow:visible;
}
.trends-bike-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.trends-bike-svg .trends-bike-axis{
  fill:var(--text-3);
  font-size:var(--yama-micro);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.trends-bike-svg .trends-bike-ftp{
  fill:var(--danger);
  font-size:var(--yama-micro);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.trends-bike-section{
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--border);
}
.trends-bike-card > .trends-bike-section:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.trends-bike-row{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
  padding:1px 0;
  color:var(--neutral-700);
}
.trends-bike-row__dur{
  width:3.4em;
  flex:none;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.trends-bike-row__sub{
  flex:none;
  color:var(--text-3);
  font-size:var(--yama-micro);
  white-space:nowrap;
}
.trends-bike-row__track{
  flex:1 1 auto;
  min-width:2.5em;
  height:12px;
  background:var(--bg-2);
  border-radius:var(--radius-xs);
  overflow:hidden;
  position:relative;
}
.trends-bike-row__fill{
  height:100%;
  border-radius:var(--radius-xs);
  background:linear-gradient(90deg, var(--accent-strong), var(--accent-base));
}
.trends-bike-row__fill--fresh,
.trends-bike-row__fill--fatigue{
  position:absolute;
  top:0;
  left:0;
  background:var(--accent-strong);
}
.trends-bike-row__fill--fresh{
  background:var(--accent-base);
  opacity:0.6;
}
.trends-bike-row__val{
  flex:none;
  min-width:3.6em;
  text-align:right;
  font-weight:500;
  color:var(--neutral-800);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.trends-bike-row__wkg,
.trends-bike-row__delta{
  flex:none;
  min-width:3.2em;
  text-align:right;
  color:var(--text-3);
  font-size:var(--yama-micro);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.trends-bike-row__delta{ font-weight:500; }
@media (max-width: 899px) {
  .card.trends-bike-card{ padding:var(--space-3); }
}

/* ── Radraum Höhenprofil (Strecke fahren) ─────────────────────────────────── */
.rr-ep-panel{
  display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
}
.rr-ep-panel-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
}
.rr-ep-panel.is-desktop .rr-ep-panel-top{display:none}
.rr-ep-grade-now{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--yama-metric);font-weight:500;color:var(--rr-grade-flat);line-height:1.1;
}
.rr-ep-grade-now[data-band="down"]{color:var(--rr-grade-down)}
.rr-ep-grade-now[data-band="flat"]{color:var(--rr-grade-flat)}
.rr-ep-grade-now[data-band="mod"]{color:var(--rr-grade-mod)}
.rr-ep-grade-now[data-band="steep"]{color:var(--rr-grade-steep)}
.rr-ep-grade-now[data-band="very"]{color:var(--rr-grade-very)}
.rr-ep-meta{
  font-family:var(--font-mono);font-size:var(--yama-label);letter-spacing:.04em;
  color:var(--text-3);font-variant-numeric:tabular-nums;
}
.rr-ep-overview-wrap{position:relative}
.rr-ep-overview{display:block;width:100%;border-radius:var(--radius-md);overflow:hidden}
.rr-ep-overview-stats{
  position:absolute;top:4px;right:8px;font-family:var(--font-mono);font-size:var(--yama-micro);
  color:var(--text-3);font-variant-numeric:tabular-nums;pointer-events:none;
}
.rr-ep-preview-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,180px);
  gap:var(--space-3);align-items:stretch;
}
.rr-ep-panel.is-mobile .rr-ep-preview-row{grid-template-columns:1fr}
.rr-ep-panel.is-mobile .rr-ep-side{display:none}
.rr-ep-panel.is-mobile .rr-ep-legend{display:none}
.rr-ep-panel.is-desktop .rr-ep-next-mobile{display:none}
.rr-ep-preview-wrap{min-width:0}
.rr-ep-preview{display:block;width:100%}
.rr-ep-legend{
  display:flex;flex-direction:column;gap:4px;margin-top:6px;
  font-family:var(--font-mono);font-size:var(--yama-micro);color:var(--text-3);
}
.rr-ep-legend-bar{
  display:block;height:8px;border-radius:var(--radius-pill);width:100%;max-width:220px;
  background:linear-gradient(to right,
    var(--rr-grade-down) 0%,
    var(--rr-grade-flat) 22%,
    var(--rr-grade-mod) 48%,
    var(--rr-grade-steep) 72%,
    var(--rr-grade-very) 100%);
}
.rr-ep-legend-ends{display:flex;justify-content:space-between;max-width:220px}
.rr-ep-swatch{display:inline-block;width:10px;height:10px;border-radius:2px}
.rr-ep-swatch--down{background:var(--rr-grade-down)}
.rr-ep-swatch--flat{background:var(--rr-grade-flat)}
.rr-ep-swatch--mod{background:var(--rr-grade-mod)}
.rr-ep-swatch--steep{background:var(--rr-grade-steep)}
.rr-ep-swatch--very{background:var(--rr-grade-very)}
.rr-ep-side{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2) 0}
.rr-ep-side .lbl,.rr-ep-next .lbl{
  font-family:var(--font-mono);font-size:var(--yama-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:4px;
}
.rr-ep-side-grade .v,.rr-ep-side-elev .v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--yama-title);font-weight:500;line-height:1.15;
}
.rr-ep-side-grade .v[data-band="down"]{color:var(--rr-grade-down)}
.rr-ep-side-grade .v[data-band="flat"]{color:var(--rr-grade-flat)}
.rr-ep-side-grade .v[data-band="mod"]{color:var(--rr-grade-mod)}
.rr-ep-side-grade .v[data-band="steep"]{color:var(--rr-grade-steep)}
.rr-ep-side-grade .v[data-band="very"]{color:var(--rr-grade-very)}
.rr-ep-next{padding-top:var(--space-2);border-top:1px solid var(--border)}
.rr-ep-next-body,.rr-ep-next-mobile{
  font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.35;
  font-variant-numeric:tabular-nums;color:var(--text-2);
}
.rr-ep-next-l1,.rr-ep-next-l2{display:block}
.rr-ep-next-l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-ep-next-l2{opacity:.85;margin-top:2px;white-space:normal;overflow:visible;line-height:1.35}
.rr-ep-next-mobile{
  padding-top:var(--space-2);border-top:1px solid var(--border);
  display:flex;gap:8px;align-items:flex-start;
}
.rr-ep-next-m-txt{min-width:0;flex:1}
.rr-ep-next-ico{color:var(--rr-grade-steep);font-weight:600}
.rr-ep-xaxis,.rr-ep-yaxis{
  font-family:var(--font-mono);font-size:var(--yama-micro);fill:var(--text-3);
}
.rr-ep-climb-lbl{
  font-family:var(--font-mono);font-size:var(--yama-micro);font-weight:500;
}

/* Fahransicht Route — Profilkarte (flex, 100vh-Zeile) */
.rr-ep-ride{
  display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;height:100%;
  padding:0;background:transparent;border:0;box-shadow:none;
}
.rr-ep-ride-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex:0 0 auto;min-width:0;
}
.rr-ep-ride-next,.rr-ep-ride-gain{
  font-family:var(--font-mono);font-size:var(--yama-label);letter-spacing:.02em;
  color:var(--text-2);font-variant-numeric:tabular-nums;line-height:1.25;
}
.rr-ep-ride-next{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-ep-ride-gain{flex:0 0 auto;white-space:nowrap}
.rr-ep-ride-pv{flex:1 1 auto;min-height:220px;min-width:0;position:relative;height:clamp(200px,28vh,280px)}
.rr-ep-ride-pv .rr-ep-preview{position:absolute;inset:0;width:100%;height:100%}
.rr-ep-ride-ov{flex:0 0 auto;height:28px;border-radius:var(--radius-md);overflow:hidden}
.rr-ep-ride-ov .rr-ep-overview{display:block;width:100%;height:28px}


/* Workout-Cache Stale-Hinweis (Dash + Kalender) */
.yama-wo-stale-host{
  margin:0 0 var(--space-2);
}
.yama-wo-stale{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:none;
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  color:var(--text-2);
  font-size:var(--yama-micro);
  font-weight:400;
  font-family:inherit;
  line-height:1.3;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.yama-wo-stale:hover,
.yama-wo-stale:focus-visible{
  color:var(--neutral-800);
  background:var(--bg-1);
  outline:2px solid var(--accent-base);
  outline-offset:2px;
}
.yama-wo-load-banner{
  padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-2);
  border:1px solid var(--danger-base);
}
.yama-wo-load-banner--muted{
  border-color:var(--border-default);
  opacity:.9;
}
.yama-wo-load-banner__btn{
  margin-top:var(--space-2);
}

.admin-btn-plain{
  /* Alias: folgt globalem .btn (Manrope, text-transform:none) */
  font-weight:500;
}

.yama-toast-region{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-5) + var(--yama-toast-extra, 0px));
  z-index:10000;
  display:flex;
  flex-direction:column-reverse;
  align-items:stretch;
  gap:var(--space-2);
  width:min(420px, calc(100vw - 32px));
  pointer-events:none;
}
@media (min-width:900px){
  .yama-toast-region{
    bottom:calc(var(--space-5) + env(safe-area-inset-bottom, 0px) + var(--yama-toast-extra, 0px));
  }
}
.yama-toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  width:100%;
  box-sizing:border-box;
  padding:var(--space-2) var(--space-3);
  background:var(--bg-1);
  color:var(--text);
  border:0.5px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  text-align:left;
}
.yama-toast.is-out{opacity:0;transition:opacity 0.18s ease}
.yama-toast__dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--text-3);
}
.yama-toast--success .yama-toast__dot{background:var(--success)}
.yama-toast--error .yama-toast__dot{background:var(--danger)}
.yama-toast--warning .yama-toast__dot{background:var(--warning)}
.yama-toast--info .yama-toast__dot{background:var(--text-3)}
.yama-toast__body{flex:1;min-width:0}
.yama-toast__msg{margin:0;color:var(--text)}
.yama-toast__side{
  display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;
}
.yama-toast__action{
  border:0;background:transparent;padding:0;
  font:inherit;font-size:var(--yama-text);font-weight:400;
  color:var(--accent-text);cursor:pointer;font-family:inherit;
  min-height:44px;margin-block:calc((44px - 1em) / -2);
  display:inline-flex;align-items:center;
}
.yama-toast__close{
  border:0;background:transparent;padding:0;
  min-width:44px;min-height:44px;
  margin-block:calc((44px - 1em) / -2);
  margin-inline-end:calc(var(--space-2) * -1);
  color:var(--text-3);font:inherit;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ── Yama Ride: Beenden-Dialog, Geräte-Panel, Pause-Hinweis, Ablage (Paket A, 10.10.2026) ── */
.rr-end-sheet{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:flex-end;justify-content:center;
  padding:var(--space-3);
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 55%, transparent);
}
.rr-end-sheet__panel{
  width:100%;max-width:420px;
  background:var(--bg-1);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
  padding:var(--space-3);
}
.rr-end-sheet__panel .yama-title{margin:0 0 var(--space-1)}
.rr-end-sheet__hint{margin:0 0 var(--space-3);color:var(--text-2)}
.rr-end-sheet__actions{display:flex;flex-direction:column;gap:var(--space-2)}
.rr-end-sheet__actions[hidden]{display:none}
.rr-end-sheet__actions > p{margin:0 0 var(--space-1)}
.rr-end-sheet__btn{
  min-height:44px;padding:0 var(--space-3);
  border:1px solid var(--btn-secondary-border);border-radius:var(--radius-md);
  background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);
  font:inherit;font-weight:500;cursor:pointer;
}
.rr-end-sheet__btn--primary{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.rr-end-sheet__btn--danger{color:var(--danger-text);border-color:var(--danger-base)}
.rr-end-sheet__btn:focus-visible{outline:2px solid var(--accent-base);outline-offset:2px}
@media (min-width:768px){
  .rr-end-sheet{align-items:center}
  .rr-end-sheet__panel{padding:var(--space-4)}
}

.rr-dev-sheet__row{
  display:flex;flex-direction:column;gap:var(--space-1);
  margin:0 0 var(--space-3);padding-top:var(--space-2);
  border-top:1px solid var(--border);
}
.rr-dev-sheet__status{color:var(--text-3);font-variant-numeric:tabular-nums}
.rr-dev-sheet__row.is-live .rr-dev-sheet__status{color:var(--accent-base)}
.rr-dev-sheet__row.is-lost .rr-dev-sheet__status{color:var(--danger-text)}

.rr-wo-ride-status .rr-wo-st-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin:calc(-1 * var(--space-2)) 0;padding:0;
  border:0;background:none;color:inherit;cursor:pointer;
  border-radius:var(--radius-pill);
}
.rr-wo-ride-status .rr-wo-st-btn:focus-visible{outline:2px solid var(--accent-base);outline-offset:-2px}
.rr-wo-st-btn.is-lost .rr-wo-st-ico{color:var(--danger-base);opacity:1}
.rr-wo-st-btn.is-lost::after{
  content:'';position:absolute;left:30%;right:30%;top:50%;
  border-top:2px solid var(--danger-base);
  transform:rotate(-45deg);pointer-events:none;
}

.rr-ride-pause-hint{border:0;cursor:default;font:inherit}
.rr-ride-pause-hint.is-tap{cursor:pointer}
.rr-ride-pause-hint[hidden]{display:none}

.rr-spiral-chip{display:inline-flex;align-items:center;gap:var(--space-2);flex:0 1 auto;
  padding:var(--space-1) var(--space-1) var(--space-1) var(--space-2);border-radius:var(--radius-md);
  background:linear-gradient(var(--warning-bg),var(--warning-bg)),var(--bg-1);color:var(--warning-text)}
.rr-spiral-chip[hidden]{display:none}
.rr-intensity-events{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border)}
.rr-intensity-events .yama-text{margin:0}
.ad-intensity{margin-bottom:var(--space-3)}
.ad-intensity[hidden]{display:none}
.ad-intensity__lbl{margin:0 0 var(--space-1);color:var(--text-3)}
.ad-intensity .yama-text{margin:0}
.rr-spiral-chip__txt{margin:0;white-space:nowrap}
.rr-spiral-chip__btn{min-height:32px;white-space:nowrap}
@media (max-width:767px){
  .rr-spiral-chip{position:absolute;left:0;right:0;top:100%;z-index:2;justify-content:space-between;
    box-shadow:var(--shadow-3)}
  .rr-spiral-chip__btn{min-height:44px}
}

.rr-save-err{margin:0 0 var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--danger-base)}
.rr-save-err__title{display:flex;align-items:center;gap:var(--space-1);margin:0 0 var(--space-1);color:var(--danger-text)}
.rr-save-err__text{margin:0 0 var(--space-2);color:var(--text-2)}
.rr-save-err__acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}

.rr-vault[hidden]{display:none}
.rr-vault{margin:0 0 var(--space-2)}
.rr-vault__hint{margin:var(--space-1) 0 0;color:var(--text-3)}
.rr-vault__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);
  margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border);
}
.rr-vault__meta{min-width:0;flex:1 1 200px}
.rr-vault__meta .yama-micro{color:var(--text-3);font-variant-numeric:tabular-nums}
.rr-vault__acts{display:flex;flex-wrap:wrap;gap:var(--space-1)}

#an-main-tabs .an-main-tab,
#an-dash-tabs .an-tab-btn{
  border:0.5px solid var(--border);
  background:var(--bg-1);
  color:var(--text-2);
  box-shadow:var(--shadow-1);
}
#an-main-tabs .an-main-tab.active,
#an-dash-tabs .an-tab-btn.active{
  color:var(--neutral-800);
}
@media (hover:hover){
  #an-main-tabs .an-main-tab:hover,
  #an-dash-tabs .an-tab-btn:hover{background:var(--bg-2)}
}
#an-main-tabs .an-main-tab:focus,
#an-dash-tabs .an-tab-btn:focus{outline:none}
#an-main-tabs .an-main-tab:focus-visible,
#an-dash-tabs .an-tab-btn:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:2px;
}

.yama-act-chart{width:100%}
.yama-act-chart__unit{
  color:var(--text-3);
  letter-spacing:normal;
  font-family:var(--font-body);
  margin:0 0 2px;
}
.yama-act-chart__plot{position:relative;width:100%;overflow:visible}
.yama-act-chart svg{display:block;max-width:100%}
.yama-act-chart__tick{font-family:var(--font-body);letter-spacing:normal;font-variant-numeric:tabular-nums}