/* --------------------------------------------------------------------- * "Dein Weg zur Sichtbarkeit" - Zustände der vier Schritte * * HERKUNFT (05.09.2026): Diese Regeln standen im _cssCustom der * globalen Bricks-Klasse modul-sichtbarkeit__right, also in der * Datenbank. Sie sind hierher gezogen, weil sie unsere eigenen Klassen * gestalten und weil eine Regel, die niemand mitsucht, irgendwann * gegen den Code läuft - genau das hat uns die Passwortlänge am 04.09. * einen Tag gekostet. * * ⚠️ IN BRICKS MUSS DER BLOCK DANN WEG. Bleibt er stehen, gibt es die * Regeln zweimal, und wer eine Farbe ändert, ändert sie an der * falschen Stelle. * * Welche Klasse ein Schritt trägt, entscheidet ausschliesslich der * Server: {sichtwechsel_weg_schritt:} in includes/bricks-weg- * schritte.php liefert module-step-check oder module-step-uncheck. * * AUFBAU DES MODULS (aus dem Bricks-Export vom 29.08.2026): * * .modul-sichtbarkeit__right * .module-step.module-step-check|-uncheck (vier Stück) * .module-step__item der Kreis * .module-step__icon * .module-step__text * .module-step__line die graue Grundlinie * ::after der grüne Fortschritt * * Die Verschachtelung unter .modul-sichtbarkeit__right ist aus dem * Original übernommen, nicht neu erfunden: Dort war der Block in * genau diese Klasse eingebettet. * * ⚠️ WARUM DIE WURZELKLASSE DOPPELT STEHT (05.09.2026): Die * Bricks-Regeln nannten drei Klassen. Ein Rest davon - ein nicht * gelöschter Block, eine kopierte Vorlage, eine zweite Seite mit * demselben Modul - überstimmt jede gleich lange Regel von hier. Die * verdoppelte Klasse hebt alles um eine Stufe an, ohne !important und * ohne das Markup anzufassen; .a.a trifft dieselben Elemente wie .a. * * Das ist die Lehre vom 05.09.: Die Grundlinie stand auf zwei Klassen * gegen drei aus Bricks, war deshalb grün statt grau, und die * Linien-Animation lief unsichtbar unter einer grünen Fläche. * ------------------------------------------------------------------- */ /* ===================================================================== * 1. Die Zustände * * ⚠️ DIESER TEIL GILT IMMER, OHNE JEDE BEDINGUNG. Die Endwerte stehen * hier als gewöhnliche Regeln - nicht in den Keyframes. Die Bewegung * weiter unten setzt nur den Startpunkt und läuft hierher. * * Das ist der Unterschied, an dem alles hängt: Fällt die Bewegung aus - * kein Animationstag, Reduced Motion, alter Browser, ein Fehler weiter * oben -, steht trotzdem der fertige Weg da. Andersherum sähe jede * Begleiterin bei jedem Aussetzer ihren Fortschritt auf null. * * ================================================================== */ /* ===================================================================== * Die Ebenen: Kreis über Linie * * 🔴 DIE MALREIHENFOLGE DARF NICHT DAVON ABHÄNGEN, OB GERADE EINE * ANIMATION LÄUFT (05.09.2026). Der grüne Fortschritt lief während * seiner Bewegung über die Kreise und rutschte erst am Ende dahinter: * Ein Element mit laufender transform-Animation wird vom Browser auf * eine eigene Ebene gehoben, im Ruhezustand nicht. Damit malte * dasselbe Element in zwei Zuständen an zwei verschiedenen Stellen der * Reihenfolge. * * ⚠️ WER DIESE BEIDEN REGELN "AUFRÄUMT", BAUT DEN FEHLER WIEDER EIN. * Sie sehen überflüssig aus, denn ohne Animation stimmt die Ordnung * auch ohne sie - genau das ist die Falle. Sie stehen hier für die * knapp zwei Sekunden, in denen sie nicht stimmt. * * position: relative am Kreis ohne Versatzwerte ändert am Layout * nichts; das Icon sitzt weiter mittig, es wird von den * Flex-Einstellungen des Kreises zentriert und ist selbst nicht * absolut positioniert. * * NUR DIE LINIE IST BETROFFEN, geprüft: Die Kreise animieren * background-color und border, die Icons color und stroke. Keine * dieser Eigenschaften hebt ein Element auf eine eigene Ebene - das * tut unter unseren dreien allein transform. * * Die Werte stehen hier und nicht nur in Bricks: Dort trägt * .module-step__item ein z-index: 100 OHNE position - das wirkt heute * nur, weil der Kreis zufällig ein Flex-Kind ist. Würde .module-step * je von flex auf block wechseln, verlöre der Wert lautlos seine * Wirkung. Nach dem Löschen des Bricks-Blocks kann die 100 dort weg. * ================================================================== */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step__item { position: relative; z-index: 2; } /* * Der z-index an der Linie ordnet nicht nur, er SCHLIESST EIN: Eine * positionierte Box mit einem z-index ungleich auto macht einen * eigenen Stapelkontext auf. Damit bleibt das animierte ::after darin * gefangen und kann sich nicht mehr an den Kreisen vorbeischieben, * egal was der Browser während der Bewegung mit ihm anstellt. Das ist * der eigentlich tragende Teil - nicht die Zahl 1. */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step__line { z-index: 1; } /* Abgeschlossen */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__item { background-color: var(--brand-green-900); } /* Das Sternchen bleibt: Ein Icon bringt eigene Knoten mit, die ihre Farbe sonst selbst mitbringen. --light statt des #fff aus dem Original (Sven, 05.09.2026): Das Token ist im Core Framework definiert, hsla(85, 0%, 100%, 1). Der Hex-Wert stand hier nur, weil ich das Token nicht prüfen konnte. */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__icon, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__icon * { color: var(--light); stroke: var(--light); } /* Noch nicht abgeschlossen - der Ruhezustand, ohne jede Bewegung */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-uncheck .module-step__item { background-color: var(--brand-app-2); border: 2px solid var(--brand-app-3); } .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-uncheck .module-step__icon, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-uncheck .module-step__icon * { color: var(--brand-green-900); } /* ===================================================================== * Die Linie: zwei Ebenen * * 🔴 GRUNDLINIE UND FORTSCHRITT SIND ZWEI DINGE (05.09.2026). Vorher * war es eines: Die graue Linie wurde selbst grün gefärbt und selbst * skaliert. Mit animation-fill-mode: backwards stand sie vor ihrem * Einlauf auf scaleX(0) - und war damit ganz weg, samt ihrer grauen * Grundfläche. Wo eine graue Linie stehen sollte, war eine Lücke. * * Jetzt trägt .module-step__line die graue Linie, immer, in voller * Breite, bei jedem Schritt gleich - erreicht oder nicht. Der grüne * Fortschritt ist ein ::after darauf, deckungsgleich, und nur der * bewegt sich. * * Das ist nicht nur der Ausweg aus dem Fehler, es ist die richtige * Aufteilung: Eine Skala und ihr Füllstand sind nicht dasselbe * Element. * ================================================================== */ /* * Die Grundlinie. Grau, bei jedem Schritt, ohne Bedingung. * * ⚠️ DREI SELEKTOREN FÜR EINEN WERT, und das mit Absicht (05.09.2026): * Der Bricks-Block färbte die Linie über * ".module-step-check .module-step__line" - drei Klassen. Ein * einzelnes ".module-step__line" hat zwei und verliert gegen jeden * Rest, der davon stehenbleibt. Genau daran ist die Linien-Animation * heute unsichtbar geblieben: Die Grundlinie war schon grün, der * Fortschritt lief darüber und niemand sah es. * * Die beiden zustandsqualifizierten Selektoren sagen dasselbe wie der * erste, nur mit genug Gewicht. Ein Schritt ist immer entweder check * oder uncheck; der bare Selektor bleibt trotzdem stehen, damit ein * Schritt ohne Zustandsklasse nicht ohne Linie dasteht. */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step__line, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__line, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-uncheck .module-step__line { background-color: var(--brand-app-3); } /* * Der Fortschritt. inset: 0 legt ihn deckungsgleich auf die Grundlinie * - die ist absolut positioniert und damit selbst der Bezugsrahmen. * * transform: scaleX(1) ist der ENDZUSTAND und steht deshalb hier, in * einer gewöhnlichen Regel, nicht in einem to der Keyframes. Ohne * Animation ist es ein Nullwert und ändert nichts - genau so soll es * sein: Fällt die Bewegung aus, steht der Fortschritt sofort in voller * Länge. */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__line::after { content: ''; position: absolute; inset: 0; background-color: var(--brand-green-900); transform: scaleX(1); transform-origin: left center; } /* ===================================================================== * 2. Das Einblenden - bei jedem Aufruf * * Ein Takt je Schritt: Kreis füllt sich, seine Linie läuft nach rechts, * nächster Kreis. Nur erledigte Schritte bewegen sich; ein offener * Schritt hat keine Animation, nicht einmal eine mit Dauer null. * * ENTSCHEIDUNG 05.09.2026: Die Bewegung lief kurzzeitig nur beim ersten * Aufruf des Tages, gesteuert über eine Klasse aus PHP und einen * Vermerk am Konto. Das ist ersatzlos entfallen - sie läuft wieder bei * jedem Aufruf. Gescoped wird über .modul-sichtbarkeit__right, die * ohnehin am Container der Schritte liegt: kein zusätzliches Attribut * in Bricks, kein zweiter Schalter. * * ⚠️ DIE KEYFRAMES HABEN NUR EIN from. Das ist Absicht und der Kern * der Sache: Ohne to nimmt der Browser als Ziel den Wert aus den * Regeln oben. Die grüne Farbe steht damit an genau einer Stelle - * ein to mit derselben Farbe wäre eine zweite Quelle, die beim * nächsten Farbwechsel zurückbliebe. * ================================================================== */ @keyframes sw-weg-kreis { from { background-color: var(--brand-app-2); border: 2px solid var(--brand-app-3); } } @keyframes sw-weg-icon { from { color: var(--brand-green-900); stroke: var(--brand-green-900); } } @keyframes sw-weg-linie { from { transform: scaleX(0); } } /* ===================================================================== * Takt und Dauern * * 🔴 DER VERSATZ IST EINE RECHNUNG, KEINE ZAHL (05.09.2026). Er stand * fest auf 420 ms, während die Kette aus Kreis (260) und Linie (400) * 660 ms brauchte: Der nächste Kreis wurde aktiv, bevor die Linie ihn * erreicht hatte. Ein Wert, der sich aus anderen ergibt, darf nicht * daneben geschrieben werden - beim nächsten Feintuning an einer der * Dauern wäre er sofort wieder falsch, und zwar ohne dass irgendwo * etwas fehlschlägt. Dieselbe Regel wie bei der Passwortlänge. * * Zwei Dauern sind die Quelle, alles andere folgt daraus: * * Takt = Kreis + Linie eine volle Etappe * Versatz = (n-1) × Takt wann Schritt n beginnt * Linie = Versatz + Kreisdauer sobald ihr Kreis fertig ist * * Damit greift kein Element dem vorigen vor. Mit 220 und 320 ms: * * Kreis 1 0 - 220 Linie 1 220 - 540 * Kreis 2 540 - 760 Linie 2 760 - 1080 * Kreis 3 1080 - 1300 Linie 3 1300 - 1620 * Kreis 4 1620 - 1840 Linie 4 ohne Bewegung * * Der Weg ist nach 1,84 s durch. Die Dauern stehen am Container, damit * jeder Schritt sie erbt - und damit an genau einer Stelle gedreht * wird. * ================================================================== */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right { --sw-weg-kreis-dauer: 220ms; --sw-weg-linie-dauer: 320ms; /* * ⚠️ DIESE ZEILE IST DER GRUND FÜR DEN GANZEN BLOCK. Sie hält die * Kette zusammen: Wer oben eine Dauer ändert, ändert den Takt mit. * Eine feste Zahl hier wäre beim nächsten Mal wieder falsch, ohne * dass es auffällt - die Animation liefe weiter, nur eben * übereinander. */ --sw-weg-takt: calc(var(--sw-weg-kreis-dauer) + var(--sw-weg-linie-dauer)); } .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check { --sw-weg-versatz: 0ms; } .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check:nth-child(2) { --sw-weg-versatz: var(--sw-weg-takt); } .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check:nth-child(3) { --sw-weg-versatz: calc(var(--sw-weg-takt) * 2); } .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check:nth-child(4) { --sw-weg-versatz: calc(var(--sw-weg-takt) * 3); } /* * 🔴 animation-fill-mode: backwards IST TRAGEND. Während der * Verzögerung zeigt das Element den ersten Keyframe, also den grauen * Zustand. Ohne diesen Wert blitzen alle vier Kreise grün auf, bevor * sie nacheinander loslaufen - und der Effekt ist zerstört. Bei * Schritt 4 dauerte das Aufblitzen über anderthalb Sekunden. * * 🔴 UND NICHT both: Der forwards-Anteil von both friert den Endwert * nach dem Lauf ein - mit höherem Vorrang als jede gewöhnliche Regel. * Ein später ergänzter Hover- oder Fokuszustand auf dem Kreis griffe * dann nicht mehr, und zwar ohne erkennbaren Grund: Die Regel steht * da, sieht richtig aus und tut nichts. * * Gebraucht wird nur der backwards-Anteil. Der Endwert kommt aus den * gewöhnlichen Regeln oben, und genau dort soll er auch herkommen. */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__item { animation: sw-weg-kreis var(--sw-weg-kreis-dauer) ease-out backwards; animation-delay: var(--sw-weg-versatz); } .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__icon, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__icon * { animation: sw-weg-icon var(--sw-weg-kreis-dauer) ease-out backwards; animation-delay: var(--sw-weg-versatz); } /* * ⚠️ scaleX STATT width: Eine Breitenänderung zwingt den Browser bei * jedem Einzelbild zum Neuberechnen des Layouts - und das für ein * absolut positioniertes Element zwischen vier Geschwistern. transform * läuft auf der Grafikkarte und bleibt bei jeder Bildschirmgrösse * flüssig. */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__line::after { animation: sw-weg-linie var(--sw-weg-linie-dauer) ease-out backwards; /* Nicht "+ 220ms": Die Linie startet, wenn IHR Kreis fertig ist - und das ist die Kreisdauer, wie immer sie gerade lautet. */ animation-delay: calc(var(--sw-weg-versatz) + var(--sw-weg-kreis-dauer)); } /* * Die Linie des letzten Schritts führt nirgendwohin - im Layout ist sie * über margin-left: -80px ohnehin zurückgezogen. Sie bekommt deshalb * keine Bewegung. * * :last-child und nicht .module-step__line-right: So bleibt die Regel * richtig, wenn ein fünfter Schritt dazukommt. Gemeint ist "die * letzte", nicht "die mit dieser Klasse". */ .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step:last-child .module-step__line::after { animation: none; } /* ===================================================================== * 3. Wer keine Bewegung will * * ⚠️ KEINE ANIMATION, ABER DERSELBE FERTIGE WEG - sofort und * vollständig. Das geht nur, weil die Endwerte oben als gewöhnliche * Regeln stehen: animation: none lässt genau sie übrig. Kein Fade, * keine Restbewegung, kein halber Zustand. * * Das sind Menschen, denen Bewegung auf Bildschirmen körperlich * unangenehm ist. Eine abgeschwächte Animation wäre keine Rücksicht, * sondern eine leisere Zumutung. * * Diese Frage kann nur der Browser beantworten - der Server sieht die * Einstellung nicht. Deshalb steht sie hier und nirgends sonst. * * Gleiche Spezifität wie die Regeln oben; dass dieser Block sie * überstimmt, trägt die Reihenfolge im Stylesheet. Er gehört deshalb * ans Ende der Datei. * ================================================================== */ @media (prefers-reduced-motion: reduce) { .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__item, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__icon, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__icon *, .modul-sichtbarkeit__right.modul-sichtbarkeit__right .module-step-check .module-step__line::after { animation: none; } }