/** * Ignite — Component Classes (c-*) * Werte 1:1 aus Figma (Node 13674:15476 „04 Funding Programs // Section" via get_design_context * + Design-Kit-Variablen). Konvention: c-Präfix, BEM-Modifier. Motion (GSAP) folgt später. * * Farbtokens (Figma Semantics): * text-primary #1e063d · text-secondary #786a8b · text-alternate #f8fafc * text-quarternary #e2e8f0 · text-quinary(mint) #0aebbf · text-accent(violett) #753bbd * bg-primary #fff · bg-tertiary #f1f5f9 · bg-quarternary(mint) #0aebbf · bg-alternate #1e063d */ /* Margin-Reset lebt global in style.css (`*, *::before, *::after { margin: 0 }`) — hier bewusst keine per-Komponenten-Liste mehr. Abstände ausschließlich über `gap`. */ /* ============================================================= Buttons (exakt, Node 11202:6280) Base: min-h 44, py 12, Pill, Open Sans Medium 12/12 tracking .12px, Border 1px. Ohne Icon: gap 12, px 20. Mit Icon (.c-btn--has-icon): gap 10, pl 20 / pr 12. Icon 20px. */ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; /* 🔴 Der Rahmen wird aus dem Innenabstand herausgerechnet. Figmas Strich liegt INNEN und zaehlt nicht zur Groesse; `box-sizing: border-box` zaehlt ihn mit. Ohne den Abzug ist jeder Button 48 statt 46 hoch und 190 statt 188 breit — an derselben Stelle stand der Fehler schon bei der Navbar-Pille. Der Term steht ausgeschrieben, damit die 12/20 aus dem Node lesbar bleiben statt als 11/19 zu erscheinen. */ --btn-strich: 0.0625rem; min-height: 2.75rem; padding: calc(0.75rem - var(--btn-strich)) calc(1.25rem - var(--btn-strich)); border-radius: 62.5rem; border: var(--btn-strich) solid transparent; /* 🔴 14/22 ls 0 — auf BEIDEN Leinwaenden. Hier stand bis 2026-08-12 12/12 mit +0,12 Tracking; das war an keinem Node belegt. Nachgemessen an vier unabhaengigen Stellen, alle identisch: Startseite-CTA Desktop (13818:30283 Primary 188x46 / Secondary 304x46), Funding mobil (14077:35075), Weiteres Management mobil (14304:34557), Navbar-Fuss (14077:34843). Die Hoehe 46 ergibt sich damit von selbst (12 + 22 + 12) — vorher trug sie `min-height: 44`. */ font-family: var(--u-font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease), border-color var(--u-dur-fast) var(--u-ease); } .c-btn__icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } .c-btn--has-icon { gap: 0.625rem; padding-left: calc(1.25rem - var(--btn-strich)); padding-right: calc(0.75rem - var(--btn-strich)); } /* ---- Fill-Hover (Agentur-Standard, animation.md §Button-Fill) ----------------------------- Die Fuellflaeche wird von anim.js injiziert und per GSAP in X skaliert — sie waechst von der Seite, an der der Cursor eintritt, und zieht sich zur Austrittsseite zurueck. Warum ein eigenes Element statt `background-position` oder einem Gradient: nur so laesst sich der Ursprung pro Hover umsetzen. Ein Gradient-Trick kann immer nur EINE Richtung. `isolation: isolate` ist Pflicht — der Fill liegt auf z-index:-1, ohne eigenen Stacking-Context wuerde er hinter den Sektionshintergrund rutschen statt hinter den Button-Text. 🔴 `overflow: hidden` ist ebenfalls Pflicht, und der Fill darf KEINEN eigenen Radius tragen. Erster Versuch war `border-radius: inherit` ohne `overflow` — gemessen sass der Fill zwar in jeder Phase inhalb der Bounding-Box (ueberall -0.5px), sah aber trotzdem kaputt aus: der geerbte Radius wird von `scaleX` MIT gestaucht, die runden Enden werden zu schmalen Ellipsen und folgen der Pillen-Kontur des Buttons nicht mehr. Die Bounding-Box haelt ihn, die Silhouette nicht — ein Rechteck-Check findet das nie, nur das Clipping am Elternteil loest es. (Die Sorge, `overflow` breche `position: sticky`, gilt nur fuer sticky NACHFAHREN — ein Button hat keine. War hier ein Fehlschluss.) */ .c-btn { position: relative; isolation: isolate; overflow: hidden; } .c-btn__fill { position: absolute; inset: 0; z-index: -1; border-radius: 0; transform: scaleX(0); transform-origin: left center; pointer-events: none; will-change: transform; } /* Text-Varianten fuellen NICHT — die bekommen den Unterstrich-Reveal (animation.md §Underline). 🔴 Und sie duerfen NICHT clippen: der Unterstrich sitzt per `bottom: -0.125rem` bewusst UNTERHALB der Box. Mit dem geerbten `overflow: hidden` (das nur der Fill braucht) wurde er vollstaendig weggeschnitten — sichtbar war dann nur noch der Pfeil-Kreis, weil der innerhalb der Box liegt. Gemeldet 2026-08-05 an den Blog-Karten. */ .c-btn--tertiary, .c-btn--menu, .c-card__link { overflow: visible; } .c-btn--tertiary .c-btn__fill, .c-btn--menu .c-btn__fill, .c-card__link .c-btn__fill { display: none; } /* Primary — 4 Fills */ .c-btn--mint { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-primary); } .c-btn--purple { background: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--text-primary); color: var(--wp--preset--color--text-alternate); } .c-btn--grey { background: var(--wp--preset--color--bg-tertiary); border-color: var(--wp--preset--color--border-tertiary); color: var(--wp--preset--color--text-primary); } .c-btn--blur { background: rgba(71,85,105,0.01); border-color: rgba(251,251,251,0.1); color: var(--wp--preset--color--text-alternate); backdrop-filter: blur(5rem); -webkit-backdrop-filter: blur(5rem); } /* Secondary — transparent, heller Border (#e2e8f0), dunkler Text */ .c-btn--secondary { background: transparent; border-color: var(--wp--preset--color--border-tertiary); color: var(--wp--preset--color--text-primary); } /* ---- Hover-Farbregeln (User-Vorgabe 2026-08-05) ---- Mint → Purple mit weissem Content · Purple → Mint · Grey/transparent/Secondary → Mint mit purple Content. Der Border wandert mit der Fuellfarbe, sonst bleibt ein Rand der alten Farbe stehen, waehrend die Flaeche schon umgeschlagen ist. */ /* Mint auf DUNKLEM Grund fuellt WEISS statt purple (User 2026-08-05): auf einer dunklen Flaeche verschwindet die purple Fuellung fast im Untergrund, der Button sieht im Hover ausgegraut aus statt hervorgehoben. 🔴 Das laeuft ueber zwei VERERBTE Variablen, nicht ueber einen Selektor am Button. Vorher zaehlte ein `:is(…)`-Vorspann die dunklen Sektionen direkt vor `.c-btn--mint` auf — und war prompt unvollstaendig: `.c-highlights` (dunkles Bild unter dem Inhalt) und die dunkle Statistik-Karte `.c-stat` fehlten, nachgemessen ueber alle Seiten (User 2026-08-07: „ich glaube du hast nicht alle erwischt"). Mit Variablen erbt jeder Mint-Button die Werte seiner Umgebung, egal wie tief er darin sitzt, und eine neue dunkle Flaeche braucht genau EINE Zeile in der Liste unten statt einer Erweiterung mehrerer Selektoren. Nebeneffekt: kein Spezifitaets-Wettlauf mehr — die Basisregel liest nur die Variable. */ .c-btn--mint .c-btn__fill { background: var(--u-mint-fill, var(--wp--preset--color--text-primary)); } .c-btn--mint:hover { color: var(--u-mint-fill-text, var(--wp--preset--color--text-alternate)); border-color: var(--u-mint-fill, var(--wp--preset--color--text-primary)); } /* Die dunklen Flaechen. `.c-hero:has(.c-hero__bg)` statt einer Varianten-Liste: das Bild ist das Merkmal, und es fehlt genau dem hellen `--overview`-Hero (nachgemessen). Bei `.c-highlights` und `.c-interrupter` liegt die dunkle Ebene als Overlay UNTER dem Inhalt, nicht als Hintergrund eines Vorfahren — deshalb waren sie mit blossem Hochlaufen der Elternkette nicht zu finden; gemessen wurde ueber `elementsFromPoint` neben dem Button. */ .c-hero:has(.c-hero__bg), .c-hero--locations, .c-ctaband, .c-interrupter, .c-highlights, .c-stat, .c-card--dark, .c-card--darkgrey, .c-advantage__card--darkgrey { --u-mint-fill: var(--wp--preset--color--text-alternate); --u-mint-fill-text: var(--wp--preset--color--text-primary); } .c-btn--purple .c-btn__fill { background: var(--wp--preset--color--accent); } .c-btn--purple:hover { color: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--accent); } .c-btn--grey .c-btn__fill { background: var(--wp--preset--color--accent); } .c-btn--grey:hover { color: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--accent); } .c-btn--blur .c-btn__fill { background: var(--wp--preset--color--accent); } .c-btn--blur:hover { color: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--accent); } .c-btn--secondary .c-btn__fill { background: var(--wp--preset--color--accent); } .c-btn--secondary:hover { color: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--accent); } /* Auf dunklem Grund traegt der Secondary hellen Text — im Hover steht er aber auf Mint. */ .c-btn--secondary.c-btn--on-dark:hover { color: var(--wp--preset--color--text-primary); } /* Kontext-Modifier (Muster wie .c-btn--tertiary.c-btn--on-light): auf dunklem Grund traegt der Secondary den Text in text-quarternary statt text-primary — sonst unlesbar. */ .c-btn--secondary.c-btn--on-dark { color: var(--wp--preset--color--text-quarternary); } .c-btn[disabled], .c-btn--disabled { opacity: .4; pointer-events: none; } /* Tertiary / Text-Link (auch Card-Link): kein bg, 14/22, gap 10, Icon 20, Default mint (#0aebbf) */ .c-btn--tertiary, .c-card__link { display: inline-flex; align-items: center; gap: 0.625rem; min-height: auto; padding: 0; background: none; border: none; border-radius: 0; font-family: var(--u-font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; letter-spacing: 0; white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--accent); cursor: pointer; } /* Tertiary-Link: Farbe ist KONTEXTUELL (Figma: mint auf dunkel · violett auf hell · dunkel auf mint). Als Modifier statt Inline-Style, damit der Styleguide keine Hex-Werte im Markup trägt. */ .c-btn--tertiary.c-btn--on-light { color: var(--wp--preset--color--text-accent); } .c-btn--tertiary.c-btn--on-mint { color: var(--wp--preset--color--text-primary); } /* Menu — weißer Text (dunkle Nav), Chevron-Down, animierter Unterstrich (Slide-in bei Hover) */ .c-btn--menu { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0; min-height: auto; background: none; border: none; border-radius: 0; position: relative; font-family: var(--u-font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; color: var(--wp--preset--color--text-alternate); text-decoration: none; cursor: pointer; } .c-btn--menu::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 0.0625rem; background: currentColor; transition: right var(--u-dur-fast) var(--u-ease); } .c-btn--menu:hover::after { right: 0; } /* ---- Unterstrich-Reveal, beidseitig (animation.md §Underline) ----------------------------- Die Linie ist ein echtes Element (nicht `::after`), weil GSAP den Ursprung pro Hover setzen muss — ein Pseudo-Element ist fuer GSAP nicht adressierbar, und `::after` kann per CSS immer nur EINE Richtung. Sitzt im `.c-link__label`, damit sie nur unter dem Text laeuft und nicht unter einem nachgestellten Pfeil-Icon. `has-underline-js` wird von anim-links.js gesetzt und schaltet die alten `::after`-Unterstriche ab — sonst laegen zwei Linien uebereinander. */ .c-link__label { position: relative; display: inline; } .c-link__line { position: absolute; left: 0; right: 0; bottom: -0.125rem; /* `max(1px, …)`: die Root-Font-Size skaliert fluid mit dem Viewport, dadurch faellt 0.0625rem auf kleineren Breiten unter ein Geraetepixel und der Browser zeichnet die Linie nur noch blass antialiased. Ein Unterstrich muss aber immer voll deckend sein. */ height: max(1px, 0.0625rem); background: currentColor; transform: scaleX(0); transform-origin: left center; pointer-events: none; } .has-underline-js::after { display: none !important; } /* Footer-Links: KEIN Mint-Hover mehr (User 2026-08-05) — der Unterstrich-Reveal ersetzt ihn. Die drei `:hover { color: accent }`-Regeln sind entfernt statt ueberschrieben: sie standen im Stylesheet SPAETER und haetten einen Override bei gleicher Spezifitaet geschlagen. */ /* ============================================================= Tags pad 8/10, radius 4, Open Sans Medium 12/12 uppercase. Zwei Tönungen. */ .c-tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.625rem; border-radius: 0.25rem; border: 0.0625rem solid transparent; font-family: var(--u-font-body); font-weight: 500; font-size: 0.75rem; line-height: 0.75rem; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; } /* 5 Varianten (Node 11202 Components → Tags). Struktur identisch, nur Farbe. */ .c-tag--mint { background: rgba(7,235,191,.1); border-color: rgba(7,235,191,.15); color: var(--wp--preset--color--accent); } /* soft mint */ .c-tag--dark { background: rgba(30,6,61,.1); border-color: rgba(30,6,61,.1); color: var(--wp--preset--color--text-primary); } /* purple-grey tint */ .c-tag--grey { background: var(--wp--preset--color--bg-tertiary); border-color: var(--wp--preset--color--border-tertiary); color: var(--wp--preset--color--text-primary); } /* neutral grey */ .c-tag--ghost { background: transparent; border-color: transparent; color: var(--wp--preset--color--text-primary); } /* nur Text */ .c-tag--solid { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-primary); } /* solid mint */ /* ============================================================= Card pad 26, radius 8, quadratisch, justify-between; Container-gap 40, Text-gap 10; Headline H3 36/44 -0.0675rem; Subtitle 16/24 semibold -.48; Body 16/24 -.48; Meta 14/22 gap 6. */ /* Keine max-width: die Card füllt ihre Grid-Zelle. Maßgeblich sind (1) die Aspect Ratio und (2) über wie viele Spalten sie im jeweiligen Kontext gelegt wird — nicht eine fixe Breite. */ .c-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.625rem; border-radius: 0.5rem; border: 0.0625rem solid transparent; overflow: hidden; background: var(--wp--preset--color--bg-tertiary); color: var(--wp--preset--color--text-primary); aspect-ratio: 1 / 1; min-width: 0; } .c-card__container { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; } .c-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; width: 100%; } .c-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-family: var(--u-font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; } .c-card__text { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; } .c-card__headline { font-family: var(--u-font-heading); font-weight: 500; font-size: 2.25rem; line-height: 2.75rem; letter-spacing: -0.0675rem; } .c-card__subtitle { font-family: var(--u-font-body); font-weight: 700; /* Figma: 700, nicht 600 (Font-Audit 13.08.) */ font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.03rem; } .c-card__body { font-family: var(--u-font-body); font-weight: 400; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.03rem; } .c-card__image { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; display: block; } .c-card--dark { background: var(--wp--preset--color--text-primary); border-color: rgba(30,6,61,.4); color: var(--wp--preset--color--text-alternate); } .c-card--dark .c-card__meta { color: var(--wp--preset--color--border-tertiary); } .c-card--dark .c-card__body { opacity: .8; } .c-card--dark .c-card__link { color: var(--wp--preset--color--accent); } .c-card--light { background: var(--wp--preset--color--bg-tertiary); border-color: rgba(226,232,240,.4); color: var(--wp--preset--color--text-primary); } .c-card--light .c-card__body { color: var(--wp--preset--color--text-secondary); } .c-card--light .c-card__link { color: var(--wp--preset--color--text-accent); } .c-card--mint { background: var(--wp--preset--color--accent); border-color: rgba(10,235,191,.4); color: var(--wp--preset--color--text-primary); } .c-card--mint .c-card__body { opacity: .6; } .c-card--mint .c-card__link { color: var(--wp--preset--color--text-primary); } .c-card--image { padding: 0; border: none; background: none; } .c-card--white { background: var(--wp--preset--color--bg-primary); border-color: var(--wp--preset--color--border-tertiary); color: var(--wp--preset--color--text-primary); } .c-card--white .c-card__body { color: var(--wp--preset--color--text-secondary); } .c-card--white .c-card__link { color: var(--wp--preset--color--text-accent); } .c-card--darkgrey { background: var(--wp--preset--color--surface-darkgrey); border-color: var(--wp--preset--color--surface-darkgrey); color: var(--wp--preset--color--text-alternate); } .c-card--darkgrey .c-card__meta { color: var(--wp--preset--color--border-tertiary); } .c-card--darkgrey .c-card__body { opacity: .8; } .c-card--darkgrey .c-card__link { color: var(--wp--preset--color--accent); } .c-card--darkgrey .c-card__icon { background: rgba(255,255,255,.12); color: #fff; } /* ---- Card-Modifier: 3 saubere Achsen, nie Inhaltstyp ---- FARBE : --dark · --darkgrey · --mint · --light · --white FORMAT : (default = 1:1 Square) · --portrait (4:5) · --row (horizontal) VARIANTE: --image (nur Bild) · --compact (engere Gaps, z.B. Förderprogramm) */ .c-card--portrait { aspect-ratio: 4 / 5; } /* Icon-Kreis (Förderscan / Förderprogramm) */ .c-card__icon { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 62.5rem; display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-primary); } .c-card__icon .c-btn__icon { width: 1.25rem; height: 1.25rem; } .c-card--dark .c-card__icon { background: rgba(255,255,255,.12); color: #fff; } .c-card__headline--sm { font-size: 1.5rem; line-height: 1.75rem; } /* Förderscan */ /* VARIANTE --compact: engere Gaps (z.B. Förderprogramm-Card: mehrere Tags + Icon + Heading + Text + Link). Kombiniert mit --portrait für 4:5. Ersetzt das frühere --foerder (Inhaltstyp im Format-Modifier). */ .c-card--compact .c-card__head { gap: 0.375rem; } .c-card--compact .c-card__container { gap: 1.25rem; } /* FORMAT --row: horizontal (Bild links + Content rechts). Ersetzt das frühere --ressource. */ /* Querformat ohne Bild (Foerderprogramm-Karte, Node 13684:17722): 648 x 393,33. NICHT .c-card--row — das ist die horizontale BILD-Karte. Body ist hier 18/26 statt 16/24. */ .c-card--wide { aspect-ratio: 648 / 393.33; } .c-card--wide .c-card__body { font-size: var(--u-fs-body-medium); line-height: 1.625rem; letter-spacing: -0.03375rem; } .c-card__tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; } /* 8 */ .c-card--row { flex-direction: row; aspect-ratio: auto; gap: 1.25rem; align-items: stretch; padding: 1rem; max-width: none; } .c-card--row .c-card__image { width: 40%; min-height: 12rem; border-radius: 0.375rem; } .c-card--row .c-card__container { flex: 1; gap: 1rem; justify-content: center; } .c-card--row .c-card__headline { font-size: 1.25rem; line-height: 1.5rem; letter-spacing: -0.03rem; } /* ============================================================= Interactive Elements */ .c-check { display: inline-flex; align-items: center; gap: .5rem; font-size: 0.875rem; color: var(--wp--preset--color--text-primary); cursor: pointer; } /* `.c-check__input` ist der Hook fuer Kontexte OHNE `.c-check`-Wrapper (z.B. die Consent-Zeile im Kontaktformular, die ihr eigenes Flex-Layout mitbringt). */ .c-check input, .c-check__input { position: absolute; opacity: 0; width: 0; height: 0; } .c-check__box { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; border: 0.09375rem solid var(--wp--preset--color--border-tertiary); border-radius: 0.375rem; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--text-primary); transition: background var(--u-dur-fast) var(--u-ease), border-color var(--u-dur-fast) var(--u-ease); } /* Checkmark nur im Checked-Zustand sichtbar; Box wird mint, Haken dunkel. Der Haken selbst kommt 1:1 aus dem Figma-Checkbox-Node (11202:6368) — dort ist er flacher und breiter als der frueher genutzte. Strichbreite 1 statt der Icon-Standardbreite 1,25, ebenfalls wie im Node; deshalb hier ueberschrieben statt im Icon-Helfer. */ .c-check__box svg { width: 1.25rem; height: 1.25rem; opacity: 0; stroke-width: 1; transition: opacity var(--u-dur-fast) var(--u-ease); } .c-check input:checked + .c-check__box, .c-check__input:checked + .c-check__box { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } .c-check input:checked + .c-check__box svg, .c-check__input:checked + .c-check__box svg { opacity: 1; } /* Fehlerzustand wie bei den uebrigen Feldern (roter Rahmen) — die Validierung setzt aria-invalid. */ .c-check__input[aria-invalid="true"] + .c-check__box { border-color: var(--wp--preset--color--status-error); } /* Radio: runde Box, im Checked-Zustand mint mit dunklem Punkt */ .c-check--radio .c-check__box { border-radius: 62.5rem; } .c-check--radio .c-check__box::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 62.5rem; background: var(--wp--preset--color--text-primary); opacity: 0; transition: opacity var(--u-dur-fast) var(--u-ease); } .c-check--radio input:checked + .c-check__box { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } .c-check--radio input:checked + .c-check__box::after { opacity: 1; } .c-toggle { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 62.4375rem; background: var(--wp--preset--color--border-tertiary); transition: background var(--u-dur-fast) var(--u-ease); cursor: pointer; display: inline-block; } .c-toggle__knob { position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; border-radius: 62.4375rem; background: #fff; transition: transform var(--u-dur-fast) var(--u-ease); } .c-toggle--on { background: var(--wp--preset--color--text-primary); } .c-toggle--on .c-toggle__knob { transform: translateX(1.25rem); } /* ============================================================= Pagination (Figma-Referenz) Runde Items (40px), Prev/Next-Pfeile; Active = helle Grau-Fläche (#e2e8f0), dunkler Text. */ .c-pagination { display: inline-flex; align-items: center; gap: 0.25rem; } .c-pagination__item { width: 2.5rem; height: 2.5rem; padding: 0; flex: 0 0 auto; border-radius: 62.5rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--u-font-body); font-size: 0.875rem; color: var(--wp--preset--color--text-primary); background: none; border: none; text-decoration: none; cursor: pointer; } .c-pagination__item .c-btn__icon { width: 1.25rem; height: 1.25rem; } /* Fill-Hover, beidseitig — dieselbe Mechanik wie an den Buttons. Diese Komponente ist seit 2026-08-07 die EINZIGE Paginierung im Projekt: der Artikel-Browser rendert sie mit, sein eigenes `.c-articles__page` ist entfallen. Vorher liefen zwei Implementierungen mit eigenem Radius, eigenem Aktiv-Zustand und eigenem Hover nebeneinander — und der Fill hing nur an der unsichtbaren von beiden. `isolation` und `overflow` sind Pflicht, der Fill traegt keinen eigenen Radius; die Ziffer ist ein Textknoten und bleibt dank z-index:-1 ohne Wrapper obenauf. */ .c-pagination__item { position: relative; isolation: isolate; overflow: hidden; transition: color var(--u-dur-base) var(--u-ease), background-color var(--u-dur-base) var(--u-ease); } .c-pagination__item .c-btn__fill { background: var(--wp--preset--color--text-primary); } .c-pagination__item:not(.c-pagination__item--current):not(.c-pagination__item--disabled):hover, .c-pagination__item:not(.c-pagination__item--current):not(.c-pagination__item--disabled):focus-visible { color: var(--wp--preset--color--text-alternate); } /* Grundzustand ohne JS — `has-fill-js` setzt anim-buttons.js an jedem verdrahteten Element. */ .c-pagination__item:not(.has-fill-js):not(.c-pagination__item--current):hover { background: var(--wp--preset--color--bg-tertiary); } .c-pagination__item--current { background: var(--wp--preset--color--border-tertiary); color: var(--wp--preset--color--text-primary); font-weight: 500; } /* war 600 — existiert in Figma nicht */ .c-pagination__item--disabled { color: var(--wp--preset--color--text-disabled); pointer-events: none; } /* „…" ist eine Auslassung, kein Ziel: kein Zeiger, kein Hover, kein Fill (JS ueberspringt es). */ .c-pagination__item--gap { color: var(--wp--preset--color--text-tertiary); cursor: default; pointer-events: none; } /* ============================================================= Slider-Nav (Karussell prev/next) Runde Icon-Buttons (44px) in 3 Zuständen × 2 Richtungen. */ /* Slider-Pfeile — Zustaende gegen die Figma-Instanzen geprueft (Blog-Teaser, Concept-File 13690:2756 = inaktiv / 13690:2757 = aktiv). 44x44, voll rund, Icon 20 — das stimmte bereits. Falsch waren die beiden FLAECHEN-Zustaende (Backlog #26): aktiv Figma fill #f1f5f9 + Rand #e2e8f0 — unser Rand war `transparent` inaktiv Figma OHNE Fill + Rand #e2e8f0 — unserer war #f8fafc mit Rand #f1f5f9, sah dadurch aus wie eine zweite gefuellte Taste statt wie ein leerer Umriss Der Methodik-Override (`.c-methodik__nav`) hatte den inaktiven Zustand schon richtig; die Basis zieht jetzt nach. Sein Frosted-Glass fuer den AKTIVEN Zustand bleibt noetig und unangetastet: auf dem grauen Panel wuerde ein #f1f5f9-Grund verschwinden. */ .c-slidernav { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; width: 2.75rem; height: 2.75rem; border-radius: 62.5rem; border: 0.0625rem solid var(--wp--preset--color--border-tertiary); /* #e2e8f0 */ background: var(--wp--preset--color--bg-tertiary); color: var(--wp--preset--color--text-primary); cursor: pointer; transition: background var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease); } .c-slidernav .c-btn__icon { width: 1.25rem; height: 1.25rem; } .c-slidernav:hover, .c-slidernav--hover { background: var(--wp--preset--color--text-primary); color: #fff; } .c-slidernav--disabled { background: transparent; border-color: var(--wp--preset--color--border-tertiary); color: var(--wp--preset--color--text-disabled); pointer-events: none; } /* ============================================================= Filter (Figma-Referenz) Chip: Icon links + Label + Chevron-Down. Inaktiv = grau (#f1f5f9). Aktiv = mint + X-Remove-Button. */ .c-filter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .c-filter__chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 0.0625rem solid var(--wp--preset--color--border-tertiary); background: var(--wp--preset--color--bg-tertiary); color: var(--wp--preset--color--text-primary); font-family: var(--u-font-body); font-size: 0.875rem; cursor: pointer; } .c-filter__chip .c-btn__icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } .c-filter__chip--active { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-primary); } .c-filter__remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; width: 2.375rem; height: 2.375rem; border-radius: 0.5rem; border: none; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-primary); cursor: pointer; } .c-filter__remove .c-btn__icon { width: 1.25rem; height: 1.25rem; } /* ============================================================= Accordion (exakt, Node 11202:6406) Item: border-bottom 0.0625rem #e2e8f0, padding 1.25rem 0. Header Open Sans Regular 16/24 -.48 #1e063d. Icon Plus (zu) / Minus (auf), 1.25rem. Body Open Sans Regular 16/24 #786a8b. Container pl 0.5rem. */ /* Container: heller Hintergrund + Radius (Figma-Visual); Items durch Divider getrennt, letzter ohne. */ .c-accordion { background: var(--wp--preset--color--text-alternate); border: 0.0625rem solid var(--wp--preset--color--border-tertiary); border-radius: 0.5rem; padding: 0 1.5rem; } .c-accordion__item { border-bottom: 0.0625rem solid var(--wp--preset--color--border-tertiary); padding: 1.25rem 0; } .c-accordion__item:last-child { border-bottom: none; } .c-accordion__inner { display: flex; flex-direction: column; gap: 1rem; padding-left: 0.5rem; } .c-accordion__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; background: none; border: none; cursor: pointer; text-align: left; color: var(--wp--preset--color--text-primary); } .c-accordion__q { font-family: var(--u-font-body); font-weight: 400; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.03rem; color: var(--wp--preset--color--text-primary); /* 🔴 Flex-Kind mit Standard `min-width: auto` schrumpft nicht unter seine Mindestbreite. Bei langen Komposita („Forschungszulagengesetz") schob der Text im Glossar das Icon aus der Box — nachgemessen bei 360: Icon stand rechts bei 374. Beides noetig: schrumpfen duerfen UND umbrechen koennen. */ min-width: 0; overflow-wrap: anywhere; } .c-accordion__icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--wp--preset--color--text-primary); } /* Body linksbündig → „Förderscan starten"-Button ist linksbündig */ .c-accordion__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } .c-accordion__answer { font-family: var(--u-font-body); font-weight: 400; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.03rem; color: var(--wp--preset--color--text-secondary); } /* ============================================================= Stat */ .c-stat-item__value { font-family: var(--u-font-heading); font-weight: 500; font-size: 3.5rem; line-height: 1; color: var(--wp--preset--color--text-primary); } .c-stat-item__label { margin-top: 0.5rem; color: var(--wp--preset--color--text-secondary); display: inline-flex; align-items: center; gap: 0.5rem; } .c-stat { position: relative; overflow: hidden; border-radius: 0.5rem; color: #fff; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.625rem; background: var(--wp--preset--color--text-primary); } .c-stat__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; } .c-stat__eyebrow { position: absolute; top: 1.625rem; left: 1.625rem; right: 1.625rem; font-family: var(--u-font-heading); font-size: 1.25rem; } .c-stat__value { position: relative; font-family: var(--u-font-heading); font-weight: 500; font-size: 4rem; line-height: 1; } .c-stat__value small { font-size: 2rem; } .c-stat__label { position: relative; margin-top: 0.5rem; color: rgba(255,255,255,.8); } .c-stat__cta { position: absolute; right: 1.625rem; bottom: 1.625rem; } /* ============================================================= Form fields */ .c-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; } .c-field__label { font-family: var(--u-font-body); font-size: 0.875rem; font-weight: 500; /* OS 600 gibt es in Figma nicht */ color: var(--wp--preset--color--text-primary); } .c-field__control { width: 100%; padding: 0.75rem 1rem; border: 0.0625rem solid var(--wp--preset--color--border-tertiary); border-radius: 0.5rem; background: var(--wp--preset--color--bg-primary); color: var(--wp--preset--color--text-primary); font-family: var(--u-font-body); font-size: 1rem; transition: border-color var(--u-dur-fast) var(--u-ease), box-shadow var(--u-dur-fast) var(--u-ease); } .c-field__control::placeholder { color: var(--wp--preset--color--text-secondary); } .c-field__control:focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 0.1875rem rgba(10,235,191,.25); } select.c-field__control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23786a8b' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } textarea.c-field__control { min-height: 6rem; resize: vertical; } .c-field--error .c-field__control { border-color: var(--wp--preset--color--status-error); } .c-field--error .c-field__msg { color: var(--wp--preset--color--status-error); font-size: 0.8125rem; } /* ============================================================= Navbar (exakt, Nodes 13674:15768/15837/15872) Pill: py-10 pl-40 pr-10, radius 999, blur-80. Weiß = bg #fff, Text #1e063d, CTA Purple. Blur/über-Hero = bg rgba(35,47,64,.01), Border rgba(251,251,251,.1), Text #f8fafc, CTA Light-Grey. */ /* 3 States (Figma-Component-Set 13253:8377) — je nachdem, worauf die Navbar liegt. Struktur identisch, nur Background/Text/CTA unterscheiden sich. blur-80 immer. */ /* Die Hoehe kommt aus dem Token, nicht aus dem Innenabstand. Damit entfaellt auch die Rechnerei um Figmas INNEN liegenden Strich: der Rahmen steckt bei `border-box` in der Hoehe, und `align-items: center` setzt den Inhalt mittig — genau wie die symmetrischen 10/10 bzw. 16/16 im Node. Vorher stand hier `padding: 10px` und die Hoehe fiel als Nebenprodukt heraus; jede Aenderung an Logo, Button oder Zeilenhoehe verschob sie still. */ .c-nav { display: flex; align-items: center; justify-content: space-between; gap: 3rem; height: var(--nav-pille); padding-block: 0; border-radius: 62.5rem; border: 0.0625rem solid transparent; backdrop-filter: blur(5rem); -webkit-backdrop-filter: blur(5rem); transition: background-color var(--u-dur-base) var(--u-ease), color var(--u-dur-base) var(--u-ease); } /* On dark / Default — im Hero: #232F40 @ 1% */ .c-nav--hero { background: rgba(35,47,64,0.01); border-color: rgba(251,251,251,0.1); color: var(--wp--preset--color--text-alternate); } /* On dark / On Scroll — nach dem Hero: #232F40 @ 65% (Figma 60%, User-Entscheidung 65%) */ .c-nav--scroll { background: rgba(35,47,64,0.65); border-color: rgba(255,255,255,0.1); color: var(--wp--preset--color--text-alternate); } /* On light — auf hellem Hintergrund: weiß, dunkler Text, CTA Purple */ .c-nav--light { background: var(--wp--preset--color--bg-primary); border-color: rgba(255,255,255,0.1); color: var(--wp--preset--color--text-primary); } /* Der CTA wird auf hellem Grund violett (User 2026-08-07). Bewusste Abweichung von Figma, das fuer „Theme=On Light" (13893:20080) einen weissen Knopf zeigt. 🔴 Warum im CSS und nicht in `ignite_navbar()`: `c-nav--light` haengt `anim-navstate.js` zur Laufzeit an, sobald ein Mega-Menue offen ist. Serverseitig rendert diesen State nur die Styleguide-Seite — eine PHP-Fallunterscheidung greift im echten Betrieb also nie. Ohne `:where()`, weil diese Regel `.c-btn--grey` schlagen MUSS; und mit eigenem Fill, sonst liefe der violette Grund gegen einen violetten Fill (unsichtbarer Hover). ⚠️ Die Werte sind exakt die von `.c-btn--purple` gespiegelt, NICHT neu gewaehlt. „Purple" ist in diesem Projekt `text-primary` (#1e063d); `accent` ist das Mint (#0aebbf). Der erste Anlauf griff zu `accent` und lieferte einen mintgruenen Knopf. */ .c-nav--light .c-btn--grey { background: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--text-primary); color: var(--wp--preset--color--text-alternate); } .c-nav--light .c-btn--grey .c-btn__fill { background: var(--wp--preset--color--accent); } .c-nav--light .c-btn--grey:hover { color: var(--wp--preset--color--text-primary); border-color: var(--wp--preset--color--accent); } .c-nav__left { display: flex; align-items: center; gap: 3rem; min-width: 0; } .c-nav__links { display: flex; align-items: center; gap: 1.25rem; } .c-nav__right { display: flex; align-items: center; gap: 1.5rem; } /* Logo ist ein Link zur Startseite → color: inherit, sonst erbt das currentColor-SVG die blaue Default-Linkfarbe statt der Nav-Textfarbe. */ .c-nav__logo { width: 9.363rem; height: 2rem; flex: 0 0 auto; display: block; color: inherit; } .c-nav__logo svg { width: 100%; height: 100%; display: block; } /* Menu-Link (Nav + Submenu): 14px Open Sans Medium, optional Chevron, Underline-Slide bei Hover */ .c-nav__link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0; position: relative; font-family: var(--u-font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; color: inherit; text-decoration: none; background: none; border: none; cursor: pointer; white-space: nowrap; } .c-nav__link .c-btn__icon { width: 1.25rem; height: 1.25rem; } .c-nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 0.0625rem; background: currentColor; transition: right var(--u-dur-fast) var(--u-ease); } .c-nav__link:hover::after, .c-nav__link--active::after { right: 0; } .c-nav__lang { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } /* Der Sprachschalter bekommt denselben Unterstrich wie jeder andere Nav-Link (User 2026-08-07). Mit JS uebernimmt `.c-link__line` und laeuft nur unter „Deutschland"; dieses `::after` ist der Fallback ohne JS und liegt dann — wie bei allen Nav-Links — unter dem ganzen Trigger. */ .c-nav__globe { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } /* Feste Groesse statt `100%`: prozentuale Masse beziehen sich auf den Elternblock — wird das Icon je umgehaengt (wie es anim-links.js kurzzeitig tat), waechst es sonst auf dessen Breite. 20px sind ohnehin der einzige vorgesehene Wert (vgl. `.c-nav__globe` und `.c-nav__mobile-lang`). */ .c-nav__globe svg { width: 1.25rem; height: 1.25rem; } /* Unter 1440px zeigt die Länderauswahl nur das Globe-Icon (Label raus), damit die Desktop-Nav zwischen 768 und 1440px nicht überläuft (gemessen: bei 1200px sonst 56px Überlappung). */ @media (max-width: 1439px) { .c-nav__lang-label { display: none; } } .c-nav__switch { display: inline-flex; align-items: center; gap: 0.5rem; } /* Mega-Menü / Dropdown: blur-62, bg white, radius 10, px-40 py-32, Shadow. --full = auf volle Navbar-Breite gestreckt (Lösungen); Länder-Dropdown bleibt auto-breit. */ .c-megamenu { display: inline-flex; gap: 1rem; align-items: flex-start; padding: 2rem 2.5rem; border-radius: 0.625rem; border: 0.0625rem solid rgba(255,255,255,0.1); background: var(--wp--preset--color--bg-primary); backdrop-filter: blur(3.875rem); -webkit-backdrop-filter: blur(3.875rem); box-shadow: 1rem 1rem 3rem rgba(0,0,0,0.08); } /* Mega-Menü liegt auf dem 12er-Grid: 3 + 3 + 1 (Spacer) + 1 (Divider) + 4 (Feature) = 12. */ .c-megamenu--full { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; width: 100%; } .c-megamenu--full > .c-megamenu__spacer { grid-column: span 1; } /* Länderauswahl (Figma 13674:15875): Padding 32 rundum. Breite hugged den Inhalt (max-content) statt fixer 316px — so öffnet das Dropdown vom Globe nach rechts, ohne über die Nav-Kante zu laufen. */ .c-megamenu--country { width: max-content; padding: 2rem; } /* CTA-Dropdown: kompakter, hugged den Inhalt. */ .c-megamenu--cta { width: auto; padding: 1.5rem 2rem; } .c-megamenu--cta .c-megamenu__col--narrow { width: auto; } .c-megamenu__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .c-megamenu__feature-link { color: var(--wp--preset--color--text-accent); } .c-megamenu__col { display: flex; flex-direction: column; gap: 1.5rem; align-self: stretch; min-width: 0; } .c-megamenu--full > .c-megamenu__col { grid-column: span 3; } .c-megamenu__col--narrow { width: 11.1875rem; } /* 179px (Länder-Dropdown) */ .c-megamenu__label { font-family: var(--u-font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; color: var(--wp--preset--color--text-tertiary); } .c-megamenu__menu { display: flex; flex-direction: column; gap: 1.125rem; align-items: flex-start; } .c-megamenu__menu--region { gap: 1rem; } /* Divider = 1 Grid-Spalte, deren border-right die sichtbare Linie ist (wie in Figma). */ .c-megamenu__divider { align-self: stretch; border-right: 0.0625rem solid var(--wp--preset--color--border-tertiary); } .c-megamenu--full > .c-megamenu__divider { grid-column: span 1; } /* align-items: flex-start → Button/Tags hugen ihren Inhalt und sind linksbündig (sonst zieht stretch den Link auf volle Breite und .c-btn zentriert den Inhalt). */ /* Feature = 4 Grid-Spalten. Headline in Figma auf 3 Spalten (316px) begrenzt → max-width, schrumpfbar. */ /* Teaser = EINE vertikale Spalte (Node 13674:15862, 426,67 breit, gap 24): Label · Titel (316 = 3 Spalten) · Tag-Reihe · Bild (füllt die Resthöhe) · Link. 🔴 Vorher standen hier `grid-template-rows: auto 1fr auto` und ein 4-spaltiges Subgrid OHNE Spaltenregel an den Kindern. Der Auto-Placement-Algorithmus verteilte die fünf Kinder daraufhin über das 4x3-Raster: Label in Zelle 1, Titel daneben, die Tag-Reihe in die `1fr`-Zeile — wo die Tags auf Zeilenhöhe gestreckt wurden und als hohe Kästen untereinander standen. Deshalb bekommt jetzt jedes Kind eine explizite Spalte, und die Zeilen zählen alle fünf Kinder. */ /* Zeilen: Label · Titel · Tags · Bild · Link. Das Bild fuellt seit Backlog #20 NICHT mehr die Restzeile, sondern haelt 16:9 — die freie Hoehe faellt deshalb an die LETZTE Zeile, der Link sitzt darin oben. Vorher lag das `1fr` beim Bild. */ .c-megamenu__feature { display: grid; grid-template-rows: auto auto auto auto 1fr; justify-items: start; align-self: stretch; gap: 1.5rem; min-width: 0; /* 24 */ } .c-megamenu__feature-link { align-self: start; } .c-megamenu--full > .c-megamenu__feature { grid-column: span 4; grid-template-columns: subgrid; } .c-megamenu__feature > * { grid-column: 1 / -1; } .c-megamenu__feature-title { grid-column: 1 / span 3; justify-self: stretch; } /* Figma 316 */ .c-megamenu__feature-title { font-family: var(--u-font-heading); font-weight: 500; font-size: 1.5rem; line-height: 1.875rem; letter-spacing: -0.015rem; color: var(--wp--preset--color--text-primary); } /* Bild ist seit Backlog #20 ein LINK auf dasselbe Ziel wie der Text darunter und haelt 16:9 (vorher fuellte es die Restzeile, das Seitenverhaeltnis haing damit an der Spaltenhoehe). Der Radius sitzt am Link mit `overflow:hidden` — sonst ragt das `object-fit`-Bild ueber die abgerundeten Ecken hinaus. */ .c-megamenu__feature-media { grid-column: 1 / -1; justify-self: stretch; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.625rem; overflow: hidden; } .c-megamenu__feature-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================= PROJEKT-GRID (verbindlich) 12 Spalten · 16px Gutter · 64px Margin (= Figma Grid Setup/Margin). Zieht sich durch die ganze Seite. Card = 4 Spalten (in Figma 426,67px), „3-columns" = 316px → Spaltenbreite ≈ 94,67px. */ /* Projekt-Grid als Variablen — EINE Quelle. Alles Weitere leitet ab; nie einen dieser Werte in einer Komponente oder einem Breakpoint duplizieren, sondern IMMER die Variable selbst überschreiben. */ /* `--nav-h` als echte Laenge registrieren. Ohne das liefert `getComputedStyle` bei einer Custom Property den TOKEN-TEXT zurueck — hier also `calc(1.5rem + 3.9375rem)` statt `87px`. Der IntersectionObserver in nav.js braucht fuer `rootMargin` aber eine Zahl in px, und ein `parseFloat` auf diesen Text ergibt NaN und faellt still auf seinen Fallback zurueck. Mit `@property` rechnet der Browser den Wert aus, und JS liest ihn, statt ihn zu messen. */ @property --nav-h { syntax: ""; inherits: true; initial-value: 87px; } :root { --u-global-width: 100%; /* Design-Canvas. 100% = fluid. Auf z.B. 90rem setzen ⇒ Cap greift. */ /* Content-Aussenrand. Fluid & vom (an Breakpoints springenden) rem-Scaling ENTKOPPELT: aktiver Wert ist der vw-Term (4.4444vw = 64px @1440), rem dient nur als Boden/Deckel. So skaliert der Rand GLATT mit der Viewport-Breite — auf kleineren Viewports schmaler → Content breiter, und kein Sprung an 991px (dort machte 4rem sonst 72px). @1440 unverändert 64px. Floor 24px, Cap 4rem (=64px @1440). */ --u-margin: clamp(1.5rem, 4.4444vw, 4rem); --u-gutter: 1rem; /* 16 = Figma Grid Setup/Gutter */ --u-cols: 12; /* ---- Abstands-Skala (ADR 0010 §1.6, Tabelle der Designerin, Node 14106:43215) ------------ 🔴 Die ZAHL IM NAMEN ist der Figma-DESKTOP-Wert — sie ist ein Name, keine Zusage über die gerenderte Groesse. Unter 768 nimmt jeder Token seinen Mobile-Wert an (siehe unten). Wer in Figma 96 misst, schreibt `var(--u-s-96)` — auf beiden Leinwaenden dieselbe Zeile. Die Tabelle ist eine gestaltete Kurve, KEINE Formel: 48 und 32 landen beide auf 20. Werte, die hier fehlen, werden auf den naechstliegenden Token gerundet, nicht interpoliert. */ --u-s-96: 6rem; --u-s-80: 5rem; --u-s-72: 4.5rem; --u-s-64: 4rem; --u-s-56: 3.5rem; --u-s-48: 3rem; --u-s-32: 2rem; --u-s-26: 1.625rem; --u-s-24: 1.5rem; --u-s-20: 1.25rem; /* Serif-Akzent, nur fuer Zitate (.c-quote__open / __close). Projekt-Token, kein DevKit-Token — Heading/Body kommen aus der theme.json (`--wp--preset--font-family--*`), Newsreader hat dort bewusst keinen Eintrag, weil es nirgends im Editor waehlbar sein soll. 🔴 Wurde 3x benutzt, war aber nirgends definiert: die Zitate erbten still die Body-Schrift. */ --u-font-quote: "Newsreader", Georgia, "Times New Roman", serif; /* ---- Bewegung (Agentur-Standard, ~/Claude/web-dev-standards/animation.md) ---------------- `--u-ease` ist NUR die Kurve, die Dauer kommt aus den `--u-dur-*`-Token: transition: opacity var(--u-dur-fast) var(--u-ease); 🔴 Korrigiert 2026-08-05: stand vorher auf `0.24s cubic-bezier(0.4, 0, 0.2, 1)` — eine andere Kurve als der Agentur-Standard, unter demselben Namen. Der Standard (cp.de, Accordion v1, GSAP-CustomEase 'cp') ist `cubic-bezier(0.2, 0, 0.2, 1)`. Zwei Kurven unter einem Namen heisst: dieselbe Bewegung fuehlt sich je nach Projekt anders an, ohne dass man es im Code sieht. Ausserdem war die Dauer eingebacken — damit war jede Transition zwangsweise 0.24s, egal ob Farbwechsel oder Panel-Hoehe. ⚠️ Deckungsgleich mit der GSAP-CustomEase 'bws' in assets/js/anim.js. Aendert sich eine Seite, muss die andere mit — sonst laufen CSS und GSAP auf derselben Seite auseinander. */ --u-ease: cubic-bezier(0.2, 0, 0.2, 1); --u-dur-fast: 0.2s; /* Farbe, Opacity, kleine Zustandswechsel */ --u-dur-base: 0.35s; /* Standard: Hover-Fills, Unterstriche, Transforms */ --u-dur-slow: 0.6s; /* Grosse Flaechen, Bild-Reveals */ --u-accordion-duration: 0.4s; /* Accordion-Standard v1 — GSAP liest diesen Wert aus */ /* ---- Navbar-Geometrie (Nodes 13253:8377 · Seiten-Frames Home/Leadership/Glossar) ---------- 🔴 EIN Token pro Breakpoint. `--nav-pille` setzt die Hoehe der Pille UND speist `--nav-h` — dieselbe Variable, ein Auseinanderlaufen ist damit ausgeschlossen. Bis 2026-08-12 hat `nav.js` die Huelle gemessen und `--nav-h` als Inline-Style ins geschrieben. Gebraucht wurde das fuer den Overlay-Pull-up; der ist weg (Huelle ist `fixed`). ⚠️ 62, nicht 60: die Menu-Expanded-Frames zeigen 60, ihre Leinwand ist aber nur 344 breit statt 360 — zugeschnittene Arbeitsrahmen. Die neun gelayouteten Seiten-Frames und das Component-Set sagen uebereinstimmend 62 (mobil) bzw. 63 (Desktop), Ober-Offset ueberall 24. VERTIKALE Masze (Eigengroesse) — keine Grid-Breiten, check_css prueft nur Breiten. */ --nav-offset: 1.5rem; /* 24 — die Pille schwebt unter der Viewportkante */ --nav-pille: 3.9375rem; /* 63 Desktop (Node 1392x63) */ --nav-h: calc(var(--nav-offset) + var(--nav-pille)); /* Sticky-Stopp für alle Seiten-Sticky-Elemente (Programs-Stack, Intro, FAQ-Headline, Funding-Col): Navbar-Höhe + 1rem Luft, damit sie NICHT direkt an der klebenden Navbar anschlagen (User-Vorgabe). An --nav-h gekoppelt, das seinerseits aus --nav-pille faellt. */ --sticky-top: calc(var(--nav-h) + 1rem); /* EINE Spalte des 12er-Grids, für Kontexte AUSSERHALB eines echten `.u-grid` (Slider-Karten, Media-Slots, Sticky-Stack-Breiten) — dort, wo `grid-column: span N` nicht geht (z.B. weil die Box aus ihrem Container bleedet/scrollt). ⚠️ Bewusst `vw`, nicht `%`: eine `%` in einer Custom Property löst sich NICHT an der Deklarationsstelle auf, sondern am VERWENDUNGSORT, gegen das Containing Block DORT — das hat `--m-col`/`--blog-col` schon zweimal zu Bugs geführt (component-architecture.md). `vw` ist deklarationsunabhängig, löst also überall gleich auf. `vw` zählt die OS-Scrollbar mit (auf Nicht-Overlay-Scrollbar-Systemen ~1px/Spalte Fehler) — für interne Komponenten-Proportionen (Kartenbreite, Slot-Breite) akzeptiert. NICHT für Kantenbündigkeit/Bleed am Viewport-Rand verwenden, da zählt der Fehler. */ --u-col: calc((100vw - 2 * var(--u-margin) - 11 * var(--u-gutter)) / 12); } /* Der Container ist die CONTENT-Breite, nicht die Viewport-Breite: global-width abzüglich beider Aussenränder. Deshalb KEIN padding-inline — der Rand steckt schon in der Breite, sonst zieht man ihn zweimal ab. `width` sorgt für den Rand auf jeder Viewport-Breite; `max-width` greift erst, wenn --u-global-width ein fester Wert ist (bei 100% ein No-op). */ /* Mobile-Leinwand (ADR 0010 §1.2): 767 ist die Kante, an der die Abstands-Skala und der Gutter kippen. Die Spaltenzahl kippt NICHT — zwoelf Spalten gelten von 360 bis 1440. */ @media (max-width: 767px) { :root { --u-s-96: 4.5rem; --u-s-80: 3rem; --u-s-72: 2.5rem; --u-s-64: 2rem; --u-s-56: 1.5rem; --u-s-48: 1.25rem; --u-s-32: 1.25rem; --u-s-26: 1rem; --u-s-24: 0.75rem; --u-s-20: 0.5rem; --u-gutter: 0.5rem; /* 8 — der einzige Rasterwert, der kippt */ --nav-pille: 3.875rem; /* 62 (Node 344x62); Ober-Offset bleibt 24 */ } } .u-container { width: calc(100% - var(--u-margin) * 2); max-width: calc(var(--u-global-width) - var(--u-margin) * 2); margin-inline: auto; } /* minmax(0, 1fr) statt 1fr → Spalten dürfen unter ihre Content-Breite schrumpfen (Projekt-Standard). */ /* Margin 64 = Figma Grid Setup/Margin → Spalte 94,67 = Columns-Tokens. --u-container-width: 100% = fluid (Content = Viewport − 2×Margin), skaliert mit dem rem-System, analog zum Webflow-DevKit (global-width). KEIN fixer 90rem-Cap. Auf Cap umstellen = Variable auf 90rem. */ .u-grid { display: grid; grid-template-columns: repeat(var(--u-cols), minmax(0, 1fr)); gap: var(--u-gutter); } .u-col-1 { grid-column: span 1; } .u-col-2 { grid-column: span 2; } .u-col-3 { grid-column: span 3; } .u-col-4 { grid-column: span 4; } .u-col-5 { grid-column: span 5; } .u-col-6 { grid-column: span 6; } .u-col-8 { grid-column: span 8; } .u-col-12 { grid-column: span 12; } /* --u-margin wird NICHT mehr pro Breakpoint überschrieben — der clamp oben skaliert selbst glatt (24px Floor greift auf schmalen Phones automatisch). Hier nur noch das Grid auf 1 Spalte. */ /* 🔴 Hier stand bis 2026-08-11 der Raster-Kollaps: `.u-grid { grid-template-columns: 1fr }` plus alle `.u-col-*` auf `span 1`. Er hat auf dem Handy ALLES gestapelt — und damit jahrelang verdeckt, dass die Mobile-Werte fehlen. Entfernt mit ADR 0010: zwoelf Spalten gelten von 360 bis 1440, jede Sektion sagt selbst, wie breit sie dort ist. Nicht wieder einfuehren. */ /* ---- Globale sticky Navbar-Hülle (wp_body_open, eine Instanz je Seite) ---- Die Navbar liegt im Fluss ganz oben und klebt beim Scrollen (position: sticky, kein fixed — fixed wäre aus dem Fluss und bräuchte einen manuellen Platzhalter). Der Ober-Offset (Figma y=20) steckt als padding-block-start in der Hülle, damit die Pille frei schwebt. */ .c-nav-shell { /* --nav-bleed HIER (nicht auf .c-nav), damit sowohl die Pille ALS AUCH die Mega-Menü-Panels es erben — die Panels sollen exakt so breit wie die Pille sein (User-Vorgabe „immer"). */ --nav-bleed: calc(var(--u-margin) - 1rem); /* 🔴 `fixed`, nicht `sticky`. Die Huelle stand ganz oben im Fluss und klebte bei `top: 0` — sie hat sich also von der ersten Sekunde an wie `fixed` verhalten, nur mit dem Unterschied, dass sie Platz belegte. Diesen Platz nahm ein Pull-up (`margin-bottom: -var(--nav-h)`) wieder weg, und NUR dafuer musste ihre Hoehe auf den Pixel bekannt sein — deshalb die JS-Messung. Ohne Fluss gibt es nichts zurueckzuziehen: Pull-up, Body-Klasse und Messung sind weg. Den Kopfabstand traegt seitdem jede Seite selbst: Hero, Page-Header und Artikel-Kopf reservieren je 176. Daraus folgt die Regel — JEDE Seite beginnt mit einem dieser drei Koepfe. Haelt sie sich nicht daran, laeuft der erste Inhalt unter die Pille; das faellt sofort auf. */ position: fixed; inset-inline: 0; top: 0; z-index: 200; padding-block-start: var(--nav-offset); } /* Der Overlay-Pull-up stand hier bis 2026-08-12 (`body.ig-has-hero .c-nav-shell { margin-bottom: calc(-1 * var(--nav-h)) }`). Er ist mit dem Fluss entfallen — siehe `.c-nav-shell` oben. */ /* Pillen-Ausrichtung (User-Vorgabe, verifiziert am Figma-Node 21655:15354): • LINKS: das Logo ist IMMER BÜNDIG mit dem Content. Kopplung: das linke Padding = dem Bleed (`--nav-bleed`). Die Pille zieht sich um --nav-bleed aus dem Container (dessen Kante bei `--u-margin` liegt) heraus, das gleich große Padding schiebt das Logo exakt auf die Container- Kante zurück → Logo-Flucht = --u-margin, unabhängig vom konkreten Rand. Ändert sich --u-margin, folgt das Logo automatisch (Content-bündig „für immer"). • RECHTS: pr 10px wie in Figma (Button-Kante 10px zur Pillenkante); die Pille ragt rechts bewusst über den Content hinaus (CTA muss nicht bündig sein). ⚠️ --nav-bleed ist an --u-margin GEKOPPELT (nicht fix 3rem): so sitzt die Pille immer 1rem vom Viewport (16px), egal wie klein der jetzt FLUIDE --u-margin wird. Fix 3rem ragte sonst über den Viewport, sobald --u-margin < 48px fiel (kleinere Viewports → 10px Overflow). @1440: 64−16 = 48 = 3rem. */ .c-nav-shell .c-nav { margin-inline: calc(-1 * var(--nav-bleed)); /* --nav-bleed geerbt von .c-nav-shell */ padding-left: var(--nav-bleed); padding-right: 0.625rem; } /* ---- Nav-Panels (Mega-Menü / Länderauswahl) — Öffnen/Schließen ---- Abstand Nav→Panel = 20px (Figma gap-20). Verhalten via JS-Toggle; Motion folgt im GSAP-Pass. */ .c-nav-wrap { position: relative; } /* Mega-Menü-Panel: EXAKT so breit wie die Pille (User-Vorgabe „immer"). Es sitzt in .c-nav-wrap (Container-Kante = --u-margin); um auf die Pillenbreite zu kommen, zieht es sich beidseitig um --nav-bleed heraus — derselbe Bleed wie die Pille → Panel-Kanten = Pillen-Kanten, bei jeder Breite. */ .c-nav__panel { position: absolute; top: calc(100% + 1.25rem); left: calc(-1 * var(--nav-bleed)); right: calc(-1 * var(--nav-bleed)); z-index: 60; } /* Länderauswahl: auto-breit; JS richtet sie linksbündig am Globe-Icon aus. */ .c-nav__panel--country { left: auto; right: 0; width: auto; } /* CTA-Dropdown: auto-breit, rechtsbündig am CTA-Button (JS setzt right). */ .c-nav__panel--cta { left: auto; right: 0; width: auto; } .c-nav__panel[hidden] { display: none; } /* geöffneter Trigger: Unterstrich sichtbar */ .c-nav__link[aria-expanded="true"]::after { right: 0; } /* ---- Hamburger + Mobile-Overlay (< 768px) --------------------------------------------------- Desktop-Nav weicht unter 768px einem Vollbild-Accordion. Kein Figma für Mobile — Accordion ist die bewusste Standardwahl. Das Sticky-Verhalten der Hülle (oben) gilt hier ebenso. */ .c-nav__burger { display: none; } /* Desktop: kein Hamburger */ .c-nav__mobile { display: none; } /* Desktop: kein Overlay */ .c-nav__backdrop { display: none; } /* Desktop: kein Backdrop (Element existiert nur zur Laufzeit) */ /* Hamburger schon ab 1280px: die 5 langen deutschen Nav-Labels + rechte Gruppe brauchen ~1265px Pillen-Innenbreite; darunter flogen die Links vorher raus (bei 900px 408px Überlappung). Also unter 1280px → Hamburger. Die Pillen-Geometrie (Bleed, Logo-Content-Flucht) bleibt auf Tablet Desktop-like; nur Phones (<768) resetten sie (eigener Block weiter unten). */ @media (max-width: 1279px) { /* Desktop-Steuerung raus, Hamburger rein */ .c-nav__links, .c-nav__lang, .c-nav__switch, .c-nav__right > .c-btn { display: none; } .c-nav__panel { display: none; } /* Hover-Mega-Menüs gibt es auf Touch nicht */ /* Menue-Knopf (Node 14202:54864 › Menu Button 63x30): Label „Menue" mit Unterstrich, danach das Icon. Kein blosser Burger — das Label traegt die Bedeutung, das Icon zeigt nur den Zustand. */ .c-nav__burger { display: inline-flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; /* `padding-inline: 0` ist noetig, nicht kosmetisch: