/** * agenic Komponenten-CSS – Hero (Sektions-Widget) — Figma `hero` (944:16922, * gemessen 10.08.2026). Headline Display/L 80/93 Light, Copy/L, Text/inverse * auf Verlaufsfläche. Hintergrund: --gradient-preset-verlauf (CSS-Nachbau der * background·Verlauf-Shapes, Entscheidung Vincent 10.08.2026). * Kontrakt: kontrakte-welle-c-10-08. * * Ergänzung 11.08.2026 (Entscheidung Vincent, Stufe C): Abdunklung der unteren * Herohälfte in zwei Lagen — Grundabdunklung an der Unterkante (::after) plus * eine an die Buttonzeile gekoppelte Zone (.ag-hero__actions::before). Grund: * Die Figma-Quelle zeigt unten eine dunkle Zone, der CSS-Nachbau des Verlaufs * bildete sie nicht ab. Messwerte und die 75 durchgerechneten Kombinationen * stehen im Projekt-Doc `hero-abdunklung-kontrast-11-08`. */ .ag-hero, .ag-hero * { box-sizing: border-box; } .ag-hero { --ag-hero-bg: var(--color-surface-darkest); --ag-hero-fg: var(--color-text-inverse-soft); /* Figma Text/inverse */ --ag-hero-space-before: 0px; --ag-hero-space-after: 0px; /* Deko-Grafik: Einfügemodus und Ausrichtung. Default `contain` — die Grafik ist ein Logo/Flywheel und darf nicht beschnitten werden; das war bis 3.113.0 der feste Wert an `.ag-hero__grafik`. */ --ag-hero-media-fit: contain; --ag-hero-media-position: center; /* Kopfreserve — zusätzliches Polster oben, damit der überlagernde Kopf die Headline nicht verdeckt (Entscheidung Vincent, 24.08.2026). Fest, nicht an eine Bedingung geknüpft. Die erste Fassung hing an `body:has(.ag-header--ueberlagern)` und blieb im Betrieb auf 0 stehen — die Klasse stand nicht im Dokument. Vincent, 24.08.2026: „Mach einfach den padding oben größer." Desktop 144 = 80 Kopfhöhe (24 + 40 + 16, s. header.css) + 64 Luft Mobil 128 = 64 Kopfhöhe ( 8 + 48 + 8) + 64 Luft ACHTUNG: Der Wert gilt IMMER, auch wenn der Kopf im Fluss steht und seine Höhe schon selbst freihält. Dann steht die Kopfhöhe zweimal im Layout. Das ist bewusst in Kauf genommen; einzige Stellschraube ist diese Variable. */ --ag-hero-kopf-reserve: calc(var(--spacing-4xl) + var(--spacing-m)); /* 144 */ /* Abdunklung der unteren Herohälfte (Stufe C, Entscheidung Vincent 11.08.2026). Farbe = Gradients (fusions)/Dark Neutral — dieselbe, die im Hero-Verlauf bereits als drittes Radial steckt; die Abdunklung bleibt damit Teil des vorhandenen Farbsystems statt ein Fremdkörper zu sein. Stärken sind einheitenlose Zahlen, damit die Stops sie über calc() staffeln können; sie sind die einzige Stellschraube. */ --ag-hero-scrim-farbe: var(--c-fusion-dark); --ag-hero-scrim-staerke: 52; /* Prozent, s. calc() unten */ --ag-hero-scrim-reichweite: 44%; /* Anteil der Herohöhe */ --ag-hero-scrim-zone-staerke: 22; /* zusätzlich an der Buttonzeile */ --ag-hero-scrim-zone-breite: 1080px; --ag-hero-scrim-zone-hoehe: 360px; position: relative; overflow: hidden; isolation: isolate; /* Stapelkontext für den Scrim */ background: var(--gradient-preset-verlauf, var(--ag-hero-bg)); /* CSS-Nachbau background·Farbe=Verlauf (Entscheidung Vincent 10.08.) */ color: var(--ag-hero-fg); margin-block-start: var(--ag-hero-space-before); margin-block-end: var(--ag-hero-space-after); font-family: var(--font-sans); letter-spacing: -0.02em; } /* Grundabdunklung: läuft von der Unterkante nach oben aus. Die sieben Stops bilden eine Smoothstep-Rampe (1 · .926 · .741 · .5 · .259 · .074 · 0) — eine lineare Rampe setzt an ihrem oberen Ende einen sichtbaren Knick, die weiche liest sich als Teil des Verlaufs. Warum ::after und nicht ::before: Elementor belegt ::before als Overlay-Layer (Lehre 10.08.2026). Warum ein eigenes Element und nicht ein weiterer Layer in --gradient-preset-verlauf: dessen Radien sind absolute Pixel und auf 1440 kalibriert, die Abdunklung soll dagegen an der Herohöhe hängen. */ .ag-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--ag-hero-scrim-reichweite); background: linear-gradient(to top, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-staerke) * 1%), transparent) 0%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-staerke) * .926%), transparent) 16.7%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-staerke) * .741%), transparent) 33.3%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-staerke) * .5%), transparent) 50%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-staerke) * .259%), transparent) 66.7%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-staerke) * .074%), transparent) 83.3%, transparent 100%); pointer-events: none; z-index: 0; } .ag-hero__inner { position: relative; z-index: 1; /* über der Grundabdunklung */ /* Inhalt exakt auf --content-width (1200, Values/Sizes&Breakpoints/Content): Seitenpolster wächst ab 1248 px auf die Zentrier-Ränder an. */ padding: var(--ag-hero-pad-oben, calc(var(--spacing-xxl) + var(--ag-hero-kopf-reserve))) max(var(--spacing-ml), calc((100% - var(--content-width, 1200px)) / 2)) var(--ag-hero-pad-unten, var(--ag-luft-sektion-fuss)); /* oben 128 + 144 Kopfreserve = 272 / 24+ / 40 */ display: flex; flex-direction: column; align-items: flex-start; min-height: 935px; /* Quelle: Sektionshöhe Default (935) */ /* Layout lt. Quelle: Headline oben links, Copy unten rechts (rechte Spalte), Trennlinie volle Breite, Buttons unten links. */ } /* Kompakt. Nur oben kommt die Kopfreserve dazu — unten hat der Kopf nichts verloren. Deshalb zwei Werte statt der früheren Kurzform. */ .ag-hero--subpage .ag-hero__inner { padding-block: var(--ag-hero-pad-oben, calc(var(--spacing-xxl) + var(--ag-hero-kopf-reserve))) var(--ag-hero-pad-unten, var(--ag-luft-sektion-fuss)); min-height: 0; } .ag-hero__headline { margin: 0; /* Stufe hero-80 (Display/L 80/93 Light) als Vorgabe — deckungsgleich mit der Figma-Quelle. Ausnahmeregel Vincent, 19.08.2026: Die 80er-Schrift ist allein dem Hero erlaubt; die frühere Vorgabe hero-56 vom selben Tag ist damit aufgehoben (Projekt-Doc titel-stufen-rollout-19-08.md). Der Fallback greift nur, wenn kein Wert am Widget gewählt ist. */ font-size: var(--ag-hero-headline-fs, var(--ag-titel-hero-80-fs)); line-height: var(--ag-hero-headline-lh, var(--ag-titel-hero-80-lh)); font-weight: var(--ag-hero-headline-fw, var(--ag-titel-hero-80-fw)); color: inherit; } /* Headline und Copy teilen sich die Inhaltsbreite. Die Copy ist auf 552 begrenzt und rechts ausgerichtet; ohne Grenze lief die Headline darunter durch — gemessen 08.09.2026 bei 1440: Headline 723 + Copy 552 = 1275 bei 1200 Inhaltsbreite, Ueberlappung 75. Elementor-Notiz 45 (Vincent). Nur oberhalb von --bp-md, darunter stehen beide voll. NICHT im media-fact-Hero (Korrektur 08.09.2026): dort steht die Headline in der linken Rasterspalte (6:6 = 588). 588 − 552 − 40 = −4; ein negativer max-width-Wert wird auf 0 geklemmt, der Titel brach nach jedem Wort um. Die Untergrenze max(50%, …) sorgt dafuer, dass die Regel auch in einer schmalen Spalte nie unter die halbe Spaltenbreite faellt. */ @media (min-width: 769px) { .ag-hero:not(.ag-hero--media-fact):not(.ag-hero--flywheel) .ag-hero__headline { /* flywheel seit 6.16.0: Copy steht darunter */ max-width: max(50%, calc(100% - 552px - var(--spacing-xl))); } } /* Die frühere Sonderregel `.ag-hero--subpage .ag-hero__headline` (fest Display/M 56/67) ist seit 19.08.2026 entfallen: Sie hätte die gewählte Stufe überschrieben, und ihr Wert ist mit dem neuen Default (hero-56) identisch. Wer für Unterseiten eine andere Stufe will, wählt sie am Widget — das ist der Zweck des Controls. */ .ag-hero__copy { font-size: var(--fs-600); /* Copy/L 24/32 Light */ line-height: calc(32 / 24); font-weight: var(--fw-light); max-width: 552px; margin-top: auto; /* an das untere Drittel */ align-self: flex-end; /* rechte Spalte */ margin-bottom: var(--spacing-xl); } .ag-hero__copy > * { margin: 0 0 var(--spacing-m); } .ag-hero__copy > *:last-child { margin-bottom: 0; } .ag-hero__linie { width: 100%; border-top: var(--border-width-xs) solid var(--ag-hero-fg); opacity: .6; margin-bottom: var(--spacing-l); } .ag-hero__actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-m); } /* Zone unter der Buttonzeile — hängt an den Buttons, nicht an der Sektionsunterkante. Dadurch wandert sie mit, wenn Headline oder Copy den Hero höher machen; die Grundabdunklung allein täte das nicht. z-index -1 innerhalb von __inner heißt: hinter allen Inhalten dieses Blocks, aber vor der Grundabdunklung. */ .ag-hero__actions::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--ag-hero-scrim-zone-breite); height: var(--ag-hero-scrim-zone-hoehe); translate: -50% -50%; background: radial-gradient(closest-side ellipse, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-zone-staerke) * 1%), transparent) 0%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-scrim-zone-staerke) * .62%), transparent) 55%, transparent 100%); pointer-events: none; z-index: -1; } /* Ohne Copy zieht die Linie den unteren Block selbst nach unten */ .ag-hero__headline + .ag-hero__linie, .ag-hero__grafik + .ag-hero__linie { margin-top: auto; } .ag-hero__grafik { position: absolute; right: max(var(--spacing-ml), calc((100% - var(--content-width, 1200px)) / 2)); top: var(--spacing-4xl); max-width: 40%; max-height: 560px; object-fit: var(--ag-hero-media-fit, contain); object-position: var(--ag-hero-media-position, center); } /* AI-Badge (26.09.2026): Mit Badge steht die Deko-Grafik in einem Rahmen. Der Rahmen übernimmt Lage und Höchstmaße von .ag-hero__grafik, das Bild füllt ihn. (0,2,0) schlägt .ag-ai-badge-rahmen (Breite 100 %, relativ). */ .ag-hero .ag-hero__grafik--rahmen { position: absolute; display: block; width: auto; line-height: 0; } .ag-hero .ag-hero__grafik--rahmen > .ag-hero__grafik-bild { display: block; width: auto; height: auto; max-width: 100%; max-height: 560px; object-fit: var(--ag-hero-media-fit, contain); object-position: var(--ag-hero-media-position, center); } @media (max-width: 767px) { /* --bp-md, A5 offen (tmp) */ .ag-hero { --ag-hero-scrim-zone-breite: 120%; --ag-hero-scrim-zone-hoehe: 240px; } /* CTA volle Breite → Zone mitziehen */ /* Mobiler Kopf ist 64 hoch (8 + 48 + 8, header.css @media max-width 767), dazu 64 Luft. */ .ag-hero { --ag-hero-kopf-reserve: calc(var(--spacing-xxl) * 2); } /* 128 */ .ag-hero__inner { flex-direction: column; align-items: stretch; padding-block: var(--ag-hero-pad-oben, calc(var(--spacing-xxl) + var(--ag-hero-kopf-reserve))) var(--ag-hero-pad-unten, var(--ag-luft-sektion-fuss)); } .ag-hero__headline { font-size: var(--fs-800); line-height: 1.15; } /* Mobil-Stufe: 40 (Quelle 375er-Variante, Näherung tmp) */ /* Notbruch statt Überlauf (QS Vincent, 26.09.2026): Ein einzelnes Wort, das breiter ist als die Zeile („Dienstleistungsunternehmen" misst bei 30 px 358, die Zeile 342), bricht hier ohne Trennstrich um. Wirkt NUR bei solchen Wörtern — alle anderen Titel bleiben ungetrennt (Regel base.css, Vincent 17.09.2026). Sauberer Bruch: `­` im Titel setzen, ag_text_kleben() lässt ihn stehen. */ .ag-hero__headline { overflow-wrap: break-word; } .ag-hero__actions .ag-button { width: 100%; } /* Regel „CTA volle Breite" */ } /* ── Typ media-fact (3.101.0) ──────────────────────────────────────────── Quelle: hero `Typ=media-fact, Breakpoint=Desktop` (3607:71671), gemessen 25.08.2026: helle Fläche Surface/light, Text/standard, Container 1200, zwei Spalten 588 · 548 mit Gap spacing/xxl 64, Padding-Block 102 (keine Leiterstufe — tmp, Finding F-MF-4), Breadcrumb Copy/M (Text/link, letzter Eintrag Text/standard), Titel-Stufe hero-56, Copy/L, Actions Gap spacing/ml. Kopfreserve kommt wie beim Basis-Hero obendrauf (Regel Vincent 24.08.2026 — Abweichung von der Quelle, die keinen überlagernden Kopf kennt). Kontrakt: KONTRAKT-ag-media-fact-25-08.md §3. */ .ag-hero--media-fact { /* Innenabstand OBEN 4xl = 128 (Entscheidung Vincent, 26.08.2026). Bis 3.119.0 stand hier der gemessene Quellwert 102px als `tmp`, weil er auf keiner Stufe der Figma-Leiter liegt (F-MF-4). Der Befund ist damit geschlossen — die Leiterstufe gewinnt, die Quelle zieht nach. */ --ag-hero-mf-pad-block: var(--spacing-4xl); /* Innenabstand UNTEN xxl = 64 (Entscheidung Vincent, 26.08.2026, 3.131.0). Bewusste Abweichung in beide Richtungen: Bis 3.130.0 stand hier derselbe Wert wie oben (128), die Figma-Quelle 3607:71671 zeigt am `container` 40 (spacing/xl). 64 liegt auf der Leiter und schließt F-MF-8. Rückspielpunkt für 0.8 — Figma zieht nach. */ --ag-hero-mf-pad-unten: var(--ag-luft-sektion-fuss); background: var(--color-surface-light); color: var(--color-text-standard); } .ag-hero--media-fact::after { content: none; } /* keine Abdunklung auf heller Fläche */ .ag-hero--media-fact .ag-hero__actions::before { content: none; } .ag-hero--media-fact .ag-hero__inner { display: grid; /* Aufteilung über den Modifier unten. Fallback 6:6, falls eine Bestandsinstanz ohne Modifier gerendert wird. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Spaltenabstand 64 (Auftrag Vincent, 26.08.2026 — zurück auf den Wert der Quelle, nachdem er im selben Lauf kurz auf der Rasterrinne 24 stand). Folge: Die `fr`-Anteile unten halten weiterhin das Verhältnis 6:6 bzw. 8:4, die absoluten Spaltenbreiten liegen aber nicht mehr auf einem Rasterpunkt des 12ers — 1200 − 64 = 1136 verteilt auf zwei Spalten. */ column-gap: var(--spacing-xxl); /* Quelle: 64 */ /* Zeilenabstand nur für das Aktionsband unter den Spalten (3.130.0). Quelle 3607:71671, container itemSpacing 96 = spacing/3xl. */ row-gap: var(--spacing-3xl); /* Quelle: 96 */ align-items: center; /* Quelle: Media vertikal zentriert */ min-height: 0; /* Die Abstände-Sektion setzt --ag-hero-pad-oben/-unten per Selector auf .ag-hero — sie gewinnen wie beim Basis-Hero. Fix 25.08.2026: die erste Fassung überschrieb padding-block fest und ignorierte beide Controls. */ /* Oben exakt 128, OHNE Kopfreserve (Auftrag Vincent, 26.08.2026). Vorher 128 + 144 = 272. Die Reserve stammt vom Basis-Hero, dessen Headline direkt unter dem überlagernden Kopf beginnt; hier steht zuerst die Breadcrumb, und 128 reichen: Der Kopf ist auf Desktop 80 hoch (24 + 40 + 16, header.css), mobil 64 — es bleiben 48 bzw. 64 Luft. Damit ist der Wert zugleich deckungsgleich mit der Figma-Quelle, die keinen überlagernden Kopf kennt. */ /* Unten 64 statt 128 (Entscheidung Vincent, 26.08.2026, 3.131.0) — der Wert steht als eigene Variable oben, damit oben und unten getrennt bleiben. Ein am Widget gesetztes --ag-hero-pad-unten gewinnt weiterhin. */ padding-block: var(--ag-hero-pad-oben, var(--ag-hero-mf-pad-block)) var(--ag-hero-pad-unten, var(--ag-hero-mf-pad-unten)); } /* Aufteilung der beiden Spalten (Auftrag Vincent, 26.08.2026). Die `fr`-Anteile tragen das Verhältnis aus dem 12-Spalten-Raster der Seite 0.4 (Spaltenbreite (1200 − 11 × 24) / 12 = 78, innere Rinne 24): 6:6 → 588 : 588 (je 6 Spalten) 8:4 → 792 : 384 (8 bzw. 4 Spalten) Zwischen den beiden Spalten stehen 64 statt der Rasterrinne 24 (Auftrag Vincent). Verteilt werden dadurch 1200 − 64 = 1136: 6:6 → 568 · 64 · 568 = 1200 8:4 → 765 · 64 · 371 = 1200 Das Verhältnis stimmt, die absoluten Breiten liegen auf keinem Rasterpunkt — bewusst, Finding F-MF-7. */ .ag-hero--media-fact .ag-hero__inner--aufteilung-6-6 { grid-template-columns: minmax(0, 588fr) minmax(0, 588fr); } .ag-hero--media-fact .ag-hero__inner--aufteilung-8-4 { grid-template-columns: minmax(0, 792fr) minmax(0, 384fr); } .ag-hero--media-fact .ag-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-l); /* Quelle: 32 (Titelblock/Copy) */ min-width: 0; } /* Aktionsband mit Trennlinie (3.130.0–8.8.0) entfallen — seit 9.0.0 stehen die Buttons bei allen Layouts in der Textspalte (Block „Typ media-fact · Layout media" unten; Entscheidung Vincent 24.09.2026). */ .ag-hero__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-s); font-size: var(--fs-300); /* Figma Copy/M */ line-height: calc(21 / 16); } /* Doppelklasse gegen Kit-Linkfarbe (0,1,1) — Regel agenic-figma-zu-widget */ .ag-hero--media-fact .ag-hero__breadcrumb-link, .ag-hero--media-fact .ag-hero__breadcrumb-link:visited { color: var(--color-text-link); text-decoration: none; } .ag-hero--media-fact .ag-hero__breadcrumb-link:hover, .ag-hero--media-fact .ag-hero__breadcrumb-link:focus { color: var(--color-text-link); text-decoration: underline; } .ag-hero__breadcrumb-aktuell { color: var(--color-text-standard); } .ag-hero__breadcrumb-trenner { color: var(--color-text-link); font-size: var(--fs-200); /* Figma Copy/S */ } .ag-hero--media-fact .ag-hero__headline { /* Quelle zeigt hero-56 — Fallback-Stufe abweichend vom Basis-Hero. Ein am Widget gewählter Wert (Selector-Variable) gewinnt weiterhin. */ font-size: var(--ag-hero-headline-fs, var(--ag-titel-hero-56-fs)); line-height: var(--ag-hero-headline-lh, var(--ag-titel-hero-56-lh)); font-weight: var(--ag-hero-headline-fw, var(--ag-titel-hero-56-fw)); } .ag-hero--media-fact .ag-hero__copy { margin: 0; /* Basis-Regeln (auto/flex-end) zurücksetzen */ align-self: flex-start; max-width: none; } .ag-hero--media-fact .ag-hero__actions { gap: var(--spacing-m); /* Quelle 3607:71671 (24.09.2026): actions itemSpacing 16 */ } .ag-hero__media { min-width: 0; display: flex; justify-content: center; } @media (max-width: 767px) { /* --bp-md, A5 offen (tmp); Mobil abgeleitet — Paritätslücke der Quelle (F Mobil, 25.08.2026) */ .ag-hero--media-fact .ag-hero__inner { display: flex; flex-direction: column; align-items: stretch; /* Mobil bleibt der Abstand zwischen den Blöcken bei 64 wie bis 3.129.1. Der row-gap 96 des Desktops gilt dem Aktionsband und würde die gestapelten Blöcke sonst mit auseinanderziehen. */ gap: var(--spacing-xxl); } .ag-hero__media { justify-content: stretch; } .ag-hero__media > .ag-media-fact { max-width: 100%; } /* Unten mobil höchstens 32 (Auftrag Vincent, QS 26.09.2026 — `ag-hero__inner--media-fact` padding-bottom 32). min(): ein kleinerer Wert aus „Innenabstand unten" gewinnt weiter, ein größerer wird gedeckelt. */ .ag-hero--media-fact .ag-hero__inner { padding-block-end: min(var(--ag-hero-pad-unten, var(--spacing-l)), var(--spacing-l)); } } /* ── Typ media-fact · Layout „media" (6.18.0, seit 9.0.0 für beide Medien) ─ Auftrag Vincent, 20.09.2026: „Ersetze B media facts erstmal in Elementor … diverse Textlängen … ohne Divider." Quelle seit 24.09.2026: hero `Typ=media-fact` 3607:71671 (Desktop) / 4992:124818 (Mobil) mit dem Set `media-fact-kombination` 4992:122914 (Medium bild | flywheel × Karten 0–3). Die Wurzel trägt drei Klassen: `ag-hero--media-fact` (Fläche, Breadcrumb, Raster, Titel-Stufe), `ag-hero--media` (dieses Layout) und `ag-hero--medium-{bild|flywheel}`. Gleiche Spezifität wie der Block oben — deshalb steht dieser Block danach. Layout: Medium trägt die Spaltenhöhe (mindestens 4:3), Chips innen auf festen Plätzen, Buttons 40 unter der Copy, keine Trennlinie (Vincent, 20.09. und 24.09.2026). Bild, Bildfläche, Flywheel und Chips gestaltet media-fact.css (Partial ag_render_media_fact) — hier stehen nur Raster, Textabstände und die Einblendung. Textlängen: Titel und Copy dürfen beliebig lang werden — die Medium-Zelle streckt sich über das Raster mit; ein zu langes Button-Label bricht im Button um, nicht aus der Spalte. */ .ag-hero--media .ag-hero__inner { row-gap: 0; /* kein Aktionsband mehr */ align-items: stretch; /* Bildzelle = Zeilenhöhe */ } .ag-hero--media .ag-hero__content { gap: 0; /* Abstände je Element, s. u. */ justify-content: center; /* kurzer Text: Block mittig zur Bildhöhe (Konzept-Vorschau) */ } .ag-hero--media .ag-hero__breadcrumb { margin-block-end: var(--spacing-l); } /* → Titel 32 (Quelle: Titelblock) */ .ag-hero--media .ag-hero__headline { /* −2 % der eigenen Größe (Quelle title 2500:7141). Von .ag-hero kommt −0,02em auf 16 px gerechnet = −0,32 px an — Befund, Basis-Hero unverändert (s. Typ flywheel). */ letter-spacing: -0.02em; -webkit-hyphens: manual; /* Überschriften nicht trennen (base.css, Vincent 17.09.) — hier auch bei heading_tag=div */ hyphens: manual; text-wrap: balance; } .ag-hero--media .ag-hero__copy { margin-block-start: var(--spacing-l); } /* Titel → Copy 32 (Quelle) */ .ag-hero--media .ag-hero__actions { margin-block-start: var(--spacing-xl); } /* Copy → Buttons 40 (Konzept, ohne Linie) */ .ag-hero--media .ag-hero__actions .ag-button { max-width: 100%; /* langes Label: Umbruch im Button statt Überlauf aus der Spalte */ text-align: start; } .ag-hero--media .ag-hero__hinweis { margin-block-start: var(--spacing-m); } /* Editor-Hinweise unter den Buttons */ /* Medium-Zelle: Wrapper als Raster 1 × 1, das Partial .ag-media-fact füllt die Zelle (Mindesthöhe 4:3 und Aufbau in media-fact.css); längere Texte strecken die Zelle über das Raster (align-items: stretch oben). */ .ag-hero--media .ag-hero__media { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: normal; /* Basisregel (Flex, zentriert) zurücksetzen */ min-width: 0; } .ag-hero--media .ag-hero__media > .ag-media-fact { max-width: none; } /* Gestapelt unter 1024 (--bp-lg, wie Typ flywheel — TMP: die Quelle kennt nur 1440 und 375). Zwischen 768 und 1023 wären die Spalten 328–456 breit; „Versicherungen" misst bei 56 px rund 390 px und bräche ohne Trennstrich. */ @media (max-width: 1023px) { /* --bp-lg */ .ag-hero--media .ag-hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-l); /* Text → Bild 32 (Konzept Mobil) */ } /* Flywheel unter dem Button (Auftrag Vincent, QS 26.09.2026). Das Rad ist höher als seine 4:3-Zelle und ragt oben um rund 8,2 % der Zellenbreite hinaus ((0,9014 × 519/512 − 0,75) / 2, Maße media-fact.css) — gemessen bei 390: 28 px (bei 1000: rund 78), damit blieben zwischen Button und Rad nur 4 statt 32. Der Rand in Prozent bezieht sich auf die Breite des Elternblocks = Zellenbreite, wächst also mit. Dazu liegt der Textblock über dem Medium: Kommt das Rad dem Button doch nahe (Drehung, Einblendung), bleibt der Button oben und klickbar. */ .ag-hero--medium-flywheel .ag-hero__media { margin-block: 8.2%; } /* oben und unten: das Rad ragt auf beiden Seiten gleich weit über */ .ag-hero--medium-flywheel .ag-hero__content { position: relative; z-index: 1; } } @media (max-width: 767px) { /* --bp-md, A5 offen (tmp) */ /* Titel: wie bisher im media-fact-Hero die fluide Stufe hero-56 (bei 375 gemessen 36 px); die Hilfsstufe 40 des Basis-Heros greift hier wegen der Spezifität nicht. Die Quelle 4992:124818 zeigt hero-56 — Entscheidung zur Mobil-Größe offen, deshalb kein eigener Wert. */ .ag-hero--media .ag-hero__actions { flex-direction: column; /* Buttons untereinander, volle Breite (Quelle Mobil) */ gap: var(--spacing-ms); /* 12 (Quelle Mobil) */ } /* Chips mobil: 1 Karte innen · 2 Karten beide im Bild in zwei Reihen (Bild wächst mit) · 3 Karten: Karte 1 innen, 2 + 3 nebeneinander darunter — media-fact.css (Option A, Entscheidung Vincent 30.09.2026). */ } /* ── Einblendung Typ media: Intro-Choreografie + atmende Bildfläche ───── Auftrag Vincent, 20.09.2026 („ja mache animationen" — Vorschlag E1 + E2 + E3): Bildfläche blüht auf und atmet danach in Dauerschleife, das Foto setzt sich von 1,04 auf 1,0, Breadcrumb, Titelzeilen (aus der Maske wie Typ flywheel), Copy, Buttons und Chips folgen gestaffelt. Mechanik = Typ flywheel: Wurzel `data-ag-anim="intro"` (render_media(); im Editor und bei „Einblendung aus" steht dort "none"), Startzustände nur mit `html.ag-anim-ready` (setzt reveal.js), Endzustand mit `is-inview`. Ohne Skript steht alles sofort; Bewegungsverzicht: alles fertig, nichts atmet. Seit 9.0.0 zielen die Selektoren auf das Partial (.ag-media-fact__*, media-fact.css); das Flywheel blendet wie das Bild ein, Chip 3 folgt Chip 2. Zeiten nur aus der Motion-Leiter (0.7): Schritt = stagger/m 120, Dauer xl 950 (Fläche und Foto 2xl 1600), Atmen loop-ambient × 2 wie die Hintergrundgrafik mesh-breathe (deko.css). */ .ag-hero--media { --ag-hero-md-schritt: var(--motion-stagger-m); /* 120 */ --ag-hero-md-atem-dauer: calc(var(--motion-duration-loop-ambient) * 2); /* 16 s je Richtung, wie --ag-deko-atem-dauer */ } /* Atmen: die Verlaufslage liegt als ::before 6 % größer in der geclippten Bildfläche und wandert ±2 % / skaliert bis 1,05 — kompositorfreundlich (transform), keine Neuberechnung des Verlaufs. Nur bei `intro`; WCAG 2.2.2: Zeiger oder Fokus im Hero hält sie an (Muster deko.css). */ .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__bildflaeche::before { animation: ag-hero-bildflaeche-atmen var(--ag-hero-md-atem-dauer) var(--motion-ease-inout) infinite alternate; } .ag-hero--media:hover .ag-media-fact__bildflaeche::before, .ag-hero--media:focus-within .ag-media-fact__bildflaeche::before, body.elementor-editor-active .ag-hero--media .ag-media-fact__bildflaeche::before { animation-play-state: paused; } @keyframes ag-hero-bildflaeche-atmen { from { transform: translate3d(-2%, 1.5%, 0) scale(1); } to { transform: translate3d(2%, -1.5%, 0) scale(1.05); } } /* Vor dem Skript (Muster 6.17.0, Typ flywheel): dieselben Startzustände, bevor reveal.js `ag-anim-ready` setzt — sonst ein fertig gemalter Hero, der ausblendet und wieder einblendet. Netz: kommt reveal.js nicht, zeigt ag-hero-fw-netz nach 3 s den Endzustand (Keyframe des Flywheel-Intros, Deckkraft 1 / kein Transform — passt hier unverändert). */ @media (prefers-reduced-motion: no-preference) and (scripting: enabled) { /* Exakt dieselben Werte wie die Startzustände unten — gemessen 20.09.2026: fehlt hier ein Transform, wandert das Element beim Setzen von `ag-anim-ready` erst dorthin und einen Frame später (is-inview) wieder zurück; die Bewegung geht verloren. */ html:not(.ag-anim-ready) .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__bildflaeche { opacity: 0; transform: scale(.97); animation: ag-hero-fw-netz 1ms 3s forwards; } html:not(.ag-anim-ready) .ag-hero--media[data-ag-anim="intro"] :is(.ag-media-fact__bild, .ag-media-fact__flywheel) { opacity: 0; animation: ag-hero-fw-netz 1ms 3s forwards; } html:not(.ag-anim-ready) .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__bild img { transform: scale(1.04); animation: ag-hero-fw-netz 1ms 3s forwards; } html:not(.ag-anim-ready) .ag-hero--media[data-ag-anim="intro"] :is( .ag-hero__breadcrumb, .ag-hero__copy, .ag-hero__actions, .ag-media-fact__chip ) { opacity: 0; transform: translateY(var(--motion-distance-reveal)); animation: ag-hero-fw-netz 1ms 3s forwards; } html:not(.ag-anim-ready) .ag-hero--media[data-ag-anim="intro"] .ag-hero__zeile-text { transform: translateY(105%); animation: ag-hero-fw-netz 1ms 3s forwards; } } @media (prefers-reduced-motion: no-preference) { /* `img` steht bewusst nicht in der :is()-Liste: `.ag-media-fact__bild img` hebt die Spezifität der ganzen Liste auf (0,4,2), und die Dauer- und Verzögerungsregeln unten (0,4,1) griffen nicht mehr (gemessen). */ html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] :is( .ag-media-fact__bildflaeche, .ag-media-fact__bild, .ag-hero__breadcrumb, .ag-hero__zeile-text, .ag-hero__copy, .ag-hero__actions, .ag-media-fact__chip ), html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__bild img { transition-property: opacity, transform; transition-duration: var(--motion-duration-xl); transition-timing-function: var(--motion-ease-standard); } /* Das Flywheel wird nur in der Deckkraft geführt: sein `transform` gehört der Scroll-Drehung (media-fact.css), und die Intro-Drehung macht die Deko selbst im SVG (10.1.0). Stünde es in der Liste oben, zöge die 950-ms- Transition jede Scroll-Bewegung nach — gemessen 24.09.2026. */ html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__flywheel { transition: opacity var(--motion-duration-xl) var(--motion-ease-standard); } /* Startzustände (gelten bis `is-inview`) */ html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"]:not(.is-inview) .ag-media-fact__bildflaeche { opacity: 0; transform: scale(.97); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"]:not(.is-inview) :is(.ag-media-fact__bild, .ag-media-fact__flywheel) { opacity: 0; } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"]:not(.is-inview) .ag-media-fact__bild img { transform: scale(1.04); /* E3: Foto setzt sich */ } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"]:not(.is-inview) :is( .ag-hero__breadcrumb, .ag-hero__copy, .ag-hero__actions, .ag-media-fact__chip ) { opacity: 0; transform: translateY(var(--motion-distance-reveal)); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"]:not(.is-inview) .ag-hero__zeile-text { transform: translateY(105%); /* E2: Titel aus der Maske */ } /* Reihenfolge (Verzögerungen in Schritten à 120): Fläche 0 · Foto 1 · Breadcrumb 2 · Titelzeilen 3–6 · Copy 6 · Buttons 7 · Chip 1 7 · Chip 2 8 — Ende ≈ 960 + 950 = 1,9 s. */ html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__bildflaeche { transition-duration: var(--motion-duration-2xl); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] :is(.ag-media-fact__bild, .ag-media-fact__flywheel) { transition-delay: calc(var(--ag-hero-md-schritt) * 1); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__bild img { transition-duration: var(--motion-duration-2xl); transition-delay: calc(var(--ag-hero-md-schritt) * 1); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-hero__breadcrumb { transition-delay: calc(var(--ag-hero-md-schritt) * 2); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-hero__zeile:nth-child(1) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-md-schritt) * 3); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-hero__zeile:nth-child(2) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-md-schritt) * 4); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-hero__zeile:nth-child(3) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-md-schritt) * 5); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-hero__zeile:nth-child(n+4) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-md-schritt) * 6); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-hero__copy { transition-delay: calc(var(--ag-hero-md-schritt) * 6); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-hero__actions { transition-delay: calc(var(--ag-hero-md-schritt) * 7); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__chip--1 { transition-delay: calc(var(--ag-hero-md-schritt) * 7); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__chip--2 { transition-delay: calc(var(--ag-hero-md-schritt) * 8); } html.ag-anim-ready .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__chip--3 { transition-delay: calc(var(--ag-hero-md-schritt) * 9); } } /* Bewegungsverzicht: nichts atmet (die Fläche bleibt — farbig, nicht weg). */ @media (prefers-reduced-motion: reduce) { .ag-hero--media[data-ag-anim="intro"] .ag-media-fact__bildflaeche::before { animation: none; } } /* Einblendung */ html.ag-anim-ready .ag-hero[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-hero[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-hero[data-ag-anim="reveal"], html.ag-anim-ready .ag-hero[data-ag-anim="reveal"]:not(.is-inview) { transition: none; transform: none; opacity: 1; } } /* ── Typ flywheel (6.16.0) ─────────────────────────────────────────────── Startseiten-Hero mit Flywheel und Leistungs-Index. Additiver Typ-Wert (Live-Regel: neue Werte kommen dazu, ersetzen nichts) — default, subpage und media-fact bleiben unverändert. Quelle: HTML-Prototyp `Claude outputs/hero-flywheel` (Runde 2, Freigabe „Bauen!" Vincent 20.09.2026), Projekt-Doc hero-flywheel-prototyp-20-09. Eine Figma-Quelle gibt es noch nicht — Code vor Figma, Rückspielpunkt 0.8. Atom: assets/css/flywheel.css (Partial ag_render_flywheel). Quellen der Werte Verlauf ........ --gradient-preset-verlauf + Grundabdunklung (oben) Raster ......... 1200 / 12 Spalten / Rinne 24 (Seite 0.4) Titel .......... Stufe am Widget (Default hero-80), höhenbegrenzt Copy → Buttons 40, Buttons zweispaltig, keine Linie, keine Bildmarke vor dem Slogan (Entscheidung Vincent, 20.09.2026 — ersetzt für diesen Typ hero-konzepte-17-09, Regel 4) Motion ......... Leiter 0.7 (xl 950, 2xl 1600, Stagger m 120 / s 60, reveal 36, shift 6, easing standard/spring) Intro .......... H1-Masken-Intro 950 / Stagger 120, Flywheel dreht 60° ein (startseite-design-konzept-18-09 §6) Choreografie (Start = `.is-inview` aus reveal.js, nur bei data-ag-anim="intro"; im Editor und bei „Einblendung aus" steht alles): Seit 6.17.0 erst das Rad, dann der Text (Vincent 20.09.2026: „erst Flywheel, dann Flywheel-Text. Nicht andersrum" · „der Text erscheint noch zuerst"). Bis 6.16.0 lief der Text ab 360, das Rad zeichnete bis ~1900 — die große Schrift war zuerst da. 0 Licht blüht auf ............................ 2xl 0 Flywheel + Nabe blenden auf ................ xl, Drehung 2xl 0+ sechs Segmente zeichnen sich, je +60; die drei Konturen je Segment um +30 ........ l → fertig 910 960 = --ag-hero-fw-text-start: Dachzeile 1080+ H1-Zeilen, je +120 .......................... xl 1440 Copy ........................................ xl 1560 Buttons ..................................... xl 1680+ Leistungs-Index, je +60 ..................... xl 1720 = --ag-hero-fw-kern-start: Kern (Zähler, Name, Satz) — erst wenn die ganze Rad-Animation durch ist: Drehung 2xl (1600), Schub des aktiven Segments (bis 1550), Konturen (910). Vincent 20.09.2026: „Die Flywheel-Animation soll durchlaufen, dann erst Flywheel-Text einblenden." Vor dem Skript: Solange reveal.js `ag-anim-ready` noch nicht gesetzt hat, zeigte der Browser den ganzen Hero kurz fertig an (Skripte stehen im Fuß) — der Text blitzte vor dem Rad auf. Der Block „Vor dem Skript" unten hält die Startzustände schon vorher, nur wenn Skripte laufen (`scripting: enabled`); nach 3 s zeigt ein Netz alles, falls reveal.js nie kommt. Gestapelt (≤ 1023, Rad unter dem Text) beginnt der Text bei 360 — dort sieht man das Rad beim Laden oft noch gar nicht. */ .ag-hero--flywheel { /* L3 — Werte ohne Leiterstufe tragen tmp */ --ag-hero-fw-mindesthoehe: 720px; /* tmp — darunter wächst der Hero mit dem Inhalt */ --ag-hero-fw-textbreite: 552px; /* = .ag-hero__copy im Basis-Hero */ /* Höhe und Luft oben (6.17.0). Werte von Vincent, 20.09.2026 (im Browser eingestellt): „padding-top: 32px · gap-row: 0px · min height 85svh". Vorher 100svh und oben die volle Kopfreserve (144) — zu viel Luft oben, die Folgesektion war nicht zu sehen. Der Block steht in sich zentriert zwischen Oberkante und Index; der Kopf liegt darüber. Die Untergrenze 720 (mindesthoehe) bleibt: Ohne sie rutschte der Titel bei 1280 × 720 unter den Kopf (gerechnet: 34 statt 88). Luft oben wächst auf niedrigen Bildschirmen mit (Entscheidung Vincent 20.09.2026, „Oben mitwachsen"): Mit festen 32 lag der Slogan bei 1024 × 768, 1366 × 768, 1440 × 790 und 1536 × 864 unter dem Kopf, Kontrast 2,5 (gemessen). Ab Hero-Höhe 814 (Fenster ≈ 958) gelten genau die 32; darunter so viel mehr, dass der Slogan mindestens 32 unter dem Kopf (80) steht. 846 ≈ 2 × 112 + Index 122 + Textblock ~500 (Titelstufe hero-80). */ --ag-hero-fw-hoehe: max(var(--ag-hero-fw-mindesthoehe), 85svh); /* tmp — Wert Vincent */ --ag-hero-fw-oben: clamp(var(--spacing-l), calc(846px - var(--ag-hero-fw-hoehe)), var(--ag-hero-kopf-reserve)); /* 32 = Wert Vincent; tmp */ --ag-hero-fw-rad: min(720px, 50vw, calc(var(--ag-hero-fw-hoehe) - 280px)); /* tmp — passt über den Index, Luft zum Kopf (2 × 80 + Index 120) */ --ag-hero-fw-rad-versatz-x: 6%; /* tmp — Rad ragt leicht über den Inhaltsrand */ --ag-hero-fw-rad-versatz-y: var(--spacing-l); /* 32 — Wert Vincent 20.09.2026: Rad tiefer als die Mitte */ --ag-hero-fw-takt: calc(var(--motion-duration-loop-ambient) / 2); /* tmp — 4 s je Leistung, halbe Ambient-Schleife */ --ag-hero-fw-intro-schritt: var(--motion-stagger-m); /* 120 */ --ag-hero-fw-text-start: calc(var(--ag-hero-fw-intro-schritt) * 8); /* 960 — Text erst nach dem Rad (fertig 910) */ --ag-hero-fw-kern-start: calc(var(--motion-duration-2xl) + var(--ag-hero-fw-intro-schritt)); /* 1720 — Kern nach der ganzen Rad-Animation */ --ag-hero-fw-zeiger: calc(var(--motion-distance-shift) * 2); /* tmp — 12 px Zeiger-Versatz */ --ag-hero-fw-linie: var(--color-border-on-inverse-strong); /* Haarlinien im Index */ --ag-hero-fw-textzone-staerke: 32; /* tmp — Prozent, wie --ag-hero-scrim-zone-staerke */ /* Grundfläche vor dem Aufblühen: dieselbe dunkle Basis, die im Verlauf unten liegt. Den Verlauf selbst trägt __licht, damit er sich bewegen darf, ohne die Sektionsfläche zu verschieben. */ background: var(--color-surface-darkest); } .ag-hero__licht { position: absolute; inset-block: 0; left: 50%; /* Die Radien in --gradient-preset-verlauf sind absolute Pixel, auf 1440 kalibriert (tokens.css). Unter 1440 Breite wird die Komposition sonst gestaucht: Auf 390 liegt das Grün-Zentrum direkt hinter dem Titel, Kontrast 2,3 : 1 (gemessen 20.09.2026). Deshalb ist die Lage mindestens 1440 breit und mittig beschnitten — derselbe Verlauf, nur nicht verzerrt. 1440 = Inhalt 1200 + 2 × Rand 120. */ width: max(100%, calc(var(--content-width) + 2 * var(--content-margin))); translate: -50% 0; z-index: -1; /* unter Grundabdunklung (::after, z 0) */ background: var(--gradient-preset-verlauf); pointer-events: none; } /* ── Raster ──────────────────────────────────────────────────────────── */ .ag-hero--flywheel .ag-hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--spacing-ml); /* Rasterrinne 24 */ row-gap: 0; /* Wert Vincent 20.09.2026 */ align-items: center; min-height: var(--ag-hero-fw-hoehe); /* Oben --ag-hero-fw-oben (32 bis Kopfreserve, siehe oben) — bis 6.16.0 immer die volle Kopfreserve. Controls (Abstände) gewinnen weiter. */ padding-block: var(--ag-hero-pad-oben, var(--ag-hero-fw-oben)) var(--ag-hero-pad-unten, var(--spacing-l)); } .ag-hero--flywheel .ag-hero__content { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 2; /* über dem Rad, falls es anstößt */ display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } /* Textzone — dieselbe Mechanik wie die Zone an der Buttonzeile im Basis-Hero (Stufe C, Entscheidung Vincent 11.08.2026), hier hinter dem ganzen Textblock. Grund: Eyebrow (16 px) stand oben links bei 4,2 : 1, gebraucht werden 4,5 (gemessen 20.09.2026). Farbe = Grundabdunklung. */ .ag-hero--flywheel .ag-hero__content::before { content: ""; position: absolute; /* Kasten größer als der Textblock, Zentrum bei 30 % / 30 % des Blocks (dort stehen Eyebrow und Titel, dort ist der Verlauf am hellsten). closest-side läuft genau an der linken/oberen Kante aus — keine sichtbare Kastenkante. Zur Buttonzeile hin übernimmt die Zone des Basis-Hero. */ inset: -50% -30% -30% -50%; background: radial-gradient(closest-side ellipse at 44.4% 44.4%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-fw-textzone-staerke) * 1%), transparent) 0%, color-mix(in srgb, var(--ag-hero-scrim-farbe) calc(var(--ag-hero-fw-textzone-staerke) * .62%), transparent) 55%, transparent 100%); pointer-events: none; z-index: -1; } .ag-hero__buehne { grid-column: 8 / -1; grid-row: 1; align-self: stretch; position: relative; min-height: 0; /* Rad liegt absolut und darf überstehen */ } .ag-hero__buehne > .ag-flywheel { --ag-flywheel-groesse: var(--ag-hero-fw-rad); position: absolute; left: calc(50% + var(--ag-hero-fw-rad-versatz-x)); top: 50%; translate: calc(-50% + var(--ag-hero-zeiger-x, 0) * var(--ag-hero-fw-zeiger)) calc(-50% + var(--ag-hero-fw-rad-versatz-y) + var(--ag-hero-zeiger-y, 0) * var(--ag-hero-fw-zeiger) + var(--ag-hero-scroll, 0) * var(--spacing-3xl)); transition: translate var(--motion-duration-2xl) var(--motion-ease-standard); } /* Scrollen dreht den Teller weiter — ohne Übergang, sonst hinkt er nach */ .ag-hero__buehne .ag-flywheel__drehteller { rotate: calc(var(--ag-hero-scroll, 0) * 90deg); } /* ── Text ────────────────────────────────────────────────────────────── */ /* Dachzeile und Titel nach der Figma-Quelle `title` (2500:7141, Stufe hero-56, gemessen 20.09.2026): Dachzeile Copy/M 16/21 Light −2 %, Abstand zum Titel 16 (title-container), Titel Display −2 %. Bis 6.16.0 stand die Dachzeile in Headline/S Medium ohne Laufweite (Vincent 20.09.2026: „Die Typografie von Titel und Dachzeile passt nicht"). */ .ag-hero__eyebrow { margin: 0 0 var(--spacing-m); /* 16 — title-container gap */ font-size: var(--fs-300); /* Copy/M 16/21 Light */ line-height: calc(21 / 16); font-weight: var(--fw-light); letter-spacing: -0.02em; /* −2 % */ } /* Die Basisregel „Headline neben der Copy" (max-width) nimmt diesen Typ aus (:not(.ag-hero--flywheel) oben) — hier steht die Copy darunter. */ .ag-hero.ag-hero--flywheel .ag-hero__headline { margin: 0; /* Die Fensterhöhe deckelt die Stufe: Auf üblichen Laptop-Fenstern (1440 × ~790, 1536 × ~730) läge der Leistungs-Index sonst unter der Falz. Ab 1000 px Fensterhöhe bleibt es bei 80. Ein am Widget gewählter Wert (--ag-hero-headline-fs) wird ebenso gedeckelt. */ font-size: min(var(--ag-hero-headline-fs, var(--ag-titel-hero-80-fs)), 8svh); /* tmp */ /* −2 % der eigenen Größe (Figma Display). Geerbt kam −0,02em von .ag-hero an — dort auf 16 px gerechnet, also nur −0,32 px statt −1,12 (56) bzw. −1,6 (80). Der Basis-Hero hat denselben Fehler — Befund, dort nicht angefasst. */ letter-spacing: -0.02em; -webkit-hyphens: manual; /* hero-konzepte Regel 1 */ hyphens: manual; text-wrap: initial; /* Zeilen sind gesetzt, nicht balanciert */ } .ag-hero__zeile { display: block; overflow: clip; /* Luft für Unterlängen (g, p), damit die Maske nichts abschneidet */ padding-block-end: .12em; margin-block-end: -.12em; } .ag-hero__zeile-text { display: block; } .ag-hero--flywheel .ag-hero__copy { margin: var(--spacing-l) 0 0; /* 32 unter dem Titel */ align-self: auto; max-width: var(--ag-hero-fw-textbreite); -webkit-hyphens: manual; hyphens: manual; } /* Buttons zweispaltig, ohne Linie darüber (Entscheidung Vincent, 20.09.2026). Copy → Buttons 40. Jede Spalte nimmt die natürliche Breite ihres Buttons; reicht die Textspalte nicht (1024–1199), bricht die Beschriftung im Button um, nicht die Reihe. */ .ag-hero--flywheel .ag-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--spacing-m); /* 16 wie im Basis-Hero */ margin-block-start: var(--spacing-xl); /* 40 */ } .ag-hero--flywheel .ag-hero__actions .ag-button { text-align: start; } /* ── Leistungs-Index ─────────────────────────────────────────────────── */ .ag-hero__leistungen { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; column-gap: var(--spacing-ml); align-items: start; padding-block-start: var(--spacing-ml); } .ag-hero__leistungen-liste { grid-column: 1 / 7; display: grid; grid-template-columns: subgrid; /* Einträge auf dem Raster des Index, Liste bleibt Liste */ row-gap: var(--spacing-ml); margin: 0; padding: 0; list-style: none; } .ag-hero__leistung { min-width: 0; margin: 0; } /* Gegen Kit-/Theme-Linkfarben: `.elementor-kit-7 a` und `a:hover` stehen bei (0,1,1) bzw. (0,2,1) — deshalb (0,3,0) für Ruhe, Hover, Fokus und aktiv (Regel agenic-figma-zu-widget „Kit-Regeln absichern"). */ .ag-hero .ag-hero__leistung-link.ag-hero__leistung-link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nr pfeil" "name name"; align-items: center; row-gap: var(--spacing-xs); padding-block: var(--spacing-m) var(--spacing-xs); border-top: var(--border-width-xs) solid var(--ag-hero-fw-linie); color: var(--color-text-on-inverse-muted); text-decoration: none; -webkit-hyphens: manual; hyphens: manual; transition: color var(--motion-hover) var(--motion-ease-standard); } /* Fortschritt des Takts — liegt auf der Haarlinie und läuft von links */ .ag-hero__leistung-link::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--border-width-xs)); height: var(--border-width-s); background: var(--color-text-inverse-soft); transform: scaleX(0); transform-origin: left center; } .ag-hero .ag-hero__leistung-link.is-aktiv, .ag-hero .ag-hero__leistung-link.ag-hero__leistung-link:is(:hover, :focus-visible) { color: var(--color-text-inverse-soft); text-decoration: none; } .ag-hero__leistung-link.is-aktiv::before { transform: scaleX(1); } .ag-hero--flywheel.is-takt .ag-hero__leistung-link.is-aktiv::before { animation: ag-hero-fw-takt var(--ag-hero-fw-takt) var(--motion-ease-linear) both; } .ag-hero__leistung-link:focus-visible { outline: var(--border-width-s) solid currentColor; /* Fokus per outline (0.7) */ outline-offset: var(--spacing-xs); } .ag-hero__leistung-nr { grid-area: nr; font-size: var(--fs-200); /* Copy/S 14 */ line-height: calc(20 / 14); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; letter-spacing: 0; } .ag-hero__leistung-name { grid-area: name; min-width: 0; font-size: var(--ag-titel-label-16-fs); /* Headline/S 16/21 Medium */ line-height: var(--ag-titel-label-16-lh); font-weight: var(--ag-titel-label-16-fw); letter-spacing: 0; overflow-wrap: anywhere; } .ag-hero__leistung-pfeil { grid-area: pfeil; opacity: 0; translate: calc(-1 * var(--motion-distance-shift)) 0; transition: opacity var(--motion-hover) var(--motion-ease-standard), translate var(--motion-hover) var(--motion-ease-standard); } .ag-hero__leistung-link:hover .ag-hero__leistung-pfeil, .ag-hero__leistung-link:focus-visible .ag-hero__leistung-pfeil { opacity: 1; translate: 0 0; } /* Hinweis nur im Editor (leere oder zu lange Leistungsliste) */ .ag-hero__hinweis { grid-column: 1 / -1; margin: 0; font-size: var(--fs-200); } /* Anhalten — WCAG 2.2.2: Bewegung länger als 5 s braucht einen Schalter */ .ag-hero__pause.ag-hero__pause { grid-column: 7; display: inline-grid; place-items: center; width: var(--spacing-xl); /* 40 */ height: var(--spacing-xl); margin-block-start: var(--spacing-s); padding: 0; border: var(--border-width-xs) solid var(--ag-hero-fw-linie); border-radius: var(--radius-max); background: transparent; color: var(--color-text-inverse-soft); cursor: pointer; transition: border-color var(--motion-hover) var(--motion-ease-standard); } /* `.elementor-kit-7 button:hover/:focus` (0,2,1) setzen Fläche und Farbe — Zustände deshalb ebenfalls auf (0,3,0) */ .ag-hero__pause.ag-hero__pause:is(:hover, :focus, :focus-visible) { background: transparent; color: var(--color-text-inverse-soft); } .ag-hero__pause.ag-hero__pause:hover { border-color: currentColor; } .ag-hero__pause:focus-visible { outline: var(--border-width-s) solid currentColor; outline-offset: var(--spacing-xxs); } .ag-hero__pause-icon--weiter { display: none; } .ag-hero__pause[aria-pressed="true"] .ag-hero__pause-icon--halt { display: none; } .ag-hero__pause[aria-pressed="true"] .ag-hero__pause-icon--weiter { display: block; } .ag-hero__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Angehalten (Schalter) oder gehalten (Zeiger/Fokus auf Index oder Rad): Der Takt steht. Das Skript schaltet nicht weiter, solange der Fortschritt nicht endet. */ .ag-hero--flywheel.is-pausiert .ag-hero__leistung-link.is-aktiv::before { animation-play-state: paused; } /* Gehalten: der gewählte Eintrag steht voll da. Beim Loslassen beginnt sein Takt von vorn — die Animation wird neu angelegt. */ .ag-hero--flywheel.is-gehalten .ag-hero__leistung-link.is-aktiv::before { animation: none; transform: scaleX(1); } @keyframes ag-hero-fw-takt { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ── Intro ─────────────────────────────────────────────────────────────── Startzustand nur mit `html.ag-anim-ready` (setzt reveal.js) UND data-ag-anim="intro" (render_flywheel; im Editor und bei „Einblendung aus" steht dort "none"). Ohne Skript steht alles sofort — wie beim Standardmuster in reveal.css. Und nur ohne Bewegungsverzicht: Wer ihn eingestellt hat, sieht den Hero fertig. */ /* ── Vor dem Skript (6.17.0) ───────────────────────────────────────────── Dieselben Startzustände wie im Intro, aber schon bevor reveal.js die Klasse `ag-anim-ready` setzt — sonst malt der Browser den Hero einmal fertig (Skripte im Fuß) und blendet ihn dann aus und wieder ein. Nur mit laufenden Skripten (`scripting: enabled`; ohne Skript bleibt alles sichtbar) und ohne Bewegungsverzicht. Netz: Kommt reveal.js nicht, zeigt eine Animation nach 3 s den Endzustand. Sobald `ag-anim-ready` steht, greift der Block nicht mehr — dann übernimmt das Intro darunter. */ @media (prefers-reduced-motion: no-preference) and (scripting: enabled) { html:not(.ag-anim-ready) .ag-hero--flywheel[data-ag-anim="intro"] :is( .ag-hero__licht, .ag-flywheel__drehteller, .ag-hero__eyebrow, .ag-hero__copy, .ag-hero__actions, .ag-hero__leistung, .ag-hero__pause, .ag-flywheel__kern ), html:not(.ag-anim-ready) .ag-hero--flywheel[data-ag-anim="intro"] .ag-flywheel::before { opacity: 0; animation: ag-hero-fw-netz 1ms 3s forwards; } html:not(.ag-anim-ready) .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__zeile-text { transform: translateY(105%); animation: ag-hero-fw-netz 1ms 3s forwards; } html:not(.ag-anim-ready) .ag-hero--flywheel[data-ag-anim="intro"] .ag-flywheel__kontur { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ag-hero-fw-netz 1ms 3s forwards; } } @keyframes ag-hero-fw-netz { to { opacity: 1; transform: none; stroke-dashoffset: 0; } } @media (prefers-reduced-motion: no-preference) { html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] :is( .ag-hero__licht, .ag-flywheel__drehteller, .ag-hero__eyebrow, .ag-hero__zeile-text, .ag-hero__copy, .ag-hero__actions, .ag-hero__leistung, .ag-hero__pause, .ag-flywheel__kern ) { transition-property: opacity, transform, translate, scale, rotate; transition-duration: var(--motion-duration-xl); transition-timing-function: var(--motion-ease-standard); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"]:not(.is-inview) .ag-hero__licht { opacity: 0; transform: scale(1.12); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__licht { transition-duration: var(--motion-duration-2xl); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"]:not(.is-inview) .ag-flywheel__drehteller { opacity: 0; transform: rotate(-60deg) scale(.92); } /* Rad zuerst: sofort, Deckkraft in xl, die Drehung darf länger laufen */ html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-flywheel__drehteller { transition: opacity var(--motion-duration-xl) var(--motion-ease-standard), transform var(--motion-duration-2xl) var(--motion-ease-standard); } /* Nabe (flywheel.css, .ag-flywheel::before) kommt mit dem Rad */ html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-flywheel::before { transition: opacity var(--motion-duration-xl) var(--motion-ease-standard); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"]:not(.is-inview) .ag-flywheel::before { opacity: 0; } /* Konturen zeichnen sich — pathLength="1" am Pfad. Je Segment +60, innerhalb des Segments die drei Konturen je +30; Dauer l (550). Letzte Kontur: 5 × 60 + 2 × 30 + 550 = 910 — vor dem Text (960). */ html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-flywheel__kontur { stroke-dasharray: 1; stroke-dashoffset: 0; } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"]:not(.is-inview) .ag-flywheel__kontur { stroke-dashoffset: 1; fill-opacity: 0; } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"].is-inview:not(.is-intro-fertig) .ag-flywheel__kontur { transition: stroke-dashoffset var(--motion-duration-l) var(--motion-ease-standard) calc(var(--motion-stagger-s) * var(--ag-flywheel-i) + var(--motion-stagger-s) * var(--ag-flywheel-lage, 0) / 2), fill-opacity var(--motion-duration-xl) var(--motion-ease-standard) calc(var(--motion-stagger-s) * 8), translate var(--motion-duration-xl) var(--motion-ease-spring) calc(var(--motion-stagger-s) * 8 + var(--motion-stagger-s) * var(--ag-flywheel-lage, 0)); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"]:not(.is-inview) :is(.ag-hero__eyebrow, .ag-hero__copy, .ag-hero__actions, .ag-hero__leistung, .ag-hero__pause) { opacity: 0; transform: translateY(var(--motion-distance-reveal)); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"]:not(.is-inview) .ag-hero__zeile-text { transform: translateY(105%); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"]:not(.is-inview) .ag-flywheel__kern { opacity: 0; } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__eyebrow { transition-delay: var(--ag-hero-fw-text-start); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__zeile:nth-child(1) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 1); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__zeile:nth-child(2) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 2); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__zeile:nth-child(3) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 3); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__zeile:nth-child(4) .ag-hero__zeile-text { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 4); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__copy { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 4); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__actions { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 5); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__leistung { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 6 + var(--motion-stagger-s) * var(--ag-hero-fw-i, 0)); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-hero__pause { transition-delay: calc(var(--ag-hero-fw-text-start) + var(--ag-hero-fw-intro-schritt) * 6 + var(--motion-stagger-s) * 6); } /* Kern-Text erst nach der ganzen Rad-Animation (Drehung 2xl = 1600) */ html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"] .ag-flywheel__kern { transition-delay: var(--ag-hero-fw-kern-start); } /* Nach dem Intro: Verzögerungen weg, sonst hinkt jede spätere Änderung (Kernwechsel, Zeiger) um bis zu 1,4 s hinterher. Setzt das Skript. */ html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"].is-intro-fertig :is( .ag-hero__licht, .ag-flywheel__drehteller, .ag-hero__eyebrow, .ag-hero__zeile-text, .ag-hero__copy, .ag-hero__actions, .ag-hero__leistung, .ag-hero__pause, .ag-flywheel__kern ) { transition-delay: 0ms; } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"].is-intro-fertig .ag-flywheel__kern { transition-property: opacity, transform; transition-duration: var(--motion-state); } html.ag-anim-ready .ag-hero--flywheel[data-ag-anim="intro"].is-intro-fertig .ag-flywheel__kern.is-wechsel { transition-duration: var(--motion-duration-xs); } } /* ── Tablet und Mobil ────────────────────────────────────────────────── */ /* Zwischen 1024 und 1199 bleibt das Zwei-Spalten-Raster; die beiden Buttons (284 + 24 + 352 = 660 px) brechen dort in zwei Reihen — gestapelt wirkte die rechte Hälfte leer (Sichtprüfung 20.09.2026 bei 1024). */ @media (max-width: 1023px) { /* --bp-lg */ .ag-hero--flywheel { --ag-hero-fw-rad: min(560px, 86vw); /* tmp */ --ag-hero-fw-rad-versatz-x: 0%; --ag-hero-fw-rad-versatz-y: 0px; /* gestapelt: Rad steht in eigener Zeile, kein Tiefversatz */ --ag-hero-fw-text-start: calc(var(--ag-hero-fw-intro-schritt) * 3); /* 360 — Rad liegt unter dem Text */ } .ag-hero--flywheel .ag-hero__inner { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; min-height: 0; row-gap: var(--spacing-xl); padding-block-start: var(--ag-hero-pad-oben, var(--ag-hero-kopf-reserve)); /* gestapelt: Kopfreserve wie bis 6.16.0 */ } .ag-hero--flywheel .ag-hero__content { grid-column: 1 / -1; } .ag-hero.ag-hero--flywheel .ag-hero__headline { font-size: var(--ag-hero-headline-fs, var(--ag-titel-hero-80-fs)); } .ag-hero__buehne { grid-column: 1 / -1; grid-row: 2; min-height: var(--ag-hero-fw-rad); /* Rad liegt absolut — Höhe hier halten */ } .ag-hero__leistungen { grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--spacing-ml); padding-block-start: 0; } .ag-hero__leistungen-liste { grid-column: 1 / -1; } .ag-hero__pause.ag-hero__pause { grid-column: 1; margin-block-start: 0; } } @media (max-width: 767px) { /* --bp-md, A5 offen (tmp) */ .ag-hero--flywheel { --ag-hero-fw-rad: min(420px, calc(100vw - 2 * var(--spacing-m))); /* tmp */ } .ag-hero--flywheel .ag-hero__inner { padding-block: var(--ag-hero-pad-oben, var(--ag-hero-kopf-reserve)) var(--ag-hero-pad-unten, var(--ag-luft-sektion-fuss)); } .ag-hero--flywheel .ag-hero__content { align-items: stretch; } .ag-hero__eyebrow { align-self: flex-start; } .ag-hero__leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-hero--flywheel .ag-flywheel__name { font-size: var(--ag-titel-label-16-fs); /* Headline/S 16 — Innenkreis ist 214 px */ line-height: var(--ag-titel-label-16-lh); font-weight: var(--ag-titel-label-16-fw); } .ag-hero--flywheel .ag-flywheel__text { display: none; } /* Mobil-Stufe des Basis-Hero (hero.css: --fs-800, 40) — die Regel für Tablet oben ist spezifischer und würde sie sonst überschreiben. */ .ag-hero.ag-hero--flywheel .ag-hero__headline { font-size: var(--fs-800); line-height: 1.15; } .ag-hero__zeile { overflow: visible; } /* umbrechende Zeilen nicht kappen */ } /* Telefon: untereinander. Zweispaltig bräche „Agenten-Readiness-Check starten" bei 390 in vier Zeilen (Button 118 px hoch, gemessen 20.09.2026); ab 600 sind es höchstens zwei. Schwelle ohne Token — tmp. hero.css setzt die Buttons mobil ohnehin auf volle Breite (Regel „CTA volle Breite"). */ @media (max-width: 599px) { /* tmp */ .ag-hero--flywheel .ag-hero__actions { grid-template-columns: minmax(0, 1fr); } } /* ── Bewegung abbestellt ───────────────────────────────────────────────── Intro entfällt (s. o.), Takt startet nicht (Skript), Drehung steht (flywheel.css). Hier nur, was sonst noch wandert. */ @media (prefers-reduced-motion: reduce) { .ag-hero__buehne > .ag-flywheel { translate: -50% calc(-50% + var(--ag-hero-fw-rad-versatz-y)); transition: none; } .ag-hero__buehne .ag-flywheel__drehteller { rotate: 0deg; } .ag-hero__leistung-pfeil { translate: 0 0; transition: none; } .ag-hero__pause.ag-hero__pause { display: none; } /* nichts anzuhalten */ } /* ── Bild im (Imagify, live) — Muster card.css ───────────── Imagify packt das auf agenic.com in ein und verschiebt die Klasse dorthin; das steht ohne Klasse darin, füllt seinen Rahmen nicht und ignoriert Einpassung/Ausrichtung. Befund QS Vincent, 26.09.2026 („Bild ausfüllen funktioniert mobil nicht"), gemessen live auf /loesungen/microsoft-dynamics-365-crm/: 358 × 250, 358 × 239, object-fit fill. Das füllt jetzt das und erbt Einpassung und Ausrichtung. (0,2,2) schlägt `.elementor img { height: auto }` (0,1,1). */ .ag-hero picture.ag-hero__grafik-bild > img { display: block; box-sizing: border-box; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: inherit; object-fit: inherit; object-position: inherit; }