/* ============================================================================= RIC Redesign V2 — DESIGN TOKENS NORMATIVE QUELLE für alle Farben, Größen, Abstände und Schriftgrade. Diese Datei wird von zwei Seiten benutzt: 1. Website — page.includeCSS.dfki_ric_tokens, geladen VOR ric-redesign.css (Configuration/TypoScript/Redesign/setup.typoscript) 2. Mockups — public/_mockups/tokens.css ist ein SYMLINK hierher → eine typografische Abweichung zwischen Mockup und Code ist mechanisch ausgeschlossen. Kein @import in dieser Datei und kein @import auf sie — das wäre ein zusätzlicher, serieller Render-Block. Die Reihenfolge macht das TypoScript. Selektor bleibt `.redesign-v2` (= ), damit alles per Feature-Flag ein- und ausschaltbar bleibt und der V1-Fallback unberührt ist. Begründung, Messungen und Migrationsstand: typo3-ai/_plans/2026_Redesign_RIC-Webseite/ric-typografie.md ============================================================================= */ /* ============================================================================= TYPOGRAFIE — NORMATIVE TABELLE Bei Abweichung zwischen ric-typografie.md und dieser Datei gilt DIESE DATEI. ⚠️ `rem` rechnet gegen die ROOT-Größe (Browser-Grundschrift, Standard 16px), NICHT gegen die Body-Größe. Die früheren Token-Kommentare („≈14px bei 20px-Basis") waren durchgehend um 25 % falsch und haben systematisch zu kleine Schrift erzeugt. Die px-Spalte unten gilt bei Root = 16px; stellt der Nutzer die Grundschrift hoch, skaliert ALLES mit — das ist der Zweck. EBENE 1 — Primitive (nur die Rollen unten dürfen sie referenzieren) ┌────────────┬─────────────────────────────────────┬────────┬────────┐ │ Token │ Wert │ px @16 │ Faktor │ ├────────────┼─────────────────────────────────────┼────────┼────────┤ │ --fs-050 │ 0.75rem ⚠️ unter Regel 1 │ 12 │ — │ │ --fs-100 │ 0.8125rem │ 13 │ 1,08 │ │ --fs-200 │ 0.875rem │ 14 │ 1,08 │ │ --fs-300 │ 1rem = Basis, = rem-Wurzel │ 16 │ 1,14 │ │ --fs-475 │ 1.25rem │ 20 │ 1,25 │ │ --fs-500 │ 1.375rem NUR --fs-site-title │ 22 │ 1,10 │ │ --fs-600 │ 1.5rem │ 24 │ 1,09 │ │ --fs-700 │ 1.75rem │ 28 │ 1,17 │ │ --fs-800 │ clamp(1.625rem,1.05rem + 1.8vw,2rem) │ 26→32 │ fluid │ └────────────┴─────────────────────────────────────┴────────┴────────┘ ⚠️ PHASE 3.8 (28.08.2026) — DIE LEITER IST VON 11 AUF 9 STUFEN GEKÜRZT. Entfallen sind --fs-400 (17px) und --fs-450 (18px). Anlass war eine Messung am gerenderten Frontend (23 Seiten der Stichprobe, 10.778 Textelemente): der Median-Schritt der Leiter lag bei ×1,095, vier der zehn Schritte unter ×1,08. Ein Drittel aller Textelemente stand im 2px-Band 16/17/18, wo sechs Rollen übereinander lagen — der Leser sah dort keine Hierarchie, sondern Unruhe. Im INHALTSBEREICH gilt jetzt ein gleichmäßiger 4px-Takt: 16 · 20 · 24 · 28 · 32, kein Schritt unter ×1,17. ⚠️ --fs-500 (22px) IST ALS EINZIGE DER DREI VORGESEHENEN STREICHUNGEN GEBLIEBEN. Der Vorschlag sah --fs-site-title auf 20px vor; der Nutzer hat den Bestand am 28.08.2026 nach Ansicht der Änderung ausdrücklich beibehalten wollen („Die Schriftgröße oben … gefiel mir vorher besser"). Damit bleibt eine Sprosse stehen, deren Nachbarschritte eng sind (20 → 22 = ×1,10, 22 → 24 = ×1,09). Das ist vertretbar und KEIN Rückfall in das Muster, das 3.8 abstellt: Der Site-Titel steht im Seitenkopf, außerhalb der Gliederung des Inhalts. Er tritt nie neben eine h2 oder h3, sondern nur neben Logo und Navigationsleiste — die engen Schritte werden also nirgends gelesen. ⚠️ Daraus folgt eine Regel für später: --fs-500 ist für JEDE andere Komponente gesperrt. Wer 22px im Inhaltsbereich braucht, hat eine Rolle zu viel und nimmt --fs-475 (20px) oder --fs-600 (24px). Käme eine zweite Anwendung dazu, wäre der 16/17/18-Stau nur eine Etage höher nachgebaut. ⚠️ Die Lücke in der Nummerierung (300 → 475) ist BEWUSST stehen geblieben — ein Umbenennen wäre nur Unruhe in der Versionsgeschichte, ohne dass sich am Rendern etwas ändert. Die Primitive werden ohnehin nur in DIESER Datei referenziert; Komponenten sehen sie nie (Regel 4). ⚠️ Die unteren drei Stufen (12/13/14) bleiben eng und bleiben unverändert. Sie unterscheiden sich zusätzlich durch Farbe, Versalien und Stellung und stehen im Lesefluss nie direkt untereinander; jede hat unten ihre eigene Herleitung und einen Nutzerentscheid. --fs-800 skaliert fließend zwischen 505px und 926px Viewport-Breite. ⚠️ Phase 3.7 (Nutzerwunsch 08.08.2026): eine Stufe kleiner, 28→36px auf 26→32px. Der Hero war seit 3.6 der einzige Grad, der oben stehen geblieben war, während h1/h2 gesunken sind. ⚠️ ⚠️ NOCH IN DERSELBEN SITZUNG ÜBERHOLT: Die zweite Senkung der Leiter (h1 32 → 28, h2 26 → 24) kam NACH dieser Anpassung. Der Hero steht damit bewusst NICHT mehr auf denselben Eckwerten wie --fs-700/--fs-600, sondern 4px darüber: 26 → 32px gegen h1 = 28px. Das ist so belassen, weil der Nutzer den Hero kurz zuvor ausdrücklich auf diesen Wert eingestellt hat und die spätere Ansage („Überschriften überall kleiner") sich auf h1–h3 bezog. Ein Displaygrad DARF über der h1 liegen — genau das war er vor 3.6 auch schon (36px gegen h1 32px). Wer ihn wieder an die Leiter binden will, ändert genau diese eine Zeile auf clamp(1.5rem, 0.95rem + 1.7vw, 1.75rem) (= 24 → 28px, also h2 → h1). Rückweg zum alten großen Hero: clamp(1.75rem, 1.15rem + 1.9vw, 2.25rem). EBENE 2 — Rollen ►► KOMPONENTEN BENUTZEN AUSSCHLIESSLICH DIESE EBENE ◄◄ ┌──────────────────┬───────────┬────┬──────────────────────────────────────┐ │ Rolle │ Primitiv │ px │ Anwendung / Beispiele │ ├──────────────────┼───────────┼────┼──────────────────────────────────────┤ │ --fs-legal │ --fs-100 │ 13 │ Bildnachweis, Copyright │ │ │ │ │ → #hero .image-creator │ │ --fs-meta │ --fs-100 │ 13 │ Datum, Quelle, Autorenzeile │ │ │ │ │ → .hero-meta, time, .pub-authors │ │ --fs-tag │ --fs-100 │ 13 │ Badge, Kategorie — inhaltlich │ │ │ │ │ führend, farbig codiert │ │ │ │ │ → .hero-tag, .tag, .pub-type │ │ --fs-tag-minor │ --fs-050 │ 12 │ NACHGEORDNETER Chip: Metadaten ohne │ │ │ │ │ Navigations-/Orientierungsfunktion │ │ │ │ │ → .tag-anwendung (Anwendungsfelder) │ │ │ │ │ ⚠️ bewusste Ausnahme von Regel 1 — │ │ │ │ │ siehe Anmerkung unter den Regeln │ │ --fs-eyebrow │ --fs-200 │ 14 │ NACHGEORDNETES Label in Versalien: │ │ │ │ │ Spaltenlabel innerhalb einer Sektion │ │ │ │ │ → .talks-col-title │ │ --fs-section-title│--fs-300 │ 16 │ Sektionskopf in Versalien (mit Linie)│ │ │ │ │ → .section-title (3.6, war 14px) │ │ --fs-caption │ --fs-200 │ 14 │ Bildunterschrift │ │ --fs-snippet │ --fs-200 │ 14 │ Maschinell geschnittener Textaus- │ │ │ │ │ schnitt: Suchtreffer-Anriss (25.6c) │ │ --fs-ui │ --fs-300 │ 16 │ Interaktives mit Handlungsfunktion: │ │ │ │ │ Buttons, CTA-Links, Formularfelder, │ │ │ │ │ mobiler Nav-Drawer │ │ --fs-ui-minor │ --fs-200 │ 14 │ NACHGEORDNETE Navigation ohne eigene │ │ │ │ │ Handlungsfunktion: Breadcrumb, │ │ │ │ │ Seitenmenü │ │ │ │ │ (bis 3.7 auch die Links unten) │ │ │ │ │ + Gruppenknöpfe der Projektfilter- │ │ │ │ │ leiste (P12, 01.09.2026): klappen │ │ │ │ │ nur auf, lösen nicht aus │ │ │ │ │ ⚠️ bewusste Ausnahme von Regel 2 — │ │ │ │ │ siehe Anmerkung unter den Regeln │ │ --fs-link-more │ --fs-100 │ 13 │ WEITERFÜHRENDER Link am Ende einer │ │ │ │ │ Kurzliste, der auf die vollständige │ │ │ │ │ Liste zeigt („Weitere …", „Alle …") │ │ │ │ │ → .talks-more, .video-all-link, │ │ │ │ │ .pub-all-link (3.7) │ │ │ │ │ ⚠️ bewusste Ausnahme von Regel 2 — │ │ │ │ │ siehe Anmerkung unter den Regeln │ │ --fs-nav │ --fs-200 │ 14 │ NUR die Desktop-Navigationsleiste: │ │ │ │ │ Hauptmenü, Dropdowns, Sprach- │ │ │ │ │ umschalter, Suche-Button. │ │ │ │ │ ⚠️ bewusste Ausnahme von Regel 2 — │ │ │ │ │ siehe Anmerkung unter den Regeln │ │ --fs-card-title │ --fs-300 │ 16 │ Kachel- und Listentitel — die EINZIGE│ │ │ │ │ Rolle dafür (3.8, s. Anmerkung unten)│ │ --fs-body │ --fs-300 │ 16 │ Fließtext — zugleich die Body-Basis │ │ │ │ │ (3.8, war 17) │ │ --fs-site-title │ --fs-500 │ 22 │ Site-Titel im Header (Haupt-/Unter- │ │ │ │ │ titel); ≤900px auf --fs-300 (16px) │ │ │ │ │ UNVERÄNDERT — Nutzerentscheid 3.8 │ │ --fs-h6 │ --fs-300 │ 16 │ h6 (3.7, war 13) │ │ --fs-h5 │ --fs-300 │ 16 │ h5 (3.8, war 17) │ │ --fs-h4 │ --fs-300 │ 16 │ h4 (3.8, war 18) │ │ --fs-h3 │ --fs-475 │ 20 │ h3 (3.7, war 22) │ │ --fs-h2 │ --fs-600 │ 24 │ h2 (3.7, war 26) │ │ --fs-h1 │ --fs-700 │ 28 │ h1 (3.7, war 32) │ │ --fs-hero │ --fs-800 │26–32│ Hero-Headline (Displaygrad) (3.7) │ └──────────────────┴───────────┴────┴──────────────────────────────────────┘ ⚠️ PHASE 3.8 (28.08.2026) — WAS SICH IN DIESER TABELLE GEÄNDERT HAT. Nutzerentscheidung nach der Frontend-Messung (s. Anmerkung zu Ebene 1): --fs-body 17 → 16px. Die Basis fällt damit mit der rem-Wurzel zusammen. Das ist nicht nur eine Größe, sondern räumt die Rechenfalle ab, die ganz oben in dieser Datei steht: solange Body 17px und Wurzel 16px waren, ergab jede „≈ x px bei Body-Größe"-Rechnung einen falschen Wert. Jetzt gilt 1rem = 1 Fließtextzeile = 16px, und die px-Spalte oben ist ohne Umrechnung ablesbar. ⚠️ ZWINGEND GEMEINSAM mit --measure (38 → 36rem) geändert — Begründung dort. --fs-h5 17 → 16px und --fs-h4 18 → 16px. Tiefe Gliederungsgrade tragen über GEWICHT, nicht über Größe; genau so machen es Bootstrap, GOV.UK und Carbon. Im gemessenen Bestand standen ohnehin nur zwei echte h4 auf --fs-h4 — die übrigen 232 Fundstellen waren Listentitel, die jetzt die Rolle wechseln. --fs-lead ENTFÄLLT ERSATZLOS. Die Rolle war seit ihrer Anlage in KEINER Komponente referenziert (0 Treffer in ric-redesign.css und ric-print.css) — sie hielt eine Sprosse der Leiter besetzt, auf der nichts stand. ⚠️ Wer später wirklich einen Einleitungsabsatz braucht: NICHT diese Rolle wiederbeleben, sondern zuerst prüfen, ob --fs-h3 (20px) die Aufgabe erfüllt. Eine neue Sprosse zwischen 16 und 20 wäre ein Rückschritt hinter 3.8. --fs-site-title BLEIBT auf 22px. Vorgeschlagen war 20px mit der Begründung, der Kopf stehe mit 22px nur ×1,27 unter der h1 (28px) und nehme ihr optisch den Rang. Der Nutzer hat die Änderung am 28.08.2026 im Frontend angesehen und den Bestand behalten. Damit ist das entschieden und keine offene Aufgabe. ⚠️ Diese eine Rolle hält --fs-500 am Leben; die Sperre für alle anderen Komponenten steht in der Anmerkung zu Ebene 1. --fs-card-title ist ab 3.8 die EINZIGE Rolle für Listen- und Kacheltitel. Vorher rendert derselbe Titel je nach Komponente in vier Kombinationen: 16px/600 (Publikationen, Robotersysteme, Videoarchiv), 16px/700 (Startseiten- Kacheln), 18px/600 (Projekte, Software, Mitarbeiterkarten), 18px/700 (News). ⚠️ Wer einen Listen- oder Kacheltitel setzt, nimmt --fs-card-title — nie --fs-h4, auch dann nicht, wenn das Markup zufällig ein h4 liefert. Der Grad folgt der Aufgabe, nicht dem Tag (Regel 2). ZEILENHÖHEN ┌──────────────┬──────┬──────────────────────────────────────────────────┐ │ --lh-body │ 1.5 │ Fließtext — erfüllt WCAG 1.4.8 │ │ --lh-heading │ 1.35 │ Überschriften, mehrzeilige Kacheltitel │ │ --lh-display │ 1.2 │ Displaygrade (Hero, Site-Titel) │ └──────────────┴──────┴──────────────────────────────────────────────────┘ TEXTBREITE ┌──────────────┬────────┬────────────────────────────────────────────────┐ │ --measure │ 36rem │ 576px ≈ 72 Zeichen bei 16px │ └──────────────┴────────┴────────────────────────────────────────────────┘ Entschieden am 07.08.2026 (Ende 3.5d), auf 36rem gesenkt am 28.08.2026 (3.8). Der damalige Wert 38rem war auf den 17px-Fließtext gerechnet und an den echten Umbrüchen der Karriere- und RIC-Seite mit 66–75, im Mittel 72 Zeichen belegt. Angewendet wird --measure in ric-redesign.css Abschnitt 3. ⚠️ DER WERT HÄNGT AM FLIESSTEXTGRAD — die beiden Zahlen sind gemeinsam zu ändern, nie einzeln. Genau das ist in 3.8 passiert: --fs-body 17 → 16px und --measure 38 → 36rem in einem Zug. Wäre nur der Grad gesunken, wären aus denselben 608px rund 77 Zeichen je Zeile geworden — die Seite wäre SCHWERER lesbar geworden, nicht leichter, und hätte WCAG 1.4.8 (AAA, ≤ 80 Zeichen) noch näher gestreift. Gegenprobe nach der Änderung: 576px × (17/16) ÷ 608px = 1,006 — die Zeilenlänge bleibt rechnerisch bei 72 Zeichen, gemessen wird sie nach dem Umbau erneut. ⚠️ Wer die Zeile KÜRZER will (der gemessene Median 72 liegt an der oberen Kante des Korridors 45–75), setzt 34rem = 544px ≈ 68 Zeichen. Das ist eine eigene Entscheidung und war nicht Teil von 3.8. ⚠️ Nicht `ch` verwenden: `ch` misst die Ziffer „0", die bei IBM Plex Sans deutlich breiter ist als ein Durchschnittsbuchstabe — 70ch ergäbe real ~90 Zeichen. Immer in `rem`. HARTE REGELN 1. Was gelesen werden MUSS, steht nie unter 13px: Fließtext, Meta-Zeilen, Bildunterschriften, Bildnachweise, Überschriften. Keine Ausnahme. Unter 13px darf nur, was ein GESTALTUNGSELEMENT ist und dessen Inhalt auch beim Überfliegen nicht verloren geht — beschreibende Chips und Badges. Absolute Untergrenze: 12px. Darunter nichts. 2. Der Grad folgt der AUFGABE des Elements, nicht seinem HTML-Tag. Drei Stufen, von hart nach weich: a) Formularfelder (input, select, textarea) — ≥ 16px, OHNE AUSNAHME. Nicht verhandelbar: iOS-Safari zoomt die Seite beim Fokussieren kleinerer Felder. Das ist ein Bedienfehler, kein Geschmacksurteil. b) Handlungsauslösendes — ≥ 16px: Buttons, CTA-Links, der primäre Link eines Listeneintrags, der mobile Nav-Drawer (Touch-Ziele). Wirkt etwas hier „zu groß", ist der Grad der falsche Hebel: zuerst Schnitt, Versalien und Laufweite prüfen (so in 3.6 bei den Buttons gelöst: 700 → 600 bei unveränderten 16px). c) Orientierendes und Nachgeordnetes — darf kleiner: Navigation ohne eigene Handlungsaufforderung (Breadcrumb, Seitenmenü), weiterführende Links auf eine vollständige Liste, nachgeordnete Zweitlinks (DOI), Zusatzinformation und Gestaltungselemente. Untergrenze aus Regel 1. Zwei Bedingungen, beide zwingend: die Klickfläche bleibt mindestens 24×24px (WCAG 2.2, 2.5.8), und es entsteht eine EIGENE ROLLE (Regel 5) — keine stille Abweichung in einer Komponente. ⚠️ Regel 2 ist KEIN Freibrief für kleineren Fließtext. Der steht auf --fs-body und wird von dieser Regel nicht berührt; sie regelt nur interaktive und funktionale Elemente. 3. Nur `rem`. `em` ausschließlich dort, wo Text bewusst relativ zum Container skalieren soll (Icons, ▶-Overlay) — jede solche Stelle bekommt einen begründenden Kommentar. 4. Komponenten referenzieren Rollen, keine Primitive, und schon gar keine rohen Werte. 5. Neue Rolle statt neuer Zahl. Meint eine Komponente, eine eigene Größe zu brauchen: prüfen, ob es wirklich eine neue Rolle ist. Wenn ja, hier eintragen (und in ric-typografie.md §5.3). Wenn nein, vorhandene nehmen. ⚠️ REGEL 2 IST AM 08.08.2026 NEU GEFASST WORDEN (Phase 3.7). Sie lautete bis dahin „Alles Interaktive ≥ 16px" und trug vier dokumentierte Ausnahmen: --fs-nav, --fs-ui-minor, .pub-doi und zuletzt --fs-link-more. Vier Ausnahmen sind keine Ausnahmen mehr, sondern eine falsch formulierte Regel — der in 3.6 selbst notierte Auslöser („eine weitere Ausnahme ist der Anlass, die Regel neu zu fassen") war eingetreten. Nutzerentscheidung: „Wir müssen ganz offensichtlich kleinere Schriftarten zulassen und sollten das fest einplanen. Aber halt nicht für großen Fließtext. Sondern für Gestaltungselemente oder Zusatzinformationen." Genau das ist die Dreiteilung oben. Der harte Kern (Formularfelder, 16px) ist unverändert geblieben — er hing nie am Geschmack, sondern am iOS-Zoom. NEU HINZUGEKOMMEN ist die Pflicht zur 24×24px-Klickfläche: solange „≥ 16px" galt, war die Trefferfläche nebenbei mit abgedeckt; wer kleiner setzt, muss sie jetzt ausdrücklich über Polster herstellen. Die vorhandenen Rollen unter 16px sind damit keine Ausnahmen mehr, sondern Anwendungen von Regel 2c. Ihre Herkunft, weil die Begründungen weiter tragen: --fs-tag-minor (12px, Regel 1) — 07.08.2026: Die Anwendungsfeld-Tags auf Projekt- und Robotersystem-Kacheln sind nachgeordnete Metadaten („die sind nicht so wichtig"), traten bei 13px aber gleichrangig neben die farbigen Kategorie-Badges. Nicht-interaktive, rein beschreibende Chips — das Gestaltungselement aus Regel 1. --fs-nav (14px) — 07.08.2026: 16px wirkten in der Desktop-Navigationsleiste zu wuchtig. Bewusst auf die EINE Leiste begrenzt; gilt NICHT für den mobilen Nav-Drawer, dessen Touch-Ziele unter 2b fallen. --fs-ui-minor (14px) — 08.08.2026 (Phase 3.6). Drei Beobachtungen trafen dieselbe Ursache: Breadcrumb („spielt eine deutlich untergeordnete Rolle"), Seitenmenü (stand mit 16px ÜBER dem 14px-Hauptmenü, dessen Unterpunkte es zeigt) und die „Weitere …"-Listenlinks (gleich groß wie die Titel, auf die sie verweisen). Geltungsbereich seit 3.7 enger: nur noch Breadcrumb und Seitenmenü — Navigation, die innerhalb der Seite ORIENTIERT. --fs-link-more (13px) — 08.08.2026 (Phase 3.7): „Die Links im Bereich Seminare, Stellenangebote und Abschlussarbeiten möchte ich gerne kleiner haben." Damit spaltet sich --fs-ui-minor auf: orientieren ist nicht weiterführen. 3.6 hatte beides nur zusammengefasst, weil es zufällig denselben Grad brauchte. Bewusst auf die ganze Linkfamilie angewendet — „Weitere Vorträge/Stellenangebote/Abschlussarbeiten", „Alle Videos", „Alle Publikationen" sind dieselbe Sorte Link und stünden sonst auf zwei Größen. .pub-doi (13px, --fs-meta) — 07.08.2026, auf eine Stelle begrenzt: Bei 16px war die Monospace-DOI fast so laut wie der Publikationstitel. Vertretbar als nachgeordneter ZWEITLINK, dessen primäres Ziel (.pub-title) auf 16px steht. Kein Muster für andere Links. --fs-snippet (14px) — 18.08.2026 (K7), Nutzerbefund zur Suchseite: „Wegen mir könnten die einzelnen Suchergebnisse auch kleiner sein." Der Anriss eines Suchtreffers ist KEIN Fließtext im Sinne der Warnung unter Regel 2 — er ist ein maschinell an beliebiger Stelle geschnittener Ausschnitt mit Auslassungspunkten an beiden Enden, den ke_search um das Treffwort herum baut (Searchresult.php). Man liest ihn nicht, man prüft an ihm, ob der Titel darüber gemeint ist: Zusatzinformation nach Regel 2c. Auf --fs-body (17px) stand er faktisch gleichauf mit dem Treffertitel (18px) und trug wegen seiner Masse mehr Gewicht als dieser — derselbe Fehler, der am 11.08.2026 schon in der News-Liste korrigiert wurde (22.6). Dort blieb es bei --fs-ui (16px), weil der Anriss redaktioneller Text ist; hier ist er es nicht. Eigene Rolle statt --fs-caption/--fs-ui-minor mitzubenutzen (Regel 5): weder Bildunterschrift noch Navigation, und der Grad soll unabhängig von jenen verstellbar bleiben. Keine neue Zahl — 14px = --fs-200, längst vorhanden. Nicht interaktiv (der Link ist der Titel darüber), Regel 2b bleibt unberührt. Wächter: .claude/scripts/check-font-tokens.sh meldet rohe font-size-Werte außerhalb dieser Datei. Bewusste Ausnahmen bekommen einen Zeilenkommentar, der den Marker fs-ok: enthält. (Hier bewusst ohne Kommentarzeichen geschrieben — ein verschachteltes Kommentar-Ende würde diesen Block vorzeitig schließen.) ============================================================================= */ .redesign-v2 { /* --- Farben (DFKI Corporate Design) --- */ --color-dark: #06171c; /* Haupt-Textfarbe */ --color-bright: #ffffff; /* Weiß */ --color-moon-grey: #D7DBDD; /* Nav-Hintergrund, Trennlinien */ --color-guam-blue: #1D3A8F; /* Links, Fokus-Outline */ --color-osaka-red: #EC619F; /* Event-Floating-Button */ --color-abisko-green: #6ABFA3; /* Akzent, Hover, Buttons */ --color-erfoud-orange: #F7A712; /* CTA-Buttons, Highlights */ --color-dark-muted: #58585a; /* Sekundärtext, Meta-Infos */ --color-news-bg: #e4e7e9; /* News-Sektion Hintergrund */ --color-alt-bg: #f6f7f8; /* Abwechselnder Sektions-Hintergrund */ --color-tile-bg: #f2f3f4; /* Kachel-/Card-Hintergrund */ --color-hairline: #e8eaeb; /* Feine Trennlinie in Listen */ --color-hairline-strong:#cdd0d2; /* Kräftigere Trennlinie, Grid-Zeilen */ --color-page-surround: #b1b6ba; /* Grau hinter dem zentrierten Wrapper */ /* --- Semantische Aliasse (Zweck statt Farbname) --- */ --color-text: var(--color-dark); --color-text-muted: var(--color-dark-muted); --color-text-inverted: var(--color-bright); /* ⚠️ P8b (14.08.2026) — der Linkton ist vom CD-Primitiv GETRENNT und kein Alias mehr. Grund: Seit der Rücknahme von P4 Regel 4 (11.08.2026, „die farbliche Markierung reicht") unterscheidet allein die Farbe einen Link vom Fließtext. WCAG 2.1 SC 1.4.1 verlangt dafür ≥ 3 : 1 gegen den umgebenden Text; --color-guam-blue (#1D3A8F) kommt gegen --color-text (#06171c) nur auf 1,79 : 1. Gleichzeitig gilt SC 1.4.3 mit ≥ 4,5 : 1 gegen JEDE Fläche, auf der ein Link steht — im Redesign sind das #ffffff, #f6f7f8, #f2f3f4, #eaecee (Menü-Hover) und #e4e7e9 (News-/Videosektion). Beides zusammen lässt für die Luminanz nur das Band 0,1221 … 0,1378 zu. Gewählt (Nutzerentscheidung 14.08.2026, Kandidat A aus mockups/linkfarbe.html): #3C5ECE — derselbe Farbton wie Guam-Blau (226°), nur aufgehellt. Gemessen: 3,21 : 1 gegen den Fließtext · 5,70 : 1 gegen Weiß · 4,59 : 1 auf #e4e7e9 · über 3 : 1 in allen drei Farbfehlsichtigkeits-Simulationen. ⚠️ --color-guam-blue bleibt unverändert: Es trägt an 24 Stellen FLÄCHE und FOKUSRING (Kategorie-Chips, Infra-Teaser, acht `outline: 3px solid`). Ein aufgehellter Fokusring wäre eine Verschlechterung, kein Nebeneffekt. ⚠️ Wer einen LINK einfärbt, nimmt --color-link — nie --color-guam-blue. */ --color-link: #3C5ECE; /* ⚠️ P9 (17.08.2026) — der Hover-Ton ist ebenfalls vom CD-Primitiv GETRENNT. Grund: `.redesign-v2 a:hover` (ric-redesign.css Z. 117) färbt Text auf hellem Grund und unterliegt damit SC 1.4.3 (≥ 4,5 : 1). --color-abisko-green (#6ABFA3) erreichte gegen Weiß nur 2,19 : 1 — und Weiß ist nicht der Prüffall: Die Regel gilt GLOBAL, also auch auf den grauen Sektionsgründen. Auf dem dunkelsten (#e4e7e9) waren es 1,76 : 1. ⚠️ Hier gilt NUR SC 1.4.3, nicht zusätzlich SC 1.4.1 wie bei --color-link: Im Hover kommt die Unterstreichung zurück (Abschnitt 21, Regel 4, Z. 4050–4067), Farbe ist also nicht das einzige Merkmal. Das Zielband ist deshalb eine reine Obergrenze: relative Luminanz ≤ 0,1378. ⚠️ Daraus folgt eine unbequeme Einschränkung: --color-link liegt mit 0,1342 bereits knapp unter dieser Grenze. Jede regelkonforme Hover-Farbe ist gleich hell ODER DUNKLER als der Ruhezustand — ein Aufhellen beim Hovern ist mit diesen Sektionsgründen nicht mehr möglich. Der alte grüne Ton war genau das. Gewählt (Nutzerentscheidung 17.08.2026, Kandidat A aus mockups/hoverfarbe.html): #1D3A8F — derselbe Wert wie --color-guam-blue, hier aber bewusst als eigener Ton notiert, damit der Linkzustand nicht wieder an einem Flächen-Primitiv hängt. Gemessen: 10,22 : 1 gegen Weiß · 8,23 : 1 auf #e4e7e9 (schlechteste Fläche) · 1,79 : 1 Helligkeitsabstand zum Ruhezustand #3C5ECE. ⚠️ NICHT betroffen und weiterhin grün: --color-accent (Flächen, Akzentstreifen), --color-accent-hover (Buttons) und die eigenen Hover-Regeln der dunklen Sektionen (ric-redesign.css Z. 2735, 3221, 3244, 3333, 3393). */ --color-link-hover: #1D3A8F; /* Pflichtfeld-Markierung im Formular (P9, 18.08.2026). Dieselbe Trennung wie bei --color-link: das CD-Primitiv --color-osaka-red (#EC619F) trägt FLÄCHE und bleibt unverändert; als SCHRIFT erreicht es gegen Weiß nur 3,10 : 1. #DB1A70 ist derselbe Farbton bei derselben Sättigung, nur dunkler — 4,78 : 1. ⚠️ Pflichtmarkierungen nehmen --color-required, nie --color-osaka-red. */ --color-required: #DB1A70; --color-accent: var(--color-abisko-green); --color-accent-hover: #5aad8f; /* Abisko-Green, dunkler — Button-Hover (Mockup) */ --color-cta: var(--color-erfoud-orange); --color-bg-page: var(--color-bright); --color-bg-surround: var(--color-page-surround); /* Body-Hintergrund */ --color-bg-nav: var(--color-moon-grey); --color-bg-news: var(--color-news-bg); --color-bg-alt: var(--color-alt-bg); /* Sektionen im Wechsel weiß/grau */ --color-bg-card: var(--color-tile-bg); /* Grund unter LOGODATEIEN — muss echtes Weiß sein (P11, 20.08.2026). Kein Alias auf --color-bg-page: das ist semantisch die Seitenfläche, hier trägt das Weiß Bedeutung. 55 von 62 Fördergeber-Logos sind vollständig deckend und bringen ihren eigenen weißen Kasten mit; auf dem grauen Band des Förderblocks würden daraus sichtbare weiße Rechtecke. Wer eine Logofläche einfärbt, nimmt --color-bg-logo. */ --color-bg-logo: var(--color-bright); --color-accent-sidebar: var(--color-abisko-green); /* Akzentstreifen */ /* --- Layout --- */ --page-width: 1360px; /* Max-Breite des Wrappers (3.7: war 1440px, davor 1250px). Nutzerentscheidung 08.08.2026: 1440px war zu breit. 1360 = praktisch die Mitte zwischen V1 (1250) und 1440, durch 8 teilbar (4er-Kachelraster geht auf) und auf 1366px-Laptops randlos statt mit einem 15px-Streifen. ⚠️ Regel daraus: ein Rand unter ~40px je Seite ist kein Gestaltungsmittel mehr — entweder deutlich sichtbar (ab ~1400px Viewport) oder gar nicht. */ --page-padding: 1.5rem; /* 24px — seitlicher Innenabstand */ --side-menu-width: 240px; /* Seitenmenü-Spalte der Unterseiten (3.5d, war 184px). Bemessen am längsten Eintrag („> Abschlussarbeiten", „Nachwuchsförderung") bei --fs-ui: 240 − 36 links − 10 rechts = 194px Textfläche → einzeilig. ⚠️ Hängt an --fs-ui: sinkt der Grad, darf die Spalte schmaler werden; steigt er, muss sie mitwachsen. Wird gemeinsam mit dem #content-margin-left benutzt (ric-redesign.css, Abschnitt 4). */ /* --- Schrift: Familie und Schnitte --- */ /* Name muss exakt zum @font-face in ric-redesign.css passen ('IBMPlexSans', ohne Leerzeichen). */ --font-family: 'IBMPlexSans', Arial, sans-serif; /* Dicktengleiche Schrift — bislang nur an EINER Stelle gebraucht: der Exportkasten der Publikations-Detailseite (BibTeX/RIS, 26.08.2026). Dort ist sie keine Verzierung, sondern Funktion: in einem BibTeX-Eintrag stehen Klammern, Kommata und Feldnamen untereinander, und die Ausrichtung des Gleichheitszeichens traegt die Lesbarkeit. Bewusst OHNE eigene Webfont-Datei — die Systemschriften der Stack unten sind auf jedem Zielsystem vorhanden und kosten keinen Ladevorgang. Als Token und nicht als roher Wert in der Komponente, weil ric-tokens.css die normative Quelle ist (CLAUDE.md, „Frontend Build"). */ --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* --- Schriftgrade Ebene 1: Primitive (siehe Tabelle oben) --- */ --fs-050: 0.75rem; /* 12px — NUR für --fs-tag-minor, s. Regel 1 */ --fs-100: 0.8125rem; /* 13px */ --fs-200: 0.875rem; /* 14px */ --fs-300: 1rem; /* 16px — Basis. Fällt seit 3.8 mit der rem-Wurzel zusammen. */ /* 3.8 (28.08.2026): --fs-400 (17px) und --fs-450 (18px) entfernt. Die Lücke 300 → 475 ist bewusst, s. Anmerkung zu Ebene 1 ganz oben. */ --fs-475: 1.25rem; /* 20px */ --fs-500: 1.375rem; /* 22px — trägt seit 3.8 nur noch --fs-site-title, s. dort */ --fs-600: 1.5rem; /* 24px — Nutzerentscheidung 3.7, war 1.625rem/26px */ --fs-700: 1.75rem; /* 28px — Nutzerentscheidung 3.7, war 2rem/32px */ --fs-800: clamp(1.625rem, 1.05rem + 1.8vw, 2rem); /* 26 → 32px (3.7, war 28 → 36px) */ /* --- Schriftgrade Ebene 2: Rollen — NUR DIESE in Komponenten benutzen --- */ --fs-legal: var(--fs-100); /* 13px */ --fs-meta: var(--fs-100); /* 13px */ --fs-tag: var(--fs-100); /* 13px */ --fs-tag-minor: var(--fs-050); /* 12px — nachgeordnete Chips, s. Regel 1 */ --fs-eyebrow: var(--fs-200); /* 14px — nachgeordnetes Spaltenlabel */ --fs-section-title: var(--fs-300); /* 16px — Sektionskopf (3.6, war 14px) */ --fs-caption: var(--fs-200); /* 14px */ --fs-snippet: var(--fs-200); /* 14px — Suchtreffer-Anriss, s. Regeln (K7) */ --fs-ui: var(--fs-300); /* 16px */ --fs-ui-minor: var(--fs-200); /* 14px — nachgeordnete Navigation, s. Regeln */ --fs-link-more: var(--fs-100); /* 13px — „Weitere …"/„Alle …", s. Regeln (3.7) */ --fs-nav: var(--fs-200); /* 14px — nur Desktop-Nav-Leiste, s. Regeln */ --fs-card-title: var(--fs-300); /* 16px — EINZIGE Rolle für Listen-/Kacheltitel (3.8) */ --fs-body: var(--fs-300); /* 16px — zugleich Body-Basis (3.8, war --fs-400/17px) */ /* --fs-lead ersatzlos gestrichen (3.8) — war in keiner Komponente referenziert. */ --fs-site-title: var(--fs-500); /* 22px — unverändert; ≤900px auf 16px, s. u. */ --fs-h6: var(--fs-300); /* 16px — 3.7, war --fs-100/13px */ --fs-h5: var(--fs-300); /* 16px — 3.8, war --fs-400/17px */ --fs-h4: var(--fs-300); /* 16px — 3.8, war --fs-450/18px */ --fs-h3: var(--fs-475); /* 20px — 3.7, war --fs-500/22px */ --fs-h2: var(--fs-600); /* 24px — 3.7, war 26px */ --fs-h1: var(--fs-700); /* 28px — 3.7, war 32px */ --fs-hero: var(--fs-800); /* 26 → 32px (3.7, war 28 → 36px) */ /* --- Zeilenhöhen --- */ --lh-body: 1.5; /* Fließtext — WCAG 1.4.8 */ --lh-heading: 1.35; --lh-display: 1.2; /* --- Textbreite (ab 3.5d auf Fließtext-CEs angewendet) --- */ /* ⚠️ Gehört mit --fs-body zusammen — nie einzeln ändern, s. Anmerkung oben. */ --measure: 36rem; /* 576px ≈ 72 Zeichen bei 16px — 3.8, war 38rem/608px */ /* --- Abstände (Spacing-Scale; rem = root-relativ, px-Werte bei Root 16px) --- */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ /* --- Cards & Kacheln --- */ --card-border-radius: 0; /* Kein Border-Radius laut Mockup V10 */ --card-shadow: 0 2px 8px rgba(6, 23, 28, 0.12); --card-shadow-hover: 0 6px 20px rgba(6, 23, 28, 0.18); --card-hover-translate: translateY(-2px); --card-transition: transform 0.2s ease, box-shadow 0.2s ease; /* --- Buttons --- */ --btn-padding: 0.6rem 1.4rem; /* 9,6px / 22,4px */ --btn-border-radius: 0; /* Kein Border-Radius laut Mockup V10 */ --btn-font-weight: var(--font-weight-semibold); --btn-transition: background-color 0.2s ease, color 0.2s ease; /* --- Navigation --- */ --nav-height: 56px; --nav-bg: var(--color-bg-nav); --nav-link-color: var(--color-dark); --nav-link-hover: var(--color-guam-blue); /* --- Animationen --- */ --transition-base: 0.2s ease; --transition-slow: 0.35s ease; /* --- Bildverhältnisse --- */ --aspect-card: 4 / 3; /* Standard News-Card */ --aspect-card-wide: 5 / 2; /* Wide-Card (erste Kachel) */ --aspect-hero: 16 / 7; /* Hero-Bereich */ /* --- Akzentstreifen (Sidebar "Weitere Neuigkeiten") --- */ --accent-stripe-width: 3px; --accent-stripe-color: var(--color-accent-sidebar); /* --- Header --- */ --header-height: 178px; --header-nav-top: 128px; /* Abstand Oberkante Header → Navigationsleiste */ --header-nav-height: 26px; /* Höhe der Desktop-Navigationsleiste */ --header-logo-width: 147px; --header-logo-height: 60px; --header-padding-h: 1.8rem; /* 28,8px — seitlicher Innenabstand */ --header-title-pad-top: 3.75rem; /* 60px — Mockup V10 */ /* --- Hamburger --- */ --hamburger-size: 44px; --hamburger-bar-height: 2px; --hamburger-gap: 5px; /* --- Dropdown-Navigation --- */ --color-bg-dropdown: #eaecee; /* Hintergrund Dropdown-Menü */ --color-border-dropdown: #d0d4d6; /* Trennlinien zwischen Dropdown-Einträgen */ } /* ----------------------------------------------------------------------------- Responsive Rollen-Anpassung Statt in der Komponente ein Primitiv zu referenzieren (verstößt gegen Regel 4), wird die ROLLE selbst am Breakpoint neu belegt. Die Komponentenregel in ric-redesign.css bleibt an allen Breiten identisch: font-size: var(--fs-site-title). ≤900px = Umschaltpunkt auf die mobile Kopfzeile (Hamburger). Der Site-Titel teilt sich die Zeile dort mit dem Logo und muss umbrechen statt hineinzulaufen. ----------------------------------------------------------------------------- */ @media (max-width: 900px) { .redesign-v2 { --fs-site-title: var(--fs-300); /* 16px */ } }