/* ══════════════════════════════════════════════════════════════════════════ QS-ONE INVESTORENHUB — DESIGN-TOKENS 15.09.2026 software-designer · Grundlage für Stufe 1 (Pitch) und Stufe 2 (Erklärung) Herkunft der Farben: WÖRTLICH aus dem bestehenden QS-One-Farbsystem übernommen (qs-one-lp-site/index.html, reinheitsbewegung-site/index.html), nicht neu erfunden — der Hub muss als QS-One erkennbar sein, nicht als eigenständiges viertes Dach. Navy #0B1F33 Vertrauen, Bühne Stufe 1, Fußzeile Tiefgrün #105A48 Plattform, Kapitelmarken, Flächen Frischgrün #B3FFB5 Nutzen, Signal, Stufe-1-Kennzeichnung Orange #FF7F32 einzige Aktionsfarbe — hier NUR Akzent (Leitsatz- Kante, aktive Phase), kein CTA-Knopf im Hub Hellorange #FFF3C1 Wärme, „Vorhaben"-Zustand, sekundäre Fläche Warmweiß #F7F9F6 Grundton, ruhiger Lesehintergrund Kontraste — bereits auf den Nachbarseiten nachgerechnet, hier nur angewendet, nicht neu behauptet: Navy auf Orange 6,62:1 (Weiß auf Orange fällt durch — nirgends verwenden) Navy auf Frischgrün 14,2:1 Weiß auf Tiefgrün 8,2:1 Navy auf Warmweiß/Weiß > 12:1 (Fließtext) --muted auf Warmweiß/Weiß bereits produktiv im Einsatz auf beiden Nachbarseiten für Fließtext ab 15,5px — hier unverändert übernommen. Schrift: 'Plus Jakarta Sans' (Auszeichnung) + 'Inter' (Text) — wie die Nachbarseiten. WICHTIG für die Integration: beide Schriften werden dort AUSSCHLIESSLICH selbst gehostet über fonts.css geladen, NIEMALS über ein Google-Fonts-CDN (Regel steht wörtlich im Kommentarkopf von reinheitsbewegung-site/index.html). tokens.css bindet deshalb keine Schrift-Datei ein — das macht der Entwickler beim Einbau, indem er fonts.css der Nachbarseiten verlinkt oder deren woff2-Dateien in den Hub-Ordner kopiert. Bis dahin fällt die Schrift-Stack-Deklaration unten ohne Fehler auf System-Sans zurück (system-ui/Segoe UI) — das Muster bleibt lesbar, auch ohne die Web-Fonts. ZWEI GESTEN, EIN SYSTEM (Florian, 15.09.): Stufe 1 = Pitch, bühnenhaft, große Sätze, viel Luft. Stufe 2 = Erklärung, ruhiges dichtes Lesedokument im „Kommentarsatz"-Stil mit Randziffern (Vorbild: FinPrep-Hub-Hülle — dort NUR Layout/Lesefluss übernommen, NICHT deren Navy/Messing-Farbwelt). Beide Gesten teilen sich exakt diese Tokens; die Dichte-Variablen `--kapitel-abstand`, `--mass-lese`, `--leitsatz-groesse` werden von den Klassen `.stufe1`/`.stufe2` in komponenten.css umgeschaltet — siehe dort. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Marke (wörtlich aus qs-one-lp-site / reinheitsbewegung-site) ── */ --navy:#0B1F33; --tiefgruen:#105A48; --frischgruen:#B3FFB5; --orange:#FF7F32; --hellorange:#FFF3C1; --warmweiss:#F7F9F6; /* ── Semantische Rollen ── */ --ink:#0B1F33; /* Fließtext, Überschriften */ --muted:#4A5A6A; /* gedämpfter Text, Klartext, Bildunterschriften — 7,08:1 auf Weiß */ --muted-stark:#3A4A58; /* dezent, aber sichtbarer: Randziffern — ~8,3:1 auf Weiß, AA sicher */ --line:rgba(11,31,51,.14); /* dünne Kontur, Standard */ --line-stark:rgba(11,31,51,.28);/* Tabellenkanten, Druck, stärkere Trennung */ --flaeche:#FFFFFF; /* Karten auf Warmweiß */ --flaeche-tief:var(--warmweiss);/* Grundton der Lesefläche */ --flaeche-dunkel:var(--navy); /* Bühne Stufe 1, Fußzeile */ /* ── Schrift ── Ohne @font-face hier (siehe Hinweis oben) — die Stacks degradieren kontrolliert auf Systemschrift, bis der Entwickler fonts.css einbindet. */ --font-anzeige:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono:ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace; /* ── Schriftgrößen-Skala (fluid, wie auf den Nachbarseiten) ── */ --f-micro:12.5px; /* Kicker, Randziffern, Fußnoten — 16.09. von 12px angehoben: eigene Untergrenze „nie unter 12,5px" (komponenten.css 3.9-Kommentar) galt bisher nicht für dieses Token selbst (.eyebrow/.stufenmarke/ .klartext .kicker liefen mit 12px darunter). */ --f-small:14px; /* Beschriftungen, Kontaktblock-Detail */ --f-body:17px; /* Fließtext Grundgröße — 16.09. abends geprüft: bereits auf 17px (Florians Untergrenze 16,5–17px Desktop, ≥16px Handy), flach über alle Breiten, siehe Kommentar am Body-Selektor weiter unten. */ --f-lead:clamp(18.5px,2.1vw,21px); /* Einleitungssatz eines Kapitels — 16.09. abends von clamp(17,…,20) angehoben: bei 17px Fließtext fiel die Untergrenze des Leads (17px) mit der Fließtext-Größe zusammen, der Lead war am unteren Ende nicht mehr als solcher erkennbar (nur noch über --muted-Farbe). +1,5px oben und unten haelt ihn bei jeder Breite sichtbar groesser als der Fliesstext. */ --f-h3:20px; /* 16.09. abends von 19 auf 20: bei 17px Fliesstext blieb sonst nur 2px Abstand zur Unterueberschrift (##). Betrifft nur echte `

` aus Markdown-„###“ im Kapiteltext, nicht den Kapiteltitel (der ist `

`, eigener Token --f-h2). */ --f-h2:clamp(25px,3.5vw,37px); --f-h1:clamp(32px,5vw,52px); --f-traum:clamp(34px,6.4vw,64px); /* Titelbereich Stufe 1 */ --f-zahl:clamp(30px,5vw,46px); /* Kennzahl-Kachel, Stufe 2 */ --f-nr-geist:clamp(44px,7vw,72px); /* Geisterziffer im Kapitelkopf */ /* ── Abstände (4er-Skala) ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; /* ── Radien / Formen — wörtlich aus dem Marken-System (20–28px, keine schweren Schatten) ── */ --r-card:24px; --r-btn:999px; --r-sm:12px; --r-table:16px; /* ── Schatten — bewusst sehr zurückhaltend, kein „SaaS-Baukasten"-Glow ── */ --schatten-karte:0 1px 2px rgba(11,31,51,.04), 0 10px 24px -16px rgba(11,31,51,.16); --schatten-keine:none; /* ── Breiten ── */ --breite-inhalt:1120px; /* äußerer Wrap, wie Nachbarseiten */ --breite-eng:880px; --breite-lesen:720px; /* Lesespalte Stufe 2 */ --breite-buehne:820px; /* Lesespalte Stufe 1 — etwas enger, mehr Wirkung */ --breite-daten:960px; /* Bühne für Kennzahlen/Tabelle/Töpfe/Phasen/Branchen — bewusst breiter als --mass-lese: diese Bauteile sind zum Überblicken da, nicht zum Lesen am Stück. Florian, 16.09.: „am Laptop viel Leere links/rechts" — dieser Token ist der Riegel dagegen. */ --breite-navleiste:252px; /* feste Seitenleistenbreite Stufe 2, ab 900px sichtbar — bewusst px, nicht %/vw: soll auf großen Monitoren (1920/2560) NICHT mitwachsen, sonst frisst sie der Bühne/dem Lesemaß Platz weg, den sie nicht braucht. */ --breite-frage-panel:380px; /* feste Breite des Frageassistent-Panels am Desktop */ /* ── Dichte-Variablen, Default = Stufe-2-Charakter. .stufe1 / .stufe2 überschreiben diese drei Werte, siehe komponenten.css ── */ --kapitel-abstand:96px; --mass-lese:66ch; --leitsatz-groesse:clamp(22px,3vw,32px); } /* ── Dunkler Modus (optional, NICHT der Vorgabe-Modus heute Abend) ── Sehr zurückhaltend: nur die Flächen kehren sich um, die Markenfarben bleiben. Für eine spätere abendliche Vorführung am Beamer vorbereitet, heute Abend nicht aktiv (kein Toggle gebaut — Entwickler-Entscheidung, ob/wo `data-theme="dunkel"` gesetzt wird). */ [data-theme="dunkel"]{ --ink:#EDF2F4; --muted:#9FB3C4; --line:rgba(255,255,255,.14); --line-stark:rgba(255,255,255,.28); --flaeche:#122135; --flaeche-tief:#0B1826; --flaeche-dunkel:#050B14; }