/** * agenic Komponenten-CSS – Media-Fact-Kombination (Organismus). * * Quelle: Figma Set `media-fact-kombination` (4992:122914, Seite 0.5, * 04 · Organisms), Neubau 24.09.2026. Medium-Zelle 568 × 462; Achsen * Medium (bild | flywheel) × Karten (0–3). Karten liegen innen, Rand 24: * Platz 1 unten links · Platz 2 oben rechts · Platz 3 unten rechts. * Bild füllt die Zelle (Radius radius/l 24); Bildfläche = gradient-preset * „unten dunkel“ 12 (spacing/ms) ringsum, Radius konzentrisch 24 + 12. * Flywheel: agenic flywheel · Typ=Gradient 512 × 519 mittig (Bestand * assets/img/flywheel.svg), optional gedreht über --ag-media-fact-fw-rot * (media-fact.js, nur mit data-ag-fw-scroll). * * flywheel-1-mittig (9.1.0): die eine Karte zentriert über dem Rad. * Raster 1 × 1: Bildfläche, Bild/Flywheel und Chips liegen in derselben * Zelle übereinander — keine festen Pixel, keine absoluten Prozentplätze * mehr (die Vorgänger-Collage brauchte je Layout ein eigenes Grundmaß). * ::before hält die Mindesthöhe 4:3 der Zellenbreite (Quelle [WIP] hero: * minHeight 426 bei 568); im hero streckt die Zeile die Zelle mit. * * Mobil (< 768, Grenze tmp — Grundsatzentscheid A5 offen), Entscheidung * Vincent 30.09.2026 (Option A, Projekt-Doc hero-fact-cards-mobil-30-09): * 1 Karte → innen unten links (Quelle hero Typ=media-fact Mobil 4992:124818). * 2 Karten → beide im Bild, das Bild wächst mit: Karte 2 oben rechts in * Reihe 1, Karte 1 unten links in Reihe 2. Überlappung ist so * konstruktiv unmöglich (vorher: beide in einer 4:3-Zelle, * gemessen 30.09.2026 bis 121 px Überdeckung auf /services/). * 3 Karten → Karte 1 im Bild, Karten 2 + 3 nebeneinander darunter. * Für 2 und 3 Karten gibt es keine Figma-Mobil-Variante — abgeleitet (TMP, * Rückspielpunkt 0.8: Set media-fact-kombination 4992:122914). */ .ag-media-fact, .ag-media-fact * { box-sizing: border-box; } .ag-media-fact { --ag-media-fact-radius: var(--radius-l); /* Quelle: Values/radius/l 24 */ --ag-media-fact-chip-abstand: var(--spacing-ml); /* Chip → Zellenrand 24 (Quelle: absolut gesetzt, Leiterstufe ml) */ --ag-media-fact-leer: var(--color-surface-medium); /* Fläche ohne Bild */ --ag-media-fact-bildflaeche-rand: var(--spacing-ms); /* Bildfläche 12 ringsum (Quelle: Instanz 592 × 486 um 568 × 462) */ --ag-media-fact-fw-breite: 90.14%; /* Flywheel 512 von 568 */ --ag-media-fact-fw-rot: 0deg; /* setzt media-fact.js beim Scrollen */ --ag-media-fact-fw-scroll-umfang: 60; /* Grad über die volle Durchquerung = ein Segment (6 Bögen); media-fact.js liest den Wert */ --ag-media-fact-media-fit: cover; /* Einfügemodus (object-fit), Figma „Fill“ */ --ag-media-fact-media-position: center; /* Ausrichtung (object-position) */ position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; min-width: 0; /* Abstände-Sektion des Widgets (ag_spacing_section) */ margin-block-start: var(--ag-media-fact-space-before, 0px); margin-block-end: var(--ag-media-fact-space-after, 0px); padding-block: var(--ag-media-fact-pad-oben, 0px) var(--ag-media-fact-pad-unten, 0px); } .ag-media-fact::before { content: ""; grid-area: 1 / 1; padding-block-start: 75%; /* Mindesthöhe 4:3 der Zellenbreite */ } /* ── Bild ────────────────────────────────────────────────────────── */ .ag-media-fact__bild { grid-area: 1 / 1; position: relative; min-height: 0; border-radius: var(--ag-media-fact-radius); overflow: hidden; background: var(--ag-media-fact-leer); } /* Blockname vorangestellt wegen `.elementor img { height: auto }` (0,1,1) — mit nur `.ag-media-fact__bild img` stünde es gleichauf und die Reihenfolge der Stylesheets entschiede. Begründung ausführlich in card.css. */ .ag-media-fact .ag-media-fact__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--ag-media-fact-media-fit, cover); object-position: var(--ag-media-fact-media-position, center); display: block; } /* ── Bildfläche: Verlauf 12 ringsum (Boolean „Bildfläche“ der Quelle) ─ Liegt in derselben Rasterzelle und ragt per negativem Rand über sie hinaus. Der Verlauf sitzt auf ::before, 6 % größer als die Fläche, damit er im hero atmen kann (hero.css). Token --gradient-preset-unten-dunkel (tokens.css, kalibriert gegen den Figma-Export, 20.09.2026). */ .ag-media-fact__bildflaeche { grid-area: 1 / 1; position: relative; margin: calc(-1 * var(--ag-media-fact-bildflaeche-rand)); border-radius: calc(var(--ag-media-fact-radius) + var(--ag-media-fact-bildflaeche-rand)); overflow: hidden; isolation: isolate; } .ag-media-fact__bildflaeche::before { content: ""; position: absolute; inset: -6%; background: var(--gradient-preset-unten-dunkel); } /* ── Flywheel ───────────────────────────────────────────────────── */ /* Absolut statt als Rasterkind: Die Deko (512 × 519) ist höher als die 4:3-Zelle (568 × 426) und darf sie nicht aufziehen — sie ragt wie in der Quelle oben und unten gleich weit über (Quelle: y −28 bei 462 Höhe). Seit 10.1.0 steckt das SVG inline in der Hülle (render-flywheel-deko.php); das Hintergrundbild bleibt als Rückfall, falls die Datei nicht lesbar war. */ .ag-media-fact__flywheel { position: absolute; inset: 0; margin: auto; width: var(--ag-media-fact-fw-breite); height: auto; aspect-ratio: 512 / 519; /* Quellmaß der Deko */ background: url('../img/flywheel.svg') no-repeat center / contain; /* Scroll-Drehung — und NUR sie. Die Intro-Choreografie fasst den Teller im SVG an, nie diese Hülle: zwei transform an einem Element überschreiben einander (Befund 24.09.2026). Ohne Transition, die Bewegung kommt vom Scrollen selbst (media-fact.js, requestAnimationFrame). */ transform: rotate(var(--ag-media-fact-fw-rot, 0deg)); transition: none; will-change: transform; pointer-events: none; } .ag-media-fact__flywheel:has(.ag-media-fact__fw-svg) { background: none; } .ag-media-fact__fw-svg { display: block; width: 100%; height: 100%; overflow: visible; } /* ── Eingangsanimation der Deko (10.1.0) ──────────────────────────── Auftrag Vincent, 24.09.2026: „Mache eine coole Eingangsanimation beim flywheel." Bild der Bewegung: Das Schwungrad **zeichnet sich** — die sechs Bögen laufen der Reihe nach im Kreis ein, die beiden versetzten Spuren folgen als Nachlauf, und der ganze Teller dreht dabei aus der Verdrehung in seine Lage und rollt aus. Möglich, weil die Bögen der Quelle Konturen sind (`stroke`, gemessen 24.09.2026): `pathLength="1"` im Partial, hier `stroke-dashoffset` 1 → 0. Dasselbe Muster wie das Startseiten-Flywheel (flywheel.css, `--ag-flywheel-lage`). Zeiten nur aus der Motion-Leiter (0.7): Teller 2xl 1600, Bögen xl 950, Staffelung s 60 je Bogen und m 120 je Spur — Ende ≈ 1,7 s, etwas vor dem Hero-Intro (1,9 s). Gate wie im Haus: Startzustand nur mit `html.ag-anim-ready` (reveal.js), Endzustand mit `is-inview` — kommt das Skript nicht, steht das Rad fertig da (reveal.js-Netz 4 s). */ .ag-media-fact__flywheel { --ag-media-fact-fw-start: -75deg; /* Teller-Vordrehung */ --ag-media-fact-fw-schritt: var(--motion-stagger-s); /* 60 je Bogen */ --ag-media-fact-fw-spur-schritt: var(--motion-stagger-m); /* 120 je Spur */ } .ag-media-fact__fw-teller, .ag-media-fact__fw-bogen { transform-box: view-box; /* Drehpunkt ist das Rad, nicht der eigene Bogen */ transform-origin: center; } /* Vor dem Skript (Muster hero.css, 6.17.0): derselbe Startzustand, bevor reveal.js `ag-anim-ready` setzt — sonst steht das Rad einen Frame fertig da und zeichnet sich danach rückwärts weg (gemessen 24.09.2026: Bogen-Offset sprang auf 0,43 statt 1). Netz: Bleibt reveal.js ganz aus, zeigt ag-media-fact-fw-netz nach 3 s den Endzustand — unsichtbar kann das Rad dadurch nie bleiben. `scripting: enabled` hält den Block von Seiten fern, auf denen ohnehin kein Skript läuft. */ @media (prefers-reduced-motion: no-preference) and (scripting: enabled) { html:not(.ag-anim-ready) .ag-media-fact__flywheel[data-ag-anim="reveal"] .ag-media-fact__fw-teller { transform: rotate(var(--ag-media-fact-fw-start)) scale(.88); animation: ag-media-fact-fw-netz 1ms 3s forwards; } html:not(.ag-anim-ready) .ag-media-fact__flywheel[data-ag-anim="reveal"] .ag-media-fact__fw-bogen { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: ag-media-fact-fw-netz 1ms 3s forwards; } } @keyframes ag-media-fact-fw-netz { to { transform: none; stroke-dashoffset: 0; opacity: 1; } } @media (prefers-reduced-motion: no-preference) { html.ag-anim-ready .ag-media-fact__flywheel[data-ag-anim="reveal"] .ag-media-fact__fw-teller { transition: transform var(--motion-duration-2xl) var(--motion-ease-standard); } html.ag-anim-ready .ag-media-fact__flywheel[data-ag-anim="reveal"] .ag-media-fact__fw-bogen { transition-property: stroke-dashoffset, opacity; transition-duration: var(--motion-duration-xl); transition-timing-function: var(--motion-ease-standard); /* Reihum: Bogen für Bogen (60), Spur für Spur (120) */ transition-delay: calc(var(--ag-media-fact-fw-schritt) * var(--ag-fw-i, 0) + var(--ag-media-fact-fw-spur-schritt) * var(--ag-fw-spur, 0)); } /* Startzustand (gilt bis `is-inview`): Teller verdreht und kleiner, Konturen ungezeichnet. `pathLength="1"` setzt das Partial — deshalb rechnen dasharray und dashoffset hier in Anteilen. */ html.ag-anim-ready .ag-media-fact__flywheel[data-ag-anim="reveal"] .ag-media-fact__fw-bogen { stroke-dasharray: 1; } html.ag-anim-ready .ag-media-fact__flywheel[data-ag-anim="reveal"]:not(.is-inview) .ag-media-fact__fw-teller { transform: rotate(var(--ag-media-fact-fw-start)) scale(.88); } html.ag-anim-ready .ag-media-fact__flywheel[data-ag-anim="reveal"]:not(.is-inview) .ag-media-fact__fw-bogen { stroke-dashoffset: 1; opacity: 0; } } /* Bewegungsverzicht: Das Rad steht fertig — sichtbar, ohne Drehung. */ @media (prefers-reduced-motion: reduce) { .ag-media-fact__flywheel { transform: none; } .ag-media-fact__fw-teller { transform: none; transition: none; } .ag-media-fact__fw-bogen { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; transition: none; } } /* ── Chips ───────────────────────────────────────────────────────── */ .ag-media-fact__chip { grid-area: 1 / 1; z-index: 1; margin: var(--ag-media-fact-chip-abstand); max-width: calc(100% - 2 * var(--ag-media-fact-chip-abstand)); /* Kein `hyphens: manual` mehr (bis 10.26.0): Es vererbte sich in die Karte und nahm ihr die Trennstriche. Die Karte regelt die Trennung selbst (float-fact-card.css, 10.26.1, Auftrag Vincent 25.09.2026). */ } .ag-media-fact__chip .ag-float-fact-card { max-width: 100%; } .ag-media-fact__chip--unten-links { align-self: end; justify-self: start; } /* Platz 1 */ .ag-media-fact__chip--oben-rechts { align-self: start; justify-self: end; } /* Platz 2 */ .ag-media-fact__chip--unten-rechts { align-self: end; justify-self: end; } /* Platz 3 */ .ag-media-fact__chip--mitte { place-self: center; } /* flywheel-1-mittig (9.1.0, Quelle 4996:21077) */ /* ── Mobil: abgeleitet (s. Kopfkommentar) ───────────────────────── */ @media (max-width: 767px) { /* tmp — A5 offen */ .ag-media-fact { --ag-media-fact-chip-abstand: var(--spacing-m); /* 16 (Quelle Mobil 4992:124818 zeigt 24 im 343er-Bild — TMP, Karte M ist 270 breit) */ --ag-media-fact-radius: var(--radius-m); /* 16 (Quelle Mobil) */ grid-template-rows: minmax(0, 1fr) auto auto; } .ag-media-fact__chip--2, .ag-media-fact__chip--3 { align-self: auto; justify-self: stretch; margin: var(--spacing-m) 0 0; max-width: none; } .ag-media-fact__chip--2 { grid-area: 2 / 1; } .ag-media-fact__chip--3 { grid-area: 3 / 1; } .ag-media-fact__chip--2 .ag-float-fact-card, .ag-media-fact__chip--3 .ag-float-fact-card { width: 100%; } /* ── Zwei Karten: beide im Bild, das Bild wächst mit (Option A) ── Zwei Reihen statt einer Zelle. ::before, Bild und Bildfläche spannen beide Reihen, die Karten belegen je eine. Randabstand nur außen (16), dazwischen einmal 16: Zellenhöhe = 16 + K2 + 16 + K1 + 16, mindestens aber 4:3 (::before). Das Flywheel bleibt absolut mittig über der ganzen Zelle. Entscheidung Vincent 30.09.2026, ersetzt die Fassung vom 26.09.2026 („Card soll im Bild liegen“ — beide in einer Zelle). */ .ag-media-fact--karten-2 { grid-template-rows: auto auto; } .ag-media-fact--karten-2::before, .ag-media-fact--karten-2 .ag-media-fact__bild, .ag-media-fact--karten-2 .ag-media-fact__bildflaeche { grid-area: 1 / 1 / 3 / 2; } .ag-media-fact--karten-2 .ag-media-fact__chip--2 { grid-area: 1 / 1; align-self: start; justify-self: end; margin: var(--ag-media-fact-chip-abstand) var(--ag-media-fact-chip-abstand) 0; max-width: calc(100% - 2 * var(--ag-media-fact-chip-abstand)); } .ag-media-fact--karten-2 .ag-media-fact__chip--1 { grid-area: 2 / 1; align-self: end; justify-self: start; } .ag-media-fact--karten-2 .ag-media-fact__chip--2 .ag-float-fact-card { width: var(--ag-ffc-breite); } /* ── Drei Karten: Karte 1 im Bild, Karten 2 + 3 nebeneinander darunter ── Zwei Spalten, Lücke 16 (je 8 nach innen). Größe S (200) wird auf die Spaltenbreite gestaucht (~153 bei 371) — Kennzahl 38 px passt, Label bricht auf 2–3 Zeilen. Vorher zwei volle Streifen untereinander (Hero auf /branchen/ 1265 px hoch, gemessen 30.09.2026). */ .ag-media-fact--karten-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .ag-media-fact--karten-3::before, .ag-media-fact--karten-3 .ag-media-fact__bild, .ag-media-fact--karten-3 .ag-media-fact__bildflaeche, .ag-media-fact--karten-3 .ag-media-fact__chip--1 { grid-area: 1 / 1 / 2 / 3; } .ag-media-fact--karten-3 .ag-media-fact__chip--2 { grid-area: 2 / 1; margin: var(--spacing-m) var(--spacing-s) 0 0; } .ag-media-fact--karten-3 .ag-media-fact__chip--3 { grid-area: 2 / 2; margin: var(--spacing-m) 0 0 var(--spacing-s); } /* Flywheel nur über dem Bildteil zentrieren, nicht über der Kartenreihe: Überstand oben = (0,9014 × 519/512 − 0,75) / 2 der Breite (wie hero.css). */ .ag-media-fact--karten-3 .ag-media-fact__flywheel { inset: auto 0 auto 0; top: 0; margin: -8.2% auto 0; } }