/* ============================================================
   Hell/Dunkel-Design
   Der Umschalter sitzt in der Kopfzeile. Die gewählte Farbwelt steht am <html>-Tag
   (data-theme="light" oder "dark"). Ohne Auswahl folgt die Seite dem Gerät.
   Die Farben für dunkel änderst du hier unten in :root[data-theme="dark"].
   ============================================================ */
:root{ color-scheme:light; }
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1218; --bg-soft:#181C25; --surface:#161A22;
  --ink:#E8ECF4; --ink-soft:#A6AFC0; --border:#2A303C;
  --accent:#3E69FF; --accent-soft:#1C2644; --accent-hover:#5A82FF; --accent-fg:#8FA9FF;
  --teal:#2DD4BF; --teal-soft:#0F2E2B;
  --glass:rgba(15,18,24,.88); --muted:#9AA3B5; --formula:#E8ECF4;
  --danger:#F87171; --danger-bg:#2A1517; --danger-line:#5B2327; --danger-ink:#FCA5A5;
  --star:#F5B83A; --star-bg:#3A2E10;
}
:root[data-theme="dark"] .rule-card,
:root[data-theme="dark"] .auth-card{ box-shadow:none; }
:root[data-theme="dark"] .rule-card:hover{ box-shadow:0 14px 30px rgba(0,0,0,.35); }
:root[data-theme="dark"] .news-overlay{ background:rgba(0,0,0,.62); }
:root[data-theme="dark"] .legal mark{ background:#4A3F0A; color:#FFD9D9; }
:root[data-theme="dark"] .ai-btn.ghost{ background:var(--accent-soft); }
:root[data-theme="dark"] .sqrt .rad{ display:block; width:13px; min-height:20px; font-size:0; color:transparent; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' preserveAspectRatio='none'%3E%3Cpath d='M0.6 12.2 L2.6 10.6 L5.2 18.6 L9.9 0.7' fill='none' stroke='%23E8ECF4' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat; background-size:100% 100%; }

/* Grafiken/Skizzen bleiben in BEIDEN Farbwelten exakt gleich (immer helle Farben) */
.diagram-frame, .share-card{
  --bg:#ffffff; --bg-soft:#f6f7f9; --surface:#ffffff; --ink:#14181f; --ink-soft:#4B5565; --border:#e6e8ec;
  --accent:#2F5BFF; --accent-soft:#EEF3FF; --accent-hover:#1E45E0; --accent-fg:#2F5BFF; --muted:#6B7280; --formula:#1d1b4f;
  --teal:#0d9488; --teal-soft:#e6f6f4; --glass:rgba(255,255,255,.92); color:#14181f;
}
.diagram-frame{ background:#f6f7f9; border-color:#e6e8ec; }

/* Umschalter */
.top-actions{ display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; }
.theme-btn{
  flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.theme-btn:hover{ border-color:var(--accent); color:var(--accent-fg); }
.theme-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.top-actions .acct{ max-width:none; }
@media (max-width:420px){ .top-actions{ gap:6px; } .top-actions .acct-btn{ padding-left:10px; padding-right:12px; } }

/* Kopfzeile: Titel darf umbrechen, Konto-Knopf wird gekürzt statt aus dem Bild zu laufen */
.toprow{ align-items:center; }
.toprow .brand{ flex:1 1 0; }
.top-actions{ max-width:64%; }
.top-actions .acct{ min-width:0; flex:0 1 auto; max-width:none; }
.top-actions .acct-btn{ max-width:100%; min-width:0; }
.top-actions .acct-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }