/* ==========================================================
   9 GRAD OST · HOME HERO V5
   vollständig isoliert von Legacy / neo-hero
   ========================================================== */

.r9-home-hero,
.r9-home-hero * {
    box-sizing: border-box;

    hyphens: none !important;
    word-break: normal !important;
}

.r9-home-hero {
    --red: #690f00;

    position: relative;

    width: 100%;
    height: 560px;
    min-height: 560px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-image: var(--r9-hero-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 54%;

    color: #fff;
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.r9-home-hero__shade {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(10,10,10,.78) 0%,
            rgba(10,10,10,.64) 33%,
            rgba(10,10,10,.32) 61%,
            rgba(10,10,10,.10) 100%
        );
}

.r9-home-hero__shade::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 36%;

    background:
        linear-gradient(
            to top,
            rgba(8,8,8,.36),
            transparent
        );
}


/* ==========================================================
   LAYOUT
   ========================================================== */

.r9-home-hero__inner {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;

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

    margin: 0 auto;
}


.r9-home-hero__content {
    width: min(790px, 67%);

    transform: translateY(-3px);
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.r9-home-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

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

    line-height: 1;

    letter-spacing: .20em;

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

.r9-home-hero__eyebrow > span {
    width: 35px;
    height: 1px;

    background: var(--red);
}


/* ==========================================================
   HEADLINE
   ========================================================== */

.r9-home-hero h1 {
    margin: 0;

    font-size:
        clamp(55px, 4.45vw, 72px);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.052em;

    color: #fff;
}

.r9-home-hero h1 > span {
    display: block;
}

.r9-home-hero h1 > span + span {
    margin-top: 9px;
}


/* kleine CI-Linie nach Headline */

.r9-home-hero h1::after {
    content: "";

    display: block;

    width: 58px;
    height: 3px;

    margin-top: 20px;

    background: var(--red);
}


/* ==========================================================
   COPY
   ========================================================== */

.r9-home-hero__lead {
    max-width: 625px;

    margin:
        18px
        0
        0;

    font-size: 14px;

    line-height: 1.55;

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


/* ==========================================================
   BOTTOM ROW
   ========================================================== */

.r9-home-hero__bottom {
    display: flex;
    align-items: center;

    gap: 30px;

    margin-top: 22px;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.r9-home-hero__actions {
    display: flex;

    gap: 10px;

    flex-shrink: 0;
}


.r9-home-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    min-height: 48px;

    padding:
        0
        23px;

    border: 1px solid rgba(255,255,255,.65);

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .01em;

    text-transform: uppercase;

    text-decoration: none !important;

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


.r9-home-hero__button--primary {
    background: var(--red);

    border-color: var(--red);

    color: #fff !important;
}


.r9-home-hero__button--ghost {
    background: rgba(255,255,255,.04);

    color: #fff !important;

    backdrop-filter: blur(5px);
}


@media (hover:hover) {

    .r9-home-hero__button:hover {
        transform: translateY(-2px);
    }

    .r9-home-hero__button--primary:hover {
        background: #541000;

        border-color: #541000;
    }

    .r9-home-hero__button--ghost:hover {
        background: rgba(255,255,255,.12);
    }

}


/* ==========================================================
   GOOGLE RATING
   ========================================================== */

.r9-home-hero__rating {
    display: flex;
    align-items: center;

    gap: 12px;

    padding-left: 2px;
}


.r9-home-hero__stars {
    font-size: 11px;

    letter-spacing: .08em;

    white-space: nowrap;

    color: #fff;
}


.r9-home-hero__rating strong,
.r9-home-hero__rating span {
    display: block;
}


.r9-home-hero__rating strong {
    margin-bottom: 3px;

    font-size: 11px;

    color: #fff;
}


.r9-home-hero__rating span {
    font-size: 10px;

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


/* ==========================================================
   20+ STAMP
   moderner, aber sehr dezent
   ========================================================== */

.r9-home-hero__stamp {
    position: absolute;

    right: 0;
    bottom: 48px;

    display: flex;
    align-items: baseline;

    gap: 12px;

    opacity: .52;
}


.r9-home-hero__stamp strong {
    font-size: 45px;

    font-weight: 400;

    line-height: .8;

    letter-spacing: -.07em;

    color: #fff;
}


.r9-home-hero__stamp span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

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


/* ==========================================================
   NOTEBOOK / NIEDRIGE DISPLAYS
   ========================================================== */

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

    .r9-home-hero {
        height: 510px;
        min-height: 510px;
    }

    .r9-home-hero h1 {
        font-size:
            clamp(51px, 4vw, 65px);
    }

    .r9-home-hero__eyebrow {
        margin-bottom: 16px;
    }

    .r9-home-hero h1::after {
        margin-top: 16px;
    }

    .r9-home-hero__lead {
        margin-top: 15px;
    }

    .r9-home-hero__bottom {
        margin-top: 18px;
    }

}


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

@media (max-width: 1100px) {

    .r9-home-hero {
        height: auto;
        min-height: 570px;
    }

    .r9-home-hero__inner {
        width: min(100% - 48px, 900px);

        padding:
            60px
            0;
    }

    .r9-home-hero__content {
        width: min(720px, 85%);
    }

    .r9-home-hero__stamp {
        display: none;
    }

}


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

@media (max-width: 760px) {

    .r9-home-hero {
        min-height: 0;

        background-position: 58% center;
    }

    .r9-home-hero__shade {
        background:
            linear-gradient(
                90deg,
                rgba(10,10,10,.80),
                rgba(10,10,10,.48)
            );
    }

    .r9-home-hero__inner {
        display: block;

        width: 100%;

        padding:
            48px
            20px
            46px;
    }

    .r9-home-hero__content {
        width: 100%;

        transform: none;
    }

    .r9-home-hero h1 {
        font-size:
            clamp(44px, 12vw, 59px);

        line-height: .95;
    }

    .r9-home-hero__lead {
        max-width: none;
    }

    .r9-home-hero__bottom {
        display: block;
    }

    .r9-home-hero__actions {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }

    .r9-home-hero__button {
        width: 100%;

        min-height: 54px;
    }

    .r9-home-hero__rating {
        margin-top: 23px;
    }

}


/* ==========================================================
   HERO V5 · FINAL POLISH
   ========================================================== */


/* ----------------------------------------------------------
   Headline wirklich weiß
   alte globale/span-Regeln zuverlässig überschreiben
   ---------------------------------------------------------- */

html body .r9-home-hero h1,
html body .r9-home-hero h1 span {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* ----------------------------------------------------------
   Content etwas tiefer
   ---------------------------------------------------------- */

@media (min-width: 1101px) {

    .r9-home-hero__content {
        transform: translateY(18px) !important;
    }

}


/* ----------------------------------------------------------
   Eyebrow klarer und etwas mehr Luft
   ---------------------------------------------------------- */

.r9-home-hero__eyebrow {
    margin-bottom: 22px !important;

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


/* ----------------------------------------------------------
   Headline etwas kontrollierter
   ---------------------------------------------------------- */

@media (min-width: 1101px) {

    .r9-home-hero h1 {
        max-width: 735px !important;

        font-size:
            clamp(54px, 4.25vw, 69px) !important;

        line-height: .94 !important;
    }

}


/* ----------------------------------------------------------
   Copy dichter anbinden
   ---------------------------------------------------------- */

.r9-home-hero__lead {
    margin-top: 17px !important;
}


/* ----------------------------------------------------------
   Bottom Row sauber ausrichten
   ---------------------------------------------------------- */

.r9-home-hero__bottom {
    align-items: center !important;

    margin-top: 20px !important;
}


/* Google Rating etwas ruhiger */

.r9-home-hero__rating {
    gap: 10px !important;

    opacity: .92;
}


/* ----------------------------------------------------------
   20+ aus Hero entfernen
   gehört in WHY-Block und wirkt hier doppelt
   ---------------------------------------------------------- */

.r9-home-hero__stamp {
    display: none !important;
}


/* ----------------------------------------------------------
   Hero-Bild
   Bühne stärker ins Zentrum
   ---------------------------------------------------------- */

.r9-home-hero {
    background-position: center 48% !important;
}


/* ----------------------------------------------------------
   Marquee nach dem kompakteren Hero ebenfalls reduzieren
   ---------------------------------------------------------- */

.neo-motion-marquee {
    min-height: 94px !important;
    height: 94px !important;
}

.neo-motion-marquee__track,
.neo-motion-marquee__inner {
    min-height: 94px !important;
    height: 94px !important;
}

.neo-motion-marquee__item {
    font-size:
        clamp(30px, 3.2vw, 48px) !important;
}


/* ==========================================================
   NOTEBOOK
   ========================================================== */

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

    .r9-home-hero__content {
        transform: translateY(10px) !important;
    }

}


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

@media (max-width: 760px) {

    .r9-home-hero__content {
        transform: none !important;
    }

    .neo-motion-marquee {
        height: 72px !important;
        min-height: 72px !important;
    }

    .neo-motion-marquee__track,
    .neo-motion-marquee__inner {
        height: 72px !important;
        min-height: 72px !important;
    }

}


/* ==========================================================
   MARQUEE · vertikal sauber
   ========================================================== */

.neo-motion-marquee {
    height: auto !important;
    min-height: 96px !important;

    overflow: hidden !important;

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

    padding:
        18px
        0
        20px !important;
}


.neo-motion-marquee__track,
.neo-motion-marquee__inner {
    height: auto !important;
    min-height: 0 !important;

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


.neo-motion-marquee__item {
    display: flex !important;
    align-items: center !important;

    line-height: .92 !important;

    padding:
        .08em
        0
        .14em !important;

    overflow: visible !important;
}


/* Mobile */

@media (max-width: 760px) {

    .neo-motion-marquee {
        min-height: 76px !important;

        padding:
            14px
            0
            16px !important;
    }

}


/* ==========================================================
   HERO V6 · CINEMATIC IMAGE SEQUENCE
   ========================================================== */

.r9-home-hero {
    background-image: none !important;
}


/* Bildcontainer */

.r9-home-hero__media {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    background: #111;
}


/* Einzelne Slides */

.r9-home-hero__slide {
    position: absolute;
    inset: -3%;

    background-image: var(--hero-image);
    background-size: cover;

    background-position:
        var(--hero-x, 50%)
        var(--hero-y, 50%);

    background-repeat: no-repeat;

    opacity: 0;

    transform:
        scale(1.06)
        translate3d(0,0,0);

    transition:
        opacity 1.65s cubic-bezier(.22,.61,.36,1);

    will-change:
        opacity,
        transform;
}


/* aktiver Slide */

.r9-home-hero__slide.is-active {
    opacity: 1;

    animation:
        r9HeroKenBurns 7.4s
        cubic-bezier(.22,.61,.36,1)
        both;
}


/* alternierende Bewegungsrichtungen */

.r9-home-hero__slide:nth-child(2).is-active {
    animation-name:
        r9HeroKenBurnsAlt;
}

.r9-home-hero__slide:nth-child(3).is-active {
    animation-name:
        r9HeroKenBurnsThird;
}


/* Filmische Bewegung */

@keyframes r9HeroKenBurns {

    0% {
        transform:
            scale(1.045)
            translate3d(-.4%, .3%, 0);
    }

    100% {
        transform:
            scale(1.115)
            translate3d(.8%, -.4%, 0);
    }
}


@keyframes r9HeroKenBurnsAlt {

    0% {
        transform:
            scale(1.055)
            translate3d(.5%, -.2%, 0);
    }

    100% {
        transform:
            scale(1.12)
            translate3d(-.7%, .4%, 0);
    }
}


@keyframes r9HeroKenBurnsThird {

    0% {
        transform:
            scale(1.05)
            translate3d(-.3%, -.3%, 0);
    }

    100% {
        transform:
            scale(1.11)
            translate3d(.5%, .5%, 0);
    }
}


/* Overlay muss über den Bildern, aber unter Content liegen */

.r9-home-hero__shade {
    z-index: 1 !important;
}

.r9-home-hero__inner {
    z-index: 2 !important;
}


/* Etwas stärkeres Gradient für Kai-Bilder mit hellen Flächen */

.r9-home-hero__shade {
    background:
        linear-gradient(
            90deg,
            rgba(8,8,8,.78) 0%,
            rgba(8,8,8,.62) 34%,
            rgba(8,8,8,.30) 62%,
            rgba(8,8,8,.14) 100%
        ) !important;
}


/* ----------------------------------------------------------
   Mobile Bildpositionen
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .r9-home-hero__slide {
        inset: -2%;

        background-size: cover;
    }

    .r9-home-hero__slide:nth-child(1) {
        background-position: 55% 48%;
    }

    .r9-home-hero__slide:nth-child(2) {
        background-position: 56% 52%;
    }

    .r9-home-hero__slide:nth-child(3) {
        background-position: 61% 48%;
    }

}


/* ----------------------------------------------------------
   Reduced Motion
   ---------------------------------------------------------- */

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

    .r9-home-hero__slide {
        animation: none !important;
        transform: none !important;
        transition-duration: .4s !important;
    }

}


/* ==========================================================
   HERO V6 · FACE SAFE / SANFTER KEN BURNS
   ========================================================== */

.r9-home-hero__slide {
    background-position:
        var(--hero-x, 50%)
        var(--hero-y, 50%) !important;

    transform:
        scale(var(--hero-scale, 1.025))
        translate3d(0,0,0) !important;
}


/* aktiver Slide nicht mehr so stark reinzoomen */

.r9-home-hero__slide.is-active {
    animation:
        r9HeroKenBurnsSafe 7.4s
        ease-in-out
        both !important;
}


@keyframes r9HeroKenBurnsSafe {

    0% {
        transform:
            scale(var(--hero-scale, 1.025))
            translate3d(0,0,0);
    }

    100% {
        transform:
            scale(
                calc(
                    var(--hero-scale, 1.025)
                    + .018
                )
            )
            translate3d(.25%, -.15%, 0);
    }
}


/* ==========================================================
   PRO SLIDE FEINJUSTIERUNG
   ========================================================== */

/* Kai am DJ-Pult */

.r9-home-hero__slide:nth-child(1) {
    background-position: 56% 22% !important;
}


/* Hochzeitsszene */

.r9-home-hero__slide:nth-child(2) {
    background-position: 50% 48% !important;
}


/* Kai mit Mikro */

.r9-home-hero__slide:nth-child(3) {
    background-position: 58% 18% !important;
}


/* ==========================================================
   MOBILE
   noch stärker auf Gesichter achten
   ========================================================== */

@media (max-width: 760px) {

    .r9-home-hero__slide:nth-child(1) {
        background-position: 62% 18% !important;
    }

    .r9-home-hero__slide:nth-child(2) {
        background-position: 54% 50% !important;
    }

    .r9-home-hero__slide:nth-child(3) {
        background-position: 64% 14% !important;
    }

}


/* ==========================================================
   HERO · minimal mehr Höhe
   ========================================================== */

@media (min-width: 1101px) {

    .r9-home-hero {
        height: 580px !important;
        min-height: 580px !important;
    }

}


/* niedrige Notebook-Displays ebenfalls etwas großzügiger */

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

    .r9-home-hero {
        height: 545px !important;
        min-height: 545px !important;
    }

}


/* ==========================================================
   HERO V6 · PREMIUM COLOR GRADE
   ========================================================== */


/* ----------------------------------------------------------
   Bild selbst:
   etwas ruhiger, kontrastreicher, weniger bunt
   ---------------------------------------------------------- */

.r9-home-hero__slide {
    filter:
        saturate(.78)
        contrast(1.06)
        brightness(.88)
        sepia(.035);

    transition:
        opacity 1.65s cubic-bezier(.22,.61,.36,1),
        filter .6s ease;
}


/* ----------------------------------------------------------
   Grund-Overlay:
   links kräftiger für Text,
   rechts Bild trotzdem sichtbar
   ---------------------------------------------------------- */

.r9-home-hero__shade {
    background:
        linear-gradient(
            90deg,
            rgba(9,8,7,.80) 0%,
            rgba(12,10,9,.66) 29%,
            rgba(26,15,12,.40) 52%,
            rgba(35,15,10,.20) 76%,
            rgba(18,10,8,.10) 100%
        ) !important;
}


/* ----------------------------------------------------------
   warmer CI-Tint
   ---------------------------------------------------------- */

.r9-home-hero__shade::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(105,15,0,.15) 0%,
            rgba(105,15,0,.07) 42%,
            transparent 72%
        );

    mix-blend-mode: soft-light;

    pointer-events: none;
}


/* ----------------------------------------------------------
   leichte Vignette
   ---------------------------------------------------------- */

.r9-home-hero__shade::after {
    content: "";

    position: absolute;
    inset: 0;

    height: auto !important;

    background:
        radial-gradient(
            ellipse at center,
            transparent 42%,
            rgba(0,0,0,.14) 78%,
            rgba(0,0,0,.28) 100%
        ) !important;

    pointer-events: none;
}


/* ----------------------------------------------------------
   minimaler filmischer Grain
   rein CSS, sehr dezent
   ---------------------------------------------------------- */

.r9-home-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    opacity: .035;

    pointer-events: none;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(255,255,255,.5) 0,
            rgba(255,255,255,.5) .5px,
            transparent .7px,
            transparent 1.5px
        );

    background-size: 3px 3px;

    mix-blend-mode: soft-light;
}


/* Content bleibt sicher darüber */

.r9-home-hero__inner {
    z-index: 3 !important;
}


/* ==========================================================
   MOBILE
   etwas weniger stark filtern
   ========================================================== */

@media (max-width: 760px) {

    .r9-home-hero__slide {
        filter:
            saturate(.84)
            contrast(1.04)
            brightness(.90)
            sepia(.025);
    }

    .r9-home-hero__shade {
        background:
            linear-gradient(
                90deg,
                rgba(8,8,8,.78),
                rgba(22,12,10,.44)
            ) !important;
    }

}


/* ==========================================================
   HERO V6 · HEIGHT TUNING
   ========================================================== */

@media (min-width: 1101px) {

    .r9-home-hero {
        height: 600px !important;
        min-height: 600px !important;
        max-height: 600px !important;
    }

}


/* kleinere Notebook-Höhen */

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

    .r9-home-hero {
        height: 550px !important;
        min-height: 550px !important;
        max-height: 550px !important;
    }

}


/* Tablet weiterhin flexibel */

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

    .r9-home-hero {
        height: auto !important;
        min-height: 590px !important;
        max-height: none !important;
    }

}


/* ==========================================================
   HERO · 800px Desktop
   ========================================================== */

@media (min-width: 1101px) {

    .r9-home-hero {
        height: 800px !important;
        min-height: 800px !important;
        max-height: 800px !important;
    }

}


/* normale Notebooks */

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

    .r9-home-hero {
        height: 720px !important;
        min-height: 720px !important;
        max-height: 720px !important;
    }

}


/* niedrige Displays */

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

    .r9-home-hero {
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
    }

}


/* ==========================================================
   HERO V7 · CINEMATIC PREMIUM LOOK
   ========================================================== */


/* ----------------------------------------------------------
   Basislook der Bilder
   ruhiger, edler, homogener
   ---------------------------------------------------------- */

.r9-home-hero__slide {
    filter:
        saturate(.72)
        contrast(1.045)
        brightness(.86)
        sepia(.015)
        blur(1.4px);

    opacity: 0;

    transform:
        scale(var(--hero-scale, 1.02))
        translate3d(0,0,0);

    transition:
        opacity 2.6s cubic-bezier(.16,1,.3,1),
        filter 2.2s cubic-bezier(.16,1,.3,1);

    will-change:
        opacity,
        transform,
        filter;
}


/* Aktives Bild */

.r9-home-hero__slide.is-active {
    opacity: 1;

    filter:
        saturate(.76)
        contrast(1.055)
        brightness(.90)
        sepia(.012)
        blur(0);

    animation:
        r9HeroCinematicA
        9.6s
        linear
        both !important;
}


/* zweite Bewegung */

.r9-home-hero__slide:nth-child(2).is-active {
    animation-name:
        r9HeroCinematicB !important;
}


/* dritte Bewegung */

.r9-home-hero__slide:nth-child(3).is-active {
    animation-name:
        r9HeroCinematicC !important;
}


/* ----------------------------------------------------------
   LANGSAME, KAUM WAHRNEHMBARE KAMERABEWEGUNG
   ---------------------------------------------------------- */

@keyframes r9HeroCinematicA {

    0% {
        transform:
            scale(var(--hero-scale, 1.02))
            translate3d(-.35%, .10%, 0);
    }

    100% {
        transform:
            scale(1.065)
            translate3d(.40%, -.20%, 0);
    }

}


@keyframes r9HeroCinematicB {

    0% {
        transform:
            scale(var(--hero-scale, 1.02))
            translate3d(.30%, -.10%, 0);
    }

    100% {
        transform:
            scale(1.06)
            translate3d(-.45%, .18%, 0);
    }

}


@keyframes r9HeroCinematicC {

    0% {
        transform:
            scale(var(--hero-scale, 1.02))
            translate3d(-.20%, -.12%, 0);
    }

    100% {
        transform:
            scale(1.062)
            translate3d(.34%, .18%, 0);
    }

}


/* ----------------------------------------------------------
   OVERLAY EDLE TONUNG
   ---------------------------------------------------------- */

.r9-home-hero__shade {
    background:
        linear-gradient(
            90deg,
            rgba(10,8,7,.78) 0%,
            rgba(15,11,9,.61) 30%,
            rgba(42,24,18,.34) 58%,
            rgba(58,24,16,.16) 78%,
            rgba(20,10,8,.08) 100%
        ) !important;
}


/* warmer Brand-Tint */

.r9-home-hero__shade::before {
    background:
        linear-gradient(
            115deg,
            rgba(105,15,0,.18) 0%,
            rgba(105,15,0,.08) 36%,
            rgba(105,15,0,.025) 60%,
            transparent 78%
        ) !important;

    mix-blend-mode: soft-light !important;
}


/* ----------------------------------------------------------
   VIGNETTE WEICHER
   ---------------------------------------------------------- */

.r9-home-hero__shade::after {
    background:
        radial-gradient(
            ellipse at 52% 46%,
            transparent 38%,
            rgba(0,0,0,.09) 68%,
            rgba(0,0,0,.23) 100%
        ) !important;
}


/* ----------------------------------------------------------
   GRAIN NOCH DEZENTER
   ---------------------------------------------------------- */

.r9-home-hero::after {
    opacity: .018 !important;

    background-size:
        4px
        4px !important;
}


/* ----------------------------------------------------------
   MOBILE
   weniger Filter / weniger Zoom
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .r9-home-hero__slide {
        filter:
            saturate(.78)
            contrast(1.035)
            brightness(.89)
            blur(.7px);

        transition:
            opacity 2.1s cubic-bezier(.16,1,.3,1),
            filter 1.8s cubic-bezier(.16,1,.3,1);
    }

    .r9-home-hero__slide.is-active {
        filter:
            saturate(.80)
            contrast(1.04)
            brightness(.91)
            blur(0);
    }

}


/* ----------------------------------------------------------
   Reduced Motion
   ---------------------------------------------------------- */

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

    .r9-home-hero__slide {
        animation: none !important;

        transform: none !important;

        filter:
            saturate(.76)
            contrast(1.04)
            brightness(.90)
            blur(0) !important;

        transition:
            opacity .5s ease !important;
    }

}


/* ==========================================================
   HERO V8 · MASKED CINEMATIC TRANSITION
   ========================================================== */

.r9-home-hero__slide {
    opacity: 0 !important;

    filter:
        saturate(.76)
        contrast(1.04)
        brightness(.88) !important;

    transform:
        scale(1.035)
        translate3d(0,0,0) !important;

    clip-path:
        inset(0 0 0 100%) !important;

    transition:
        opacity .25s linear,
        clip-path 2.15s cubic-bezier(.77,0,.18,1),
        transform 8.5s ease-out !important;
}


/* aktueller Slide */

.r9-home-hero__slide.is-active {
    opacity: 1 !important;

    clip-path:
        inset(0 0 0 0) !important;

    transform:
        scale(1.065)
        translate3d(-.5%, -.15%, 0) !important;

    z-index: 2;
}


/* auslaufender Slide bleibt darunter */

.r9-home-hero__slide.is-leaving {
    opacity: 1 !important;

    clip-path:
        inset(0 0 0 0) !important;

    transform:
        scale(1.055)
        translate3d(.3%, .1%, 0) !important;

    z-index: 1;
}


/* Übergangskante etwas weicher */

.r9-home-hero__slide.is-entering {
    -webkit-mask-image:
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(0,0,0,.18) 6%,
            #000 16%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(0,0,0,.18) 6%,
            #000 16%,
            #000 100%
        );
}


/* ==========================================================
   LICHT-SWEEP
   ========================================================== */

.r9-home-hero__media::after {
    content: "";

    position: absolute;
    top: -10%;
    bottom: -10%;

    left: -22%;

    width: 18%;

    z-index: 4;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(255,235,220,.02) 25%,
            rgba(255,220,195,.17) 50%,
            rgba(105,15,0,.10) 67%,
            transparent 100%
        );

    transform:
        skewX(-12deg);

    filter:
        blur(18px);
}


.r9-home-hero__media.is-transitioning::after {
    animation:
        r9HeroLightSweep
        2.15s
        cubic-bezier(.77,0,.18,1)
        forwards;
}


@keyframes r9HeroLightSweep {

    0% {
        left: -22%;
        opacity: 0;
    }

    18% {
        opacity: .7;
    }

    70% {
        opacity: .45;
    }

    100% {
        left: 108%;
        opacity: 0;
    }

}


/* ==========================================================
   ACTIVE IMAGE MOVEMENT
   ========================================================== */

.r9-home-hero__slide:nth-child(1).is-active {
    transform:
        scale(1.06)
        translate3d(-.4%, -.2%, 0) !important;
}

.r9-home-hero__slide:nth-child(2).is-active {
    transform:
        scale(1.055)
        translate3d(.35%, -.15%, 0) !important;
}

.r9-home-hero__slide:nth-child(3).is-active {
    transform:
        scale(1.06)
        translate3d(-.25%, .1%, 0) !important;
}


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

@media (max-width: 760px) {

    .r9-home-hero__slide {
        transition:
            opacity .2s linear,
            clip-path 1.6s cubic-bezier(.77,0,.18,1),
            transform 7s ease-out !important;
    }

    .r9-home-hero__media.is-transitioning::after {
        animation-duration: 1.6s;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .r9-home-hero__slide {
        clip-path: none !important;
        transform: none !important;
        transition:
            opacity .45s ease !important;
    }

    .r9-home-hero__media::after {
        display: none !important;
    }

}


/* ==========================================================
   HERO · PREMIUM COLOR GRADE V2
   cleaner, edler, weniger braun
   ========================================================== */


/* Bildlook */

.r9-home-hero__slide {
    filter:
        saturate(.82)
        contrast(1.075)
        brightness(.94)
        sepia(.006)
        !important;
}


/* aktives Bild minimal klarer */

.r9-home-hero__slide.is-active {
    filter:
        saturate(.86)
        contrast(1.08)
        brightness(.96)
        sepia(.004)
        !important;
}


/* ----------------------------------------------------------
   Overlay:
   weniger braun, links sauber dunkel,
   rechts wesentlich natürlicher
   ---------------------------------------------------------- */

.r9-home-hero__shade {
    background:
        linear-gradient(
            90deg,
            rgba(8,8,8,.78) 0%,
            rgba(10,9,9,.63) 28%,
            rgba(17,14,13,.37) 52%,
            rgba(18,15,14,.17) 75%,
            rgba(10,10,10,.07) 100%
        ) !important;
}


/* ----------------------------------------------------------
   CI-Tint nur noch sehr subtil
   ---------------------------------------------------------- */

.r9-home-hero__shade::before {
    background:
        linear-gradient(
            115deg,
            rgba(105,15,0,.10) 0%,
            rgba(105,15,0,.045) 38%,
            transparent 70%
        ) !important;

    mix-blend-mode:
        soft-light !important;
}


/* ----------------------------------------------------------
   weichere Vignette
   ---------------------------------------------------------- */

.r9-home-hero__shade::after {
    background:
        radial-gradient(
            ellipse at 55% 46%,
            transparent 42%,
            rgba(0,0,0,.06) 69%,
            rgba(0,0,0,.18) 100%
        ) !important;
}


/* ----------------------------------------------------------
   Grain nur noch fast unsichtbar
   ---------------------------------------------------------- */

.r9-home-hero::after {
    opacity: .010 !important;
}


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

@media (max-width: 760px) {

    .r9-home-hero__slide,
    .r9-home-hero__slide.is-active {
        filter:
            saturate(.88)
            contrast(1.06)
            brightness(.95)
            sepia(0)
            !important;
    }

}


/* ==========================================================
   HERO · CI RED FILTER
   inspiriert von stark getönten Editorial-Heroes
   ========================================================== */


/* Bilder neutralisieren */

.r9-home-hero__slide,
.r9-home-hero__slide.is-active {
    filter:
        saturate(.62)
        contrast(1.04)
        brightness(.92)
        sepia(.03)
        !important;
}


/* Basisabdunklung */

.r9-home-hero__shade {
    background:
        linear-gradient(
            90deg,
            rgba(10,8,7,.62) 0%,
            rgba(12,8,7,.48) 34%,
            rgba(12,8,7,.27) 65%,
            rgba(10,8,7,.14) 100%
        ) !important;
}


/* kräftiger CI-Rot-Tint */

.r9-home-hero__shade::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(105,15,0,.62) 0%,
            rgba(105,15,0,.48) 38%,
            rgba(105,15,0,.34) 68%,
            rgba(105,15,0,.20) 100%
        ) !important;

    mix-blend-mode:
        multiply !important;

    opacity: .82 !important;

    pointer-events: none;
}


/* zusätzliche weiche Rot-Lichtfläche */

.r9-home-hero__media::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 68% 42%,
            rgba(140,32,12,.18) 0%,
            rgba(105,15,0,.12) 32%,
            transparent 68%
        );

    mix-blend-mode:
        soft-light;
}


/* Vignette */

.r9-home-hero__shade::after {
    background:
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(0,0,0,.10) 70%,
            rgba(0,0,0,.26) 100%
        ) !important;
}


/* Grain weiterhin nur sehr subtil */

.r9-home-hero::after {
    opacity: .012 !important;
}


/* Mobile etwas schwächer */

@media (max-width: 760px) {

    .r9-home-hero__shade::before {
        opacity: .66 !important;
    }

    .r9-home-hero__slide,
    .r9-home-hero__slide.is-active {
        filter:
            saturate(.70)
            contrast(1.03)
            brightness(.94)
            !important;
    }

}