/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* Startseite – Header liegt UEBER dem Hero statt im Fluss (sticky wuerde seinen Platz reservieren und die 100dvh-Hero-Section nach unten druecken). fixed nimmt keinen Fluss-Platz ein; Scrollverhalten bleibt optisch identisch zu sticky. */ body.home .rhd-header { position: fixed; top: 0; left: 0; right: 0; } /* Sicherheitsnetz gegen horizontalen Overflow (geparkter Hero-Text u. Ae.): overflow-x: clip erzeugt — anders als hidden — keinen Scroll-Container und laesst position: sticky intakt. */ body.home { overflow-x: clip; } /* Geraete-Weiche Hero (Klasse setzt rhd-device-class.php frueh im ): Handy sieht NUR die statische Kopie (#brxe-hmshro, Frame 65), Tablet/Desktop NUR die animierte Section. Bewusst rhd-tablet/rhd-desktop statt :not(.rhd-phone), damit im Bricks-Builder (keine Geraeteklasse) beide Sections editierbar bleiben. */ html.rhd-phone #brxe-hmhero, html.rhd-phone #rhd-hero-spacer { display: none; } html.rhd-tablet #brxe-hmshro, html.rhd-desktop #brxe-hmshro { display: none; } body.home.admin-bar .rhd-header { top: 32px; } @media screen and (max-width: 782px) { body.home.admin-bar .rhd-header { top: 46px; } } /* Startseite – Hero-Choreo: Initialzustaende + No-JS-Fallbacks. Prinzip: Jedes Element startet versteckt (animation-fill backwards/both) und wuerde sich OHNE JavaScript nach ~4,5s selbst einblenden. anim-home.js schaltet diese CSS-Animationen sofort ab (style.animation = 'none') und uebernimmt per GSAP. prefers-reduced-motion: nichts wird versteckt, Logo-Overlay wird ausgeblendet. */ @media (prefers-reduced-motion: no-preference) { body.home .rhd-header { animation: rhd-home-header-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 4.5s both; } body.home #brxe-hmhvim { animation: rhd-hero-poster-in 0.8s ease 4.5s backwards; } body.home #brxe-hmhcnt { animation: rhd-hero-text-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 4.6s backwards; } body.home #brxe-hmhzgr { animation: rhd-hero-draw-in 1s ease 4.6s backwards; } body.home #brxe-kmdwzl { animation: rhd-hero-logo-out 0.5s ease 5.5s both; } /* Scroll-Indikator: ohne JS nach ~5s einblenden; sanftes Dauer-Bouncen am Icon (bewusst am KIND, GSAP steuert nur autoAlpha am Wrapper #brxe-hmhsci) */ body.home #brxe-hmhsci { animation: rhd-hero-poster-in 0.8s ease 5s backwards; } body.home #brxe-hmhscf { animation: rhd-hero-scroll-bounce 2s ease-in-out infinite; } } @keyframes rhd-hero-scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes rhd-home-header-in { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes rhd-hero-poster-in { from { opacity: 0; } } @keyframes rhd-hero-text-in { from { opacity: 0; transform: translateX(80px); } } @keyframes rhd-hero-draw-in { from { opacity: 0; } } @keyframes rhd-hero-logo-out { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { body.home #brxe-kmdwzl { display: none; } } /* Handy: die Choreo-Fallbacks oben duerfen NICHT greifen (der Header waere sonst 4,5s unsichtbar, obwohl die animierte Section gar nicht angezeigt wird). */ html.rhd-phone body.home .rhd-header, html.rhd-phone body.home #brxe-hmhvim, html.rhd-phone body.home #brxe-hmhcnt, html.rhd-phone body.home #brxe-hmhzgr, html.rhd-phone body.home #brxe-kmdwzl { animation: none; }