/* * trailer.css — Grundgeruest des Trailer-/Hero-Builders auf der oeffentlichen Website. * * DIESE DATEI GEHOERT DEM CORE. Sie liegt unter core/site/ und wird von * core/lib/site_assets.php in den Webroot der Kundenseite kopiert ({docroot}/dynomic/). * Nicht in ein Kundenrepo kopieren -- sonst hat jeder Kunde seinen eigenen Stand. * * ZWEI DATEIEN, ZWEI AUFGABEN -- nicht verwechseln: * * /dynomic/trailer.css <- DIESE Datei. Die Mechanik: Positionierungsmodell, * Animationen, Navigation. Aendert sich nur mit dem Core. * /dynomic/trailer-inhalt.css <- Erzeugt vom Backend bei jedem "Veroeffentlichen" * (core/lib/trailer.php::trailer_css_bauen). Enthaelt die * konkreten Werte: Hoehe, Hintergrundbilder, Positionen * und Groessen je Breakpoint. * * Die Website bindet beide ein, in dieser Reihenfolge: * * * * * Die Trennung ist kein Ordnungsfimmel: Die Mechanik wird ueber die Verteilzentrale * ausgeliefert und ist auf allen Instanzen identisch; die Werte gehoeren einer Instanz und * aendern sich, sooft die Kundin auf "Veroeffentlichen" klickt. Beides in einer Datei hiesse, * dass ein Core-Update die Inhalte ueberschreibt -- oder umgekehrt. * * SCOPING -- die Zusage "keine globalen Nebenwirkungen" * Jeder Selektor in dieser Datei beginnt mit [data-dynos-trailer]. Es gibt keine Regel auf * ein Element, eine Klasse oder eine Utility ausserhalb dieses Containers. Der Header, die * Navigation und der Footer der Website koennen von hier aus nicht getroffen werden. * * Z-INDEX -- warum der Header sicher ist * Der Container setzt isolation:isolate und erzeugt damit einen eigenen Stacking-Context. * Ein z-index INNERHALB des Trailers wird nur gegen seine Geschwister im Trailer gewertet; * er kann den Header nicht ueberholen, egal wie hoch er ist. Gemessene Header-Werte im * Bestand: z-index 40 (Pelzer, sticky) und 100 (Schwittay-Vorlage, sticky). Beide bleiben * oben, ohne dass der Builder sie kennen muss. */ /* * AM CONTAINER SELBST STEHT HIER NICHTS. Das ist kein Versehen, sondern die Zusage. * * Alles, was den Container betrifft — position, isolation, overflow, Hoehe und das * Hintergrundbild des ersten Slides — schreibt das Backend beim Veroeffentlichen nach * /dynomic/trailer-inhalt.css, und zwar je Seite einzeln. Eine Seite ohne * veroeffentlichten Trailer bekommt dort keine einzige Regel und wird von dieser Datei * damit ueberhaupt nicht angefasst: Der bisherige Hero darin rendert, als gaebe es den * Builder nicht. * * HIER STAND BIS ZUR ERSTEN BROWSERPRUEFUNG ETWAS ANDERES, und es war falsch herum: * Der Container trug Hoehe und Hintergrund aus dieser Datei, und eine zweite Regel * (:not([data-dt-aktiv])) nahm sie wieder weg, solange JavaScript das Attribut noch nicht * gesetzt hatte. Damit war das Hintergrundbild bis zum Ende des Skripts unterdrueckt — * ausgerechnet das LCP-Element wartete auf JavaScript, also genau der Zustand, den die * ganze Konstruktion vermeiden soll. Gemessen: Der Browser forderte das Hero-Bild erst * NACH swiper-bundle.min.js an. Jetzt steht es in einem Stylesheet im und wird * vom Preload-Scanner gefunden, bevor irgendein Skript laeuft. */ [data-dynos-trailer] [data-dt-buehne] { position: relative; /* Feste Hoehe, nicht min-height: Swiper legt seine Slides mit height:100% an, und eine Prozenthoehe braucht einen aufgeloesten Bezugswert. Mit min-height kollabierten die Slides auf 0 Pixel, sobald die Bibliothek uebernahm — sichtbar als Trailer, dessen Texte oberhalb des Bildes klebten. Der Wert kommt vom Container (--dt-h). */ height: var(--dt-h, 480px); overflow: hidden; } [data-dynos-trailer] [data-dt-slide] { position: absolute; inset: 0; background-image: var(--dt-bg, none); background-size: var(--dt-bg-fit, cover); background-position: var(--dt-bg-pos, 50% 50%); background-repeat: no-repeat; } /* Der erste Slide traegt seinen Hintergrund am Container (siehe Dateikopf) und darf ihn hier nicht ein zweites Mal laden. */ [data-dynos-trailer] [data-dt-slide]:first-child { background-image: none; } /* * SOBALD SWIPER UEBERNIMMT, GILT SEIN LAYOUT — nicht meins. * * Swiper schiebt einen Flex-Container (.swiper-wrapper) per transform und erwartet die * Slides als dessen Flex-Kinder. Absolut positionierte Slides wuerden dabei alle * uebereinander an derselben Stelle liegen; gewischt wuerde, aber zu sehen waere immer * derselbe Slide. Meine Regel oben ist spezifischer als Swipers .swiper-slide, sie muss * also ausdruecklich zurueckgenommen werden — sonst gewinnt sie still. */ [data-dynos-trailer] [data-dt-buehne].swiper [data-dt-slide] { position: relative; inset: auto; width: 100%; height: 100%; } [data-dynos-trailer] [data-dt-overlay] { position: absolute; inset: 0; pointer-events: none; background: var(--dt-ov, transparent); opacity: var(--dt-ov-a, 0); } [data-dynos-trailer] [data-dt-overlay][data-dt-verlauf] { background: linear-gradient(to top, var(--dt-ov, transparent), transparent 70%); opacity: 1; } /* ---------- Elemente ---------- */ [data-dynos-trailer] [data-dt-el] { position: absolute; left: var(--dt-x, 0%); top: var(--dt-y, 0%); width: var(--dt-w, 40%); height: var(--dt-eh, auto); z-index: var(--dt-z, 1); margin: 0; transform: translate(var(--dt-tx, 0%), var(--dt-ty, 0%)) rotate(var(--dt-rot, 0deg)); font-family: var(--dt-ff, inherit); font-size: var(--dt-fs, 40px); font-weight: var(--dt-fw, 500); line-height: var(--dt-lh, 1.2); letter-spacing: var(--dt-ls, 0); color: var(--dt-color, #fff); text-align: var(--dt-ta, left); text-transform: var(--dt-tt, none); text-shadow: var(--dt-sh, none); } [data-dynos-trailer] [data-dt-el="img"] { display: block; } [data-dynos-trailer] img[data-dt-el] { width: var(--dt-w, 40%); height: auto; } /* Buttons uebernehmen das Aussehen der Website. Der Builder schreibt bewusst KEINE eigene Button-Gestaltung vor: Er setzt nur die Klasse, die die Seite ohnehin verwendet (window.DYNOMIC_SITE.trailer.buttonKlasse). Faellt das aus, greift dieser neutrale Notbehelf -- sichtbar und bedienbar, aber erkennbar nicht das Design der Seite. */ [data-dynos-trailer] a[data-dt-el] { display: inline-block; width: auto; padding: 12px 26px; border: 1px solid currentColor; border-radius: 4px; text-decoration: none; } [data-dynos-trailer] a[data-dt-el][class] { padding: 0; border: 0; border-radius: 0; /* die Klasse der Seite bestimmt alles */ } /* ---------- Navigation ---------- */ [data-dynos-trailer] [data-dt-punkte] { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 9; display: flex; justify-content: center; gap: 10px; } [data-dynos-trailer] [data-dt-punkte] button { width: 11px; height: 11px; padding: 0; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: transparent; cursor: pointer; } [data-dynos-trailer] [data-dt-punkte] button[aria-current="true"] { background: #fff; } [data-dynos-trailer] [data-dt-pfeil] { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; width: 44px; height: 44px; /* 44px = die uebliche Mindestgroesse fuer Finger */ border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } [data-dynos-trailer] [data-dt-pfeil="prev"] { left: 14px; } [data-dynos-trailer] [data-dt-pfeil="next"] { right: 14px; } [data-dynos-trailer] [data-dt-punkte] button:focus-visible, [data-dynos-trailer] [data-dt-pfeil]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* ---------- Animationen ---------- */ /* * Nur opacity und transform. Beides laeuft im Compositor -- kein Layout, kein Paint, kein * Ruckeln auf dem Telefon. Alles andere (top, height, filter) waere teurer und faellt * ausgerechnet auf schwachen Geraeten auf. */ [data-dynos-trailer] [data-dt-anim]:not([data-dt-an]) { opacity: 0; } [data-dynos-trailer] [data-dt-an] { animation: var(--dt-anim-d, 600ms) both; animation-delay: var(--dt-anim-delay, 0ms); } [data-dynos-trailer] [data-dt-anim="fade"][data-dt-an] { animation-name: dtFade; } [data-dynos-trailer] [data-dt-anim="fade-up"][data-dt-an] { animation-name: dtFadeUp; } [data-dynos-trailer] [data-dt-anim="fade-down"][data-dt-an] { animation-name: dtFadeDown; } [data-dynos-trailer] [data-dt-anim="fade-left"][data-dt-an] { animation-name: dtFadeLeft; } [data-dynos-trailer] [data-dt-anim="fade-right"][data-dt-an] { animation-name: dtFadeRight; } [data-dynos-trailer] [data-dt-anim="zoom"][data-dt-an] { animation-name: dtZoom; } @keyframes dtFade { from { opacity:0 } to { opacity:1 } } @keyframes dtFadeUp { from { opacity:0; transform:translate(var(--dt-tx,0%),calc(var(--dt-ty,0%) + 24px)) rotate(var(--dt-rot,0deg)) } to { opacity:1 } } @keyframes dtFadeDown { from { opacity:0; transform:translate(var(--dt-tx,0%),calc(var(--dt-ty,0%) - 24px)) rotate(var(--dt-rot,0deg)) } to { opacity:1 } } @keyframes dtFadeLeft { from { opacity:0; transform:translate(calc(var(--dt-tx,0%) + 24px),var(--dt-ty,0%)) rotate(var(--dt-rot,0deg)) } to { opacity:1 } } @keyframes dtFadeRight { from { opacity:0; transform:translate(calc(var(--dt-tx,0%) - 24px),var(--dt-ty,0%)) rotate(var(--dt-rot,0deg)) } to { opacity:1 } } @keyframes dtZoom { from { opacity:0; transform:translate(var(--dt-tx,0%),var(--dt-ty,0%)) rotate(var(--dt-rot,0deg)) scale(.94) } to { opacity:1 } } /* ---------- Uebergaenge ohne Swiper (ein bis zwei Slides, kein Touch noetig) ---------- */ [data-dynos-trailer] [data-dt-slide][hidden] { display: none; } [data-dynos-trailer][data-dt-fade] [data-dt-slide] { transition: opacity var(--dt-speed, 600ms) var(--dt-easing, ease); opacity: 0; } [data-dynos-trailer][data-dt-fade] [data-dt-slide][data-dt-an-slide] { opacity: 1; } /* * prefers-reduced-motion -- verbindlich, nicht optional. * * Im Bestand gibt es diese Regel nicht: src/styles/main.css der Pelzer-Website enthaelt * keine einzige. Wer sie im Betriebssystem gesetzt hat, tut das meist aus einem Grund * (Migraene, Schwindel, Reisekrankheit). Ein Hero, der von allein weiterspringt, ist genau * der Fall, den die Einstellung meint. Autoplay schaltet trailer.js zusaetzlich ab. */ @media (prefers-reduced-motion: reduce) { [data-dynos-trailer] [data-dt-el], [data-dynos-trailer] [data-dt-slide] { animation: none !important; transition: none !important; opacity: 1 !important; } }