/* ===========================================================================
   THEMA „Motion" — Overlay-Stylesheet, geladen NACH custom.css.
   Lebendige Variante des App-Looks: gleiche Farben und Flächen, aber mit
   sanfter, durchgängiger Bewegung — animierter Sonnen-Glow im Hero,
   schwebende Karten, gleitende Links und ein stärkerer Scroll-Reveal.
   Alle Dauer-Animationen laufen NUR bei prefers-reduced-motion:
   no-preference; wer Bewegung reduziert hat, bekommt den ruhigen App-Look.
   ======================================================================== */

/* Sanftes Scrollen zu Ankern (z. B. Hilfe-Sektionen) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---- Karten schweben: Hover hebt an, Schatten wächst ------------------- */
.card {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--fwg-shadow-hover, 0 6px 16px rgba(9, 49, 55, 0.12), 0 18px 40px rgba(9, 49, 55, 0.16));
    }
}

/* ---- Buttons & Nav-Links reagieren spürbar ----------------------------- */
.btn { transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .portal-sidebar .nav-link { transition: padding-left 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.25s ease, color 0.25s ease; }
    .portal-sidebar .nav-link:hover { padding-left: 1.15rem; }
}

/* ---- Hero: atmender Sonnen-Glow + einschwebender Titel ----------------- */
@media (prefers-reduced-motion: no-preference) {
    .hero::before {
        animation: mo-sun 9s ease-in-out infinite alternate;
    }
    .hero .motto,
    .hero h1,
    .hero .lead,
    .hero .btn {
        animation: mo-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
    .hero h1 { animation-delay: 0.1s; }
    .hero .lead { animation-delay: 0.2s; }
    .hero .btn { animation-delay: 0.3s; }

    /* Dashboard-Begrüßung im Portal gleitet ebenfalls ein */
    .dash-greet-hero h1,
    .dash-hero .card-title {
        animation: mo-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
}
@keyframes mo-sun {
    from { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.85; }
    to   { transform: translateX(-50%) translateY(14px) scale(1.08); opacity: 1; }
}
@keyframes mo-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Abschnitts-Überschriften: Unterstrich wächst beim Erscheinen ------ */
.section-title { position: relative; padding-bottom: 0.35rem; }
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 2.6rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fwg-orange), transparent);
}
@media (prefers-reduced-motion: no-preference) {
    /* Nur wenn der Scroll-Reveal aktiv ist (.sr vom Skript), wächst der
       Unterstrich beim Erscheinen — ohne JS bleibt er einfach sichtbar. */
    .section-title.sr::after { width: 0; transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s; }
    .section-title.sr.sr-in::after { width: 2.6rem; }
}

/* ---- News-Bilder zoomen beim Überfahren dezent ------------------------- */
.news-card { overflow: hidden; }
.news-card img { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .news-card:hover img { transform: scale(1.04); }
}

/* ---- Stärkerer Scroll-Reveal (Basis .sr/.sr-in in custom.css) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .sr { transform: translateY(26px) scale(0.985); transition-duration: 0.7s; }
    .sr-in { transform: none; }
}