/* =========================================================
   FOLIEREN — "Schichtaufbau" Hero
   Scoped under .dns-layers-hero. Hintergrund kommt bewusst
   NICHT von hier — die Seite nutzt den einheitlichen
   body::before Verlauf aus style.css.
========================================================= */

.dns-layers-hero {
    --rx: 58deg;
    --rz: -36deg;
    --gap: 104px;

    position: relative;

    display: flex;
    align-items: center;

    padding: 6.5rem 1.5rem 4rem;

    color: #eef2f7;
    font-family: 'Inter', system-ui, sans-serif;
}

.dns-layers-hero * {
    box-sizing: border-box;
}

/* --------------------------- Layout --------------------------- */

.dns-layers-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;

    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* ---------------------------- Copy ---------------------------- */

.dns-layers-hero__title {
    font-family: 'Saira', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0 0 1.1rem;
    color: #eef2f7;
}

.dns-layers-hero__title em {
    font-style: normal;
    background: linear-gradient(96deg, #5cb2ee, #2f8fd6 62%, #0f5aa8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dns-layers-hero__lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #c2ccd8;
    max-width: 46ch;
    margin: 0 0 2rem;
}

.dns-layers-hero__actions {
    margin-top: .5rem;
}

.dns-layers-hero__btn-icon {
    margin-left: .5em;
    transition: transform .25s;
}

.dns-layers-hero__actions .dns-folieren__btn--primary:hover .dns-layers-hero__btn-icon {
    transform: translateX(3px);
}

/* --------------------------- Bühne --------------------------- */

.dns-layers-hero__stage {
    position: relative;
    width: 100%;
    max-width: 620px;
    /* Fest statt vh-basiert: vh aendert sich auf manchen Browsern beim
       Scrollen (z.B. wenn die Adressleiste/Toolbar ein-/ausblendet),
       wodurch die ganze Buehne beim Hoch-/Runterscrollen "springt". */
    min-height: 400px;

    display: grid;
    place-items: center;

    perspective: 1500px;
    perspective-origin: 34% 46%;
}

.dns-layers-hero__stack {
    position: relative;
    width: min(344px, 64%);
    aspect-ratio: 7/5;

    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateZ(var(--rz));
    transition: transform .6s cubic-bezier(.2,.8,.2,1);

    animation: dnsLayersFloat 9s ease-in-out infinite;
}

@keyframes dnsLayersFloat {
    0%, 100% { transform: rotateX(var(--rx)) rotateZ(var(--rz)) translateZ(0); }
    50%      { transform: rotateX(calc(var(--rx) - 3deg)) rotateZ(calc(var(--rz) + 3deg)) translateZ(14px); }
}

.dns-layers-hero__layer {
    position: absolute;
    inset: 0;
    border-radius: 16px;

    transform: translateZ(var(--z));
    transform-style: preserve-3d;

    background: var(--fill);
    border: 1px solid var(--edge);
    box-shadow:
        0 26px 60px -28px rgba(0,0,0,.9),
        inset 0 0 0 1px rgba(255,255,255,.05);

    transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .35s, filter .35s;
}

/* Glanzband, das über jede Schicht wandert */
.dns-layers-hero__layer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;

    background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,var(--gloss)) 50%, transparent 82%);
    background-size: 280% 100%;

    animation: dnsLayersSweep 7s ease-in-out infinite;
    animation-delay: var(--delay);

    pointer-events: none;
}

@keyframes dnsLayersSweep {
    0% { background-position: 120% 0; }
    55%, 100% { background-position: -120% 0; }
}

/* Kantenlicht an der Schnittkante — lässt die Schicht dick wirken */
.dns-layers-hero__layer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 0 0 16px 16px;

    background: linear-gradient(90deg, transparent, var(--rim), transparent);

    pointer-events: none;
}

/* Beschriftung: liegt im 3D-Raum, wird aber zurückgedreht,
   damit sie flach zum Betrachter zeigt und lesbar bleibt. */
.dns-layers-hero__tag {
    position: absolute;
    left: 100%;
    top: 50%;

    transform: rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(64px, -50%);
    transform-origin: left center;

    white-space: nowrap;
    pointer-events: none;
}

.dns-layers-hero__tag b {
    display: block;
    font-family: 'Saira', system-ui, sans-serif;
    font-weight: 600;
    font-size: .86rem;
    color: #eef2f7;
}

.dns-layers-hero__tag i {
    display: block;
    font-style: normal;
    font-size: .74rem;
    color: #98a2b0;
    margin-top: .1rem;
}

.dns-layers-hero__tag::before {
    content: "";
    position: absolute;
    left: -58px;
    top: 50%;
    width: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2f8fd6);
}

/* Legende für schmale Screens — gleiche Daten, andere Darstellung
   (die abgewinkelten dns-layers-hero__tag Labels würden dort
   aus dem sichtbaren Bereich laufen). */
.dns-layers-hero__legend {
    display: none;
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    grid-template-columns: 1fr 1fr;
    gap: .7rem .9rem;
    max-width: 420px;
    width: 100%;
}

.dns-layers-hero__legend li {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dns-layers-hero__swatch {
    flex: 0 0 auto;
    width: 26px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.3);
}

.dns-layers-hero__legend b {
    display: block;
    font-family: 'Saira', system-ui, sans-serif;
    font-weight: 600;
    font-size: .76rem;
}

.dns-layers-hero__legend i {
    display: block;
    font-style: normal;
    font-size: .68rem;
    color: #98a2b0;
    margin-top: .05rem;
}

/* --------------------------- Responsive --------------------------- */

/* Die schraegen Tags brauchen sehr viel Platz rechts vom Stapel; das
   2-Spalten-Layout traegt erst ab ~1340px. Darunter deshalb einspaltig
   (Text -> Stapel -> Legende), sonst klebt der Stapel am rechten Rand. */
@media (max-width: 1340px) {
    .dns-layers-hero {
        /* --gap steuert die 3D-Tiefe. Muss ein einfacher px-Wert bleiben:
           dns-layers.js liest ihn per parseInt(); clamp()/calc() -> NaN.
           Zu grosse Werte spreizen den Stapel bis in Button/Legende. */
        --gap: 64px;
        --rx: 60deg;
        --rz: -32deg;
        padding-top: 6.5rem;
        /* Container vertikal stapeln: sonst sitzt die (jetzt sichtbare)
           Legende neben dem Text statt darunter und ueberlagert alles. */
        flex-direction: column;
        align-items: center;
        /* der 3D-Stapel darf keinen horizontalen Scroll erzeugen */
        overflow-x: clip;
    }

    .dns-layers-hero__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        width: 100%;
    }

    .dns-layers-hero__lead {
        max-width: min(46ch, 100%);
        margin-inline: auto;
    }

    .dns-layers-hero__actions {
        display: flex;
        justify-content: center;
    }

    .dns-layers-hero__stage {
        width: 100%;
        /* muss die volle projizierte Hoehe des 3D-Stapels fassen, sonst
           laeuft die unterste Schicht in die Legende */
        min-height: clamp(340px, 46vw, 480px);
        /* zentrierte Projektion statt der Desktop-Verschiebung nach links */
        perspective-origin: center;
    }

    .dns-layers-hero__stack {
        width: clamp(200px, 34vw, 300px);
    }

    .dns-layers-hero__tag {
        display: none;
    }

    .dns-layers-hero__legend {
        display: grid;
        margin-inline: auto;
    }
}

/* etwas mehr 3D-Tiefe, sobald genug vertikaler Platz da ist */
@media (min-width: 901px) and (max-width: 1340px) {
    .dns-layers-hero { --gap: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .dns-layers-hero__stack { animation: none; }
    .dns-layers-hero__layer::before { animation: none; }
}