/* ============================================================================ teil-zd-drehung.css — die Bewegung des HEAROS-Rings auf /hoerakustik/. Christopher, 04.10.2026 (Sprachnachricht): „… koennen wir die irgendwie in so einen Ring machen, rotierend … Wir brauchen noch mehr Animationen, Slide-In-Effekte, das ist immer noch alles basic." Diese Datei schreibt AUSSCHLIESSLICH transform, rotate, translate, scale, opacity, transition, animation, @keyframes, animation-play-state, will-change, filter und den prefers-reduced-motion-Zweig. Kein Raster, keine Breiten, keine Farben, keine Abstaende, kein position/top/left — die liegen in teil-zc-ring.css, die zeitgleich von einer anderen Sitzung geschrieben wird. Wer hier eine Breite setzt, setzt sie zweimal. ── Was gemessen wurde, bevor hier etwas stand (04.10.2026) ─────────────── 1) EINBINDUNG. functions.php Zeile 58 bindet assets/css/teil-*.css per glob() alphabetisch nach seiten.css ein. "teil-zd-drehung" sortiert hinter "teil-zc-ring" und hinter allen anderen teil-*. Kein !important noetig, und es steht auch keins in dieser Datei. 2) DIE HAUSMECHANIK, Zeile fuer Zeile nachgelesen, nicht erinnert: assets/js/wirkung.js setzt die Klasse "auf" — Zeile 21 im Beobachter, Zeile 16 ohne IntersectionObserver oder bei reduzierter Bewegung. Darunter zwei Netze: nach 900 ms wird aufgedeckt, was im Fenster steht (Z. 43–45), nach 12 000 ms ausnahmslos alles (Z. 47–48). Es sind NICHT 9 Sekunden; die 9 000 ms stehen in bewegung.js und gelten dort fuer andere Klassen. Diese Datei baut keinen zweiten Beobachter und kein eigenes Skript. 3) EIN NAMENSKONFLIKT, der beinahe passiert waere. seiten.css Zeile 1119 kennt bereits eine Klasse .ring: .std-titelzeichen .ring{ fill:none; stroke:var(--gold); … } Das ist ein im Titelzeichen der Standardseite. Eine blanke Regel auf .ring haette dieses Zeichen mitgedreht. Deshalb ist in dieser Datei JEDER Selektor mit .ring-teil nach vorn verankert. Keine einzige Regel beginnt mit einer blanken .ring. 4) DIE BASIS, auf der der Auftritt sitzt. bau.css Zeile 78/79: .einblenden{ opacity:0; transform:translateY(22px); transition:… } .einblenden.auf{ opacity:1; transform:none } Das gilt dem
, nicht seinen Kindern. Der Abschnitt faehrt also selbst schon sanft hoch; der Ring legt seinen eigenen Auftritt INNEN darueber. bau.css Z. 80–83 legt zusaetzlich ein transition-delay bis .28 s auf .einblenden:nth-child(2)…(5) — das trifft die ganze
, verzoegert aber nur deren eigene zwei Eigenschaften (opacity, transform aus Z. 78). In dieser Datei steht deshalb KEIN alleinstehendes transition-delay: jeder Verzug steht in der Kurzform direkt hinter seiner Eigenschaft (siehe Abschnitt 5). 5) KEIN QUERSCROLLEN durch den seitlichen Versatz, drei unabhaengige Netze: * bau.css Z. 107: html{ overflow-x:clip; max-width:100% } — clip, nicht hidden, damit kein zweiter Scrollbehaelter entsteht. * bau.css Z. 160: .seitenblatt{ overflow:hidden }; auf diesem Seitentyp zusaetzlich teil-leistung.css Z. 23: body.bv-typ-leistung .seitenblatt{ overflow:clip }. * Und grundsaetzlich: der Versatz steht hier auf transform/translate, nie auf margin oder left. transform veraendert die Layoutbreite nicht. 6) REDUZIERTE BEWEGUNG ist im Haus zweimal global vorgedeckelt: grund.css Z. 41 und bau.css Z. 85–88, beide mit *{ animation-duration:.001ms!important; animation-iteration-count:1 !important; transition-duration:.001ms!important } Das deckelt nur die DAUER, nicht den NAMEN. Eine Dauerdrehung waere damit nicht aus, sondern auf .001 ms zusammengestaucht — sichtbar ist dann der Endzustand. Fuer eine Drehung von 0 auf 360deg faellt das nicht auf, fuer jede andere Regel schon. Abschnitt 7 setzt deshalb animation:none und nimmt jede einzelne Regel dieser Datei ausdruecklich zurueck. 7) WAS DEM AUFBAU GEHOERT und hier nur gelesen wird: --ring-r (Radius) und --ring-n (Anzahl, laut Vertrag style="--ring-n:5" auf .ring) sowie --i je .ring-platz. Alle drei werden mit Ersatzwert gelesen. Grund: ein var() ohne Ersatz in einem calc() macht die ganze transform-Deklaration ungueltig — die fuenf Stuecke lagen dann uebereinander in der Mitte. transform-origin wird NICHT gesetzt: die Vorgabe 50% 50% ist genau die gewuenschte Achse, sowohl fuer den quadratischen .ring-kreis als auch fuer das quadratische Ohrstueck (640x640). 8) DIE MESSPROBE. Weil teil-zc-ring.css zeitgleich entsteht und hier noch nicht vorlag, wurde der Aufbau fuer die Messung notduerftig nachgestellt (nur im Arbeitsverzeichnis, NICHT im Theme) und diese Datei unveraendert daruebergelegt. Gemessen wurde im Browser, nicht ueberlegt: * Die Platzierung trifft. Stueck 3 von 5 bei Radius 210 px steht auf matrix(1,0,0,1,-123.435,169.894). Nachgerechnet: Winkel 216 Grad, 210*sin(216) = -123,44 · -210*cos(216) = 169,89. Deckungsgleich. * Das Rotationspaar der Platzierung hebt sich exakt auf: a=1, b=0, c=0, d=1 in der Matrix, also null Eigendrehung des Kaestchens. * Die Gegendrehung stimmt an sieben Zeitpunkten (Abschnitt 2). * Freigabe durch .auf: das Stueck landet auf Betrag genau 210,0 px (= --ring-r), der Flug ist restlos weg; .ring-kreis scale 1, .ring-mitte, .ring-liste, .ring-text alle opacity 1, translate 0. * Der reduced-motion-Zweig wurde versuchsweise auf "all" gestellt: alle neun geprueften Elemente standen auf opacity 1, translate none, animation none, will-change auto — auch OHNE .auf, also genau in dem Fall, in dem frueher etwas haengengeblieben ist. WAS DIE MESSPROBE NICHT KONNTE: ihre Uhr stand (das Fenster zeichnete nicht), darum liefen Uebergaenge und Dauerdrehung nicht von selbst. Alle Zeitpunkte wurden ueber currentTime gestellt und Uebergaenge mit .finish() zu Ende gezwungen. Der optische Eindruck — ob 72 s sich wirklich ruhig anfuehlen — ist damit NICHT geprueft und gehoert an den laufenden Dienst. 9) EINE BITTE AN DEN AUFBAU (teil-zc-ring.css): --ring-r muss mitwachsen und mitschrumpfen. Bei clientWidth 375 px passt der Ring nur bis etwa 96 px Radius in die Breite (gemessen: 24,9 … 360,3 px von Kante zu Kante). Ein fester Radius von 210 px steht dort 98 px ueber. Diese Datei rechnet mit jedem Wert, den sie bekommt, und haelt ihren eigenen Weg auf dem Telefon bewusst INNERHALB des Rings (Abschnitt 6). ========================================================================= */ /* ── 1 · Die Drehung ─────────────────────────────────────────────────────── Sie sitzt auf .ring-kreis, wie verabredet. DAUER: 72 s je Umdrehung. Nicht gegriffen, gerechnet: * 72 s = 5,0 Grad je Sekunde. Der Sekundenzeiger einer Uhr laeuft mit 6,0 Grad/s. Der Ring dreht also eine Spur langsamer als ein schleichender Sekundenzeiger — man sieht, DASS er sich bewegt, aber das Auge wird nicht mitgezogen. Das ist die Grenze, um die es Christopher geht. * Bei fuenf Stuecken braucht eines 72 s / 5 = 14,4 s von einem Platz zum naechsten. So lange steht ein Modellname an derselben Stelle — genug, um ihn zu lesen, darauf zu zeigen und ihn festzuhalten. * In Pixeln haengt es am Radius, und der gehoert dem Aufbau. Zur Groessen- ordnung, mit dem Ersatzradius dieser Datei (rund 210 px am Rechner): 5 Grad/s = 0,0873 rad/s, mal 210 px = 18,3 px/s. Ein Ohrstueck von etwa 110 px braucht damit rund 6 s, um eine eigene Breite weiterzuwandern. Diese drei Zahlen sind Ueberschlag, der Radius ist nicht von mir gemessen. * 72 ist zugleich 360/5 — die Zahl, mit der auch die Winkel rechnen. linear und nichts anderes: eine unendliche Animation mit ease ruckelt an jeder Zyklusgrenze, weil sie dort von "langsam" auf "langsam" springt und dazwischen schneller war. Bei 72 s faellt genau das auf. ------------------------------------------------------------------------- */ @keyframes zd-ring-dreht{ from{ rotate:0deg } to { rotate:360deg } } .ring-teil .ring-kreis{ animation:zd-ring-dreht 72s linear infinite; } /* ── 2 · Die Gegendrehung, damit jedes Ohrstueck aufrecht bleibt ─────────── DIE RECHNUNG, wie verlangt. Drei Ebenen stapeln ihre Drehungen: (A) .ring-kreis dreht mit R(t) = +360 Grad * (t / 72 s) (B) .ring-platz traegt die Platzierung rotate(theta) translateY(-r) rotate(-theta). Die beiden Drehungen heben sich auf: theta - theta = 0. Das Kaestchen sitzt also auf dem Umfang bei theta und ist gegenueber dem Kreis UNgedreht. (C) .ring-stueck dreht mit S(t) = -360 Grad * (t / 72 s) Weltlage des Bildes = R(t) + 0 + S(t) = 360*(t/72) - 360*(t/72) = 0 Grad, fuer JEDES t. Nachgerechnet an drei Zeitpunkten: t = 18 s -> R = +90 Grad, S = -90 Grad, Summe 0 t = 50 s -> R = +250 Grad, S = -250 Grad, Summe 0 t = 71 s -> R = +355 Grad, S = -355 Grad, Summe 0 Das Ohrstueck steht aufrecht, nicht nur an den Enden. Was die Rechnung zerbrechen WUERDE — und was deshalb hier gleich ist: * verschiedene Dauern: beide 72s. * verschiedene Verzoegerungen: beide ohne animation-delay. * verschiedene Zeitfunktionen: beide linear. (Zur Genauigkeit: gleiche Zeitfunktion auf beiden Seiten wuerde sich auch bei ease aufheben, weil beide denselben Fortschritt p(t) haetten. Linear steht hier aus Grund 1 — Gleichlauf —, nicht wegen der Gegenrechnung.) * nur eine von beiden angehalten: deshalb nennt Abschnitt 4 beide in EINER Regel. Ein Startversatz von einem Bild (16,7 ms bei 60 Hz) ergaebe 360 * 0,0167/72 = 0,083 Grad Restschraege, an einem 110-px-Stueck rund 0,16 px. Er entsteht hier nicht: beide Animationen werden auf derselben Seite erklaert und von derselben Klassenaenderung freigegeben, also in derselben Stilberechnung. ------------------------------------------------------------------------- */ @keyframes zd-stueck-gegen{ from{ rotate:0deg } to { rotate:-360deg } } .ring-teil .ring-stueck{ animation:zd-stueck-gegen 72s linear infinite; } /* Die Platzierung auf dem Umfang. Sie steht hier, weil transform nach dem Vertrag dieser Datei gehoert — der RADIUS gehoert dem Aufbau und kommt als --ring-r. Der Ersatzwert ist nur ein Notnagel, damit der Ring nicht in sich zusammenfaellt, falls die Eigenschaft fehlt; sobald teil-zc-ring.css --ring-r setzt, gilt dessen Wert. Reihenfolge der Kette: erst auf den Winkel drehen, dann nach aussen gehen, dann die Drehung des Kaestchens wieder herausnehmen. */ /* ══ AM 04.10.2026 KORRIGIERT ══════════════════════════════════════════════ Beide Dateien stellten die fuenf Plaetze auf den Kreis: teil-zc-ring.css ueber position:absolute mit left/top aus sin()/cos(), und hier noch einmal ueber translateY(-r). Die Stellungen addieren sich — gemessen stand jeder Platz auf dem DOPPELTEN Radius (bei 1280 px 525 statt 262,5 px) und damit weit ausserhalb des Quadrats. Beim Gegenlesen gefunden. Laut Vertrag gehoert die STELLUNG dem Aufbau. Hier bleibt nur noch, was Bewegung ist: der zusaetzliche Weg von 72 px nach AUSSEN, aus dem die Stuecke hereinfliegen. Er ist jetzt RELATIV zur Stellung (im Ruhezustand 72 px weiter draussen, freigegeben transform:none) statt absolut. Der Einflug sieht damit genauso aus wie geplant, nur ohne den zweiten Radius. ════════════════════════════════════════════════════════════════════════ */ /* Die Grundstellung stand hier und ist entfallen — sie kommt aus teil-zc-ring.css. In Ruhe traegt ein Platz deshalb gar keine transform. */ /* ── 3 · Ruhen, solange der Ring noch nie zu sehen war ───────────────────── Eine Dauerdrehung kostet Rechenzeit. Die Drehung ist deshalb von der ersten Sekunde an erklaert, aber ANGEHALTEN, bis wirkung.js die Klasse .auf setzt. Auf /hoerakustik/ steht der HEAROS-Abschnitt weit unten: wer die Seite oeffnet und nicht hinunterfaehrt, bezahlt fuer diesen Ring nichts. Nebenwirkung, die hier erwuenscht ist: beide Animationen werden zum selben Zeitpunkt freigegeben und laufen damit vom selben Nullpunkt los (Abschnitt 2). Fail-open: die Sperre haengt an .einblenden. Fehlt die Klasse im Markup, dreht der Ring einfach sofort — er steht nie still, weil eine Klasse fehlt. WAS DAMIT NICHT ERLEDIGT IST: nach dem ersten Sehen laeuft die Drehung weiter, auch wenn der Ring wieder aus dem Bild gescrollt ist. Siehe Bericht. ------------------------------------------------------------------------- */ .ring-teil.einblenden:not(.auf) .ring-kreis, .ring-teil.einblenden:not(.auf) .ring-stueck{ animation-play-state:paused; } /* ── 4 · Anhalten beim Zeigen und beim Tastaturfokus ─────────────────────── Das Skript setzt .ring-haelt auf .ring. Beide Drehungen stehen in EINER Regel: haelt man nur eine an, faengt das Ohrstueck sichtbar an, sich um sich selbst zu drehen (Abschnitt 2). GEMESSEN am 04.10.2026 an einer Messprobe mit genau diesen Keyframes (Browserfenster 1280x900, currentTime auf 4 680 ms gesetzt = 23,4 Grad): vor dem Anhalten kreis +23,4 Grad · stueck -23,4 Grad · running .ring-haelt gesetzt kreis +23,4 Grad · stueck -23,4 Grad · PAUSED (beide) 1,0 s spaeter kreis +23,4 Grad · stueck -23,4 Grad · paused .ring-haelt weg kreis +23,4 Grad · stueck -23,4 Grad · running animation-play-state:paused FRIERT also EIN: der Ring bleibt in genau dem Winkel stehen, in dem er war, und laeuft beim Loslassen von dort weiter. KEIN Ruecksprung auf 0 Grad, kein Sprung nach vorn, und beide Drehungen halten gemeinsam an — die Gegenrechnung bleibt waehrend der Pause gueltig. Ehrlich dazugesagt: die Messprobe lief in einem Fenster, dessen Uhr stand. Geprueft ist damit „springt nicht zurueck und nicht vor"; dass die Zeit waehrend der Pause nicht weiterlaeuft, ist Spezifikation (CSS Animations 1), nicht von mir gemessen. Am laufenden Dienst bitte einmal nachsehen. ------------------------------------------------------------------------- */ .ring-teil .ring.ring-haelt .ring-kreis, .ring-teil .ring.ring-haelt .ring-stueck{ animation-play-state:paused; } /* Das gewaehlte Stueck tritt vor. Das passiert nur im angehaltenen Ring, also kostet der Schlagschatten keine Rechenzeit je Bild — er liegt auf einer Flaeche, die gerade steht. scale und filter sind eigene Eigenschaften und stoeren die Gegendrehung auf rotate nicht. transition eigenschaftsgenau, nie auf "all" (siehe Abschnitt 5). */ .ring-teil .ring-stueck{ transition:scale .34s var(--weich), filter .34s var(--weich); } .ring-teil .ring-platz.ring-aktiv .ring-stueck{ scale:1.14; filter:drop-shadow(0 10px 18px rgba(19,55,109,.22)); } /* Die Knoepfe der Tastaturliste bekommen dieselbe kleine Hebung. Aussehen, Umriss und Farbe gehoeren dem Aufbau; hier steht nur der Weg. */ .ring-teil .ring-wahl{ transition:scale .2s var(--weich), opacity .2s var(--weich); } .ring-teil .ring-wahl:hover, .ring-teil .ring-wahl:focus-visible{ scale:1.06 } .ring-teil .ring-wahl:active{ scale:.98 } /* ── 5 · Der Auftritt ────────────────────────────────────────────────────── Ruhezustand auf .ring-teil.einblenden, freigegeben durch .auf (wirkung.js). Die fuenf Stuecke kommen NACHEINANDER von aussen herein. Der Versatz haengt an --i und braucht damit kein Skript: .ring-platz Nr. 0 startet sofort, Nr. 4 nach 4 * 90 ms = 360 ms. Mit 900 ms Flugzeit ist der Ring nach 1,26 s vollstaendig da. DER WEG NACH AUSSEN sitzt IN der Platzierungskette, nicht daneben: die Kette hat im Ruhe- und im Endzustand dieselben drei Funktionen in derselben Reihenfolge (rotate, translateY, rotate), nur die Laenge unterscheidet sich. Nur so blendet der Browser Glied fuer Glied ueber, statt zwischen zwei Matrizen zu springen. Das Stueck fliegt dadurch auf SEINEM eigenen Radius nach innen — jedes aus seiner eigenen Richtung, nicht alle von links. KEIN QUERSCROLLEN: 72 px zusaetzlicher Radius sind transform, veraendern die Layoutbreite also nicht, und werden zusaetzlich von html{overflow-x:clip} und .seitenblatt{overflow:clip} abgeschnitten (Kopf, Punkt 5). Unter den Haltepunkten schrumpft der Weg trotzdem mit (Abschnitt 6). DAS NETZ, und die Spezifitaet dazu nachgezaehlt. wirkung.js deckt nach 12 000 ms ausnahmslos alles auf, indem es .auf setzt. Damit mein Ruhezustand dann restlos verschwindet, muss die .auf-Regel die Ruhe-Regel schlagen — und bei UNGLEICHER Spezifitaet entscheidet nicht die Reihenfolge: .ring-teil .ring-platz = 2 Klassen -> 0,2,0 (Grundlage) .ring-teil.einblenden .ring-platz = 3 Klassen -> 0,3,0 (Ruhe) .ring-teil.einblenden.auf .ring-platz = 4 Klassen -> 0,4,0 (frei) 0,4,0 > 0,3,0 > 0,2,0. Die Freigabe gewinnt in jedem Fall. Dasselbe Muster gilt fuer .ring-mitte, .ring-liste und .ring-text weiter unten. Zweites Netz: die Ruhe haengt an .einblenden. Fehlt die Klasse, ist gar nichts unsichtbar — es gibt keinen Zustand, in dem der Ring haengenbleibt. transition IMMER eigenschaftsgenau. Am 03.10.2026 hat ein pauschaler Verzug 540 ms lang auch das Schweben lahmgelegt; deshalb steht hier kein "all" und kein alleinstehendes transition-delay, sondern jeder Verzug in der Kurzform direkt hinter seiner Eigenschaft. ------------------------------------------------------------------------- */ /* --- die fuenf Stuecke --- */ .ring-teil.einblenden .ring-platz{ opacity:0; /* 72 px radial nach aussen, relativ zur Stellung aus teil-zc-ring.css. Die beiden Drehungen heben sich auf (theta - theta = 0) und dienen nur dazu, die Richtung „nach aussen" zu finden. */ transform: rotate( calc(var(--i,0) * 360deg / var(--ring-n,5)) ) translateY(-72px) rotate( calc(var(--i,0) * -360deg / var(--ring-n,5)) ); transition: opacity .62s var(--weich) calc(var(--i,0) * .09s), transform .90s var(--weich) calc(var(--i,0) * .09s); } /* will-change steht NUR im Wartezustand: der Hinweis nuetzt, bevor sich etwas bewegt, und waere danach nur noch belegter Speicher. Die laufende Drehung bekommt bewusst KEIN will-change — eine aktive Kompositor-Animation bekommt ihre Ebene ohnehin, der Hinweis haette sie dauerhaft festgehalten. */ .ring-teil.einblenden:not(.auf) .ring-platz{ will-change:transform, opacity } .ring-teil.einblenden.auf .ring-platz{ opacity:1; transform:none; } /* --- der Kreis selbst zieht sich auf --- */ .ring-teil.einblenden .ring-kreis{ scale:.86; transition:scale 1.05s var(--weich); } .ring-teil.einblenden.auf .ring-kreis{ scale:1 } /* --- die Mitte: „Probehoeren moeglich!", der Satz, der Knopf --- */ .ring-teil.einblenden .ring-mitte{ opacity:0; scale:.9; transition:opacity .6s var(--weich) .30s, scale .7s var(--weich) .30s; } .ring-teil.einblenden.auf .ring-mitte{ opacity:1; scale:1 } /* Innerhalb der Mitte noch einmal gestaffelt — Ruf, Satz, Knopf. 90 ms Abstand wie bei den Stuecken, damit der Abschnitt einen Takt hat. */ .ring-teil.einblenden .ring-mitte > *{ opacity:0; translate:0 10px; transition:opacity .5s var(--weich) .42s, translate .5s var(--weich) .42s; } .ring-teil.einblenden .ring-mitte > :nth-child(2){ transition:opacity .5s var(--weich) .51s, translate .5s var(--weich) .51s; } .ring-teil.einblenden .ring-mitte > :nth-child(3){ transition:opacity .5s var(--weich) .60s, translate .5s var(--weich) .60s; } /* Freigabe mit hoeherer Spezifitaet als alle drei Ruhe-Regeln: .ring-teil.einblenden.auf .ring-mitte > * = 0,4,0 gegen 0,3,0 bzw. 0,3,1. */ .ring-teil.einblenden.auf .ring-mitte > *{ opacity:1; translate:0 0 } /* --- die Tastaturliste --- */ .ring-teil.einblenden .ring-liste{ opacity:0; translate:0 14px; transition:opacity .55s var(--weich) .66s, translate .55s var(--weich) .66s; } .ring-teil.einblenden.auf .ring-liste{ opacity:1; translate:0 0 } /* --- der Fliesstext: der Slide-in, den Christopher meint --- */ .ring-teil.einblenden .ring-text{ opacity:0; translate:46px 0; transition:opacity .7s var(--weich) .20s, translate .8s var(--weich) .20s; } .ring-teil.einblenden.auf .ring-text{ opacity:1; translate:0 0 } /* Steht der Text in mehreren Absaetzen, zieht jeder eine Spur nach dem vorigen. :nth-child zaehlt 0,1,0 — zusammen mit den drei Klassen also 0,3,1 in der Ruhe und 0,4,1 in der Freigabe. Paarweise groesser. */ .ring-teil.einblenden .ring-text > *{ opacity:0; translate:28px 0; transition:opacity .55s var(--weich) .26s, translate .6s var(--weich) .26s; } .ring-teil.einblenden .ring-text > :nth-child(2){ transition:opacity .55s var(--weich) .32s, translate .6s var(--weich) .32s; } .ring-teil.einblenden .ring-text > :nth-child(3){ transition:opacity .55s var(--weich) .38s, translate .6s var(--weich) .38s; } .ring-teil.einblenden .ring-text > :nth-child(n+4){ transition:opacity .55s var(--weich) .44s, translate .6s var(--weich) .44s; } .ring-teil.einblenden.auf .ring-text > *{ opacity:1; translate:0 0 } /* ── 6 · Haltepunkte ─────────────────────────────────────────────────────── Nur Wege, keine Groessen. Je enger das Fenster, desto kuerzer der Flug — ein 72-px-Weg neben einem Ring, der bei 375 px nur noch gut 200 px breit ist, sieht nicht nach Hereinkommen aus, sondern nach Zucken. Haltepunkte wie im Haus: 1660, 940, 430. ------------------------------------------------------------------------- */ @media (max-width:940px){ .ring-teil.einblenden .ring-platz{ transform: rotate( calc(var(--i,0) * 360deg / var(--ring-n,5)) ) translateY( calc(-1 * (var(--ring-r, clamp(96px, 30vw, 230px)) + 48px)) ) rotate( calc(var(--i,0) * -360deg / var(--ring-n,5)) ); } .ring-teil.einblenden .ring-text{ translate:30px 0 } .ring-teil.einblenden .ring-text > *{ translate:18px 0 } } @media (max-width:430px){ /* HIER FLIEGEN DIE STUECKE NACH AUSSEN AUF, NICHT VON AUSSEN HEREIN — und das ist eine Messung, keine Geschmacksfrage. Gemessen 04.10.2026 an der Messprobe bei clientWidth 375 px, die fuenf .ring-platz von Kante zu Kante: Radius 96 px, ohne Flug 24,9 … 360,3 px -> passt in 375 Radius 96 px, 28 px NACH AUSSEN 3,7 … 384,1 px -> 9,1 px zu breit Radius 96 px, 28 px NACH INNEN 38,6 … 308,4 px -> passt, mit Luft Der Ring selbst passt also, der Flug nach aussen kippt ihn ueber die Kante. Auf dem Telefon laeuft der Weg deshalb umgekehrt: die Stuecke starten NAEHER an der Mitte und gehen auf ihren Platz hinaus. Das liest sich genauso als Aufbauen, kann aber die Endgroesse des Rings grundsaetzlich nicht ueberschreiten — der Startpunkt liegt innerhalb. max(0px, …) faengt einen sehr kleinen Radius ab, damit der Weg nicht negativ wird und das Stueck durch die Mitte auf die Gegenseite springt. (Zur Vorsicht doppelt gesichert: der Versatz steht auf transform und veraendert die Layoutbreite ohnehin nicht, und html traegt overflow-x:clip. Ob clip in der Messprobe wirklich greift, konnte ich dort NICHT bestaetigen — documentElement.scrollLeft liess sich trotz clip auf 26,5 setzen. Deshalb wird hier nicht darauf gebaut.) */ .ring-teil.einblenden .ring-platz{ transform: rotate( calc(var(--i,0) * 360deg / var(--ring-n,5)) ) translateY( calc(-1 * max(0px, var(--ring-r, clamp(96px, 30vw, 230px)) - 28px)) ) rotate( calc(var(--i,0) * -360deg / var(--ring-n,5)) ); } /* Senkrecht statt seitlich: bei 375 px ist links und rechts nichts mehr, woraus etwas hereinfahren koennte. */ .ring-teil.einblenden .ring-text{ translate:0 24px } .ring-teil.einblenden .ring-text > *{ translate:0 14px } /* Weniger Hebung auf dem Telefon — dort wird getippt, nicht gezeigt. */ .ring-teil .ring-platz.ring-aktiv .ring-stueck{ scale:1.08 } } /* ── 7 · prefers-reduced-motion ──────────────────────────────────────────── Keine Drehung, kein Flug. Der Ring steht still und VOLLSTAENDIG da — die Platzierung bleibt, nur die Bewegung geht weg. Nachgezaehlt, dass dieser Zweig JEDE Regel dieser Datei zurueckdreht, nicht nur die erste. Die Liste folgt der Reihenfolge oben: 1 .ring-kreis Drehung -> animation:none (unten, Z. a) 2 .ring-stueck Gegendrehung -> animation:none (unten, Z. a) .ring-platz Platzierung -> bleibt absichtlich stehen 3 Ruhen bis .auf -> gegenstandslos ohne Animation 4 .ring-haelt -> gegenstandslos ohne Animation .ring-aktiv scale/filter -> zurueckgesetzt (Z. e) .ring-wahl scale -> zurueckgesetzt (Z. f) 5 .ring-platz Flug + opacity -> zurueckgesetzt (Z. b) will-change -> auf auto (Z. b) .ring-kreis scale -> zurueckgesetzt (Z. c) .ring-mitte + Kinder -> zurueckgesetzt (Z. d) .ring-liste -> zurueckgesetzt (Z. d) .ring-text + Kinder -> zurueckgesetzt (Z. d) 6 Haltepunkte -> dieselben Selektoren, siehe unten SPEZIFITAET: ein @media-Block erhoeht die Spezifitaet NICHT. Jede Regel hier nennt deshalb beide Stufen — die Ruhe (0,3,0) UND die Freigabe (0,4,0) —, damit sie auch die staerkere schlaegt. Sie steht zusaetzlich am Dateiende, also bei Gleichstand ohnehin vorn. Genau hier ist beim letzten Mal ein Teil versetzt stehengeblieben. Die Haltepunkte aus Abschnitt 6 tragen dieselben Selektoren wie die Ruhe (0,3,0) und werden von den 0,4,0-Regeln hier mitgeschlagen. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ /* a) jede Drehung aus. animation:none setzt den NAMEN auf none; die globalen !important-Regeln aus grund.css/bau.css deckeln nur die Dauer und koennen sie nicht wiederbeleben (Kopf, Punkt 6). */ .ring-teil .ring-kreis, .ring-teil .ring-stueck, .ring-teil.einblenden:not(.auf) .ring-kreis, .ring-teil.einblenden:not(.auf) .ring-stueck, .ring-teil .ring.ring-haelt .ring-kreis, .ring-teil .ring.ring-haelt .ring-stueck{ animation:none; rotate:none; } /* b) die Stuecke stehen sofort an ihrem Platz — Platzierung ja, Flug nein. */ .ring-teil.einblenden .ring-platz, .ring-teil.einblenden.auf .ring-platz, .ring-teil.einblenden:not(.auf) .ring-platz{ opacity:1; transform: rotate( calc(var(--i,0) * 360deg / var(--ring-n,5)) ) translateY( calc(-1 * var(--ring-r, clamp(96px, 30vw, 230px))) ) rotate( calc(var(--i,0) * -360deg / var(--ring-n,5)) ); transition:none; will-change:auto; } /* c) der Kreis zieht sich nicht auf. */ .ring-teil.einblenden .ring-kreis, .ring-teil.einblenden.auf .ring-kreis{ scale:1; transition:none; } /* d) Mitte, Liste, Text: alles da, nichts faehrt. */ .ring-teil.einblenden .ring-mitte, .ring-teil.einblenden.auf .ring-mitte, .ring-teil.einblenden .ring-mitte > *, .ring-teil.einblenden.auf .ring-mitte > *, .ring-teil.einblenden .ring-mitte > :nth-child(2), .ring-teil.einblenden .ring-mitte > :nth-child(3), .ring-teil.einblenden .ring-liste, .ring-teil.einblenden.auf .ring-liste, .ring-teil.einblenden .ring-text, .ring-teil.einblenden.auf .ring-text, .ring-teil.einblenden .ring-text > *, .ring-teil.einblenden.auf .ring-text > *, .ring-teil.einblenden .ring-text > :nth-child(2), .ring-teil.einblenden .ring-text > :nth-child(3), .ring-teil.einblenden .ring-text > :nth-child(n+4){ opacity:1; translate:none; scale:1; transition:none; } /* e) kein Vortreten des gewaehlten Stuecks, aber es bleibt erkennbar: der Schatten bleibt, er bewegt sich nur nicht mehr hinein. */ .ring-teil .ring-stueck{ transition:none } .ring-teil .ring-platz.ring-aktiv .ring-stueck{ scale:1; filter:drop-shadow(0 6px 12px rgba(19,55,109,.26)); } /* f) die Knoepfe springen nicht. */ .ring-teil .ring-wahl, .ring-teil .ring-wahl:hover, .ring-teil .ring-wahl:focus-visible, .ring-teil .ring-wahl:active{ scale:1; transition:none; } } /* ============================================================================ NETZ: KEIN JAVASCRIPT Ergaenzt am 04.10.2026 — es fehlte. Ohne Skript kommt nie ein .auf, auch das 12-Sekunden-Netz in wirkung.js laeuft dann nicht. Die sechs Regeln oben, die opacity:0 setzen, haetten den ganzen Ring unsichtbar stehen lassen: die fuenf Stuecke, die Mitte samt Kindern, die Namensliste und den Fliesstext. Die Selektoren tragen ABSICHTLICH :not(.auf) bzw. dieselbe Klassenzahl wie die Regeln, die sie zuruecknehmen — spaeter in der Datei hilft nur bei gleicher Spezifitaet. Am 03.10.2026 ist genau daran ein Netz gescheitert (ein gedrehtes Band blieb 72 px versetzt stehen). ========================================================================= */ @media (scripting: none){ .ring-teil.einblenden .ring-platz, .ring-teil.einblenden:not(.auf) .ring-platz, .ring-teil.einblenden .ring-mitte, .ring-teil.einblenden:not(.auf) .ring-mitte, .ring-teil.einblenden .ring-mitte > *, .ring-teil.einblenden:not(.auf) .ring-mitte > *, .ring-teil.einblenden .ring-liste, .ring-teil.einblenden:not(.auf) .ring-liste, .ring-teil.einblenden .ring-text, .ring-teil.einblenden:not(.auf) .ring-text, .ring-teil.einblenden .ring-text > *, .ring-teil.einblenden:not(.auf) .ring-text > *{ opacity:1; transform:none; transition:none; will-change:auto; } /* Der Kreis zieht sich sonst aus scale .86 auf — ohne Skript steht er sofort. */ .ring-teil.einblenden .ring-kreis, .ring-teil.einblenden:not(.auf) .ring-kreis{ scale:1; opacity:1; transition:none; } }