/* ============================================================================ MARKEN-SKIN "EIKONA" — Token-Ueberschreibung fuer alle Seiten ---------------------------------------------------------------------------- Gebunden an data-marke="eikona" auf . Dieses Attribut steht seit der Entscheidung, den Skin fest zu verdrahten, STATISCH im Markup jeder Seite (kein Umschalter mehr, keine Laufzeit-Logik, kein localStorage) — Eikona ist damit der einzige, permanente Skin. Die Selektoren hier bleiben unveraendert korrekt, weil das Attribut jetzt einfach immer gesetzt ist. Ebenso ist data-theme="light" fest im Markup gesetzt (kein Hell/Dunkel- Umschalter mehr) — die Dark-Mode-Bloecke unten greifen dadurch nie, sind aber unschaedlich stehen gelassen (kein zusaetzlicher Pflegeaufwand, keine Wirkung). Herkunft der Werte (diese Fassung): das produktive Theme-CSS von eikona-media.de — belegte, echte CI-Werte, NICHT mehr von der connect-App abgeleitet (fruehere Fassung dieser Datei). Uebernommen werden NUR Werte fuer TOKENS, die es in app.css bereits gibt — es wird kein neuer Token-Name eingefuehrt, mit einer Ausnahme: --font existiert jetzt auch in app.css (dort mit der Systemschrift als Default), dieser Skin ueberschreibt ihn auf Poppins. ---- Farbskalen der Website ---- Primaer-Gruen (--color-brand): 50 #f8faf3 · 100 #f1f5e7 · 200 #dbe5c2 · 300 #c5d59e · 400 #9ab655 · 500 #6f970c · 600 #64880b · 700 #537109 · 800 #435b07 · 900 #364a06 Graustufen: 25 #f4f5f6 · 50 #eceff1 · 100 #cfd8dc · 200 #b0bec5 · 300 #90a4ae · 400 #78909c · 500 #607d8b · 600 #546e7a · 700 #455a64 · 800 #37474f · 900 #253238 Danger (Semantikfarbe der Website, ein einziger Wert, kein Hell/Dunkel-Paar vorgegeben): #e35169. success/warning/info (#00c833/#eab308/#06b6d4) sind NICHT uebernommen — --good/--warn gehoeren nicht zur Liste der explizit zu ueberschreibenden Tokens; Uebernahme waere ein eigener Eingriff ins Ampel-Schema und wird nicht ohne Rueckfrage gemacht (siehe Bericht). ---- Ableitung Graustufen -> Tokens (analog zur bisherigen Systematik) ---- Hell: --bg 25 · --panel #ffffff (Skala enthaelt kein reines Weiss) · --panel-2 50 · --border 100 · --muted 600 · --text 900 Dunkel: --bg 900 · --panel 800 · --panel-2 700 · --border 600 · --muted 300 · --text 25 Damit entspricht die Reihenfolge der Helligkeiten exakt dem Muster aus app.css (bg dunkelste/hellste Flaeche, panel und panel-2 gegenlaeufig dazu, border zwischen panel-2 und muted, muted zwischen border und text). ---- Ableitung Gruenskala -> Akzent-Tokens ---- --accent bleibt der hellere 500er-Ton (Flaechen/Raender, wie im Auftrag ausdruecklich erlaubt). --accent-text ist NICHT die 500er-Stufe: als reine Schriftfarbe auf Panel/Weiss erreicht #6f970c nur ~3.4:1 Kontrast, zu wenig fuer AA (4.5:1). Rechnerisch geprueft: 600 (#64880b) liegt bei ~4.1:1 (noch zu wenig), 700 (#537109) bei ~5.6:1 — deshalb 700 fuer --accent-text hell. Dunkel braucht die Gegenrichtung (heller statt dunkler als --accent): 300 (#c5d59e) auf dunklem Panel liegt bei >8:1. --accent-fg (Text AUF der gefuellten Akzentflaeche, z. B. button.primary, das Haekchen in .fd-val.on) ist Weiss (#ffffff) — wie im Claude-Skin (dort ist --accent-fg ebenfalls durchgehend Weiss). Auf Nutzerwunsch: Text auf dunklem/gesaettigtem Grund soll immer weiss sein, nicht dunkel eingefaerbt (Kontrast auf Stufe 500 ~3.4:1, auf Stufe 400 dunkel ~2.3:1 — fuer fette/grosse Beschriftungen wie Badges/Buttons ausreichend, siehe WCAG 1.4.11 fuer UI-Komponenten; eine fruehere, rechnerisch dunklere Fassung wurde verworfen, weil sie gegen dieses Hausmuster verstiess). --accent-bg (Tint-Flaeche) ist hell direkt Stufe 100 (#f1f5e7); dunkel gibt es in der Skala keine passende Tint-Flaeche fuer dunklen Grund, deshalb wie zuvor eine rgba-Abschwaechung des dunklen Akzenttons. ---- Sekundaerfarbe (Blau) ---- Die Website fuehrt eine zweite Akzentfarbe (Blauskala) fuer Verlaeufe. app.css hat AKTUELL keine Stelle, an der bereits eine zweite Akzentfarbe oder ein Kopfzeilen-Verlauf existiert (.app-header nutzt schlicht var(--panel)) — laut Auftrag wird Blau NUR dort eingesetzt, wo es das bereits gibt. Da es das nicht gibt, taucht die Blauskala hier bewusst NICHT auf; es wird keine neue Verlaufsregel erfunden. ============================================================================ */ /* ---- Poppins, selbst gehostet (siehe gemeinsam/fonts/) ---- Nur zwei Schnitte: 400 (Fliesstext) und 700 (Ueberschriften/Buttons). font-display: swap, damit der Text sofort in der Systemschrift erscheint und nicht auf den Ladevorgang wartet. Die Datei wird erst angefragt, wenn --font tatsaechlich Poppins referenziert (data-marke="eikona") — im Claude-Skin bleibt --font auf der Systemschrift. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-v20-latin-ext_latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-v20-latin-ext_latin-700.woff2') format('woff2'); } :root[data-marke="eikona"] { /* Schrift: theme-unabhaengig, deshalb nur einmal hier gesetzt. */ --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif; /* Flaechen */ --bg: #f4f5f6; --panel: #ffffff; --panel-2: #eceff1; /* Neutraltoene */ --text: #253238; --muted: #546e7a; --border: #cfd8dc; /* Akzent (Primaer-Gruen der Website) */ --accent: #6f970c; --accent-fg: #ffffff; --accent-bg: #f1f5e7; --accent-text: #537109; /* Gefahr/Rot (echter Website-Wert, ein einziger Ton fuer beide Modi) */ --bad: #e35169; } @media (prefers-color-scheme: dark) { :root[data-marke="eikona"]:not([data-theme="light"]) { --bg: #253238; --panel: #37474f; --panel-2: #455a64; --text: #f4f5f6; --muted: #90a4ae; --border: #546e7a; --accent: #9ab655; --accent-fg: #ffffff; --accent-bg: rgba(154, 182, 85, 0.17); --accent-text: #c5d59e; --bad: #e35169; } } :root[data-marke="eikona"][data-theme="dark"] { --bg: #253238; --panel: #37474f; --panel-2: #455a64; --text: #f4f5f6; --muted: #90a4ae; --border: #546e7a; --accent: #9ab655; --accent-fg: #ffffff; --accent-bg: rgba(154, 182, 85, 0.17); --accent-text: #c5d59e; --bad: #e35169; } /* ---- Echtes Bildlogo statt Wortmarke ---- Ersetzt die fruehere Text-Wortmarke "Eikona Media" (entfernt). Zwei -Elemente im Markup (.logo-eikona-hell / .logo-eikona-dunkel), CSS schaltet je nach Theme zwischen der gruenen und der weissen SVG-Fassung um — dasselbe Umschaltmuster wie app.css fuer Hell/Dunkel (System- UND manuelle Umschaltung ueber data-theme). Die weisse Fassung greift, weil --panel im Dunkel-Theme selbst dunkel ist (der Kopf ist dann keine helle Flaeche mehr) — nicht wegen eines Verlaufs, den gibt es hier nicht. */ :root[data-marke="eikona"] .brand img.logo { display: none; } .logo-eikona { display: none; height: 30px; width: auto; flex-shrink: 0; } :root[data-marke="eikona"] .logo-eikona-hell { display: inline-block; } @media (prefers-color-scheme: dark) { :root[data-marke="eikona"]:not([data-theme="light"]) .logo-eikona-hell { display: none; } :root[data-marke="eikona"]:not([data-theme="light"]) .logo-eikona-dunkel { display: inline-block; } } :root[data-marke="eikona"][data-theme="dark"] .logo-eikona-hell { display: none; } :root[data-marke="eikona"][data-theme="dark"] .logo-eikona-dunkel { display: inline-block; }