/* Gemeinsame Hover-Uebergaenge fuer Buttons und Linktexte auf allen Seiten. */
:root {
    --kg-hover-duration: 0.35s;
    --kg-hover-easing: ease;
    --kg-hover-motion-duration: var(--kg-hover-duration);
    --kg-hover-transition:
        color var(--kg-hover-duration) var(--kg-hover-easing),
        background-color var(--kg-hover-duration) var(--kg-hover-easing),
        border-color var(--kg-hover-duration) var(--kg-hover-easing),
        box-shadow var(--kg-hover-duration) var(--kg-hover-easing),
        text-shadow var(--kg-hover-duration) var(--kg-hover-easing),
        opacity var(--kg-hover-duration) var(--kg-hover-easing),
        filter var(--kg-hover-duration) var(--kg-hover-easing),
        backdrop-filter var(--kg-hover-duration) var(--kg-hover-easing),
        -webkit-backdrop-filter var(--kg-hover-duration) var(--kg-hover-easing),
        text-decoration-color var(--kg-hover-duration) var(--kg-hover-easing),
        transform var(--kg-hover-motion-duration) var(--kg-hover-easing);
}

/* Layer-!important vereinheitlicht auch alte, seitenbezogene ID-Regeln.
   Toggler, Slider-Tracks, Collapse und Offcanvas behalten ihre Animationen.
   Overlay und Kopieren-Symbole besitzen eigene Einblend-/Zeichen-Effekte. */
@layer kg-interactions {
    :where(a[href], button, input[type="button"], input[type="submit"], input[type="reset"], .btn):not(.navbar-toggler),
    :where(a[href], button, .btn):not(.navbar-toggler) :where(span, i, strong, b, em, small, p, h1, h2, h3, h4, h5, h6):not(:where(.kg-nav-feature-overlay, .kg-nav-feature-overlay-text, .share-modal-copy-icons)) {
        transition: var(--kg-hover-transition) !important;
    }

    /* Formular- und Bestaetigungsbuttons bleiben beim Hover an ihrem Platz. */
    form :where(button, .btn, input[type="submit"], input[type="button"], input[type="reset"]),
    .thankyou-actions :where(.btn) {
        transform: none !important;
    }
}

/* Auch bei reduzierter Bewegung bleiben Farbwechsel weich; nur die
   Positions-/Groessenbewegung der Bedienelemente erfolgt unmittelbar. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --kg-hover-motion-duration: 0s;
    }
}