/* Lions Club Diez – Einblend-Animationen ------------------------------------------------------------------ Ausgeblendet wird über die echten Klassen der Elemente; die Kennung `lcd-anim-aktiv` setzt ein Skript im , bevor gezeichnet wird. Ohne JavaScript fehlt die Kennung und alles bleibt sichtbar. Lehre aus Version 2.0: Jede Versteckregel braucht eine Aufdeckregel mit MEHR Gewicht. Die frühere allgemeine Regel `.ist-sichtbar` verlor gegen `.lcd-grid > .lcd-card` – die Karten in „Unser Engagement“ und „Demnächst“ konnten dadurch nie erscheinen, während der Slider (mit eigener schwererer Regel) funktionierte. Deshalb steht unten für jeden Versteck-Selektor die exakt passende Aufdeckung. ------------------------------------------------------------------ */ html.lcd-anim-aktiv .lcd-section-head, html.lcd-anim-aktiv .lcd-section > h2, html.lcd-anim-aktiv .lcd-infobox, html.lcd-anim-aktiv .lcd-cta-banner, html.lcd-anim-aktiv .lcd-grid > .lcd-card, html.lcd-anim-aktiv .lcd-hscroll > .lcd-card, html.lcd-anim-aktiv .lcd-members > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s cubic-bezier(.22, .7, .3, 1), transform .7s cubic-bezier(.22, .7, .3, 1); will-change: opacity, transform; /* Schutz: Falls im Customizer noch der frühere Block mit animation-timeline: view() steht, würde dessen Animation jede opacity-Regel überstimmen und die Elemente dauerhaft verstecken. Hier wird jede fremde Animation auf diesen Elementen abgeschaltet. */ animation: none !important; } /* Richtungen */ html.lcd-anim-aktiv .lcd-infobox { transform: translate3d(-44px, 0, 0); } html.lcd-anim-aktiv .lcd-hscroll > .lcd-card { transform: translate3d(44px, 0, 0); } html.lcd-anim-aktiv .lcd-cta-banner { transform: scale(.94); } /* Aufdecken – je Versteckregel eine Regel mit einer Klasse mehr, damit sie in jedem Fall gewinnt. */ html.lcd-anim-aktiv .lcd-section-head.ist-sichtbar, html.lcd-anim-aktiv .lcd-section > h2.ist-sichtbar, html.lcd-anim-aktiv .lcd-infobox.ist-sichtbar, html.lcd-anim-aktiv .lcd-cta-banner.ist-sichtbar, html.lcd-anim-aktiv .lcd-grid > .lcd-card.ist-sichtbar, html.lcd-anim-aktiv .lcd-hscroll > .lcd-card.ist-sichtbar, html.lcd-anim-aktiv .lcd-members > .ist-sichtbar { opacity: 1; transform: none; } /* Nach dem Einblenden nichts mehr vorhalten. */ html.lcd-anim-aktiv .ist-fertig { will-change: auto; } /* Auf dem Handy nur nach oben schieben – seitliche Wege wirken dort unruhig. */ @media (max-width: 600px) { html.lcd-anim-aktiv .lcd-infobox, html.lcd-anim-aktiv .lcd-hscroll > .lcd-card { transform: translate3d(0, 20px, 0); } } /* Wer Bewegung reduziert haben möchte, sieht die Seite ohne Animation. */ @media (prefers-reduced-motion: reduce) { html.lcd-anim-aktiv .lcd-section-head, html.lcd-anim-aktiv .lcd-section > h2, html.lcd-anim-aktiv .lcd-infobox, html.lcd-anim-aktiv .lcd-cta-banner, html.lcd-anim-aktiv .lcd-grid > .lcd-card, html.lcd-anim-aktiv .lcd-hscroll > .lcd-card, html.lcd-anim-aktiv .lcd-members > * { opacity: 1 !important; transform: none !important; transition: none !important; } }