/* ==========================================================
   9GRAD OST · WHY V7
   FINAL OVERRIDE – wird NACH Hero geladen
   ========================================================== */

.r9-why-v6 {
    background: #f3f0ec !important;
}


/* ==========================================================
   FACTS – weg von Tabellenoptik
   ========================================================== */

.r9-why-v6 .r9-why-v6__facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 18px !important;

    margin-top: 70px !important;

    border: 0 !important;

    background: transparent !important;
}


/* ==========================================================
   TILE
   ========================================================== */

.r9-why-v6 .r9-why-v6__fact {
    position: relative !important;

    min-height: 350px !important;

    padding: 42px 38px 40px !important;

    overflow: hidden !important;

    border: 1px solid rgba(20,20,20,.08) !important;
    border-radius: 3px !important;

    background: rgba(255,255,255,.72) !important;

    box-shadow:
        0 14px 36px rgba(31,22,18,.035) !important;

    transform: translateY(0) !important;

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


/* leichte Staffelung */

.r9-why-v6 .r9-why-v6__fact:nth-child(2) {
    transform: translateY(18px) !important;
}

.r9-why-v6 .r9-why-v6__fact:nth-child(3) {
    transform: translateY(4px) !important;
}


/* ==========================================================
   ROTE FLÄCHE – von unten hereinfahrend
   ========================================================== */

.r9-why-v6 .r9-why-v6__fact::before {
    content: "" !important;

    position: absolute !important;

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

    height: 5px !important;

    background: #690f00 !important;

    opacity: 1 !important;

    transform: none !important;

    transition:
        height .55s cubic-bezier(.16,1,.3,1) !important;

    z-index: 0 !important;
}


/* feiner Lichtverlauf */

.r9-why-v6 .r9-why-v6__fact::after {
    content: "" !important;

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

    opacity: 0 !important;

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(255,255,255,.16),
            transparent 46%
        ) !important;

    transition: opacity .45s ease !important;

    z-index: 0 !important;
}


/* Inhalt oben */

.r9-why-v6 .r9-why-v6__fact > * {
    position: relative !important;
    z-index: 2 !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.r9-why-v6 .r9-why-v6__icon {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 68px !important;
    height: 68px !important;

    margin: 0 0 38px !important;

    border: 1px solid rgba(105,15,0,.24) !important;
    border-radius: 50% !important;

    background: rgba(105,15,0,.035) !important;

    color: #690f00 !important;

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


.r9-why-v6 .r9-why-v6__icon svg {
    width: 30px !important;
    height: 30px !important;
}


/* alte Linie am Icon entfernen */

.r9-why-v6 .r9-why-v6__icon::after {
    display: none !important;
}


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

.r9-why-v6 .r9-why-v6__fact h3 {
    max-width: 290px !important;

    margin: 0 0 24px !important;

    font-size: clamp(34px, 2.5vw, 46px) !important;
    line-height: .98 !important;

    letter-spacing: -.045em !important;
    font-weight: 400 !important;

    color: #151515 !important;

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


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

.r9-why-v6 .r9-why-v6__fact p {
    max-width: 315px !important;

    margin: 0 !important;

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

    color: rgba(20,20,20,.62) !important;

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


/* ==========================================================
   HOVER – jetzt deutlich sichtbar
   ========================================================== */

@media (hover:hover) {

    .r9-why-v6 .r9-why-v6__fact:hover {
        transform: translateY(-12px) !important;

        border-color: #690f00 !important;

        box-shadow:
            0 26px 70px rgba(52,27,20,.13) !important;
    }


    .r9-why-v6 .r9-why-v6__fact:nth-child(2):hover {
        transform: translateY(6px) !important;
    }


    .r9-why-v6 .r9-why-v6__fact:nth-child(3):hover {
        transform: translateY(-8px) !important;
    }


    /* rote Fläche zieht hoch */

    .r9-why-v6 .r9-why-v6__fact:hover::before {
        height: 100% !important;
    }


    .r9-why-v6 .r9-why-v6__fact:hover::after {
        opacity: 1 !important;
    }


    /* Icon wird invers */

    .r9-why-v6 .r9-why-v6__fact:hover
    .r9-why-v6__icon {
        transform:
            translateY(-5px)
            scale(1.06) !important;

        border-color:
            rgba(255,255,255,.38) !important;

        background:
            rgba(255,255,255,.10) !important;

        color:
            #fff !important;
    }


    /* Text ebenfalls weiß */

    .r9-why-v6 .r9-why-v6__fact:hover h3 {
        color:
            #fff !important;

        transform:
            translateY(-3px) !important;
    }


    .r9-why-v6 .r9-why-v6__fact:hover p {
        color:
            rgba(255,255,255,.78) !important;

        transform:
            translateY(-2px) !important;
    }

}


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

@media (max-width: 900px) {

    .r9-why-v6 .r9-why-v6__facts {
        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

        margin-top:
            42px !important;
    }


    .r9-why-v6 .r9-why-v6__fact,
    .r9-why-v6 .r9-why-v6__fact:nth-child(2),
    .r9-why-v6 .r9-why-v6__fact:nth-child(3) {
        min-height:
            auto !important;

        padding:
            34px 28px !important;

        transform:
            none !important;
    }

}

/* ==========================================================
   WHY V8 · EDITORIAL STAGE
   ========================================================== */

.r9-why-v6 .r9-why-v6__facts {
    display: grid !important;
    grid-template-columns: 1.35fr .82fr .82fr !important;
    gap: 0 !important;

    margin-top: 72px !important;

    border: 1px solid rgba(17,17,17,.08) !important;
    overflow: hidden !important;

    background: #fff !important;
}


/* Grundelement */

.r9-why-v6 .r9-why-v6__fact {
    position: relative !important;

    min-height: 390px !important;

    padding: 44px 38px 42px !important;

    border: 0 !important;
    border-right: 1px solid rgba(17,17,17,.08) !important;
    border-radius: 0 !important;

    background: #fff !important;

    box-shadow: none !important;

    overflow: hidden !important;

    transition:
        flex .6s cubic-bezier(.16,1,.3,1),
        background-color .45s ease,
        color .45s ease !important;
}

.r9-why-v6 .r9-why-v6__fact:last-child {
    border-right: 0 !important;
}


/* rote Bühne auf erstem Element */

.r9-why-v6 .r9-why-v6__fact:first-child {
    background: #690f00 !important;
}


/* Pseudo vorherige Hover-Layer deaktivieren */

.r9-why-v6 .r9-why-v6__fact::before,
.r9-why-v6 .r9-why-v6__fact::after {
    display: none !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.r9-why-v6 .r9-why-v6__icon {
    width: 58px !important;
    height: 58px !important;

    margin-bottom: 58px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(105,15,0,.24) !important;

    background: transparent !important;

    color: #690f00 !important;

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


/* erstes Icon weiß */

.r9-why-v6 .r9-why-v6__fact:first-child .r9-why-v6__icon {
    color: #fff !important;
    border-color: rgba(255,255,255,.38) !important;
}


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

.r9-why-v6 .r9-why-v6__fact h3 {
    margin: 0 0 22px !important;

    max-width: 340px !important;

    font-size: clamp(38px, 3vw, 54px) !important;
    line-height: .94 !important;

    letter-spacing: -.05em !important;

    color: #111 !important;

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


/* erstes Element groß */

.r9-why-v6 .r9-why-v6__fact:first-child h3 {
    font-size: clamp(48px, 4vw, 68px) !important;
    color: #fff !important;
}


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

.r9-why-v6 .r9-why-v6__fact p {
    max-width: 330px !important;

    color: rgba(17,17,17,.62) !important;

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

.r9-why-v6 .r9-why-v6__fact:first-child p {
    color: rgba(255,255,255,.78) !important;
}


/* ==========================================================
   GROSSE HINTERGRUNDZAHL / SYMBOLIK
   ========================================================== */

.r9-why-v6 .r9-why-v6__fact:nth-child(1) {
    --num: "01";
}

.r9-why-v6 .r9-why-v6__fact:nth-child(2) {
    --num: "02";
}

.r9-why-v6 .r9-why-v6__fact:nth-child(3) {
    --num: "03";
}

.r9-why-v6 .r9-why-v6__fact .r9-why-v6__icon::before {
    content: var(--num);

    position: absolute;

    right: 24px;
    bottom: 18px;

    font-size: 120px;
    line-height: .8;

    letter-spacing: -.08em;

    color: rgba(17,17,17,.035);

    pointer-events: none;
}

.r9-why-v6 .r9-why-v6__fact:first-child .r9-why-v6__icon::before {
    color: rgba(255,255,255,.08);
}


/* ==========================================================
   HOVER – echte Veränderung
   ========================================================== */

@media (hover:hover) {

    .r9-why-v6 .r9-why-v6__fact:hover {
        background: #690f00 !important;
    }

    .r9-why-v6 .r9-why-v6__fact:hover h3 {
        color: #fff !important;
        transform: translateY(-4px) !important;
    }

    .r9-why-v6 .r9-why-v6__fact:hover p {
        color: rgba(255,255,255,.78) !important;
        transform: translateY(-2px) !important;
    }

    .r9-why-v6 .r9-why-v6__fact:hover .r9-why-v6__icon {
        color: #fff !important;
        border-color: rgba(255,255,255,.38) !important;

        transform:
            translateY(-5px)
            rotate(-4deg)
            scale(1.04) !important;
    }

    .r9-why-v6 .r9-why-v6__fact:hover .r9-why-v6__icon::before {
        color: rgba(255,255,255,.08);
    }

}


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

@media (max-width: 900px) {

    .r9-why-v6 .r9-why-v6__facts {
        grid-template-columns: 1fr !important;
    }

    .r9-why-v6 .r9-why-v6__fact {
        min-height: 280px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(17,17,17,.08) !important;
    }

}


/* ==========================================================
   9GRAD OST · WHY V9
   EDITORIAL ROWS – KEINE CARDS MEHR
   ========================================================== */


/* ----------------------------------------------------------
   gesamte Fact-Fläche
   ---------------------------------------------------------- */

.r9-why-v6 .r9-why-v6__facts {
    display: block !important;

    margin-top: 66px !important;

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

    background: transparent !important;

    overflow: visible !important;
}


/* ----------------------------------------------------------
   einzelne Zeile
   ---------------------------------------------------------- */

.r9-why-v6 .r9-why-v6__fact,
.r9-why-v6 .r9-why-v6__fact:nth-child(1),
.r9-why-v6 .r9-why-v6__fact:nth-child(2),
.r9-why-v6 .r9-why-v6__fact:nth-child(3) {

    position: relative !important;

    display: grid !important;

    grid-template-columns:
        88px
        minmax(280px, 1.15fr)
        minmax(280px, .95fr)
        100px !important;

    align-items: center !important;

    gap: 34px !important;

    min-height: 160px !important;

    padding: 28px 28px !important;

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

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;

    overflow: hidden !important;

    transition:
        background-color .5s cubic-bezier(.16,1,.3,1),
        padding .5s cubic-bezier(.16,1,.3,1) !important;
}


.r9-why-v6 .r9-why-v6__fact:last-child {
    border-bottom: 0 !important;
}


/* alte V8-Flächen deaktivieren */

.r9-why-v6 .r9-why-v6__fact::before {
    display: none !important;
}


/* ==========================================================
   GROSSE NUMMER RECHTS
   ========================================================== */

.r9-why-v6 .r9-why-v6__fact::after {
    display: block !important;

    position: relative !important;

    inset: auto !important;

    justify-self: end !important;

    align-self: center !important;

    width: auto !important;
    height: auto !important;

    background: none !important;

    opacity: 1 !important;

    font-size: 58px !important;
    line-height: 1 !important;

    letter-spacing: -.06em !important;

    font-weight: 300 !important;

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

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


.r9-why-v6 .r9-why-v6__fact:nth-child(1)::after {
    content: "01" !important;
}

.r9-why-v6 .r9-why-v6__fact:nth-child(2)::after {
    content: "02" !important;
}

.r9-why-v6 .r9-why-v6__fact:nth-child(3)::after {
    content: "03" !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.r9-why-v6 .r9-why-v6__icon {

    grid-column: 1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 !important;

    border: 1px solid rgba(105,15,0,.24) !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: #690f00 !important;

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


.r9-why-v6 .r9-why-v6__icon svg {
    width: 25px !important;
    height: 25px !important;
}


/* alte Nummer im Icon entfernen */

.r9-why-v6 .r9-why-v6__icon::before,
.r9-why-v6 .r9-why-v6__icon::after {
    display: none !important;
}


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

.r9-why-v6 .r9-why-v6__fact h3 {

    grid-column: 2 !important;

    max-width: none !important;

    margin: 0 !important;

    font-size:
        clamp(32px, 2.55vw, 46px) !important;

    line-height: .98 !important;

    letter-spacing: -.045em !important;

    font-weight: 400 !important;

    color: #151515 !important;

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


/* ==========================================================
   TEXT
   ========================================================== */

.r9-why-v6 .r9-why-v6__fact p {

    grid-column: 3 !important;

    max-width: 390px !important;

    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.65 !important;

    color: rgba(20,20,20,.62) !important;

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


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

@media (hover:hover) {

    .r9-why-v6 .r9-why-v6__fact:hover {

        background:
            #690f00 !important;

        padding-left:
            40px !important;

        padding-right:
            40px !important;
    }


    .r9-why-v6 .r9-why-v6__fact:hover
    .r9-why-v6__icon {

        color: #fff !important;

        border-color:
            rgba(255,255,255,.42) !important;

        background:
            rgba(255,255,255,.08) !important;

        transform:
            rotate(-5deg)
            scale(1.06) !important;
    }


    .r9-why-v6 .r9-why-v6__fact:hover h3 {

        color:
            #fff !important;

        transform:
            translateX(10px) !important;
    }


    .r9-why-v6 .r9-why-v6__fact:hover p {

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

        transform:
            translateX(6px) !important;
    }


    .r9-why-v6 .r9-why-v6__fact:hover::after {

        color:
            rgba(255,255,255,.18) !important;

        transform:
            translateX(-8px)
            scale(1.08) !important;
    }

}


/* ==========================================================
   feiner Cursor-Akzent links
   ========================================================== */

.r9-why-v6 .r9-why-v6__fact > * {
    position: relative !important;
    z-index: 2 !important;
}


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

@media (max-width: 1050px) {

    .r9-why-v6 .r9-why-v6__fact,
    .r9-why-v6 .r9-why-v6__fact:nth-child(1),
    .r9-why-v6 .r9-why-v6__fact:nth-child(2),
    .r9-why-v6 .r9-why-v6__fact:nth-child(3) {

        grid-template-columns:
            70px
            1fr
            72px !important;

        gap: 24px !important;

        min-height: 180px !important;
    }


    .r9-why-v6 .r9-why-v6__fact h3 {
        grid-column: 2 !important;
    }


    .r9-why-v6 .r9-why-v6__fact p {

        grid-column: 2 !important;

        margin-top: 14px !important;
    }

}


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

@media (max-width: 700px) {

    .r9-why-v6 .r9-why-v6__facts {
        margin-top: 42px !important;
    }


    .r9-why-v6 .r9-why-v6__fact,
    .r9-why-v6 .r9-why-v6__fact:nth-child(1),
    .r9-why-v6 .r9-why-v6__fact:nth-child(2),
    .r9-why-v6 .r9-why-v6__fact:nth-child(3) {

        display: grid !important;

        grid-template-columns:
            58px
            1fr !important;

        gap:
            18px
            20px !important;

        min-height:
            auto !important;

        padding:
            28px
            20px !important;
    }


    .r9-why-v6 .r9-why-v6__icon {

        width: 50px !important;
        height: 50px !important;
    }


    .r9-why-v6 .r9-why-v6__fact h3 {

        grid-column: 2 !important;

        font-size:
            31px !important;
    }


    .r9-why-v6 .r9-why-v6__fact p {

        grid-column:
            1 / -1 !important;

        max-width:
            none !important;
    }


    .r9-why-v6 .r9-why-v6__fact::after {
        display:
            none !important;
    }

}


/* ==========================================================
   WHY V9 · FIX FIRST ROW / TYPO CONSISTENCY
   ========================================================== */


/* ----------------------------------------------------------
   ALLE ZEILEN GLEICHE BASIS
   ---------------------------------------------------------- */

.r9-why-v6 .r9-why-v6__fact,
.r9-why-v6 .r9-why-v6__fact:first-child,
.r9-why-v6 .r9-why-v6__fact:nth-child(2),
.r9-why-v6 .r9-why-v6__fact:nth-child(3) {

    background:
        transparent !important;

    color:
        #151515 !important;
}


/* ----------------------------------------------------------
   ALLE HEADLINES IDENTISCH
   ---------------------------------------------------------- */

.r9-why-v6 .r9-why-v6__fact h3,
.r9-why-v6 .r9-why-v6__fact:first-child h3,
.r9-why-v6 .r9-why-v6__fact:nth-child(2) h3,
.r9-why-v6 .r9-why-v6__fact:nth-child(3) h3 {

    color:
        #151515 !important;

    font-size:
        clamp(32px, 2.55vw, 46px) !important;

    line-height:
        .98 !important;

    letter-spacing:
        -.045em !important;

    font-weight:
        400 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    transform:
        none !important;
}


/* ----------------------------------------------------------
   ALLE TEXTE IDENTISCH
   ---------------------------------------------------------- */

.r9-why-v6 .r9-why-v6__fact p,
.r9-why-v6 .r9-why-v6__fact:first-child p,
.r9-why-v6 .r9-why-v6__fact:nth-child(2) p,
.r9-why-v6 .r9-why-v6__fact:nth-child(3) p {

    color:
        rgba(20,20,20,.64) !important;

    font-size:
        14px !important;

    line-height:
        1.65 !important;

    max-width:
        390px !important;

    margin:
        0 !important;

    transform:
        none !important;
}


/* ----------------------------------------------------------
   ICONS EBENFALLS GLEICH
   ---------------------------------------------------------- */

.r9-why-v6 .r9-why-v6__fact .r9-why-v6__icon,
.r9-why-v6 .r9-why-v6__fact:first-child .r9-why-v6__icon {

    color:
        #690f00 !important;

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

    background:
        transparent !important;

    transform:
        none !important;
}


/* ----------------------------------------------------------
   HOVER DARF DANN WIEDER WEISS WERDEN
   ---------------------------------------------------------- */

@media (hover:hover) {

    .r9-why-v6 .r9-why-v6__fact:hover {
        background:
            #690f00 !important;
    }

    .r9-why-v6 .r9-why-v6__fact:hover h3 {
        color:
            #fff !important;

        transform:
            translateX(10px) !important;
    }

    .r9-why-v6 .r9-why-v6__fact:hover p {
        color:
            rgba(255,255,255,.80) !important;

        transform:
            translateX(6px) !important;
    }

    .r9-why-v6 .r9-why-v6__fact:hover .r9-why-v6__icon {
        color:
            #fff !important;

        border-color:
            rgba(255,255,255,.42) !important;

        background:
            rgba(255,255,255,.08) !important;
    }

}


/* ==========================================================
   WHY V9 · ROW HOVER POSITION FIX
   komplette Zeile bleibt immer exakt an ihrer Position
   ========================================================== */

.r9-why-v6 .r9-why-v6__fact,
.r9-why-v6 .r9-why-v6__fact:nth-child(1),
.r9-why-v6 .r9-why-v6__fact:nth-child(2),
.r9-why-v6 .r9-why-v6__fact:nth-child(3),

.r9-why-v6 .r9-why-v6__fact:hover,
.r9-why-v6 .r9-why-v6__fact:nth-child(1):hover,
.r9-why-v6 .r9-why-v6__fact:nth-child(2):hover,
.r9-why-v6 .r9-why-v6__fact:nth-child(3):hover {
    transform: none !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Auch Padding der kompletten Row nicht mehr animieren,
   damit die Außenkante absolut ruhig bleibt */

.r9-why-v6 .r9-why-v6__fact:hover,
.r9-why-v6 .r9-why-v6__fact:nth-child(1):hover,
.r9-why-v6 .r9-why-v6__fact:nth-child(2):hover,
.r9-why-v6 .r9-why-v6__fact:nth-child(3):hover {
    padding:
        28px
        28px !important;
}


/* Übergang nur noch über Farbe – keine Geometrie */

.r9-why-v6 .r9-why-v6__fact {
    transition:
        background-color .48s cubic-bezier(.16,1,.3,1),
        color .4s ease !important;
}