/* =========================================================
           GRUNDEINSTELLUNGEN
        ========================================================= */

        :root {

            --color-bg: #0e0f11;
            --color-bg-light: #17191d;
            --color-card: #1d2025;

            --color-text: #f5f5f5;
            --color-text-soft: #b9bdc5;

            --color-accent: #e33b25;
            --color-accent-light: #ff674d;
            --color-orange: #f19123;

            --color-border:
                rgba(255, 255, 255, 0.09);

            --container-width: 1200px;

            --section-padding:
                clamp(80px, 10vw, 140px);

            --radius-small: 10px;
            --radius-medium: 18px;
            --radius-large: 28px;

            --shadow:
                0 30px 80px rgba(0, 0, 0, 0.28);

        }


        *,
        *::before,
        *::after {

            box-sizing: border-box;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            margin: 0;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            background:
                var(--color-bg);

            color:
                var(--color-text);

            line-height: 1.6;

            overflow-x: hidden;

        }


        body.menu-open {

            overflow: hidden;

        }


        img {

            display: block;

            max-width: 100%;

        }


        a {

            color: inherit;

            text-decoration: none;

        }


        button,
        a {

            -webkit-tap-highlight-color:
                transparent;

        }


        button {

            font: inherit;

        }


        .container {

            width:
                min(
                    calc(100% - 40px),
                    var(--container-width)
                );

            margin-inline: auto;

        }


        .section {

            position: relative;

            padding:
                var(--section-padding)
                0;

        }


        .section-dark {

            background:
                var(--color-bg);

        }


        .section-light {

            background:
                #f3f1ed;

            color:
                #161719;

        }


        .section-muted {

            background:
                var(--color-bg-light);

        }


        /* =========================================================
           TYPOGRAFIE
        ========================================================= */

        .eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            margin-bottom: 18px;

            color:
                var(--color-orange);

            font-size: 0.78rem;

            font-weight: 800;

            letter-spacing: 0.16em;

            text-transform: uppercase;

        }


        .eyebrow::before {

            content: "";

            width: 36px;
            height: 3px;

            background:
                var(--color-accent);

        }


        .section-title {

            max-width: 850px;

            margin:
                0 0 22px;

            font-size:
                clamp(
                    2.3rem,
                    6vw,
                    5rem
                );

            line-height: 0.98;

            letter-spacing:
                -0.045em;

            text-transform:
                uppercase;

        }


        .section-intro {

            max-width: 720px;

            margin: 0;

            color:
                var(--color-text-soft);

            font-size:
                clamp(
                    1rem,
                    2vw,
                    1.15rem
                );

        }


        .section-light
        .section-intro {

            color:
                #595c62;

        }


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

        .button {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            min-height: 52px;

            padding:
                0 24px;

            border-radius:
                var(--radius-small);

            font-weight: 800;

            text-transform:
                uppercase;

            letter-spacing:
                0.04em;

            transition:
                transform 180ms ease,
                background 180ms ease,
                border-color 180ms ease;

        }


        .button:hover {

            transform:
                translateY(-3px);

        }


        .button-primary {

            background:
                var(--color-accent);

            color:
                #fff;

        }


        .button-primary:hover {

            background:
                var(--color-accent-light);

        }


        .button-outline {

            border:
                1px solid
                rgba(255,255,255,0.22);

            background:
                rgba(255,255,255,0.04);

        }


        .button-outline:hover {

            border-color:
                rgba(255,255,255,0.55);

        }


        /* =========================================================
           HEADER
        ========================================================= */

        .site-header {

            position: fixed;

            z-index: 1000;

            top: 0;
            left: 0;
            right: 0;

            border-bottom:
                1px solid
                transparent;

            transition:
                background 200ms ease,
                border-color 200ms ease,
                backdrop-filter 200ms ease;

        }


        .site-header.scrolled {

            background:
                rgba(14, 15, 17, 0.88);

            border-color:
                rgba(255,255,255,0.08);

            backdrop-filter:
                blur(18px);

        }


        .header-inner {

            min-height: 78px;

            display: flex;

            align-items: center;

            justify-content:
                space-between;

            gap: 30px;

        }


        .brand {

            display: flex;

            align-items: center;

            gap: 12px;

            font-weight: 900;

        }


        .brand-symbol {

            width: 42px;
            height: 42px;

            display: grid;

            place-items: center;

            border-radius:
                9px;

            background:
                linear-gradient(
                    135deg,
                    var(--color-accent),
                    var(--color-orange)
                );

            color: white;

            font-size: 1.15rem;

            font-style: italic;

            transform:
                skewX(-7deg);

        }


        .brand-text {

            line-height: 1.1;

        }


        .brand-main {

            display: block;

            font-size: 0.95rem;

            letter-spacing:
                0.04em;

        }


        .brand-sub {

            display: block;

            color:
                #a7abb1;

            margin-top: 3px;

            font-size: 0.67rem;

            letter-spacing:
                0.13em;

            text-transform:
                uppercase;

        }


        .main-nav ul {

            display: flex;

            align-items: center;

            gap:
                clamp(
                    16px,
                    2vw,
                    30px
                );

            margin: 0;
            padding: 0;

            list-style: none;

        }


        .main-nav a {

            position: relative;

            color:
                #d7d9dc;

            font-size: 0.82rem;

            font-weight: 800;

            text-transform:
                uppercase;

            letter-spacing:
                0.06em;

        }


        .main-nav a::after {

            content: "";

            position: absolute;

            left: 0;
            bottom: -8px;

            width: 100%;
            height: 2px;

            background:
                var(--color-accent);

            transform:
                scaleX(0);

            transform-origin:
                right;

            transition:
                transform 180ms ease;

        }


        .main-nav a:hover::after {

            transform:
                scaleX(1);

            transform-origin:
                left;

        }


        .menu-button {

            display: none;

            width: 46px;
            height: 46px;

            padding: 0;

            border:
                1px solid
                rgba(255,255,255,0.12);

            border-radius: 8px;

            background:
                rgba(255,255,255,0.04);

            color:
                white;

            cursor:
                pointer;

        }


        /* =========================================================
           HERO
        ========================================================= */

        .hero {

            position: relative;

            min-height:
                100svh;

            display: flex;

            align-items: center;

            overflow: hidden;

         background:
        linear-gradient(
            90deg,
            rgba(10, 11, 13, 0.95) 0%,
            rgba(10, 11, 13, 0.80) 45%,
            rgba(10, 11, 13, 0.30) 100%
        ),
        url("/images/DERBI_Poster1.png")
        center / cover
        no-repeat;

        }


        .hero::before {

            content: "";

            position: absolute;

            width: 55vw;
            height: 160vh;

            right: -12vw;
            top: -25vh;

            transform:
                rotate(17deg);

            background:

                repeating-linear-gradient(
                    90deg,
                    rgba(255,255,255,0.025) 0,
                    rgba(255,255,255,0.025) 1px,
                    transparent 1px,
                    transparent 45px
                );

        }


        .hero::after {

            content: "50";

            position: absolute;

            right: -1vw;
            bottom: -11vw;

            font-size:
                clamp(
                    18rem,
                    40vw,
                    40rem
                );

            line-height: 0.8;

            font-weight: 900;

            color:
                rgba(255,255,255,0.018);

            pointer-events: none;

        }


        .hero-inner {

            position: relative;

            z-index: 2;

            padding-top: 110px;

        }


        .hero-content {

            max-width: 920px;

        }


        .hero-kicker {

            display: inline-flex;

            align-items: center;

            gap: 12px;

            padding:
                8px 13px;

            border:
                1px solid
                rgba(255,255,255,0.11);

            border-radius:
                100px;

            margin-bottom: 26px;

            color:
                #d9dade;

            background:
                rgba(255,255,255,0.035);

            font-size: 0.72rem;

            font-weight: 800;

            letter-spacing:
                0.13em;

            text-transform:
                uppercase;

        }


        .hero-kicker-dot {

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background:
                var(--color-accent);

            box-shadow:
                0 0 14px
                rgba(227, 59, 37, 0.7);

        }


        .hero h1 {

            margin:
                0 0 25px;

            max-width:
                950px;

            font-size:
                clamp(
                    3.4rem,
                    10vw,
                    8.5rem
                );

            line-height: 0.82;

            letter-spacing:
                -0.065em;

            text-transform:
                uppercase;

        }


        .hero h1 span {

            display: block;

            color:
                var(--color-accent);

        }


        .hero-description {

            max-width: 680px;

            margin:
                0 0 34px;

            color:
                #babdc3;

            font-size:
                clamp(
                    1.05rem,
                    2vw,
                    1.28rem
                );

        }


        .hero-actions {

            display: flex;

            flex-wrap: wrap;

            gap: 12px;

        }


        .hero-data {

            display: flex;

            flex-wrap: wrap;

            gap:
                20px 45px;

            padding-top: 60px;

        }


        .hero-data-item {

            display: grid;

            gap: 2px;

        }


        .hero-data strong {

            font-size: 1.2rem;

        }


        .hero-data span {

            color:
                #868a91;

            font-size: 0.75rem;

            text-transform:
                uppercase;

            letter-spacing:
                0.09em;

        }


        /* =========================================================
           INTRO / CLUB
        ========================================================= */
        .club-image {
    min-height: 480px;

    border-radius: var(--radius-large);

    overflow: hidden;

    box-shadow: var(--shadow);
}

.club-image img {
    width: 100%;
    height: 100%;

    min-height: 480px;

    object-fit: cover;
}


        .club-grid {

            display: grid;

            grid-template-columns:
                0.95fr 1.05fr;

            gap:
                clamp(
                    50px,
                    8vw,
                    120px
                );

            align-items: center;

        }


        .club-number {

            position: relative;

            min-height: 480px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius:
                var(--radius-large);

            overflow: hidden;

            background:

                radial-gradient(
                    circle at 70% 30%,
                    rgba(241,145,35,0.22),
                    transparent 35%
                ),

                linear-gradient(
                    145deg,
                    #202328,
                    #111214
                );

            box-shadow:
                var(--shadow);

        }


        .club-number::before {

            content: "";

            position: absolute;

            inset: 0;

            background:

                linear-gradient(
                    125deg,
                    transparent 40%,
                    rgba(227,59,37,0.17)
                    40%,
                    rgba(227,59,37,0.17)
                    52%,
                    transparent 52%
                );

        }


        .club-number span {

            position: relative;

            font-size:
                clamp(
                    9rem,
                    24vw,
                    18rem
                );

            line-height: 0.8;

            font-style: italic;

            font-weight: 900;

            letter-spacing:
                -0.1em;

            color:
                transparent;

            -webkit-text-stroke:
                3px
                rgba(255,255,255,0.75);

        }


        .club-text p {

            color:
                var(--color-text-soft);

            font-size:
                1.07rem;

        }


        .club-features {

            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 14px;

            margin-top: 34px;

        }


        .club-feature {

            padding: 20px;

            border:
                1px solid
                var(--color-border);

            border-radius:
                var(--radius-small);

            background:
                rgba(255,255,255,0.025);

        }


        .club-feature strong {

            display: block;

            margin-bottom: 6px;

            font-size: 0.95rem;

        }


        .club-feature span {

            color:
                #8d9198;

            font-size: 0.85rem;

        }


        /* =========================================================
           KARTEN
        ========================================================= */

        .card-grid {

            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 20px;

            margin-top: 55px;

        }


        .activity-card {

            position: relative;

            min-height: 390px;

            display: flex;

            flex-direction: column;

            justify-content:
                flex-end;

            padding: 30px;

            border:
                1px solid
                var(--color-border);

            border-radius:
                var(--radius-medium);

            overflow: hidden;

            background:
                var(--color-card);

            transition:
                transform 220ms ease,
                border-color 220ms ease;

        }


        .activity-card:hover {

            transform:
                translateY(-8px);

            border-color:
                rgba(227,59,37,0.55);

        }


        .activity-number {

            position: absolute;

            top: 25px;
            right: 28px;

            color:
                rgba(255,255,255,0.06);

            font-size: 5rem;

            line-height: 1;

            font-weight: 900;

        }


        .activity-icon {

            width: 54px;
            height: 54px;

            display: grid;

            place-items: center;

            margin-bottom: auto;

            border-radius:
                14px;

            background:
                rgba(227,59,37,0.12);

            color:
                var(--color-accent);

            font-size: 1.5rem;

        }


        .activity-card h3 {

            margin:
                50px 0 12px;

            font-size: 1.7rem;

            text-transform:
                uppercase;

        }


        .activity-card p {

            margin: 0;

            color:
                #a7abb1;

        }


        /* =========================================================
           AUSFAHRTEN
        ========================================================= */

        .ride-layout {

            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                minmax(320px, 0.7fr);

            gap: 65px;

            align-items: center;

        }


        .ride-panel {

            position: relative;

            min-height: 500px;

            border-radius:
                var(--radius-large);

            overflow: hidden;

            background:

                linear-gradient(
                    150deg,
                    rgba(227,59,37,0.95),
                    rgba(128,27,18,0.95)
                );

            box-shadow:
                var(--shadow);

        }
        .ride-panel img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}
.ride-panel::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.85),
            rgba(0, 0, 0, 0.10)
        );
}

.ride-panel-content {
    position: absolute;

    z-index: 2;

    inset: auto 35px 35px;
}
.garage-visual {
    position: relative;

    min-height: 420px;

    display: grid;
    place-items: center;

    border-radius: var(--radius-medium);

    overflow: hidden;
}

.garage-visual img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.garage-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.42);
}

.garage-sign {
    position: relative;

    z-index: 2;
}

        .ride-panel::before {

            content: "";

            position: absolute;

            inset: -30%;

            transform:
                rotate(-16deg);

            background:

                repeating-linear-gradient(
                    90deg,
                    transparent 0,
                    transparent 50px,
                    rgba(255,255,255,0.08)
                    50px,
                    rgba(255,255,255,0.08)
                    53px
                );

        }


        .ride-panel-content {

            position: absolute;

            inset: auto 35px 35px;

        }


        .ride-panel strong {

            display: block;

            max-width: 500px;

            font-size:
                clamp(
                    2rem,
                    5vw,
                    4rem
                );

            line-height: 0.95;

            text-transform:
                uppercase;

        }


        .ride-list {

            display: grid;

            gap: 0;

            margin-top: 35px;

        }


        .ride-list-item {

            display: grid;

            grid-template-columns:
                52px 1fr;

            gap: 20px;

            padding:
                22px 0;

            border-bottom:
                1px solid
                rgba(255,255,255,0.09);

        }


        .ride-list-number {

            color:
                var(--color-accent);

            font-size: 0.85rem;

            font-weight: 900;

        }


        .ride-list-item strong {

            display: block;

            margin-bottom: 5px;

        }


        .ride-list-item p {

            margin: 0;

            color:
                var(--color-text-soft);

            font-size: 0.95rem;

        }


        /* =========================================================
           SCHRAUBEN / WERKSTATT
        ========================================================= */

        .workshop-wrapper {

            position: relative;

            padding:
                clamp(
                    35px,
                    7vw,
                    80px
                );

            border-radius:
                var(--radius-large);

            overflow: hidden;

            background:

                linear-gradient(
                    135deg,
                    #181a1e,
                    #24272d
                );

            border:
                1px solid
                rgba(255,255,255,0.08);

            box-shadow:
                var(--shadow);

        }


        .workshop-wrapper::after {

            content: "HOLZSTADL";

            position: absolute;

            right: -15px;
            bottom: -35px;

            color:
                rgba(255,255,255,0.025);

            font-size:
                clamp(
                    4rem,
                    12vw,
                    10rem
                );

            line-height: 1;

            font-weight: 900;

            pointer-events: none;

        }


        .workshop-grid {

            position: relative;

            z-index: 2;

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 70px;

            align-items: center;

        }


        .workshop-features {

            display: grid;

            gap: 12px;

            margin-top: 35px;

        }


        .workshop-feature {

            display: flex;

            gap: 18px;

            align-items:
                flex-start;

            padding: 18px;

            border-radius: 10px;

            background:
                rgba(255,255,255,0.035);

        }


        .check {

            flex: 0 0 auto;

            width: 28px;
            height: 28px;

            display: grid;

            place-items: center;

            border-radius: 50%;

            background:
                var(--color-accent);

            color: white;

            font-size: 0.75rem;

            font-weight: 900;

        }


        .workshop-feature strong {

            display: block;

        }


        .workshop-feature span {

            display: block;

            margin-top: 3px;

            color:
                #9da1a8;

            font-size: 0.9rem;

        }


        .garage-visual {

            position: relative;

            min-height: 420px;

            display: grid;

            place-items: center;

            border-radius:
                var(--radius-medium);

            overflow: hidden;

            background:

                linear-gradient(
                    rgba(0,0,0,0.2),
                    rgba(0,0,0,0.6)
                ),

                repeating-linear-gradient(
                    90deg,
                    #725039 0,
                    #725039 18px,
                    #62442f 18px,
                    #62442f 36px
                );

        }


        .garage-sign {

            padding:
                20px 30px;

            border:
                3px solid
                rgba(255,255,255,0.8);

            transform:
                rotate(-4deg);

            font-size:
                clamp(
                    2rem,
                    5vw,
                    4.5rem
                );

            font-weight: 900;

            line-height: 0.95;

            text-align: center;

            text-transform:
                uppercase;

        }


        .garage-sign span {

            display: block;

            color:
                var(--color-orange);

        }


        /* =========================================================
           TERMINE
        ========================================================= */

        .events {

            margin-top: 55px;

            border-top:
                1px solid
                #d5d3ce;

        }


        .event {

            display: grid;

            grid-template-columns:
                140px 1fr auto;

            gap: 35px;

            align-items: center;

            padding:
                30px 5px;

            border-bottom:
                1px solid
                #d5d3ce;

            transition:
                padding 180ms ease;

        }


        .event:hover {

            padding-left: 16px;

        }


        .event-date {

            display: flex;

            align-items:
                baseline;

            gap: 8px;

        }


        .event-date strong {

            color:
                var(--color-accent);

            font-size: 2.6rem;

            line-height: 1;

        }


        .event-date span {

            color:
                #74767b;

            font-size: 0.78rem;

            font-weight: 800;

            text-transform:
                uppercase;

        }


        .event-info h3 {

            margin:
                0 0 5px;

            font-size: 1.25rem;

        }


        .event-info p {

            margin: 0;

            color:
                #696b70;

        }


        .event-type {

            padding:
                7px 11px;

            border:
                1px solid
                #c9c6bf;

            border-radius:
                100px;

            color:
                #55575b;

            font-size: 0.72rem;

            font-weight: 800;

            text-transform:
                uppercase;

        }


        /* =========================================================
           CTA
        ========================================================= */

        .cta {

            position: relative;

            overflow: hidden;

            text-align: center;

            background:
                var(--color-accent);

        }


        .cta::before {

            content: "";

            position: absolute;

            inset: 0;

            background:

                repeating-linear-gradient(
                    -45deg,
                    rgba(255,255,255,0.035) 0,
                    rgba(255,255,255,0.035) 2px,
                    transparent 2px,
                    transparent 20px
                );

        }


        .cta .container {

            position: relative;

            z-index: 2;

        }


        .cta h2 {

            max-width: 900px;

            margin:
                0 auto 25px;

            font-size:
                clamp(
                    2.8rem,
                    8vw,
                    6.5rem
                );

            line-height: 0.9;

            letter-spacing:
                -0.05em;

            text-transform:
                uppercase;

        }


        .cta p {

            max-width: 650px;

            margin:
                0 auto 35px;

            color:
                rgba(255,255,255,0.86);

            font-size: 1.08rem;

        }


        .cta .button {

            background: white;

            color:
                #151619;

        }


        /* =========================================================
           FOOTER
        ========================================================= */

        .site-footer {

            padding:
                45px 0;

            background:
                #090a0b;

        }


        .footer-inner {

            display: flex;

            justify-content:
                space-between;

            align-items: center;

            gap: 30px;

            color:
                #84888f;

            font-size: 0.8rem;

        }


        .footer-links {

            display: flex;

            gap: 20px;

        }


        .footer-links a:hover {

            color: white;

        }


        /* =========================================================
           SCROLL ANIMATION
        ========================================================= */

        .reveal {

            opacity: 0;

            transform:
                translateY(35px);

            transition:

                opacity 700ms ease,

                transform 700ms
                cubic-bezier(
                    .2,
                    .7,
                    .3,
                    1
                );

        }


        .reveal.visible {

            opacity: 1;

            transform:
                translateY(0);

        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media
        (max-width: 900px) {

            .main-nav {

                position: fixed;

                inset:
                    78px 0 auto;

                display: none;

                padding: 30px 20px;

                background:
                    rgba(14,15,17,0.98);

                border-bottom:
                    1px solid
                    rgba(255,255,255,0.08);

            }


            .main-nav.open {

                display: block;

            }


            .main-nav ul {

                flex-direction: column;

                align-items:
                    flex-start;

            }


            .main-nav a {

                font-size: 1rem;

            }


            .menu-button {

                display: block;

            }


            .club-grid,
            .ride-layout,
            .workshop-grid {

                grid-template-columns:
                    1fr;

            }


            .card-grid {

                grid-template-columns:
                    1fr;

            }


            .club-number {

                min-height: 350px;

            }


            .garage-visual {

                min-height: 340px;

            }

        }


        @media
        (max-width: 680px) {

            .container {

                width:
                    min(
                        calc(100% - 28px),
                        var(--container-width)
                    );

            }


            .header-inner {

                min-height: 70px;

            }


            .main-nav {

                top: 70px;

            }


            .brand-sub {

                display: none;

            }


            .hero-inner {

                padding-top: 100px;

            }


            .hero-data {

                gap: 25px;

            }


            .club-features {

                grid-template-columns:
                    1fr;

            }


            .event {

                grid-template-columns:
                    1fr;

                gap: 12px;

            }


            .event-type {

                width:
                    fit-content;

            }


            .footer-inner {

                flex-direction:
                    column;

                align-items:
                    flex-start;

            }

        }