/* ============================================================================
 * ds.css — Design-System v1 (aus den Demos extrahiert, auf die ganze Seite
 * angewendet). Lädt nach style.css/limiter.css und gewinnt damit die Kaskade.
 * style.css hat viele historische Redefinitionen derselben Klassen (z.B.
 * .cycle-card mehrfach) — wo Kollisionsrisiko besteht, wird hier bewusst mit
 * !important auf Hintergrund/Border/Schatten gearbeitet, um eindeutig zu sein.
 * Nutzt ausschließlich vorhandene Tokens (var(--brand) etc.) für Farbe.
 * ========================================================================== */

@keyframes dsIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dsPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Generische Bausteine (für neue Markup-Stücke) ---------- */
.ds-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-2); }
.ds-card {
  background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); backdrop-filter: blur(16px) saturate(130%);
}
.ds-hero-num { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; }
.ds-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .ds-mini-grid { grid-template-columns: 1fr 1fr; } }
.ds-mini { background: var(--surface-2) !important; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 13px; }
.ds-mini .k { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.ds-mini .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 2px; }
.ds-hover-lift { transition: transform .15s var(--ease), border-color .15s var(--ease); }
.ds-hover-lift:hover { transform: translateY(-2px); border-color: var(--brand-soft-border); }
.ds-enter { animation: dsIn .5s var(--ease) both; }

/* ---------- Today: Readiness-Hero ---------- */
.today-overview-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(139,92,246,.20), transparent 38%),
    linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 20px 22px !important;
}
.today-overview-head h2 { font-size: 26px !important; letter-spacing: -.02em; }
.today-action {
  background: var(--brand-grad) !important; border: none !important; color: #fff !important;
  padding: 9px 16px !important; font-size: 12px !important; box-shadow: var(--sh-brand);
  transition: transform .15s var(--ease);
}
.today-action:hover { transform: translateY(-1px); }
.today-action.missing { background: linear-gradient(135deg, #ef4444, #f87171) !important; box-shadow: 0 4px 16px rgba(239,68,68,.35); }

/* Half-Gauges: deutlicherer Glow, gleichmäßiger mit dem Limiter-Gauge-Stil */
.half-gauge { background: rgba(255,255,255,.04) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; }
.half-gauge-fill { filter: drop-shadow(0 0 8px var(--g)); transition: stroke-dasharray 1s var(--ease); }
.half-gauge-value { font-size: 28px !important; }

/* ---------- Method-Score-Card ---------- */
.method-score-panel {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important; box-shadow: var(--sh-md) !important;
}
.method-score-badge { box-shadow: 0 0 0 1px var(--border), 0 6px 18px rgba(0,0,0,.25); }
.method-decision-card {
  background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
  transition: transform .15s var(--ease);
}
.method-decision-card:hover { transform: translateY(-2px); }
.method-score-row { border-color: var(--border) !important; }

/* ---------- Weekly Load Card: Bug-Fix (war hartcodiert weiss im Dark-Theme) ---------- */
.dashboard-week-card {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--sh-md) !important; padding: 14px 16px !important;
}
.week-sport-chip.active {
  background: color-mix(in srgb, var(--sport) 18%, var(--surface)) !important;
}
.week-distance-track { background: rgba(255,255,255,.08) !important; }

/* ---------- Heat-Gauge-Card (Today-Kachel) ---------- */
.heat-gauge-card {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important; box-shadow: var(--sh-md) !important;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.heat-gauge-card:hover { transform: translateY(-2px); border-color: var(--brand-soft-border) !important; }
.heat-gauge-fill { filter: drop-shadow(0 0 7px rgba(139, 92, 246, .55)); }

/* ---------- Cycle-Card (Muscle-Tone-Verlauf) ---------- */
.cycle-card {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important; box-shadow: var(--sh-md) !important;
}
.cycle-actual-line, .cycle-ideal-line { transition: stroke-dashoffset 1s var(--ease); }
.cycle-history-list .cycle-archive-item, .cycle-workout-chip {
  transition: transform .15s var(--ease);
}
/* "heute"-Punkt pulsiert dauerhaft (startet nach der Pop-in-Animation) */
@keyframes dsTodayPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(249,115,22,.55)); }
  50%      { filter: drop-shadow(0 0 11px rgba(249,115,22,.95)); }
}
.cycle-actual-dot.today { animation: dsTodayPulse 1.9s ease-in-out infinite; animation-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .half-gauge-fill, .cycle-actual-line, .cycle-ideal-line { transition: none !important; }
  .cycle-actual-dot.today { animation: none !important; }
}