/** * agenic Komponenten-CSS – Flywheel (Atom) — agenic_widgets 6.16.0, Klick 6.17.0 * * Partial: includes/render-flywheel.php (ag_render_flywheel), Handle * ag-flywheel. Konsument: ag_hero, Typ `flywheel`. * * Das Flywheel als Objekt statt als Deko-Linie (Leitsatz 1, Projekt-Doc * startseite-design-konzept-18-09; Vincent 17.09.2026: „Flywheel statt * Hintergrundlogo"). Geometrie 1:1 aus `assets/img/flywheel.svg`: drei * versetzte Konturen (`Vector`, `Vector_2`, `Vector_3`) mit je sechs * Segmenten. Drehpunkt = Mittel der drei Konturen 256,685 / 259,935; * Außenradius 259,27, Innenradius 138,20 je Kontur (gemessen 20.09.2026, * 600 Stützstellen je Segment). * * Entscheidung Vincent, 20.09.2026: „Flywheel hat nur 3 … Vermeide die * Überlagerung. Bereichsauswahl soll Bestandteil des Flywheels werden." * Die Auswahl leuchtet deshalb in den drei Konturen selbst auf — kein * eigenes Auswahl-Rad, kein Echo. * * Quelle: HTML-Prototyp `Claude outputs/hero-flywheel` (Runde 2). Eine * Figma-Quelle gibt es noch nicht (Code vor Figma, Rückspielpunkt 0.8). * * Aufbau * .ag-flywheel Kasten, quadratisch * .ag-flywheel__drehteller dreht beim Scrollen und im Intro * .ag-flywheel__rad das Flywheel, dreht je Takt um 60° * .ag-flywheel__link um das Segment, nur wenn der Eintrag einen Link hat (6.17.0) * .ag-flywheel__segment je Leistung — drei Konturen desselben Segments * .ag-flywheel__kontur--haupt `Vector` (trägt die Fläche) * .ag-flywheel__kontur--nachlauf `Vector_2`, `Vector_3` * .ag-flywheel::before Nabe — dunkler Innenkreis hinter dem Kern (6.17.0: von * `__kern::before` an die Wurzel, blendet beim Kernwechsel * nicht mehr mit aus) * .ag-flywheel__kern Beschriftung im Innenkreis, dreht NICHT mit * * Zustände: `.is-aktiv` am Segment (Konturen hell, Fläche, Schub nach * außen; die Nachlauf-Konturen folgen um je Stagger s versetzt). * Die Drehung setzt das Skript als `--ag-flywheel-winkel` (aufsummiert, * damit das Rad nie rückwärts springt). * * Kein Hex, keine neuen Tokens; Werte ohne Leiterstufe tragen `tmp`. */ .ag-flywheel, .ag-flywheel * { box-sizing: border-box; } .ag-flywheel { /* L3 mit L2-Vorgaben */ --ag-flywheel-groesse: 640px; /* tmp — Vorgabe, der Konsument setzt die Größe */ --ag-flywheel-kontur: var(--color-border-on-inverse-strong); /* Ruhe: Weiß 28 % */ --ag-flywheel-kontur-aktiv: var(--color-text-inverse-soft); /* Figma Text/inverse */ --ag-flywheel-nachlauf-deckung: .6; /* tmp — Nachlauf-Konturen leiser als die Hauptkontur */ --ag-flywheel-flaeche-aktiv: var(--color-surface-glass-high); /* Weiß 22 % — Licht, kein Schatten */ --ag-flywheel-strich: 1; /* tmp — in viewBox-Einheiten, ≈ 1,2 px bei 660 */ --ag-flywheel-schub: calc(var(--motion-distance-shift) * 2); /* tmp — 2 × Motion/shift, in viewBox-Einheiten */ --ag-flywheel-winkel: 0deg; /* setzt das Skript */ --ag-flywheel-dreh-dauer: var(--motion-duration-xl); /* 950 — ein Takt = eine Drehung um 60° */ --ag-flywheel-dreh-kurve: var(--motion-ease-spring); /* Figma Values/motion/easing/spring */ --ag-flywheel-nabe: var(--color-surface-darkest); /* = Grundabdunklung des Hero */ --ag-flywheel-nabe-staerke: 54; /* tmp — Prozent; 36 bis 6.16.0, 54 seit 6.17.0 (Rad sitzt höher im helleren Verlauf: Kernsatz 4,24 → 4,52) */ position: relative; width: var(--ag-flywheel-groesse); aspect-ratio: 1; color: var(--color-text-inverse-soft); pointer-events: none; /* reine Grafik; Bedienung läuft über die Liste */ } .ag-flywheel__drehteller { position: absolute; inset: 0; } .ag-flywheel__rad { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; /* base.css deckelt svg auf 100 % */ overflow: visible; /* Drehung je Takt. Die Feder-Kurve schwingt minimal über — gewollt: Das Rad „rastet ein". */ rotate: var(--ag-flywheel-winkel); transition: rotate var(--ag-flywheel-dreh-dauer) var(--ag-flywheel-dreh-kurve); } /* ── Konturen ────────────────────────────────────────────────────────── */ .ag-flywheel__kontur { fill: transparent; stroke: var(--ag-flywheel-kontur); stroke-width: var(--ag-flywheel-strich); stroke-linejoin: round; translate: 0 0; transition: fill var(--motion-state) var(--motion-ease-standard), stroke var(--motion-state) var(--motion-ease-standard), translate var(--ag-flywheel-dreh-dauer) var(--ag-flywheel-dreh-kurve); /* Nachlauf: jede Kontur folgt der vorigen um Stagger s */ transition-delay: calc(var(--motion-stagger-s) * var(--ag-flywheel-lage, 0)); } .ag-flywheel__kontur--nachlauf { stroke-opacity: var(--ag-flywheel-nachlauf-deckung); } /* Auswahl — im Flywheel selbst: alle drei Konturen des Segments werden hell und rücken entlang der Segmentachse nach außen (ux/uy setzt das Markup am ), die Hauptkontur bekommt Fläche. */ .ag-flywheel__segment.is-aktiv .ag-flywheel__kontur { stroke: var(--ag-flywheel-kontur-aktiv); translate: calc(var(--ag-flywheel-ux) * var(--ag-flywheel-schub)) calc(var(--ag-flywheel-uy) * var(--ag-flywheel-schub)); } .ag-flywheel__segment.is-aktiv .ag-flywheel__kontur--haupt { fill: var(--ag-flywheel-flaeche-aktiv); } /* ── Klickbare Segmente (6.17.0) ───────────────────────────────────────── Entscheidung Vincent 20.09.2026, Variante „Direkt öffnen": Klick auf ein Segment öffnet die Seite der Leistung. Der Kasten bleibt `pointer-events: none`; nur Segmente mit Link nehmen den Zeiger an — und nur auf den gezeichneten Konturen (`visiblePainted`, die Fläche `transparent` zählt mit). Doppelklasse gegen die Kit-Regel `a` (0,1,1). Beim Überfahren macht das Skript das Segment aktiv, ohne das Rad zu drehen — sonst rutschte es unter dem Zeiger weg. */ .ag-flywheel .ag-flywheel__link { pointer-events: visiblePainted; cursor: pointer; } /* Nur per Zeiger fokussierbar (tabindex -1) — kein Fokusring im Rad; Tastatur und Screenreader nutzen die Liste mit denselben Zielen. */ .ag-flywheel .ag-flywheel__link:focus { outline: none; } /* Rückfall ohne Skript: Überfahren hellt die drei Konturen auf */ .ag-flywheel .ag-flywheel__link:hover .ag-flywheel__kontur { stroke: var(--ag-flywheel-kontur-aktiv); } /* Freie Segmente (weniger als sechs Einträge): gezeichnet, aber nie aktiv */ .ag-flywheel__segment.is-frei .ag-flywheel__kontur { stroke-opacity: var(--ag-flywheel-nachlauf-deckung); } /* ── Kern ──────────────────────────────────────────────────────────────── Innenkreis der drei versetzten Konturen: Radius 138,2 − 13,2 Versatz = 125 von 286 → 43,7 % der Kastenbreite. Der Kern nutzt 36 %. */ .ag-flywheel__kern { position: absolute; left: 50%; top: 50%; width: calc(var(--ag-flywheel-groesse) * .36); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-s); text-align: center; -webkit-hyphens: manual; hyphens: manual; transition: opacity var(--motion-duration-xs) var(--motion-ease-standard), transform var(--motion-duration-xs) var(--motion-ease-standard); } /* Nabe — der Innenkreis liegt etwas tiefer als die Fläche. Trägt den Kontrast der Kernschrift (14 px brauchen 4,5 : 1; ohne Nabe 3,6 auf dem hellen Teal, gemessen 20.09.2026). Licht und Tiefe, kein Schatten. 6.17.0 (Vincent 20.09.2026: „Mach die Nabe weicher ausblendend"): – größer (60 % statt 44 % der Kastenbreite) und mit sechs Stufen statt drei — sie läuft weich unter den Innenrand der Konturen aus, statt genau an ihm als Scheibe zu enden; – sitzt an der Wurzel statt am Kern: Beim Kernwechsel (Text kurz aus) blinkte sie sonst jedes Mal mit; – im Rand der Schrift dunkler als vorher (Radius 60 % der Nabe: ~46 % statt ~25 % der Stärke), in der Mitte gleich. */ .ag-flywheel::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--ag-flywheel-groesse) * .6); /* tmp — 60 % */ aspect-ratio: 1; translate: -50% -50%; border-radius: var(--radius-max); background: radial-gradient(closest-side, color-mix(in srgb, var(--ag-flywheel-nabe) calc(var(--ag-flywheel-nabe-staerke) * 1%), transparent) 0%, color-mix(in srgb, var(--ag-flywheel-nabe) calc(var(--ag-flywheel-nabe-staerke) * .92%), transparent) 25%, color-mix(in srgb, var(--ag-flywheel-nabe) calc(var(--ag-flywheel-nabe-staerke) * .7%), transparent) 45%, color-mix(in srgb, var(--ag-flywheel-nabe) calc(var(--ag-flywheel-nabe-staerke) * .38%), transparent) 65%, color-mix(in srgb, var(--ag-flywheel-nabe) calc(var(--ag-flywheel-nabe-staerke) * .14%), transparent) 82%, transparent 100%); /* tmp — Verlauf in sechs Stufen, Näherung an ease-out */ pointer-events: none; } /* Wechsel: kurz aus, Text tauschen, weich wieder an (setzt das Skript) */ .ag-flywheel__kern.is-wechsel { opacity: 0; transform: translateY(var(--motion-distance-shift)); } .ag-flywheel__kern:not(.is-wechsel) { transition-duration: var(--motion-state); } .ag-flywheel__zaehler { margin: 0; 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-flywheel__name { margin: 0; font-size: var(--ag-titel-sektion-38-fs); /* Display/S 38/44 Light */ line-height: var(--ag-titel-sektion-38-lh); font-weight: var(--ag-titel-sektion-38-fw); } .ag-flywheel__text { margin: 0; font-size: var(--fs-200); /* Copy/S 14 */ line-height: calc(20 / 14); font-weight: var(--fw-light); text-wrap: balance; } /* Bewegung abbestellt: Rad steht, Wechsel ohne Übergang */ @media (prefers-reduced-motion: reduce) { .ag-flywheel__rad, .ag-flywheel__kontur, .ag-flywheel__kern { transition: none; } }