/*
 * DOSIGNY Phase 32 – Scroll-Erlebnis der Startseite.
 * Optische Ergaenzungen fuer scroll-fx; bestehende Projektklassen bleiben
 * unveraendert. Live wird sie von der Startseite geladen; auf Staging nur
 * von der geschuetzten Vorschau-Route.
 */

html.fx-init,
html.fx-on {
    /* Das Projekt-CSS setzt am Root overflow-x:hidden. Laut dem aktualisierten
       Scroll-Skill stoert das die Hoehenmessung und fixed Pins. In dieser
       Startseiten-Ansicht schneiden stattdessen die einzelnen Szenen aus. */
    overflow-x: visible;
}

body[data-scroll-fx-preview],
body[data-scroll-fx-preview] main {
    /* Der Root schneidet horizontale Dekorationen bereits sicher ab. Ein
       overflow/clip an diesen Vorfahren wuerde dagegen Safaris fixed Pinning
       in der Leistungssektion in einen eigenen Scroll-Container zwingen. */
    overflow-x: visible;
}

.home-scroll-progress {
    --fx-progress-color: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-light));
    --fx-progress-height: 3px;
    box-shadow: 0 0 18px rgba(var(--color-primary-rgb), 0.55);
}

body[data-scroll-fx-preview] .geo-definition-lead {
    border-left: 1px solid rgba(var(--color-primary-rgb), 0.28);
    padding-left: clamp(1rem, 2vw, 1.5rem);
}

body[data-scroll-fx-preview] [data-fx~="scene"][data-fx-scene-direction="left"] > .fx-scene-aura {
    left: 18%;
}

body[data-scroll-fx-preview] [data-fx~="scene"][data-fx-scene-direction="right"] > .fx-scene-aura {
    left: 72%;
}

body[data-scroll-fx-preview] .fx-scene-aura::before,
body[data-scroll-fx-preview] .fx-scene-aura::after {
    content: '';
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(var(--color-primary-rgb), 0.09);
    border-radius: inherit;
}

body[data-scroll-fx-preview] .fx-scene-aura::after {
    inset: 27%;
    border-color: rgba(var(--color-light-rgb), 0.055);
}

body[data-scroll-fx-preview] [data-fx~="cascade"] > *,
body[data-scroll-fx-preview] [data-fx~="cascade"] [class*="card"],
body[data-scroll-fx-preview] [data-fx~="cascade"] .client-logo {
    backface-visibility: hidden;
}

body[data-scroll-fx-preview] #services[data-fx~="horizontal"] {
    isolation: isolate;
    /* "scene" setzt im Skill overflow:clip. Der gepinnte Knoten selbst
       braucht fuer Safari/Firefox den bewaehrten horizontalen Ausschnitt. */
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(var(--color-primary-rgb), 0.13), transparent 34%),
        radial-gradient(circle at 88% 88%, rgba(var(--color-primary-rgb), 0.08), transparent 30%),
        var(--color-darker);
}

body[data-scroll-fx-preview] #services[data-fx~="horizontal"]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

body[data-scroll-fx-preview] #services[data-fx~="horizontal"] > .container {
    max-width: none;
    padding-inline: clamp(1rem, 5vw, 5rem);
}

body[data-scroll-fx-preview] #services .services__header {
    max-width: 820px;
    margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
}

body[data-scroll-fx-preview] #services .services__grid[data-fx-track] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    max-width: none;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0 clamp(0rem, 1vw, 1rem) 1rem;
}

body[data-scroll-fx-preview] #services .service-card {
    flex: 0 0 clamp(300px, 38vw, 520px);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: rgba(var(--color-light-rgb), 0.09);
    background:
        linear-gradient(145deg, rgba(var(--color-primary-rgb), 0.075), transparent 52%),
        rgba(var(--color-light-rgb), 0.025);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22);
}

body[data-scroll-fx-preview] #services .service-card:hover {
    transform: translateY(-6px);
}

body[data-scroll-fx-preview] .about__img[data-fx~="mask"] {
    border-radius: var(--radius-lg);
}

/* Die beiden Leistungsbilder besitzen real 500 × 400 Pixel. Das explizite
   Seitenverhaeltnis reserviert ihren Platz bereits vor dem Lazy Load und
   verhindert ScrollTrigger-Verschiebungen, ohne das Bild zu verzerren. */
body[data-scroll-fx-preview] .features .about__img[data-fx~="mask"],
body[data-scroll-fx-preview] .features + .section .about__img[data-fx~="mask"] {
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

/* Zentrierte Bild-Wrapper duerfen vor dem Lazy Load nicht auf 0 Pixel
   schrumpfen. Die Breite entspricht exakt ihrem bereits geladenen Zustand;
   die intrinsischen Bildverhaeltnisse reservieren dadurch sofort die Hoehe. */
@media (max-width: 968px) {
    body[data-scroll-fx-preview] .about__image {
        width: 100%;
        max-width: 400px;
    }
}

/* Die Kundenlogos liegen in einem responsiven Grid mit align-items:center.
   Nur je ein hoehenbestimmendes Element pro moeglicher Reihe benoetigt eine
   Mindesthoehe. Die Werte entsprechen den bereits geladenen Originalmassen
   (Padding + Logo + Beschriftung) und veraendern daher nicht die Optik. */
body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(1),
body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(4) {
    min-height: 203px;
}

body[data-scroll-fx-preview] .clients__grid .client-logo:last-child {
    min-height: 226px;
}

body[data-scroll-fx-preview] .website-check-spotlight__card {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.28),
        0 0 60px rgba(var(--color-primary-rgb), 0.07);
}

body[data-scroll-fx-preview] .website-check-spotlight__card::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -110px;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    box-shadow: 0 0 70px rgba(var(--color-primary-rgb), 0.1);
    pointer-events: none;
}

/* Statischer Notausstieg: ohne Engine bleiben alle Inhalte im Standardlayout. */
html:not(.fx-on) body[data-scroll-fx-preview] #services[data-fx~="horizontal"],
html.fx-fail body[data-scroll-fx-preview] #services[data-fx~="horizontal"],
html.fx-reduced body[data-scroll-fx-preview] #services[data-fx~="horizontal"] {
    display: block;
    min-height: 0;
    overflow: visible;
}

html:not(.fx-on) body[data-scroll-fx-preview] #services[data-fx~="horizontal"] > .container,
html.fx-fail body[data-scroll-fx-preview] #services[data-fx~="horizontal"] > .container,
html.fx-reduced body[data-scroll-fx-preview] #services[data-fx~="horizontal"] > .container {
    max-width: 1400px;
    padding-inline: var(--spacing-md);
}

html:not(.fx-on) body[data-scroll-fx-preview] #services .services__grid[data-fx-track],
html.fx-fail body[data-scroll-fx-preview] #services .services__grid[data-fx-track],
html.fx-reduced body[data-scroll-fx-preview] #services .services__grid[data-fx-track] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    width: auto;
    padding: 0;
    transform: none !important;
}

html:not(.fx-on) body[data-scroll-fx-preview] #services .service-card,
html.fx-fail body[data-scroll-fx-preview] #services .service-card,
html.fx-reduced body[data-scroll-fx-preview] #services .service-card {
    min-height: 0;
}

@media (min-width: 1100px) and (max-height: 760px) {
    body[data-scroll-fx-preview] #services[data-fx~="horizontal"] {
        padding-block: 3.25rem 2rem;
    }

    body[data-scroll-fx-preview] #services .services__header {
        margin-bottom: 1rem;
    }

    body[data-scroll-fx-preview] #services .service-card {
        min-height: 240px;
        padding: 2rem;
    }
}

@media (max-width: 1099px) {
    html.fx-on,
    html.fx-on body[data-scroll-fx-preview] {
        /* Mobile hat keine horizontale Inhaltsinteraktion. Eine leicht
           diagonale Fingerbewegung bleibt deshalb eine vertikale Seitengeste;
           Pinch-Zoom und die native Safari-Trägheit bleiben erhalten. */
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-x: none;
    }

    body[data-scroll-fx-preview] [data-fx~="scene"] {
        /* Transformierte Reveal-Ziele und Auren duerfen den Scrollbereich nicht
           verbreitern. Paint-Containment wirkt abschnittsweise und erzeugt im
           Gegensatz zu overflow am Root keinen zweiten Safari-Scrollcontainer.
           Die Desktop-Pins ab 1100 px bleiben hiervon unberuehrt. */
        contain: paint;
    }

    body[data-scroll-fx-preview] main > [data-fx~="scene"] {
        /* Alle mobilen Szenen liegen explizit auf derselben Ebene. Bei gleichem
           z-index entscheidet wieder zuverlaessig die DOM-Reihenfolge: Der
           nachfolgende Abschnitt wird beim Momentum-Scroll vor dem vorherigen
           gemalt. Das verhindert WebKits sporadisches Zuruecksortieren von
           benachbarten contain:paint-Kompositionsebenen. */
        z-index: 1;
    }

    body[data-scroll-fx-preview] #contact[data-fx~="scene"] {
        /* Entspricht optisch exakt dem bisherigen Body-Hintergrund, schliesst
           aber beim iOS-Compositing ein transparentes Fenster zur vorherigen
           Website-Check-Szene aus. */
        background-color: var(--color-dark);
    }

    body[data-scroll-fx-preview] #services[data-fx~="horizontal"] {
        display: block;
        min-height: 0;
        overflow: visible;
    }

    body[data-scroll-fx-preview] #services[data-fx~="horizontal"] > .container {
        max-width: 1400px;
        padding-inline: var(--spacing-sm);
    }

    body[data-scroll-fx-preview] #services .services__grid[data-fx-track] {
        display: grid;
        grid-template-columns: 1fr;
        width: auto;
        padding: 0;
        transform: none !important;
    }

    body[data-scroll-fx-preview] #services .service-card {
        min-height: 0;
        flex-basis: auto;
    }

    body[data-scroll-fx-preview] .geo-definition-lead {
        padding-left: 1rem;
    }
}

@media (max-width: 768px) {
    body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(4) {
        min-height: 0;
    }

    body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(1),
    body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(3),
    body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(5),
    body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(7) {
        min-height: 128px;
    }

    body[data-scroll-fx-preview] .clients__grid .client-logo:last-child {
        min-height: 149px;
    }
}

/* Auf sehr schmalen Displays brechen genau zwei Kundennamen in eine zweite
   Zeile um. Ihre gemessenen geladenen Endhoehen werden nur unterhalb des
   jeweiligen echten Umbruchpunkts reserviert. */
@media (max-width: 379px) {
    body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(1) {
        min-height: 149px;
    }
}

@media (max-width: 373px) {
    body[data-scroll-fx-preview] .clients__grid .client-logo:nth-child(6) {
        min-height: 139px;
    }
}

@media (max-width: 767px) {
    body[data-scroll-fx-preview] [data-fx~="cascade"] {
        overflow: visible;
    }

    /* Eigene, leichte Mobile-Szene: keine Filter oder grossen Bilder,
       sondern nur eine kleine transformierte Vektorebene pro Abschnitt. */
    body[data-scroll-fx-preview] .fx-scene-aura {
        display: block;
        top: 8%;
        width: clamp(250px, 86vw, 390px);
        margin-left: clamp(-190px, -43vw, -125px);
        opacity: 0.48;
        background:
            radial-gradient(circle at 38% 38%, rgba(var(--color-primary-rgb), 0.12), transparent 42%),
            repeating-radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(255, 255, 255, 0.025) 39px 40px);
    }

    body[data-scroll-fx-preview] [data-fx~="scene"][data-fx-scene-direction="left"] > .fx-scene-aura {
        left: 28%;
    }

    body[data-scroll-fx-preview] [data-fx~="scene"][data-fx-scene-direction="right"] > .fx-scene-aura {
        left: 72%;
    }

    body[data-scroll-fx-preview] .fx-scene-aura::before {
        inset: 15%;
        border-color: rgba(var(--color-primary-rgb), 0.12);
    }

    body[data-scroll-fx-preview] .fx-scene-aura::after {
        inset: 31%;
        border-color: rgba(var(--color-light-rgb), 0.065);
    }

    body[data-scroll-fx-preview] .website-check-spotlight__card::after {
        width: 150px;
        height: 150px;
        right: -80px;
        top: -85px;
    }

    /* Die Review-Section kombiniert Szene und Cascade. Sie muss ihren
       eigenen Malbereich behalten, damit transformierte Inhalte beim
       Hochscrollen niemals unter die Branchen-Section geraten. */
    body[data-scroll-fx-preview] .reviews-slider-section[data-fx~="scene"] {
        overflow: hidden;
        overflow: clip;
        z-index: 1;
    }

    body[data-scroll-fx-preview] .reviews-slider-section > .fx-scene-aura {
        z-index: 0;
    }

    body[data-scroll-fx-preview] .reviews-slider-section > .container {
        z-index: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-scroll-progress {
        display: none;
    }
}

/* ------------------------------------------------------------------
 * Live 1: stabiler mobiler Standardmodus
 * ------------------------------------------------------------------
 * Mobil bleiben nur die bereits vorhandenen Hero-/Header-Effekte aus dem
 * globalen Projekt-CSS, das Partikel-Canvas und die zwei Zahlenzaehler aktiv.
 * Alle zusaetzlichen Phase-32-Scroll-Effekte sind dort abgeschaltet. Desktop
 * traegt diese Klasse nicht und behaelt die vollstaendige Scroll-Experience.
 */
html.fx-mobile-lite,
html.fx-mobile-lite body[data-scroll-fx-preview],
html.fx-mobile-lite body[data-scroll-fx-preview] main {
    overflow-x: clip;
}

html.fx-mobile-lite body[data-scroll-fx-preview] {
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: none;
}

html.fx-mobile-lite body[data-scroll-fx-preview] .home-scroll-progress,
html.fx-mobile-lite body[data-scroll-fx-preview] .fx-scene-aura {
    display: none !important;
}

html.fx-mobile-lite body[data-scroll-fx-preview] [data-fx] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    will-change: auto !important;
}

html.fx-mobile-lite body[data-scroll-fx-preview] section[data-fx] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    contain: none !important;
    isolation: auto !important;
    z-index: auto !important;
    overflow: visible !important;
}

html.fx-mobile-lite body[data-scroll-fx-preview] #services[data-fx~="horizontal"] {
    display: block;
    min-height: 0;
    overflow: visible !important;
    isolation: auto !important;
}

html.fx-mobile-lite body[data-scroll-fx-preview] #services[data-fx~="horizontal"] > .container {
    max-width: 1400px;
    padding-inline: var(--spacing-sm);
}

html.fx-mobile-lite body[data-scroll-fx-preview] #services .services__grid[data-fx-track] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    width: auto;
    max-width: 100%;
    padding: 0;
    transform: none !important;
}

html.fx-mobile-lite body[data-scroll-fx-preview] #services .service-card {
    min-height: 0;
    flex-basis: auto;
}

@supports not (overflow: clip) {
    html.fx-mobile-lite,
    html.fx-mobile-lite body[data-scroll-fx-preview],
    html.fx-mobile-lite body[data-scroll-fx-preview] main {
        overflow-x: hidden;
    }
}