/* * ag_header — Seitenkopf (Organismus) * * Quelle : Figma `header` (1721:32935), Seite 0.5 · gemessen 17.08.2026 * Mitwirkend: `nav-overlay` (2696:53716), `nav-toggle` (2693:35040), * `nav-item` (684:241), `lang-switch` (2652:34960), * `icon-button` (2710:35248), `agenic-logo` (4:668). * Kontrakt: v0.2 (claude/kontrakt-ag-header.md) * * Token-Kette: L3 (--ag-header-*) → L2 (--color-*, --spacing-*, --motion-*) → L1. * Kein Hex, keine harten Spacings — Ausnahmen sind unten einzeln begründet. * * Gemessene Geometrie der Quelle (Desktop 1440 × 80): * Wurzel padding-inline 64 (Values/spacing/xxl), Inhalt unten ausgerichtet * container 1200 (Values/Sizes&Breakpoints/Content), space-between, * padding-bottom 16 (Values/spacing/m), Höhe 56 * → 80 = 24 Vorlauf + 40 Inhaltszeile + 16 Nachlauf * logo-nav gap 32 (Values/spacing/l) · actions-cta gap 24 * actions gap 12 · divider 1 × 24 * Mobil (375 × 64): * Wurzel padding-inline 16 (Layout/padding/mobile), Inhalt zentriert * container 343, space-between, Höhe 48 → 64 = 8 + 48 + 8 * nav-toggle 48 × 48 (Values/size/control-m) * Tablet (768 – 1212) — keine eigene Quelle in Figma: * Wurzel padding-inline 24, seit 26.08.2026. Kein Kopfmaß, sondern das * Seitenpadding des Bestands (Full-Bleed-Mindestpolster * --spacing-ml); `Layout/padding/*` führt nur `mobile`. */ .ag-header { /* ── Flächen und Linien ──────────────────────────────────────────── */ /* Quelle balken/light war Füllung #f8fafa bei 50 % — in Figma NICHT an ein Token gebunden (Befund F41). Auf Surface/lightest stand die Leiste damit auf der eigenen Farbe: Kontrast 1,00 : 1 (gemessen 07.09.2026), die Leiste war dort unsichtbar. Entscheidung Vincent 07.09.2026: dunkler, damit sie auf Surface/light UND Surface/lightest trägt. Surface/medium war zu dunkel, die halbe Stufe ebenfalls (zwei Rueckmeldungen Vincent, 07.09.2026), also ein Viertel der Stufe: Surface/light zu 75 %, Surface/medium zu 25 % = #ccd7d8. ABWEICHUNG von der Figma-Quelle — dort nachzuziehen. */ /* tmp — fuer die Stufe zwischen Surface/light und Surface/medium gibt es kein Token; beide Enden sind gebunden, der Mischpunkt nicht (Finding). */ --ag-header-flaeche-basis: color-mix(in srgb, var(--color-surface-light) 75%, var(--color-surface-medium)); --ag-header-flaeche: color-mix(in srgb, var(--ag-header-flaeche-basis) 50%, transparent); --ag-header-flaeche-fest: var(--color-surface-lightest); /* deckend bei offenem Overlay */ --ag-header-linie: transparent; --ag-header-linie-breite: 0px; /* nur Layout=border zieht eine Linie */ --ag-header-blur: 12px; /* ── Text und Zeichen ────────────────────────────────────────────── */ --ag-header-text: var(--color-text-standard); /* Figma Text/standard */ --ag-header-text-leise: var(--color-text-grey); --ag-header-lang-aktiv: var(--color-text-link); /* Figma Text/link */ --ag-header-trenner: var(--color-border); /* Figma Border */ /* ── Maße ────────────────────────────────────────────────────────── */ --ag-header-luft-inline: var(--spacing-xxl); /* 64 — Quelle: Values/spacing/xxl */ --ag-header-luft-oben: var(--spacing-ml); /* 24 — 80 − 56 der Quelle */ --ag-header-luft-unten: var(--spacing-m); /* 16 — Values/spacing/m */ --ag-header-zeile: var(--spacing-xl); /* 40 — Höhe der Inhaltszeile */ --ag-header-gap-gruppe: var(--spacing-l); /* 32 — Values/spacing/l */ --ag-header-gap-aktionen: var(--spacing-ml); /* 24 */ --ag-header-gap-meta: var(--spacing-ms); /* 12 */ --ag-header-nav-pad: var(--spacing-ms); /* 12 — nav-item padding-inline; schrumpft in der sehr engen Zone auf 8 (A-11) */ /* Figma `Values/size/control-m` = 48 hat in tokens.css noch keine Entsprechung (Befund F42). Bis das Token nachgezogen ist, steht der Wert hier als L3. */ --ag-header-schalter: 48px; /* Außenkappe des Kopfes — A-11/A-14 (fortgeschrieben 27.08.2026): Seit A-14 (Entscheidung Vincent, 27.08.2026) liegt die NAV-ZONE (nav + meta + Trenner) im 1200er-Seitenraster (--content-width, Mittelspalte des Grids auf __inner); Logo und CTA sitzen AUSSERHALB davon und docken INNEN an (32 zur Zone über den column-gap — Vorgabe Vincent, gleicher Tag). Die Kappe begrenzt damit nur noch den Innenraum der Leiste, nicht mehr die Position von Logo/CTA. Herleitung, Font-Metrik-Modell vom 26.08. (ul 720 live validiert): 1200 Mitte + 2 × 32 column-gap + 2 × 131 Außenspalte (CTA „Kontakt" 131; Logo 100 braucht weniger; der Trenner gehört seit der Präzisierung vom 27.08. in die Mitte) = 1526, Kappe 1600 → 37 px Textreserve je Seite. Die frühere Kappe 1440 (alles zentriert, Quelle Desktop-Frame) ist abgelöst — mit ihr könnte die Mitte nie volle 1200 erreichen. ACHTUNG: textabhängig — mit CTA „Kontakt aufnehmen" (+82) wird die rechte Spalte breiter und die Mitte rückt aus der Rastermitte; bei Textänderungen im Kopf nachmessen. Kein Token: bewusst nur für den Header, nicht als gemeinsame Grundlage. */ --ag-header-inhalt-max: 1600px; --ag-header-logo-breite: 100px; /* Quelle: logo-container 100 × 40 */ --ag-header-logo-ratio: 4.4; /* 633,35 / 143,94 der Wort-Bild-Marke */ /* ── Bewegung ────────────────────────────────────────────────────── */ /* Hover am Such-Icon. Entscheidung Vincent, 07.09.2026 (Kandidat A „Schwenk"): die Lupe kippt und wächst leicht. Rezept identisch zur Logo-Drehung — nur `transform`, Dauer `Motion/hover`, Easing `standard` (Figma 0.7 · Animation, shelf/logo-drehung 3978:1640). */ --ag-header-suche-kippung: -18deg; --ag-header-suche-zoom: 1.12; --ag-header-suche-dauer: var(--motion-hover); /* 350 ms */ --ag-header-suche-easing: var(--motion-ease-standard); /* Verdichteter Zustand (Klasse `is-gescrollt`, setzt header.js). Nur die Luft schrumpft, die Inhaltszeile bleibt bei 40 — Entscheidung Vincent, 24.08.2026. Damit bewegt sich am Inhalt nichts: Logo, Nav und Aktionen behalten ihre Maße, und die Breitenreserve des Light-→-Medium-Wechsels (A-6) bleibt gültig. Rechnung Desktop: 80 = 24 + 40 + 16 → 56 = 8 + 40 + 8. */ --ag-header-luft-oben-kompakt: var(--spacing-s); /* 8 */ --ag-header-luft-unten-kompakt: var(--spacing-s); /* 8 */ --ag-header-space-before: 0px; --ag-header-space-after: 0px; box-sizing: border-box; position: relative; z-index: 100; margin-block-start: var(--ag-header-space-before); margin-block-end: var(--ag-header-space-after); color: var(--ag-header-text); } .ag-header *, .ag-header *::before, .ag-header *::after { box-sizing: border-box; } /* ── Leiste: Fläche über die volle Breite, Inhalt im Container ───────── */ /* Keine max-width auf __inner: Die Außenbegrenzung leistet allein das Polster der Leiste (Full-Bleed-Regel). Eine zusätzliche max-width würde sich mit dem Polster addieren und den Inhalt schmaler machen. */ .ag-header__leiste { padding-block-start: var(--ag-header-luft-oben); /* Kappe ist --ag-header-inhalt-max (A-11/A-14): die Außenkante von Logo und CTA. Die NAV-ZONE begrenzt nicht das Polster, sondern die Mittelspalte des Grids auf __inner (--content-width). */ padding-inline: max(var(--ag-header-luft-inline), calc((100% - var(--ag-header-inhalt-max, 1600px)) / 2)); background: var(--ag-header-flaeche); } /* Drei Spalten (A-14): Außen links (Logo) | Nav-Zone im 1200er-Seitenraster | Außen rechts (Trenner + CTA bzw. Burger). Die 1fr-Ränder sind nie schmaler als ihr Inhalt (implizites auto-Minimum) — wird es eng, schrumpft zuerst die Mitte (minmax(0, …)), und ihr Inhalt weicht über die Verdichtungszonen aus (Abschnitt „Breakpoints"). Exakt im Raster liegt die Mitte, sobald beide Ränder ihren Platz haben (Innenraum ≥ 1526 — Rechnung im Variablenkommentar der Kappe). */ .ag-header__inner { display: grid; grid-template-columns: 1fr minmax(0, var(--content-width, 1200px)) 1fr; align-items: center; column-gap: var(--ag-header-gap-gruppe); min-block-size: var(--ag-header-zeile); padding-block-end: var(--ag-header-luft-unten); /* Ohne Linie exakt 0 — sonst wäre der Kopf 81 statt der gemessenen 80 px. */ border-block-end: var(--ag-header-linie-breite) solid var(--ag-header-linie); } /* Spalten EXPLIZIT zuweisen — Auto-Placement-Falle, live gemessen 27.08.2026: Mobil ist __mitte display:none und fällt aus dem Auto-Flow; __aktionen rückte dadurch in Spalte 2 nach, und der Burger saß NEBEN dem Logo (l 148 statt an der Polsterkante) statt space-between. */ .ag-header .ag-header__logo { grid-column: 1; } .ag-header__mitte { grid-column: 2; } .ag-header__aktionen { grid-column: 3; } /* Nav-Zone (Präzisierung Vincent, 27.08.2026): Nav links — das K des ersten Punktes auf der Rasterkante —, dann Meta (Suche, Sprachen), zuletzt der Trenner exakt AUF der rechten Rasterkante. margin-inline-start: auto am Meta schiebt Meta + Trenner nach rechts; der gap hält die Abstände. */ .ag-header__mitte { display: flex; flex-direction: row; align-items: center; gap: var(--ag-header-gap-aktionen); min-width: 0; } .ag-header__mitte > .ag-header__meta { margin-inline-start: auto; } /* Der erste Punkt rückt um sein eigenes Polster nach links, damit der TEXT (das K) auf der Rasterkante liegt — das Polster ist nur die Hover-Pille und ragt über die Kante hinaus, wie beim sub-schalter. */ .ag-header__nav-liste > li:first-child .ag-header__nav-link { margin-inline-start: calc(var(--ag-header-nav-pad) * -1); } /* ── Layout=balken ───────────────────────────────────────────────────── */ /* Fläche, keine Linie. Die halbtransparente Füllung bekommt den Blur, den die Quelle beim dunklen border-Kopf führt (BACKGROUND_BLUR) — ohne ihn wird Text auf bewegtem Grund unruhig. */ .ag-header--balken .ag-header__leiste { backdrop-filter: blur(var(--ag-header-blur)); } .ag-header--balken.ag-header--dark { /* Quelle balken/dark: Surface/darkest, deckend. */ --ag-header-flaeche: var(--color-surface-darkest); --ag-header-flaeche-fest: var(--color-surface-darkest); } /* ── Layout=border ───────────────────────────────────────────────────── */ /* Keine Fläche, eine Linie unter dem Container (nicht über die volle Breite — die Quelle setzt den Strich auf `container`, also auf 1200). */ .ag-header--border { --ag-header-flaeche: transparent; --ag-header-linie: var(--color-border); /* Figma Border */ --ag-header-linie-breite: var(--border-width-xs, 1px); } .ag-header--border.ag-header--dark { /* Quelle border/dark: Surface/lightest bei 1 % plus Hintergrund-Blur. */ --ag-header-flaeche: color-mix(in srgb, var(--color-surface-lightest) 1%, transparent); --ag-header-linie: var(--color-border-inverse); /* Figma Border--inverse */ } .ag-header--border.ag-header--dark .ag-header__leiste { backdrop-filter: blur(var(--ag-header-blur)); } /* ── Theme=dark ──────────────────────────────────────────────────────── */ .ag-header--dark { --ag-header-text: var(--color-text-inverse-soft); /* Figma Text/inverse */ --ag-header-text-leise: var(--color-text-grey-inverse); /* Figma Text/grey--inverse */ --ag-header-lang-aktiv: var(--color-text-inverse-soft); --ag-header-trenner: var(--color-border-soft); /* Figma Border--subtle */ --ag-header-flaeche-fest: var(--color-surface-darkest); } /* ── Sticky ──────────────────────────────────────────────────────────── */ /* Entscheidung Vincent 19.08.2026: Alle Header-Animationen entfernt, auch das Scroll-Umschalten (`is-gescrollt`, transparent → deckend, Entscheidung vom 11.08.2026 damit aufgehoben). Die Leiste trägt jetzt immer die Fläche der Quelle. Abweichung von Kontrakt §7 dokumentiert. Die dort angekündigte Neugestaltung ist am 24.08.2026 erfolgt — aber als etwas anderes: `is-gescrollt` schaltet NICHT mehr die Fläche um, sondern verdichtet die Höhe (Abschnitt „Verdichten" weiter unten). Die Fläche bleibt in beiden Zuständen die der Quelle. Wichtig für die Naht zur floating pill: `ag_tabs_bar_pill` kopiert Flächenwert und Blur des Headers fest in tabs-bar-pill.css (Stil e, `--ecken-weich`, Kontrakt §18.1). Weil hier nur Polster wandern, bleibt diese Kopie gültig. `--ueberlagern` legt den Kopf ÜBER den Inhalt (position: fixed). Ohne die Klasse bleibt er im Fluss (position: sticky) und verdeckt nichts. Der Standardwert im Widget ist „nicht überlagern"; siehe Kontrakt §7. */ /* Warum fixiert und nicht `position: sticky`: Im Theme Builder steckt das Widget in einem Elementor-Container, der genau so hoch ist wie der Kopf. `sticky` klebt nur innerhalb seines Elternteils — es gäbe also keinen Weg, an dem der Kopf kleben könnte. Live gemessen am 17.08.2026: der Kopf scrollte einfach weg. Deshalb wird die **Leiste** fixiert, und `.ag-header` selbst hält als Element im Fluss die Höhe frei. */ .ag-header--sticky .ag-header__leiste { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; } /* Reservierte Höhe = dieselbe Rechnung wie die Leiste. Ohne sie rutschte der Inhalt unter den Kopf. Bei `ueberlagern` entfällt sie — genau das ist der Unterschied zwischen „klebt oben" und „schwebt über dem Hero". */ .ag-header--sticky:not(.ag-header--ueberlagern) { min-block-size: calc(var(--ag-header-luft-oben) + var(--ag-header-zeile) + var(--ag-header-luft-unten) + var(--ag-header-linie-breite)); } /* ── Verdichten ────────────────────────────────────────────────────────── Entscheidung Vincent, 24.08.2026. Keine Figma-Quelle — die Quelle kennt keinen Scrollzustand (wie schon A-3). Neue Abweichung A-10, Kontrakt §7. Gilt NUR mit `--sticky`. Ohne sticky scrollt die Leiste ohnehin weg; sie dabei schrumpfen zu lassen, sähe man nur als Zucken beim Verschwinden. Was schrumpft: allein die Luft über und unter der Inhaltszeile. Die Zeile selbst (`--ag-header-zeile`), das Logo und die Nav bleiben unangetastet. Die Höhenreserve im Fluss schrumpft MIT (Entscheidung Vincent gegen meine Empfehlung, 24.08.2026): `min-block-size` rechnet aus denselben Variablen, also folgt sie ohne Extra-Code. Bewusst in Kauf genommen: Der Seiteninhalt rückt beim Verdichten um 24 px nach oben. Das ist auch der Grund, warum die Schwelle in header.js an `window.scrollY` hängt und nicht an einer Elementposition — sonst könnte das Hochrücken die Schwelle wieder unterschreiten und der Kopf flackerte zwischen beiden Zuständen. */ .ag-header--sticky.is-gescrollt { --ag-header-luft-oben: var(--ag-header-luft-oben-kompakt); --ag-header-luft-unten: var(--ag-header-luft-unten-kompakt); } /* Bewegung: `xs` (150 ms) und nicht die sonst übliche `s`-Stufe. Zwei Gründe, beide gemessen und nicht ästhetisch: (1) Die Verdichtung läuft während des Scrollens — je länger sie dauert, desto länger schiebt sich der Inhalt unter der Hand weg. (2) `ag_tabs_bar_pill` misst die Header-Unterkante im Scroll-Handler; während der Transition scrollt niemand. Ein ResizeObserver zieht sie nach (tabs-bar-pill.js), aber jede Millisekunde Transition ist eine Millisekunde, in der die Leiste hinterherhängt. Nur Polster und Reserve — kein `height`, kein `top`. */ .ag-header--sticky .ag-header__leiste, .ag-header--sticky .ag-header__inner, .ag-header--sticky:not(.ag-header--ueberlagern) { transition: padding-block var(--motion-duration-xs) var(--motion-ease-standard), min-block-size var(--motion-duration-xs) var(--motion-ease-standard); } /* Im Editor steht die Seite still — dort schaltet header.js gar nicht erst, die Regel ist die zweite Absicherung (gleiches Muster wie tabs-bar-pill). */ html.ag-editor .ag-header--sticky .ag-header__leiste, html.ag-editor .ag-header--sticky .ag-header__inner, html.ag-editor .ag-header--sticky:not(.ag-header--ueberlagern) { transition: none; } @media (prefers-reduced-motion: reduce) { .ag-header--sticky .ag-header__leiste, .ag-header--sticky .ag-header__inner, .ag-header--sticky:not(.ag-header--ueberlagern) { transition: none; /* Zustand schaltet hart, Verdichtung bleibt */ } } /* Eingeloggt schiebt die WordPress-Adminleiste alles nach unten. Werte aus dem WP-Core: 32 px, unter 783 px Breite 46 px. */ body.admin-bar .ag-header--sticky .ag-header__leiste, body.admin-bar .ag-header.is-offen .ag-header__leiste { inset-block-start: 32px; } @media screen and (max-width: 782px) { body.admin-bar .ag-header--sticky .ag-header__leiste, body.admin-bar .ag-header.is-offen .ag-header__leiste { inset-block-start: 46px; } } /* Solange das Overlay offen ist, muss die Leiste sichtbar bleiben — sonst fehlt bei nicht-stickem Kopf das Schließkreuz. */ .ag-header.is-offen .ag-header__leiste { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 2; background: var(--ag-header-flaeche-fest); padding-inline: max(var(--ag-header-luft-inline), calc((100% - var(--ag-header-inhalt-max, 1600px)) / 2)); } /* ── Marke ───────────────────────────────────────────────────────────── */ /* Der frühere Wrapper __gruppe (Logo + Nav, gap 32) ist mit A-14 entfallen: Logo ist direktes Grid-Kind der linken Außenspalte, die Nav steckt in __mitte. Den Abstand Logo ↔ Nav-Zone leistet der column-gap des Grids (--ag-header-gap-gruppe, dieselbe Leiter wie zuvor). */ .ag-header .ag-header__logo { display: inline-flex; align-items: center; /* Innen andocken (Vorgabe Vincent, 27.08.2026): 32 zur Nav-Zone — das leistet der column-gap des Grids (--ag-header-gap-gruppe, 32; Verdichtungszone 24 nach Token-Leiter). Nicht an der Außenkappe. */ justify-self: end; color: inherit; line-height: 0; text-decoration: none; min-width: var(--ag-header-logo-breite); /* Safari-Härtung, s. __logo-mark */ } .ag-header__logo-mark { inline-size: var(--ag-header-logo-breite); block-size: calc(var(--ag-header-logo-breite) / var(--ag-header-logo-ratio)); display: block; /* Schrumpfschutz im A-14-Grid, live gemessen 27.08.2026: Ein Inline-SVG hat kein natürliches Mindestmaß — die 1fr-Außenspalte ließ das Logo bei 1380 auf 0 kollabieren, während die Mitte ihre 1200 behielt. flex-shrink: 0 gibt dem Anker (flex) ein echtes min-content = Logobreite, damit hält die Spalte ihr Minimum und die MITTE schrumpft zuerst. */ flex: 0 0 auto; /* Safari-Härtung (QS Vincent, 26.09.2026: „agenic Logo nicht sichtbar (Safari)"). VORBEUGEND, nicht in Safari gemessen: WebKit leitet das min-content eines Inline-SVG in Flex/Grid teils aus dem viewBox statt aus den logischen Maßen ab und lässt es in der 1fr-Außenspalte auf 0 fallen — dasselbe Fehlerbild wie am 27.08.2026 in Chrome bei 1380. Deshalb die Maße zusätzlich physisch und als Mindestmaß. In Chrome ändert sich nichts (gleiche Werte). */ width: var(--ag-header-logo-breite); height: calc(var(--ag-header-logo-breite) / var(--ag-header-logo-ratio)); min-width: var(--ag-header-logo-breite); } /* ── Navigation ──────────────────────────────────────────────────────── */ /* nav-item der Quelle: padding 8/12, radius max, Copy/M (Inter Light 16/21, Laufweite −2 %). Aktiv und Hover wechseln auf Headline/S (Inter Medium) — ein Gewichtswechsel verschiebt sonst das Layout. Deshalb reserviert jeder Punkt über ein unsichtbares Doppel in Medium schon die breitere Breite. */ .ag-header__nav { min-width: 0; } .ag-header__nav-liste, .ag-header__overlay-liste { list-style: none; margin: 0; padding: 0; display: flex; } .ag-header__nav-liste { flex-direction: row; flex-wrap: nowrap; gap: 0; /* Quelle: nav gap 0, der Abstand steckt im Item */ } .ag-header .ag-header__nav-link { display: inline-block; padding-block: var(--spacing-s); /* 8 */ padding-inline: var(--ag-header-nav-pad); /* 12, sehr enge Zone 8 (A-11) */ border-radius: var(--radius-max); color: var(--ag-header-text); text-decoration: none; font-size: var(--fs-300); /* 16 */ line-height: 21px; /* Quelle: Copy/M, feste 21 px */ letter-spacing: -0.02em; /* Quelle: −2 % */ font-weight: 300; /* Inter Light */ white-space: nowrap; } /* Platzhalter in Medium: gleiche Schrift, Höhe 0, unsichtbar — er zwingt die Breite des Punktes auf das Maß des schwereren Schnitts. */ .ag-header .ag-header__nav-link::after { content: attr(data-label); display: block; block-size: 0; overflow: hidden; visibility: hidden; font-weight: 500; pointer-events: none; } .ag-header .ag-header__nav-link:visited { color: var(--ag-header-text); } .ag-header .ag-header__nav-link:hover, .ag-header .ag-header__nav-link:focus-visible, .ag-header .is-aktiv > .ag-header__nav-link { font-weight: 500; /* Inter Medium — Quelle State=Hover/Aktiv */ color: var(--ag-header-text); } .ag-header :focus-visible { outline: var(--border-width-s, 2px) solid currentColor; outline-offset: 2px; border-radius: var(--radius-xxs, 4px); } /* ── Aktionen ────────────────────────────────────────────────────────── */ .ag-header__aktionen { display: flex; flex-direction: row; align-items: center; gap: var(--ag-header-gap-aktionen); /* 24 */ /* Innen andocken (Vorgabe Vincent, 27.08.2026): 32 zwischen Trenner und CTA über den column-gap — Gegenstück zum Logo links. Mobil ist die Mitte leer und die Spalte inhaltsbreit; der Burger bleibt rechts. */ justify-self: start; /* rechte Außenspalte (A-14) */ } .ag-header__meta { display: flex; flex-direction: row; align-items: center; gap: var(--ag-header-gap-meta); /* 12 */ } /* icon-button der Quelle: 40 × 40, radius max, Glyph 16. Abweichung: die Quelle nutzt einen Font-Awesome-Glyph, hier steht ein Inline-SVG — dieselbe Regel wie beim Pfeil in ag_button (F25, kein Icon-Font). */ .ag-header .ag-header__suche { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--spacing-xl); /* 40 */ block-size: var(--spacing-xl); border-radius: var(--radius-max); color: var(--ag-header-text); text-decoration: none; flex: 0 0 auto; } .ag-header__suche-icon { inline-size: var(--fs-300); /* 16 */ block-size: var(--fs-300); /* Der Griff darf beim Zoom über die 16 hinausragen. */ overflow: visible; /* Drehpunkt ist die Mitte des Lupenkreises (cx 7 / cy 7 der viewBox `0 0 16 16`) = 7/16 = 43,75 % der Zeichenfläche. */ transform-box: fill-box; transform-origin: 43.75% 43.75%; transition: transform var(--ag-header-suche-dauer) var(--ag-header-suche-easing); } /* Hover und Tastaturfokus zeigen denselben Zustand (Regel 0.7 · Animation). */ .ag-header .ag-header__suche:hover .ag-header__suche-icon, .ag-header .ag-header__suche:focus-visible .ag-header__suche-icon { transform: rotate(var(--ag-header-suche-kippung)) scale(var(--ag-header-suche-zoom)); } /* Bei reduzierter Bewegung steht die Lupe still. */ @media (prefers-reduced-motion: reduce) { .ag-header__suche-icon { transition: none; } .ag-header .ag-header__suche:hover .ag-header__suche-icon, .ag-header .ag-header__suche:focus-visible .ag-header__suche-icon { transform: none; } } .ag-header__trenner { inline-size: var(--border-width-xs, 1px); block-size: var(--spacing-ml); /* 24 — Quelle: divider 1 × 24 */ background: var(--ag-header-trenner); flex: 0 0 auto; } /* ── Sprachumschalter ────────────────────────────────────────────────── */ /* Quelle `lang-switch`: gap 8, Headline/S (Inter Medium 16/21), aktive Sprache in Text/link (hell) bzw. Text/inverse (dunkel), inaktive in Text/standard bzw. Text/grey--inverse, Trennstrich 1 × 16. */ .ag-header__lang { display: flex; flex-direction: row; align-items: center; gap: var(--spacing-s); /* 8 */ font-size: var(--fs-300); line-height: 21px; letter-spacing: -0.02em; font-weight: 500; } .ag-header .ag-header__lang-label { color: var(--ag-header-text-leise); text-decoration: none; } .ag-header .ag-header__lang-label:visited { color: var(--ag-header-text-leise); } .ag-header .ag-header__lang-label.is-aktiv { color: var(--ag-header-lang-aktiv); } .ag-header__lang-trenner { inline-size: var(--border-width-xs, 1px); block-size: var(--spacing-m); /* 16 */ background: var(--ag-header-trenner); } /* ── Umschalter (Burger) ─────────────────────────────────────────────── */ /* Quelle `nav-toggle`: 48 × 48, Balkenrahmen 24 × 16, drei Balken 24 × 2, Abstand 5. Zustand=offen: Balken 1 und 3 um ±45° gedreht, Balken 2 aus. */ /* Spezifität (0,2,0): Der Elementor-Kit legt auf JEDEN