:root {
--bg: #0A0D0B;
--surface: #121712;
--surface-2: #1A211B;
--surface-hover: #212921;
--border: #2A332A;
--text: #F2F2F1;
--text-muted: #9CA39A;
--accent: #D4AF37;
--accent-fg: #12261F;
--accent-hover: #E4C25E;
--accent-pos: #22C55E;
--accent-neg: #F87171;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
--radius: var(--radius-md);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-md: 0 8px 24px rgba(0,0,0,.35);
--font-display: "Manrope", "Inter", system-ui, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
/* InnerCapital-Markentheme (abgelöst: neutrales Indigo-SaaS-Theme ohne
Bezug zum Logo). Farben aus media/InnerCapitalLogo.png abgeleitet:
dunkles Waldgrün (Baum/Wurzeln) als Grundton, Gold (Ring/Balken) als
Akzent. --accent-pos/--accent-neg bleiben bewusst neutrales Grün/Rot
(Finanz-Konvention Gewinn/Verlust, siehe frontend.md) statt Markenfarben,
damit sie sich klar vom Akzent-Gold unterscheiden.
Wird per data-theme="light" auf aktiviert (siehe base.html). */
:root[data-theme="light"] {
--bg: #FAF9F5;
--surface: #FFFFFF;
--surface-2: #F5F3EC;
--surface-hover: #EDEAE0;
--border: #E6E2D6;
--text: #151A16;
--text-muted: #6E6B5F;
--accent: #8A6416;
--accent-fg: #FFFFFF;
--accent-hover: #6E4F0E;
--accent-pos: #16A34A;
--accent-neg: #DC2626;
--shadow-sm: 0 1px 2px rgba(15,23,42,.08);
--shadow-md: 0 8px 24px rgba(15,23,42,.10);
}
/* Breakpoint-Konvention (CSS kennt ohne Präprozessor keine wiederverwend-
baren Media-Query-Variablen - daher als Kommentar dokumentiert, JEDE
neue/überarbeitete Media-Query soll sich an einem dieser 3 Werte
orientieren statt neue ad-hoc-Breakpoints einzuführen):
640px - Formulare/Filter werden einspaltig
860px - Hauptnav klappt zu Hamburger-Menü, Sidebar wird static/full-width
1080px - Layout-Grid bekommt schmalere Sidebar-Spalte */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* ---- Overflow-Schutz (global) ----
Ursache der gemeldeten Layout-Bugs (Formularfelder liefen aus Sidebar/
Panel heraus): native /