/** * agenic Komponenten-CSS – Titlekombinationen (Molekül) — vollständige Übertragung. * * Figma-Quelle: Set `titlekombinationen` (623:6159, Seite 0.5, 14 Varianten, * gemessen 10.08.2026). Typo-Matrix (Inter, -2 % Letter-Spacing): * Headline L/e1 = Display/M 56/67 Light · M/e1 = Display/S 38/44 Light * M/e2 = Headline/M 24/32 Medium · S/e1 = Display/XS 24/32 Light * S/e2 = Headline/S 16/21 Medium * Strapline L = Copy/L 24/32 · M/e1, S = Copy/M 16/21 · M/e2 = Copy/L * Eyebrow Copy/M 16/21 · Breadcrumb Copy/S 14/19, Farbe Text/link * Root-Gaps (gemessen): L 24 · M/e1 32 · M/e2 16 · S/e1 8 · S/e2 2. * Markup-Partial: includes/render-titlekombination.php. * Kontrakt: Projekt-Doc `kontrakte-welle-a-10-08.md`. */ .ag-titlekombinationen, .ag-titlekombinationen * { box-sizing: border-box; } .ag-titlekombinationen { /* L3 mit L2-Defaults */ --ag-titlekombinationen-fg: var(--color-text-standard); /* Figma Text/standard */ --ag-titlekombinationen-gap: var(--spacing-ml); /* Root-Gap, Size-abhängig */ --ag-titlekombinationen-title-gap: var(--spacing-m); /* title-container-Gap */ --ag-titlekombinationen-space-before: 0px; /* Control „Abstand davor" */ --ag-titlekombinationen-space-after: 0px; /* Control „Abstand danach" */ --ag-titlekombinationen-strapline-max: 66%; /* tmp — kein Token; Entscheidung Vincent 26.08.2026 */ --ag-titlekombinationen-divider-gap: var(--spacing-m); /* Zusatzabstand unter dem Kopf-Strich, 16 (Entscheidung Vincent 17.09.2026) */ display: flex; flex-direction: column; gap: var(--ag-titlekombinationen-gap); margin-block-start: var(--ag-titlekombinationen-space-before); margin-block-end: var(--ag-titlekombinationen-space-after); color: var(--ag-titlekombinationen-fg); font-family: var(--font-sans); } /* ── Kopf-Strich auf Headline-Breite ────────────────────────── Entscheidung Vincent, 08.09.2026 (grundlegend): Ein Strich ueber einer Headline geht nur so weit wie die Headline, nie ueber die volle Sektionsbreite. Fassung A: Der Strich umschliesst den Text; laeuft die Headline ueber mehrere Zeilen, endet er an der Umbruchgrenze. ERSTER ANLAUF, VERWORFEN (08.09.2026): `width: fit-content` auf der Wurzel. Das haengt die Breite an den breitesten Inhalt des GANZEN Blocks — steht darin eine Strapline, gewinnt die. Gemessen auf /technologien/, Block 8: Strich 1200, laengste Headline-Zeile 371, max-content mit Strapline 1757, ohne 371. `width: 100%` an der Strapline half nicht, ihr Beitrag zur intrinsischen Breite bleibt bestehen. Auf der Startseite fiel es nicht auf, weil dort die Headlines laenger sind als die Straplines. JETZIGE FASSUNG: Raster mit zwei Spalten. Spalte 1 wird von der Headline bemessen (`max-content`), Spalte 2 nimmt den Rest (`1fr`). Divider, Breadcrumb, Eyebrow und Headline stehen in Spalte 1 — der Divider zieht sich per `justify-self: stretch` auf genau die Headline-Breite. Die Strapline ueberspannt beide Spalten; ihr Breitenbeitrag landet damit in der flexiblen Spalte und bemisst Spalte 1 nicht mit. Die Wurzel bleibt voll breit, deshalb greift die 66-%-Deckelung der Strapline (Entscheidung Vincent, 26.08.2026) unveraendert gegen die Sektionsbreite. `display: contents` am title-container ist noetig, damit Headline und Strapline direkte Rasterkinder werden und getrennt platziert werden koennen. Der title-container behaelt seine Rolle im Markup und im Kontrakt. Die Zeilenabstaende bleiben unveraendert: `row-gap` ist der bisherige Wurzel-Gap, und der Sprung Headline → Strapline wird ueber die Differenz zum title-gap nachgestellt. Gemessen 08.09.2026 auf /technologien/, 9 Bloecke: Divider-Eyebrow 32, Eyebrow-Headline 32, Headline-Strapline 8 — mit und ohne diese Regel identisch. `split` ist ausgenommen: dort steht die Headline in der linken von zwei Rasterspalten, die Strichbreite ist weiter unten nachgerechnet. */ .ag-titlekombinationen:not(.ag-titlekombinationen--split) { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); row-gap: var(--ag-titlekombinationen-gap); column-gap: 0; justify-items: start; } .ag-titlekombinationen:not(.ag-titlekombinationen--split) .ag-titlekombinationen__title-container { display: contents; } .ag-titlekombinationen:not(.ag-titlekombinationen--split) .ag-titlekombinationen__divider, .ag-titlekombinationen:not(.ag-titlekombinationen--split) .ag-titlekombinationen__breadcrumb, .ag-titlekombinationen:not(.ag-titlekombinationen--split) .ag-titlekombinationen__eyebrow, .ag-titlekombinationen:not(.ag-titlekombinationen--split) .ag-titlekombinationen__headline { grid-column: 1; justify-self: stretch; } .ag-titlekombinationen:not(.ag-titlekombinationen--split) .ag-titlekombinationen__strapline { grid-column: 1 / -1; /* Der Wurzel-Gap steht schon zwischen den Zeilen; hier wird auf den title-gap nachgestellt (bei m/e1: 8 statt 32). */ margin-block-start: calc(var(--ag-titlekombinationen-title-gap) - var(--ag-titlekombinationen-gap)); } /* Divider-Atom im Kopf: Breite der Headline-Spalte, kein Eigenabstand. Der Zuschlag darunter laeuft ueber die Variable des Atoms, nicht ueber eine eigene Margin — siehe naechster Block. */ .ag-titlekombinationen__divider { margin: 0; } /* ── Zusatzabstand unter dem Kopf-Strich ───────────────────────── Entscheidung Vincent, 17.09.2026: Unter dem Kopf-Strich steht 16 px mehr Luft als ueber den uebrigen Zeilensprüngen. Der Wurzel-Gap ist groessenabhaengig (L 24 · M/e1 32 · M/e2 16 · S/e1 8 · S/e2 2) und bleibt unangetastet — die 16 kommen als Aussenabstand am Divider dazu und addieren sich in beiden Rastern (stacked und split) auf den jeweiligen `row-gap`. Gesetzt wird die Variable des Atoms (`--ag-divider-space-after`), nicht eine eigene Margin: divider.css deklariert `margin` im Doppelklassen-Block `.ag-divider.ag-divider` (0,2,0) und schlaegt damit jede Einfachklasse. Gemessen 17.09.2026 auf /technologien/: mit `.ag-titlekombinationen__divider { margin-block-end: 16px }` blieb `marginBottom` computed 0px, der Abstand unveraendert 32. Deshalb hier Dreifachklasse (0,3,0) — sie gewinnt unabhaengig davon, in welcher Reihenfolge divider.css und diese Datei geladen werden (ag-titlekombinationen fuehrt ag-divider nicht als Abhaengigkeit). */ .ag-titlekombinationen .ag-titlekombinationen__divider.ag-divider { --ag-divider-space-after: var(--ag-titlekombinationen-divider-gap); } /* ── Eyebrow (Nummer + Label, Copy/M) ────────────────────────── */ .ag-titlekombinationen__eyebrow { display: flex; gap: var(--spacing-ms); /* Figma spacing/ms = 12 */ font-size: var(--fs-300); /* Copy/M 16/21 Light */ line-height: calc(21 / 16); font-weight: var(--fw-light); letter-spacing: -0.02em; } /* Automatische Eyebrow-Nummer (Entscheidung Vincent, 26.09.2026). Ein Zähler je Seite, zurückgesetzt an `html` — nicht an `body` oder einem Elementor-Container, damit ihn kein Theme-`counter-reset` überschreibt und alle Eyebrows der Seite in einer Reihe zählen, egal wie tief sie sitzen. Jede sichtbare Nummer zählt mit (auch Handnummern); `display: none` zählt nicht. Handnummern aus Ziffern setzen den Zähler per Inline- `counter-set` (render-titlekombination.php). */ html { counter-reset: ag-eyebrow; } .ag-titlekombinationen__num { counter-increment: ag-eyebrow; } .ag-titlekombinationen__num--auto::before { content: counter(ag-eyebrow, decimal-leading-zero); /* 01, 02 … 10 */ } /* ── Breadcrumb (Copy/S, Text/link) ──────────────────────────── */ .ag-titlekombinationen__breadcrumb { display: flex; flex-wrap: wrap; gap: var(--spacing-s); /* Figma spacing/s = 8 */ font-size: var(--fs-200); /* Copy/S 14/19 Light */ line-height: calc(19 / 14); font-weight: var(--fw-light); letter-spacing: -0.02em; color: var(--color-text-link); /* Figma Text/link */ } /* Kit-/Theme-Linkfarben schlagen Einzelklassen (Spezifität 0,1,1) — Doppelklasse hebt auf (0,2,0), inkl. :visited (Pilot-Lehre). */ .ag-titlekombinationen .ag-titlekombinationen__crumb, .ag-titlekombinationen a.ag-titlekombinationen__crumb, .ag-titlekombinationen a.ag-titlekombinationen__crumb:hover, .ag-titlekombinationen a.ag-titlekombinationen__crumb:focus, .ag-titlekombinationen a.ag-titlekombinationen__crumb:visited { color: var(--color-text-link); text-decoration: none; } .ag-titlekombinationen a.ag-titlekombinationen__crumb:hover { text-decoration: underline; } /* ── Headline + Strapline ────────────────────────────────────── */ .ag-titlekombinationen__title-container { display: flex; flex-direction: column; gap: var(--ag-titlekombinationen-title-gap); } .ag-titlekombinationen__headline { margin: 0; color: inherit; font-family: var(--font-sans); letter-spacing: -0.02em; } /* Breitenbegrenzung: Entscheidung Vincent, 26.08.2026 — die Strapline läuft nie über die volle Spaltenbreite, sondern höchstens über zwei Drittel. Gilt in allen Verwendungen (alle Konsumenten rendern dasselbe Partial). Bezugsgröße ist der title-container; Ausnahmen für `split` und Mobil stehen weiter unten. */ .ag-titlekombinationen__strapline { margin: 0; max-width: var(--ag-titlekombinationen-strapline-max); letter-spacing: -0.02em; font-weight: var(--fw-light); } /* Size × Ebene → Typo-Stufen (Messwerte 10.08.2026) */ .ag-titlekombinationen--l.ag-titlekombinationen--e1 { --ag-titlekombinationen-gap: var(--spacing-ml); /* 24 */ --ag-titlekombinationen-title-gap: var(--spacing-m); /* 16 */ } .ag-titlekombinationen--l .ag-titlekombinationen__headline { font-size: var(--ag-titel-hero-56-fs); /* Stufe hero-56 — Werte in titel-stufen.css */ line-height: var(--ag-titel-hero-56-lh); font-weight: var(--ag-titel-hero-56-fw); } .ag-titlekombinationen--l .ag-titlekombinationen__strapline { font-size: var(--fs-600); /* Copy/L 24/32 */ line-height: calc(32 / 24); } .ag-titlekombinationen--m.ag-titlekombinationen--e1 { --ag-titlekombinationen-gap: var(--spacing-l); /* 32 */ --ag-titlekombinationen-title-gap: var(--spacing-s); /* nicht separat gemessen: 8 */ } .ag-titlekombinationen--m.ag-titlekombinationen--e1 .ag-titlekombinationen__headline { font-size: var(--ag-titel-sektion-38-fs); /* Stufe sektion-38 */ line-height: var(--ag-titel-sektion-38-lh); font-weight: var(--ag-titel-sektion-38-fw); } .ag-titlekombinationen--m .ag-titlekombinationen__strapline { font-size: var(--fs-300); /* Copy/M 16/21 */ line-height: calc(21 / 16); } .ag-titlekombinationen--m.ag-titlekombinationen--e2 { --ag-titlekombinationen-gap: var(--spacing-m); /* 16 */ --ag-titlekombinationen-title-gap: var(--spacing-xs); /* 4 */ } .ag-titlekombinationen--m.ag-titlekombinationen--e2 .ag-titlekombinationen__headline { font-size: var(--ag-titel-block-24m-fs); /* Stufe block-24m */ line-height: var(--ag-titel-block-24m-lh); font-weight: var(--ag-titel-block-24m-fw); } .ag-titlekombinationen--m.ag-titlekombinationen--e2 .ag-titlekombinationen__strapline { font-size: var(--fs-600); /* Copy/L 24/32 */ line-height: calc(32 / 24); } .ag-titlekombinationen--s.ag-titlekombinationen--e1 { --ag-titlekombinationen-gap: var(--spacing-s); /* 8 */ --ag-titlekombinationen-title-gap: var(--spacing-s); } .ag-titlekombinationen--s.ag-titlekombinationen--e1 .ag-titlekombinationen__headline { font-size: var(--ag-titel-panel-24-fs); /* Stufe panel-24 */ line-height: var(--ag-titel-panel-24-lh); font-weight: var(--ag-titel-panel-24-fw); } /* Stufe `subblock-20` — Schriftgroesse ueber den Stufen-Haken. Die Stufe hat kein altes Achsenpaar; ag_title_stufe_legacy() bildet sie auf `s/e1` ab, damit die Abstaende der naechstkleineren Stufe greifen (Wurzel 8, Titel-Gap 8). Die Regel oben setzt darueber aber `panel-24` (24) auf die Headline — diese Regel zieht sie auf die Leiter-Stufe 20/32 Light zurueck. Spezifitaet 0,3,0 wie die Regel oben, steht spaeter, gewinnt deshalb. Entscheidung Vincent, 09.09.2026 (Fassung A). Die Stufe selbst bleibt tmp — ohne Figma-Text-Style, s. titel-stufen.css. */ .ag-titlekombinationen.ag-titlekombinationen--stufe-subblock-20 .ag-titlekombinationen__headline { font-size: var(--ag-titel-subblock-20-fs); /* Stufe subblock-20 */ line-height: var(--ag-titel-subblock-20-lh); font-weight: var(--ag-titel-subblock-20-fw); } .ag-titlekombinationen--s.ag-titlekombinationen--e2 { --ag-titlekombinationen-gap: var(--spacing-xxs); /* 2 */ --ag-titlekombinationen-title-gap: var(--spacing-xs); } .ag-titlekombinationen--s.ag-titlekombinationen--e2 .ag-titlekombinationen__headline { font-size: var(--ag-titel-label-16-fs); /* Stufe label-16 */ line-height: var(--ag-titel-label-16-lh); font-weight: var(--ag-titel-label-16-fw); } .ag-titlekombinationen--s.ag-titlekombinationen--e2 .ag-titlekombinationen__strapline { padding-block-start: var(--spacing-xs); /* gemessen: paddingTop xs */ } .ag-titlekombinationen--s .ag-titlekombinationen__strapline { font-size: var(--fs-300); /* Copy/M */ line-height: calc(21 / 16); } /* ── Theme dunkel ────────────────────────────────────────────── */ .ag-titlekombinationen--dunkel { --ag-titlekombinationen-fg: var(--color-text-inverse-soft); /* Figma Text/inverse */ } /* ── Layout split (Headline links, Strapline rechts; Quelle: L/M, e1) ── */ /* Das Zweispalten-Raster sass bis 09.09.2026 am title-container. Seit der Kopf-Strich-Regel traegt es die Wurzel (Block weiter unten), damit der Divider und die Headline in derselben Spalte liegen koennen. Der feste Spaltenabstand 24 aus Feedback Vincent Punkt 19 (11.08.2026) gilt dort unveraendert weiter; ob 24 der globale Spaltenstandard wird, ist nach wie vor offen. */ /* Feedback Vincent Punkt 20: Abstand vor der Strapline 8 px. Bei `align-items: start` sitzt sie sonst bündig mit der Oberkante des Titels — dessen Zeilenhöhe ist um ein Vielfaches größer, wodurch die Strapline optisch zu hoch steht. Auslegung von „Abstand davor": Vorlauf über der Strapline, nicht Spaltenabstand. */ .ag-titlekombinationen--split .ag-titlekombinationen__strapline { margin-block-start: var(--spacing-s); /* 8 */ } /* ── Raster in `split` ──────────────────────────────────────── Headline links, Strapline rechts. Die Wurzel ist das Raster, der title-container `display: contents`, damit Headline und Strapline getrennt platzierbar sind. Seit 21.09.2026 (Auftrag Vincent): Das Verhältnis Titel : Strapline folgt dem 12er-Raster (Figma `0.4 · Grids`, Regal `shelf/spaltenraster` 930:23075: 12 Spalten, Rinne 24, Spalte 78). Standard 6 : 6, wählbar 4 : 8 bis 9 : 3 (Klasse `--split-N`). Abstand Titel → Strapline immer 64 (`--spacing-xxl`, Entscheidung Vincent, 21.09.2026). Vorher: Titel `fit-content` bis zur halben Breite, Abstand 24. Drei Spuren: 1. Titel `fit-content(Rest)` — der Strich hugt weiter auf die Headline (Fassung A). Rest = 100 % − Abstand − Strapline-Spur, also N Spalten + Rinne − 64 = N Spalten − 40. 2. Abstand, mindestens 64, schluckt den Überschuss. 3. Strapline, fest (12 − N) Spalten am rechten Rand — sie beginnt damit exakt an Rasterlinie N + 1. ANZUMERKEN: Die 40 px Differenz zwischen Rinne und 64 gehen vom Titel ab, nicht von der Strapline — sonst läge die Strapline neben der Rasterlinie. Die Strapline steht in Spur 3 ohne Zeilenangabe. Die Rasterautomatik setzt ein Element mit fester Spalte und freier Zeile nie oberhalb des Setzcursors, und die Strapline ist das letzte Kind — sie landet damit in der Zeile der Headline (gemessen 09.09.2026: Versatz durchgehend 8 px). Mobil (Block weiter unten) fällt alles auf eine Spalte zurück. */ .ag-titlekombinationen--split { display: grid; /* Abstand ueber eine L3-Variable, damit ein Konsument ihn im eigenen Scope setzen kann. Ohne Default auf der Wurzel — ein dort gesetzter Wert wuerde den geerbten schlagen. Fallback xxl = 64. */ --ag-titlekombinationen-rinne: var(--spacing-ml); /* 24 — Rinne des Spaltenrasters */ --ag-titlekombinationen-spalte: calc((100% - 11 * var(--ag-titlekombinationen-rinne)) / 12); /* 78 bei 1200 */ --ag-titlekombinationen-split-abstand: var(--ag-titlekombinationen-column-gap, var(--spacing-xxl)); /* 64 */ grid-template-columns: fit-content(calc(100% - var(--ag-titlekombinationen-split-abstand) - var(--ag-titlekombinationen-split-strap))) minmax(var(--ag-titlekombinationen-split-abstand), 1fr) var(--ag-titlekombinationen-split-strap); column-gap: 0; row-gap: var(--ag-titlekombinationen-gap); justify-items: start; } .ag-titlekombinationen--split .ag-titlekombinationen__title-container { display: contents; } .ag-titlekombinationen--split .ag-titlekombinationen__divider, .ag-titlekombinationen--split .ag-titlekombinationen__breadcrumb, .ag-titlekombinationen--split .ag-titlekombinationen__eyebrow, .ag-titlekombinationen--split .ag-titlekombinationen__headline { grid-column: 1; justify-self: stretch; width: auto; } .ag-titlekombinationen--split .ag-titlekombinationen__strapline { grid-column: 3; justify-self: stretch; } /* Strapline-Spur je Verhältnis: (12 − N) Spalten + (11 − N) Rinnen. `--split-6` ist der Standard; das Partial setzt die Klasse bei `split` immer. */ .ag-titlekombinationen--split-4 { --ag-titlekombinationen-split-strap: calc(var(--ag-titlekombinationen-spalte) * 8 + 7 * var(--ag-titlekombinationen-rinne)); } .ag-titlekombinationen--split-5 { --ag-titlekombinationen-split-strap: calc(var(--ag-titlekombinationen-spalte) * 7 + 6 * var(--ag-titlekombinationen-rinne)); } .ag-titlekombinationen--split-6 { --ag-titlekombinationen-split-strap: calc(var(--ag-titlekombinationen-spalte) * 6 + 5 * var(--ag-titlekombinationen-rinne)); } .ag-titlekombinationen--split-7 { --ag-titlekombinationen-split-strap: calc(var(--ag-titlekombinationen-spalte) * 5 + 4 * var(--ag-titlekombinationen-rinne)); } .ag-titlekombinationen--split-8 { --ag-titlekombinationen-split-strap: calc(var(--ag-titlekombinationen-spalte) * 4 + 3 * var(--ag-titlekombinationen-rinne)); } .ag-titlekombinationen--split-9 { --ag-titlekombinationen-split-strap: calc(var(--ag-titlekombinationen-spalte) * 3 + 2 * var(--ag-titlekombinationen-rinne)); } /* In `split` begrenzt bereits die zweite Rasterspalte (1fr von zwei) die Strapline. Zusätzliche 66 % darauf ergäben ein Drittel der Gesamtbreite — deshalb hier voll. */ .ag-titlekombinationen--split { --ag-titlekombinationen-strapline-max: 100%; } @media (max-width: 767px) { /* --bp-md 768, A5-Festschreibung offen (tmp) */ /* Mobil ist die Spalte ohnehin schmal; 66 % würden ein Drittel verschenken. */ .ag-titlekombinationen { --ag-titlekombinationen-strapline-max: 100%; /* Abstand oben mobil höchstens 96 (Auftrag Vincent, QS 26.09.2026: „Wenn 128px dann mobil 96"). Gedeckelt statt umgerechnet: 128 → 96, kleinere Stufen (64, 32 …) bleiben unverändert. Weg „Von Hand". */ margin-block-start: min(var(--ag-titlekombinationen-space-before), var(--spacing-3xl)); } /* Derselbe Deckel für die feste Stufe „Neuer Abschnitt (128)" des Controls „Abstand nach oben" — sie sitzt als Klasse am Elementor-Wrapper (tokens.css, Block „Standardabstände"). Doppelklasse (0,2,0) schlägt die Stufenregel (0,1,0). */ .elementor-widget-ag_titlekombinationen.ag-abstand-abschnitt { margin-block-start: var(--spacing-3xl); /* 96 */ } /* Mobil faellt `split` auf eine Spalte — damit gilt hier dieselbe Lage wie bei `stacked`, und der Strich kann sauber auf die Headline hugen. Die Regeln sind bewusst wiederholt statt oben in die Selektorliste gezogen: CSS kann einen Selektor nicht nur innerhalb eines Media Query zu einer Liste hinzufuegen. Ohne diesen Block liefe der Strich auf volle Breite (gemessen 09.09.2026, 390 px: Strich 358, Headline 344). */ /* Mobil faellt `split` auf eine Spalte: Spalte 1 ohne den 50-%-Deckel, Strapline wieder unter die Headline und ueber beide Spalten. */ .ag-titlekombinationen--split { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 0; } .ag-titlekombinationen--split .ag-titlekombinationen__strapline { grid-column: 1 / -1; margin-block-start: calc(var(--ag-titlekombinationen-title-gap) - var(--ag-titlekombinationen-gap)); } } /* ── Einblendung (0.7-Standardmuster; Gate nur mit JS) ───────── */ html.ag-anim-ready .ag-titlekombinationen[data-ag-anim="reveal"] { transition: opacity var(--motion-reveal) var(--motion-ease-standard), transform var(--motion-reveal) var(--motion-ease-standard); } html.ag-anim-ready .ag-titlekombinationen[data-ag-anim="reveal"]:not(.is-inview) { opacity: 0; transform: translateY(var(--motion-distance-reveal)); } @media (prefers-reduced-motion: reduce) { html.ag-anim-ready .ag-titlekombinationen[data-ag-anim="reveal"], html.ag-anim-ready .ag-titlekombinationen[data-ag-anim="reveal"]:not(.is-inview) { transition: none; transform: none; opacity: 1; } } /* ── Innenabstand steuerbar (3.88.0) ───────────────────────────────────── Entscheidung Vincent, 24.08.2026: Der Innenabstand soll bei jedem Widget am Control liegen, nicht nur der Außenabstand. Dieses Widget führt im Design kein Blockpolster — die Vorgabe ist deshalb 0, und die Regel wird erst wirksam, wenn jemand am Control etwas wählt. Steht bewusst am Dateiende: gleiche Spezifität wie die Regeln oben, die spätere gewinnt. Nur oben und unten; seitlich begrenzt die Content-Breite. */ .ag-titlekombinationen { padding-block: var(--ag-titlekombinationen-pad-oben, 0px) var(--ag-titlekombinationen-pad-unten, 0px); } /* ── Theme dunkel · Brotkrumen ────────────────────────────────── Der Grundblock verdrahtet die Brotkrumen auf `Text/link` (#0b4d44). Auf einer dunklen Fläche steht damit dunkelgrün auf dunkel: gemessen 07.09.2026 auf der Gradient-Bühne von ag_hero_map 2,4:1 — WCAG 1.4.3 verlangt 4,5:1 für 14 px. Figma führt dafür `Text/link--inverse`. Betrifft jede dunkle Titelkombination mit Brotkrumen, nicht nur den Standorte-Hero. Spezifität gleich wie der Grundblock (0,3,1) — die spätere Regel gewinnt. */ .ag-titlekombinationen--dunkel .ag-titlekombinationen__breadcrumb { color: var(--color-text-link-inverse); /* Figma Text/link--inverse */ } .ag-titlekombinationen--dunkel .ag-titlekombinationen__crumb, .ag-titlekombinationen--dunkel a.ag-titlekombinationen__crumb, .ag-titlekombinationen--dunkel a.ag-titlekombinationen__crumb:hover, .ag-titlekombinationen--dunkel a.ag-titlekombinationen__crumb:focus, .ag-titlekombinationen--dunkel a.ag-titlekombinationen__crumb:visited { color: var(--color-text-link-inverse); }