/* ========================================================================== eBesucher Design-Tokens — einzige Quelle der Wahrheit ========================================================================== Diese Datei ist das System. Der Styleguide unter doc/reports/ wird aus ihr erzeugt, nicht umgekehrt — deshalb gibt es keinen Weg, auf dem die beiden auseinanderlaufen koennen. Herkunft der Werte: Ist-Audit ueber 386 oeffentliche Dateien vom 2026-09-04 (doc/reports/design-system-audit-2026-09-04.md). Es ist KEIN Wert erfunden — jeder stand vorher schon im Code. Ausgewaehlt wurden sie visuell ueber doc/previews/design-system.html. Jeder Token traegt, woher er kommt: [gewaehlt] — in der Preview ausdruecklich angehakt [impliziert] — folgt zwingend aus einer angehakten Komponente; die Komponente steht dahinter. Diese Tokens duerfen gestrichen werden, wenn die Komponente entfaellt. [geruest] — Infrastruktur ohne eigene Gestaltungsentscheidung REGEL: In Seiten-CSS, Twig-Templates und Komponenten stehen keine rohen Hex-Werte, Radien oder Schatten mehr. Immer var(--eb-…). Neue Werte kommen hierher, nicht in die Seite. `task design-check` prueft das. Achtung, Namensraum: base/styles.html.twig definiert ein aelteres `--eb-primary: #7e9fb5` (Altlast, abgewaehlt). Das ist NICHT `--eb-color-primary`. Nicht verwechseln, nicht zusammenlegen. ========================================================================== */ :root { /* ---------------------------------------------------------------- Primaer */ --eb-color-primary: #1677ff; /* [gewaehlt] 450x Buttons, Links, aktive Zustaende */ --eb-color-primary-hover: #0958d9; /* [gewaehlt] 92x Hover auf Primaer */ --eb-color-primary-active: #4096ff; /* [impliziert] Button gedrueckt */ --eb-color-primary-border: #91caff; /* [impliziert] Hinweis blau, Badge blau */ --eb-color-primary-bg: #e6f4ff; /* [impliziert] Hinweis blau, Badge blau */ --eb-color-primary-bg-subtle: #f0f7ff; /* [impliziert] Zeilen-Hover in Tabellen */ /* ----------------------------------------------------------- Navigation */ --eb-color-nav-bg: #1a1a2e; /* [gewaehlt] 116x Kopfleiste dunkel */ --eb-color-navy: #002e6d; /* [gewaehlt] 333x vor allem Mail-Templates */ /* ----------------------------------------------------------------- Text */ --eb-color-text: #1a1a1a; /* [gewaehlt] Entscheidung A gegen #000 */ --eb-color-text-secondary: #333333; /* [gewaehlt] 107x Fliesstext */ --eb-color-text-muted: #666666; /* [impliziert] Lead-Absatz, Tabellenkopf */ --eb-color-text-subtle: #888888; /* [impliziert] Kleintext, Meta-Angaben */ --eb-color-text-on-dark: #ffffff; /* [impliziert] Text auf --eb-color-nav-bg */ /* ------------------------------------------------------------- Flaechen */ --eb-color-bg: #ffffff; /* [gewaehlt] 459x Grundflaeche */ --eb-color-bg-subtle: #fbfcfd; /* [gewaehlt] Tabellenkopf, sehr helle Flaechen */ --eb-color-bg-muted: #f5f5f5; /* [gewaehlt] Sektionshintergrund */ /* --------------------------------------------------------------- Rahmen Die drei Werte kommen aus der Referenztabelle /werbung/verwalten/seiten und wurden dort bewusst gegen die neutraleren Ant-Toene bevorzugt: kuehler und eine Spur heller, dadurch tritt das Raster hinter die Daten zurueck. Sie gelten jetzt fuer alle Seiten, nicht nur fuer die Tabelle. */ --eb-color-border: #eaecf0; /* [gewaehlt] Rahmen von Karten und Tabellen */ --eb-color-border-light: #f2f4f7; /* [gewaehlt] Zeilentrenner, zarte Linien */ --eb-color-border-strong: #d9d9d9; /* [impliziert] Formularrahmen, neutraler Statuspunkt */ /* --------------------------------------------------------------- Erfolg */ --eb-color-success: #52c41a; /* [gewaehlt] 87x */ --eb-color-success-hover: #389e0d; /* [impliziert] Schrift in Badge gruen */ --eb-color-success-bg: #f6ffed; /* [impliziert] Hinweis gruen, Badge gruen */ --eb-color-success-border: #b7eb8f; /* [impliziert] Hinweis gruen, Badge gruen */ /* ---------------------------------------------------------------- Fehler */ --eb-color-error: #ff4d4f; /* [gewaehlt] 38x */ --eb-color-error-hover: #cf1322; /* [impliziert] Fehlermeldung, Loeschen bei Hover */ --eb-color-error-bg: #fff2f0; /* [impliziert] Hinweis rot, Badge rot */ --eb-color-error-border: #ffccc7; /* [impliziert] Hinweis rot, Badge rot */ /* -------------------------------------------------------------- Warnung */ --eb-color-warning: #faad14; /* [gewaehlt] 22x */ --eb-color-warning-bg: #fffbe6; /* [impliziert] Hinweis gelb */ --eb-color-warning-border: #ffe58f; /* [impliziert] Hinweis gelb */ /* --------------------------------------------------------------- Akzent */ --eb-color-purple: #722ed1; /* [gewaehlt] 53x Icons, Akzente */ /* ------------------------------------------------- Aus der Referenzseite /werbung/besucher-kaufen ist die Referenz fuer die gesamte Elementsammlung. Diese beiden Werte stammen von dort und haben keine Entsprechung im uebrigen Satz — sie sind kuehl getoent, nicht neutral, und liegen zwischen den Grau- und den Blautoenen. Statt sie in der Komponente versanden zu lassen, stehen sie hier. */ --eb-color-bg-tint: #f0f4f8; /* [referenz] Chip-Flaeche */ --eb-color-rail: #dbe6f8; /* [referenz] Schiene und Ring am Meilenstein-Punkt */ /* ------------------------------------------------------- Dunkle Flaechen Kommt von den Laenderseiten /werbung/buchen-in-*, wo die Laenderspalte zwei Abstufungen plus Linie und gedaempfte Schrift braucht. War mehrere Runden als offene Luecke vermerkt: --eb-color-nav-bg ist die einzige dunkle Flaeche im Satz, aber deutlich dunkler und violettstichig. Die Werte hier stammen aus dem Bestand, nicht aus einer Palette - sie sind kuehl und neutral und passen zur Rahmen-Skala. */ --eb-color-dark: #374151; /* [referenz] dunkle Flaeche */ --eb-color-dark-strong: #2d3748; /* [referenz] dunkler abgesetzt, z.B. Kopfleiste darin */ --eb-color-dark-border: #4b5563; /* [referenz] Trennlinie auf dunkel */ --eb-color-dark-muted: #9ca3af; /* [referenz] gedaempfte Schrift auf dunkel */ /* --------------------------------------------------------------- Schrift */ --eb-font-sans: "Oxygen", "Helvetica Neue", Arial, sans-serif; /* [gewaehlt] ersetzt 8 Schreibweisen */ --eb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* [geruest] */ /* ---------------------------------------------------------- Schriftgroessen Eine Leiter statt frei gewaehlter rem-Werte. Abgeleitet aus dem, was components.css und die umgestellten Seiten tatsaechlich brauchen — es ist keine Stufe erfunden, und es gibt bewusst keine Zwischenstufen: sobald eine Seite "nur mal eben 1.05rem" setzen darf, faengt die Uneinheitlich- keit von vorne an. Fehlt eine Stufe, kommt sie hierher, nicht in die Seite. MASSSTAB IST /werbung/besucher-kaufen. Deren Textoptik gilt als Referenz fuer die ganze Seite, und die Leiter ist darauf ausgerichtet: Fliesstext 1.1rem/1.5 (--eb-text-lg + --eb-leading-normal), H2 24px/1.3 (--eb-text-2xl + --eb-leading-snug). Vorher standen hier 1.15rem und 1.6rem — daneben, aber nah genug, dass es im Nebeneinander als "irgendwie anders" auffiel. */ --eb-text-2xs: 0.78rem; /* Badges, Statuszeilen (12.5px) */ --eb-text-xs: 0.85rem; /* Kleintext, Labels, Meta (13.6px) */ --eb-text-sm: 0.95rem; /* Buttons, Formularfelder (15.2px) */ --eb-text-base: 1rem; /* Fliesstext (16px) */ --eb-text-lg: 1.1rem; /* Fliesstext-Lesegroesse, Lead (17.6px) */ --eb-text-xl: 1.25rem; /* H3 (20px) */ --eb-text-2xl: 1.5rem; /* H2 (24px) */ --eb-text-3xl: 2.2rem; /* H1 (35.2px) */ --eb-text-hero: clamp(2rem, 5vw, 3rem); /* Hero-Titel, skaliert mit */ /* Abschnittsueberschrift. Eigene Stufe neben --eb-text-2xl (24px): 2xl ist die Zwischenueberschrift IM Text, section die Ueberschrift eines ganzen Abschnitts. 2026-09-04 von clamp(1.8rem, 4vw, 2.5rem) auf 1.5–1.75rem gesenkt. Die alte Formel lief bis 40px, und der 4vw-Anteil erreichte diesen Deckel schon ab rund 1000px Fensterbreite — die Stufe war praktisch immer 40px und stand damit fast auf der Hoehe der H1 (--eb-text-hero, bis 48px). 1.75rem (28px) ist der Wert aus dem Entwurf doc/previews/werbung-buchen-redesign.html (.close h2). Die Untergrenze ist 1.5rem, damit die Stufe auf schmalen Schirmen nicht unter die Zwischenueberschrift faellt. */ --eb-text-section: clamp(1.5rem, 2.5vw, 1.75rem); /* Die Referenztabelle /werbung/verwalten/seiten misst in px und bleibt ausdruecklich unveraendert — ihre beiden Groessen stehen deshalb als eigene Tokens hier, statt auf die rem-Leiter gerundet zu werden. */ --eb-text-table: 15px; --eb-text-table-head: 13.5px; /* ------------------------------------------------------------- Zeilenhoehen Vier Stufen. Ueberschriften eng, Fliesstext luftig, Bedienelemente dazwischen — mehr Abstufungen braucht keine Seite. */ --eb-leading-none: 1; /* Zahlenanzeigen, wo die Ziffer die Zeile IST */ --eb-leading-tight: 1.2; /* H1, grosse Zahlen */ --eb-leading-snug: 1.3; /* H2, H3 */ --eb-leading-normal: 1.5; /* Bedienelemente, Tabellen */ --eb-leading-relaxed: 1.6; /* Fliesstext, Lead */ /* ---------------------------------------------------------------- Radius Vier Stufen. Die Zwischenwerte 6px, 10px und 20px aus dem Bestand runden auf die naechste Stufe (Entscheidung C: wegrunden). */ --eb-radius-md: 8px; /* [gewaehlt] Formularfelder, Hinweise */ --eb-radius-lg: 12px; /* [gewaehlt] Karten, Tabellenrahmen */ --eb-radius-pill: 50px; /* [gewaehlt] Buttons, Badges */ --eb-radius-circle: 50%; /* [gewaehlt] Statuspunkte, Avatare */ /* -------------------------------------------------------------- Schatten Bewusst nur einer. Das System ist flach: abgegrenzt wird ueber Rahmen, nicht ueber Schatten (siehe Karten-Auswahl). Der Fokus-Ring ist die Ausnahme und keine Dekoration — ohne ihn haben Tastaturnutzer keine sichtbare Markierung, was WCAG 2.4.7 verletzt. */ --eb-shadow-focus: 0 0 0 3px rgba(22, 119, 255, 0.1); /* [gewaehlt] */ /* ------------------------------------------------------------- Abstaende Vielfache von 4px (0.25rem). Jeder Abstand auf einer Seite — Innenabstand, Luecke im Raster, Abstand zwischen Abschnitten — kommt aus dieser Leiter. Das ist der Grund, warum Seiten heute unterschiedlich "atmen": 1rem hier, 18px da, 2em dort. Krumme Werte gibt es nicht mehr. */ --eb-space-xs: 0.25rem; /* 4px */ --eb-space-sm: 0.5rem; /* 8px */ --eb-space-md: 1rem; /* 16px */ --eb-space-lg: 1.5rem; /* 24px */ --eb-space-xl: 2rem; /* 32px */ --eb-space-2xl: 3rem; /* 48px */ --eb-space-3xl: 4rem; /* 64px — Abstand zwischen Seitenabschnitten */ /* --------------------------------------------------- Vertikaler Rhythmus Die Abstaende ZWISCHEN Bloecken einer Seite. Gemessen an der Referenz /werbung/besucher-kaufen: 12 / 18 / 24 / 36 / 50 / 100. Das ist bewusst NICHT die 4px-Leiter oben — die Referenz laeuft in 6er-Schritten und endet auf runden 50/100, und die Referenz gewinnt. Zwei Leitern, zwei Aufgaben, damit keine dritte entsteht: --eb-space-* Innenleben von Komponenten (Polster, Luecken im Knopf) --eb-rhythm-* Abstaende zwischen Bloecken und Abschnitten einer Seite Wer eine Seite baut, greift zu --eb-rhythm-*. */ --eb-rhythm-xs: 12px; /* Ueberschrift zu ihrem Absatz */ --eb-rhythm-sm: 18px; /* zwischen Karten einer Liste */ --eb-rhythm-md: 24px; /* Block zu Block */ --eb-rhythm-lg: 36px; /* zwischen Textbloecken */ --eb-rhythm-xl: 50px; /* zwischen Abschnitten */ --eb-rhythm-2xl: 100px; /* vor und nach herausgehobenen Elementen */ /* ---------------------------------------------------------------- Layout EINE Seitenbreite, EINE Lesebreite — pro Seite ist nichts zu entscheiden. Vorher standen hier zwei Seitenbreiten zur Auswahl (835 fuer Textseiten, 1156 fuer Uebersichten). Das war die Einladung, es pro Seite anders zu machen, und genau so kam es: /werbung/buchen lief auf 835, /werbung/besucher-kaufen auf 1156, und beides fuehlte sich richtig an, weil beide Seiten unterschiedlichen Inhalt tragen. Die Aufloesung ist nicht "eine von beiden gewinnt", sondern: die Seite ist immer 1156 breit, und Fliesstext faellt darin immer auf 835 zurueck (.eb-measure in components.css). Raster, Karten und Tabellen nutzen die volle Breite, Text nie. */ --eb-page: 835px; /* DIE REGEL. Jede Seite, solange nichts dagegen spricht. */ --eb-page-wide: 1156px; /* DIE AUSNAHME. Begruendungspflichtig, siehe unten. */ /* Wann --eb-page-wide statt --eb-page? Nur wenn der HAUPTINHALT der Seite die Breite braucht, nicht der Text: ein Bestellformular, eine Datentabelle mit vielen Spalten, ein Dashboard. Fliesstext braucht sie nie — er liest sich bei 835px besser. Heute berechtigt: /werbung/besucher-kaufen Bestellformular plus Gruende-Karten / (Startseite) Hero, Raster, Zugriffsprotokoll /werbung/verwalten/seiten Kampagnentabelle mit acht Spalten /geld-verdienen/* Raster-Seiten ohne langen Fliesstext Am 2026-09-04 wieder gestrichen: /werbung/buchen-in-*. Die neun Laenderseiten standen hier kurz als Ausnahme, laufen aber jetzt auf --eb-page, damit sie so breit sind wie /werbung/buchen. Kennzahlentafel (300 statt 400px) und Laenderkacheln (drei statt vier Spalten) sind darauf angepasst. Wer eine weitere Seite breit macht, traegt sie hier ein und schreibt den Grund dazu. Ohne Eintrag gilt die Regel. Genau daran ist es vorher gescheitert: fuenf Templates setzten sich ihr --content-max selbst, damit war die Ausnahme keine Ausnahme mehr, sondern eine Wahl. Der Unterschied ist nicht Geschmack. Bei --eb-page steht die ganze Seite auf EINER linken Kante. Sobald Text schmaler laeuft als die Raster daneben, gibt es zwei Kanten, und das liest das Auge als Unruhe. */ /* Abgekuendigt: solange Text und Seite gleich breit sind, braucht es keine eigene Lesebreite mehr. Zeigt auf --eb-page, damit nichts bricht. */ --eb-measure: var(--eb-page); /* Alte Namen. Nur noch da, damit bestehendes Markup nicht bricht — beim naechsten Anfassen einer Datei durch die neuen ersetzen. */ --eb-container: var(--eb-measure); --eb-container-wide: var(--eb-page); /* ------------------------------------------------------------ Uebergaenge */ --eb-transition-fast: 0.2s ease; /* [geruest] */ --eb-transition-normal: 0.3s ease; /* [geruest] */ }