/** * Ernst Müller – Animationen * * Nur opacity/transform (kein Layout-Reflow, kein CLS). * Alles Bewegte steckt in @media (prefers-reduced-motion: no-preference); * reine Farbübergänge bleiben immer aktiv. * * Steuerung pro Element (Klasse im Editor unter „Erweitert → Zusätzliche CSS-Klasse(n)"): * em-no-anim → Element vom Scroll-Reveal ausnehmen * em-anim → Element zusätzlich in den Scroll-Reveal aufnehmen */ /* ---------- Immer aktiv: sanfte Farbübergänge ---------- */ .wp-element-button { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .wp-block-navigation a:where(:not(.wp-element-button)) { text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color 0.2s ease, color 0.2s ease; } .wp-block-navigation a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; } .entry-content a:where(:not(.wp-element-button)) { transition: color 0.2s ease, text-decoration-color 0.2s ease; } .wp-block-details > summary { cursor: pointer; transition: color 0.2s ease; } /* ---------- Seitenwechsel-Crossfade (View Transitions API) ---------- Muss auf Top-Ebene stehen: @view-transition innerhalb eines @media-Blocks verwerfen manche Browser-Parser samt aller nachfolgenden Regeln. Browser ohne Unterstützung ignorieren diese Regeln einfach. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; } /* Reduced-Motion: sofortiger Wechsel statt Crossfade */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ---------- Nur bei erlaubter Bewegung ---------- */ @media (prefers-reduced-motion: no-preference) { /* Anker-Links sanft scrollen */ html { scroll-behavior: smooth; } /* Buttons: leichter Lift mit Schatten, Absenken beim Klick */ .wp-element-button { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .wp-element-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .wp-element-button:active { transform: translateY(0) scale(0.98); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } /* Scroll-Reveal: greift erst, wenn das JS die Klasse auf gesetzt hat – ohne JS bleibt alles normal sichtbar. Der versteckte Basiszustand hat bewusst KEINE transition, damit beim Laden kein Fade-out entsteht; die Bewegung sitzt nur auf .em-in und läuft daher ausschließlich beim Einblenden. */ html.em-anim-ready .em-reveal { opacity: 0; transform: translateY(20px); } html.em-anim-ready .em-reveal.em-in { opacity: 1; transform: none; transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: var(--em-reveal-delay, 0s); } /* FAQ (Details-Block): Inhalt beim Aufklappen sanft einblenden. Moderne Browser bekommen zusätzlich eine weiche Höhen-Animation, ältere nur den Fade. */ @supports not (interpolate-size: allow-keywords) { .wp-block-details[open] > :not(summary) { animation: em-details-in 0.3s ease-out; } } @supports (interpolate-size: allow-keywords) { .wp-block-details { interpolate-size: allow-keywords; } .wp-block-details::details-content { block-size: 0; overflow-y: clip; opacity: 0; transition: content-visibility 0.3s allow-discrete, opacity 0.3s ease, block-size 0.3s ease; } .wp-block-details[open]::details-content { block-size: auto; opacity: 1; } } @keyframes em-details-in { from { opacity: 0; transform: translateY(-4px); } } }