/* ============================================================================ teil-za-flug.css — der Einflug der Baender auf den Sammelseiten. Christopher, 04.10.2026: „Bilder kommen von der Seite, Slide in Effects. Da muss sich auf jeden Fall was tun. So ist es nicht gut." Diese Datei schreibt AUSSCHLIESSLICH transform, opacity, transition, animation, will-change und den prefers-reduced-motion-Zweig. Kein Raster, keine Groessen, keine Farben, keine Abstaende — die liegen in teil-za-flug.css NICHT, sondern in teil-z9-baender.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) assets/js/wirkung.js setzt die Klasse "auf" — Zeile 21 im Beobachter, Zeile 16 wenn kein IntersectionObserver da ist oder der Besucher Bewegung reduziert hat. Zwei Netze haengen darunter, beide gemessen, nicht geschaetzt: nach 900 ms wird aufgedeckt, was im Fenster steht (Zeile 43–45), nach 12 000 ms ausnahmslos alles (Zeile 47–48). Es sind NICHT 9 Sekunden. Diese Datei baut keinen zweiten Beobachter und kein eigenes Skript; sie haengt sich nur an .auf. 2) bau.css Zeile 78 besetzt fuer das Einblenden bereits transform: .einblenden{ opacity:0; transform:translateY(22px); transition:… } Der Einflug laeuft deshalb ebenfalls ueber transform — aber auf den KINDERN (.band2-text, .band2-bild), nicht auf dem Band selbst. Das Band wird zum reinen Schalter: es traegt .einblenden, bekommt von wirkung.js .auf und gibt damit seine Kinder frei. translate/scale/rotate bleiben unberuehrt, das ist nach teil-bewegung.css Punkt 1 der Kanal fuer das Zeigen mit der Maus. 3) bau.css Zeile 80–83 legt auf .einblenden:nth-child(2) bis :nth-child(5) ein pauschales transition-delay bis .28 s. Die Baender stehen in vorlagen/leistung.php als drittes und folgendes Kind der
(davor
und ggf.

) — sie landen also genau in diesem Bereich. Genau diese Bauart hat am 03.10.2026 den Fehler erzeugt, den teil-bewegung.css Punkt 2 beschreibt: ein Verzug ohne Eigenschaftsangabe liegt auf JEDER Ueberblendung, auch auf der Maus, und eine Kachel tat 540 ms lang nichts. In dieser Datei steht deshalb KEIN alleinstehendes transition-delay und kein transition auf "all" — jede Dauer und jeder Verzug steht in der Kurzform direkt hinter seiner Eigenschaft. 4) Kein Querscrollen durch den seitlichen Versatz. Drei Messungen: * page.php Zeile 26 legt die ganze Seite in .blattrahmen > .seitenblatt. .seitenblatt traegt overflow:hidden (bau.css Zeile 160), auf diesem Seitentyp overflow:clip (teil-leistung.css Zeile 22). Der Ueberstand wird also schon eine Ebene ueber dem Band abgeschnitten. * html traegt overflow-x:clip (bau.css Zeile 107) — clip und nicht hidden, damit kein zweiter Scrollbehaelter entsteht. * Zusaetzlich bleibt der Weg kleiner als der Freiraum neben .bahn: .bahn ist auf --breite 1560px gedeckelt, bei 1850 px Fenster bleiben je Seite rund 127 px Luft — 72 px Weg passen hinein, das Bild faehrt also sichtbar aus dem Aussenraum herein und nicht aus dem Nichts. Unter den Haltepunkten schrumpft der Weg mit (Abschnitt 6), weil bei 430 px nur noch rund 16 px Gasse da sind. Der Versatz steht ausserdem auf transform, nicht auf margin oder left: transform veraendert die Layoutbreite grundsaetzlich nicht. 5) Nur transform und opacity werden bewegt, bewusst kein filter. Ein blur auf einem 1000-px-Foto rechnet bei jedem Bild neu; transform und opacity bleiben auf der Grafikkarte. Bei fuenf Baendern gleichzeitig ist das der Unterschied zwischen 60 Bildern und Ruckeln. Kurve ueberall --weich (cubic-bezier(.22,.9,.3,1), grund.css Zeile 36): schnell los, weich aus. Ein Ueberschwinger (--bew-nach aus teil-bewegung.css) waere hier falsch — er traegt das Bild ueber seine Ruhelage hinaus in den Text hinein. ── Gemessen am 04.10.2026, isolierter Pruefstand mit dem Markup aus dem Vertrag (grund.css + bau.css + diese Datei + wirkung.js) ───────────── 1850 px: --flug-weg 72px · Bild matrix(…, 72, 0) / gedreht (…, -72, 0) Text matrix(…, 0, 16), Verzug 0,13 s · Band selbst 1 / none Dokumentbreite 1835 = Fensterbreite 1835 — kein Querscrollen, im Ruhezustand UND nach .auf. 375 px: --flug-weg 24px, --flug-hub 12px (Zweig max-width:430px) Dokumentbreite 375 = Fensterbreite 375 — kein Querscrollen. Die rechte Kante des versetzten Bildes steht 2 px INNERHALB des Fensters; der Beschnitt aus Punkt 4 wird gar nicht erst gebraucht. Nach .auf (Uebergang abgeschaltet gemessen): Bild 1 / none, Text 1 / none, Bildunterschrift 1 — der Ruhezustand loest sich restlos auf. Hinweis fuer den naechsten, der hier misst: in einem Tab mit document.visibilityState "hidden" friert die Uhr der Uebergaenge ein. getComputedStyle liefert dann dauerhaft den Startwert (opacity 0), obwohl die Regel greift — erkennbar daran, dass will-change (nicht animierbar) bereits auf "auto" steht. Das ist kein Fehler im Stil. ========================================================================= */ :root{ /* Weg des Bildes. 72 px: weit genug, dass die Richtung erkennbar ist, klein genug fuer die 127 px Luft neben .bahn bei 1850 px (Punkt 4). */ --flug-weg:72px; /* Weg des zweiten Bildes in einem Band mit zwei Bildern — nachgezogen. */ --flug-weg-zwei:14px; /* Hub des Textes. Rein senkrecht: so kann der Text zum Querscrollen nichts beitragen, und er bleibt der ruhigere Teil des Auftritts. */ --flug-hub:16px; /* Dauern. Das Bild legt den langen Weg zurueck und braucht laenger zum Ausrollen; der Text bewegt sich 16 px und waere bei 760 ms zaeh. */ --flug-dauer-bild:.76s; --flug-dauer-text:.62s; /* Versatz. Das Bild faehrt zuerst, der Text kommt 130 ms spaeter nach — lang genug, dass man die Bewegung als zwei Schritte liest, kurz genug, dass niemand auf den Text wartet. 130 ms liegt unter der Schwelle, ab der eine Verzoegerung als Haenger wahrgenommen wird. */ --flug-nach-text:130ms; --flug-nach-zwei:110ms; } /* ============================================================================ 1 — DAS BAND IST NUR DER SCHALTER Es traegt .einblenden, damit wirkung.js es beobachtet, aber es bewegt sich selbst nicht: saehe man Band UND Bild fahren, waeren es zwei Bewegungen uebereinander. Diese Regel hebt zugleich opacity:0, translateY(22px), die transition und das nth-child-Delay aus bau.css Zeile 78–83 auf (0-3-0 gegen 0-2-0, und diese Datei laedt alphabetisch zuletzt — functions.php Zeile 57 bindet teil-*.css sortiert ein). ========================================================================= */ .sammel-band.band2.einblenden{ opacity:1; transform:none; transition:none; } /* ============================================================================ 2 — RUHEZUSTAND Nur innerhalb von .band2.einblenden. Ein Band OHNE .einblenden bekaeme nie ein .auf und bliebe sonst fuer immer unsichtbar — deshalb haengt jede Unsichtbarkeit an der Klasse, die den Beobachter ueberhaupt erst anwirft. ========================================================================= */ .band2.einblenden .band2-bild{ opacity:0; /* Vorgabe: gerade Reihe, Bild rechts, kommt von rechts herein. */ transform:translate3d(var(--flug-weg), 0, 0); transition: transform var(--flug-dauer-bild) var(--weich) 0ms, opacity var(--flug-dauer-bild) var(--weich) 0ms; will-change:transform, opacity; } .band2.einblenden .band2-text{ opacity:0; transform:translate3d(0, var(--flug-hub), 0); transition: transform var(--flug-dauer-text) var(--weich) var(--flug-nach-text), opacity var(--flug-dauer-text) var(--weich) var(--flug-nach-text); will-change:transform, opacity; } /* Gedrehte Reihe: Bild links, also kommt es von links. Das Vorzeichen ist das einzige, was sich unterscheidet. */ .band2.band2-gedreht.einblenden .band2-bild{ transform:translate3d(calc(var(--flug-weg) * -1), 0, 0); } /* Band ohne Bild: der Text wartet auf niemanden mehr und faehrt sofort. Sonst stuende ein Band mit 0 Bildern 130 ms laenger leer als seine Nachbarn, ohne dass ein Grund zu sehen waere. */ .band2.band2-ohne.einblenden .band2-text{ transition: transform var(--flug-dauer-text) var(--weich) 0ms, opacity var(--flug-dauer-text) var(--weich) 0ms; } /* ============================================================================ 3 — FREIGEGEBEN wirkung.js setzt .auf auf dem Band. Beide Kinder landen auf transform:none und opacity:1 — damit loest sich der Ruhezustand restlos auf, auch wenn .auf erst durch das 12-Sekunden-Netz kommt (wirkung.js Zeile 47–48). will-change faellt danach weg: eine Ebene, die nie wieder bewegt wird, soll nicht dauerhaft Speicher der Grafikkarte belegen (dieselbe Regel wie teil-scroll.css Zeile 103 fuer .tiefenbild). ========================================================================= */ .band2.einblenden.auf .band2-bild, .band2.einblenden.auf .band2-text{ opacity:1; transform:none; will-change:auto; } /* ============================================================================ 4 — ZWEI BILDER IN EINEM BAND .band2-bild-zwei: das zweite Bild wird um 110 ms und 14 px nachgezogen, in dieselbe Richtung. Dadurch faechert das Paar auf, statt als ein Block zu rutschen. Der zusaetzliche Ueberstand betraegt hoechstens 14 px und liegt damit weit innerhalb der 127 px aus Punkt 4 des Kopfes. Angesprochen wird das zweite KIND, nicht das zweite . Gemessen am 04.10.2026 in vorlagen/leistung.php Zeile 175: der Bildausdruck hebt entweder ein blankes heraus oder ein — je nachdem, ob das Bild im Beitrag verlinkt ist. Im verlinkten Fall ist jedes Bild das erste in seiner eigenen Huelle, "img:nth-of-type(2)" traefe dann nichts und die Staffelung fiele lautlos aus. ":nth-child(2)" trifft beide Faelle. Eine Bildunterschrift kann hier nicht dazwischengeraten: .band2-bild-zwei vergibt die Vorlage nur bei mehr als einem Bild (Zeile 718), das zweite Kind ist also immer ein Bild. ========================================================================= */ .band2.einblenden .band2-bild-zwei > :nth-child(2){ opacity:0; transform:translate3d(var(--flug-weg-zwei), 0, 0); transition: transform var(--flug-dauer-bild) var(--weich) var(--flug-nach-zwei), opacity var(--flug-dauer-bild) var(--weich) var(--flug-nach-zwei); } .band2.band2-gedreht.einblenden .band2-bild-zwei > :nth-child(2){ transform:translate3d(calc(var(--flug-weg-zwei) * -1), 0, 0); } .band2.einblenden.auf .band2-bild-zwei > :nth-child(2){ opacity:1; transform:none; } /* ============================================================================ 5 — BILDUNTERSCHRIFT Sie faehrt mit dem Bild (sie liegt im

), bekommt aber ihre eigene, spaetere Deckkraft: zuerst ist das Bild da, dann die Beschriftung. Kein eigener Weg — sie soll nicht unter dem Bild hervorrutschen. ========================================================================= */ .band2.einblenden .band2-bild figcaption{ opacity:0; transition:opacity var(--flug-dauer-text) var(--weich) 260ms; } .band2.einblenden.auf .band2-bild figcaption{ opacity:1; } /* ============================================================================ 6 — HALTEPUNKTE Hauswerte 1660 / 940 / 430. Der Weg schrumpft mit der Gasse (--gasse:clamp(16px,4vw,56px), grund.css): bei 430 px bleiben rechnerisch 16 px Gasse, ein 72-px-Weg wuerde das Bild zu Beginn zur Haelfte hinter die Blattkante schieben. Abgeschnitten wuerde es ohnehin (Kopf, Punkt 4), aber ein Bild, das aus dem Nichts auftaucht, ist kein Einflug. Die Dauern sinken mit: ein kurzer Weg in langer Zeit wirkt zaeh. ========================================================================= */ @media (max-width:1660px){ :root{ --flug-weg:56px } } @media (max-width:940px){ :root{ --flug-weg:38px; --flug-weg-zwei:10px; --flug-hub:14px; --flug-dauer-bild:.66s; --flug-dauer-text:.56s; --flug-nach-text:110ms; --flug-nach-zwei:90ms; } } @media (max-width:430px){ :root{ --flug-weg:24px; --flug-weg-zwei:8px; --flug-hub:12px; --flug-dauer-bild:.56s; --flug-dauer-text:.48s; --flug-nach-text:90ms; } } /* ============================================================================ 7 — ZWEITES NETZ: KEIN JAVASCRIPT wirkung.js deckt spaetestens nach 12 s alles auf — das ist das erste Netz und es traegt auch dann, wenn das Skript laedt, aber weiter oben stolpert. Dieser Block hier deckt genau EINEN Fall zusaetzlich ab: JavaScript ist im Browser ABGESCHALTET, dann laeuft auch kein Zeitgeber. Mehr kann er nicht (Kommentar am 04.10.2026 richtiggestellt — er behauptete vorher, auch einen Skriptfehler abzufangen; das tut er nicht). Kennt ein Browser (scripting) nicht, faellt der Block weg und das 12-Sekunden-Netz traegt allein. ========================================================================= */ @media (scripting: none){ /* * Die gedrehten Regeln MUESSEN hier mitstehen. Beim Gegenlesen am * 04.10.2026 gemessen: .band2.band2-gedreht.einblenden .band2-bild (0-4-0) * ist spezifischer als .band2.einblenden .band2-bild (0-3-0) und schlug das * Netz, obwohl es spaeter in der Datei steht. Ohne JavaScript stand das Bild * eines gedrehten Bandes dann zwar sichtbar, aber 72 px nach links versetzt. * Spaeter in der Datei hilft nur bei GLEICHER Spezifitaet. */ .band2.einblenden .band2-bild, .band2.einblenden .band2-text, .band2.band2-gedreht.einblenden .band2-bild, .band2.band2-ohne.einblenden .band2-text, .band2.einblenden .band2-bild-zwei > :nth-child(2), .band2.band2-gedreht.einblenden .band2-bild-zwei > :nth-child(2), .band2.einblenden .band2-bild figcaption{ opacity:1; transform:none; transition:none; will-change:auto; } } /* ============================================================================ 8 — prefers-reduced-motion: KEIN FLUG, KEIN VERSATZ. Nicht langsamer, sondern aus — so haelt es teil-schmuck.css Abschnitt 8 und teil-bewegung.css Abschnitt 9. Das Band steht sofort vollstaendig da. wirkung.js Zeile 16 setzt in diesem Fall ohnehin sofort .auf auf alles; diese Regeln sorgen dafuer, dass auch der Weg dorthin kein Bild bewegt. Es bleibt kein stilles Erscheinen uebrig: bau.css Zeile 86 blendet in diesem Zweig bereits alles unbewegt ein, ein zweites Erscheinen waere ein zweiter Auftritt derselben Flaeche. ========================================================================= */ @media (prefers-reduced-motion:reduce){ .band2.einblenden .band2-bild, .band2.einblenden .band2-text, .band2.band2-gedreht.einblenden .band2-bild, .band2.band2-ohne.einblenden .band2-text, .band2.einblenden .band2-bild-zwei > :nth-child(2), .band2.band2-gedreht.einblenden .band2-bild-zwei > :nth-child(2), .band2.einblenden .band2-bild figcaption{ opacity:1; transform:none; transition:none; will-change:auto; } }