/* ==========================================================
   9GRAD OST · HOMEPAGE RHYTHM V2
   ========================================================== */

:root {
    --r9-red: #690f00;
    --r9-paper: #f6f4f1;
    --r9-paper-alt: #ece9e4;
    --r9-card: #fbfaf8;
    --r9-ink: #171717;
    --r9-muted: #696966;
    --r9-line: rgba(20,20,20,.13);
}


/* ==========================================================
   1. HELLE SEKTIONEN BESSER TRENNEN
   ========================================================== */

.neo-intro {
    background: #f7f5f2 !important;
}

.neo-event-scenes {
    background: var(--r9-paper-alt) !important;
}

.neo-event-scenes__intro {
    position: relative;
}

.neo-event-scenes__intro::before {
    content: "";

    position: absolute;

    left: -20px;
    top: clamp(76px, 7vw, 106px);

    width: 2px;
    height: 92px;

    background: var(--r9-red);
}

.neo-event-scene,
.neo-event-scene__frame,
.neo-event-scene__copy {
    background: var(--r9-paper-alt) !important;
}


/* ==========================================================
   2. TANZFLÄCHE = ECHTER FOTO-BREAK
   ========================================================== */

.neo-parallax-break {
    position: relative !important;

    min-height: 78vh !important;

    display: flex !important;
    align-items: flex-end !important;

    padding:
        clamp(65px, 7vw, 105px)
        max(38px, calc((100vw - 1320px) / 2))
        clamp(70px, 7vw, 110px) !important;

    background-image:
        url("/assets/images/events/real/event-setup-stage.jpeg") !important;

    background-size: cover !important;
    background-position: center 48% !important;
    background-repeat: no-repeat !important;

    isolation: isolate;
    overflow: hidden;
}


/* nicht mehr einfach schwarz */

.neo-parallax-break::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            180deg,
            rgba(7,7,7,.08) 0%,
            rgba(7,7,7,.22) 42%,
            rgba(7,7,7,.80) 100%
        ) !important;
}


/* dezenter CI-Farbfilm */

.neo-parallax-break::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(105,15,0,.17),
            transparent 56%
        );

    pointer-events: none;
}


.neo-parallax-break > * {
    position: relative !important;
    z-index: 2 !important;
}


.neo-parallax-break h2,
.neo-parallax-break h3 {
    max-width: 990px !important;

    margin: 0 !important;

    font-size:
        clamp(56px, 7vw, 108px) !important;

    font-weight: 500 !important;

    line-height: .89 !important;
    letter-spacing: -.058em !important;

    color: #fff !important;
}


.neo-parallax-break p {
    max-width: 600px !important;

    margin-top: 27px !important;

    font-size: 15px !important;
    line-height: 1.7 !important;

    color: rgba(255,255,255,.84) !important;
}


/* ==========================================================
   3. WHY – KOMPLETT LESBAR + EIGENE IDENTITÄT
   ========================================================== */

.neo-why {
    position: relative !important;

    min-height: 0 !important;

    padding:
        clamp(90px, 8vw, 130px)
        max(38px, calc((100vw - 1320px) / 2))
        clamp(90px, 8vw, 125px) !important;

    background: var(--r9-paper) !important;
    color: var(--r9-ink) !important;

    overflow: hidden !important;
}


/* 20+ deutlich subtiler */

.neo-why::before {
    content: "20+";

    position: absolute;

    right: clamp(20px, 5vw, 80px);
    top: 32px;

    font-size:
        clamp(130px, 17vw, 270px);

    font-weight: 400;
    line-height: .8;
    letter-spacing: -.085em;

    color: rgba(105,15,0,.035);

    pointer-events: none;
}


/* ==========================================================
   WHY HEAD
   ========================================================== */

.neo-why .neo-section-kicker,
.neo-why .neo-eyebrow,
.neo-why [class*="eyebrow"] {
    position: relative;

    color: #696966 !important;
}


.neo-why h2 {
    position: relative;

    z-index: 2;

    max-width: 790px !important;

    margin:
        0
        0
        clamp(55px, 6vw, 85px) !important;

    font-size:
        clamp(52px, 5.6vw, 84px) !important;

    font-weight: 400 !important;

    line-height: .92 !important;
    letter-spacing: -.055em !important;

    color: var(--r9-ink) !important;
}


/* ==========================================================
   WHY FACTS
   ========================================================== */

.neo-why .neo-card-grid {
    position: relative;

    z-index: 2;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;

    margin: 0 !important;

    border: 0 !important;
}


/* alte Card-Styles vollständig neutralisieren */

.neo-why .neo-card-grid > * {
    position: relative;

    min-height: 245px !important;

    padding:
        32px
        34px
        36px !important;

    margin: 0 !important;

    background: var(--r9-card) !important;

    border:
        1px solid rgba(20,20,20,.09) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    color: var(--r9-ink) !important;

    opacity: 1 !important;
    transform: none !important;
}


/* alle geerbten Weißwerte killen */

.neo-why .neo-card-grid > *,
.neo-why .neo-card-grid > * *,
.neo-why .neo-card-grid h3,
.neo-why .neo-card-grid h4,
.neo-why .neo-card-grid p {
    color: inherit !important;
    opacity: 1 !important;
}


/* Nummern */

.neo-why .neo-card-grid > *::before {
    position: static !important;

    display: block !important;

    margin-bottom: 28px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    letter-spacing: .18em !important;

    color: var(--r9-red) !important;

    opacity: 1 !important;
}


.neo-why .neo-card-grid > *:nth-child(1)::before {
    content: "01";
}

.neo-why .neo-card-grid > *:nth-child(2)::before {
    content: "02";
}

.neo-why .neo-card-grid > *:nth-child(3)::before {
    content: "03";
}

.neo-why .neo-card-grid > *:nth-child(4)::before {
    content: "04";
}


/* Titles */

.neo-why .neo-card-grid h3,
.neo-why .neo-card-grid h4 {
    max-width: 470px;

    margin:
        0
        0
        15px !important;

    font-size:
        clamp(27px, 2.3vw, 37px) !important;

    font-weight: 400 !important;

    line-height: 1.03 !important;
    letter-spacing: -.035em !important;

    color: var(--r9-ink) !important;
}


/* Text */

.neo-why .neo-card-grid p {
    max-width: 455px;

    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.68 !important;

    color: var(--r9-muted) !important;
}


/* ==========================================================
   ERSTE KARTE ALS HERO-FACT
   ========================================================== */

@media (min-width: 900px) {

    .neo-why .neo-card-grid > *:first-child {
        grid-column: span 2;

        min-height: 275px !important;

        padding-right:
            clamp(250px, 28vw, 440px) !important;

        background:
            linear-gradient(
                105deg,
                #fbfaf8 0%,
                #fbfaf8 62%,
                rgba(105,15,0,.055) 100%
            ) !important;
    }


    .neo-why .neo-card-grid > *:first-child::after {
        content: "20+";

        position: absolute;

        right: clamp(35px, 5vw, 80px);
        top: 50%;

        transform: translateY(-50%);

        font-size:
            clamp(90px, 10vw, 150px);

        font-weight: 400;
        line-height: 1;

        letter-spacing: -.07em;

        color: var(--r9-red);

        opacity: .88;

        pointer-events: none;
    }

}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover:hover) {

    .neo-why .neo-card-grid > * {
        transition:
            transform .35s cubic-bezier(.16,1,.3,1),
            background .3s ease,
            border-color .3s ease;
    }


    .neo-why .neo-card-grid > *:hover {
        transform: translateY(-4px) !important;

        border-color:
            rgba(105,15,0,.20) !important;

        background:
            #fff !important;
    }

}


/* ==========================================================
   4. REVIEWS KLAR ABTRENNEN
   ========================================================== */

.neo-reviews,
.neo-reviews--slider {
    position: relative;

    padding-top:
        clamp(80px, 8vw, 120px) !important;

    border-top:
        1px solid rgba(20,20,20,.10) !important;

    background:
        #ece9e4 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .neo-event-scenes__intro::before {
        display: none;
    }


    .neo-parallax-break {
        min-height: 68vh !important;

        padding:
            60px
            22px !important;
    }


    .neo-parallax-break h2,
    .neo-parallax-break h3 {
        font-size:
            clamp(47px, 13vw, 68px) !important;
    }


    .neo-why {
        padding:
            72px
            20px
            82px !important;
    }


    .neo-why::before {
        display: none;
    }


    .neo-why h2 {
        margin-bottom:
            44px !important;

        font-size:
            clamp(45px, 12vw, 59px) !important;
    }


    .neo-why .neo-card-grid {
        grid-template-columns:
            1fr !important;

        gap: 12px !important;
    }


    .neo-why .neo-card-grid > *,
    .neo-why .neo-card-grid > *:first-child {
        grid-column: auto !important;

        min-height: 0 !important;

        padding:
            27px
            24px
            31px !important;
    }


    .neo-why .neo-card-grid > *:first-child::after {
        display: none;
    }


    .neo-reviews,
    .neo-reviews--slider {
        padding-top:
            65px !important;
    }

}


/* ==========================================================
   9GRAD OST · FINAL DETAIL FIXES
   ========================================================== */


/* ----------------------------------------------------------
   1. DEIN ANLASS
   doppelte vertikale Linie entfernen
   ---------------------------------------------------------- */

.neo-event-scenes__intro::before {
    display: none !important;
    content: none !important;
}


/* ----------------------------------------------------------
   2. LETZTE EVENT-SZENE / ÜBERGANG
   keine weiße Kante zwischen Private Events und Folgesektion
   ---------------------------------------------------------- */

.neo-event-scene:last-child {
    margin-bottom: 0 !important;
}

.neo-event-scene:last-child .neo-event-scene__frame {
    margin-bottom: 0 !important;
}

.neo-event-scenes {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.neo-event-scenes + .neo-parallax-break,
.neo-event-scenes ~ .neo-parallax-break {
    margin-top: 0 !important;
}


/* Wenn zwischen beiden noch ein Legacy-Wrapper sitzt */
.neo-event-scenes + section,
.neo-event-scenes + div {
    margin-top: 0;
}


/* ----------------------------------------------------------
   3. WHY
   alte Dark-Theme-Farben endgültig neutralisieren
   ---------------------------------------------------------- */

.neo-why {
    min-height: auto !important;

    padding-top:
        clamp(80px, 7vw, 110px) !important;

    padding-bottom:
        clamp(75px, 7vw, 105px) !important;
}


/* Kopf kompakter */

.neo-why h2 {
    margin-bottom:
        clamp(42px, 4.5vw, 64px) !important;
}


/* 20+ weniger dominant */

.neo-why::before {
    top: 42px !important;

    font-size:
        clamp(115px, 14vw, 220px) !important;

    color:
        rgba(105,15,0,.026) !important;
}


/* Grid */

.neo-why .neo-card-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;

    margin: 0 !important;

    opacity: 1 !important;
}


/*
 * Wichtig:
 * sämtliche alten Weiß-/Dark-Theme-Werte mit
 * höherer Spezifität überschreiben.
 */

html body .neo-why .neo-card-grid > * {
    min-height: 210px !important;

    padding:
        28px
        30px
        32px !important;

    background: #fbfaf8 !important;

    border:
        1px solid rgba(20,20,20,.10) !important;

    color: #171717 !important;

    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;

    text-shadow: none !important;
}


html body .neo-why .neo-card-grid > * *,
html body .neo-why .neo-card-grid h1,
html body .neo-why .neo-card-grid h2,
html body .neo-why .neo-card-grid h3,
html body .neo-why .neo-card-grid h4,
html body .neo-why .neo-card-grid h5,
html body .neo-why .neo-card-grid p,
html body .neo-why .neo-card-grid span,
html body .neo-why .neo-card-grid div {
    color: #171717 !important;

    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;

    text-shadow: none !important;
}


/* Beschreibungen etwas weicher */

html body .neo-why .neo-card-grid p {
    color: #686865 !important;

    font-size: 14px !important;

    line-height: 1.65 !important;
}


/* Überschriften */

html body .neo-why .neo-card-grid h3,
html body .neo-why .neo-card-grid h4 {
    color: #171717 !important;

    font-size:
        clamp(25px, 2vw, 34px) !important;

    line-height: 1.05 !important;

    font-weight: 400 !important;

    margin-bottom: 13px !important;
}


/* Nummern weiter CI-Rot */

html body .neo-why .neo-card-grid > *::before {
    color: #690f00 !important;

    opacity: 1 !important;

    margin-bottom: 22px !important;
}


/* ----------------------------------------------------------
   4. ERSTE WHY-CARD ALS VISUELLER ANKER
   ---------------------------------------------------------- */

@media (min-width: 900px) {

    html body .neo-why .neo-card-grid > *:first-child {
        grid-column: span 2 !important;

        min-height: 225px !important;

        padding-right:
            clamp(230px, 25vw, 390px) !important;

        background:
            linear-gradient(
                100deg,
                #fbfaf8 0%,
                #fbfaf8 64%,
                #f0e8e5 100%
            ) !important;
    }


    html body
    .neo-why
    .neo-card-grid
    > *:first-child::after {

        content: "20+";

        position: absolute;

        right: clamp(32px, 5vw, 72px);
        top: 50%;

        transform: translateY(-50%);

        font-size:
            clamp(82px, 8vw, 128px);

        font-weight: 400;

        line-height: 1;

        letter-spacing: -.07em;

        color: #690f00;

        opacity: .82;

        pointer-events: none;
    }

}


/* ----------------------------------------------------------
   5. ABSTAND WHY -> REVIEWS
   ---------------------------------------------------------- */

.neo-why + .neo-reviews,
.neo-why + .neo-reviews--slider,
.neo-why ~ .neo-reviews,
.neo-why ~ .neo-reviews--slider {
    margin-top: 0 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .neo-why {
        padding:
            68px
            20px
            75px !important;
    }

    .neo-why .neo-card-grid {
        grid-template-columns:
            1fr !important;
    }

    html body
    .neo-why
    .neo-card-grid
    > *:first-child {

        grid-column: auto !important;

        padding:
            27px
            24px
            30px !important;
    }

    html body
    .neo-why
    .neo-card-grid
    > *:first-child::after {

        display: none;
    }

}


/* ==========================================================
   EVENT SCENES → NÄCHSTER BLOCK
   kontrollierte Atempause
   ========================================================== */

.neo-event-scenes {
    padding-bottom:
        clamp(38px, 3.2vw, 54px) !important;
}


/* letzte Event-Scene selbst ohne zusätzlichen Doppelabstand */

.neo-event-scene:last-child {
    margin-bottom: 0 !important;
}


/* Parallax-/Folgeblock beginnt anschließend sauber */

.neo-event-scenes + .neo-parallax-break,
.neo-event-scenes ~ .neo-parallax-break {
    margin-top: 0 !important;
}


@media (max-width: 760px) {

    .neo-event-scenes {
        padding-bottom: 28px !important;
    }

}


/* ==========================================================
   PARALLAX BREAK · ruhig, hochwertig, leicht transparent
   ========================================================== */

.neo-parallax-break {
    position: relative !important;

    min-height: 78vh !important;

    overflow: hidden !important;

    background-image: none !important;

    background-color: #111 !important;
}


/* eigenes bewegtes Bild-Layer */

.neo-parallax-break::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    top: -10% !important;

    height: 120% !important;

    z-index: 0 !important;

    background-image:
        url("/assets/images/events/real/event-setup-stage.jpeg") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform:
        translate3d(
            0,
            var(--neo-parallax-y, 0px),
            0
        )
        scale(1.03);

    will-change: transform;

    filter:
        saturate(.82)
        contrast(.96)
        brightness(.72);

    opacity: .82 !important;
}


/* dunkler Verlauf für Lesbarkeit */

.neo-parallax-break::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(10,10,10,.10) 0%,
            rgba(10,10,10,.26) 42%,
            rgba(10,10,10,.72) 100%
        );

    pointer-events: none;
}


/* Content über dem Bild */

.neo-parallax-break > * {
    position: relative !important;
    z-index: 2 !important;
}


/* etwas eleganter */

.neo-parallax-break h2,
.neo-parallax-break h3 {
    max-width: 980px !important;

    text-wrap: balance;

    text-shadow:
        0 2px 24px rgba(0,0,0,.15);
}


.neo-parallax-break p {
    max-width: 570px !important;

    color:
        rgba(255,255,255,.84) !important;
}


/* etwas Luft oben/unten */

.neo-event-scenes {
    padding-bottom:
        clamp(46px, 3.4vw, 62px) !important;
}

.neo-parallax-break {
    margin-top: 0 !important;
    margin-bottom:
        clamp(42px, 3vw, 58px) !important;
}


/* Mobile deutlich ruhiger */

@media (max-width: 760px) {

    .neo-parallax-break {
        min-height: 66vh !important;
    }

    .neo-parallax-break::before {
        top: -5% !important;
        height: 110% !important;

        transform:
            translate3d(
                0,
                calc(var(--neo-parallax-y, 0px) * .35),
                0
            )
            scale(1.02);
    }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .neo-parallax-break::before {
        transform:
            scale(1.03) !important;
    }

}


/* ==========================================================
   ECHTER PARALLAX BREAK
   ========================================================== */

.neo-parallax-break {
    position: relative !important;
    overflow: hidden !important;

    background: #111 !important;
    background-image: none !important;
}


/*
 * Das Bild ist absichtlich deutlich höher als die Section.
 * Dadurch haben wir Raum, es beim Scrollen gegenläufig
 * zu verschieben.
 */

.neo-parallax-break::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    top: -18% !important;

    width: 100% !important;
    height: 136% !important;

    z-index: 0 !important;

    background-image:
        url("/assets/images/events/real/event-setup-stage.jpeg") !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;

    transform:
        translate3d(
            0,
            var(--r9-parallax-y, 0px),
            0
        )
        scale(1.04) !important;

    transform-origin: center center !important;

    will-change: transform !important;

    opacity: .78 !important;

    filter:
        saturate(.82)
        brightness(.73)
        contrast(.98) !important;
}


/* Overlay liegt getrennt über dem bewegten Bild */

.neo-parallax-break::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(8,8,8,.08) 0%,
            rgba(8,8,8,.22) 45%,
            rgba(8,8,8,.72) 100%
        ) !important;

    pointer-events: none;
}


.neo-parallax-break > * {
    position: relative !important;
    z-index: 2 !important;
}


/* Mobile: geringerer Effekt */

@media (max-width: 760px) {

    .neo-parallax-break::before {
        top: -10% !important;
        height: 120% !important;
    }

}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

    .neo-parallax-break::before {
        transform:
            scale(1.04) !important;
    }

}


/* ==========================================================
   9GRAD OST · WHY BLOCK V3
   FINAL OVERRIDE
   ========================================================== */

html body .neo-why {
    position: relative !important;

    min-height: 0 !important;

    padding:
        clamp(82px, 7vw, 115px)
        max(38px, calc((100vw - 1280px) / 2))
        clamp(82px, 7vw, 110px) !important;

    background: #eeeae5 !important;

    color: #171717 !important;

    overflow: hidden !important;
}


/* ----------------------------------------------------------
   alten riesigen 20+ Hintergrund entfernen
   ---------------------------------------------------------- */

html body .neo-why::before {
    display: none !important;
    content: none !important;
}


/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

html body .neo-why h2 {
    max-width: 800px !important;

    margin:
        0
        0
        clamp(50px, 5vw, 72px) !important;

    font-size:
        clamp(52px, 5.5vw, 82px) !important;

    font-weight: 400 !important;

    line-height: .92 !important;
    letter-spacing: -.055em !important;

    color: #171717 !important;

    opacity: 1 !important;
}


/* Eyebrow */

html body .neo-why .neo-section-kicker,
html body .neo-why .neo-eyebrow,
html body .neo-why [class*="eyebrow"] {
    color: #666863 !important;
    opacity: 1 !important;
}


/* ==========================================================
   GRID
   ========================================================== */

html body .neo-why .neo-card-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    opacity: 1 !important;

    filter: none !important;

    transform: none !important;
}


/* ==========================================================
   ALLE CARDS RESETTEN
   ========================================================== */

html body .neo-why .neo-card-grid > * {
    position: relative !important;

    min-height: 240px !important;

    margin: 0 !important;

    padding:
        30px
        30px
        34px !important;

    background: #faf9f7 !important;

    border:
        1px solid rgba(20,20,20,.10) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;

    transform: none !important;

    color: #171717 !important;
}


/*
 * ALLE Legacy-Farben / Opacity-Werte darunter killen.
 */

html body .neo-why .neo-card-grid > * *,
html body .neo-why .neo-card-grid > * div,
html body .neo-why .neo-card-grid > * span,
html body .neo-why .neo-card-grid > * strong,
html body .neo-why .neo-card-grid > * h1,
html body .neo-why .neo-card-grid > * h2,
html body .neo-why .neo-card-grid > * h3,
html body .neo-why .neo-card-grid > * h4,
html body .neo-why .neo-card-grid > * h5,
html body .neo-why .neo-card-grid > * p {
    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;

    text-shadow: none !important;
}


/* ==========================================================
   ERSTE CARD = HERO FACT
   ========================================================== */

html body .neo-why .neo-card-grid > *:first-child {
    grid-column: 1 / -1 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    min-height: 270px !important;

    padding:
        clamp(34px, 4vw, 54px)
        clamp(34px, 4vw, 58px) !important;

    background: #690f00 !important;

    border-color: #690f00 !important;

    color: #fff !important;
}


/* erste Card Text weiß */

html body
.neo-why
.neo-card-grid
> *:first-child * {
    color: #fff !important;
}


/* große 20+ rechts */

html body
.neo-why
.neo-card-grid
> *:first-child::after {
    content: "20+";

    position: absolute;

    right:
        clamp(30px, 5vw, 70px);

    top: 50%;

    transform:
        translateY(-50%);

    font-size:
        clamp(90px, 10vw, 155px);

    font-weight: 400;

    line-height: .8;

    letter-spacing: -.08em;

    color:
        rgba(255,255,255,.16);

    pointer-events: none;
}


/* ==========================================================
   NUMMERN
   ========================================================== */

html body
.neo-why
.neo-card-grid
> *::before {
    position: static !important;

    display: block !important;

    margin:
        0
        0
        27px !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .18em !important;

    color: #690f00 !important;

    opacity: 1 !important;
}


html body
.neo-why
.neo-card-grid
> *:first-child::before {
    color:
        rgba(255,255,255,.72) !important;
}


html body .neo-why .neo-card-grid > *:nth-child(1)::before {
    content: "01";
}

html body .neo-why .neo-card-grid > *:nth-child(2)::before {
    content: "02";
}

html body .neo-why .neo-card-grid > *:nth-child(3)::before {
    content: "03";
}

html body .neo-why .neo-card-grid > *:nth-child(4)::before {
    content: "04";
}


/* ==========================================================
   TITEL
   ========================================================== */

html body
.neo-why
.neo-card-grid
h3,

html body
.neo-why
.neo-card-grid
h4 {
    max-width: 440px !important;

    margin:
        0
        0
        14px !important;

    font-size:
        clamp(26px, 2.3vw, 36px) !important;

    font-weight: 400 !important;

    line-height: 1.04 !important;

    letter-spacing: -.035em !important;

    color: #171717 !important;
}


/* erste Card größer */

html body
.neo-why
.neo-card-grid
> *:first-child h3,

html body
.neo-why
.neo-card-grid
> *:first-child h4 {
    max-width: 560px !important;

    font-size:
        clamp(34px, 3.3vw, 49px) !important;

    color: #fff !important;
}


/* ==========================================================
   TEXTE
   ========================================================== */

html body
.neo-why
.neo-card-grid
p {
    max-width: 440px !important;

    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.68 !important;

    color: #696966 !important;
}


/* Hero Text */

html body
.neo-why
.neo-card-grid
> *:first-child p {
    max-width: 600px !important;

    color:
        rgba(255,255,255,.78) !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover:hover) {

    html body
    .neo-why
    .neo-card-grid
    > *:not(:first-child) {

        transition:
            transform .35s cubic-bezier(.16,1,.3,1),
            background .3s ease,
            border-color .3s ease !important;
    }


    html body
    .neo-why
    .neo-card-grid
    > *:not(:first-child):hover {

        transform:
            translateY(-5px) !important;

        background:
            #fff !important;

        border-color:
            rgba(105,15,0,.26) !important;
    }

}


/* ==========================================================
   WHY -> REVIEWS
   ========================================================== */

html body .neo-why + .neo-reviews,
html body .neo-why + .neo-reviews--slider {
    margin-top: 0 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1000px) {

    html body
    .neo-why
    .neo-card-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    html body
    .neo-why
    .neo-card-grid
    > *:first-child {

        grid-column:
            1 / -1 !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    html body .neo-why {
        padding:
            70px
            20px
            78px !important;
    }


    html body .neo-why h2 {
        font-size:
            clamp(45px, 12vw, 59px) !important;

        margin-bottom:
            42px !important;
    }


    html body
    .neo-why
    .neo-card-grid {

        grid-template-columns:
            1fr !important;

        gap: 11px !important;
    }


    html body
    .neo-why
    .neo-card-grid
    > * {

        min-height: 0 !important;

        padding:
            27px
            24px
            30px !important;
    }


    html body
    .neo-why
    .neo-card-grid
    > *:first-child {

        display: block !important;

        grid-column:
            auto !important;

        min-height: 0 !important;

        padding:
            31px
            25px
            35px !important;
    }


    html body
    .neo-why
    .neo-card-grid
    > *:first-child::after {

        display: none !important;
    }

}


/* ==========================================================
   PARALLAX → WHY
   kein weißer Legacy-Abstand mehr
   ========================================================== */

.neo-parallax-break {
    margin-bottom: 0 !important;
}

.neo-parallax-break + .r9-why-v6,
.r9-why-v6 {
    margin-top: 0 !important;
}


/*
 * Falls der alte Abstand über einen Wrapper entsteht:
 * Hintergrund bis zum WHY sauber fortführen.
 */

.neo-parallax-break + section.r9-why-v6 {
    border-top: 0 !important;
}



/* ==========================================================
   PARALLAX BREAK · kompakter
   ========================================================== */

.neo-parallax-break {
    min-height: 64vh !important;

    padding:
        clamp(48px, 5vw, 72px)
        max(38px, calc((100vw - 1320px) / 2))
        clamp(52px, 5vw, 78px) !important;
}


/* Bild-Layer passend zur geringeren Höhe */

.neo-parallax-break::before {
    top: -14% !important;
    height: 128% !important;
}


/* Text etwas kompakter */

.neo-parallax-break h2,
.neo-parallax-break h3 {
    max-width: 900px !important;

    font-size:
        clamp(54px, 6.2vw, 94px) !important;
}

.neo-parallax-break p {
    max-width: 560px !important;
}


/* Tablet */

@media (max-width: 1000px) {

    .neo-parallax-break {
        min-height: 60vh !important;
    }

}


/* Mobile */

@media (max-width: 760px) {

    .neo-parallax-break {
        min-height: 56vh !important;

        padding:
            46px
            22px
            52px !important;
    }

    .neo-parallax-break::before {
        top: -9% !important;
        height: 118% !important;
    }

}


/* ==========================================================
   PARALLAX BREAK · FLACHER CINEMATIC STRIP
   ========================================================== */

.neo-parallax-break {
    min-height: 50vh !important;
    height: 50vh !important;

    padding:
        clamp(34px, 3vw, 50px)
        max(38px, calc((100vw - 1320px) / 2))
        clamp(38px, 3.5vw, 54px) !important;

    display: flex !important;
    align-items: flex-end !important;

    overflow: hidden !important;
}


/*
 * Bild intern deutlich höher als die sichtbare Section:
 * genau dadurch bleibt genug Weg für echten Parallax.
 */

.neo-parallax-break::before {
    top: -28% !important;
    height: 156% !important;

    background-position:
        center 48% !important;
}


/* Headline auf die flachere Bühne abstimmen */

.neo-parallax-break h2,
.neo-parallax-break h3 {
    max-width: 820px !important;

    font-size:
        clamp(48px, 5.2vw, 78px) !important;

    line-height: .91 !important;
}


/* Text kompakter */

.neo-parallax-break p {
    max-width: 540px !important;

    margin-top: 18px !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* Tablet */

@media (max-width: 1000px) {

    .neo-parallax-break {
        min-height: 52vh !important;
        height: 52vh !important;
    }

}


/* Mobile */

@media (max-width: 760px) {

    .neo-parallax-break {
        min-height: 58vh !important;
        height: 58vh !important;

        padding:
            36px
            22px
            42px !important;
    }

    .neo-parallax-break::before {
        top: -18% !important;
        height: 136% !important;
    }

    .neo-parallax-break h2,
    .neo-parallax-break h3 {
        font-size:
            clamp(43px, 11.5vw, 58px) !important;
    }

}


/* ==========================================================
   HERO · kompakter und moderner
   ========================================================== */

.neo-hero--editorial {
    min-height: 80vh !important;
    height: 80vh !important;
}


/* Inhalt etwas enger setzen */

.neo-hero--editorial .neo-hero__content {
    padding-top: 42px !important;
    padding-bottom: 34px !important;
}


/* Headline leicht kompakter */

.neo-hero--editorial h1 {
    font-size:
        clamp(56px, 5.8vw, 92px) !important;

    line-height: .94 !important;
}


/* Beschreibung näher an die Headline */

.neo-hero--editorial .neo-hero__text,
.neo-hero--editorial .neo-hero__copy {
    margin-top: 22px !important;
}


/* CTA-Block kompakter */

.neo-hero--editorial .neo-hero__actions {
    margin-top: 24px !important;
}


/* Rating näher an die Buttons */

.neo-hero--editorial .neo-hero__rating {
    margin-top: 22px !important;
}


/* USP-Zeile höher ziehen */

.neo-hero--editorial .neo-hero__meta {
    bottom: 48px !important;
}


/* Tablet */

@media (max-width: 1100px) {

    .neo-hero--editorial {
        min-height: 82vh !important;
        height: auto !important;
    }

}


/* Mobile bewusst nicht zu knapp */

@media (max-width: 760px) {

    .neo-hero--editorial {
        min-height: auto !important;
        height: auto !important;
    }

}


/* ==========================================================
   HERO · FINAL COMPACT DESKTOP
   ========================================================== */

@media (min-width: 1101px) {

    .neo-hero--editorial {
        height: clamp(590px, 62vh, 660px) !important;
        min-height: 590px !important;
        max-height: 660px !important;

        overflow: hidden !important;
    }


    /* Content etwas höher und kompakter */

    .neo-hero--editorial .neo-hero__content {
        padding-top: 32px !important;
        padding-bottom: 24px !important;
    }


    /* Headline minimal kleiner */

    .neo-hero--editorial h1 {
        max-width: 760px !important;

        font-size:
            clamp(54px, 5.2vw, 82px) !important;

        line-height: .93 !important;
    }


    /* Beschreibung */

    .neo-hero--editorial .neo-hero__text,
    .neo-hero--editorial .neo-hero__copy {
        margin-top: 18px !important;
    }


    /* Buttons */

    .neo-hero--editorial .neo-hero__actions {
        margin-top: 19px !important;
    }


    /* Rating */

    .neo-hero--editorial .neo-hero__rating {
        margin-top: 16px !important;
    }


    /* USP-Zeile deutlich dichter an Rating */

    .neo-hero--editorial .neo-hero__meta {
        bottom: 20px !important;
    }

}


/* etwas kleinere Notebooks */

@media (min-width: 1101px) and (max-height: 850px) {

    .neo-hero--editorial {
        height: 580px !important;
        min-height: 580px !important;
    }

}


/* ==========================================================
   PARALLAX · neues hochwertigeres Motiv
   ========================================================== */

.neo-parallax-break::before {
    background-image:
        url("/assets/images/events/real/event-setup-wedding.jpeg") !important;

    background-position:
        center 54% !important;

    filter:
        saturate(.88)
        brightness(.72)
        contrast(.98) !important;
}



/* ==========================================================
   9GRAD OST · HERO V3
   Editorial Split
   ========================================================== */

@media (min-width: 1101px) {

    .neo-hero--editorial {
        position: relative !important;

        height: auto !important;
        min-height: 610px !important;
        max-height: none !important;

        overflow: hidden !important;

        display: flex !important;
        align-items: center !important;
    }


    /* ------------------------------------------------------
       Hintergrund etwas moderner / ruhiger
       ------------------------------------------------------ */

    .neo-hero--editorial::before {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                90deg,
                rgba(10,10,10,.66) 0%,
                rgba(10,10,10,.48) 42%,
                rgba(10,10,10,.17) 72%,
                rgba(10,10,10,.10) 100%
            );

        pointer-events: none;
    }


    /* ------------------------------------------------------
       Hauptinhalt
       ------------------------------------------------------ */

    .neo-hero--editorial .neo-hero__content {
        position: relative !important;

        z-index: 3 !important;

        width: min(1320px, calc(100% - 80px)) !important;

        margin:
            0
            auto !important;

        padding:
            62px
            360px
            72px
            0 !important;
    }


    /* ------------------------------------------------------
       Eyebrow
       ------------------------------------------------------ */

    .neo-hero--editorial .neo-hero__eyebrow {
        margin-bottom: 22px !important;
    }


    /* ------------------------------------------------------
       Headline
       ------------------------------------------------------ */

    .neo-hero--editorial h1 {
        max-width: 800px !important;

        margin: 0 !important;

        font-size:
            clamp(60px, 5.4vw, 86px) !important;

        line-height: .91 !important;

        letter-spacing: -.055em !important;

        text-wrap: balance;
    }


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

    .neo-hero--editorial .neo-hero__text,
    .neo-hero--editorial .neo-hero__copy {
        max-width: 640px !important;

        margin-top: 25px !important;

        font-size: 15px !important;

        line-height: 1.65 !important;
    }


    /* ------------------------------------------------------
       CTAs
       ------------------------------------------------------ */

    .neo-hero--editorial .neo-hero__actions {
        display: flex !important;

        gap: 12px !important;

        margin-top: 26px !important;
    }


    /* ======================================================
       RECHTE INFO-RAIL
       Rating + USPs raus aus dem vertikalen Contentfluss
       ====================================================== */

    .neo-hero--editorial .neo-hero__rating {
        position: absolute !important;

        right: 0 !important;
        top: 82px !important;

        width: 275px !important;

        margin: 0 !important;

        padding:
            0
            0
            25px !important;

        border-bottom:
            1px solid rgba(255,255,255,.28) !important;
    }


    .neo-hero--editorial .neo-hero__meta {
        position: absolute !important;

        right: 0 !important;
        top: 190px !important;
        bottom: auto !important;

        width: 275px !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 0 !important;

        margin: 0 !important;

        border-top: 0 !important;
    }


    .neo-hero--editorial .neo-hero__meta > * {
        padding:
            17px
            0 !important;

        border-bottom:
            1px solid rgba(255,255,255,.18) !important;
    }


    /* Nummerierung / kleine Akzente vor den Facts */

    .neo-hero--editorial .neo-hero__meta > *::before {
        display: inline-block;

        margin-right: 11px;

        font-size: 9px;

        font-weight: 700;

        letter-spacing: .18em;

        color:
            rgba(255,255,255,.50);
    }

    .neo-hero--editorial .neo-hero__meta > *:nth-child(1)::before {
        content: "01";
    }

    .neo-hero--editorial .neo-hero__meta > *:nth-child(2)::before {
        content: "02";
    }

    .neo-hero--editorial .neo-hero__meta > *:nth-child(3)::before {
        content: "03";
    }


    /* ------------------------------------------------------
       kein alter Hero-Meta-Balken mehr unten
       ------------------------------------------------------ */

    .neo-hero--editorial .neo-hero__meta::before,
    .neo-hero--editorial .neo-hero__meta::after {
        display: none !important;
    }

}


/* ==========================================================
   WIDESCREEN
   ========================================================== */

@media (min-width: 1500px) {

    .neo-hero--editorial {
        min-height: 630px !important;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 761px) and (max-width: 1100px) {

    .neo-hero--editorial {
        height: auto !important;

        min-height: 620px !important;
    }

}


/* ==========================================================
   MOBILE
   bewusst klassischer Flow
   ========================================================== */

@media (max-width: 760px) {

    .neo-hero--editorial {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    .neo-hero--editorial .neo-hero__content {
        padding:
            48px
            20px
            46px !important;
    }

    .neo-hero--editorial .neo-hero__rating,
    .neo-hero--editorial .neo-hero__meta {
        position: static !important;

        width: 100% !important;
    }

}


/* ==========================================================
   MARQUEE DIREKT AN HERO
   ========================================================== */

.neo-hero--editorial + .neo-motion-marquee,
.neo-motion-marquee {
    margin-top: 0 !important;
}