/** * @file css/redesign/logo-intro.css - Feedback-Welle WF-4 * * f-Logo-Intro auf der Startseite (Kundenanmerkung 20260820-a17002c9). * * Die Datei enthaelt nur zwei Dinge: den Startzustand der Wortmarke und * die Lage der Partikel-Leinwand. Die eigentliche Choreografie steht in * js/feb-logo-intro.js. * * 1. Startzustand ohne Flackern * --------------------------------------------------------------------- * feb-logo-intro.js haengt am Ende von , die Kopfzeile ist da * laengst gemalt. Wuerde erst das Skript die Wortmarke ausblenden, sae- * he man sie kurz aufblitzen. Deshalb blendet sie hier per Keyframe von * Anfang an aus - das steht im und greift schon beim ersten Bild. * * Der Keyframe ist zugleich der Notnagel: laeuft kein JavaScript oder * scheitert die Datei, holt `feb-logo-intro-guard` die Wortmarke nach * 2,4 s von selbst zurueck. Es gibt also keinen Zustand, in dem das Logo * dauerhaft unsichtbar bleibt. * * Uebernimmt das Skript, setzt es .feb-logo-intro-active auf und * schaltet den Keyframe damit ab; ab dort steuert es die Deckkraft per * Inline-Stil und raeumt diesen am Ende restlos wieder ab. Bewusst per * Klasse und nicht per `style.animation = 'none'`: so bleibt am Element * selbst nach dem Lauf kein einziges Attribut zurueck. * * 2. Bewegungsempfindlichkeit * --------------------------------------------------------------------- * Bei prefers-reduced-motion greift weder Keyframe noch Leinwand. Die * Wortmarke steht dann von der ersten Millisekunde an wie bisher. * * Geladen ueber die Bibliothek `global-styling` in * feb2026_bootstrap.libraries.yml, als letzte Datei der Redesign-Ebene. */ /* ============================================================ 1. Wortmarke: verdeckter Start, garantierte Rueckkehr ============================================================ */ @media (prefers-reduced-motion: no-preference) { body.path-frontpage .brm-header__logo img { animation: feb-logo-intro-guard 2.4s linear both; } } /* Das Skript hat uebernommen - ab hier zaehlt allein sein Inline-Stil. Die Spezifitaet muss ueber der Regel darueber liegen (0,3,2 zu 0,2,2), darum steht `body.path-frontpage` auch hier mit im Selektor. */ .feb-logo-intro-active body.path-frontpage .brm-header__logo img { animation: none; } @keyframes feb-logo-intro-guard { 0%, 45% { opacity: 0; } 100% { opacity: 1; } } /* ============================================================ 2. Partikel-Leinwand Rein dekoratives Overlay, das das Skript fuer die Dauer der Animation an haengt und danach wieder entfernt. Es liegt knapp ueber der Kopfzeile (z-index 50 in css/style.css) und damit deutlich unter Offcanvas (1045) und Suchmodal (1055) - ein waehrend der Animation geoeffnetes Menue verdeckt die Partikel also, nicht umgekehrt. Position und Groesse setzt das Skript zur Laufzeit aus getBoundingClientRect() der Wortmarke, damit die Leinwand der Kopfzeile folgt, wenn WF-6 sie beim Scrollen verschiebt. Hier steht deshalb bewusst kein einziges Mass. ============================================================ */ .feb-logo-intro { position: fixed; left: 0; top: 0; z-index: 51; display: block; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .feb-logo-intro { display: none; } }