/* =========================================================================== Rainer Müller – Coaching: subtile Animationen & Mikro-Interaktionen. Prinzipien: - Reveal-Styles greifen NUR unter html.rmc-js (setzt ein Inline-Snippet im ; das JS entfernt die Klasse wieder bei Reduced Motion / fehlendem IntersectionObserver). Ohne JS ist alles sofort sichtbar. - Alle Bewegungen liegen hinter prefers-reduced-motion: no-preference. - Nur opacity/transform => keine Layout-Shifts. =========================================================================== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* ----------------------------------------------------------------- Scroll-Reveal: sanftes Einblenden + Aufsteigen (JS vergibt .rmc-reveal + transition-delay, .rmc-in beim Sichtbarwerden). ----------------------------------------------------------------- */ html.rmc-js .rmc-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } html.rmc-js .rmc-reveal.rmc-in { opacity: 1; transform: none; will-change: auto; } /* ----------------------------------------------------------------- Karten: dezentes Anheben beim Hover (Angebots-Karten, Kursdetails, Zitat-Karten – alles mit Karten-Creme-Hintergrund oder .is-style-card). ----------------------------------------------------------------- */ .is-style-card, .wp-block-group.has-card-cream-background-color { transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out; } .is-style-card:hover, .wp-block-group.has-card-cream-background-color:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(27, 37, 25, 0.08); border-color: rgba(105, 131, 100, 0.45); } /* ----------------------------------------------------------------- Buttons: sanfter Farbwechsel + minimales Anheben. ----------------------------------------------------------------- */ .wp-block-button__link, .wp-element-button { transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out; } .wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-1px); } .wp-block-button__link:active, .wp-element-button:active { transform: translateY(0); } /* ----------------------------------------------------------------- Hero-Foto: der gedrehte Salbei-Kasten dreht beim Hover minimal weiter. ----------------------------------------------------------------- */ .hero-photo::before { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .hero-photo:hover::before { transform: rotate(4.5deg); } /* ----------------------------------------------------------------- Sticky-Header: Schatten erst nach dem ersten Scroll (Body-Klasse .rmc-scrolled kommt aus rmc-animations.js). ----------------------------------------------------------------- */ #masthead, .site-header-rm { transition: box-shadow 0.3s ease-out; } body.rmc-scrolled #masthead, body.rmc-scrolled .site-header-rm { box-shadow: 0 4px 24px rgba(27, 37, 25, 0.06); } } /* --------------------------------------------------------------------- Farb-Transitions für Links (kein Motion => außerhalb der Media Query). --------------------------------------------------------------------- */ .entry-content a:not(.wp-block-button__link) { transition: color 0.2s ease-out, text-decoration-color 0.2s ease-out; text-underline-offset: 3px; text-decoration-color: rgba(105, 131, 100, 0.4); } .entry-content a:not(.wp-block-button__link):hover { text-decoration-color: currentColor; } /* Sichtbarer Fokus für Tastatur-Nutzer – passend zum Grün. */ .wp-block-button__link:focus-visible, .entry-content a:focus-visible { outline: 2px solid #698364; outline-offset: 2px; border-radius: 4px; } .wp-block-button__link:focus-visible { border-radius: 999px; }