/** * BamLove — animierter Seitenhintergrund (identisch zur Anmeldeseite): * drei überlagerte Farbverläufe, Keyframes ct24LoginHeroSlide, Scrim. * Einbindung: + Markup .ct24-login-hero wie in anmeldung.html. * profil.html: zusätzlich (Stacking/Hintergrund-Freilegung). */ .ct24-login-hero { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Negatives z-index nur innerhalb des Body-Stacking-Kontexts (isolation), nicht hinter dem html-Hintergrund. */ body.bamlove-mit-globalem-hero { isolation: isolate; background: transparent !important; background-image: none !important; } body.bamlove-mit-globalem-hero .ct24-login-hero { z-index: -1; } /* * profil.html: .profil-ansicht / #profil-mastab füllen den Viewport mit eigenem Hintergrund; * zudem setzt Skript transform auf #profil-mastab — zusammen mit body isolation + negativem * Hero-z-Index kann der Hero in WebViews „weg“ sein. Hier: html-Klasse bamlove-html-mit-globalem-hero, * Hero z-index 0, Ansicht darüber (z-index 1), isolation am Body aufheben. */ html.bamlove-html-mit-globalem-hero body.bamlove-mit-globalem-hero { isolation: auto; } html.bamlove-html-mit-globalem-hero body.bamlove-mit-globalem-hero .ct24-login-hero { z-index: 0; } body.bamlove-mit-globalem-hero #profil-ansicht { z-index: 1; background: transparent !important; background-image: none !important; } body.bamlove-mit-globalem-hero #profil-mastab { background: transparent !important; background-image: none !important; } body.bamlove-mit-globalem-hero #profil-wickler { background: transparent !important; } /* html-Shorthand (z. B. index) zurücksetzen, damit der Hero sichtbar bleibt. */ html:has(body.bamlove-mit-globalem-hero), html.bamlove-html-mit-globalem-hero { background: #0f172a !important; } .ct24-login-hero__slides { position: absolute; inset: 0; } .ct24-login-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; animation: ct24LoginHeroSlide 18s ease-in-out infinite; transform: scale(1.03); will-change: opacity, transform; } .ct24-login-hero__slide--1 { background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.45) 0%, transparent 52%), linear-gradient(to bottom, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.82) 100%); animation-delay: 0s; } .ct24-login-hero__slide--2 { background-image: linear-gradient(225deg, rgba(99, 102, 241, 0.42) 0%, transparent 55%), linear-gradient(to bottom, rgba(15, 23, 42, 0.48) 0%, rgba(15, 23, 42, 0.85) 100%); animation-delay: -6s; } .ct24-login-hero__slide--3 { background-image: radial-gradient(ellipse 85% 65% at 72% 28%, rgba(236, 72, 153, 0.28), transparent 62%), linear-gradient(to bottom, rgba(15, 23, 42, 0.52) 0%, rgba(15, 23, 42, 0.9) 100%); animation-delay: -12s; } @keyframes ct24LoginHeroSlide { 0% { opacity: 0; transform: scale(1.06); } 7% { opacity: 1; transform: scale(1.03); } 30% { opacity: 1; transform: scale(1); } 38% { opacity: 0; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.06); } } .ct24-login-hero__scrim { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(15, 23, 42, var(--ct24-hero-scrim-a0, 0.26)) 0%, rgba(15, 23, 42, var(--ct24-hero-scrim-a1, 0)) var(--ct24-hero-scrim-mid-stop, 0%), rgba(15, 23, 42, var(--ct24-hero-scrim-a2, 0)) 100% ), radial-gradient( ellipse 90% 70% at 50% 20%, transparent 0%, rgba(15, 23, 42, var(--ct24-hero-scrim-radial, 0)) 100% ); z-index: 1; } @media (prefers-reduced-motion: reduce) { .ct24-login-hero__slide { animation: none; opacity: 0; transform: none; } .ct24-login-hero__slide--1 { opacity: 1; } }