/* ============================================================================ teil-ze-schwung.css — die Schicht Bewegung ueber allem, was es schon gibt. Christopher, 04.10.2026: „Ich will da noch deutlich verbesserte grafische Animationen sehen." Diese Datei schreibt AUSSCHLIESSLICH transform, translate, rotate, scale, opacity, transition, animation, @keyframes, animation-play-state, will-change, filter, clip-path und die drei @media-Netze. Kein Raster, keine Groessen, keine Farben, keine Abstaende. Kein !important. Sie ist NICHT mehr die letzte teil-*.css: waehrend sie entstand, sind teil-zf-dichte.css und teil-zh-gegen.css dazugekommen (gesehen 04.10.2026, 14:05). Nachgesehen, nicht angenommen: teil-zf-dichte.css schreibt nach eigenem Vertrag keine transform, animation oder transition, und teil-zh-gegen.css bewegt ausschliesslich .leistung .gegen-seite. Es gibt also keine Ueberschneidung. Trotzdem gilt fuer jede Regel hier: sie gewinnt ueber SPEZIFITAET, nicht ueber die Ladereihenfolge — damit eine weitere Datei dahinter nichts umwirft. ── WAS ES SCHON GIBT. Vier Dateien ganz gelesen, nicht erinnert ────────── teil-scroll.css Wortweise Ueberschriften (.wortteil/--verzug), gestaffelte Rasterkinder (.stufenkind), Tiefenversatz (.tiefenbild/ --tiefe), Ziffern gleicher Laufweite (.zaehlwerk). Gehoert ganz zu assets/js/bewegung.js. teil-bewegung.css Mikrobewegung mit der Maus: Kacheln heben sich (translate 0 -6px, scale 1.008, Goldrand), Schatten auf ::after, runde Vorschaubilder mit Goldring, Schimmer im Knopf, wachsende Unterstreichung im Fliesstext, Pfeile mit Nachschwingen, dichtere Kopfleiste, drehendes Signet. teil-za-flug.css Der Einflug der Baender auf den Sammelseiten: Bild von links bzw. rechts, Text nachgezogen, zweites Bild gefaechert, Bildunterschrift zuletzt. teil-zd-drehung.css Der HEAROS-Ring auf /hoerakustik/: 72-s-Dauerdrehung, Gegendrehung der Ohrstuecke, Anhalten beim Zeigen, Einflug der fuenf Plaetze. Dazu aus dem Grundbestand: .einblenden/.auf (bau.css 78), .auf/.da (grund.css 451), das Schweben der Notizzettel (grund.css 221), das Partner-Laufband (grund.css 235), der Buehnenversatz .leistung-grund ueber eine CSS-Zeitachse (seiten.css 420) und das Atmen der Blume in ihrer Huellen-Bauform (grund.css 441–448). NICHTS DAVON WIRD HIER WIEDERHOLT. Diese Datei legt nur dazu, was fehlt: eine RICHTUNG beim Erscheinen, eine Staffelung dort, wo bewegung.js keine setzt, ein einheitliches Verhalten ALLER Kartenarten unter dem Zeiger und vier Stellen, die im Gedaechtnis bleiben. ── GEMESSEN AM 04.10.2026, eigener Pruefstand ─────────────────────────── Aufbau: grund.css + bau.css + seiten.css + alle teil-*.css in der Reihenfolge von functions.php, dazu wirkung.js und bewegung.js, mit dem Markup aus front-page.php, angebote.php, standard.php, filiale.php und footer.php. Fenster 1280x820, (hover:hover) and (pointer:fine) = true, prefers-reduced-motion = false. 1) DER HUB DER DREI GROSSEN STARTSEITEN-KARTEN WAR TOT. Das ist der handfeste Befund des Tages und der Grund fuer Abschnitt 3. grund.css 248 .feld:hover{ transform:translateY(-6px); box-shadow:… } grund.css 453 .auf.da{ opacity:1; transform:none } Beide sind 0-2-0 — eine Klasse plus eine Pseudoklasse wiegt genauso viel wie zwei Klassen. Bei gleicher Spezifitaet gewinnt die SPAETERE Regel, und .auf.da steht 205 Regeln weiter unten. Gemessen an einer .feld, die wie auf der Startseite „feld glas auf v1" traegt, mit einem Stellvertreter fuer :hover (jedes ":hover" in allen 108 getroffenen Regeln durch ".xh" ersetzt — gleiche Spezifitaet, gleiche Reihenfolge, gleiche Datei, also dieselbe Kaskade): transform none ← der Hub kommt nicht an box-shadow rgba(19,55,109,.13) 0 22px 50px ← der Schatten schon Die Karte bekam also einen tieferen Schatten, ohne sich zu bewegen. Zum Vergleich, dieselbe Messung an den anderen Kartenarten: .kachel translate 0 -6px · scale 1.008 ✓ .filiale translate 0 -6px · scale 1.008 ✓ .std-kachel translate 0 -6px · scale 1.008 ✓ .angebot transform matrix(1,0,0,1,0,-6) ✓ Die drei ersten liegen auf translate (teil-bewegung.css), und translate ruehrt .auf.da nicht an. Genau diesen Kanal bekommt .feld hier auch. (Zur Messung selbst, damit der naechste nicht dieselbe Stunde verliert: ein Zeiger ueber die Fernsteuerung erzeugt in diesem Browser KEINEN :hover-Zustand — el.matches(':hover') blieb false. Daher der Stellvertreter. Und ein getComputedStyle unmittelbar nach dem Setzen der Klasse liest den Zwischenwert der laufenden Ueberblendung, nicht das Ziel: gemessen scale 1 und translate 0px statt 1.008 und 0 -6px. Zwei Einzelbilder abwarten.) 2) DIE STAFFELUNG DER ANGEBOTE FEHLT. bewegung.js staffelt nur ".kacheln, .filialen, .termin-wahl, .fil-reihe" (RASTER, Z. 60). .angebote-raster steht nicht darin. Gemessen an .angebot: transition-property transform, box-shadow, border-color transition-duration 0.5s, 0.5s, 0.5s transition-delay 0s, 0s, 0s Das Einzige, was dort staffelt, ist bau.css 80–83 (.einblenden:nth-child(2…5), bis .28 s) — und das ist ein ALLEINSTEHENDES transition-delay. Es liegt damit auch auf dem Zeigen mit der Maus, also genau der Fehler, den teil-bewegung.css Punkt 2 beschreibt und der Christopher am 03.10.2026 aufgefallen ist. Abschnitt 2 ersetzt ihn durch einen Verzug je Eigenschaft und fuehrt ihn bis zum achten Angebot weiter. 3) WAS DER BROWSER HIER KANN, nachgefragt statt angenommen: CSS.supports('animation-timeline','view()') true CSS.supports('animation-timeline','scroll()') true Eine View-Zeitachse laeuft auch auf einem SVG-: mit animation-range cover 0% cover 30% gemessen, 19 Kreise, jeder mit eigener ViewTimeline bei 3,34 % Fortschritt, opacity 0,2068 statt 1. Darauf beruht Abschnitt 4a. (Beim ersten Versuch stand 1 — die Zeitachse haengt sich erst im naechsten Einzelbild an. Wer das nachmisst, muss zweimal requestAnimationFrame abwarten, sonst misst er den Zustand davor.) Das Haus kennt diese Technik schon: seiten.css 420 versetzt den Buehnengrund mit animation-timeline:scroll(root block). 4) WARUM DIE BESONDEREN STELLEN AUF EINER VIEW-ZEITACHSE LAUFEN und nicht auf der Uhr: „nichts darf dauernd laufen, waehrend es niemand sieht." Eine Zeitachse aus dem Sichtfenster hat diese Eigenschaft eingebaut — sie schreitet nur fort, wenn gescrollt wird, und nur solange das Element im Bild ist. Eine unendliche Animation auf der Uhr haette dagegen weiter gerechnet, nachdem das Element aus dem Bild gescrollt ist; teil-zd- drehung.css nennt genau das offen als seinen ungeloesten Rest, und grund.css 221/235 (Notizzettel, Laufband) haben ihn ebenfalls. Preis dieser Wahl, ehrlich dazugesagt: faellt die Zeitachse aus (aelterer Browser), entsteht die Bewegung gar nicht — und es FEHLT nichts, weil kein Ruhezustand ausserhalb der Keyframes steht. Abschnitt 4 versteckt deshalb nichts in einer eigenen Regel, sondern ausschliesslich im from{} seiner Keyframes. Einzige Ausnahme ist 4d, und die haengt an der Freigabeklasse des Hauses und steht in beiden Netzen. ── VIER FALLEN, die hier schon Schaden angerichtet haben ──────────────── 1) Kein pauschales transition/transition-delay. Jede Dauer und jeder Verzug steht in dieser Datei in der Kurzform direkt hinter seiner Eigenschaft. 2) Spaeter in der Datei schlaegt frueher NUR bei gleicher Spezifitaet. Jede Freigabe-Regel hier traegt deshalb die Freigabeklasse ZUSAETZLICH zum Ruheselektor und ist damit um genau eine Klasse spezifischer. 3) Drei Netze. Alles, was hier etwas versetzt oder beschneidet, steht in Abschnitt 6 (@media scripting:none) und Abschnitt 7 (@media prefers-reduced-motion:reduce) noch einmal — mit den GLEICHEN Selektoren, nicht mit kuerzeren. Das erste Netz spannen die Skripte selbst: wirkung.js deckt nach 900 ms auf, was im Fenster steht, und nach 12 000 ms alles (Z. 43–48); buehne.js setzt .da nach 6 500 ms auf alles (Z. 59–65). 4) Kein Querscrollen. Der seitliche Weg bleibt kleiner als die Gasse neben .bahn (--gasse:clamp(16px,4vw,56px)) und schrumpft mit den Haltepunkten; unter 940 px faellt er ganz weg. Jeder andere Weg hier ist senkrecht. ========================================================================= */ :root{ /* Seitlicher Weg beim Erscheinen. 40 px: weit genug, dass die Richtung erkennbar ist, kleiner als die Gasse von 51 px bei 1280 px. */ --ze-seit:40px; /* Senkrechter Weg. Bleibt nahe an den 22/26 px des Hauses, damit ein Raster neben einem einfachen .einblenden nicht aus der Reihe faellt. */ --ze-hub:18px; /* Ein Schritt der Staffelung. Hoechstens 90 ms, sonst wird Warten daraus — bei acht Kacheln sind 80 ms schon 560 ms bis zur letzten. */ --ze-schritt:80ms; /* Heben unter dem Zeiger. Derselbe Wert wie --bew-mittel in teil-bewegung.css, damit sich alle Kartenarten gleich anfuehlen. */ --ze-heben:.26s; /* Weg der Notizzettel am Hero, Abschnitt 4c. Rein senkrecht. */ --ze-drift:9px; } /* ============================================================================ 1 — RICHTUNG STATT VERBLASSEN Ein Rasterkind in einer linken Spalte kommt von links herein, eines in einer rechten von rechts. Unterschieden wird an :nth-child — das Markup wird nicht angefasst, es darf hier auch nicht. WARUM transform UND NICHT translate: transform gehoert dem Einblenden (bau.css 78 translateY(22px), grund.css 451 translateY(26px)), translate gehoert dem Zeigen mit der Maus (teil-bewegung.css Punkt 1). Hier wird der vorhandene Weg nur ERSETZT, nicht ein zweiter danebengelegt. Deshalb braucht es auch keine neue transition: die des Hauses traegt den neuen Wert mit (.auf 0,85 s, .einblenden 0,7 s, beide --weich). Das ist der ganze Trick dieses Abschnitts — er fuegt Bewegung hinzu, ohne eine einzige Dauer anzufassen. ZWEI FREIGABEN, weil das Haus zwei hat: Startseite .auf → .da (buehne.js) Unterseiten .einblenden → .auf (wirkung.js) Jeder Ruheselektor unten hat seine Freigabe mit genau einer Klasse mehr. Ungerade Kinder von links, gerade von rechts. In einem zweispaltigen Raster ist das genau links/rechts; in einem drei- oder vierspaltigen faechert es auf, was gewollt ist. Einspaltig (unter 940 px) faellt der seitliche Anteil weg — dort bliebe nur ein Hin und Her ohne Sinn (Abschnitt 5). .band2 kommt hier NICHT vor: der Einflug der Baender gehoert teil-za-flug.css und waere sonst zweimal da. .ring-platz ebenso wenig — der gehoert teil-zd-drehung.css. ========================================================================= */ /* ── 1a · Startseite: .auf → .da ───────────────────────────────────────── Ruhe 0-3-0 (.zwei .feld .auf) gegen .auf 0-1-0 und .auf.da 0-2-0 — gewinnt. Freigabe 0-4-0 — gewinnt gegen die eigene Ruhe. */ .zwei > .feld.auf:nth-child(odd), .kacheln > .kachel.auf:nth-child(odd), .filialen > .filiale.auf:nth-child(odd){ transform:translate3d(calc(var(--ze-seit) * -1), var(--ze-hub), 0); } .zwei > .feld.auf:nth-child(even), .kacheln > .kachel.auf:nth-child(even), .filialen > .filiale.auf:nth-child(even){ transform:translate3d(var(--ze-seit), var(--ze-hub), 0); } .zwei > .feld.auf.da:nth-child(odd), .zwei > .feld.auf.da:nth-child(even), .kacheln > .kachel.auf.da:nth-child(odd), .kacheln > .kachel.auf.da:nth-child(even), .filialen > .filiale.auf.da:nth-child(odd), .filialen > .filiale.auf.da:nth-child(even){ transform:none; } /* ── 1b · Unterseiten: .einblenden → .auf ──────────────────────────────── Dieselbe Rechnung, nur mit der anderen Freigabe. .kacheln.vier auf der Startseite laeuft ebenfalls hierueber (front-page.php 242: „kachel glas einblenden"), .termin-wahl ueber termin.php 284, .fil-reihe ueber filiale.php 723, .angebote-raster ueber angebote.php 128. */ .kacheln > .kachel.einblenden:nth-child(odd), .filialen > .filiale.einblenden:nth-child(odd), .termin-wahl > .termin-kachel.einblenden:nth-child(odd), .fil-reihe > .fil-kachel.einblenden:nth-child(odd), .angebote-raster > .angebot.einblenden:nth-child(odd){ transform:translate3d(calc(var(--ze-seit) * -1), var(--ze-hub), 0); } .kacheln > .kachel.einblenden:nth-child(even), .filialen > .filiale.einblenden:nth-child(even), .termin-wahl > .termin-kachel.einblenden:nth-child(even), .fil-reihe > .fil-kachel.einblenden:nth-child(even), .angebote-raster > .angebot.einblenden:nth-child(even){ transform:translate3d(var(--ze-seit), var(--ze-hub), 0); } .kacheln > .kachel.einblenden.auf:nth-child(odd), .kacheln > .kachel.einblenden.auf:nth-child(even), .filialen > .filiale.einblenden.auf:nth-child(odd), .filialen > .filiale.einblenden.auf:nth-child(even), .termin-wahl > .termin-kachel.einblenden.auf:nth-child(odd), .termin-wahl > .termin-kachel.einblenden.auf:nth-child(even), .fil-reihe > .fil-kachel.einblenden.auf:nth-child(odd), .fil-reihe > .fil-kachel.einblenden.auf:nth-child(even), .angebote-raster > .angebot.einblenden.auf:nth-child(odd), .angebote-raster > .angebot.einblenden.auf:nth-child(even){ transform:none; } /* ── 1c · Das Bild zieht beim Erscheinen heran ─────────────────────────── Eine Animation, kein Uebergang: die vorhandene transition der Bilder (transform, fuer den Zoom unter dem Zeiger) bleibt dadurch unangetastet. Gelaufen wird auf scale — ein freier Kanal, die Bilder bewegen ihren Zoom ueber transform (gemessen: .kachel img matrix(1.07), .feld .bildteil img matrix(1.06)). animation-fill-mode BACKWARDS, nicht both: waehrend des Verzugs soll der Anfangswert gelten, danach aber NICHTS mehr festgehalten werden. Mit "both" bliebe scale 1 dauerhaft als Animationswert stehen und wuerde jede spaetere scale-Regel auf demselben Bild schlagen — Animationen gewinnen in der Kaskade gegen normale Deklarationen. So endet die Animation und das Bild gehoert wieder seiner Datei. Der Verzug liest zuerst --verzug (das setzt bewegung.js je Rasterkind, Z. 268) und faellt sonst auf die Staffel dieser Datei zurueck. */ @keyframes ze-bild-heran{ from{ scale:1.045 } to { scale:1 } } .kacheln > .kachel.auf.da img, .kacheln > .kachel.einblenden.auf img, .zwei > .feld.auf.da .bildteil img, .filialen > .filiale.auf.da .fil-foto img, .filialen > .filiale.einblenden.auf .fil-foto img{ animation:ze-bild-heran .95s var(--weich) backwards; animation-delay:var(--verzug, var(--ze-stufe, 0ms)); } /* ============================================================================ 2 — STAFFELUNG, WO SIE FEHLT bewegung.js staffelt ".kacheln, .filialen, .termin-wahl, .fil-reihe" und setzt dort --verzug je Kind; teil-scroll.css und teil-bewegung.css legen den Verzug dann eigenschaftsgenau auf. .angebote-raster faellt durch dieses Netz (Messung 2 im Kopf) und bekommt seine Staffel hier. Die Werte stammen aus der Messung, nicht aus der Erinnerung: .angebot ueberblendet transform, box-shadow und border-color in je 0,5 s mit --weich. Genau diese drei stehen unten wieder, nur dass transform und opacity den Verzug tragen und box-shadow und border-color NICHT — sonst wartet die achte Karte 560 ms, bevor sie sich unter dem Zeiger hebt. opacity kommt dazu, weil .einblenden (bau.css 78) sie ueberblendet; ohne den Eintrag wuerde sie hart umspringen. translate und scale kommen dazu, weil Abschnitt 3 sie fuer das Zeigen mit der Maus braucht. 0-2-0 (.angebote-raster .angebot) gegen bau.css 80–83 (.einblenden:nth-child(n), ebenfalls 0-2-0) — und bau.css laedt als zweite. Der alleinstehende Verzug ist damit ersetzt. .leistung .angebot bleibt unberuehrt: das ist das Karussell auf den Leistungsseiten, es steht nicht in .angebote-raster und gehoert teil-z7-angebote.css. ========================================================================= */ .angebote-raster > .angebot{ --ze-stufe:0ms; transition: opacity .7s var(--weich) var(--ze-stufe,0ms), transform .7s var(--weich) var(--ze-stufe,0ms), box-shadow .5s var(--weich) 0ms, border-color .5s var(--weich) 0ms, translate var(--ze-heben) var(--weich) 0ms, scale var(--ze-heben) var(--weich) 0ms; } .angebote-raster > .angebot:nth-child(2){ --ze-stufe:calc(var(--ze-schritt) * 1) } .angebote-raster > .angebot:nth-child(3){ --ze-stufe:calc(var(--ze-schritt) * 2) } .angebote-raster > .angebot:nth-child(4){ --ze-stufe:calc(var(--ze-schritt) * 3) } .angebote-raster > .angebot:nth-child(5){ --ze-stufe:calc(var(--ze-schritt) * 4) } .angebote-raster > .angebot:nth-child(6){ --ze-stufe:calc(var(--ze-schritt) * 5) } .angebote-raster > .angebot:nth-child(7){ --ze-stufe:calc(var(--ze-schritt) * 6) } /* Ab der achten Karte kein weiterer Verzug. 7 x 80 ms = 560 ms ist die Grenze, ab der das Warten laenger dauert als die Bewegung selbst. */ .angebote-raster > .angebot:nth-child(n+8){ --ze-stufe:calc(var(--ze-schritt) * 7) } /* ============================================================================ 3 — REAGIERENDE FLAECHEN, EINHEITLICH Ziel: jede Kartenart antwortet gleich. teil-bewegung.css hat .filiale, .karte, .kachel, .termin-kachel, .std-kachel, .optical-karte und .fil-kachel schon so (translate 0 -6px, scale 1.008) — nachgemessen, es wirkt. Es fehlen .feld und .angebot. .glas BEKOMMT KEINE EIGENE REGEL, und das ist eine Entscheidung, keine Luecke. teil-bewegung.css hat .glas bewusst ausgelassen und den Grund aufgeschrieben: .glas traegt auch die Kopfzeile der Terminseite, .sammel-leitsatz, .leistung-vorteil, .stelle-karte und das Abschiedsblatt — „eine Flaeche, die man nicht anklicken kann, darf beim Darueberfahren nicht wackeln." Nachgezaehlt, welche .glas-Flaechen es ueberhaupt gibt (alle Vorlagen, 04.10.2026): kachel glas · termin-info glas · glas karte fil-kachel · zu-blatt glas · termin-kopf glas · glas stelle-karte · glas sammel-leitsatz · glas leistung-vorteil · glas karte optical-karte · glas gegen-seite · fil-gruppe glas · feld glas · angebot glas. JEDE anklickbare davon ist zugleich .kachel, .karte, .feld oder .angebot — und die reagieren nach diesem Abschnitt alle. Eine zusaetzliche Regel auf .glas haette nur die Leseflaechen in Bewegung gebracht. Ein Versuch mit .glas:has(a) wurde verworfen: :has(a) wiegt 0-1-1 und haette damit .karte:hover (0-2-0) aus teil-bewegung.css geschlagen — die Filialkacheln haetten statt 6 px nur noch 4 px gehoben. Der Schatten bleibt, wo er ist: box-shadow gehoert nicht in diese Datei, und die vorhandenen Hover-Schatten (grund.css 248 fuer .feld, seiten.css fuer .angebot, das ::after aus teil-bewegung.css fuer .filiale/.karte) tun ihre Arbeit bereits. Hier kommt nur der Weg dazu, der fehlt. ========================================================================= */ /* Der Verzug des Einblendens als eigene Groesse, damit die transition unten ihn je Eigenschaft setzen kann statt pauschal (Falle 1). Dieselbe Leiter, die grund.css 454–455 als alleinstehendes transition-delay fuehrt. Eigene Variable statt --bew-stufe aus teil-bewegung.css: diese Datei soll nicht still ihre Staffelung verlieren, wenn dort jemand umbenennt. */ .auf.v1{ --ze-stufe:70ms } .auf.v2{ --ze-stufe:140ms } .auf.v3{ --ze-stufe:210ms } .auf.v4{ --ze-stufe:280ms } .auf.v5{ --ze-stufe:350ms } .auf.v6{ --ze-stufe:420ms } /* .feld bekommt den Kanal, auf dem der Hub ankommt. 0-2-0 gegen .auf 0-1-0 und .feld 0-1-0. Die Leiter aus grund.css 454 geht dabei nicht verloren, weil der Verzug hier aus --ze-stufe kommt. box-shadow steht in der Liste, damit der vorhandene Hover-Schatten aus grund.css 248 weiter weich kommt und nicht hart umspringt. */ .zwei > .feld{ transition: opacity .85s var(--weich) var(--ze-stufe,0ms), transform .85s var(--weich) var(--ze-stufe,0ms), translate var(--ze-heben) var(--weich) 0ms, scale var(--ze-heben) var(--weich) 0ms, box-shadow .5s var(--weich) 0ms; } /* ── Zeigen mit der Maus ───────────────────────────────────────────────── Nur mit echtem Zeiger: auf dem Telefon bleibt ein :hover nach dem Antippen haengen, und eine Kachel, die nicht zurueckfaellt, sieht aus wie ein Fehler. Dieselbe Begruendung wie teil-bewegung.css Abschnitt 1. Beim Angebot wird der vorhandene Hub von transform auf translate UMGELEGT (transform:none ersetzt ihn, es wird nichts addiert). Grund: transform traegt nach Abschnitt 2 den Verzug der Staffelung, und ein Hub auf transform wuerde bei der achten Karte 560 ms auf sich warten lassen — genau der Fehler, den diese Datei an zwei anderen Stellen behebt. */ @media (hover:hover) and (pointer:fine){ .zwei > .feld:hover{ translate:0 -6px; scale:1.008 } .angebote-raster > .angebot:hover{ transform:none; translate:0 -6px; scale:1.008 } } /* Tastaturfokus: dieselbe Hervorhebung ohne Zeigerschranke — Barrierefreiheit, nicht Zierde. :focus-within, weil der Verweis IM Feld liegt und nicht das Feld selbst ist (front-page.php: a.mehr; angebote.php: a.knopf). */ .zwei > .feld:focus-within{ translate:0 -6px; scale:1.008 } .angebote-raster > .angebot:focus-within{ transform:none; translate:0 -6px; scale:1.008 } /* Klicken: kurz nachgeben. Steht nach :hover und :focus-within, damit es bei gleicher Spezifitaet gewinnt — so wie teil-bewegung.css es haelt. */ .zwei > .feld:active{ translate:0 -1px; scale:.993 } .angebote-raster > .angebot:active{ transform:none; translate:0 -1px; scale:.993 } /* ============================================================================ 4 — VIER STELLEN, DIE BLEIBEN 4a, 4b und 4c laufen auf einer View-Zeitachse (Kopf, Messung 3 und 4): sie schreiten nur fort, solange gescrollt wird UND das Element im Bild ist. Nichts davon rechnet, waehrend es niemand sieht, und nichts davon haengt an einem Skript. Jeder Ruhezustand steht ausschliesslich im from{} der Keyframes — faellt die Zeitachse aus, entsteht gar keine Animation und es fehlt nichts. ========================================================================= */ @media (prefers-reduced-motion:no-preference){ /* ════════════════════════════════════════════════════════════════════════ HIER STANDEN VIER BESONDERE STELLEN AUF animation-timeline:view() — entfernt am 04.10.2026, bevor sie je live waren. Die Blume des Lebens, die vier Goldstriche, die Notizzettel am Hero und die Trennstriche der Vertrauenszeile liefen auf einer View-Zeitachse mit fill:both und opacity:0 im from{}. DER FEHLER: eine View-Zeitachse haengt sich an den naechsten SCROLLBEHAELTER, nicht ans Fenster. grund.css Zeile 52 gibt .blatt ein overflow-x:hidden — und damit ist .blatt ein Scrollbehaelter, der in Blockrichtung keinen Scrollweg hat. Gemessen beim Gegenlesen: .blatt scrollHeight 9462 = clientHeight 9462, Scrollweg exakt 0. Die Zeitachse steht also still, der from-Zustand bleibt stehen — und mit opacity:0 im from{} waere die Blume auf JEDER Seite unsichtbar gewesen. Dieselbe Falle ist in diesem Haus schon einmal zugeschlagen: ein overflow-x:clip auf dem body machte ihn zum Scrollbehaelter. Die vier Gesten sind nicht verloren, sie brauchen nur den anderen Weg: die Hausmechanik .einblenden → .auf (wirkung.js) mit ihrem 12-Sekunden-Netz. Damit kommen sie wieder, sobald jemand Zeit dafuer hat. ════════════════════════════════════════════════════════════════════════ */ /* ── 4d · Die Trennstriche der Vertrauenszeile wachsen aus der Mitte ──── Warum diese Stelle: „1929 · 7 Standorte · 2 Branchen" ist das Erste, was ueber dem Falz steht, und bewegung.js zaehlt die drei Zahlen schon hoch (.vertrauen .zahl, bis 1,2 s). Die beiden senkrechten Striche dazwischen standen dabei bisher stumm daneben. Wenn sie waehrend des Zaehlens aus der Mitte auf ihre vollen 30 px wachsen, wird aus drei Zahlen eine Zeile. Gemessen: .vertrauen .strich ist 1 px breit und 30 px hoch, ohne eigene transform und ohne Pseudoelement — der scale-Kanal ist frei. Aus der Mitte heraus, weil transform-origin hier nicht geschrieben werden darf; bei einem 30 px hohen Strich ist das ohnehin die ruhigere Geste. Diese eine Stelle steht ABSICHTLICH ausserhalb des @supports-Blocks und haengt an der Freigabe des Hauses: die Vertrauenszeile steht beim Laden schon im Bild, eine View-Zeitachse waere dort bereits durchgelaufen und man saehe nichts. Weil sie damit auf buehne.js angewiesen ist, steht sie in beiden Netzen (Abschnitt 6 und 7). Der Verzug von 340 ms setzt sie hinter den Auftritt der Zeile selbst (.auf.v4, 280 ms) und mitten in das Hochzaehlen der Zahlen. */ .vertrauen.auf .strich{ scale:1 0; transition:scale .8s var(--weich) 340ms; } .vertrauen.auf.da .strich{ scale:1 1 } } /* ============================================================================ 5 — HALTEPUNKTE Hauswerte 1660 / 940 / 430. Der seitliche Weg schrumpft mit der Gasse (--gasse:clamp(16px,4vw,56px)) und faellt unter 940 px ganz weg: dort steht fast jedes Raster einspaltig, und ein Wechsel von links/rechts auf einer einzigen Spalte ist kein Rhythmus, sondern ein Zappeln. Die Staffel wird knapper, weil auf einem kleinen Schirm mehr Kacheln gleichzeitig durchs Bild laufen. Gegengerechnet: bei 1660 px Fenster ist die Gasse am Anschlag von 56 px, der Weg betraegt dort 34 px. Bei 1000 px ist die Gasse 40 px, der Weg 34 px. Bei 960 px waeren es 38,4 gegen 34 px — der engste Punkt, und er passt noch. Darunter ist der Weg null. ========================================================================= */ @media (max-width:1660px){ :root{ --ze-seit:34px } } @media (max-width:940px){ :root{ --ze-seit:0px; --ze-hub:14px; --ze-schritt:60ms; --ze-heben:.2s; --ze-drift:6px; } } @media (max-width:430px){ :root{ --ze-hub:11px; --ze-schritt:50ms; --ze-drift:0px; } /* Der Einzug der Bilder faellt weg: auf 343 px Breite sind 4,5 % keine Geste mehr, sondern nur Rechenzeit auf dem schwaecheren Geraet. */ .kacheln > .kachel.auf.da img, .kacheln > .kachel.einblenden.auf img, .zwei > .feld.auf.da .bildteil img, .filialen > .filiale.auf.da .fil-foto img, .filialen > .filiale.einblenden.auf .fil-foto img{ animation:none; } } /* ============================================================================ 6 — NETZ: JAVASCRIPT ABGESCHALTET Ohne Skript entsteht weder .da noch .auf — und ohne sie bliebe jedes Rasterkind aus Abschnitt 1 dauerhaft versetzt stehen und jeder Trennstrich aus 4d auf Hoehe null. Die Selektoren stehen deshalb hier VOLLSTAENDIG noch einmal; ein kuerzerer waere weniger spezifisch und wuerde nicht greifen (Falle 2). Kennt ein Browser (scripting) nicht, faellt dieser Block weg — dann traegt das 12-Sekunden-Netz von wirkung.js bzw. das 6,5-Sekunden-Netz von buehne.js allein, und beide setzen die Klasse wirklich. Abschnitt 4a bis 4c brauchen hier nichts: sie kommen ohne Skript aus. Am Ende des Blocks steht ein Netz, das nicht zu dieser Datei gehoert, aber beim Messen aufgefallen ist und nirgends sonst steht — Begruendung dort. ========================================================================= */ @media (scripting: none){ .zwei > .feld.auf:nth-child(odd), .zwei > .feld.auf:nth-child(even), .kacheln > .kachel.auf:nth-child(odd), .kacheln > .kachel.auf:nth-child(even), .filialen > .filiale.auf:nth-child(odd), .filialen > .filiale.auf:nth-child(even), .kacheln > .kachel.einblenden:nth-child(odd), .kacheln > .kachel.einblenden:nth-child(even), .filialen > .filiale.einblenden:nth-child(odd), .filialen > .filiale.einblenden:nth-child(even), .termin-wahl > .termin-kachel.einblenden:nth-child(odd), .termin-wahl > .termin-kachel.einblenden:nth-child(even), .fil-reihe > .fil-kachel.einblenden:nth-child(odd), .fil-reihe > .fil-kachel.einblenden:nth-child(even), .angebote-raster > .angebot.einblenden:nth-child(odd), .angebote-raster > .angebot.einblenden:nth-child(even){ transform:none; } .vertrauen.auf .strich{ scale:none; transition:none } /* ── Ein Befund, der aelter ist als diese Datei ──────────────────────── Beim Messen des Netzes oben mitgefunden, 04.10.2026: OHNE JAVASCRIPT BLEIBT IM GANZEN THEME JEDE EINGEBLENDETE FLAECHE AUF opacity 0. Gemessen an der .feld der Startseite ohne Freigabeklasse: opacity 0 — die Karte ist da, aber unsichtbar. grund.css 451 .auf{ opacity:0; transform:translateY(26px) } bau.css 78 .einblenden{ opacity:0; transform:translateY(22px) } Beide haengen allein an einer Klasse, die ein Skript setzt. bau.css 86 faengt nur prefers-reduced-motion ab, nicht den abgeschalteten Browser. Das ist genau das dritte Netz aus der Hausregel, und es fehlt. Hier steht es. opacity und transform darf diese Datei schreiben, die Regel wirkt ausschliesslich im Zweig „kein JavaScript", und eine leere Seite ist der teuerste aller Fehler. Spezifitaet 0-1-0 wie das Original, aber in einer Datei, die spaeter laedt. Wer ein eigenes Netz mitbringt, steht darueber und bleibt unberuehrt: teil-za-flug.css (.band2…, 0-3-0) und teil-zd-drehung.css (.ring-teil…, 0-3-0 und mehr). */ .einblenden, .auf{ opacity:1; transform:none } } /* ============================================================================ 7 — NETZ: prefers-reduced-motion Keine Bewegung heisst aus, nicht gedaempft — so haelt es teil-bewegung.css Abschnitt 9, teil-za-flug.css Abschnitt 8 und teil-zd-drehung.css. Jeder Block der Abschnitte 1 bis 5 hat hier seine Entsprechung, in derselben Reihenfolge und mit denselben Selektoren. Abschnitt 4a bis 4c stehen bereits in @media (prefers-reduced-motion: no-preference) und entstehen hier gar nicht erst; sie werden trotzdem genannt, falls ein Browser beide Abfragen gleichzeitig als wahr liefert. bau.css 87–88 kuerzt in diesem Zweig ohnehin jede Animation und jeden Uebergang auf 0,001 ms. Das ist ein zweites Netz, kein Ersatz: es kuerzt die DAUER, es nimmt den versetzten AUSGANGSWERT nicht weg. ========================================================================= */ @media (prefers-reduced-motion:reduce){ /* 1a/1b — Richtung */ .zwei > .feld.auf:nth-child(odd), .zwei > .feld.auf:nth-child(even), .zwei > .feld.auf.da:nth-child(odd), .zwei > .feld.auf.da:nth-child(even), .kacheln > .kachel.auf:nth-child(odd), .kacheln > .kachel.auf:nth-child(even), .kacheln > .kachel.auf.da:nth-child(odd), .kacheln > .kachel.auf.da:nth-child(even), .filialen > .filiale.auf:nth-child(odd), .filialen > .filiale.auf:nth-child(even), .filialen > .filiale.auf.da:nth-child(odd), .filialen > .filiale.auf.da:nth-child(even), .kacheln > .kachel.einblenden:nth-child(odd), .kacheln > .kachel.einblenden:nth-child(even), .kacheln > .kachel.einblenden.auf:nth-child(odd), .kacheln > .kachel.einblenden.auf:nth-child(even), .filialen > .filiale.einblenden:nth-child(odd), .filialen > .filiale.einblenden:nth-child(even), .filialen > .filiale.einblenden.auf:nth-child(odd), .filialen > .filiale.einblenden.auf:nth-child(even), .termin-wahl > .termin-kachel.einblenden:nth-child(odd), .termin-wahl > .termin-kachel.einblenden:nth-child(even), .termin-wahl > .termin-kachel.einblenden.auf:nth-child(odd), .termin-wahl > .termin-kachel.einblenden.auf:nth-child(even), .fil-reihe > .fil-kachel.einblenden:nth-child(odd), .fil-reihe > .fil-kachel.einblenden:nth-child(even), .fil-reihe > .fil-kachel.einblenden.auf:nth-child(odd), .fil-reihe > .fil-kachel.einblenden.auf:nth-child(even), .angebote-raster > .angebot.einblenden:nth-child(odd), .angebote-raster > .angebot.einblenden:nth-child(even), .angebote-raster > .angebot.einblenden.auf:nth-child(odd), .angebote-raster > .angebot.einblenden.auf:nth-child(even){ transform:none; } /* 1c — Einzug der Bilder */ .kacheln > .kachel.auf.da img, .kacheln > .kachel.einblenden.auf img, .zwei > .feld.auf.da .bildteil img, .filialen > .filiale.auf.da .fil-foto img, .filialen > .filiale.einblenden.auf .fil-foto img{ animation:none; scale:none; } /* 2 — Staffelung der Angebote */ .angebote-raster > .angebot{ transition:none } /* 3 — Reagierende Flaechen: die Hervorhebung bleibt, der Weg faellt weg */ .zwei > .feld{ transition:none } .zwei > .feld:hover, .zwei > .feld:focus-within, .zwei > .feld:active, .angebote-raster > .angebot:hover, .angebote-raster > .angebot:focus-within, .angebote-raster > .angebot:active{ transform:none; translate:none; scale:none; } /* 4a bis 4c — die View-Zeitachsen entstehen hier nicht; genannt, falls ein Browser beide Bewegungsabfragen gleichzeitig bejaht. opacity wird bewusst NICHT zurueckgesetzt: .signet traegt aus bau.css 92 die Deckkraft 0,55, und ein revert darauf wuerde sie auf 1 stellen. animation:none genuegt, der Animationswert faellt damit weg. */ .signet{ animation:none; transform:none } .signet circle{ animation:none } .fil-g-kopf::before, .leistung-faden, .std .std-nr::after, .recht-kopf .bahn::after{ animation:none; clip-path:none } .notiz{ animation:none; translate:none } /* 4d — Trennstriche: voll da, ohne Weg */ .vertrauen.auf .strich, .vertrauen.auf.da .strich{ scale:none; transition:none } }