/* ============================================================================ teil-zzzzzz-filialbewegung.css — Bewegung auf den Filialseiten (Vorschau). Christopher, 23./24.10.2026: „neue moderne Transformationen", Apple-modern — aber nichts klebt fest und kein Overflow-Umbau an .seitenblatt. Laedt NUR mit ?bv-neu=1 (Praefix teil-zzzzzz-, Teilstil-Schleife in functions.php) und wirkt nur auf body.bv-typ-filiale. Dazu gehoert assets/js/filialbewegung.js (haengt am Taktgeber takt.js). Was geschieht: 1. Das Buehnenfoto oeffnet sich beim Laden bzw. beim Hereinscrollen: clip-path inset(8% round 24px) -> inset(0 round 18px), das Bild setzt sich dabei von 1,06 auf 1. Beim Hinausscrollen bleibt es leicht zurueck (transform, --fb-aus aus filialbewegung.js). 2. Kacheln (Oeffnungszeiten, Anschrift, Termin) und Teamkarten gleiten gestaffelt herein, die Teamkarten richten sich dabei aus einer leichten Neigung auf (rotateX -> 0). Abstand 70–80 ms (--fb-verzug). 3. In jeder Textgruppe (auch „Haeufige Fragen") folgen Ueberschrift, Fragen und Absaetze einander im Abstand von 70 ms. Regeln dieser Datei: * Bewegt werden nur transform, translate, scale, opacity und clip-path. Nichts davon verschiebt das Layout (CLS 0), nichts ragt seitlich heraus. * Startzustaende gelten nur unter (scripting: enabled) und ohne den Wunsch nach reduzierter Bewegung. Ohne JavaScript greift hier also nichts; was bau.css bis zum Skript versteckt (.einblenden), holt der vorhandene Block @media (scripting: none) in teil-ze-schwung.css (Abschnitt 6) zurueck. * Das Freigeben uebernimmt wirkung.js (.einblenden -> .auf) wie bisher; filialbewegung.js setzt nur Verzug, Oeffnen und Ausgangsversatz. * Kein position:sticky, kein overflow an .seitenblatt/.blatt. Nur Token aus :root; keine neue Farbe, keine neue Schrift. ========================================================================= */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference){ /* ── 1 · Buehnenfoto ───────────────────────────────────────────────── Der Startzustand steht ab dem ersten Bild, nicht erst, wenn das Skript laeuft — sonst saehe man das Foto erst offen, dann zu, dann wieder auf. Der Schatten ist waehrend des Oeffnens durchsichtig (clip-path wuerde ihn ohnehin abschneiden) und blendet erst danach ein (.fb-fertig). */ body.bv-typ-filiale .fil-buehne .fil-foto{ transition:clip-path 1.15s var(--weich), box-shadow .8s var(--weich); } body.bv-typ-filiale .fil-buehne .fil-foto:not(.fb-fertig){ box-shadow:0 24px 56px rgba(19,55,109,0); } body.bv-typ-filiale .fil-buehne .fil-foto:not(.fb-offen){ clip-path:inset(8% round 24px); } body.bv-typ-filiale .fil-buehne .fil-foto.fb-offen:not(.fb-fertig){ clip-path:inset(0 round 18px); } /* scale ist ein eigener Kanal: transform am Bild gehoert dem Hover-Zoom (seiten.css, teil-filiale.css) und bleibt unberuehrt. */ body.bv-typ-filiale .fil-buehne .fil-foto img{ transition:transform 1.2s var(--weich), scale 1.4s var(--weich); } body.bv-typ-filiale .fil-buehne .fil-foto:not(.fb-offen) img{ scale:1.06 } /* Netz: laeuft filialbewegung.js nicht (nicht eingebunden, blockiert), oeffnet sich das Foto nach 2,4 s von selbst. Sobald das Skript laeuft (html.fb-js), gilt diese Regel nicht mehr. */ html:not(.fb-js) body.bv-typ-filiale .fil-buehne .fil-foto:not(.fb-offen){ animation:fb-netz-foto 1.1s var(--weich) 2.4s forwards; } html:not(.fb-js) body.bv-typ-filiale .fil-buehne .fil-foto:not(.fb-offen) img{ animation:fb-netz-bild 1.1s var(--weich) 2.4s forwards; } /* Ausgang: das Foto bleibt beim Hinausscrollen etwas zurueck. --fb-aus schreibt filialbewegung.js (hoechstens 48 px und nie mehr als der Abstand der Buehne nach unten). Der Tiefenversatz aus bewegung.js (.tiefenbild, translate) ruht hier, damit nicht zwei Skripte dasselbe Bild schieben. */ html.fb-js body.bv-typ-filiale .fil-buehne .fil-foto{ transform:translate3d(0, var(--fb-aus, 0px), 0); } html.fb-js body.bv-typ-filiale .fil-buehne .fil-foto.tiefenbild{ translate:none } /* ── Verzug ohne Skript-Wettlauf ───────────────────────────────────── Gemessen 24.10.2026 (Wiesbaden, 1440 px): stehen die Kacheln schon beim Laden im Bild, kann wirkung.js .auf setzen, bevor filialbewegung.js den Verzug geschrieben hat — dann kamen alle drei gleichzeitig. Darum steht ein Grundverzug hier im Stil (nach Position); filialbewegung.js ueberschreibt ihn je Zeile (eine neue Zeile beginnt wieder bei 0). */ body.bv-typ-filiale .fil-reihe > .fil-kachel:nth-child(2){ --fb-verzug:80ms } body.bv-typ-filiale .fil-reihe > .fil-kachel:nth-child(3){ --fb-verzug:160ms } body.bv-typ-filiale .fil-reihe > .fil-kachel:nth-child(n+4){ --fb-verzug:240ms } body.bv-typ-filiale .fil-team > .fil-kopf:nth-child(2){ --fb-verzug:70ms } body.bv-typ-filiale .fil-team > .fil-kopf:nth-child(3){ --fb-verzug:140ms } body.bv-typ-filiale .fil-team > .fil-kopf:nth-child(4){ --fb-verzug:210ms } body.bv-typ-filiale .fil-team > .fil-kopf:nth-child(n+5){ --fb-verzug:280ms } body.bv-typ-filiale .fil-gruppe .fil-g-text > :nth-child(1){ --fb-verzug:70ms } body.bv-typ-filiale .fil-gruppe .fil-g-text > :nth-child(2){ --fb-verzug:140ms } body.bv-typ-filiale .fil-gruppe .fil-g-text > :nth-child(3){ --fb-verzug:210ms } body.bv-typ-filiale .fil-gruppe .fil-g-text > :nth-child(4){ --fb-verzug:280ms } body.bv-typ-filiale .fil-gruppe .fil-g-text > :nth-child(5){ --fb-verzug:350ms } body.bv-typ-filiale .fil-gruppe .fil-g-text > :nth-child(6){ --fb-verzug:420ms } body.bv-typ-filiale .fil-gruppe .fil-g-text > :nth-child(n+7){ --fb-verzug:490ms } /* ── 2 · Kacheln: Oeffnungszeiten, Anschrift, Termin ───────────────── Ersetzt fuer die Filialseite den seitlichen Einflug aus teil-ze-schwung.css (0-5-0) durch ein ruhiges Aufsteigen mit leichter Skalierung. Die Liste der Uebergaenge ist dieselbe wie in teil-bewegung.css — Zeigen mit der Maus (translate, scale, Rand, Schatten) bleibt sofort, nur Einblenden ist gestaffelt. */ body.bv-typ-filiale .fil-reihe > .fil-kachel.einblenden:nth-child(n){ transform:translate3d(0, 34px, 0) scale(.965); transition: opacity .8s var(--weich) var(--fb-verzug, var(--verzug, 0ms)), transform 1s var(--weich) var(--fb-verzug, var(--verzug, 0ms)), translate var(--bew-mittel, .35s) var(--weich) 0ms, scale var(--bew-mittel, .35s) var(--weich) 0ms, border-color var(--bew-mittel, .35s) var(--weich) 0ms, background-color var(--bew-mittel, .35s) var(--weich) 0ms, box-shadow .45s var(--weich) 0ms; } body.bv-typ-filiale .fil-reihe > .fil-kachel.einblenden.auf:nth-child(n){ transform:translate3d(0, 0, 0) scale(1); } /* ── 2b · Teamkarten: aufrichten aus leichter Neigung ──────────────── Gedreht wird um die Unterkante, mit eigener Perspektive je Karte — die Karte kippt nicht aus ihrer Zelle heraus. */ body.bv-typ-filiale .fil-team > .fil-kopf.einblenden{ transform:perspective(900px) rotateX(18deg) translate3d(0, 30px, 0); transform-origin:50% 100%; transition: opacity .75s var(--weich) var(--fb-verzug, 0ms), transform 1.05s var(--weich) var(--fb-verzug, 0ms), translate var(--bew-mittel, .35s) var(--weich) 0ms, scale var(--bew-mittel, .35s) var(--weich) 0ms, border-color var(--bew-mittel, .35s) var(--weich) 0ms, background-color var(--bew-mittel, .35s) var(--weich) 0ms, box-shadow .45s var(--weich) 0ms; } body.bv-typ-filiale .fil-team > .fil-kopf.einblenden.auf{ transform:perspective(900px) rotateX(0deg) translate3d(0, 0, 0); } /* ── 3 · Textgruppen: Ueberschrift, Fragen, Absaetze nacheinander ──── Die Gruppe selbst steigt nur leicht (bau.css: 22 px), ihr Inhalt folgt Teil fuer Teil. --fb-verzug je Teil setzt filialbewegung.js. */ body.bv-typ-filiale .fil-gruppe.einblenden{ transform:translate3d(0, 26px, 0); transition:opacity .8s var(--weich), transform 1s var(--weich); } body.bv-typ-filiale .fil-gruppe.einblenden.auf{ transform:translate3d(0, 0, 0) } body.bv-typ-filiale .fil-gruppe.einblenden .fil-g-kopf, body.bv-typ-filiale .fil-gruppe.einblenden .fil-g-text > *{ transition: opacity .7s var(--weich) var(--fb-verzug, 0ms), translate .9s var(--weich) var(--fb-verzug, 0ms); } body.bv-typ-filiale .fil-gruppe.einblenden:not(.auf) .fil-g-kopf, body.bv-typ-filiale .fil-gruppe.einblenden:not(.auf) .fil-g-text > *{ opacity:0; translate:0 18px; } } /* Netz-Animationen (siehe 1). Unter reduzierter Bewegung greifen sie nie — die Regeln oben stehen nur bei no-preference. */ @keyframes fb-netz-foto{ to{ clip-path:inset(0 round 18px) } } @keyframes fb-netz-bild{ to{ scale:1 } }