/* ============================================================
   Motion-Layer der Website
   Entstanden aus dem Motion-Audit (Prototyp-Variante E):
   - Reveals materialisieren (Blur + Scale + Opacity), Trigger
     ist .active aus dem Observer in index.html (70%-Linie).
   - Dunkle Sektionen blitzen nie weiss: Hintergrund steht,
     nur der Inhalt (.container) faehrt ein.
   - Transluzenter Header mit Scroll-Edge statt harter Linie.
   - Press-Feedback auf Buttons, Mobile-Menue auf Transform.
   Laedt nach swiss.css und ueberschreibt dort gezielt.
   ============================================================ */

/* ── Reveals: Materialisieren statt reinem Fade ───────────── */
.reveal {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity 0.55s var(--ease-out-expo),
                transform 0.55s var(--ease-out-expo),
                filter 0.55s var(--ease-out-expo);
}
.reveal:not(.active) {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
    filter: blur(7px);
}

/* Dunkle Sektionen: Hintergrund steht sofort, Inhalt faehrt ein. */
.reveal.bg-dark, .reveal.economy-visual {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
.reveal.bg-dark > .container,
.reveal.economy-visual > .container {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity 0.55s var(--ease-out-expo),
                transform 0.55s var(--ease-out-expo),
                filter 0.55s var(--ease-out-expo);
}
.reveal.bg-dark:not(.active) > .container,
.reveal.economy-visual:not(.active) > .container {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
    filter: blur(7px);
}

/* Kinder-Stagger (is-entering) faellt weg: Die Karten kommen
   ruhig mit dem Sektions-Reveal, Einzel-Animationen wuerden
   sich damit beissen (liefen zudem am falschen Trigger). */
.stat-card,
.compare-card-left,
.compare-card-right,
.role-card,
.process-step-premium,
#ansprechpartner .team-grid > li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ── Header als Material ──────────────────────────────────── */
.header {
    background: rgba(250, 250, 248, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: none;
}
.header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -14px;
    height: 14px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(25, 22, 21, 0.07), transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
}
html.is-scrolled .header::after { opacity: 1; }

/* ── Buttons: Feedback auf den Pointer-Down ───────────────── */
.btn {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.btn:active {
    transform: scale(0.95);
    transition-duration: 0.08s;
    transition-timing-function: ease-out;
}
.mobile-menu-toggle:active {
    transform: scale(0.97);
    transition: transform 0.1s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .stat-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
        transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
    }
}

/* Count-up: stabile Ziffernbreite, kein Zittern beim Zaehlen. */
.stat-value {
    font-variant-numeric: tabular-nums;
}

/* ── Mobile-Menue: GPU-Transform statt Layout-Property ────── */
@media (max-width: 768px) {
    .nav-links {
        right: 0;
        transform: translateX(105%);
        transition: transform 0.35s var(--ease-out-expo),
                    visibility 0s linear 0.35s;
    }
    .nav-links.is-open {
        transform: translateX(0);
        transition: transform 0.35s var(--ease-out-expo);
    }
}

/* ── Mobile: leichtere Reveals (Blur ist auf schwachen GPUs teuer) ── */
@media (max-width: 768px) {
    .reveal:not(.active),
    .reveal.bg-dark:not(.active) > .container,
    .reveal.economy-visual:not(.active) > .container {
        transform: translateY(14px);
        filter: blur(3px);
    }
    .reveal,
    .reveal.bg-dark > .container,
    .reveal.economy-visual > .container {
        transition-duration: 0.45s;
    }
    /* Blur-Header auf Mobile etwas dichter: weniger Durchscheinen
       hinter der Navigation, guenstiger zu rendern. */
    .header {
        background: rgba(250, 250, 248, 0.86);
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        backdrop-filter: blur(12px) saturate(160%);
    }
}

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal:not(.active),
    .reveal.bg-dark > .container,
    .reveal.economy-visual > .container,
    .reveal.bg-dark:not(.active) > .container,
    .reveal.economy-visual:not(.active) > .container {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .btn, .btn:active {
        transform: none;
        transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    }
}