:root {
  --bg: #f3f6f5;
  --panel: #ffffff;
  --border: #e5eae7;
  --text: #182420;
  --text-muted: #607169;
  --accent: #0d3d29;
  --accent-strong: #1f8a57;
  --accent-soft: #e6f5ee;
  --good: #1f8a57;
  --warn: #d9a02a;
  --warn-soft: #fbf1de;
  --bad: #c94444;
  --gold-soft: #fdf6e6;
  --info-soft: #eef4fb;
  --fail-soft: #eef2f5;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 2px 8px rgba(15, 40, 30, 0.06), 0 1px 2px rgba(15, 40, 30, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 40, 30, 0.12);
  --font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cert: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* neues Theme (Sidebar/Dashboard-Redesign) - zusaetzliche Tokens */
  --accent-mid: #1f8a57;
  --mint: #bfe8d3;
  --panel-glass: rgba(255, 255, 255, .72);
  --shadow-soft: 0 2px 6px rgba(7, 80, 51, .05), 0 12px 32px rgba(7, 80, 51, .08);
  --shadow-lift: 0 6px 14px rgba(7, 80, 51, .10), 0 22px 48px rgba(7, 80, 51, .14);
  --ring-track: rgba(7, 80, 51, .10);
  --hero-grad: linear-gradient(135deg, #075033 0%, #0d3d29 55%, #0f5237 100%);
  --blob-a: rgba(35, 169, 106, .16);
  --blob-b: rgba(7, 80, 51, .14);
  --sidebar-wash: linear-gradient(178deg, rgba(230,245,238,.85) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.95) 72%, rgba(230,245,238,.65) 100%);
  --kbd-bg: rgba(7, 80, 51, .06);
  --xp-glow: 0 0 12px rgba(35, 169, 106, .55), 0 0 28px rgba(35, 169, 106, .30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101813;
    --panel: #182420;
    --border: #2a3a32;
    --text: #e9f1ec;
    --text-muted: #93a89d;
    --accent: #bfe8d3;
    --accent-strong: #3ec283;
    --accent-soft: #1d332a;
    --good: #3ec283;
    --warn: #e2b25a;
    --warn-soft: #33291a;
    --bad: #e2716a;
    --gold-soft: #332c1a;
    --info-soft: #1b2734;
    --fail-soft: #232e29;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

    --accent-mid: #2fbf7b;
    --mint: #bfe8d3;
    --panel-glass: rgba(255, 255, 255, .055);
    --shadow-soft: 0 2px 6px rgba(0,0,0,.25), 0 14px 36px rgba(0,0,0,.35);
    --shadow-lift: 0 8px 18px rgba(0,0,0,.35), 0 26px 56px rgba(0,0,0,.45);
    --ring-track: rgba(191, 232, 211, .14);
    --hero-grad: linear-gradient(135deg, #0b3a26 0%, #08301f 55%, #0e4a30 100%);
    --blob-a: rgba(35, 169, 106, .20);
    --blob-b: rgba(191, 232, 211, .07);
    --sidebar-wash: linear-gradient(178deg, rgba(35,169,106,.10) 0%, rgba(12,42,28,.55) 30%, rgba(12,42,28,.65) 70%, rgba(7,27,18,.4) 100%);
    --kbd-bg: rgba(191, 232, 211, .10);
    --xp-glow: 0 0 14px rgba(35, 169, 106, .65), 0 0 34px rgba(35, 169, 106, .35);
  }
}

:root[data-theme="dark"] {
  --bg: #101813;
  --panel: #182420;
  --border: #2a3a32;
  --text: #e9f1ec;
  --text-muted: #93a89d;
  --accent: #bfe8d3;
  --accent-strong: #3ec283;
  --accent-soft: #1d332a;
  --good: #3ec283;
  --warn: #e2b25a;
  --warn-soft: #33291a;
  --bad: #e2716a;
  --gold-soft: #332c1a;
  --info-soft: #1b2734;
  --fail-soft: #232e29;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  --accent-mid: #2fbf7b;
  --mint: #bfe8d3;
  --panel-glass: rgba(255, 255, 255, .055);
  --shadow-soft: 0 2px 6px rgba(0,0,0,.25), 0 14px 36px rgba(0,0,0,.35);
  --shadow-lift: 0 8px 18px rgba(0,0,0,.35), 0 26px 56px rgba(0,0,0,.45);
  --ring-track: rgba(191, 232, 211, .14);
  --hero-grad: linear-gradient(135deg, #0b3a26 0%, #08301f 55%, #0e4a30 100%);
  --blob-a: rgba(35, 169, 106, .20);
  --blob-b: rgba(191, 232, 211, .07);
  --sidebar-wash: linear-gradient(178deg, rgba(35,169,106,.10) 0%, rgba(12,42,28,.55) 30%, rgba(12,42,28,.65) 70%, rgba(7,27,18,.4) 100%);
  --kbd-bg: rgba(191, 232, 211, .10);
  --xp-glow: 0 0 14px rgba(35, 169, 106, .65), 0 0 34px rgba(35, 169, 106, .35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(31, 138, 87, 0.06) 0, transparent 45%),
    radial-gradient(circle at 90% 5%, rgba(31, 138, 87, 0.05) 0, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* body { height:100% } bezieht sich nur auf die Viewport-Höhe, nicht auf die tatsächliche
     (oft viel längere) Dokumenthöhe bei überlaufendem Inhalt - ohne no-repeat kachelt der
     Browser dieses Glow-Gradient-Paar den ganzen Scroll-Bereich hinunter und an jeder
     Kachelgrenze entsteht eine sichtbare harte Linie im Hintergrund. Einmalig oben reicht als
     dezenter Akzent, muss nicht wiederholt werden.
     Das dritte Layer ist ein winziges, wiederholtes Rauschmuster (SVG feTurbulence, ~3.5%
     Deckkraft) - der eigentliche Bug, den Peter als "Hintergrundbild-Problem" gemeldet hat, war
     kein kaputtes Kacheln, sondern sichtbares Banding: Die beiden Glow-Gradients oben sind so
     subtil (5-6% Deckkraft) über so eine große Fläche, dass der Bildschirm die Farbabstufung
     nicht glatt interpolieren kann und stattdessen harte Streifen zeigt - in Hell- UND
     Dunkelmodus reproduziert. Das Rauschen dithert das weg, ohne selbst sichtbar zu sein
     (deshalb DARF es hier ganz normal kacheln - Störgeräusch statt Farbverlauf hat keine
     erkennbaren Kachelgrenzen). */
  background-repeat: no-repeat, no-repeat, repeat;
  color: var(--text);
  font-family: var(--font-body);
  transition: background .15s ease, color .15s ease;
}

.app {
  display: flex;
  min-height: 100vh;
}

/* Boot-Abdeckung - siehe index.html für den Grund */
.app-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #075033 0%, #0d3d29 55%, #0f5237 100%);
  transition: opacity .25s ease;
}
.app-boot.app-boot-hidden { opacity: 0; pointer-events: none; }
.app-boot-mark {
  display: flex;
  animation: appBootPulse 1.4s ease-in-out infinite;
}
@keyframes appBootPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .app-boot-mark { animation: none; }
}

/* Ersetzt den Boot-Splash, wenn init() scheitert (siehe showBootFailure in app.js) - der
   einzige Zustand, in dem der Nutzer sonst gar nichts als eine pulsierende Grafik sähe. */
.boot-failure { max-width: 520px; margin: 48px auto; text-align: center; }
.boot-failure h2 { margin: 0 0 10px; }
.boot-failure p { color: var(--text-muted); margin: 0 0 18px; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width, 272px);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 20;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: var(--accent-soft);
}
.sidebar.resizing { transition: none !important; }
body.sidebar-dragging { cursor: col-resize; user-select: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(160deg, var(--accent-soft) 0%, transparent 70%);
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

.theme-toggle {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;
  margin-right: -2px;
  transition: color .12s ease, transform .12s ease;
}
.theme-toggle:hover { color: var(--accent-strong); transform: scale(1.06); }
.theme-toggle svg { width: 16px; height: 16px; }

.brand-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand-sub { font-size: 11.5px; color: var(--text-muted); }

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
}

.nav-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 14px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  margin-bottom: 2px;
  font-size: 14px;
  transition: background .12s ease;
}

.nav-item:hover { background: var(--accent-soft); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active .nav-icon { transform: scale(1.05); }

.nav-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }

.nav-item-meta {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav-vendor-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 2px;
}
.nav-vendor-toggle:hover { background: var(--accent-soft); }
.nav-vendor-toggle-label { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; }
.nav-vendor-toggle-switch {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background .15s ease;
}
.nav-vendor-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.nav-vendor-toggle-switch.on { background: var(--accent); }
.nav-vendor-toggle-switch.on::after { transform: translateX(14px); }

.nav-topic-header { cursor: pointer; }
.nav-chevron {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform .15s ease;
}
.nav-chevron svg { width: 14px; height: 14px; }
.nav-chevron.open { transform: rotate(90deg); }

.nav-subgroup { display: flex; flex-direction: column; }
.nav-subitem { padding-left: 26px; font-size: 13px; }
.nav-icon-sm { width: 22px; height: 22px; border-radius: 6px; }

.nav-item.placeholder .nav-item-meta { color: var(--warn); background: var(--warn-soft); }

.nav-badge-new {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  /* Fixed brand green (not the theme's --accent-strong, which turns light/low-contrast
     against white text in dark mode) so this stays readable in both themes. */
  background: #146b41;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
}

.user-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }

#userSelect {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  margin-bottom: 6px;
  font-family: var(--font-body);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent-strong);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  font-family: var(--font-body);
}
.btn-link:hover { text-decoration: underline; }

.new-user-form { margin-top: 8px; }
.new-user-form input {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  margin-bottom: 6px;
  font-family: var(--font-body);
}
.new-user-actions { display: flex; align-items: center; gap: 10px; }

/* Main */
.main {
  flex: 1;
  padding: 36px 44px 60px;
  max-width: 1100px;
}

.empty-state { color: var(--text-muted); padding: 40px 0; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-size: 12px;
}
.site-footer-mark { width: 20px; height: 20px; flex-shrink: 0; }
.site-footer-mark svg { width: 100%; height: 100%; display: block; }

h1 { font-family: var(--font-head); font-size: 27px; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-family: var(--font-head); font-size: 20px; margin: 0 0 4px; }
h3 { font-family: var(--font-head); font-size: 16px; margin: 0 0 4px; }

.subtitle { color: var(--text-muted); margin: 0 0 24px; font-size: 15px; max-width: 640px; }

.breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  cursor: pointer;
}
.breadcrumb span { cursor: pointer; }
.breadcrumb span:hover { color: var(--accent-strong); text-decoration: underline; }

/* Hero */
.hero {
  display: flex;
  align-items: center;
  gap: 32px;
  background: linear-gradient(135deg, var(--panel) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-text { flex: 1.2; min-width: 0; }
.hero-text h1 { font-size: 30px; }
.hero-illustration { flex: 1; min-width: 220px; max-width: 340px; }
.hero-stats { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.hero-stat { }
.hero-stat .num { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--accent-strong); }
.hero-stat .lbl { font-size: 12px; color: var(--text-muted); }

.xp-bar-wrap { margin-top: 14px; max-width: 320px; }
.xp-bar { height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .3s ease; }
.xp-bar-label { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

.gami-toast {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gami-toast-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent-strong); }
.gami-toast-icon { flex-shrink: 0; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }

/* ---------- Sammelkarten (.bcard) ----------
   Eine Karte = ein Erfolg. Die Seltenheitsstufe (Bronze/Silber/Gold/Legendär/Geheim) steuert
   ueber CSS-Variablen den Schild-Verlauf, den Kartenrand und die Sternfarbe - das ist das
   primaere Signal (wie die Kartenfarbe bei FUT), Sterne sind die Feinabstufung.
   Alles reines CSS: kein Bildmaterial, Schild per clip-path, Holo-Effekt per Verlaufsanimation. */
.bcard {
  --bc-grad: linear-gradient(145deg, #e0a370 0%, #b4692f 45%, #7a4419 100%);
  --bc-core: linear-gradient(160deg, #a9673a, #6e3f1c);
  --bc-line: rgba(180, 105, 47, .38);
  --bc-wash: rgba(180, 105, 47, .07);
  --bc-star: #b4692f;
  --bc-glow: 0 6px 14px rgba(122, 68, 25, .22);
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: 14px; border: 1px solid var(--bc-line);
  background: linear-gradient(160deg, var(--bc-wash), transparent 60%) , var(--panel);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.bcard-silver {
  --bc-grad: linear-gradient(145deg, #f7fafc 0%, #bcc6cf 45%, #7d8a96 100%);
  --bc-core: linear-gradient(160deg, #7d8a96, #4b5661);
  --bc-line: rgba(125, 138, 150, .45); --bc-wash: rgba(125, 138, 150, .10); --bc-star: #8a97a3;
  --bc-glow: 0 6px 14px rgba(75, 86, 97, .22);
}
.bcard-gold {
  --bc-grad: linear-gradient(145deg, #fff1b8 0%, #f0c24b 40%, #b8860b 100%);
  --bc-core: linear-gradient(160deg, #c8951a, #7a5a10);
  --bc-line: rgba(217, 160, 42, .5); --bc-wash: rgba(240, 194, 75, .12); --bc-star: #d9a02a;
  --bc-glow: 0 6px 16px rgba(184, 134, 11, .30);
}
.bcard-legendary {
  --bc-grad: linear-gradient(120deg, #ff8ab5, #ffd36e, #7dffb3, #6ec8ff, #c58cff, #ff8ab5);
  --bc-core: linear-gradient(160deg, #2b2f6b, #14173a);
  --bc-line: transparent; --bc-wash: rgba(197, 140, 255, .10); --bc-star: #b06cff;
  --bc-glow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 8px 22px rgba(176, 108, 255, .38);
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--bc-grad) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: holoShift 7s linear infinite;
}
.bcard-secret {
  --bc-grad: linear-gradient(145deg, #a37cff 0%, #5a2fb8 50%, #1d0c42 100%);
  --bc-core: linear-gradient(160deg, #3a1c78, #170a33);
  --bc-line: rgba(155, 109, 255, .6); --bc-wash: rgba(122, 77, 219, .12); --bc-star: #9b6dff;
  --bc-glow: 0 0 0 2px rgba(155,109,255,.18), 0 8px 20px rgba(90, 47, 184, .35);
  border-style: dashed;
}
.bcard.locked { opacity: .5; }
.bcard.locked:hover { transform: none; box-shadow: none; }
.bcard.locked .bcard-shield { filter: grayscale(1) contrast(.85); }
.bcard.locked .bcard-stars { color: var(--text-muted); }

/* Schild: aeussere Form = Metallrand (Verlauf), innerer Kern dunkel mit Icon */
.bcard-shield {
  --bc-size: 56px;
  position: relative; flex: none; display: block;
  width: var(--bc-size); height: calc(var(--bc-size) * 1.12);
  background: var(--bc-grad); background-size: 300% 300%;
  clip-path: polygon(50% 0%, 100% 9%, 100% 54%, 50% 100%, 0% 54%, 0% 9%);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.22));
}
.bcard-shield-core {
  position: absolute; inset: 3px; display: flex; align-items: center; justify-content: center;
  background: var(--bc-core);
  clip-path: polygon(50% 0%, 100% 9%, 100% 54%, 50% 100%, 0% 54%, 0% 9%);
}
.bcard-shield-core::after {
  /* Glanzkante oben links */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 48%);
  pointer-events: none;
}
.bcard-shield-core svg { position: relative; z-index: 1; display: block; }
.bcard-legendary .bcard-shield { animation: holoShift 5s linear infinite; }
.bcard-legendary .bcard-shield-core::after {
  background: linear-gradient(135deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.22) 100%);
}
.bcard-secret .bcard-shield-core::before {
  /* Funkelpunkte - "geheim" soll anders wirken als "schwer" */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 24%, rgba(255,255,255,.7) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 62% 70%, rgba(255,255,255,.8) 0 1px, transparent 2px);
}
@keyframes holoShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

.bcard-body { min-width: 0; flex: 1; }
.bcard-tier {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bc-star); display: flex; align-items: center; gap: 4px;
}
.bcard-legendary .bcard-tier {
  background: linear-gradient(90deg, #ff6fa8, #ffb84d, #4dd6a0, #4fb4ff, #b06cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bcard-egg { font-size: 12px; }
.bcard-title { font-weight: 700; font-size: 13.5px; margin-top: 2px; line-height: 1.3; }
.bcard-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.bcard-stars { display: inline-block; margin-top: 6px; font-size: 12px; letter-spacing: 1px; color: var(--bc-star); line-height: 1; }
.bcard-stars i { font-style: normal; opacity: .22; }
.bcard-legendary .bcard-stars { color: #b06cff; }

/* Kompakte Karte (Hero-Vitrine): Schild, Name, Sterne uebereinander */
.bcard.compact {
  flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 9px 4px 7px; border-radius: 12px;
  background: linear-gradient(160deg, var(--bc-wash), rgba(255,255,255,.04)), rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.bcard.compact.bcard-gold { border-color: rgba(240,194,75,.45); }
.bcard.compact.bcard-secret { border-color: rgba(155,109,255,.55); }
.bcard.compact.bcard-legendary { background: linear-gradient(rgba(12,50,32,.95), rgba(12,50,32,.95)) padding-box, var(--bc-grad) border-box; background-size: 100% 100%, 300% 300%; border-color: transparent; }
.bcard.compact .bcard-shield { filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.bcard.compact .bcard-name { font-size: 10px; font-weight: 600; line-height: 1.2; color: #e6f5ee; max-height: 2.4em; overflow: hidden; }
.bcard.compact .bcard-stars { margin-top: 0; font-size: 9px; letter-spacing: .5px; }
.bcard.compact .bcard-stars i { opacity: .3; }
.bcard.compact:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--bc-glow); }

/* Sektionen der Erfolgsliste */
.bcard-section { margin-top: 22px; }
.bcard-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bcard-section-head h3 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.bcard-section-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: linear-gradient(145deg, #e0a370, #7a4419); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bcard-section-silver .bcard-section-dot { background: linear-gradient(145deg, #f7fafc, #7d8a96); }
.bcard-section-gold .bcard-section-dot { background: linear-gradient(145deg, #fff1b8, #b8860b); }
.bcard-section-legendary .bcard-section-dot { background: linear-gradient(120deg, #ff8ab5, #ffd36e, #7dffb3, #6ec8ff, #c58cff); }
.bcard-section-secret .bcard-section-dot { background: linear-gradient(145deg, #a37cff, #1d0c42); }
.bcard-section-count { font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.main h2 .bcard-section-count { margin-left: auto; }
.bcard-section-hint { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
/* Geheime Erfolge ohne Fund: nur ein Teaser, bewusst ohne Zähler/Platzhalter (siehe renderAchievements). */
.bcard-secret-teaser {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px;
  border: 1px dashed rgba(155, 109, 255, .55);
  background: linear-gradient(160deg, rgba(122, 77, 219, .09), transparent 70%);
  color: var(--text-muted); font-size: 13.5px; font-style: italic;
  display: flex; align-items: center; gap: 12px;
}
.bcard-secret-teaser-egg { font-style: normal; font-size: 22px; filter: grayscale(1) opacity(.55); }

/* ---------- Freischalt-Moment (.uc = unlock celebration) ----------
   Vollbild-Overlay, das sich selbst entfernt (app.js: playUnlockCelebration). pointer-events:none,
   damit es nie einen Klick schluckt. Alles Bewegung = transform/opacity in Keyframes; Dauer
   (--uc-ms), Schildbreite (--uc-size, in vmin) und Schweifwinkel (--uc-angle) kommen vom JS.
   Aufbau der Szene (.uc-scene, Ursprung = Schildmitte, alles relativ zu --uc-size):
     .uc-wake   breite Leuchtwolke des Kometen-Schweifs   (hinten)
     .uc-trail  Bänder in Markengrün + Stufenfarbe
     .uc-halo   weicher Lichthof
     .uc-burst  Strahlenkranz (dreht langsam - die Marke selbst dreht nie)
     .uc-ring   Pulsringe, die nach außen laufen
     .uc-shield Stufen-Schild in Kartenoptik (gleiche Silhouette wie .bcard-shield)
     .uc-mark   Bechtle-Marke im Schildkern                (vorne)
     .uc-spark  Funkenschwarm eng um das Schild
   Flug: von unten links herein (ease-out), kurzer Halt in der Bildmitte, nach oben rechts hinaus
   (ease-in). Gold + groß zeigen danach die Titelkarte; groß dazu Glanzwelle und Vignette. */
.uc {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none; overflow: hidden;
  --uc-ms: 2600ms; --uc-angle: -12deg; --uc-size: 11vmin;
  --uc-r1: #075033; --uc-r2: #e0a370; --uc-r3: #23A96A; --uc-r4: #6ec8ff; --uc-r5: #c58cff;
  --uc-glow: rgba(224, 163, 112, .6); --uc-ray: rgba(224, 163, 112, .55); --uc-halo: rgba(224, 163, 112, .5);
  --uc-shield-grad: linear-gradient(145deg, #e0a370 0%, #b4692f 45%, #7a4419 100%);
  --uc-shield-core: linear-gradient(160deg, #a9673a, #6e3f1c);
  --uc-ribbon-w: 24vw; --uc-ribbon-h: .55vmin;
  animation: ucLife var(--uc-ms) linear forwards;
}
.uc-silver {
  --uc-r1: #23A96A; --uc-r2: #d7dfe6;
  --uc-glow: rgba(215, 223, 230, .7); --uc-ray: rgba(236, 241, 245, .6); --uc-halo: rgba(215, 223, 230, .55);
  --uc-shield-grad: linear-gradient(145deg, #f7fafc 0%, #bcc6cf 45%, #7d8a96 100%);
  --uc-shield-core: linear-gradient(160deg, #7d8a96, #4b5661);
}
.uc-gold {
  --uc-r1: #23A96A; --uc-r2: #f0c24b; --uc-r3: #075033;
  --uc-glow: rgba(240, 194, 75, .7); --uc-ray: rgba(255, 226, 140, .6); --uc-halo: rgba(240, 194, 75, .55);
  --uc-shield-grad: linear-gradient(145deg, #fff1b8 0%, #f0c24b 40%, #b8860b 100%);
  --uc-shield-core: linear-gradient(160deg, #c8951a, #7a5a10);
  --uc-ribbon-w: 36vw; --uc-ribbon-h: .7vmin;
}
.uc-legendary {
  --uc-r1: #ff8ab5; --uc-r2: #ffd36e; --uc-r3: #23A96A; --uc-r4: #6ec8ff; --uc-r5: #c58cff;
  --uc-glow: rgba(255, 255, 255, .8); --uc-ray: rgba(255, 255, 255, .55); --uc-halo: rgba(255, 255, 255, .55);
  --uc-shield-grad: linear-gradient(120deg, #ff8ab5, #ffd36e, #7dffb3, #6ec8ff, #c58cff, #ff8ab5);
  --uc-shield-core: linear-gradient(160deg, #2b2f6b, #14173a);
  --uc-ribbon-w: 48vw; --uc-ribbon-h: .9vmin;
  --uc-veil: rgba(7, 80, 51, .62);
}
.uc-secret {
  --uc-r1: #c9b3ff; --uc-r2: #a37cff; --uc-r3: #23A96A; --uc-r4: #7a4ddb; --uc-r5: #bfe8d3;
  --uc-glow: rgba(163, 124, 255, .85); --uc-ray: rgba(201, 179, 255, .6); --uc-halo: rgba(163, 124, 255, .6);
  --uc-shield-grad: linear-gradient(145deg, #a37cff 0%, #5a2fb8 50%, #1d0c42 100%);
  --uc-shield-core: linear-gradient(160deg, #3a1c78, #170a33);
  --uc-ribbon-w: 48vw; --uc-ribbon-h: .9vmin;
  --uc-veil: rgba(29, 12, 66, .66);
}
@keyframes ucLife { 0%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* Flugbahn: Herein (sanft abbremsend), Halt in der Bildmitte, Hinaus (sanft beschleunigend).
   Die Szene wächst beim Hereinkommen auf volle Größe und schrumpft beim Abgang etwas - so liest
   sich der Flug als "Enthüllung", nicht als Geschoss. Die Halte-Phase ist bei allen Stufen drin,
   bei Gold/groß länger. Geheim fliegt spiegelverkehrt (von rechts nach links). */
.uc-path { position: absolute; left: 0; top: 0; will-change: transform; animation: ucFlyLow var(--uc-ms) cubic-bezier(.45, 0, .55, 1) forwards; }
.uc-gold .uc-path { animation-name: ucFlyMid; }
.uc-legendary .uc-path, .uc-secret .uc-path { animation-name: ucFlyBig; }
.uc-secret .uc-path { animation-name: ucFlyBigRev; }
@keyframes ucFlyLow {
  0% { transform: translate(-28vw, 70vh) scale(.55); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  42% { transform: translate(50vw, 48vh) scale(1); animation-timing-function: ease-in-out; }
  58% { transform: translate(52vw, 46vh) scale(1); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  100% { transform: translate(130vw, 22vh) scale(.75); }
}
@keyframes ucFlyMid {
  0% { transform: translate(-30vw, 82vh) scale(.5); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  38% { transform: translate(50vw, 50vh) scale(1); animation-timing-function: ease-in-out; }
  56% { transform: translate(51vw, 48vh) scale(1); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  82%, 100% { transform: translate(134vw, 12vh) scale(.7); }
}
@keyframes ucFlyBig {
  0% { transform: translate(-36vw, 88vh) scale(.45); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  36% { transform: translate(50vw, 50vh) scale(1); animation-timing-function: ease-in-out; }
  60% { transform: translate(51vw, 48vh) scale(1.04); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  84%, 100% { transform: translate(140vw, 8vh) scale(.7); }
}
@keyframes ucFlyBigRev {
  0% { transform: translate(136vw, 88vh) scale(.45); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  36% { transform: translate(50vw, 50vh) scale(1); animation-timing-function: ease-in-out; }
  60% { transform: translate(49vw, 48vh) scale(1.04); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  84%, 100% { transform: translate(-40vw, 8vh) scale(.7); }
}
/* Leichtes Schweben während des ganzen Flugs (nur Gold + groß). */
.uc-bob { position: absolute; left: 0; top: 0; }
.uc-gold .uc-bob, .uc-legendary .uc-bob, .uc-secret .uc-bob { animation: ucBob 1500ms ease-in-out infinite alternate; }
@keyframes ucBob { from { transform: translateY(-1.6vh); } to { transform: translateY(1.6vh); } }

/* Die Szene: Ursprung ist die Schildmitte, alle Ebenen sind darum zentriert und in --uc-size
   bemessen, damit die ganze Komposition mit der Viewport-Größe skaliert. */
.uc-scene { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.uc-scene > * { position: absolute; left: 0; top: 0; }

/* Lichthof: weiche Leuchtscheibe hinter dem Schild, atmet leicht. */
.uc-halo {
  width: calc(var(--uc-size) * 2.4); height: calc(var(--uc-size) * 2.4); border-radius: 50%;
  background: radial-gradient(circle, var(--uc-halo) 0%, var(--uc-halo) 18%, transparent 68%);
  transform: translate(-50%, -50%);
  animation: ucHalo 1300ms ease-in-out infinite alternate;
}
@keyframes ucHalo { from { transform: translate(-50%, -50%) scale(.9); opacity: .8; } to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }

/* Strahlenkranz: 12 weiche Strahlen (Conic-Gradient), radial ausgeblendet, dreht langsam.
   Rotieren darf hier nur der Kranz - die Marke selbst nie. */
.uc-burst {
  width: calc(var(--uc-size) * 2.1); height: calc(var(--uc-size) * 2.1); border-radius: 50%;
  background: var(--uc-burst-bg, var(--uc-ray));
  -webkit-mask: repeating-conic-gradient(from 0deg, transparent 0deg 18deg, #000 22deg 26deg, transparent 30deg), radial-gradient(circle, transparent 22%, #000 32%, #000 52%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(from 0deg, transparent 0deg 18deg, #000 22deg 26deg, transparent 30deg), radial-gradient(circle, transparent 22%, #000 32%, #000 52%, transparent 72%);
  mask-composite: intersect;
  transform: translate(-50%, -50%);
  animation: ucSpin 9s linear infinite;
}
/* Legendär: die Strahlen tragen den Holo-Verlauf der Karte (weiße Strahlen gingen auf der hellen
   Seite unter); Geheim: violett-weiß. */
.uc-legendary .uc-burst, .uc-secret .uc-burst { width: calc(var(--uc-size) * 2.4); height: calc(var(--uc-size) * 2.4); }
.uc-legendary .uc-burst { --uc-burst-bg: conic-gradient(from 0deg, #ff8ab5, #ffd36e, #7dffb3, #6ec8ff, #c58cff, #ff8ab5); opacity: .8; }
.uc-secret .uc-burst { --uc-burst-bg: conic-gradient(from 0deg, #c9b3ff, #7a4ddb, #ffffff, #a37cff, #c9b3ff); opacity: .8; }
@keyframes ucSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Pulsringe: laufen gestaffelt vom Schild nach außen und verblassen. */
.uc-ring {
  width: calc(var(--uc-size) * 1.15); height: calc(var(--uc-size) * 1.15); border-radius: 50%;
  border: calc(var(--uc-size) * .025) solid var(--uc-glow); opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  animation: ucRing 1800ms cubic-bezier(.2, .6, .4, 1) infinite;
}
.uc-ring:nth-of-type(2) { animation-delay: 600ms; }
.uc-ring:nth-of-type(3) { animation-delay: 1200ms; border-color: var(--uc-r2); }
@keyframes ucRing {
  0% { transform: translate(-50%, -50%) scale(.7); opacity: 0; }
  15% { opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Schild: dieselbe Silhouette wie die Sammelkarten (.bcard-shield), Rand = Stufenverlauf, Kern
   dunkel - die Marke sitzt darin wie das Icon auf der Karte. Legendär: Holo-Verlauf wandert. */
.uc-shield {
  width: var(--uc-size); height: calc(var(--uc-size) * 1.12);
  transform: translate(-50%, -50%);
  background: var(--uc-shield-grad); background-size: 300% 300%;
  clip-path: polygon(50% 0%, 100% 9%, 100% 54%, 50% 100%, 0% 54%, 0% 9%);
}
.uc-legendary .uc-shield { animation: holoShift 5s linear infinite; }
.uc-shield-core {
  position: absolute; inset: 4.5%;
  background: var(--uc-shield-core);
  clip-path: polygon(50% 0%, 100% 9%, 100% 54%, 50% 100%, 0% 54%, 0% 9%);
}
.uc-shield-core::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 48%);
}
.uc-legendary .uc-shield-core::after { background: linear-gradient(135deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.22) 100%); }
.uc-secret .uc-shield-core::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.9) 0 .35vmin, transparent .7vmin),
    radial-gradient(circle at 74% 24%, rgba(255,255,255,.7) 0 .3vmin, transparent .6vmin),
    radial-gradient(circle at 62% 70%, rgba(255,255,255,.8) 0 .35vmin, transparent .7vmin);
}

/* Die Marke selbst: nie rotieren, nur leuchten. Sitzt im optischen Zentrum des Schilds (etwas
   oberhalb der Hälfte, weil die Spitze unten Platz braucht). Größe rein über CSS, nicht px. */
.uc-mark {
  width: calc(var(--uc-size) * .6); height: calc(var(--uc-size) * .6); line-height: 0;
  transform: translate(-50%, -54%);
  filter: drop-shadow(0 0 calc(var(--uc-size) * .06) var(--uc-glow)) drop-shadow(0 .4vmin 1vmin rgba(0,0,0,.35));
}
.uc-mark svg { width: 100%; height: 100%; display: block; }

/* Kometen-Schweif: breite Leuchtwolke (Volumen) plus Bänder, gegen die Flugrichtung aufgespannt. */
.uc-wake {
  right: 0; left: auto; width: calc(var(--uc-ribbon-w) * .8); height: calc(var(--uc-size) * .95);
  transform: translateY(-50%) rotate(var(--uc-angle)); transform-origin: 100% 50%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0%, var(--uc-glow) 100%);
  -webkit-mask: radial-gradient(ellipse at 100% 50%, #000 0%, #000 30%, transparent 100%);
  mask: radial-gradient(ellipse at 100% 50%, #000 0%, #000 30%, transparent 100%);
  opacity: 0;
  animation: ucWake var(--uc-ms) ease-out forwards;
}
.uc-secret .uc-wake {
  right: auto; left: 0; transform: translateY(-50%) rotate(calc(var(--uc-angle) * -1)); transform-origin: 0 50%;
  background: linear-gradient(270deg, transparent 0%, var(--uc-glow) 100%);
  -webkit-mask: radial-gradient(ellipse at 0% 50%, #000 0%, #000 30%, transparent 100%);
  mask: radial-gradient(ellipse at 0% 50%, #000 0%, #000 30%, transparent 100%);
}
@keyframes ucWake {
  0% { opacity: 0; } 14% { opacity: .75; } 62% { opacity: .65; } 100% { opacity: 0; }
}
.uc-trail {
  right: 0; left: auto; width: var(--uc-ribbon-w);
  transform: translateY(-50%) rotate(var(--uc-angle)); transform-origin: 100% 50%;
  display: flex; flex-direction: column; gap: calc(var(--uc-ribbon-h) * .5);
}
.uc-secret .uc-trail { right: auto; left: 0; transform: translateY(-50%) rotate(calc(var(--uc-angle) * -1)); transform-origin: 0 50%; }
.uc-ribbon {
  display: block; height: var(--uc-ribbon-h); border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--c) 100%);
  transform-origin: 100% 50%; transform: scaleX(0); opacity: 0;
  animation: ucRibbon var(--uc-ms) ease-out forwards;
}
.uc-secret .uc-ribbon { background: linear-gradient(270deg, transparent 0%, var(--c) 100%); transform-origin: 0 50%; }
.uc-ribbon:nth-child(1) { --c: var(--uc-r1); }
.uc-ribbon:nth-child(2) { --c: var(--uc-r2); }
.uc-ribbon:nth-child(3) { --c: var(--uc-r3); }
.uc-ribbon:nth-child(4) { --c: var(--uc-r4); }
.uc-ribbon:nth-child(5) { --c: var(--uc-r5); }
.uc-ribbon:nth-child(2) { animation-delay: 40ms; }
.uc-ribbon:nth-child(3) { animation-delay: 80ms; }
.uc-ribbon:nth-child(4) { animation-delay: 120ms; }
.uc-ribbon:nth-child(5) { animation-delay: 160ms; }
@keyframes ucRibbon {
  0% { transform: scaleX(0); opacity: 0; }
  12% { transform: scaleX(1); opacity: .95; }
  60% { transform: scaleX(1); opacity: .9; }
  100% { transform: scaleX(.15); opacity: 0; }
}

/* Nur Gold + groß: Glanzwelle quer über den Viewport. Nur groß: Vignette + Funkenfeld. */
.uc-shine {
  position: absolute; inset: -20% -50%;
  background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,.22) 50%, transparent 56%);
  transform: translateX(-55%); animation: ucShine 1300ms ease-in-out 1300ms both;
}
.uc-legendary .uc-shine, .uc-secret .uc-shine { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 46%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.14) 54%, transparent 60%); animation-duration: 1800ms; animation-delay: 1800ms; }
@keyframes ucShine { from { transform: translateX(-55%); } to { transform: translateX(55%); } }
.uc-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, var(--uc-veil) 100%); opacity: 0; animation: ucVeil var(--uc-ms) ease-in-out forwards; }
@keyframes ucVeil { 0% { opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* Funkenschwarm: vierzackige Sterne in einem engen Ring um das Schild (--x/--y in Schildbreiten,
   vom JS), zünden gestaffelt (--d = Anteil der Gesamtdauer) und fliegen mit der Szene mit. */
.uc-spark {
  width: calc(var(--uc-size) * .16); height: calc(var(--uc-size) * .16);
  left: calc(var(--x, 0) * var(--uc-size)); top: calc(var(--y, 0) * var(--uc-size));
  background: var(--c, #fff); opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 .6vmin var(--uc-glow));
  transform: translate(-50%, -50%) scale(0);
  animation: ucSpark 1400ms ease-out calc(var(--d, .3) * var(--uc-ms)) both;
}
.uc-spark:nth-of-type(4n+1) { --c: var(--uc-r1); }
.uc-spark:nth-of-type(4n+2) { --c: var(--uc-r2); }
.uc-spark:nth-of-type(4n+3) { --c: #ffffff; }
.uc-spark:nth-of-type(4n+4) { --c: var(--uc-r5); }
@keyframes ucSpark {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(var(--s, 1)); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - var(--uc-size) * .35)) scale(calc(var(--s, 1) * .2)); opacity: 0; }
}

/* Titelkarte in der Mitte (Gold + groß, und die einzige Zutat bei reduzierter Bewegung). */
.uc-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  min-width: 240px; max-width: min(88vw, 460px); padding: 22px 30px 20px; border-radius: 20px;
  background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg);
  border: 2px solid var(--border); opacity: 0;
  animation: ucCard var(--uc-ms) cubic-bezier(.2, .8, .2, 1) forwards;
}
.uc-card .bcard-shield { margin-bottom: 8px; }
/* Schild-Farben je Stufe (wie .achv-*): die --bc-Variablen liegen sonst nur auf .bcard-*-Karten. */
.uc-card .bcard-shield { --bc-grad: linear-gradient(145deg, #e0a370 0%, #b4692f 45%, #7a4419 100%); --bc-core: linear-gradient(160deg, #a9673a, #6e3f1c); }
.uc-silver .uc-card .bcard-shield { --bc-grad: linear-gradient(145deg, #f7fafc 0%, #bcc6cf 45%, #7d8a96 100%); --bc-core: linear-gradient(160deg, #7d8a96, #4b5661); }
.uc-gold .uc-card .bcard-shield { --bc-grad: linear-gradient(145deg, #fff1b8 0%, #f0c24b 40%, #b8860b 100%); --bc-core: linear-gradient(160deg, #c8951a, #7a5a10); }
.uc-legendary .uc-card .bcard-shield { --bc-grad: linear-gradient(120deg, #ff8ab5, #ffd36e, #7dffb3, #6ec8ff, #c58cff, #ff8ab5); --bc-core: linear-gradient(160deg, #2b2f6b, #14173a); animation: holoShift 5s linear infinite; }
.uc-secret .uc-card .bcard-shield { --bc-grad: linear-gradient(145deg, #a37cff 0%, #5a2fb8 50%, #1d0c42 100%); --bc-core: linear-gradient(160deg, #3a1c78, #170a33); }
.uc-gold .uc-card { border-color: rgba(240, 194, 75, .7); box-shadow: var(--shadow-lg), 0 0 0 6px rgba(240, 194, 75, .18); }
.uc-legendary .uc-card {
  border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(120deg, #ff8ab5, #ffd36e, #7dffb3, #6ec8ff, #c58cff, #ff8ab5) border-box;
  background-size: 100% 100%, 300% 300%;
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(255, 255, 255, .18), 0 0 60px rgba(197, 140, 255, .45);
}
.uc-secret .uc-card { border-color: rgba(155, 109, 255, .8); box-shadow: var(--shadow-lg), 0 0 0 8px rgba(155, 109, 255, .22), 0 0 60px rgba(90, 47, 184, .5); }
.uc-card-tier { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.uc-legendary .uc-card-tier { background: linear-gradient(90deg, #ff8ab5, #ffd36e, #23A96A, #6ec8ff, #c58cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uc-secret .uc-card-tier { color: #9b6dff; }
.uc-card-name { font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.2; }
.uc-legendary .uc-card-name, .uc-secret .uc-card-name { font-size: 24px; }
.uc-quest-icon { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(160deg, #23A96A, #075033); margin-bottom: 8px; }
/* Die Karte kommt erst, wenn die Szene die Bildmitte wieder verlassen hat (ab ~60 % des Flugs),
   damit beide nie übereinander liegen. */
@keyframes ucCard {
  0%, 62% { opacity: 0; transform: translate(-50%, -42%) scale(.86); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  93% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(.97); }
}
/* Reduzierte Bewegung (vom JS gesetzt): Karte steht sofort, nur Ein-/Ausblenden über Opazität. */
.uc-static .uc-card { animation: ucCardStatic var(--uc-ms) linear forwards; }
@keyframes ucCardStatic { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 640px) {
  .uc-card { padding: 18px 20px 16px; }
  .uc-card-name { font-size: 17px; }
  .uc-legendary .uc-card-name, .uc-secret .uc-card-name { font-size: 20px; }
}

.quest-card { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.quest-card.done { border-color: var(--good); background: var(--good-soft, var(--accent-soft)); }
.quest-card.locked { opacity: .55; border-style: dashed; background: transparent; }
.quest-card-title { font-weight: 700; font-size: 13.5px; }
.quest-card-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.quest-card-reward { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent-strong); white-space: nowrap; }
.quest-card-lock { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; border: 1px dashed var(--border); border-radius: 99px; padding: 4px 10px; }

.achv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 6px; }
.achv-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 20px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel);
}
.achv-card-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.achv-card-icon .bcard-shield { --bc-grad: linear-gradient(145deg, #e0a370 0%, #b4692f 45%, #7a4419 100%); --bc-core: linear-gradient(160deg, #a9673a, #6e3f1c); }
.achv-silver .bcard-shield { --bc-grad: linear-gradient(145deg, #f7fafc 0%, #bcc6cf 45%, #7d8a96 100%); --bc-core: linear-gradient(160deg, #7d8a96, #4b5661); }
.achv-gold .bcard-shield { --bc-grad: linear-gradient(145deg, #fff1b8 0%, #f0c24b 40%, #b8860b 100%); --bc-core: linear-gradient(160deg, #c8951a, #7a5a10); }
.achv-legendary .bcard-shield { --bc-grad: linear-gradient(120deg, #ff8ab5, #ffd36e, #7dffb3, #6ec8ff, #c58cff, #ff8ab5); --bc-core: linear-gradient(160deg, #2b2f6b, #14173a); animation: holoShift 5s linear infinite; }
.achv-card-name { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.achv-card-tier { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.achv-card-tier .bcard-stars { margin-top: 0; font-size: 10px; color: #b4692f; }
.achv-silver .achv-card-tier .bcard-stars { color: #8a97a3; }
.achv-gold .achv-card-tier .bcard-stars { color: #d9a02a; }
.achv-legendary .achv-card-tier .bcard-stars { color: #b06cff; }
.achv-card-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.achv-card-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.achv-card-count { font-size: 16px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.achv-card-count span { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Chat widget */
.chat-widget {
  margin-top: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.chat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chat-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.chat-log { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; padding: 4px 2px; margin-bottom: 12px; }
.chat-bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.chat-bot { background: var(--bg); align-self: flex-start; border-bottom-left-radius: 4px; }
/* Fixed brand green, not --accent-strong: that variable turns light/low-contrast
   against white text in dark mode (same issue as .nav-badge-new). */
.chat-user { background: #146b41; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-typing { color: var(--text-muted); font-style: italic; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chat-chip {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chat-chip:hover { background: var(--accent-strong); color: #fff; }
.chat-input-row { display: flex; gap: 8px; }

.practice-difficulty-picker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.practice-difficulty-picker label { display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text); }
.practice-difficulty-picker input { cursor: pointer; }

.practice-guardrail-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.practice-guardrail-notice svg { flex-shrink: 0; margin-top: 1px; }

.practice-blocked-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fbeaea;
  border: 1px solid #b23a3a;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 14px;
  color: #7a1f1f;
}
.practice-blocked-banner svg { flex-shrink: 0; margin-top: 2px; }
.practice-blocked-banner strong { display: block; margin-bottom: 4px; font-size: 14.5px; }

.practice-feedback-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.practice-feedback-card.positive { border-left: 4px solid var(--accent-strong); }
.practice-feedback-card.negative { border-left: 4px solid #b23a3a; }
.practice-feedback-headline { font-weight: 700; font-size: 15.5px; margin-bottom: 10px; }
.practice-feedback-points { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.practice-feedback-points li { margin-bottom: 6px; }
.practice-feedback-modules ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.practice-history-list { display: flex; flex-direction: column; gap: 10px; }
.practice-history-row { cursor: pointer; padding: 16px 18px; transition: border-color .15s ease; }
.practice-history-row:hover { border-color: var(--accent-strong); }
.practice-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.practice-history-verdict {
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
}
.practice-history-verdict.positive { color: var(--accent-strong); background: #e6f5ee; }
.practice-history-verdict.negative { color: #b23a3a; background: #fbeaea; }
.practice-history-headline { font-weight: 600; font-size: 14px; }
.practice-history-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.practice-history-transcript { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.chat-input-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--font-body);
}
.chat-input-row .btn { padding: 9px 18px; }

/* Topic explainer */
.topic-explainer {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
}
.topic-explainer summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topic-explainer summary::-webkit-details-marker { display: none; }
.topic-explainer summary::before {
  content: '▸';
  color: var(--text-muted);
  transition: transform .15s ease;
}
.topic-explainer[open] summary::before { transform: rotate(90deg); }
.explainer-hint { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.topic-explainer-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.explainer-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
/* Themen-Gruppen (i.d.R. viele Einträge): zweispaltig statt einer langen Liste. */
.explainer-group-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 28px; }
.explainer-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.explainer-item-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: none; }
.explainer-item strong { display: block; font-size: 13px; }
.explainer-item-text { display: block; color: var(--text-muted); }

/* "Erste Schritte" (typischerweise 1 Eintrag): schmale horizontale Leiste statt eigener,
   fast leerer Spalte - Titel und Beschreibung in einer Zeile statt gestapelt. */
.explainer-group-intro .explainer-group-items { grid-template-columns: 1fr; }
.explainer-group-intro .explainer-item-dot { margin-top: 5px; }
.explainer-group-intro .explainer-item > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.explainer-group-intro .explainer-item strong { display: inline; }
.explainer-group-intro .explainer-item-text { display: inline; }

@media (max-width: 640px) {
  .explainer-group-items { grid-template-columns: 1fr; }
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}

.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.card-body { padding: 16px 18px 18px; }

.scene-card {
  position: relative;
  width: 100%;
  height: 132px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--bg);
}
.scene-card::before,
.scene-card::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--sc-color);
}
.scene-card::before { width: 160px; height: 160px; top: -75px; right: -55px; opacity: .16; }
.scene-card::after { width: 90px; height: 90px; bottom: -50px; left: -20px; opacity: .1; }
.scene-badge {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(15, 30, 20, 0.16), 0 2px 6px rgba(15, 30, 20, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-ring-wrap { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.progress-ring-wrap svg { transform: rotate(-90deg); }
.progress-ring-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--accent-strong);
}

.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.progress-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
  margin-top: 12px;
}
.progress-bar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.badge.locked { background: #eef1ef; color: var(--text-muted); }
.badge.unlocked { background: var(--accent-soft); color: var(--accent-strong); }
.badge.passed { background: var(--accent-soft); color: var(--good); }
.badge.placeholder { background: var(--warn-soft); color: var(--warn); }
.badge.outdated { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }

.promo-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(120deg, var(--info-soft) 0%, var(--panel) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-top: 26px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow);
}
.promo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.promo-card .promo-illustration { width: 96px; height: 72px; flex-shrink: 0; }
.promo-card .promo-text { flex: 1; }
.promo-card .promo-arrow { font-size: 22px; color: var(--accent-strong); }

/* Level list */
.topic-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  border-radius: var(--radius-lg);
  padding: 24px 30px;
  margin-bottom: 24px;
  overflow: hidden;
}
.topic-banner .topic-banner-illustration { width: 100px; height: 100px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.motivation-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 13.5px;
  line-height: 1.5;
}
.motivation-banner strong { color: var(--accent-strong); }
.topic-banner-text { flex: 1; }

.level-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.level-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.level-row.locked { opacity: .55; cursor: not-allowed; }
.level-row:hover:not(.locked) { border-color: var(--accent-strong); transform: translateX(2px); }

.level-row-icon { flex-shrink: 0; }
.level-row-main { flex: 1; min-width: 0; }
.level-row-title { font-weight: 600; font-size: 15px; }
.level-row-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Lesson list */
.lesson-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .12s ease;
}
.lesson-row:hover { border-color: var(--accent-strong); }
.lesson-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson-check.done { background: var(--good); border-color: var(--good); }
.lesson-check.done svg { width: 12px; height: 12px; }
.lesson-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); color: var(--text-muted);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.quiz-cta {
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--accent-soft) 0%, var(--panel) 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Lesson content */
.lesson-header-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.lesson-content { line-height: 1.7; font-size: 15.5px; }
.lesson-content p { margin: 0 0 14px; }
.lesson-content ul, .lesson-content ol { margin: 0 0 14px; padding-left: 22px; }
.lesson-content strong { color: var(--accent-strong); }

.keypoints {
  margin-top: 22px;
  padding: 18px 20px;
  background: linear-gradient(120deg, var(--panel) 0%, var(--accent-soft) 140%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.keypoints h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.keypoints ul { margin: 0; padding-left: 0; list-style: none; }
.keypoints li { margin-bottom: 8px; padding-left: 26px; position: relative; }
.keypoints li::before {
  content: '';
  position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--good);
}
.keypoints li::after {
  content: '✓';
  position: absolute; left: 3px; top: 1px;
  color: #fff; font-size: 10px; font-weight: 700;
}

/* Buttons */
.btn {
  background: var(--accent-strong);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .12s ease, transform .12s ease;
}
.btn:hover { background: var(--accent); transform: translateY(-1px); }
.btn.secondary {
  background: var(--panel);
  color: var(--accent-strong);
  border: 1px solid var(--accent-strong);
}
.btn.secondary:hover { background: var(--accent-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.actions { display: flex; gap: 10px; margin-top: 26px; }

.briefing-export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.briefing-export-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.briefing-export-actions .btn svg { width: 15px; height: 15px; }
.briefing-export-actions .btn.briefing-copy-ok { border-color: var(--accent-strong); background: var(--accent-soft); }
.briefing-export-actions .btn.briefing-copy-fail { border-color: var(--warn); color: var(--warn); }

/* Quiz */
.quiz-question {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
}
.quiz-options { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.refresh-source-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.refresh-card.done { cursor: default; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color .12s ease, background .12s ease;
}
.quiz-option .opt-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.quiz-option:hover { border-color: var(--accent-strong); }
.quiz-option.selected { border-color: var(--accent-strong); background: var(--accent-soft); }
.quiz-option.selected .opt-dot { border-color: var(--accent-strong); background: var(--accent-strong); }
.quiz-option.correct { border-color: var(--good); background: #e5f7ec; }
.quiz-option.correct .opt-dot { border-color: var(--good); background: var(--good); }
.quiz-option.incorrect { border-color: var(--bad); background: #fbeaea; }
.quiz-option.incorrect .opt-dot { border-color: var(--bad); background: var(--bad); }

.quiz-option.multi .opt-dot { border-radius: 5px; }
.quiz-multi-hint {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.quiz-explanation {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
}

.quiz-result {
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}
.quiz-result .result-illustration { width: 140px; height: 90px; flex-shrink: 0; }
.quiz-result.passed { background: linear-gradient(120deg, var(--gold-soft) 0%, var(--panel) 100%); }
.quiz-result.failed { background: linear-gradient(120deg, var(--fail-soft) 0%, var(--panel) 100%); }
.quiz-result .score { font-family: var(--font-head); font-size: 34px; font-weight: 700; }

.fun-fact-teaser {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.fun-fact-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.fun-fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.fun-fact-text { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* Advisor */
.advisor-question { margin-bottom: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.advisor-question .quiz-options { margin-top: 10px; }
.presales-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 14px;
}
.presales-banner .icon-badge { flex-shrink: 0; }
.recommendation {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.recommendation .rec-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.recommendation .rec-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.recommendation .rec-pitch { font-size: 13px; color: var(--text-muted); }
.recommendation .rec-score {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.icon-badge {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.rec-service {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--accent-soft);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--accent);
  line-height: 1.5;
}
.rec-service-icon { flex-shrink: 0; margin-top: 1px; }

/* Tool cards (home) */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.tool-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow);
}
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tool-card-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tool-card-title { font-weight: 700; font-size: 14.5px; }
.tool-card-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.tool-card-arrow { margin-left: auto; color: var(--accent-strong); font-size: 18px; flex-shrink: 0; }

/* Continue-learning card */
.continue-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin: 18px 0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow);
}
.continue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.continue-card-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.continue-card-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--accent-strong); }
.continue-card-title { font-weight: 700; font-size: 15px; margin-top: 2px; }
.continue-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.continue-card-arrow { margin-left: auto; color: var(--accent-strong); font-size: 18px; flex-shrink: 0; }

/* Inhalt-aktualisiert-Karte ("Content-Aktualität") */
.currency-card { align-items: flex-start; cursor: default; }
.currency-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.currency-item { cursor: pointer; padding: 7px 10px; border-radius: 8px; background: var(--warn-soft); transition: transform .12s ease; }
.currency-item:hover { transform: translateX(2px); }
.currency-item-title { display: block; font-size: 13px; font-weight: 600; }
.currency-item-meta { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.currency-more { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* Bookmarks ("Für später") */
.bookmark-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bookmark-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.bookmark-chip:hover { border-color: var(--accent-strong); background: var(--accent-soft); }

/* Bookmark toggle button (lesson view) */
.bookmark-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .12s ease, color .12s ease;
}
.bookmark-toggle:hover { border-color: var(--accent-strong); }
.bookmark-toggle.active { color: var(--accent-strong); border-color: var(--accent-strong); background: var(--accent-soft); }

/* Advisor scope picker */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.scope-card {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow);
}
.scope-card:hover { transform: translateY(-3px); border-color: var(--accent-strong); box-shadow: var(--shadow-lg); }
.scope-card-icon {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.scope-card-label { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.scope-card-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* External links (topic hub) */
.external-links { display: flex; gap: 10px; flex-wrap: wrap; }
.ext-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  text-decoration: none;
  transition: border-color .12s ease;
}
.ext-link:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.ext-link svg { width: 16px; height: 16px; }

.license-links { display: flex; gap: 8px; flex-wrap: wrap; }
.license-link { margin-bottom: 6px; }

/* Search input (objections) */
.search-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  font-size: 15px;
  font-family: var(--font-body);
  margin-bottom: 20px;
  background: var(--panel);
}
.search-input:focus { outline: none; border-color: var(--accent-strong); }

.objection-recent-searches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-bottom: 18px;
}
.objection-recent-label { font-size: 12px; color: var(--text-muted); }
.chip-clickable { cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.chip-clickable:hover { background: var(--accent-soft); border-color: var(--accent-strong); }

.objection-fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 18px;
  user-select: none;
}
.objection-fav-toggle input { cursor: pointer; }

/* Objections */
.objection-group { margin-bottom: 24px; }
.objection-group-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  margin-bottom: 10px;
}
.objection-item {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--radius);
  padding: 14px 44px 14px 16px;
  margin-bottom: 10px;
}
.objection-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  line-height: 0;
  transition: background .12s ease;
}
.objection-fav-btn:hover { background: var(--accent-soft); }
.objection-fav-btn svg { display: block; }
.objection-q { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.objection-a { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.objection-peer { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.objection-peer-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 700; margin-bottom: 8px;
}
.objection-peer-item { border-left: 2px solid var(--accent-soft); padding-left: 10px; margin-bottom: 8px; }
.objection-peer-text { font-size: 13px; line-height: 1.55; }
.objection-peer-by { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.objection-peer-add { margin-top: 10px; font-size: 12.5px; }
.objection-peer-form { margin-top: 10px; }
.objection-peer-textarea {
  width: 100%; font: inherit; font-size: 13px; line-height: 1.55;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); resize: vertical;
}
.objection-peer-anon { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 6px; }

/* Einwand-Blitzmodus - Vollbild-Nachschlagen während des Calls. Bewusst KEIN erzwungenes
   Dark: der Nutzer hat oben rechts einen Theme-Toggle, das ist seine Präferenz. Lesbarkeit
   kommt hier aus Größe + Kontrast, nicht aus einer fest verdrahteten Farbwelt. */
.blitz-enter-btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; }

.objections-blitz {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3vw, 40px);
  overflow-y: auto;
}
.blitz-bar { display: flex; align-items: center; gap: 12px; flex: none; }
.blitz-input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
}
.blitz-input:focus { outline: none; border-color: var(--accent-strong); }
.blitz-close {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.blitz-close:hover { background: var(--accent-soft); color: var(--text); }
.blitz-results { margin-top: clamp(20px, 4vh, 48px); }
.blitz-q {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--text-muted);
  margin-bottom: 14px;
}
.blitz-a {
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  max-width: 22em;
}
.blitz-alts {
  margin-top: clamp(24px, 5vh, 52px);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.blitz-alt,
.blitz-fav-item {
  background: none;
  border: none;
  padding: 7px 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blitz-alt:hover,
.blitz-fav-item:hover { color: var(--accent-strong); }
.blitz-fav-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.blitz-hint { font-size: 14px; color: var(--text-muted); margin: 0; }

/* Packages */
.package-group { margin-bottom: 30px; }
.package-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.package-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.package-chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.package-group.collapsed .package-chevron { transform: rotate(-90deg); }
.package-group-body { overflow: hidden; }
.package-group.collapsed .package-group-body { display: none; }
.package-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.package-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.package-card-title { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.package-card-price { font-weight: 700; color: var(--accent-strong); font-size: 14px; white-space: nowrap; }
.package-card-pitch { font-style: italic; color: var(--text-muted); margin: 6px 0 12px; font-size: 14px; }
.package-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  background: var(--bg); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; color: var(--text-muted); font-weight: 600;
}
.ccmw-request-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  margin-top: 20px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.form-field input,
.form-field select {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
}
.form-field input:focus,
.form-field select:focus { outline: none; border-color: var(--accent-strong); }
.form-hint { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }

.package-card[data-ref-teaser] { cursor: pointer; transition: transform .12s ease; }
.package-card[data-ref-teaser]:hover { transform: translateX(2px); }
.ref-filter-chip { cursor: pointer; transition: border-color .12s ease; }
.ref-filter-chip:hover { border-color: var(--accent-strong); }
.ref-filter-chip.active { font-weight: 700; }
.reference-quote {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border-left: 3px solid var(--accent-strong);
  border-radius: 6px;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.package-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; margin: 12px 0 4px; }
.package-detail-text { font-size: 13.5px; }
.package-scope { margin: 0; padding-left: 20px; font-size: 13.5px; }
.package-scope li { margin-bottom: 4px; }
.package-not-included { font-size: 12.5px; color: var(--text-muted); }
.package-upsell {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--accent-soft); border-radius: 8px;
  font-size: 12.5px; color: var(--accent); line-height: 1.5;
}

/* Responsive: siehe "Mobile-Topbar + Burger + Drawer" weiter unten - loest die
   frueheren einfachen Stack-Regeln ab (Sidebar wird ab 999px zur Drawer-Navigation). */

/* Certificates */
.cert-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cert-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.cert-row-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.cert-row-main { flex: 1; min-width: 0; }
.cert-row-title { font-weight: 600; margin-bottom: 6px; }
.cert-row-status { flex: none; }

.lb-me-card { margin-bottom: 22px; }
.lb-me-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.lb-me-stat { min-width: 120px; }
.lb-me-num { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.lb-me-lbl { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.lb-podium { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 24px; }
.lb-podium-card {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.lb-podium-1 { order: 2; padding-top: 26px; padding-bottom: 26px; border-color: #d9a02a; box-shadow: 0 10px 28px rgba(217, 160, 42, 0.22); }
.lb-podium-2 { order: 1; }
.lb-podium-3 { order: 3; }
.lb-podium-mine { border-width: 2px; border-color: var(--accent-strong); }
.lb-podium-medal { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.lb-podium-1 .lb-podium-medal { font-size: 38px; }
.lb-podium-name { font-weight: 700; font-size: 14px; margin-bottom: 6px; overflow-wrap: anywhere; }
.lb-podium-xp { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.lb-podium-xp small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.lb-podium-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.lb-list { display: flex; flex-direction: column; gap: 10px; }
.lb-row-mine { border-color: var(--accent-strong); background: var(--accent-soft); }
.lb-row-rank { flex: none; width: 34px; text-align: center; font-family: var(--font-head); font-weight: 800; color: var(--text-muted); font-size: 14px; }
.lb-row-stats { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.lb-mine-tag { font-size: 10.5px; font-weight: 700; color: var(--accent-strong); }

@media (max-width: 719.98px) {
  .lb-podium { flex-direction: column; }
  .lb-podium-1, .lb-podium-2, .lb-podium-3 { order: initial; padding-top: 18px; padding-bottom: 18px; }
}

.cert-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, #fdf6e6 0%, #ffffff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-top: 12px;
}
.cert-final-done { background: linear-gradient(120deg, var(--accent-soft) 0%, #ffffff 100%); }
.cert-final-locked { background: var(--panel); }
.cert-final div { font-size: 14px; line-height: 1.5; }

.certificate {
  position: relative;
  max-width: 720px;
  margin: 20px auto;
  padding: 0;
  background: linear-gradient(160deg, #fffdf6 0%, #fbf4e2 100%);
  border: none;
  border-radius: 10px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.certificate-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.certificate-frame-svg { width: 100%; height: 100%; display: block; }
.certificate-content { position: relative; padding: 56px 54px 46px; }
.certificate-brandmark { display: flex; justify-content: center; margin-bottom: 16px; }
.certificate-kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 20px; }
.certificate-title {
  font-family: var(--font-cert);
  font-weight: 700;
  font-size: 28px;
  margin: 0;
  color: var(--cert-ink, #2a2018);
}
.certificate-divider { width: 90px; height: 2px; margin: 22px auto; background: var(--div-color, #c99a2e); opacity: 0.55; position: relative; }
.certificate-divider::before {
  content: '';
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  background: var(--div-color, #c99a2e); transform: translate(-50%, -50%) rotate(45deg);
}
.certificate-forname { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.certificate-name { font-family: var(--font-cert); font-size: 38px; font-weight: 800; margin-bottom: 18px; color: var(--cert-ink, #2a2018); }
.certificate-subtitle { font-size: 15px; color: var(--text-muted); max-width: 460px; margin: 0 auto 8px; line-height: 1.65; }
.certificate-date { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.certificate-seal {
  display: flex; align-items: center; justify-content: center;
  margin: 12px auto 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .certificate { background: linear-gradient(160deg, #221d12 0%, #1a1710 100%); }
  :root:not([data-theme="light"]) .certificate-title,
  :root:not([data-theme="light"]) .certificate-name { color: #f5ecd8; }
}
:root[data-theme="dark"] .certificate { background: linear-gradient(160deg, #221d12 0%, #1a1710 100%); }
:root[data-theme="dark"] .certificate-title,
:root[data-theme="dark"] .certificate-name { color: #f5ecd8; }

@media print {
  .sidebar, .no-print, .app > .sidebar { display: none !important; }
  .main { padding: 0 !important; max-width: 100% !important; }
  .certificate { box-shadow: none; margin: 0; }
  body { background: #fff; }
  /* Briefing-Export (Kundengespräch vorbereiten + Branchen-Briefing): nur Inhalt, keine In-App-Navigation */
  .briefing-result .link-btn { display: none !important; }
  .briefing-result .recommendation,
  .briefing-result .package-card,
  .briefing-result .objection-item,
  .briefing-result .presales-banner {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .briefing-result h2, .briefing-result h3 {
    break-after: avoid;
    page-break-after: avoid;
    margin-top: 18px !important;
  }
  /* 1:1-Vorbereitung: anders als die beiden anderen Briefings sitzt dieses Blatt mitten auf
     einer Verwaltungsseite - beim Drucken darf nur das Blatt aufs Papier, nicht Team-Tabelle
     und Einstellungen drumherum. Die Klasse steht nur am Wrapper, solange ein Blatt offen ist. */
  .admin-page.otp-print-scope > *:not(.otp-sheet) { display: none !important; }
  .otp-print-title { display: block !important; }
}

/* Admin */
.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 30, 24, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-page {
  max-width: 980px;
  margin: 0 auto;
}
.admin-page h1 { margin: 0 0 20px; }

.global-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.global-search-btn:hover { border-color: var(--accent-strong); color: var(--text); }
.global-search-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.global-search-btn span:nth-child(2) { flex: 1; text-align: left; }
.global-search-kbd {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

/* .admin-modal hatte noch nie eine eigene Panel-Optik (kein background/shadow/
   radius) - fiel bisher kaum auf, wurde aber durch den neuen, echten Dimm-
   Hintergrund der Overlay (siehe .admin-overlay) jetzt sichtbar: eine
   transparente "Box" ohne eigenen Hintergrund inmitten des abgedunkelten
   Screens. */
.admin-modal {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
}
.search-modal { max-width: 640px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.search-modal-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 18px 22px;
  font-size: 16px;
  font-family: var(--font-body);
  background: transparent;
  color: var(--text);
}
.search-modal-input:focus { outline: none; }
.search-modal-results { overflow-y: auto; padding: 8px; }
.search-result-group-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--text-muted);
  padding: 10px 12px 4px;
}
.search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.search-result:hover { background: var(--accent-soft); }
.search-result-icon { flex-shrink: 0; margin-top: 1px; }
.search-result-title { font-size: 13.5px; font-weight: 600; }
.search-result-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.search-modal-empty { padding: 30px 22px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

.admin-login { max-width: 320px; margin: 0 auto; text-align: center; }
.admin-login input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  font-size: 14px;
  margin: 14px 0;
}
.admin-login-error { color: var(--bad); font-size: 13px; margin-top: 8px; }

.admin-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.otp-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 26px; }
/* Nur der Bildschirm hat schon die "Schließen"-Kopfzeile (otp-sheet-head) mit dem Namen - beim
   Drucken ist die weg (.no-print), also braucht das Blatt dort seine eigene sichtbare
   Überschrift. Umgekehrtes Muster zu .no-print: hier unsichtbar, nur im @media print sichtbar. */
.otp-print-title { display: none; }
/* .currency-item ist auf der Startseite ein Klickziel (data-currency-goto navigiert die App) -
   hier zeigt das Blatt nur den Lernstand eines ANDEREN Nutzers an, ohne die Zeile mit Ziel-Ids
   zu bestücken (siehe renderOneToOnePrepSheet). Ohne diese Überschreibung sähen die Einträge
   trotzdem klickbar aus (Zeiger-Cursor, Hover-Verschiebung), ohne dass etwas passiert. */
.otp-sheet .currency-item { cursor: default; }
.otp-sheet .currency-item:hover { transform: none; }
.admin-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.admin-kpi .num { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--accent-strong); }
.admin-kpi .num.text { font-size: 15px; line-height: 1.3; }
.admin-kpi .lbl { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table th.admin-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-table th.admin-sortable:hover { color: var(--text); }
.admin-table th.admin-sortable.active { color: var(--accent-strong); }
/* Die kleinen Signal-Tabellen im Content-Lücken-Dashboard (2-4 kurze Spalten: Label + Zahl) -
   im jetzt vollbreiten Admin-Bereich würde width:100% von .admin-table sie über die ganze
   Seite auseinanderziehen (Text ganz links, Zahl ganz rechts, riesige Lücke dazwischen). Statt
   dessen an den Inhalt anlehnen und links bündig bleiben, wie ein normaler Lesetext. Die große
   Nutzertabelle bleibt bewusst bei width:100% - dort füllt sie den Platz sinnvoll. */
.admin-table.admin-table-narrow { width: auto; min-width: 420px; max-width: 900px; }

/* ============================================================
   Landing Gate (Vorschaltseite, wenn Entra aktiv & nicht angemeldet)
   Redesign: Gradient-Mesh + Noise hinter mehrschichtigem Glas, Bento-Raster für
   Werkzeuge/Gamification, Scroll-Storytelling (Sticky-Panel mit scroll-synchronen
   Zählern, Lesefortschritt, Level-Balken), magnetischer Primär-CTA.
   Alle Werte hell/dunkel/auto über Tokens - Bewegung unter prefers-reduced-motion aus.
   ============================================================ */

.landing-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;

  /* Glas-Tokens (hell) */
  --lg-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .34) 100%);
  --lg-glass-bg-deep: rgba(255, 255, 255, .28);
  --lg-glass-border: rgba(255, 255, 255, .78);
  --lg-glass-hi: rgba(255, 255, 255, .95);
  --lg-glass-edge: rgba(7, 80, 51, .09);
  --lg-glass-shadow: 0 1px 2px rgba(7, 80, 51, .05), 0 22px 54px rgba(7, 80, 51, .11);
  --lg-spot: rgba(255, 255, 255, .55);
  --lg-mesh-a: rgba(35, 169, 106, .34);
  --lg-mesh-b: rgba(7, 80, 51, .20);
  --lg-mesh-c: rgba(191, 232, 211, .70);
  --lg-mesh-d: rgba(217, 160, 42, .13);
  --lg-noise-alpha: .10;
  --lg-ring: color-mix(in srgb, var(--accent-strong) 34%, transparent);
}
:root[data-theme="dark"] .landing-gate {
  --lg-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 100%);
  --lg-glass-bg-deep: rgba(255, 255, 255, .035);
  --lg-glass-border: rgba(255, 255, 255, .14);
  --lg-glass-hi: rgba(255, 255, 255, .22);
  --lg-glass-edge: rgba(0, 0, 0, .35);
  --lg-glass-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45);
  --lg-spot: rgba(62, 194, 131, .16);
  --lg-mesh-a: rgba(35, 169, 106, .28);
  --lg-mesh-b: rgba(7, 80, 51, .55);
  --lg-mesh-c: rgba(62, 194, 131, .14);
  --lg-mesh-d: rgba(217, 160, 42, .10);
  --lg-noise-alpha: .14;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-gate {
    --lg-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 100%);
    --lg-glass-bg-deep: rgba(255, 255, 255, .035);
    --lg-glass-border: rgba(255, 255, 255, .14);
    --lg-glass-hi: rgba(255, 255, 255, .22);
    --lg-glass-edge: rgba(0, 0, 0, .35);
    --lg-glass-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45);
    --lg-spot: rgba(62, 194, 131, .16);
    --lg-mesh-a: rgba(35, 169, 106, .28);
    --lg-mesh-b: rgba(7, 80, 51, .55);
    --lg-mesh-c: rgba(62, 194, 131, .14);
    --lg-mesh-d: rgba(217, 160, 42, .10);
    --lg-noise-alpha: .14;
  }
}
body.gate-active { overflow: hidden; }
body.gate-active .site-footer { display: none; }

/* ---- Hintergrund: Gradient-Mesh (driftet langsam) + Rauschen gegen Banding ---- */
.lg-mesh {
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 14% 16%, var(--lg-mesh-a) 0%, transparent 68%),
    radial-gradient(36% 40% at 86% 12%, var(--lg-mesh-b) 0%, transparent 70%),
    radial-gradient(44% 48% at 72% 80%, var(--lg-mesh-c) 0%, transparent 68%),
    radial-gradient(30% 34% at 22% 88%, var(--lg-mesh-d) 0%, transparent 70%);
  animation: lgMesh 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes lgMesh {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2.5%, 0) scale(1.03); }
}
.lg-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--lg-noise-alpha);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.lg-page { position: relative; z-index: 1; }

/* ---- Glas-Grundbaustein: Verlauf + Kantenlicht + Backdrop-Blur ---- */
.lg-glass {
  position: relative;
  background: var(--lg-glass-bg);
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi), inset 0 0 0 1px var(--lg-glass-edge), var(--lg-glass-shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* ---- Header ---- */
.lg-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--lg-glass-border) 60%, var(--border));
  box-shadow: inset 0 1px 0 var(--lg-glass-hi);
}
.lg-header-mark { width: 32px; height: 32px; flex-shrink: 0; }
.lg-header-mark svg { width: 100%; height: 100%; display: block; }
.lg-header-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.lg-header-sub { font-size: 11px; color: var(--text-muted); }
.lg-header-spacer { flex: 1; }
.lg-header .theme-toggle { order: 0; margin: 0; }
.lg-header-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.lg-header-login:hover { background: var(--accent); transform: translateY(-1px); }
/* Lesefortschritt: dünne Linie am unteren Header-Rand, skaliert mit der Scroll-Position */
.lg-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #075033, #23A96A);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* ---- Hero ---- */
.lg-hero {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 32px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: 44px;
  min-height: calc(88vh - 62px);
}
.lg-hero-text {
  position: relative;
  z-index: 1;
  transform: translateY(var(--pt, 0));
  opacity: var(--po, 1);
}
.lg-hero-visual {
  position: relative;
  z-index: 1;
  transform: translateY(var(--py, 0));
}
.lg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--lg-glass-bg-deep);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 28%, var(--lg-glass-border));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.lg-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-strong);
  animation: lgBlink 2.2s ease-in-out infinite;
}
@keyframes lgBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.lg-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 20px;
}
.lg-grad {
  background: linear-gradient(100deg, var(--accent-strong), #23A96A 55%, var(--accent-strong));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lgGradShift 6s ease-in-out infinite alternate;
}
@keyframes lgGradShift { from { background-position: 0% 0; } to { background-position: 100% 0; } }

.lg-sub {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 0 30px;
}
.lg-sub strong { color: var(--text); font-weight: 600; }

/* ---- CTA (magnetisch) ---- */
.lg-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.lg-magnet {
  display: inline-block;
  padding: 10px 14px;
  margin: -10px -14px;
  --mx: 0px; --my: 0px; --ix: 0px; --iy: 0px;
}
.lg-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 14px;
  background: linear-gradient(120deg, #075033, #1F8A57 60%, #23A96A);
  color: #fff;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(7, 80, 51, 0.34), 0 2px 8px rgba(7, 80, 51, 0.25), inset 0 1px 0 rgba(255, 255, 255, .22);
  overflow: hidden;
  --lift: 0px;
  transform: translate(var(--mx), var(--my)) translateY(var(--lift));
  transition: transform .16s ease-out, box-shadow .2s ease;
  will-change: transform;
}
.lg-cta:hover { --lift: -2px; box-shadow: 0 20px 44px rgba(7, 80, 51, 0.42), 0 3px 10px rgba(7, 80, 51, 0.3), inset 0 1px 0 rgba(255, 255, 255, .26); }
.lg-magnet.is-spring .lg-cta { transition: transform .6s cubic-bezier(.2, 1.7, .4, 1), box-shadow .2s ease; }
.lg-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-20deg);
  animation: lgSheen 4.4s ease-in-out infinite;
}
@keyframes lgSheen {
  0%, 55% { left: -80%; }
  75%, 100% { left: 130%; }
}
.lg-cta-label { position: relative; }
.lg-cta-ico {
  display: inline-flex;
  transform: translate(var(--ix), var(--iy));
  transition: transform .16s ease-out;
}
.lg-magnet.is-spring .lg-cta-ico { transition: transform .6s cubic-bezier(.2, 1.7, .4, 1); }
.lg-cta:hover .lg-cta-ico { --ix: calc(var(--ix, 0px) + 3px); }
.lg-cta svg { flex-shrink: 0; }
.lg-cta-secondary {
  background: none;
  border: none;
  padding: 6px 2px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-strong);
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s ease;
}
.lg-cta-secondary:hover { border-bottom-color: var(--accent-strong); }
.lg-cta-hint { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 26px; }

/* Kennzahlen-Leiste im Hero als flaches Glas mit Trennlinien */
.lg-stats {
  display: inline-flex;
  gap: 0;
  flex-wrap: wrap;
  padding: 6px 4px;
  border-radius: 18px;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.lg-stat { padding: 8px 22px; position: relative; }
.lg-stat + .lg-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}
.lg-stat .lg-num {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lg-stat .lg-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }

/* ---- Hero-Bühne: drei Glasebenen mit eigenem Blur-Grad, Orbit obenauf ---- */
.lg-stage { position: relative; padding: 18px; }
.lg-stage-sheet {
  position: absolute;
  inset: 8% 5%;
  border-radius: 38px;
  background: var(--lg-glass-bg-deep);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.lg-stage-sheet-a { transform: rotate(-5deg) translate(-16px, 20px); opacity: .85; animation: lgSheetA 14s ease-in-out infinite alternate; }
.lg-stage-sheet-b { transform: rotate(6deg) translate(20px, -12px); opacity: .55; animation: lgSheetB 17s ease-in-out infinite alternate; }
@keyframes lgSheetA { to { transform: rotate(-3deg) translate(-10px, 26px); } }
@keyframes lgSheetB { to { transform: rotate(8deg) translate(26px, -4px); } }
.lg-stage-glass {
  border-radius: 38px;
  padding: 22px;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}
.lg-stage-glass::after {
  /* Spiegelkante oben links - das "Glas-Highlight" */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28) 0%, transparent 38%);
  pointer-events: none;
}
:root[data-theme="dark"] .lg-stage-glass::after { background: linear-gradient(135deg, rgba(255, 255, 255, .09) 0%, transparent 40%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lg-stage-glass::after { background: linear-gradient(135deg, rgba(255, 255, 255, .09) 0%, transparent 40%); }
}
/* Schwebende Glas-Chips mit echten XP-Regeln */
.lg-float {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  animation: lgFloat 6s ease-in-out infinite;
}
.lg-float b { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.lg-float svg { flex-shrink: 0; }
.lg-float-1 { top: 4%; left: -4%; animation-delay: -1.2s; }
.lg-float-2 { right: -5%; top: 38%; animation-delay: -3.4s; animation-duration: 7s; }
.lg-float-3 { left: 6%; bottom: 3%; animation-delay: -2.1s; animation-duration: 6.6s; }

/* ---- Orbit (unverändert in Form, Bechtle-Logo im Kern) ---- */
.lg-orbit-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.lg-orbit { position: relative; width: min(420px, 74vw); aspect-ratio: 1; }
.lg-ring {
  position: absolute;
  border: 1.5px dashed var(--lg-ring);
  border-radius: 50%;
}
.lg-ring-outer { inset: 4%; }
.lg-ring-inner { inset: 25%; }
.lg-orbit-ring { position: absolute; inset: 0; }
.lg-orbit-outer { animation: lgSpin 52s linear infinite; }
.lg-orbit-inner { animation: lgSpin 34s linear infinite reverse; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
@keyframes lgSpinRev {
  from { transform: rotate(calc(var(--a) * -1)); }
  to { transform: rotate(calc(-360deg - var(--a))); }
}
.lg-sat {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--s, 54px);
  height: var(--s, 54px);
  margin-top: calc(var(--s, 54px) / -2);
  margin-left: calc(var(--s, 54px) / -2);
  transform: rotate(var(--a)) translateX(var(--r));
}
.lg-sat-badge {
  width: 100%;
  height: 100%;
  border-radius: 30%;
  background: var(--panel);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi), 0 8px 22px rgba(10, 34, 22, 0.16), 0 2px 5px rgba(10, 34, 22, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(calc(var(--a) * -1));
}
.lg-orbit-outer .lg-sat-badge { animation: lgSpinRev 52s linear infinite; }
.lg-orbit-inner .lg-sat-badge { animation: lgSpinRev 34s linear infinite reverse; }
.lg-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(35, 169, 106, 0.45);
  animation: lgPulse 3.4s ease-out infinite;
}
.lg-pulse.p2 { animation-delay: 1.7s; }
@keyframes lgPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.lg-core-tile {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  border-radius: 28px;
  background: var(--panel);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi), 0 16px 40px rgba(7, 80, 51, 0.22), 0 3px 10px rgba(7, 80, 51, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lgFloat 5.5s ease-in-out infinite;
}
@keyframes lgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---- Marquee ---- */
.lg-marquee {
  overflow: hidden;
  border-top: 1px solid var(--lg-glass-border);
  border-bottom: 1px solid var(--lg-glass-border);
  background: var(--lg-glass-bg-deep);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 13px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lg-marquee-inner {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: lgMarquee 60s linear infinite;
}
.lg-marquee:hover .lg-marquee-inner { animation-play-state: paused; }
@keyframes lgMarquee { to { transform: translateX(-50%); } }
.lg-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.lg-marquee-item::after {
  content: '';
  width: 7px;
  height: 7px;
  background: color-mix(in srgb, var(--accent-strong) 45%, transparent);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* ---- Abschnitte ---- */
.lg-section { max-width: 1120px; margin: 0 auto; padding: 76px 32px 10px; }
.lg-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 10px;
}
.lg-h2 {
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  max-width: 720px;
}
.lg-section-sub { font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 660px; margin: 0 0 34px; }

.lg-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.lg-reveal.is-in { opacity: 1; transform: none; }
/* Gestaffelter Aufbau der Kinder (Kacheln, Badges): --i vom Markup, Animation statt Transition,
   damit nach dem Einblenden der Hover-Transform wieder normal greift (fill-mode: backwards). */
.lg-reveal .lg-tile, .lg-reveal .lg-badge, .lg-reveal .lg-badge-more { opacity: 0; }
.lg-reveal.is-in .lg-tile, .lg-reveal.is-in .lg-badge, .lg-reveal.is-in .lg-badge-more {
  opacity: 1;
  animation: lgRise .65s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 85ms);
}
.lg-reveal.is-in .lg-badge, .lg-reveal.is-in .lg-badge-more { animation-delay: calc(var(--i, 0) * 55ms + .25s); }
@keyframes lgRise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ---- Scroll-Story: klebendes Zähl-Panel links, Schritte rechts ---- */
.lg-story { max-width: 1120px; margin: 0 auto; padding: 84px 32px 20px; }
.lg-story-head { margin-bottom: 14px; }
.lg-story-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.lg-story-sticky { position: sticky; top: 92px; align-self: start; }
.lg-story-panel { padding: 34px 36px 30px; border-radius: 30px; }
.lg-story-icons { position: relative; width: 56px; height: 56px; margin-bottom: 18px; }
.lg-story-ico {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 30%, transparent);
  opacity: 0;
  transform: scale(.7) rotate(-8deg);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.lg-story-ico.active { opacity: 1; transform: none; }
.lg-story-num {
  font-family: var(--font-head);
  font-size: clamp(58px, 7.2vw, 96px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .95;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.lg-story-unit { font-size: 17px; font-weight: 600; margin-top: 10px; color: var(--text); }
.lg-story-track { display: flex; gap: 8px; margin-top: 28px; }
.lg-story-tick {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  transition: background .35s ease;
}
.lg-story-tick.active { background: var(--accent-strong); }
.lg-story-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.lg-story-hint svg { transform: rotate(90deg); }
.lg-story-steps { display: flex; flex-direction: column; }
.lg-story-step {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  opacity: .34;
  transition: opacity .5s ease, transform .5s ease;
  transform: translateX(0);
}
.lg-story-step.is-active { opacity: 1; }
.lg-story-step:last-child { min-height: 46vh; }
.lg-story-kicker {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 12px;
}
.lg-story-step h3 {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 14px;
  max-width: 520px;
}
.lg-story-step p { font-size: 15.5px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 520px; }
.lg-level-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lg-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--lg-glass-bg-deep);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: .55;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.lg-level-chip em {
  font-style: normal;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-strong);
  color: #fff;
}
.lg-story-step.is-active .lg-level-chip { opacity: 1; transform: none; }

/* ---- Themenkarte (Liniennetzplan) ---- */
.lg-map-frame { padding: clamp(12px, 2.4vw, 28px); overflow: hidden; }
.lg-map-img { display: block; width: 100%; height: auto; }
.lg-map-img-dark { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lg-map-img-light { display: none; }
  html:not([data-theme="light"]) .lg-map-img-dark { display: block; }
}
html[data-theme="dark"] .lg-map-img-light { display: none; }
html[data-theme="dark"] .lg-map-img-dark { display: block; }

/* ---- Themen-Karussell ---- */
.lg-carousel { overflow: hidden; }
.lg-track { display: flex; transition: transform .65s cubic-bezier(.22, .8, .3, 1); }
.lg-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 26px;
  align-items: center;
  padding: 40px 46px;
  border-top: 4px solid var(--sl-color, var(--accent-strong));
}
.lg-slide-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-color, var(--accent-strong)); margin-bottom: 8px; }
.lg-slide h3 { font-family: var(--font-head); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
.lg-slide-tagline { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.lg-slide-motivation { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin: 0 0 18px; max-width: 520px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sl-soft, var(--accent-soft));
  color: var(--sl-color, var(--accent-strong));
  border: 1px solid color-mix(in srgb, var(--sl-color, var(--accent-strong)) 22%, transparent);
  cursor: default;
}
:root[data-theme="dark"] .lg-chip { background: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 16%, var(--panel)); color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lg-chip { background: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 16%, var(--panel)); color: var(--text); }
}
.lg-slide-visual { min-height: 240px; display: flex; align-items: center; justify-content: center; }

/* Themen-Mini-Bento (dekorativ, siehe lgTopicBentoHtml): 4 Spalten x 3 Zeilen,
   Hero-Kachel 2x2 links, Modul-Kacheln rechts, Lernpfad-Leiste unten. Farbe
   kommt aus --sl-color/--sl-soft der umgebenden .lg-slide. */
.lg-tb {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.lg-tb-glow {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sl-color, var(--accent-strong)) 30%, transparent), transparent 100%);
  filter: blur(22px);
  pointer-events: none;
}
.lg-tb-tile {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  border: 1px solid var(--lg-glass-border);
  box-shadow:
    inset 0 1px 0 var(--lg-glass-hi),
    inset 0 0 0 1px var(--lg-glass-edge),
    0 10px 26px color-mix(in srgb, var(--sl-color, var(--accent-strong)) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-color, var(--accent-strong));
  animation: lgFloat 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}
.lg-tb-tile svg, .lg-tb-tile img { display: block; flex-shrink: 0; }
.lg-tb-hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  border-radius: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sl-color, var(--accent-strong)) 24%, var(--panel)) 0%, color-mix(in srgb, var(--sl-color, var(--accent-strong)) 6%, var(--panel)) 100%);
  overflow: hidden;
}
.lg-tb-hero::before {
  /* Dezenter Ring wie im Hero-Orbit - verknüpft die Slide optisch mit dem Seitenkopf */
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--sl-color, var(--accent-strong)) 38%, transparent);
}
.lg-tb-hero::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -30%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 18%, transparent);
  filter: blur(14px);
}
.lg-tb-mark {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi), 0 12px 30px color-mix(in srgb, var(--sl-color, var(--accent-strong)) 26%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-tb-mod { font-family: var(--font-head); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.lg-tb-more { background: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 12%, var(--panel)); }
.lg-tb-path {
  grid-column: 1 / -1;
  padding: 0 14px 0 16px;
  gap: 12px;
  justify-content: flex-start;
}
.lg-tb-segs { flex: 1; min-width: 0; display: flex; gap: 4px; }
.lg-tb-segs i {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--sl-color, var(--accent-strong));
  opacity: max(0.22, calc(1 - var(--i, 0) * 0.09));
}
.lg-tb-cap { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); white-space: nowrap; }
/* Dark: Themenfarben sind teils sehr dunkel (Datacenter-Grau, Verträge-Bordeaux) -
   Icons aufhellen, Logos behalten ihre weiße Kachel, damit Markenfarben stimmen. */
:root[data-theme="dark"] .lg-tb-tile { color: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 55%, #fff); }
:root[data-theme="dark"] .lg-tb-mark { background: rgba(255, 255, 255, .94); color: var(--sl-color, var(--accent-strong)); }
:root[data-theme="dark"] .lg-tb-more { background: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 22%, var(--panel)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lg-tb-tile { color: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 55%, #fff); }
  :root:not([data-theme="light"]) .lg-tb-mark { background: rgba(255, 255, 255, .94); color: var(--sl-color, var(--accent-strong)); }
  :root:not([data-theme="light"]) .lg-tb-more { background: color-mix(in srgb, var(--sl-color, var(--accent-strong)) 22%, var(--panel)); }
}

.lg-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--lg-glass-border);
}
.lg-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--lg-glass-border);
  background: var(--lg-glass-bg-deep);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .12s ease, border-color .12s ease, transform .12s ease;
}
.lg-arrow:hover { color: var(--accent-strong); border-color: var(--accent-strong); transform: scale(1.08); }
.lg-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 460px; }
.lg-dot {
  position: relative;
  width: 22px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  cursor: pointer;
  overflow: hidden;
  transition: width .3s ease;
}
.lg-dot.active { width: 46px; }
.lg-dot.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent-strong);
  transform-origin: left;
  animation: lgDotFill var(--lg-slide-ms, 6500ms) linear forwards;
}
.lg-dot.active.no-auto::after { animation: none; transform: none; }
@keyframes lgDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lg-carousel:hover .lg-dot.active::after { animation-play-state: paused; }

/* ---- Bento-Raster (Werkzeuge + Gamification) ---- */
.lg-bento {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
}
.lg-tile {
  padding: 24px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lg-tile::before {
  /* Spotlight: Lichtpunkt folgt dem Zeiger (--sx/--sy aus JS), sonst zentriert & unsichtbar */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), var(--lg-spot), transparent 62%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.lg-tile:hover::before { opacity: 1; }
.lg-tile > * { position: relative; }
.lg-reveal.is-in .lg-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-strong) 45%, var(--lg-glass-border)); }
.lg-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.lg-tile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lg-tile-big {
  font-family: var(--font-head);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.lg-tile h3 { font-family: var(--font-head); font-size: 16.5px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 9px; }
.lg-tile p { font-size: 13.5px; line-height: 1.58; color: var(--text-muted); margin: 0; }
.lg-tile p strong { color: var(--accent-strong); }

/* Werkzeuge: 4 Spalten x 3 Reihen, asymmetrisch */
.lg-bento-tools .lg-tile-a { grid-column: 1 / 3; grid-row: 1 / 3; }
.lg-bento-tools .lg-tile-b { grid-column: 3 / 5; grid-row: 1; }
.lg-bento-tools .lg-tile-c { grid-column: 3; grid-row: 2; }
.lg-bento-tools .lg-tile-d { grid-column: 4; grid-row: 2 / 4; }
.lg-bento-tools .lg-tile-e { grid-column: 1; grid-row: 3; }
.lg-bento-tools .lg-tile-f { grid-column: 2 / 4; grid-row: 3; }

/* Mini-Vorschauen in den Kacheln (rein dekorativ, aria-hidden) */
.lg-mini {
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.lg-mini-advisor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  margin-top: 18px;
  border-radius: 16px;
  background: var(--lg-glass-bg-deep);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi);
}
.lg-mini-q { font-weight: 600; color: var(--text); font-size: 13px; }
.lg-mini-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-mini-opts span {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--lg-glass-border);
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  font-size: 11.5px;
  font-weight: 600;
}
.lg-mini-opts span.on { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.lg-mini-res { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--accent-strong); font-size: 12.5px; }
.lg-mini-chat { display: flex; flex-direction: column; gap: 8px; }
.lg-mini-bubble {
  max-width: 92%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid var(--lg-glass-border);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  color: var(--text);
}
.lg-mini-bubble.me { align-self: flex-end; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-strong) 30%, transparent); }
.lg-mini-fb { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-top: 4px; }
.lg-mini-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--lg-glass-border);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  font-size: 12.5px;
}
.lg-mini-search span { flex: 1; }
.lg-mini-search kbd {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--lg-glass-border);
  background: var(--kbd-bg);
  color: var(--text-muted);
}

/* Gamification: 4 Spalten x 3 Reihen - erste Spalte etwas breiter, damit die XP-Regeln
   nicht in zwei Zeilen umbrechen */
.lg-bento-gami { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.lg-bento-gami .lg-gami-xp { grid-column: 1; grid-row: 1 / 3; }
.lg-bento-gami .lg-gami-level { grid-column: 2 / 5; grid-row: 1; }
.lg-bento-gami .lg-gami-streak { grid-column: 2; grid-row: 2; }
.lg-bento-gami .lg-gami-team { grid-column: 3 / 5; grid-row: 2; }
.lg-bento-gami .lg-gami-badges { grid-column: 1 / 5; grid-row: 3; }
.lg-bento-gami .lg-tile h3 { margin-bottom: 10px; }
.lg-xp-list { display: flex; flex-direction: column; gap: 10px; }
.lg-xp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.lg-xp-pill {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 4px 11px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.lg-level-bar-wrap { margin: 6px 0 14px; }
.lg-level-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid var(--lg-glass-border);
  overflow: hidden;
}
.lg-level-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #075033, #23A96A);
  box-shadow: 0 0 14px rgba(35, 169, 106, .45);
  transition: width .12s linear;
}
.lg-level-ticks { position: absolute; inset: 0; display: flex; }
.lg-level-ticks span { flex: 1; border-right: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.lg-level-ticks span:last-child { border-right: none; }
.lg-level-caption { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-top: 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lg-level-caption span:first-child { color: var(--accent-strong); font-weight: 700; }
.lg-gami-note { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.lg-gami-note strong { color: var(--text); }
.lg-streak-days { display: flex; gap: 6px; margin: 6px 0 14px; }
.lg-streak-day {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--lg-glass-border);
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-streak-day.done { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-strong) 40%, transparent); }
.lg-streak-day.today { background: var(--accent-strong); border-color: var(--accent-strong); animation: lgBlink 2.2s ease-in-out infinite; }

.lg-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.lg-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--lg-glass-bg-deep);
  border: 1px solid var(--lg-glass-border);
  box-shadow: inset 0 1px 0 var(--lg-glass-hi);
  transition: transform .16s ease, border-color .16s ease;
}
.lg-badge:hover { transform: translateY(-3px) rotate(-1deg); border-color: color-mix(in srgb, var(--accent-strong) 45%, var(--lg-glass-border)); }
.lg-badge-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lg-badge-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.lg-badge-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; max-width: 200px; }
.lg-badge-more {
  display: flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px dashed color-mix(in srgb, var(--accent-strong) 45%, transparent);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
}

/* ---- Abschluss-CTA: tiefes Brand-Grün mit Mesh, darauf ein Glas-Panel ---- */
.lg-final { max-width: 1120px; margin: 0 auto; padding: 70px 32px 60px; }
.lg-final-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(130deg, #075033, #0d5d3c 55%, #1F8A57);
  color: #fff;
  text-align: center;
  padding: 44px;
  box-shadow: 0 24px 60px rgba(7, 80, 51, 0.35);
}
.lg-final-panel::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 18% 20%, rgba(35, 169, 106, 0.55) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(35, 169, 106, 0.4) 0, transparent 45%),
    radial-gradient(circle at 60% 30%, rgba(191, 232, 211, 0.18) 0, transparent 35%);
  animation: lgMesh 18s ease-in-out infinite alternate;
}
.lg-final-glass {
  position: relative;
  padding: 44px 34px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 50px rgba(0, 0, 0, .18);
}
.lg-final-glass h2 {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #fff;
}
.lg-final-glass p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.84); max-width: 520px; margin: 0 auto 28px; }
.lg-cta.lg-cta-light {
  background: #fff;
  color: #075033;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}
.lg-cta.lg-cta-light::after { background: linear-gradient(105deg, transparent, rgba(35, 169, 106, .22), transparent); }
.lg-final-mark { display: flex; justify-content: center; margin-bottom: 20px; }
.lg-final-mark svg { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3)); }

.lg-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 20px 30px;
  color: var(--text-muted);
  font-size: 12.5px;
  border-top: 1px solid var(--lg-glass-border);
}
.lg-footer svg { display: block; }

/* ---- Responsive ---- */
.lg-hero { overflow: hidden; }
@media (max-width: 1060px) {
  .lg-float-1 { left: 0; }
  .lg-float-2 { right: 0; }
}
@media (max-width: 940px) {
  .lg-hero { grid-template-columns: 1fr; padding-top: 40px; text-align: center; min-height: 0; gap: 28px; }
  .lg-hero-text { display: flex; flex-direction: column; align-items: center; }
  .lg-cta-row { justify-content: center; }
  .lg-stats { justify-content: center; }
  .lg-hero-visual { order: -1; }
  .lg-orbit { width: min(320px, 72vw); }
  .lg-sat { --s: 44px; }
  .lg-float { font-size: 11.5px; padding: 7px 11px; }
  .lg-float-1 { top: 0; left: 0; }
  .lg-float-2 { right: 0; top: 40%; }
  .lg-float-3 { left: 4%; bottom: 0; }
  /* align-content: start - alle Slides sind so hoch wie die höchste (Flex-Track); ohne
     das schwimmt das Bento bei kurzen Slides mittig in einer großen Lücke unter dem Text. */
  .lg-slide { grid-template-columns: 1fr; padding: 28px 24px; align-content: start; }
  /* width: 100% ist Pflicht: mit margin: 0 auto wird das Grid-Item sonst shrink-to-fit
     und das Bento (width: 100%) fällt auf seine Mindestbreite (~170px) zusammen. */
  .lg-slide-visual { width: 100%; max-width: 320px; margin: 0 auto; }
  .lg-header-title { font-size: 13.5px; }
  .lg-header-sub { display: none; }

  .lg-story { padding-top: 64px; }
  .lg-story-grid { grid-template-columns: 1fr; gap: 12px; }
  .lg-story-sticky { top: 64px; z-index: 3; }
  .lg-story-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ico num" "track track";
    gap: 4px 16px;
    align-items: center;
    padding: 14px 18px;
    border-radius: 20px;
  }
  .lg-story-icons { grid-area: ico; width: 44px; height: 44px; margin: 0; }
  .lg-story-ico { border-radius: 14px; }
  .lg-story-ico svg { width: 20px; height: 20px; }
  .lg-story-numwrap { grid-area: num; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .lg-story-num { font-size: 36px; }
  .lg-story-unit { margin-top: 0; font-size: 14px; }
  .lg-story-track { grid-area: track; margin-top: 10px; }
  .lg-story-hint { display: none; }
  .lg-story-step { min-height: 0; padding: 34px 0 14px; opacity: .55; }
  .lg-story-step:last-child { min-height: 0; padding-bottom: 30px; }

  .lg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .lg-bento > .lg-tile { grid-column: auto; grid-row: auto; }
  .lg-bento-tools .lg-tile-a, .lg-bento-tools .lg-tile-b, .lg-bento-tools .lg-tile-f,
  .lg-bento-gami .lg-gami-level, .lg-bento-gami .lg-gami-team, .lg-bento-gami .lg-gami-badges { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .lg-hero { padding: 28px 18px 36px; }
  .lg-eyebrow { font-size: 10.5px; letter-spacing: .06em; padding: 5px 12px; text-align: center; }
  .lg-section, .lg-story, .lg-final { padding-left: 18px; padding-right: 18px; }
  .lg-stage { padding: 8px; }
  .lg-stage-glass { padding: 14px; border-radius: 28px; }
  .lg-float-2, .lg-float-3 { display: none; }
  .lg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .lg-stat + .lg-stat::before { display: none; }
  .lg-bento { grid-template-columns: 1fr; }
  .lg-bento > .lg-tile { grid-column: auto !important; }
  .lg-final-panel { padding: 16px; }
  .lg-final-glass { padding: 34px 20px; }
  .lg-dot { width: 14px; }
  .lg-dot.active { width: 34px; }
}

/* ---- Reduzierte Bewegung: alles ruhig, aber weiterhin poliert ---- */
@media (prefers-reduced-motion: reduce) {
  .landing-gate { scroll-behavior: auto; }
  .lg-mesh, .lg-stage-sheet-a, .lg-stage-sheet-b, .lg-float,
  .lg-orbit-outer, .lg-orbit-inner,
  .lg-orbit-outer .lg-sat-badge, .lg-orbit-inner .lg-sat-badge,
  .lg-core-tile, .lg-tb-tile,
  .lg-eyebrow-dot, .lg-streak-day.today,
  .lg-grad, .lg-cta::after, .lg-final-panel::before,
  .lg-marquee-inner, .lg-pulse { animation: none !important; }
  .lg-pulse { display: none; }
  .lg-reveal { opacity: 1; transform: none; transition: none; }
  .lg-reveal .lg-tile, .lg-reveal .lg-badge, .lg-reveal .lg-badge-more,
  .lg-reveal.is-in .lg-tile, .lg-reveal.is-in .lg-badge, .lg-reveal.is-in .lg-badge-more { opacity: 1; animation: none !important; }
  .lg-hero-text, .lg-hero-visual { transform: none !important; opacity: 1 !important; }
  .lg-story-step { opacity: 1; transition: none; }
  .lg-story-ico, .lg-story-tick, .lg-level-chip { transition: none; }
  .lg-level-chip { opacity: 1; transform: none; }
  .lg-track { transition: none; }
  .lg-level-fill { transition: none; }
  .lg-dot.active::after { animation: none; transform: none; }
  .lg-cta, .lg-cta-ico, .lg-magnet.is-spring .lg-cta { transition: none; transform: none !important; }
  .lg-cta:hover, .lg-header-login:hover, .lg-badge:hover, .lg-arrow:hover,
  .lg-reveal.is-in .lg-tile:hover { transform: none; }
  .lg-tile::before { display: none; }
}

/* ============================================================
   Logged-in Shell: Redesign (siehe design-proposals/logged-in-ui-v2.html)
   Portiert auf die echten Klassennamen/Datenquellen der App.
   ============================================================ */

/* ---------- Ambient-Blobs ---------- */
.blob { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.blob-a { width: 640px; height: 640px; top: -220px; right: -160px; background: var(--blob-a); animation: driftA 18s ease-in-out infinite alternate; }
.blob-b { width: 560px; height: 560px; bottom: -240px; left: 180px; background: var(--blob-b); animation: driftB 22s ease-in-out infinite alternate; }
@keyframes driftA { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-70px,50px) scale(1.12); } }
@keyframes driftB { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px,-45px) scale(.92); } }
@keyframes barIn { from { width: 0; } }
@keyframes ringIn { from { stroke-dashoffset: 157.1; } }
@keyframes flamePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .75; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(35,169,106,.15), 0 0 30px rgba(35,169,106,.45), inset 0 1px 0 rgba(255,255,255,.4); }
  50% { box-shadow: 0 0 0 12px rgba(35,169,106,.22), 0 0 52px rgba(35,169,106,.75), inset 0 1px 0 rgba(255,255,255,.4); }
}

/* Nur "position: relative" (KEIN eigenes z-index!) - das hebt .app ueber die
   fixed-positionierten Blobs (Stacking-Reihenfolge nach DOM-Position bei
   gleichem z-index:auto), OHNE einen neuen Stacking-Context zu erzeugen.
   Ein explizites z-index hier wuerde einen Stacking-Context erzeugen und
   damit fixed-positionierte Kinder wie die Suchmodal-Overlay (#searchOverlay,
   z-index:50) faelschlich INNERHALB von .app einsperren, statt sie normal
   ueber die ganze Seite legen zu lassen - genau das hat das Suchfeld-Layout
   durcheinandergebracht. */
.app { position: relative; }
/* .landing-gate bewusst NICHT hier mit "position:relative" ueberschreiben -
   es hat weiter oben ein eigenes position:fixed fuer den Vollbild-Screen vor
   dem Login, das sonst kaputtgeht (echter Bug, der genau das verursacht hat). */
.site-footer { position: relative; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-width, 304px);
  background: var(--sidebar-wash);
  backdrop-filter: blur(18px);
}
.brand { padding: 20px 18px 14px; border-bottom: none; background: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.brand-mark svg { width: 34px; height: 34px; display: block; }
.brand-title { font-size: 15px; }

.global-search-btn {
  width: calc(100% - 24px); margin: 4px 12px 14px; padding: 9px 12px; border-radius: 12px;
  background: var(--panel-glass); border: 1px solid var(--border); color: var(--text-muted);
  backdrop-filter: blur(8px); box-shadow: 0 1px 3px rgba(7,80,51,.05);
  transition: border-color .2s, box-shadow .2s;
}
.global-search-btn:hover { border-color: #23A96A; color: var(--text); box-shadow: 0 2px 10px rgba(35,169,106,.18); }
.global-search-kbd { background: var(--kbd-bg); border: 1px solid var(--border); }

.nav { padding: 0 12px 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.nav-section-label { padding: 0 10px 7px; margin-top: 16px; }

.nav-item, .nav-topic-header {
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-item:hover, .nav-topic-header:hover { background: var(--panel-glass); }
.nav-item.active, .nav-topic-header.active {
  background: var(--panel-glass); border-color: var(--border); box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px); position: relative;
}
.nav-item.active::before, .nav-topic-header.active::before {
  content: ""; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #23A96A, var(--accent-mid));
  box-shadow: 0 0 8px rgba(35,169,106,.6);
}

.nav-icon {
  width: 30px; height: 30px; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(7,80,51,.18);
}
.nav-icon-sm { width: 26px; height: 26px; border-radius: 7px; }
.nav-icon.chip-glass {
  background: var(--panel-glass) !important;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(7,80,51,.08);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .nav-icon.chip-glass svg { filter: brightness(1.65) saturate(.85); }

.nav-item-meta { font-size: 11px; font-weight: 600; background: none; padding: 0; }

.topic-bar-mini { height: 3px; border-radius: 3px; background: var(--ring-track); margin: 2px 10px 6px 42px; overflow: hidden; }
.topic-bar-mini i { display: block; height: 100%; border-radius: 3px; animation: barIn 1s cubic-bezier(.4,0,.2,1) .35s backwards; }

.nav-subitem {
  display: flex; align-items: center; gap: 9px;
  margin-left: 16px; padding: 5.5px 10px 5.5px 14px; border-radius: 0 10px 10px 0;
  border-left: 1.5px solid var(--border); font-size: 12.8px; color: var(--text-muted);
  transition: color .15s ease, background .15s ease;
}
.nav-subitem:hover { color: var(--text); background: var(--panel-glass); }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ring-track); flex: none; display: inline-block; }
.nav-subitem.done .nav-dot { background: #23A96A; box-shadow: 0 0 6px rgba(35,169,106,.6); }
.nav-subitem.part .nav-dot { background: var(--mint); border: 1.5px solid #23A96A; }
.nav-subitem.active { background: var(--panel-glass); color: var(--text); font-weight: 600; }
.nav-subitem.placeholder .nav-item-meta { color: var(--warn); background: var(--warn-soft); padding: 1px 7px; border-radius: 999px; }

.user-box {
  margin: 10px 12px 14px; padding: 10px 12px; border-radius: 14px;
  background: var(--panel-glass); border: 1px solid var(--border);
  backdrop-filter: blur(12px); box-shadow: var(--shadow-soft);
}
#entraUserBoxContent { display: flex; align-items: center; gap: 11px; width: 100%; }
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; color: #fff;
  background: linear-gradient(135deg, #23A96A, var(--accent-mid));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(35,169,106,.35);
}

/* ---------- Main content shell ---------- */
.main { max-width: 1120px; margin: 0 auto; }
/* Nur die Startseite bekommt eine breitere Spalte (siehe render() in app.js, das die Klasse
   setzt) - Lesetexte auf anderen Ansichten profitieren von der schmaleren, gut lesbaren Breite,
   die Startseite mit ihrem breiten Liniennetzplan von mehr verfügbarem Platz. clamp() statt eines
   festen Werts, damit es auf sehr breiten Monitoren mitwächst statt hart zu deckeln. */
body.view-home .main { max-width: clamp(1120px, 92vw, 1680px); }
/* Admin-Bereich: keine Obergrenze, .main füllt als flex:1-Element (siehe oben) automatisch den
   gesamten Platz neben der Sidebar - die Nutzertabelle profitiert auf breiten Monitoren direkt
   davon, ohne trotzdem horizontal scrollen zu müssen. */
body.view-admin .main { max-width: none; }
/* .admin-page hat eine eigene, von .main unabhängige Deckelung (980px, für alle anderen
   Admin-artigen Unterseiten - z.B. den Teamleiter-Bereich - bewusst als gut lesbare Spalte
   gedacht). Im Admin-Bereich selbst soll sie stattdessen die volle, jetzt breite .main-Spalte
   ausfüllen - sonst bliebe die Nutzertabelle trotz breiterem .main weiterhin auf 980px zentriert. */
body.view-admin .admin-page { max-width: none; }

#main { position: relative; }

/* Topbar (breadcrumb + streak + theme toggle) */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.topbar .crumb { font-size: 12.5px; color: var(--text-muted); }
.topbar .crumb b { color: var(--text); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar .theme-toggle {
  width: 38px; height: 38px; border-radius: 12px; margin: 0;
  background: var(--panel-glass); border: 1px solid var(--border); color: var(--text-muted);
  backdrop-filter: blur(8px); transition: color .2s, border-color .2s, box-shadow .2s;
}
.topbar .theme-toggle:hover { color: #23A96A; border-color: #23A96A; box-shadow: 0 2px 12px rgba(35,169,106,.25); transform: none; }
.streak-pill {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px;
  background: var(--panel-glass); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; backdrop-filter: blur(8px);
}
.streak-pill svg { width: 15px; height: 15px; color: #e8a13c; animation: flamePulse 1.8s ease-in-out infinite; }
[data-theme="dark"] .streak-pill svg { color: #f3b95f; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--hero-grad); color: #f2fbf6;
  padding: 34px 38px 30px; margin-bottom: 26px;
  box-shadow: 0 24px 60px rgba(7,80,51,.30), inset 0 1px 0 rgba(255,255,255,.10);
}
[data-theme="dark"] .hero { box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.hero::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; top: -200px; right: -80px; background: rgba(35,169,106,.35); filter: blur(80px); }
.hero::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; bottom: -180px; left: -60px; background: rgba(191,232,211,.14); filter: blur(70px); }
.hero-text { position: relative; z-index: 2; }
.hero-text h1, .hero h1 { color: #f2fbf6; font-size: 30px; }
.hero .grad {
  background: linear-gradient(92deg, #8fdcb6, #23A96A 60%, #bfe8d3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .subtitle, .hero-text .subtitle { color: rgba(230,245,238,.78); margin-bottom: 0; }
.hero-team-line { color: rgba(230,245,238,.6); font-size: 12.5px; margin: 0 0 10px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
  color: var(--mint); background: rgba(255,255,255,.08); border: 1px solid rgba(191,232,211,.25);
  padding: 5px 12px; border-radius: 99px; margin-bottom: 14px; backdrop-filter: blur(6px);
}
.hero-eyebrow svg { width: 12px; height: 12px; }

.hero-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 24px; }
.hero-stat {
  background: rgba(255,255,255,.07); border: 1px solid rgba(191,232,211,.18);
  border-radius: 16px; padding: 14px 16px 12px;
  backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.hero-stat .num {
  font-family: var(--font-head); font-weight: 700; font-size: 23px; letter-spacing: -.02em;
  background: linear-gradient(92deg, #ffffff, #bfe8d3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.hero-stat .num small { font-size: 13px; font-weight: 600; -webkit-text-fill-color: rgba(230,245,238,.85); }
.hero-stat .lbl { font-size: 11.5px; color: rgba(230,245,238,.66); margin-top: 3px; }

.xp-bar-wrap { position: relative; z-index: 2; margin-top: 20px; max-width: none; }
.xp-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: rgba(230,245,238,.75); margin-bottom: 7px; margin-top: 0; order: -1; }
.xp-bar-label b { color: #fff; font-weight: 600; }
.xp-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.10); border: 1px solid rgba(191,232,211,.16); }
.xp-bar-fill {
  background: linear-gradient(90deg, #1f8a57, #23A96A 55%, #8fdcb6);
  box-shadow: var(--xp-glow); position: relative;
}
.xp-bar-fill::after {
  content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #8fdcb6 70%);
  box-shadow: 0 0 10px rgba(191,232,211,.9), 0 0 22px rgba(35,169,106,.7);
}

/* orbit motif, right side of hero */
.hero-orbit { position: relative; width: 190px; height: 180px; flex: none; pointer-events: none; z-index: 2; }
.orbit-rings { position: absolute; inset: 0; animation: spin 42s linear infinite; }
.orbit-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #23A96A, #1f8a57); color: #fff;
  box-shadow: 0 0 0 8px rgba(35,169,106,.15), 0 0 34px rgba(35,169,106,.55), inset 0 1px 0 rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  animation: hubPulse 3.6s ease-in-out infinite;
}
.orbit-center svg { width: 26px; height: 26px; }
.orbit-badge {
  position: absolute; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(191,232,211,.28);
  backdrop-filter: blur(8px); color: var(--mint);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.orbit-badge svg { width: 18px; height: 18px; }
.ob-1 { top: 2px; left: 18px; } .ob-2 { top: 38px; right: 0; } .ob-3 { bottom: 6px; left: 2px; } .ob-4 { bottom: 0; right: 30px; }

/* Vitrine: die 8 wertvollsten Sammelkarten, rechts in der Hero-Box (ersetzt den Orbit fuer
   eingeloggte Nutzer). Gleiche Glas-Optik wie .hero-stat. Klick oeffnet die Erfolgsliste. */
.hero-showcase {
  position: relative; z-index: 2; flex: none; width: 312px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(191,232,211,.18);
  border-radius: 18px; padding: 14px 14px 12px;
  backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: border-color .2s ease, background .2s ease;
}
.hero-showcase:hover, .hero-showcase:focus-visible { border-color: rgba(191,232,211,.45); background: rgba(255,255,255,.10); outline: none; }
.hero-showcase-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hero-showcase-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: var(--mint);
}
.hero-showcase-label svg { width: 12px; height: 12px; }
.hero-showcase-count { font-size: 11.5px; font-weight: 700; color: rgba(230,245,238,.85); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-showcase-count .hs-egg { color: #d9c2ff; }
.hero-showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.hero-showcase-grid.empty { opacity: .55; }
.bcard-ghost {
  height: 84px; border-radius: 12px; border: 1px dashed rgba(191,232,211,.35);
  background: rgba(255,255,255,.04); position: relative;
}
.bcard-ghost::before {
  content: ""; position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: 34px; height: 38px; background: rgba(191,232,211,.16);
  clip-path: polygon(50% 0%, 100% 9%, 100% 54%, 50% 100%, 0% 54%, 0% 9%);
}
.hero-showcase-empty { font-size: 11.5px; color: rgba(230,245,238,.72); margin-top: 8px; line-height: 1.4; }
.hero-showcase-foot {
  margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--mint);
  display: flex; align-items: center; gap: 5px; justify-content: flex-end;
}
.hero-showcase-foot svg { width: 11px; height: 11px; transition: transform .2s ease; }
.hero-showcase:hover .hero-showcase-foot svg { transform: translateX(3px); }

/* ---------- Section headings ---------- */
.main h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin: 30px 0 14px; display: flex; align-items: baseline; justify-content: space-between; }
.sec-link { font-size: 12.5px; font-weight: 600; color: var(--accent-mid); text-decoration: none; }
[data-theme="dark"] .sec-link { color: var(--accent-strong); }
.sec-link:hover { text-decoration: underline; }

/* ---------- Cards: shared glass treatment ---------- */
.card { border-radius: 18px; box-shadow: var(--shadow-soft); }
.card:hover { box-shadow: var(--shadow-lift); border-color: rgba(35,169,106,.35); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.settled { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }

/* Weiterlernen ("resume") */
.continue-card { border-left: none; box-shadow: var(--shadow-soft); position: relative; }
.continue-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #23A96A, var(--accent-mid)); }
.continue-card-icon { width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(135deg, #1f8a57, #0f6b45) !important; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(15,107,69,.35); }
.refresh-card::before { background: linear-gradient(180deg, #e08346, #C4622D); }
.refresh-card .continue-card-icon { background: linear-gradient(135deg, #e08346, #C4622D) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(196,98,45,.35); }
.refresh-card .continue-card-label { color: #C4622D; }
[data-theme="dark"] .refresh-card .continue-card-label { color: #e08346; }
.currency-card::before { background: linear-gradient(180deg, #e2b25a, #d9a02a); }
.currency-card .continue-card-icon { background: linear-gradient(135deg, #e2b25a, #d9a02a) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(217,160,42,.35); }
.currency-card .continue-card-label { color: #b8851c; }
[data-theme="dark"] .currency-card .continue-card-label { color: #e2b25a; }
.focus-card::before { background: linear-gradient(180deg, #4f7cd6, #2f5cb0); }
.focus-card .continue-card-icon { background: linear-gradient(135deg, #4f7cd6, #2f5cb0) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(47,92,176,.35); }
.focus-card .continue-card-label { color: #2f5cb0; }
[data-theme="dark"] .focus-card .continue-card-label { color: #7ba3e8; }
.onboarding-card::before { background: linear-gradient(180deg, #9d6fd9, #7a4fb5); }
.onboarding-card .continue-card-icon { background: linear-gradient(135deg, #9d6fd9, #7a4fb5) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(122,79,181,.35); }
.onboarding-card .continue-card-label { color: #7a4fb5; }
[data-theme="dark"] .onboarding-card .continue-card-label { color: #b596e8; }
.duell-card::before { background: linear-gradient(180deg, #e5595f, #c73e44); }
.duell-card .continue-card-icon { background: linear-gradient(135deg, #e5595f, #c73e44) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(199,62,68,.35); }
.duell-card .continue-card-label { color: #c73e44; }
[data-theme="dark"] .duell-card .continue-card-label { color: #ec8a8e; }
.assignment-card::before { background: linear-gradient(180deg, #3aa79c, #1f7d74); }
.assignment-card .continue-card-icon { background: linear-gradient(135deg, #3aa79c, #1f7d74) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(31,125,116,.35); }
.assignment-card .continue-card-label { color: #1f7d74; }
[data-theme="dark"] .assignment-card .continue-card-label { color: #6fd0c4; }
.continue-card-label { color: var(--accent-mid); }
[data-theme="dark"] .continue-card-label { color: var(--accent-strong); }
.continue-card-title { font-family: var(--font-head); font-size: 15px; }
.continue-progress-bar { height: 5px; border-radius: 5px; background: var(--ring-track); margin-top: 9px; max-width: 320px; overflow: hidden; }
.continue-progress-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent-mid), #23A96A); box-shadow: 0 0 8px rgba(35,169,106,.5); animation: barIn 1s cubic-bezier(.4,0,.2,1) .4s backwards; }

/* Tages-Quest */
.quest-card { padding: 18px 20px; }
.quest-art { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent-mid); display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .quest-art { color: var(--accent-strong); }
.quest-xp { color: var(--accent-mid); background: var(--accent-soft); border: 1px solid var(--border); padding: 4px 10px; border-radius: 99px; font-weight: 700; font-size: 11.5px; }
[data-theme="dark"] .quest-xp { color: var(--accent-strong); }
.quest-dots-track i { width: 22px; height: 5px; border-radius: 5px; background: var(--ring-track); display: inline-block; }
.quest-dots-track i.on { background: linear-gradient(90deg, var(--accent-mid), #23A96A); box-shadow: 0 0 6px rgba(35,169,106,.5); }

/* Lern-Chat */
.chat-widget { background: var(--panel-glass); backdrop-filter: blur(12px); border-radius: 18px; box-shadow: var(--shadow-soft); }
.chat-widget .icon-badge {
  background: linear-gradient(135deg, #23A96A, var(--accent-mid)) !important; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 7px 16px rgba(35,169,106,.32);
}
.chat-bot { background: var(--accent-soft); border: 1px solid var(--border); border-top-left-radius: 5px; }
.chat-chip {
  color: var(--accent-mid); background: var(--accent-soft); border: 1px solid var(--border);
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
[data-theme="dark"] .chat-chip { color: var(--accent-strong); }
.chat-chip:hover { border-color: #23A96A; box-shadow: 0 2px 10px rgba(35,169,106,.22); background: var(--accent-soft); color: var(--accent-mid); }
.chat-input-row input:focus { box-shadow: 0 0 0 3px rgba(35,169,106,.15); }

/* ---------- Liniennetzplan (herstellerneutrale Vorschau, ersetzt die Themen-Kartenraster) ----------
   Kein internes Scrollen - die Karte skaliert stattdessen als Ganzes in die Box hinein. Breite ist
   einfach 100% wie jede andere Box in dieser Spalte (Hero-Card, Chat-Widget, ...) - vorher an
   calc(100vh - 220px) gekoppelt, damit die Box "aufs aktuelle Fenster passt", was auf breiten aber
   nicht extrem hohen Bildschirmen genau das Gegenteil bewirkte: die Box wurde SCHMALER als die
   Spalte, nicht höher als der Bildschirm. Jetzt darf die (quadratische) Box ruhig höher als ein
   Bildschirm werden - das ist normales Scrollen der SEITE, kein internes Scrollen der Box selbst.
   Der max-width-Wert ist nur ein Sicherheitsnetz gegen absurd große Boxen auf Ultrawide-Monitoren. */
.subway-map-frame {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 1800px;
  aspect-ratio: 1 / 1;
  min-height: 360px;
  overflow: hidden;
}
.subway-map-loading { padding: 60px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.subway-map-frame svg { display: block; width: 100%; height: 100%; }
.subway-map-frame [id^="terminal-"], .subway-map-frame [id^="station-"] { cursor: pointer; }
.subway-map-frame [id^="terminal-"]:hover, .subway-map-frame [id^="station-"]:hover { opacity: .72; }

@media (max-width: 719.98px) {
  .subway-map-frame { min-height: 300px; }
}

/* ---------- Topic cards ---------- */
.topic-grid, .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.topic-card { padding: 20px; position: relative; overflow: hidden; }
.topic-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tc, linear-gradient(90deg, #23A96A, #1f8a57)); }
.topic-card::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; top: -110px; right: -70px; background: var(--tc-wash, rgba(35,169,106,.10)); filter: blur(34px); pointer-events: none; }
.tc-top { display: flex; align-items: flex-start; gap: 14px; position: relative; z-index: 1; }
.tc-art {
  width: 56px; height: 56px; border-radius: 16px; flex: none; position: relative;
  background: var(--tc, linear-gradient(135deg, #23A96A, #1f8a57)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px var(--tc-shadow, rgba(35,169,106,.35));
}
.tc-art svg, .tc-art img { width: 28px; height: 28px; }
.tc-art .spark {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 7px;
  background: var(--panel-glass); border: 1px solid var(--border); color: #23A96A;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
  box-shadow: 0 3px 8px rgba(7,80,51,.18);
}
.tc-art .spark svg { width: 11px; height: 11px; }
.tc-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.tc-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.tc-bottom { margin-top: 16px; position: relative; z-index: 1; }
.tc-bar { height: 5px; border-radius: 5px; background: var(--ring-track); overflow: hidden; }
.tc-bar i { display: block; height: 100%; border-radius: 5px; background: var(--tc, linear-gradient(90deg,#23A96A,#1f8a57)); animation: barIn 1.1s cubic-bezier(.4,0,.2,1) .5s backwards; }
.tc-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-top: 7px; }
.tc-meta b { color: var(--text); font-weight: 600; }

.progress-ring-wrap { width: 58px; height: 58px; }
.progress-ring-wrap svg circle:first-child { stroke: var(--ring-track); }
.progress-ring-wrap svg circle:last-child { animation: ringIn 1.2s cubic-bezier(.4,0,.2,1) .45s backwards; }
.progress-ring-pct { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--text) !important; }

/* Mini cards ("Weitere IT-Themen") */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mini-card { padding: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; overflow: hidden; }
.mini-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tc, linear-gradient(90deg,#23A96A,#1f8a57)); }
.mini-art {
  width: 40px; height: 40px; border-radius: 12px; flex: none; color: #fff;
  background: var(--tc, linear-gradient(135deg,#23A96A,#1f8a57));
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px var(--tc-shadow, rgba(35,169,106,.3));
}
.mini-art svg { width: 20px; height: 20px; }
.mini-title { font-weight: 600; font-size: 13px; line-height: 1.3; }
.mini-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* ---------- Tool cards ---------- */
.tool-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tool-card { flex-direction: column; align-items: stretch; gap: 11px; background: var(--panel-glass); backdrop-filter: blur(12px); }
.tool-head { display: flex; align-items: center; gap: 12px; }
.tool-card-icon {
  width: 44px; height: 44px; border-radius: 13px; color: #fff !important;
  background: var(--tc, linear-gradient(135deg,#23A96A,#1f8a57)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 7px 16px var(--tc-shadow, rgba(35,169,106,.32));
}
.tool-card-title { font-family: var(--font-head); font-size: 14px; flex: 1; }
.tool-card-arrow {
  width: 28px; height: 28px; border-radius: 9px; flex: none; margin-left: 0;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent-mid);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
[data-theme="dark"] .tool-card-arrow { color: var(--accent-strong); }
.tool-card:hover .tool-card-arrow { transform: translateX(3px); background: #23A96A; color: #fff; border-color: transparent; }
.tool-card-desc { font-size: 12.5px; line-height: 1.5; }

/* ---------- Mobile top bar + drawer ---------- */
.mobile-bar { display: none; }
.drawer-backdrop { display: none; }
.drawer-close { display: none; }

@media (max-width: 999.98px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(330px, 86vw) !important;
    background-color: var(--bg);
    transform: translateX(-105%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow: 24px 0 60px rgba(4,22,14,.35);
  }
  body.drawer-open .sidebar { transform: translateX(0); }

  .drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(4,22,14,.45); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open .app { position: relative; z-index: 70; }

  .drawer-close {
    display: flex; align-items: center; justify-content: center; margin-left: auto; flex: none;
    width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
    background: var(--panel-glass); border: 1px solid var(--border); color: var(--text-muted);
  }
  .drawer-close svg { width: 16px; height: 16px; }

  .nav-item, .nav-topic-header { padding: 12px; }
  .nav-subitem { padding: 11px 10px 11px 14px; }
  .global-search-btn { padding: 12px 14px; }
  .user-box { padding: 12px; }

  .mobile-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 62px; padding: 0 14px;
    background: var(--panel-glass); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
  }
  .mb-burger {
    width: 44px; height: 44px; border-radius: 13px; cursor: pointer; flex: none;
    background: var(--panel-glass); border: 1px solid var(--border); color: var(--text);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, color .2s;
  }
  .mb-burger:hover { border-color: #23A96A; color: #23A96A; }
  .mb-burger svg { width: 20px; height: 20px; }
  .mobile-bar .brandmark, .mobile-bar .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .mb-title { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }

  .main { padding: 84px 24px 48px; }
}

@media (max-width: 719.98px) {
  .main { padding: 78px 14px 40px; }
  .topbar { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .hero { padding: 26px 20px 24px; border-radius: 20px; flex-direction: column; }
  .hero h1, .hero-text h1 { font-size: 23px; }
  .hero .subtitle { font-size: 13px; }
  .hero-illustration, .hero-orbit { display: none; }
  /* Vitrine bleibt auf dem Handy sichtbar - rutscht unter den Text und nimmt die volle Breite */
  .hero-grid { flex-direction: column; }
  .hero-showcase { width: 100%; margin-top: 4px; }
  .hero-stats { grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 18px; }
  .hero-stat .num { font-size: 20px; }

  .resume-row, .continue-quest-row { grid-template-columns: 1fr; }
  .continue-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 18px 16px; }
  .continue-card-arrow { display: none; }
  .continue-progress-bar { max-width: none; }

  .quest-card { flex-wrap: wrap; row-gap: 10px; }

  .main h2 { font-size: 16px; margin: 24px 0 12px; }
  .tc-title { font-size: 15px; }

  .topic-grid, .card-grid, .tool-grid, .mini-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .blob-a, .blob-b, .orbit-rings, .orbit-center, .streak-pill svg { animation: none !important; }
  .xp-bar-fill, .continue-progress-bar i, .tc-bar i, .topic-bar-mini i { animation: none !important; }
  .bcard-legendary, .bcard-legendary .bcard-shield, .achv-legendary .bcard-shield { animation: none !important; }
  .bcard, .bcard.compact { transition: none; }
  .bcard:hover, .bcard.compact:hover { transform: none; }
  /* Freischalt-Moment: das JS baut unter reduzierter Bewegung nur die Karte; falls die Einstellung
     mitten im Flug kippt, bleiben Flug/Funken/Glanz trotzdem stumm. .uc/.uc-card sind opazitätsbasiert. */
  .uc-path, .uc-bob, .uc-scene, .uc-halo, .uc-burst, .uc-ring, .uc-shield, .uc-mark, .uc-wake, .uc-ribbon, .uc-spark, .uc-shine, .uc-veil { animation: none !important; }
  .uc-path, .uc-spark, .uc-shine, .uc-veil { display: none !important; }
  .uc-card { animation: ucCardStatic var(--uc-ms) linear forwards !important; }
}