/* design-magic.css — Design-Richtung "magic" (MagicSchool.ai-Aesthetik)
 * ====================================================================
 * Hell, weiß, sehr clean, viel Weißraum. Kräftiges Lila als Markenfarbe,
 * fette Lila-Headings, runde weiße Karten mit weichem diffusem Schatten,
 * runde Lila-Buttons, verspielte 4-zackige Sparkles (✦) als dezente Deko.
 *
 * HARTE REGELN:
 *  - ALLES gescoped unter html[data-design="magic"].
 *  - NUR visuelle Properties (Farbe, Schatten, Border, Radius, Transform-Hover,
 *    Filter, Text-Shadow, Opacity, Font-Weight, Letter-Spacing, Background-Image).
 *  - Sparkles via background-image (Stern-SVG) ODER ::before/::after content auf
 *    NICHT-direkten-Body-Kindern (.card-head/.kpi) — siehe Notiz unten.
 *  - SIDEBAR ABSOLUT TABU (keine .sidebar/.sb-*/.star Regeln).
 *
 * SPARKLE-TECHNIK:
 *  Die Marken-Sparkles sind als reine Glyph-Pseudos (::after mit content:'✦')
 *  auf Komponenten realisiert, die KEINE direkten Body-Kinder sind
 *  (.card-head, .kpi-num). Diese Elemente bekommen KEINE neue position-Regel —
 *  sie sind bereits flex-Container bzw. inline und die Sparkles laufen als
 *  normale inline-Glyphen mit (kein position:absolute), wodurch die bekannte
 *  `body.v2-refresh > * {position:relative}`-Spezifitätsfalle gar nicht greifen
 *  kann (wir fassen weder direkte Body-Kinder noch deren position an).
 *  Der hauchzarte App-Hintergrund-Scatter läuft über den BESTEHENDEN
 *  body.v2-refresh::before-Layer (nur background-image getauscht) — wir legen
 *  KEIN neues positioniertes Pseudo auf einen direkten Body-Kind.
 */

/* ===================== TOKEN-OVERRIDES ===================== */
/* Akzent-Trio auf LILA → ganze Library wird lila. Plus hellere, klarere
 * Surfaces & lavendel Borders für den weißen MagicSchool-Look.
 *
 * SPEZIFITÄT: Wir nutzen `:root[data-design="magic"]` (0,2,0) statt
 * `html[data-design="magic"]` (0,1,1), damit Magic auch über
 * `:root[data-theme="pool"]` (0,2,0) gewinnt (gleiche Spezifität, aber
 * design-magic.css lädt NACH v2-refresh-tokens.css → spätere Regel siegt).
 * Zusätzlicher Override für die "Pool+Magic"-Kombi via (0,3,0). */
:root[data-design="magic"],
:root[data-design="magic"][data-theme="pool"] {
  /* Surfaces: rein weiß + lavendel-getöntes BG */
  --bg:          #fbfaff;
  --bg-warm:     #f4f1fe;
  --surface:     #ffffff;
  --surface-2:   #f5f3ff;
  --border:      rgba(124,58,237,0.14);
  --border-2:    rgba(124,58,237,0.24);

  /* Typography: tiefes Lila-Ink */
  --ink:         #2e1065;
  --ink-2:       #5b4a86;
  --mute:        #8b80ad;

  /* Akzent = Lila (das Trio steuert die gesamte Library) */
  --amber:       #7c3aed;
  --amber-2:     #6d28d9;
  --amber-soft:  #ede9fe;
  /* Purple-Variable im Magic-Content-Bereich auf Lila ziehen (Sidebar nutzt
   * eigene Selektoren in v2-refresh.css mit höherer Kaskaden-Priorität). */
  --purple:      #7c3aed;
  --purple-2:    #6d28d9;

  /* Status (leicht angepasst, Lila-kompatibel) */
  --success:     #059669;
  --warning:     #d97706;
  --danger:      #ec4899;

  /* Radii: runder (MagicSchool: ~18-20px Karten, pill Buttons) */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* Schatten: weich & diffus, leicht lila-getönt */
  --sh-sm: 0 1px 2px rgba(124,58,237,.06), 0 1px 3px rgba(46,16,101,.04);
  --sh-md: 0 8px 22px rgba(124,58,237,.10), 0 2px 6px rgba(46,16,101,.05);
  --sh-lg: 0 24px 60px rgba(124,58,237,.16), 0 6px 16px rgba(46,16,101,.07);
}

/* Dark-Mode (Light bleibt Priorität; nur sanfte Lila-Tönung) */
:root[data-design="magic"][data-theme="dark"] {
  --bg:          #140a2e;
  --bg-warm:     #1a1038;
  --surface:     #1e1442;
  --surface-2:   #261a52;
  --border:      rgba(167,139,250,0.16);
  --border-2:    rgba(167,139,250,0.28);
  --ink:         #ede9fe;
  --ink-2:       #c4b5fd;
  --mute:        #9b8dc4;
  --amber:       #a78bfa;
  --amber-2:     #c4b5fd;
  --amber-soft:  rgba(167,139,250,0.18);
  --purple:      #a78bfa;
  --purple-2:    #c4b5fd;
}

/* V2-Accent-Overrides ([data-v2-accent="purple|mint|cyan|rose"]) haben in
 * v2-refresh-tokens.css Spezifität (0,2,0) — gleich wie Magic. Wir geben
 * Magic mit der Doppel-Attribut-Variante (0,3,0) den klaren Vorrang, sonst
 * würde z.B. ein gespeicherter "mint"-Accent das Magic-Lila killen. */
:root[data-design="magic"][data-v2-accent] {
  --amber:       #7c3aed;
  --amber-2:     #6d28d9;
  --amber-soft:  #ede9fe;
}
:root[data-design="magic"][data-v2-accent][data-theme="dark"] {
  --amber:       #a78bfa;
  --amber-2:     #c4b5fd;
  --amber-soft:  rgba(167,139,250,0.18);
}

/* SIDEBAR-AUSNAHME: Wir haben --purple global zum Magic-Lila gezogen, damit
 * Content-Stellen wie `var(--purple)` in EJS-Templates (deck-cover, av-mini,
 * lf-pill-Fallbacks, practice-hero) lila werden. Die Sidebar nutzt aber
 * --purple als ihren TIEFEN Indigo-Hintergrund — der MUSS dunkel bleiben.
 * Wir resetten --purple innerhalb von .sidebar lokal — Variable-Vererbung
 * sorgt dafür, dass alle Sidebar-Kinder das alte Indigo bekommen. */
:root[data-design="magic"] .sidebar,
:root[data-design="magic"] body.v2-refresh .sidebar {
  --purple:   #251e4b;
  --purple-2: #2f2657;
}
:root[data-design="magic"][data-theme="dark"] .sidebar {
  --purple:   #12102a;
  --purple-2: #1c1842;
}

/* ===================== APP-HINTERGRUND ===================== */
/* Sehr blasser Sparkle-Scatter über den BESTEHENDEN ::before-Layer.
 * Wir setzen NUR background-image (kein neues position) → keine Layout-Risiken. */
html[data-design="magic"] body.v2-refresh {
  background: var(--bg);
}
html[data-design="magic"] body.v2-refresh::before {
  background-image:
    radial-gradient(900px 480px at 88% -8%, rgba(124,58,237,0.07), transparent 60%),
    radial-gradient(760px 420px at -8% 18%, rgba(109,40,217,0.05), transparent 55%),
    /* hauchzarte Sparkles als wiederholtes SVG-Pattern, sehr blass */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%237c3aed' fill-opacity='0.05'%3E%3Cpath d='M40 18c2 12 8 18 20 20-12 2-18 8-20 20-2-12-8-18-20-20 12-2 18-8 20-20z'/%3E%3Cpath d='M250 70c1.4 8 5 11.6 13 13-8 1.4-11.6 5-13 13-1.4-8-5-11.6-13-13 8-1.4 11.6-5 13-13z'/%3E%3Cpath d='M150 200c1.7 10 6 14.3 16 16-10 1.7-14.3 6-16 16-1.7-10-6-14.3-16-16 10-1.7 14.3-6 16-16z'/%3E%3Cpath d='M285 240c1.2 7 4.4 10.2 11 11.4-6.6 1.2-9.8 4.4-11 11.4-1.2-7-4.4-10.2-11-11.4 6.6-1.2 9.8-4.4 11-11.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  opacity: 1;
}

/* Headings: fett, tiefes Lila, tightes Tracking */
html[data-design="magic"] body.v2-refresh h1,
html[data-design="magic"] body.v2-refresh h2,
html[data-design="magic"] body.v2-refresh h3,
html[data-design="magic"] body.v2-refresh h4 {
  color: #6d28d9; /* kräftiges Lila wie MagicSchool-Hero-Headline (statt fast-schwarzem --ink) */
  letter-spacing: -0.02em;
}
html[data-design="magic"] body.v2-refresh h1 { font-weight: 800; }
html[data-design="magic"] body.v2-refresh h2 { font-weight: 800; }

/* ===================== BUTTONS ===================== */
/* Primär/Accent: solides Lila, weiße Schrift, pill, weicher Schatten. */
html[data-design="magic"] .btn { border-radius: var(--r-pill); font-weight: 700; }
html[data-design="magic"] .btn-primary,
html[data-design="magic"] .btn-accent {
  background: var(--amber);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(124,58,237,.30);
}
html[data-design="magic"] .btn-primary:hover:not(:disabled),
html[data-design="magic"] .btn-accent:hover:not(:disabled) {
  background: var(--amber-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124,58,237,.40);
}
/* Ghost/Sekundär: weiß mit Lila-Border + Lila-Text, rund. */
html[data-design="magic"] .btn-ghost {
  background: var(--surface);
  color: var(--amber);
  border-color: var(--border-2);
}
html[data-design="magic"] .btn-ghost:hover:not(:disabled) {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--amber-2);
}
html[data-design="magic"] .btn-danger { color: var(--danger); }
html[data-design="magic"] .btn-danger:hover:not(:disabled) {
  background: rgba(236,72,153,0.10);
}
html[data-design="magic"] .btn-icon { border-radius: var(--r-md); }

/* ===================== CARDS ===================== */
/* Runde weiße Karten, weicher diffuser Schatten, kaum Border, dezenter Hover-Lift. */
html[data-design="magic"] .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  transition: box-shadow var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
html[data-design="magic"] .card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: var(--border-2);
}

/* Sparkle neben Card-Head-Titel: reines inline-Glyph via ::after (kein position).
 * .card-head ist ein flex-Container und KEIN direkter Body-Kind → die
 * position:relative-Spezifitätsfalle wird nicht berührt. */
html[data-design="magic"] .card-head h2::after,
html[data-design="magic"] .card-head h3::after {
  content: '✦';
  color: var(--amber);
  font-size: 0.62em;
  font-weight: 700;
  margin-left: 0.4em;
  opacity: 0.65;
  text-shadow: 0 0 8px rgba(124,58,237,0.35);
}

/* ===================== KPI ===================== */
/* Große, fette Lila-Zahlen + dezentes Sparkle. */
html[data-design="magic"] .kpi-num {
  color: var(--amber);
  font-weight: 800;
  letter-spacing: -0.025em;
}
/* Sparkle bei KPI-Zahlen — inline ::after, kein position. */
html[data-design="magic"] .kpi-num::after {
  content: '✧';
  color: var(--amber-2);
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 0.25em;
  vertical-align: super;
  opacity: 0.55;
}
html[data-design="magic"] .kpi-head .lbl { color: var(--mute); }

/* ===================== DONUT ===================== */
html[data-design="magic"] .donut .val { stroke: var(--amber); }

/* ===================== PROGRESS ===================== */
html[data-design="magic"] .v2-pct-fill--accent { background: var(--amber); }
html[data-design="magic"] .progress i { background: var(--amber); }

/* ===================== BADGES / PILLS ===================== */
/* Lila-getönt, rund, hell. */
html[data-design="magic"] .badge {
  background: var(--amber-soft);
  color: var(--amber-2);
  border-radius: var(--r-pill);
}
html[data-design="magic"] .badge-amber {
  background: var(--amber-soft);
  color: var(--amber-2);
}
html[data-design="magic"] .badge-ok     { background: rgba(5,150,105,0.12);  color: var(--success); }
html[data-design="magic"] .badge-warn   { background: rgba(217,119,6,0.14);  color: #b45309; }
html[data-design="magic"] .badge-danger { background: rgba(236,72,153,0.14); color: #be185d; }

html[data-design="magic"] .pill {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-2);
}
html[data-design="magic"] .pill-dark {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}

/* ===================== INPUTS ===================== */
/* Weiß, rund, lavendel Border, Lila-Focus-Ring. */
html[data-design="magic"] .inp {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-md);
}
html[data-design="magic"] .inp:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.16);
}
html[data-design="magic"] .lbl { color: var(--mute); }

html[data-design="magic"] .seg {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-md);
}
html[data-design="magic"] .seg button.on {
  background: var(--amber);
  color: #fff;
}
html[data-design="magic"] .seg button:not(.on):hover {
  background: var(--amber-soft);
  color: var(--amber-2);
}

html[data-design="magic"] .toggle input:checked + .t-track { background: var(--amber); }

/* ===================== SEARCH ===================== */
html[data-design="magic"] .search {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-pill);
}
html[data-design="magic"] .search:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.14);
}

/* ===================== TABLE ===================== */
/* Clean, sehr heller lavendel th, ruhige Trennlinien. */
html[data-design="magic"] .tbl thead th {
  background: var(--surface-2);
  color: var(--amber-2);
  border-bottom-color: var(--border);
}
html[data-design="magic"] .tbl tbody td { border-bottom-color: var(--border); }
html[data-design="magic"] .tbl tbody tr:hover { background: var(--amber-soft); }
html[data-design="magic"] .tbl .user-link:hover .u-name { color: var(--amber); }

/* ===================== DECK CHIPS / ICONS ===================== */
html[data-design="magic"] .deck-icon,
html[data-design="magic"] .deck-chip {
  background: var(--surface);     /* weiß + Lila-Rand/-Text (wie „Heute"-Pill), statt grau */
  border-color: var(--amber);
  color: var(--amber);
}
html[data-design="magic"] .deck-icon:hover,
html[data-design="magic"] .deck-chip:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}
html[data-design="magic"] .deck-icon.active,
html[data-design="magic"] .deck-chip.active {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
html[data-design="magic"] .deck-chip-row:hover { background: var(--amber-soft); color: var(--amber-2); }
html[data-design="magic"] .deck-chip-row.active { background: var(--amber); color: #fff; }

/* ===================== LERNFORTSCHRITT: Filter-Pills + Tabellenkopf ===================== */
/* Deck-/Filter-Pills: weiß + Lila-Rand/-Text (Standard), gefüllt-Lila wenn aktiv. */
html[data-design="magic"] .lf-pill {
  background: var(--surface);
  border-color: var(--amber);
  color: var(--amber);
}
html[data-design="magic"] .lf-pill:hover {
  background: var(--amber-soft);
  color: var(--amber-2);
  border-color: var(--amber);
}
html[data-design="magic"] .lf-pill.is-active {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
html[data-design="magic"] .lf-pill.is-active .lf-pill-sub { color: rgba(255,255,255,0.82); }
html[data-design="magic"] .lf-pillrow-lbl { color: var(--amber-2); }
/* Leistungsübersicht-Tabellenkopf: helles Lavendel + Lila-Labels statt Grau. */
html[data-design="magic"] .lf-sortable thead th {
  background: var(--surface-2);
  color: var(--amber-2);
  border-color: var(--border);
}

/* ===================== AVATAR ===================== */
/* Lila-Gradient statt Amber. */
html[data-design="magic"] .avatar {
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
  color: #4c1d95;
  border-color: var(--border);
}
html[data-design="magic"] .avatar.more { background: var(--amber); color: #fff; }

/* ===================== TOPBAR ===================== */
html[data-design="magic"] .topbar {
  background: rgba(251,250,255,0.86);
  border-bottom-color: var(--border);
}
html[data-design="magic"] .ctx-pick {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-pill);
}
html[data-design="magic"] .ctx-pick:hover { border-color: var(--amber); }
html[data-design="magic"] .user-chip {
  background: var(--surface);
  border-color: var(--border);
}
html[data-design="magic"] .user-chip:hover { border-color: var(--amber); }

/* ===================== QUICK-ADD ===================== */
html[data-design="magic"] .qa2-decks-bar {
  background: var(--surface); /* weiß statt lavendel/„beige" */
  border-color: var(--border);
}
html[data-design="magic"] .qa2-deck-pill {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-2);
  border-radius: var(--r-pill);
}
html[data-design="magic"] .qa2-deck-pill:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}
html[data-design="magic"] .qa2-deck-pill.active {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
html[data-design="magic"] .qa2-deck-quickbtn {
  color: var(--amber);
  border-color: var(--border-2);
  border-radius: var(--r-pill);
}
html[data-design="magic"] .qa2-deck-quickbtn:hover {
  background: var(--amber-soft);
  border-color: var(--amber);
}
html[data-design="magic"] .qa2-inp,
html[data-design="magic"] .qa2-note-ce {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-md);
}
html[data-design="magic"] .qa2-inp:focus,
html[data-design="magic"] .qa2-note-ce:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.16);
}

/* ===================== EMPTY-STATE ===================== */
html[data-design="magic"] .empty-state {
  color: var(--mute);
}

/* ===================== FOCUS-RING (A11y) ===================== */
html[data-design="magic"] body.v2-refresh :focus-visible {
  outline-color: var(--amber);
}

/* ===================== LERNFORTSCHRITT — KPI-SUMMARY ===================== */
/* .summary/.stat sind seitenspezifisch in lernfortschritt-refresh.ejs inline
 * definiert (Z. 302–309) und in v2-refresh.css NICHT vorhanden — daher hier
 * zentral auf Magic-Look heben (weiße Karte, Lila-Zahlen, Sparkle). */
html[data-design="magic"] .summary { gap: 14px; }
html[data-design="magic"] .stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 16px 18px;
  transition: box-shadow var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
html[data-design="magic"] .stat:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
  border-color: var(--border-2);
}
html[data-design="magic"] .stat .lbl-s {
  color: var(--mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-design="magic"] .stat .num-s {
  color: var(--amber);
  font-weight: 800;
  letter-spacing: -0.025em;
}
/* Sparkle bei .stat-Zahlen — wie .kpi-num ::after, inline-Glyph, kein position. */
html[data-design="magic"] .stat .num-s::after {
  content: '✧';
  color: var(--amber-2);
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 0.25em;
  vertical-align: super;
  opacity: 0.55;
}
html[data-design="magic"] .stat .sub-s { color: var(--mute); }

/* ===================== LERNFORTSCHRITT — RESTLICHE PILLS/HOVER ===================== */
/* Aktivitäts-Pills (Alle / Heute aktiv / Inaktiv / Nachholbedarf) —
 * aktive Variante in Magic = Lila statt Schwarz/Ink. */
html[data-design="magic"] .lf-pill.lf-pill-sm.is-active {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
/* Hover-Akzente (Filter-Icons, Info-Bubbles, Sort-Indikatoren) —
 * Inline-EJS verwendet var(--purple,…) Fallback; bringen wir auf Token. */
html[data-design="magic"] .lf-explain-icon { background: var(--amber); }
html[data-design="magic"] .lf-info:hover {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
html[data-design="magic"] .lf-name-toggle:hover .u-name { color: var(--amber); }
html[data-design="magic"] .lf-profile-link:hover {
  color: var(--amber);
  background: var(--amber-soft);
}
html[data-design="magic"] .lf-sortable th[data-sort].is-sort-asc .lf-sort-ind::after,
html[data-design="magic"] .lf-sortable th[data-sort].is-sort-desc .lf-sort-ind::after {
  color: var(--amber);
}
/* Klassendurchschnitts-Zeile: ehemals Amber-Gradient → Lila-Soft. */
html[data-design="magic"] .lf-class-avg {
  background: linear-gradient(180deg, var(--amber-soft), rgba(124,58,237,0.04));
  border-top-color: var(--border-2);
  border-bottom: 2px solid var(--border-2);
}
html[data-design="magic"] .lf-class-avg:hover { background: var(--amber-soft); }

/* ===================== DASHBOARD — KI-HERO ===================== */
/* Original-Gradient Indigo→Mint → reines Lila für Magic-Konsistenz. */
html[data-design="magic"] .ki-hero {
  background: linear-gradient(135deg, var(--amber-2) 0%, var(--amber) 100%);
  box-shadow: 0 8px 22px -10px rgba(124,58,237,0.55);
}

/* ===================== DASHBOARD — SUB-BANNERS (Subscription-Warnungen) ===================== */
/* Warnungs-Variante in Magic: Lila-soft statt Amber-Gelb (Status-Farbcodierung
 * verschwindet bewusst — wir wollen einheitlich-lila in der Magic-Welt). */
html[data-design="magic"] .sub-banner-warning {
  background: linear-gradient(135deg, var(--amber-soft) 0%, rgba(124,58,237,0.18) 100%);
  border: 1.5px solid var(--amber);
  color: var(--amber-2);
}

/* ===================== STUDENT-DASHBOARD — PRACTICE-HERO ===================== */
html[data-design="magic"] .practice-hero,
html[data-design="magic"] .practice-hero.done {
  background: linear-gradient(135deg, var(--amber-2) 0%, var(--amber) 100%);
  box-shadow: 0 12px 30px -12px rgba(124,58,237,0.45);
}

/* ===================== KLASSEN — SHARED-CHIP ===================== */
html[data-design="magic"] .shared-chip {
  background: var(--amber-soft);
  color: var(--amber-2);
  border-color: var(--border-2);
}

/* ===================== DECKS — VIEW-SEGMENT ===================== */
/* Aktiver Tab im View-Switcher → echt Lila (overrides der EJS-internen
 * var(--purple)-Variable, falls die im base-Theme leer ist). */
html[data-design="magic"] .view-seg button.on { background: var(--amber); color: #fff; }

/* ===================== EINSTELLUNGEN — PHASEN-/PLAN-BADGES ===================== */
/* "Schullizenz aktiv" Badge + Schullizenz-Card: Amber-Gelb → Lila-Soft. */
html[data-design="magic"] .ph-status.is-licensed {
  background: linear-gradient(135deg, var(--amber-soft) 0%, rgba(124,58,237,0.18) 100%);
  border-color: var(--amber);
  color: var(--amber-2);
}
html[data-design="magic"] .ph-status.is-trial {
  background: var(--amber-soft);
  border-color: var(--border-2);
  color: var(--amber-2);
}
/* Premium-Plan-Card im Default ist warm-gelb (#fef3e2…) → Magic: Lila-soft. */
html[data-design="magic"] .plan-card {
  background: linear-gradient(135deg, var(--amber-soft), var(--surface));
  border-color: var(--amber);
}
html[data-design="magic"] .plan-badge {
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  box-shadow: 0 2px 8px rgba(124,58,237,0.30);
}
html[data-design="magic"] .plan-card-school {
  background: linear-gradient(135deg, var(--amber-soft) 0%, rgba(124,58,237,0.18) 100%);
  border-color: var(--amber);
}
html[data-design="magic"] .plan-badge-school {
  background: var(--amber);
}
html[data-design="magic"] .p-sub-school { color: var(--amber-2); }

/* ===================== KLASSE-DETAIL — MINI-AVATAR ===================== */
html[data-design="magic"] .av-mini {
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
  color: #4c1d95;
}

/* ===================== LERNEN — DIR-TOGGLE / ACTIVE STATES ===================== */
html[data-design="magic"] .dir-toggle-single[aria-pressed="true"] {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}

/* ===================== LERNFORTSCHRITT — NAME-SELECT HOVER ===================== */
html[data-design="magic"] .lf-name-select:hover .u-name { color: var(--amber); }

/* ===================== MAGIC-SEKUNDÄR-AKZENTE (2026-05-24) ===================== */
/* User-Feedback: rein Lila+Weiß ist zu monoton. Eingeführt: Warm-Orange als
 * Highlight-Akzent für Heroes, Streak, Aktivität. Lila bleibt für Buttons,
 * Pills, Navigation. KPIs bekommen Pastell-Mix für Hierarchie.
 *
 * Hex-Werte hier hardcoded (kein --amber Token, weil --amber lila bleiben
 * muss für Buttons). Eigene Variablen für Re-Use. */
:root[data-design="magic"] {
  --magic-warm:        #F59E0B;
  --magic-warm-2:      #EA580C;
  --magic-warm-soft:   #FEF3C7;
  --magic-warm-ink:    #78350F;
  --magic-mint:        #11B8A0;
  --magic-mint-soft:   #D1FAE5;
  --magic-pink:        #EC4899;
  --magic-pink-soft:   #FCE7F3;
}

/* HERO-BOXEN: weiß mit Lila-Border + Lila-Akzent-Glow (Schullizenz-Look).
 * Headline-Text Lila, CTA-Button als Lila-Gradient. */
:root[data-design="magic"] .ki-hero,
:root[data-design="magic"] .practice-hero,
:root[data-design="magic"] .practice-hero.done {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: var(--sh-md) !important;
  border-radius: var(--r-xl) !important;
}
:root[data-design="magic"] .practice-hero::before {
  background:
    radial-gradient(circle at 12% 20%, var(--amber-soft) 0%, transparent 45%),
    radial-gradient(circle at 88% 75%, rgba(245,158,11,0.10) 0%, transparent 45%) !important;
  opacity: 0.7 !important;
}
:root[data-design="magic"] .practice-hero .ph-title { color: var(--magic-warm-2) !important; }
:root[data-design="magic"] .practice-hero .ph-headline { color: var(--amber-2) !important; }
:root[data-design="magic"] .practice-hero .ph-headline .num { color: var(--magic-warm) !important; }
:root[data-design="magic"] .practice-hero .ph-sub { color: var(--ink-2) !important; }
:root[data-design="magic"] .practice-hero .ph-chooser-head .lbl,
:root[data-design="magic"] .practice-hero .ph-chooser-head .mut { color: var(--mute) !important; }
:root[data-design="magic"] .practice-hero .ph-chooser { border-top-color: var(--border) !important; }
:root[data-design="magic"] .practice-hero .ph-chip {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
  color: var(--ink-2) !important;
}
:root[data-design="magic"] .practice-hero .ph-chip:hover {
  background: var(--amber-soft) !important;
  border-color: var(--amber) !important;
  color: var(--amber-2) !important;
}
:root[data-design="magic"] .practice-hero .ph-chip.on {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
}
:root[data-design="magic"] .practice-hero .streak-row { color: var(--ink-2) !important; }
:root[data-design="magic"] .practice-hero .streak-row b { color: var(--magic-warm-2) !important; }
:root[data-design="magic"] .practice-hero .ph-stars .star { color: var(--amber) !important; }
/* Hero-CTA-Button: Lila-Gradient (wie Schullizenz „Schullizenz erwerben"). */
:root[data-design="magic"] .btn-hero {
  background: linear-gradient(135deg, var(--amber), var(--amber-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.45), 0 1px 2px rgba(10,11,16,.08) !important;
}
:root[data-design="magic"] .btn-hero:hover {
  box-shadow: 0 6px 20px rgba(124,58,237,.55), 0 2px 4px rgba(10,11,16,.10) !important;
}
/* Done-State: Mint statt Lila für „Heute geschafft". */
:root[data-design="magic"] .practice-hero.done .btn-hero {
  background: linear-gradient(135deg, var(--magic-mint), #047857) !important;
  box-shadow: 0 4px 14px rgba(17,184,160,0.40) !important;
}
:root[data-design="magic"] .practice-hero.done .ph-headline .num { color: var(--magic-mint) !important; }

/* KPI-PASTELL-MIX: jeder Kacheln-Index andere Hue. Sparkle ::after passt sich an. */
:root[data-design="magic"] .summary .stat:nth-child(4n+1) .num-s { color: var(--amber); }
:root[data-design="magic"] .summary .stat:nth-child(4n+2) .num-s { color: var(--magic-warm-2); }
:root[data-design="magic"] .summary .stat:nth-child(4n+3) .num-s { color: var(--magic-mint); }
:root[data-design="magic"] .summary .stat:nth-child(4n+4) .num-s { color: var(--magic-pink); }
:root[data-design="magic"] .summary .stat:nth-child(4n+1) .num-s::after { color: var(--amber-2); }
:root[data-design="magic"] .summary .stat:nth-child(4n+2) .num-s::after { color: var(--magic-warm); }
:root[data-design="magic"] .summary .stat:nth-child(4n+3) .num-s::after { color: #047857; }
:root[data-design="magic"] .summary .stat:nth-child(4n+4) .num-s::after { color: #be185d; }

/* Streak/Flamme/Activity warm — orange/amber als „Energie"-Signal. */
:root[data-design="magic"] .streak-flame { filter: drop-shadow(0 0 8px rgba(245,158,11,.55)); }
:root[data-design="magic"] .streak-row b { color: var(--magic-warm) !important; }
:root[data-design="magic"] .practice-hero .streak-row b { color: #ffd591 !important; }

/* „Heute aktiv"-Pills + Aktivitäts-Hinweise warm statt schwarz/lila. */
:root[data-design="magic"] .lf-pill[data-filter="active-today"].is-active,
:root[data-design="magic"] .badge-streak,
:root[data-design="magic"] .lf-class-avg {
  background: linear-gradient(180deg, var(--magic-warm-soft), rgba(245,158,11,0.06)) !important;
  color: var(--magic-warm-ink);
  border-color: rgba(245,158,11,0.35) !important;
}

/* DECK-CARDS / LERNEN-BUTTONS: Lila-Gradient (wie Schullizenz „erwerben").
 * .deck-due bekommt Warm-Amber-Hauch als „due"-Indikator (Energie). */
:root[data-design="magic"] .deck-row .btn-accent,
:root[data-design="magic"] .deck-row .btn-primary,
:root[data-design="magic"] .deck-row a.btn-sm {
  background: linear-gradient(135deg, var(--amber), var(--amber-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.30) !important;
}
:root[data-design="magic"] .deck-row .btn-accent:hover,
:root[data-design="magic"] .deck-row .btn-primary:hover,
:root[data-design="magic"] .deck-row a.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124,58,237,.42) !important;
}
:root[data-design="magic"] .deck-due {
  background: var(--magic-warm-soft) !important;
  color: var(--magic-warm-ink) !important;
}
:root[data-design="magic"] .deck-due.zero {
  background: transparent !important;
  color: var(--mute) !important;
}

/* School-License-Banner zurück zu Warm-Amber (das ist semantisch „besonders"). */
:root[data-design="magic"] .school-license-banner {
  background: linear-gradient(135deg, var(--magic-warm-soft) 0%, #FDE68A 100%) !important;
  border-left-color: var(--magic-warm) !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.15) !important;
}
:root[data-design="magic"] .school-license-banner .slb-title,
:root[data-design="magic"] .school-license-banner .slb-text,
:root[data-design="magic"] .school-license-banner .slb-dismiss {
  color: var(--magic-warm-ink) !important;
}

/* Schullizenz-Plan-Card im Settings — gleicher Warm-Look. */
:root[data-design="magic"] .plan-card-school {
  background: linear-gradient(135deg, #FFF8E6 0%, var(--magic-warm-soft) 100%) !important;
  border-color: var(--magic-warm) !important;
}
:root[data-design="magic"] .plan-badge-school { background: var(--magic-warm) !important; }
:root[data-design="magic"] .p-sub-school { color: var(--magic-warm-ink) !important; }

/* Sub-Banner-Warning bleibt warm-amber (Status-Warnung). */
:root[data-design="magic"] .sub-banner-warning {
  background: linear-gradient(135deg, #fff8e1 0%, #ffe9a8 100%) !important;
  border-color: var(--magic-warm) !important;
  color: var(--magic-warm-ink) !important;
}

/* ===================== PUSH-OPT-IN-BANNER ===================== */
/* Aus blass-lila/blau → kräftig Lila-Gradient + Mint-Akzent für CTA. */
:root[data-design="magic"] .push-opt-in-banner {
  background: linear-gradient(135deg, var(--amber-soft) 0%, rgba(124,58,237,0.12) 100%) !important;
  border: 1px solid var(--amber) !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.18) !important;
}
:root[data-design="magic"] .push-opt-in-banner__text strong { color: var(--amber-2) !important; }
:root[data-design="magic"] .push-opt-in-banner__text p { color: var(--ink-2) !important; }
:root[data-design="magic"] .push-opt-in-banner__cta {
  background: linear-gradient(135deg, var(--magic-mint), #047857) !important;
  color: #fff !important;
  border: 0 !important;
}
:root[data-design="magic"] .push-opt-in-banner__skip {
  background: transparent !important;
  color: var(--amber-2) !important;
  border: 1px solid var(--border-2) !important;
}
:root[data-design="magic"] .push-opt-in-banner.push-banner-standalone {
  background: linear-gradient(135deg, var(--amber-soft) 0%, rgba(245,158,11,0.18) 100%) !important;
  border: 2px solid var(--amber) !important;
}

/* ===================== KI-HERO (Lehrer-Dashboard) ===================== */
/* Soll genauso aussehen wie .practice-hero auf Schüler-Dashboard: weiß,
 * lila Border + warm-amber Highlight-Headline. */
:root[data-design="magic"] .ki-hero {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: var(--sh-md) !important;
  border-radius: var(--r-xl) !important;
}
:root[data-design="magic"] .ki-hero::before {
  content: '✨' !important;
  color: var(--magic-warm) !important;
  opacity: 0.20 !important;
}
:root[data-design="magic"] .ki-hero-text { color: var(--ink) !important; }
:root[data-design="magic"] .ki-hero-text h2,
:root[data-design="magic"] .ki-hero-text .ki-hero-title { color: var(--amber-2) !important; }
:root[data-design="magic"] .ki-hero-text .num,
:root[data-design="magic"] .ki-hero-text strong { color: var(--magic-warm-2) !important; }
:root[data-design="magic"] .ki-hero-btn,
:root[data-design="magic"] .ki-hero .btn-accent,
:root[data-design="magic"] .ki-hero .btn-primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.40) !important;
}

/* ===================== TABELLEN-HEADER (überall) ===================== */
/* Default surface-2 ist warm-beige in unseren Inline-Tokens — Tabellen-Header
 * sollen aber EXPLIZIT lila-soft sein (MagicSchool-konsistent), nicht beige. */
:root[data-design="magic"] .tbl thead th,
:root[data-design="magic"] .lf-sortable thead th,
:root[data-design="magic"] .students-table thead th,
:root[data-design="magic"] .classes-table thead th,
:root[data-design="magic"] table.cls-table thead th,
:root[data-design="magic"] table.deck-table thead th {
  background: var(--amber-soft) !important;
  color: var(--amber-2) !important;
  border-bottom: 1px solid var(--border-2) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
:root[data-design="magic"] .tbl tbody tr:hover,
:root[data-design="magic"] .lf-sortable tbody tr:hover {
  background: rgba(124,58,237,0.05) !important;
}

/* ===================== ERKLÄRBOX (.lf-explain) ===================== */
/* Aus surface-2/warm-beige → lila-soft mit Lila-Border + Lila-Akzent. */
:root[data-design="magic"] .lf-explain {
  background: var(--amber-soft) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--r-md) !important;
}
:root[data-design="magic"] .lf-explain > summary { color: var(--amber-2) !important; }
:root[data-design="magic"] .lf-explain > summary:hover { color: var(--amber) !important; }
:root[data-design="magic"] .lf-explain[open] > summary { border-bottom-color: var(--border-2) !important; }
:root[data-design="magic"] .lf-explain-body dt { color: var(--amber-2) !important; }
:root[data-design="magic"] .lf-explain-body dd { color: var(--ink-2) !important; }

/* ===================== DECK-ÜBERSICHT (cards-editor.ejs) ===================== */
/* "Ausblenden" + "Archivieren" Buttons unter Deck-Cards → Magic-Look (weiß,
 * Lila-Border, Lila-Text). */
:root[data-design="magic"] .ce-ov-hide,
:root[data-design="magic"] .ce-ov-archive,
:root[data-design="magic"] .ce-ov-actions .btn-ghost {
  background: var(--surface) !important;
  color: var(--amber) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--r-pill) !important;
}
:root[data-design="magic"] .ce-ov-hide:hover,
:root[data-design="magic"] .ce-ov-actions .btn-ghost:hover {
  background: var(--amber-soft) !important;
  border-color: var(--amber) !important;
  color: var(--amber-2) !important;
}
:root[data-design="magic"] .ce-ov-archive:hover {
  background: var(--magic-warm-soft) !important;
  border-color: var(--magic-warm) !important;
  color: var(--magic-warm-ink) !important;
}
/* Hinweisbox "Du blendest aktuell N Decks aus" — von Blau auf Lila. */
:root[data-design="magic"] .ce-overview > div[style*="#eff6ff"],
:root[data-design="magic"] .ce-ov-hidden-notice {
  background: var(--amber-soft) !important;
  border-left: 3px solid var(--amber) !important;
  color: var(--amber-2) !important;
}

/* ===================== FOOTER ===================== */
/* cc-app-footer ist sub-surface-2 → mit unseren Tokens jetzt lila-soft.
 * Zusätzlich klare Lila-Border-Top + Lila-Link-Hover. */
:root[data-design="magic"] .cc-app-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border-2) !important;
  color: var(--ink-2) !important;
}
:root[data-design="magic"] .cc-app-footer-brand,
:root[data-design="magic"] .cc-app-footer-name { color: var(--amber-2) !important; }
:root[data-design="magic"] .cc-app-footer-links a { color: var(--ink-2) !important; }
:root[data-design="magic"] .cc-app-footer-links a:hover { color: var(--amber) !important; }

/* ===================== CARDS-EDITOR (Karteneditor) ===================== */
/* .ce-toolbar + .ce-editor nutzen --surface-2 (lila-soft mit unseren Tokens).
 * Edit-Panel rechts mit klarer Border, damit es sich vom restlichen
 * lila-soft abhebt (User: "rechte edit page kaum erkennbar"). */
:root[data-design="magic"] .ce-toolbar {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border-2) !important;
}
:root[data-design="magic"] .ce-editor {
  background: var(--surface-2) !important;
  border-left: 1px solid var(--border-2) !important;
  box-shadow: inset 2px 0 8px rgba(124,58,237,0.06) !important;
}
:root[data-design="magic"] .ce-editor h3 { color: var(--amber-2) !important; }
:root[data-design="magic"] .ce-editor .ce-field label { color: var(--mute) !important; }
:root[data-design="magic"] .ce-editor input,
:root[data-design="magic"] .ce-editor select,
:root[data-design="magic"] .ce-editor textarea,
:root[data-design="magic"] .ce-editor .ce-rt {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
}
:root[data-design="magic"] .ce-editor input:focus,
:root[data-design="magic"] .ce-editor select:focus,
:root[data-design="magic"] .ce-editor textarea:focus,
:root[data-design="magic"] .ce-editor .ce-rt:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
}

/* .ce-table: hover-/selected-Zeilen lila statt amber. */
:root[data-design="magic"] .ce-table tbody tr:hover {
  background: rgba(124,58,237,0.05) !important;
}
:root[data-design="magic"] .ce-table tbody tr.selected {
  background: rgba(124,58,237,0.12) !important;
}
:root[data-design="magic"] .ce-table thead th {
  background: var(--amber-soft) !important;
  color: var(--amber-2) !important;
  border-bottom: 1px solid var(--border-2) !important;
}
:root[data-design="magic"] .ce-type-badge {
  background: var(--amber-soft) !important;
  color: var(--amber-2) !important;
}

/* ===================== KLASSENDURCHSCHNITT (.lf-class-avg) ===================== */
/* Klarer erkennbar — warm-amber soft mit deutlicher Border (Energie/Aktivität). */
:root[data-design="magic"] .lf-class-avg {
  background: linear-gradient(180deg, var(--magic-warm-soft), rgba(245,158,11,0.10)) !important;
  border-top: 1px solid var(--magic-warm) !important;
  border-bottom: 2px solid var(--magic-warm) !important;
}
:root[data-design="magic"] .lf-class-avg:hover {
  background: linear-gradient(180deg, #FDE68A, var(--magic-warm-soft)) !important;
}

/* ===================== ERFOLGE-SEITE — KPI-CONTAINER ===================== */
/* Die 4 KPIs oben (KARTEN GEÜBT, KARTEN GEMEISTERT, AKTIVE TAGE, TREFFSICHERHEIT)
 * sitzen in einem .summary/.kpi-grid → nutzt surface-2 (jetzt lila-soft) als
 * Container-bg. Zusätzlich .stat-Karten weiß mit lila Border (schon definiert
 * weiter oben). */

/* ===================== LERNFORTSCHRITT — SVG-RING-FARBEN ===================== */
/* Server-seitig generierte Ringe (lernfortschritt-refresh.ejs) emittieren
 * style="fill: var(--lf-fill-*, …)" — hier mapt Magic ihre Status-Farben auf
 * etwas weniger grelle Pastell-Hues, damit der Ring nicht aus dem Magic-Look fällt. */
html[data-design="magic"] body.v2-refresh {
  --lf-fill-none:   #efeaff;   /* sanftes Lavendel */
  --lf-fill-green:  #a7f3d0;   /* mint-pastell, etwas heller als #86efac */
  --lf-fill-yellow: #fde68a;
  --lf-fill-red:    #fbcfe8;   /* rosé statt rot — pink/lila-konsistent */
  --lf-fill-ns:     #f5f3ff;
  --lf-letter-dark:  #4c1d95;
  --lf-letter-mute:  #8b80ad;
  --lf-ctr-ok:   #059669;
  --lf-ctr-warn: #b45309;
  --lf-ctr-err:  #db2777;
  --lf-ctr-mute: #8b80ad;
}
html[data-design="magic"][data-theme="dark"] body.v2-refresh {
  --lf-fill-none:   rgba(167,139,250,0.16);
  --lf-fill-green:  rgba(110,231,183,0.55);
  --lf-fill-yellow: rgba(252,211,77,0.55);
  --lf-fill-red:    rgba(244,114,182,0.55);
  --lf-fill-ns:     rgba(167,139,250,0.10);
  --lf-letter-dark:  #ede9fe;
  --lf-letter-mute:  #9b8dc4;
  --lf-ctr-ok:   #34d399;
  --lf-ctr-warn: #fbbf24;
  --lf-ctr-err:  #f472b6;
  --lf-ctr-mute: #9b8dc4;
}