/* ============================================================================= DELTA METRON — tokens.css ───────────────────────────────────────────────────────────────────────── Gemeinsame Grundlage von Web-App (app.html) und oeffentlichen Seiten (index.html, impressum.html, datenschutz.html): Schrift, alle Masse und die Themes Hell / Dunkel / Ocean (dark + data-variant="blue"). Seit 05.10.2026 hier statt in global.css — EINE Quelle, damit die Landingpage nie wieder hinter der App zurueckbleibt. Nur Token, keine Bauteile. Bauteile, die beide Seiten zeigen: shared.css. ============================================================================= */ /* ── Inter Font — lokal eingebunden (DSGVO-konform, kein Google-Transfer) ── NUR die drei verbindlichen Schnitte: 400 Fliesstext, 500 Hervorhebung, 600 ausschliesslich Titel und Hero-Werte. 100/200/300/700/800/900 waren deklariert, wurden aber an keiner Stelle angewendet. Jede Datei enthält latin + latin-ext kombiniert (google-webfonts-helper v20). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');} @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');} @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');} /* ─── 1. LAYOUT & FONT TOKENS — theme-unabhängig ───────────────────────── */ :root { /* ── Pille-Tint NEUTRAL ──────────────────────────────────────────────── Die dritte Pillenfarbe neben --pos-bg und --neg-bg, nach demselben Prinzip: eine TOENUNG der eigenen Farbe, hier der Textfarbe. Halbtransparent, liegt also auf jedem Untergrund und hebt sich ueberall ab. WICHTIG: steht im GLOBALEN Block, nicht in einem Theme-Block. --t1 ist selbst themeabhaengig, die Mischung folgt von allein. Stand das Token versehentlich nur im Light-Block, war es in Dark und Ocean undefiniert — und eine undefinierte Variable macht die ganze Deklaration ungueltig. Die Pille hatte dann gar keine Flaeche. 10 % ergeben gegen die Karte: 5,1 -> 15,7 (dark), 98,6 -> 91,3 (light), 5,8 -> 16,6 (ocean). */ /* ── Mischbasis der Bedienflaechen (Register 4.0a, seit 22.09.2026) ── Neutrale Pille und Knopf-Standard mischen aus --ctl-ink, nicht direkt aus --t1. Grundwert ist --t1 (Hell, Dunkel). Ocean stellt Tinte UND Anteile im eigenen Block um: --t1 ist dort fast Weiss (#E0F4F9), und Weiss in Marineblau ergibt Grau (Buntheit 9,7 bei 12 %, Karte 10,7). Die Anteile stehen als eigene Token, weil eine andere Tinte bei gleichem Prozentsatz eine andere Helligkeit ergibt — die Stufen werden auf gleiche Helligkeit gerechnet, nicht auf gleiche Zahl. */ --ctl-ink: var(--t1); /* Rahmen duerfen eine eigene Tinte haben (Ocean: neutral, siehe dort). */ --ctl-bdr-ink: var(--ctl-ink); --ctl-p-sel-hover: 6%; --ctl-p-act-hover: 8%; --ctl-p-neutral: 10%; --ctl-p-sel-on: 12%; --ctl-p-act-bdr: 16%; --neutral-bg: color-mix(in srgb, var(--ctl-ink) var(--ctl-p-neutral), transparent); /* Knopf-Standard (Register 4.0a): jede Flaeche und jeder Rahmen ist ein ANTEIL der Bedien-Tinte, nie eine feste Farbe — so sehen Knoepfe auf Seite, Karte, Menue und Glas in allen Themes gleich aus. */ --act-bdr: color-mix(in srgb, var(--ctl-bdr-ink) var(--ctl-p-act-bdr), transparent); /* Aktion: Rahmen */ --act-hover: color-mix(in srgb, var(--ctl-ink) var(--ctl-p-act-hover), transparent); /* Aktion: Flaeche beim Ueberfahren */ --sel-hover: color-mix(in srgb, var(--ctl-ink) var(--ctl-p-sel-hover), transparent); /* Auswahl: Ueberfahren */ --sel-on: color-mix(in srgb, var(--ctl-ink) var(--ctl-p-sel-on), transparent); /* Auswahl: gewaehlt */ /* ── Glas (seit 26.09.2026, User nach Mockup) ── EIN Glas fuer die drei Glasflaechen: Steuerleiste (.dm-dock), Schnellzugriff (.wlq-panel), Kurschart mit Glasoptik (#sa-chart). Vorher drei Kopien mit 48-52 % Toenung, 28/30px Unschaerfe und einer weissen Lichtkante oben (in Hell 75 % — wirkte wie eine erhabene Leiste). Jetzt: wenig Toenung, starke Unschaerfe (Farbe ja, Formen nein), gleichmaessige Haarlinie ringsum aus der Schriftfarbe, keine Lichtkante. */ --glass-bg: color-mix(in srgb, var(--surf-2) 15%, transparent); --glass-filter: blur(24px) saturate(160%); --glass-edge: color-mix(in srgb, var(--t1) 10%, transparent); /* Schriften — Inter unified */ --f-main: 'Inter', sans-serif; --f-logo: 'Inter', sans-serif; --f-mono: 'Inter', sans-serif; /* --- BRAND ACCENT — Türkis (Editorial-Brand) --- Theme-übergreifend: dasselbe Türkis in Light/Dark/Ocean. Auf warmer Sand-Page leuchtend, auf dunklen Themes klar erkennbar. */ --brand-acc: #0D9488; /* Teal-600 — Haupt-Akzent */ /* ── DMK-Card v2 (Neubau) — Default = Dark; Light überschreibt im Light-Block ── */ --dmkc-dcf:#2bb6d4; --dmkc-grw:#818cf8; --dmkc-ev:#d98a30; /* Geschaeftsjahres-Marke im Kurschart (je Theme, vorher als Hex in den Regeln + [data-theme]-Duplikaten, 25.09.2026). */ --mark-year: #A78BFA; --dmkv-z-grn:#1aa657; --dmkv-z-grn-soft:rgba(26,166,87,.30); --dmkv-z-gld:#dba00b; --dmkv-z-red:rgba(154,31,31,.30); --dmkv-z-red-strong:#c62f2f; --dmkv-fair-l:rgba(10,15,26,.12); --dmkv-fair-r:rgba(10,15,26,.90); --dmkv-cap-cur:#f5b731; --dmkv-brk:rgba(229,231,235,.24); --dmkv-mid:#f5b731; --dmkp-mix:#93c5fd; --brand-acc-h: #0F766E; /* Teal-700 — Hover (etwas dunkler) */ /* --- PLAN-TIER BRAND-FARBEN (Topbar Plan-Badge) --- Theme-übergreifend dieselben Farben (Brand-Identität). */ --tab-active: #D4AF37; /* Gold — aktiver Tab-Unterstrich */ --plan-friend: #C75563; /* Dezent-Rot (Friend-Herz) */ --plan-pro: #22D3EE; /* Cyan */ --plan-pro-bg-h: #0F1F26; /* Hover-BG für Pro */ --plan-founder: #8B5CF6; /* Violett */ --plan-founder-bg-h: #1A0E2E; /* Hover-BG für Founder */ --plan-creator: #D4AF37; /* Gold */ --plan-creator-h: #E5C158; /* Gold heller — Hover-Border */ --plan-creator-bg-h: #1a1500; /* Hover-BG für Creator */ /* --- CHROME (Sidebar & Topbar) --- FESTE PIXEL für stabile App-Hülle --- NICHT mit rem skalieren — das html.font-size ist clamp() und volatil. Sidebar+Topbar sollen sich wie solide UI-Hülle verhalten. */ --topbar-h: 60px; /* Topbar — feste Pixel (war 3.5rem) */ /* --- GLOBAL SPACING --- */ --main-padding: 24px; /* fixer Gutter = --sp-sl-lg (war 1.5rem = 21px bei Root 14px); größer als Card-Gaps für klare Hierarchie */ --gap-lg: 1.5rem; /* Grosse Sektions-Abstände */ --gap-md: 1rem; /* Karten-Abstände */ --gap-sm: 0.5rem; /* Interne Element-Abstände */ --gap: 1.25rem; /* Alias für ältere Referenzen */ /* ═══ SPACING-TOKEN-SYSTEM 2026-05 — Single Source of Truth ═══ 8-Punkt-Skala für konsistente Abstände App-weit. Nutze immer Token statt Pixel-Werte. Bei neuen Regeln Pflicht. Bei alten Werten: schrittweise Migration. */ --s-1: 4px; /* tightest — Icon ↔ Text, Mikro-Abstände */ --s-2: 8px; /* tight — innerhalb compact UI */ --s-3: 12px; /* default — Standard-Padding kleiner Elemente */ --s-4: 16px; /* comfortable — Standard-Card-Padding */ --s-5: 20px; /* spacious — größere Cards */ --s-6: 24px; /* generous — Section-Padding */ --s-7: 32px; /* large — zwischen Page-Sektionen */ --s-8: 48px; /* huge — Page-Header-Abstände */ /* Fluide Varianten — skalieren zwischen Min und Max je nach Viewport. Default für alles Layout-relevante (Card-Padding, Grid-Gap, Section-Abstand). */ --s-fluid-card: clamp(12px, 1.5vw, 20px); /* Card-Padding intern */ --s-fluid-grid: clamp(12px, 2vw, 24px); /* Grid-Gaps zwischen Cards */ --s-fluid-section: clamp(24px, 4vw, 48px); /* Abstand zwischen Page-Sektionen */ /* ═══ TYPOGRAFIE-TOKEN-SYSTEM 2026-05 — Single Source of Truth ═══ Schriftgrößen-Skala für konsistente Typografie App-weit. Nutze immer Token statt Pixel/rem-Werte. Bei neuen Regeln Pflicht. Bei alten Werten: schrittweise Migration. */ /* ─── Schriftgrößen ─── */ /* ─── Font-Weights ─── */ --fw-normal: 400; /* Body-Text */ --fw-medium: 500; /* Highlights (Fair-Value-Werte, MoS, Tabellen-Werte) */ --fw-semibold: 600; /* Titel (nur Titel!) */ /* ─── Line-Heights ─── */ --lh-tight: 1.2; /* Kompakte Titel */ --lh-snug: 1.4; /* Standard UI (Buttons, Pillen) */ --lh-base: 1.6; /* Body-Text, lesbar */ --lh-loose: 1.7; /* Lange Prosa */ /* ═══ Border-Radius System — Single Source of Truth ═══ Editorial-Stone-Stil (Seeking Alpha / Bloomberg Terminal). Jede Variable hat einen klaren semantischen Zweck — nie hardcoden! --r Container, Cards, Boxen, Modals, Tabellen-Wrapper (gerade Editorial-Kanten) --r-action Buttons, Toggles, Tooltips, Dropdowns, schwebende UI (klare Affordance) --r-hover Hover-Pills auf Tabellen-Zeilen (subtile Spur, kein Button) --r-mini Mini-Indikatoren, Sparkline-Bars, Scrollbars, Mini-Tags (kleine Elemente) --r-pill Capsule-Shape für Badges (z.B. +0.44%) (volle Pill-Form) Logos & Avatare nutzen direkt 50% (semantisch eigene Klasse). */ /* ─────────────────────────────────────────────────────────────── RUNDUNGS-SYSTEM — drei Hauptstufen + zwei Sub-Stufen ─────────────────────────────────────────────────────────────── --r 12px → Container und Cards (SMK, Chart, Metrics, Welcome, Tipp-Boxen) --r-action 8px → Buttons und Aktions-Elemente (Reset, Primary/Secondary, Toggle-Container, Eingabefelder, Wert-Boxen rechts vom Chart) --r-inner 6px → Innere Buttons in Toggle-Containern (USD/EUR Buttons, Sidebar-Items, Hover-States) --r-mini 3px → Mini-Akzente --r-pill 999px → Fortschritts-Anzeigen (10 Pillen, Badges) Logos & Avatare nutzen direkt 50% (semantisch eigene Klasse). Eckpunkt-Marker im Triangle + Chart-Datenpunkte = SVG-Circles. */ --r: 8px; /* Style-Lock: Card-Radius (vorher 12px) */ --r-action: 8px; /* Style-Lock: Control-Radius (vorher 12px) */ --r-inner: 6px; /* Altlast-Alias. Neue Regeln nutzen --r-sl-inner (4px). */ --r-hover: 6px; /* alias für --r-inner — Sidebar-Hover */ --r-mini: 3px; --r-pill: 999px; /* ════════════════════════════════════════════════════════════════════ STYLE-LOCK 2026-05 — Die definitiven Werte für die ganze App. SCHRIFTGRÖSSEN — 5 Werte: --fs-sl-xs 11px → NUR eingefasst oder in Versalien: Inhalt von Pillen, Versalien-Mini-Labels mit --ls-uppercase. Freistehender Text ist NIE 11px. Chart-Achsen zaehlen nicht dazu (viewBox-Einheiten, skalieren mit dem SVG). --fs-sl-sm 12px → Labels, Meta, Sub-Texte, Buttons, Inputs, %-Werte --fs-sl-md 14px → Body, Card-Titel, Standardwerte, Modell-Namen --fs-sl-bd 16px → Card-Titel, Sektion-Sub-Header, hervorgehobene Werte --fs-sl-lg 20px → Hero-Werte, große Zahlen, MoS/Entry-Resultate SCHRIFTGEWICHTE — 3 Werte (--fw-normal/medium/semibold schon definiert): 400 normal → Body-Text, Meta-Info, Sub-Texte 500 medium → Werte, Buttons, kleine Hervorhebungen 600 semibold → ABSCHLIESSEND diese vier Rollen: 1. Titel und Ueberschriften (Card-Titel, Modell-Namen) 2. Hero-Werte (Firmenname, Kurs, Fairer Wert) 3. aktiver Zustand in Umschaltern (aktiv 600 / inaktiv 500) 4. Achsenbeschriftungen in Charts Sonst NIE. Soll ein Wert in einer Tabelle hervorstechen, geschieht das ueber die Farbe (--t1 statt --t2), nicht ueber das Gewicht. Sobald jedes dritte Element die dickste Stufe traegt, hebt sich der Titel nicht mehr ab — und der naechste Griff geht zu 700. FARBEN — 3 Hauptstufen (--t1/t2/t3 schon definiert): --t1 → primär (Hauptaussagen: Firmenname, Hauptwerte, Titel) --t2 → sekundär (Body, mittlere Wichtigkeit) --t3 → tertiär (Sub-Texte, Labels, dezente Infos) Akzentfarben (nur für Modell-Markierungen): #0E7490 Petrol-Teal → DCF, MoS #4F46E5 Royal Indigo → Growth #B45309 Warm Bronze → EV/EBITDA, Entry Price SPACINGS — 5 Werte, STRIKT. Kein Wert dazwischen, keiner darunter: --sp-sl-xs 4px → enge typografische Bindung (Label↔Wert, Wert↔Sub-Text) --sp-sl-sm 8px → innen (Icon↔Text, Fuellung einer Pille, Gap in Reihe) --sp-sl-md 16px → zwischen Elementen --sp-sl-lg 24px → Card-Padding, Sektionen, Abschnitts-Rahmen, Card-in-Card --sp-sl-xl 48px → Wertkasten unter einer Abschnitts-Ueberschrift Die Leiter gilt fuer ABSTAENDE VON OBJEKT ZU OBJEKT: padding, gap, margin. NICHT fuer Rahmenstaerken (border), Linienstaerken im Chart (stroke-width) oder Radien — das sind Linien und Formen, keine Abstaende, und sie haben ihre eigene Logik. 5, 6, 7, 9, 10, 12, 14px sind Fehler, keine Ausnahmen. Ebenso 1, 2, 3px als "optische Korrektur" — wer nachjustieren will, loest das Problem an der Ursache. LINIEN — 1 Staerke: 1px → ALLE Raender. Keine 0.5/1.5/2.5px — eine Haarlinie entsteht ueber die FARBE (--bdr ist rgba(...,0.10)), nicht ueber die Breite. Schmaler als ein physisches Pixel geht nicht. 2px → einzige Ausnahme: Unterstrich des aktiven Reiters (Markierung). Abstufung ueber die Farbe: --bdr-soft (Trennlinie/Tabellengitter), --bdr (Karten, Felder), --t3 (Hover/Fokus). Aktiv laeuft ueber die FLAECHE, nicht ueber den Rahmen. FLAECHE STATT LINIE: Pillen und Knoepfe tragen ihre Bedeutung ueber die getoente Flaeche und haben KEINEN Rahmen. Rahmen behalten nur: Eingabefelder (muessen zeigen, dass man hineinschreiben kann), Ghost-Knoepfe ohne Flaeche, Cards (--card-shadow), aktiver Reiter. Trennen in dieser Reihenfolge: Abstand → Flaeche → Haarlinie. Ein Rahmen ist das LETZTE Mittel. CHART-LINIEN — 3 Staerken (viewBox-Einheiten, skalieren mit): 1 → Gitterlinie 1.5 → Bezugslinie (Kurs, eigene Annahme, Nulllinie) 2 → Datenlinie Nichts dazwischen. 1.1 bis 1.7 sind gewachsen, nicht entschieden. RADIUS — 4 Werte + Avatar (Staffelung: je kleiner das Element, desto schwaecher die Rundung): --r-sl-card 8px → Cards (Parqet-Style) --r-sl-control 6px → Buttons, Inputs, Toggles --r-sl-inner 4px → Innere Pillen in Segmented Controls --r-sl-popup 6px → Dropdowns, Popups --r-avatar 50% → ALLE runden Avatare (Topbar-User, Logos im Kreis) CONTROL-HÖHE — 1 Wert (alle interaktiven Topbar-Elemente): --ctrl-h 40px → Suchfeld, Plan-Button, Avatar LOGO & ICON — 3 Größen: --logo-sb 36px → Sidebar-Brand-Logo --icon-sm 16px → Inline-Icons in Dropdown-Items --icon-md 20px → Standard-Icons (Search, Sidebar-Nav) LETTER-SPACING — 2 Werte für die gesamte App: --ls-brand 1.5px → Brand-Name, Brand-Sub, Section-Separator --ls-uppercase 0.04em → ALLE uppercase Mini-Labels (Login-Button, Plan-Pille) ════════════════════════════════════════════════════════════════════ */ --fs-sl-xs: 11px; /* selten, nur Chart-Achsen etc */ --fs-sl-sm: 12px; --fs-sl-md: 14px; --fs-sl-bd: 16px; /* Card-Titel, Sektion-Sub-Header (zwischen Body und Hero-Werten) */ --fs-sl-lg: 20px; /* HERO-ONLY: zwei Größen die ausschließlich im globalen Hero (`.gh-inner` / `.dm-id`) verwendet werden — NIRGENDWO anders. Diese Werte sind der einzige Bruch mit dem 4-Wert-System, weil der Hero als Identitätsbereich klar dominanter sein muss. */ --fs-hero-name: 24px; /* Firmenname (NUR im Hero) */ --fs-hero-price: 28px; /* Current Price + Fair Value (NUR im Hero) */ --sp-sl-xs: 4px; --sp-sl-sm: 8px; --sp-sl-md: 16px; --sp-sl-lg: 24px; --sp-sl-xl: 48px; /* Button-Füllung — randlos: Füllung + gleichfarbige Hairline (Simply-Stil) */ --btn-fill: #ECECEC; /* Control-Fill (solid, neutral R=G=B). Seite-Kontext Light; Dark/Ocean + .card-Kontext ueberschreiben unten */ --btn-fill-hover: #DDDDE0; --r-sl-card: 8px; --r-sl-control: 6px; --r-sl-inner: 4px; --r-sl-popup: 6px; /* AVATAR-RADIUS — eigenes semantisches Token. Alle Avatare (Topbar-User, Profile-Bilder, Logo im Triforce-Kreis, Coin-Icons in Tabellen etc.) nutzen --r-avatar: 50%. Einzige Stelle wo 50% definiert ist → bei späteren Änderungen 1 Stelle. */ --r-avatar: 50%; /* Card-Header-Höhe — IMMER 56px überall. (Der Kommentar nannte frueher 44px, der Wert war schon lange 56 — wer den Text las statt den Wert, baute Koepfe in der falschen Hoehe.) */ --hdr-sl: 56px; /* CONTROL-HÖHE — STYLE-LOCK 2026-05 Alle interaktiven Topbar-Elemente nutzen die gleiche Höhe. Suchfeld, Plan-Button, Avatar — visuelle Einheitlinie. */ --ctrl-h: 40px; /* LOGO/ICON-Größen — STYLE-LOCK 2026-05 --logo-sb : Sidebar-Brand-Logo (bewusst kleiner als Avatar/Control) --logo-hero : Firmen-Logo im Hero (.dm-id-logo auf allen Stock-Pages) --icon-sm : Inline-Icons in Dropdown-Items --icon-md : Standard-Icons (Search, Sidebar-Nav, Star) Eigene Tokens weil semantisch klar abgegrenzt von Schrift/Spacing. */ --logo-sb: 36px; --logo-hero: 64px; --icon-sm: 16px; --icon-md: 20px; /* LETTER-SPACING — STYLE-LOCK 2026-05 Zwei Werte für die gesamte App: --ls-brand : Brand-Logo, Brand-Sub, Section-Separator (alle uniform) --ls-uppercase: ALLE uppercase Mini-Labels (Login-Button, Plan-Pille usw.) */ --ls-brand: 1.5px; --ls-uppercase: 0.04em; --ls-num: -0.02em; /* grosse Zahlen (Kurs, fairer Wert, Betraege): enger gesetzt. In em statt px: skaliert mit der Groesse (28px → −0,56px, 16px → −0,32px) — ersetzt −.3/−.4/−.5px (23.09.2026, Register 1.5). */ /* --- TABLES — Single Source of Truth für ALLE Tabellen --- §11 (Historical) und §14 (Growth/Margin) nutzen exakt dieselben Variablen. Keine Drift zwischen Seiten möglich. Breakpoint-Overrides in §17 — keine CSS-Regeln werden dupliziert. */ --col-lw: 17rem; /* Label-Spalte (sticky, links) */ --col-sw: 7.2rem; /* Stat-Spalten (Median / CAGR, sticky) */ --col-yw: 8.5rem; /* Jahres-Spalten (YoY, scrollend) */ /* --- DCF TOP GRID (Flexibel) --- */ --dcf-top-min-height: 410px; --dcf-lbl-w: 175px; --dcf-col-w: 80px; /* --- OPTICAL TUNING --- */ --wall-shadow: rgba(0, 0, 0, 0.08); /* Trennschatten der Sticky-Wall */ --dur: 0.22s; --ease: cubic-bezier(.4, 0, .2, 1); /* --- ACTION BUTTONS --- Orange als Akzentfarbe für klick-aktive Buttons (Reset, Currency-Toggle, Mode-Toggle). Editorial-Pattern: Orange = "klick mich" als einzige aktive Farbe, sonst schwarz/weiß-Hintergrund. Theme-übergreifend identisch. */ --btn-action: #E66A2E; /* Pumpkin Orange — gesättigt warm, nicht blass (war #cc785c Terracotta) */ --btn-action-hover: #C95628; /* dunkleres Pumpkin für Hover-Tiefe */ --btn-action-active: #5C4636; /* Chocolate — semantisch mit Coffee-System verbunden (war eigener Orange-Ton) */ --btn-action-text: #ffffff; /* --- WARN RED --- Burgundy statt Tailwind Red 600 — passt zum warmen Stone-Theme, wirkt autoritär statt aggressiv. Eine Wahrheit für alle Warn-States. Bei Total Weight ≠ 100% in den Modellen (Dashboard/DCF/Growth/EV). */ --warn-red: #991B1B; /* Red 800 — Burgundy für full fill */ --warn-red-bdr-soft: rgba(153,27,27,0.5); /* Border für dezente Pulse-States */ --warn-red-bg-soft: rgba(153,27,27,0.08);/* BG-Tönung für dezente Pulse-States */ } /* ═══════════════════════════════════════════════════════════════════════════ SYSTEM-BREAKPOINTS — Single Source of Truth (2026-05 Refactor) ─────────────────────────────────────────────────────────────────────────── Delta Metron nutzt EXAKT 2 Breakpoints, keine mehr. In @media-Queries werden die Pixel-Werte direkt verwendet (CSS-Limitation: var() funktioniert nicht in @media). Variablen unten dienen der Dokumentation und werden in JS-Code (matchMedia) verwendet. --bp-mobile: 960px → ≤960: Sidebar weg, Hamburger an, Stack-Layout --bp-fusion: 1280px → ≤1280: Sidebar Auto-Mini, Cards fusionieren 1080p Monitor (1920px) → beide Breakpoints inaktiv → volle Sidebar MacBook 14" (1512px) → ≤1280? NEIN (1512>1280) → volle Sidebar ✓ MacBook 13" (1280px) → ≤1280? JA → Auto-Mini Tablet/Mobile (<960) → Hamburger-Mode NIEMALS neue Breakpoints einführen. Alles dazwischen wird durch clamp() / minmax() / auto-fit geregelt. ═══════════════════════════════════════════════════════════════════════════ */ :root { --bp-mobile: 960px; --bp-fusion: 1280px; /* Theme-UNABHAENGIGE Farben (in ALLEN Themes identisch) gehoeren ins globale :root, NIE in einen [data-theme=...]-Block — sonst fehlen sie in den anderen Themes. --today = "Heute"-Label-Gelb (= Tabellen-Gelb #f59e0b). */ --today: #f59e0b; --today-bg: rgba(245, 158, 11, 0.14); --fv-line: #60a5fa; /* Fair-Value-Linie (Blau) — theme-unabhaengig */ /* Dividende (Register 2.4): Zustaende in Saeule, Legende, Marke. Gezahlt Blau, angekuendigt Violett, Sonder Pink — keine Farbe mit Bedeutung (gruen/rot/amber). Geschaetzt/Prognose: Schraffur in --dvd, Marke grau. Bis 24.09.2026 _DVD_BLUE/_DVD_SPECIAL im JS. Werte seit 25.09.2026 gedaempft und je Theme — in den Theme-Bloecken bei den Kennzahlfarben. */ /* Qualitaet (Register 13.9): Zellen der Matrix und Zonenflaechen im Chart aus den Bedeutungsfarben (--pos/--neg) und der neutralen Tinte — keine eigenen Hex-Werte. Die Deckkraft steht je Theme (--ql-p-*); Dunkel und Ocean kraeftiger, sonst wurde Gruen auf Schwarz grau (User 25.09.2026). */ --ql-cell-g: color-mix(in srgb, var(--pos) var(--ql-p-cell), transparent); --ql-cell-r: color-mix(in srgb, var(--neg) var(--ql-p-cell-r), transparent); --ql-cell-n: var(--neutral-bg); --ql-band-g: color-mix(in srgb, var(--pos) var(--ql-p-band), transparent); --ql-band-r: color-mix(in srgb, var(--neg) var(--ql-p-band-r), transparent); --ql-band-n: color-mix(in srgb, var(--ctl-ink) 5%, transparent); --ql-p-cell: 30%; --ql-p-cell-r: 28%; --ql-p-band: 14%; --ql-p-band-r: 12%; /* Dividenden-Rang (Register 2.4): Koenig Gold, Aristokrat helles Blau. Eigene Toene, NICHT --amber (= Warnstufe) und nicht --dvd (= gezahlt). */ --rank-king: #D4A017; --rank-aristocrat: #6FA8DC; /* Kursmarke: war im Code nur als Rueckfall var(--price,#eab308) vorhanden, also nie als Token gefuehrt. */ --price: #eab308; --price-ink: #1a1a1a; --sma-50: #F59E0B; /* Bernstein — kuerzester Durchschnitt */ --sma-100: #06B6D4; /* Cyan — mittlerer */ --sma-200: #A855F7; /* Violett — laengster */ /* MoS-Marke: neutral statt farbig. Violett (#8B5CF6) lag fast auf dem Growth-Modell (#818cf8/#4F46E5) — eine Bezugslinie darf keine Farbe mit einer Datenreihe teilen. Cyan, Violett, Orange und Gold sind im Chart belegt; der Kaufkurs ist zudem die einzige Marke, die dem Nutzer gehoert und nicht den Daten. Helle Flaeche mit dunkler Schrift wie bei der Kurs-Pille. */ --mos-line: #E3E6EA; --mos-brd: #9AA1AB; --mos-ink: #1a1a1a; } /* ─── 2. LIGHT THEME ────────────────────────────────────────────────────── */ :root[data-theme="light"] { /* ════════════════════════════════════════════════════════════════════ LIGHT MODE — Refactor: weg von warm-Stein-Welt Sidebar-Marken-Anker: Petrol-Slate #2C3E50 (gedämpft, eigenständig) Page/Cards/Header: weiß mit dezentem Grau-Stich (kein Stein-Warm mehr) ════════════════════════════════════════════════════════════════════ */ --bg: #E4E4E4; /* Page-BG: echt-neutrales Grau (R=G=B), enge Staffelung mit Card — harmonisch wie Ocean/Dark */ --bg-alt: #EFEFEF; /* Header-Streifen / Sub-Bereich: neutral, knapp über BG */ --hover-bg: rgba(0,0,0,0.07); /* Hover-Highlight für Tabellen-Zeilen — global einheitlich */ --hover-row: #F2F2F2; /* DECKENDE Zeilen-Hover-Farbe (dmtbl) — neutral, dezent, gleich auf Edge + Card */ --hover-bg-paper: rgba(0,0,0,0.07); /* Hover-Highlight im Papier-Kontext */ --btn-hover-bg: rgba(0,0,0,0.04); /* Button/Item-Hover (schwächer als Tabellen-Hover) */ --btn-hover-bg-accent: rgba(0,0,0,0.07); /* Hover für Accent-Buttons: neutral (kein Petrol-Tint mehr) */ --card: #FBFBFB; /* Card: neutral, NICHT reinweiß — poppt dezent über Grund (enge Staffelung wie Ocean-Card) */ --surf-2: #FFFFFF; /* Tooltip/Popover — neutral, EINZIGE Flaeche heller als Card (hebt sich nach oben ab) */ --dmtbl-edge: #E8E8E8; /* Ob.3 staerkste: Label-/Aktuell-Spalte — neutral, im engen Band */ --dmtbl-line: #EFEFEF; /* Tabellen-Gitterlinien: DECKEND neutral, naeher an Card — EINE Stelle steuert horizontal + vertikal, alle Tabellen */ --card-shadow: 0 0 0 1px var(--bdr), 0 2px 8px rgba(0,0,0,0.06); /* Light: dezenter Hairline-Ring + weiche Lage (neutraler Schatten) — erreicht ALLE Cards ueber das Token */ --popup-shadow: 0 8px 24px rgba(0,0,0,0.10); /* Dropdowns/Popups — staerkere Elevation als Cards (neutraler Schatten) */ /* Kante ALLER Popup-Flaechen (Chart-Expand, Info-Panel, Wachstums- und Korridor-Karte). Als fertiger box-shadow-Wert, damit border:none gilt und es genau EINE Stelle je Theme gibt. Light: Hairline-Ring + Lage. */ --popup-edge: 0 0 0 1px var(--bdr), 0 8px 24px rgba(0,0,0,0.10); --bdr: #D4D4D4; /* Border: neutral (R=G=B), klar sichtbar, im engen Band */ --bdr-elev: #EBEBEB; /* Rand für Elemente AUF --surf-2 (Tooltip/Popover) — neutral, dezenter als --bdr */ --bdr-soft: rgba(0,0,0,0.07); /* Subtle Inset-Linie: neutral (kein Petrol-Tint mehr) */ --btn-black: #2C3E50; /* Active-Buttons-Ton = Sidebar-Farbe (Marken-Anker) */ /* Text — kühl-neutral, kein warm-Brown mehr */ --t1: #2A2A2A; /* Neutral-Dunkel (R=G=B) — fast schwarz, sauber ohne Kühl-Stich */ --t2: #575757; /* Neutral-Grau — Secondary, lesbar */ --t3: #7C7C7C; /* Neutral-Grau — Tertiary, Hints. War #9E9E9E und erreichte auf der Karte nur 2,59:1 — unter jeder Lesbarkeitsgrenze. Jetzt 4,03:1. */ --t4: #D0D0D0; /* Neutral-Grau — Disabled */ --acc: #3b82f6; --acc-soft: rgba(59,130,246,0.10); /* Header-Tint — Parqet-Treppe: Header sitzt zwischen Card-Weiß und Page-BG. Auf warmer Sand-Page (#F4F1EC) braucht der Header-Tint mehr Stärke, damit die 3-Stufen-Treppe Card→Header→Page sichtbar bleibt. */ --card-hdr-tint: rgba(0,0,0,0.04); /* neutral (kein Slate-Tint) */ --pos: #15803D; /* Forest Green — einheitlich für alle Trend-Anzeigen */ --neg: #b91c1c; /* Red-700 — einheitlich, heller als Burgundy */ --pos-bg: rgba(21, 128, 61, 0.12); /* Pille-Tint pos */ --neg-bg: rgba(185, 28, 28, 0.12); /* Pille-Tint neg */ /* ── DMK-Card v2 — Light-Overrides ── */ --dmkc-dcf:#0E7490; --dmkc-grw:#4F46E5; --dmkc-ev:#B45309; --mark-year: #7C3AED; /* Qualitaet: im Hellen leiser getoent (Register 13.9). */ --ql-p-cell: 20%; --ql-p-cell-r: 18%; --ql-p-band: 13%; --ql-p-band-r: 11%; --dmkv-z-grn:#20b765; --dmkv-z-grn-soft:rgba(32,183,101,.20); --dmkv-z-gld:#e3a70d; --dmkv-z-red:rgba(194,52,52,.20); --dmkv-z-red-strong:#cf4040; --dmkv-fair-l:rgba(31,41,55,.10); --dmkv-fair-r:rgba(31,41,55,.84); --dmkv-cap-cur:#d4a017; --dmkv-brk:rgba(31,41,55,.20); --dmkv-mid:#c98a0a; --dmkp-mix:#2563eb; --topbar-bdr: rgba(30,41,59,0.06); --wall-text-main: #0f172a; --wall-text-muted: #64748b; /* Semantische Farben — unverändert (Modell-Datenfarben) */ --green: #1a8a4a; --green-bg: rgba(26,138,74,0.09); --blue: #2563eb; --blue-bg: rgba(37,99,235,0.09); --amber: #8F6410; --amber-bg: rgba(176,125,16,0.14); /* War #b07d10: 3,51:1 auf der Karte, 3,0:1 auf der eigenen Toenung — die schwaechste Stelle der App (TTM-Badge). Jetzt 5,08:1 bzw. 4,34:1. */ --red: #c42b2b; --red-bg: rgba(196,43,43,0.09); /* Schatten — kühl statt warm (Stone-Werte raus) */ /* Schatten — Parqet-Stil: klarer 1px Border, kein Drop-Shadow. Border ist Hauptelement der Box-Trennung, nicht Beilage. */ --sh-float: 0 0 0 1px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.10); /* neutraler Schatten */ /* Zeichen im Chart mit Bedeutung (Register 2.4, gedaempft 25.09.2026): Punkte, Saeulen, Linien in Gruen/Rot und die Dividenden-Zustaende — dieselbe Daempfung wie die Kennzahlfarben. Pillen, Pfeile und Text behalten --pos/--neg (die Bedeutung soll dort hervorstechen). */ --pos-mark: #367c49; --neg-mark: #a93932; --dvd: #4f8bcb; --dvd-ann: #807ccb; --dvd-special: #c56280; /* Kennzahlfarben (Register 2.8, gedaempft seit 25.09.2026) — hell. Ein Farbton je Rolle, drei Stufen (mid/pale/deep), gleiche Buntheit. Eindeutig je Abschnitt (G&V, Bilanz, Cashflow) und Firmentyp. */ --m-revenue: #a26f14; --m-revps: #624001; --m-cogs: #b95954; --m-gm: #398e51; --m-ebit: #1a8a95; --m-da: #767b82; --m-ebitda: #698728; --m-pretax: #8667b9; --m-otherincome: #d99a77; --m-tax: #b05885; --m-netincome: #5078c4; --m-eps: #2c4678; --m-epsbasic: #70b4dc; --m-totaldebt: #b95954; --m-debtst: #70312e; --m-debtlt: #cca369; --m-debtlease: #5dbbc6; --m-liquid: #168d7d; --m-cash: #398e51; --m-stinv: #698728; --m-netdebt: #b05885; --m-ltsec: #1984b5; --m-bookvalue: #8667b9; --m-bvps: #4f3b71; --m-shares: #767b82; --m-shend: #005449; --m-shstart: #8cabe4; --m-buybacks: #b4612d; --m-fcf: #398e51; --m-ocf: #5078c4; --m-capex: #b95954; --m-fcfps: #1b552c; --m-sbc: #b05885; --m-cfinvesting: #8667b9; --m-cffinancing: #1a8a95; --m-cashchange: #767b82; --m-nii: #1a8a95; --m-noninterestincome: #698728; --m-intinc: #005449; --m-intexp: #d99a77; --m-opexpense: #b95954; --m-prov: #70312e; --m-totalassets: #1984b5; --m-totalliab: #de958e; --m-ffo: #8667b9; --m-ffops: #6b314e; --m-reitport: #168d7d; --m-oe: #57b3ca; --m-div: #3c916e; --m-pb: #a591e7; --m-pffo: #57b3ca; --m-pe: #8869dd; --m-peg: #a591e7; --m-evebitda: #cb7f3f; color-scheme: light; } /* ─── 3. DARK THEME ─────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #000000; /* Dark Page-BG (deep) */ --bg-alt: #0A0908; /* Sub-Bereich — warm angehaucht über OLED-Schwarz (Variante A) */ --hover-bg: rgba(255,255,255,0.05); /* Hover-Highlight: subtler weißer Wash */ --hover-row: #181716; /* DECKENDE Zeilen-Hover-Farbe (dmtbl) — dezent, nur knapp heller als card */ --btn-hover-bg: rgba(255,255,255,0.06); /* Button/Item-Hover (Dropdowns, Cards, Buttons) — subtler */ --btn-hover-bg-accent: rgba(255,255,255,0.10); /* Step-Buttons mit klarer Aktion — etwas stärker */ --card: #121110; /* Ob.1 Cards — warm angehaucht, kräftig genug ohne Rahmen (Variante A) */ --surf-2: #1E1C1A; /* Tooltip/Popover/Dock — warm, über card (Variante A) */ --dmtbl-edge: #000000; /* Ob.3 staerkste */ --card-shadow: 0 0 0 1px var(--bdr), 0 1px 3px rgba(0,0,0,0.35); /* Dark/Ocean: dezenter Hairline-Ring (var(--bdr) loest pro Theme auf) + subtile Lage */ --popup-shadow: 0 8px 24px rgba(0,0,0,0.55); /* Dropdowns/Popups Dark */ /* Dark: KEIN border, nur ein sehr dezenter heller Ring bei 6 %. Genau das traegt das Chart-Fenster heute ueber die .dcf-card-Regel — und genau deshalb sieht es sauber aus, waehrend ein border mit --bdr (10 %) als harte graue Linie erscheint. Der Ring ersetzt hier die Schlagschatten- Lage; auf schwarzem Grund traegt sie nichts bei. */ --popup-edge: 0 0 0 1px rgba(255,255,255,0.06); --bdr: rgba(255,250,240,0.10); --bdr-elev: rgba(255,250,240,0.04); /* Rand für Elemente AUF --surf-2 — dezent (Variante B), Karte behält --bdr 0.10 */ --dmtbl-line: #1A1817; /* Tabellen-Gitterlinien: DECKEND + warm abgestimmt (naeher an card) */ --bdr-soft: rgba(255,250,240,0.05); --btn-black: #0f172a; /* Dark: bleibt Banner-Schwarz (passt zum dunklen Theme) */ --t1: #f1f1f1; --t2: #aaaaaa; --t3: #717171; --t4: #3a3a3a; --acc: #60a5fa; --acc-soft: rgba(96,165,250,0.12); /* Header-Tint — leichte weiße Tönung gegen dunkle Card */ --card-hdr-tint: rgba(255,255,255,0.035); --pos: #34d399; --neg: #f87171; --pos-bg: rgba(52, 211, 153, 0.15); --neg-bg: rgba(248, 113, 113, 0.15); --topbar-bdr: rgba(255,255,255,0.10); /* ── Sidebar Dark: same navy as cards + topbar (unified surface layer) ── */ --wall-text-main: #f1f5f9; --wall-text-muted: #94a3b8; --green: #34d673; --green-bg: rgba(52,214,115,0.09); --blue: #60a5fa; --blue-bg: rgba(96,165,250,0.09); --amber: #f5b731; --amber-bg: rgba(245,183,49,0.16); /* Dark: dezentes Gold wie .dmtbl-badge + pos/neg-Pillen (sichtbar seit Kommentar-Fix) */ --red: #f06060; --red-bg: rgba(240,96,96,0.09); /* Dark: keine Schatten — Tiefe kommt durch Borders + Farbstufen (ex-Variant gemergt). */ --sh-float: 0 8px 32px rgba(0,0,0,0.50); /* Zeichen im Chart mit Bedeutung (Register 2.4, gedaempft 25.09.2026): Punkte, Saeulen, Linien in Gruen/Rot und die Dividenden-Zustaende — dieselbe Daempfung wie die Kennzahlfarben. Pillen, Pfeile und Text behalten --pos/--neg (die Bedeutung soll dort hervorstechen). */ --pos-mark: #54bf92; --neg-mark: #da7371; --dvd: #4480bf; --dvd-ann: #7672bf; --dvd-special: #ba5876; /* Kennzahlfarben (Register 2.8, gedaempft seit 25.09.2026) — dunkel und Ocean. Ein Farbton je Rolle, drei Stufen (mid/pale/deep), gleiche Buntheit. Eindeutig je Abschnitt (G&V, Bilanz, Cashflow) und Firmentyp. */ --m-revenue: #cf9a4a; --m-revps: #f1d2a8; --m-cogs: #e48780; --m-gm: #6cb97e; --m-ebit: #29b9c7; --m-da: #a0a5ac; --m-ebitda: #94b15e; --m-pretax: #b094e2; --m-otherincome: #ae653a; --m-tax: #db86af; --m-netincome: #7da4ed; --m-eps: #c4d8fe; --m-epsbasic: #2584b2; --m-totaldebt: #e48780; --m-debtst: #fdc9c4; --m-debtlt: #a07020; --m-debtlease: #148a95; --m-liquid: #3abca7; --m-cash: #6cb97e; --m-stinv: #94b15e; --m-netdebt: #db86af; --m-ltsec: #52b0e2; --m-bookvalue: #b094e2; --m-bvps: #decefd; --m-shares: #a0a5ac; --m-shend: #a9e6d9; --m-shstart: #5679bb; --m-buybacks: #de8e60; --m-fcf: #6cb97e; --m-ocf: #7da4ed; --m-capex: #e48780; --m-fcfps: #bae4c1; --m-sbc: #db86af; --m-cfinvesting: #b094e2; --m-cffinancing: #29b9c7; --m-cashchange: #a0a5ac; --m-nii: #29b9c7; --m-noninterestincome: #94b15e; --m-intinc: #a9e6d9; --m-intexp: #ae653a; --m-opexpense: #e48780; --m-prov: #fdc9c4; --m-totalassets: #52b0e2; --m-totalliab: #b25e59; --m-ffo: #b094e2; --m-ffops: #fac7dd; --m-reitport: #3abca7; --m-oe: #4aa6bd; --m-div: #318765; --m-pb: #9985da; --m-pffo: #4aa6bd; --m-pe: #7e5fd2; --m-peg: #9985da; --m-evebitda: #bf7433; color-scheme: dark; } /* ─── 3b. OCEAN MODE — Deep Ocean ──────────────────────────────────── */ :root[data-variant="blue"] { --bg: #020305; /* Ocean Seite (navy). War #030812 und lag auf DERSELBEN Helligkeit wie bg-alt (2,1 gegen 2,1) — die Karte hob sich um 1,1 Punkte ab, deshalb wirkte Ocean flach. */ --bg-alt: #060C16; /* Header-Streifen — 2,5 Punkte ueber dem Grund */ --hover-bg: rgba(255,255,255,0.05); /* Hover-Highlight: subtler weißer Wash */ --hover-row: #0C182B; /* DECKENDE Zeilen-Hover-Farbe (dmtbl) — zwischen Karte und Tooltip */ --btn-hover-bg: rgba(255,255,255,0.06); /* Button/Item-Hover (Dropdowns, Cards, Buttons) — subtler */ --btn-hover-bg-accent: rgba(255,255,255,0.10); /* Step-Buttons mit klarer Aktion — etwas stärker */ --card: #0A1321; /* Ob.1 Cards — 2,6 Punkte ueber bg-alt, damit die Karte auf der Seite liegt statt darin zu schwimmen */ --surf-2: #0F1D34; /* Tooltip/Popover/Dock — hoechste Flaeche, 2,5 Punkte ueber hover-row */ --dmtbl-edge: #020305; /* Ob.3 staerkste — liegt auf dem Seitengrund (Register 2.5) */ /* Linien (seit 23.09.2026): durchscheinendes, kuehles Weiss — dieselbe Technik und Stufung wie Dunkel (warmes Weiss 0,10 / 0,05 / 0,04). Gemessen als Helligkeitsabstand zur Karte (ΔL): bdr 10,6 · soft 5,3 · elev 4,0 auf surf-2. Vorher feste Farben: bdr 3,1 (kaum sichtbar), soft 10,2 (kraeftiger als bdr — Hierarchie gekippt), elev 0,9. */ --bdr: rgba(225,240,255,0.10); --bdr-elev: rgba(225,240,255,0.04); /* Rand fuer Elemente AUF --surf-2 */ --dmtbl-line: #181F26; /* Tabellen-Gitterlinien: DECKEND, Blau-Anteil = Flächen (Bias +15) → kein bläuliches Hervorstechen */ --bdr-soft: rgba(225,240,255,0.05); --t1: #E0F4F9; --t2: #89B0C2; --t3: #4A7A92; --t4: #2A4E62; --acc: #60a5fa; --acc-soft: rgba(96,165,250,0.10); /* Bedien-Tinte Ocean (Register 4.0a): Akzentblau statt fast-weissem --t1, damit gewaehlte Flaechen, Rahmen und neutrale Pillen blau statt grau wirken. Anteile x1,5 — gerechnet auf GLEICHE Helligkeit wie vorher (L* auf --card: 12,2 / 14,3 / 16,5 / 18,5 / 22,6, auf --bg-alt und --bg ebenso deckungsgleich), Buntheit dabei etwa verdoppelt. */ --ctl-ink: var(--acc); --ctl-p-sel-hover: 9%; --ctl-p-act-hover: 12%; --ctl-p-neutral: 15%; --ctl-p-sel-on: 18%; /* Rahmen aber NEUTRAL (22.09.2026): ein kraeftig blauer Ring faerbte fuer das Auge das Innere des Knopfs mit — gemessen war es exakt die Karte. Rahmen aus --t1 wie in Hell/Dunkel, 16 % = dieselbe Helligkeit wie vorher (L* 22,6 auf der Karte). Flaechen bleiben blau. */ --ctl-bdr-ink: var(--t1); --ctl-p-act-bdr: 16%; /* Header-Tint — leichte weiße Tönung gegen Deep-Ocean-Card */ --card-hdr-tint: rgba(255,255,255,0.025); --pos: #34d399; --neg: #f87171; --pos-bg: rgba(52, 211, 153, 0.15); --neg-bg: rgba(248, 113, 113, 0.15); --amber: #f5b731; --amber-bg: rgba(245,183,49,0.28); --topbar-bdr: #0E1A26; /* Sekundärer Accent für weniger wichtige Highlights */ --acc2: #3b82f6; --sh-float: 0 8px 32px rgba(0,0,0,0.50); color-scheme: dark; }