/* Gemeinsames Hero aller Unterseiten; die Startseite bleibt unverändert. */
.page-hero,
.ride-hero,
.base-hero {
    position: relative;
    min-height: clamp(350px, 29vw, 430px);
    display: grid;
    align-items: center;
    padding-block: clamp(3rem, 5vw, 4.25rem);
    overflow: hidden;
    color: var(--white);
    isolation: isolate;
    background: var(--forest-950);
}

.page-hero::before,
.ride-hero::after,
.base-hero--image::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    content: "";
    background: linear-gradient(
        90deg,
        rgb(3 39 29 / 86%) 0%,
        rgb(3 39 29 / 67%) 34%,
        rgb(3 39 29 / 28%) 58%,
        rgb(3 39 29 / 6%) 82%,
        transparent 100%
    );
    pointer-events: none;
}

.page-hero::after,
.page-hero--news::after,
.page-hero--praesidium::after,
.page-hero--contact::after,
.page-hero--legal::after,
.page-hero--vereine::after,
.page-hero--club::after,
.page-hero--athletes::after,
.base-hero::before {
    display: none;
}

.page-hero__media,
.ride-hero > img,
.base-hero__image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    filter: saturate(.96) brightness(1.04) contrast(1.02);
}

.page-hero > .container,
.ride-hero__content,
.base-hero__content {
    position: relative;
    z-index: 2;
}

.ride-hero__content,
.base-hero__content {
    padding-block: 0;
}

.base-hero__mark {
    display: none;
}

/* Fotofreie Unterseiten: ein gemeinsames System mit seitenbezogenen Motiven. */
.page-hero--graphic {
    min-height: clamp(330px, 28vw, 420px);
    background:
        radial-gradient(circle at 78% 45%, rgb(112 197 65 / 14%), transparent 24rem),
        linear-gradient(118deg, #03271d 0%, #06432f 58%, #073626 100%);
}

.page-hero--graphic h1 {
    max-width: 820px;
    font-size: clamp(2.75rem, 4.35vw, 4.55rem);
    line-height: .98;
    letter-spacing: -.025em;
}

.page-hero--graphic p:last-child {
    max-width: 620px;
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.55;
}

.page-hero--graphic .page-hero__media {
    display: none;
}

.page-hero--graphic::before {
    z-index: 0;
    background:
        repeating-radial-gradient(ellipse at 84% 54%, transparent 0 25px, rgb(151 207 116 / 10%) 26px 28px, transparent 29px 48px),
        linear-gradient(126deg, transparent 0 55%, rgb(255 255 255 / 3%) 55% 57%, transparent 57% 100%);
}

.page-hero--graphic::after {
    position: absolute;
    z-index: 1;
    right: -8vw;
    bottom: -38%;
    width: min(58vw, 760px);
    height: 92%;
    display: block;
    content: "";
    border: clamp(14px, 2vw, 28px) solid var(--green-400);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    opacity: .88;
    transform: rotate(-13deg);
    pointer-events: none;
}

.page-hero--calendar::after {
    right: 9%;
    bottom: 13%;
    width: clamp(150px, 18vw, 250px);
    height: clamp(150px, 18vw, 250px);
    border: 2px solid rgb(255 255 255 / 16%);
    border-radius: 1.4rem;
    background:
        linear-gradient(rgb(112 197 65 / 82%), rgb(112 197 65 / 82%)) 0 22% / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 32%, rgb(255 255 255 / 10%) 33% 34%),
        repeating-linear-gradient(0deg, transparent 0 23%, rgb(255 255 255 / 10%) 24% 25%);
    opacity: .9;
    transform: rotate(4deg);
}

.page-hero--contact::after {
    right: 8%;
    bottom: 17%;
    width: clamp(210px, 27vw, 390px);
    height: clamp(130px, 16vw, 230px);
    border: 2px solid rgb(255 255 255 / 19%);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, transparent 49%, rgb(112 197 65 / 75%) 50% 51%, transparent 52%);
    opacity: .86;
    transform: rotate(-5deg);
}

.page-hero--praesidium::after {
    right: 8%;
    bottom: -8%;
    width: clamp(260px, 34vw, 500px);
    height: clamp(220px, 28vw, 410px);
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle, rgb(112 197 65 / 75%) 0 8%, transparent 9%) 50% 8% / 28% 28% no-repeat,
        radial-gradient(circle, rgb(255 255 255 / 20%) 0 8%, transparent 9%) 8% 52% / 28% 28% no-repeat,
        radial-gradient(circle, rgb(255 255 255 / 20%) 0 8%, transparent 9%) 92% 52% / 28% 28% no-repeat,
        linear-gradient(32deg, transparent 48%, rgb(255 255 255 / 11%) 49% 51%, transparent 52%),
        linear-gradient(-32deg, transparent 48%, rgb(255 255 255 / 11%) 49% 51%, transparent 52%);
    opacity: 1;
    transform: none;
}

.page-hero--officials::after {
    transform: rotate(180deg);
}

.page-hero--legal::after {
    right: 9%;
    bottom: 12%;
    width: clamp(150px, 18vw, 240px);
    height: clamp(190px, 23vw, 310px);
    border: 2px solid rgb(255 255 255 / 18%);
    border-radius: 1rem;
    background: repeating-linear-gradient(0deg, transparent 0 18px, rgb(255 255 255 / 11%) 19px 21px);
    opacity: .84;
    transform: rotate(5deg);
}

.page-hero--news::after {
    right: 7%;
    bottom: 12%;
    width: clamp(250px, 31vw, 450px);
    height: clamp(190px, 23vw, 330px);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(90deg, rgb(112 197 65 / 82%) 0 72%, transparent 72%) 0 8% / 100% 8px no-repeat,
        linear-gradient(90deg, rgb(255 255 255 / 20%) 0 88%, transparent 88%) 0 33% / 100% 5px no-repeat,
        linear-gradient(90deg, rgb(255 255 255 / 14%) 0 64%, transparent 64%) 0 55% / 100% 5px no-repeat,
        linear-gradient(90deg, rgb(255 255 255 / 10%) 0 78%, transparent 78%) 0 77% / 100% 5px no-repeat;
    opacity: .9;
    transform: rotate(-4deg);
}

.page-hero--gallery::after {
    right: 7%;
    bottom: 8%;
    width: clamp(270px, 34vw, 500px);
    height: clamp(210px, 25vw, 370px);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(145deg, rgb(112 197 65 / 72%), rgb(112 197 65 / 20%)) 4% 15% / 42% 46% no-repeat,
        linear-gradient(145deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 4%)) 76% 4% / 35% 38% no-repeat,
        linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%)) 56% 82% / 52% 43% no-repeat;
    opacity: .88;
    transform: rotate(5deg);
}

.page-hero--vereine::after {
    right: 6%;
    bottom: 3%;
    width: clamp(300px, 38vw, 550px);
    height: clamp(230px, 28vw, 410px);
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle, rgb(112 197 65 / 78%) 0 9%, transparent 10%) 50% 5% / 32% 32% no-repeat,
        radial-gradient(circle, rgb(255 255 255 / 18%) 0 9%, transparent 10%) 5% 88% / 32% 32% no-repeat,
        radial-gradient(circle, rgb(255 255 255 / 18%) 0 9%, transparent 10%) 95% 88% / 32% 32% no-repeat,
        linear-gradient(58deg, transparent 49%, rgb(255 255 255 / 12%) 50% 51%, transparent 52%),
        linear-gradient(-58deg, transparent 49%, rgb(255 255 255 / 12%) 50% 51%, transparent 52%);
    opacity: .95;
    transform: none;
}

.page-hero--athletes::after {
    right: 6%;
    bottom: -22%;
    width: clamp(320px, 42vw, 620px);
    height: clamp(260px, 34vw, 500px);
    border: clamp(12px, 1.5vw, 22px) solid rgb(255 255 255 / 12%);
    border-left-color: var(--green-400);
    border-radius: 50%;
    background: radial-gradient(circle at center, transparent 0 48%, rgb(112 197 65 / 10%) 49% 51%, transparent 52%);
    opacity: .9;
    transform: rotate(-18deg);
}

.page-hero h1,
.ride-hero h1,
.base-hero h1 {
    color: var(--white);
    text-wrap: balance;
}

.page-hero h1 {
    font-size: clamp(3.35rem, 5.5vw, 5.75rem);
    line-height: .94;
    text-shadow: 0 2px 18px rgb(2 25 18 / 26%);
}

.page-hero p:last-child,
.ride-hero__content > p:not(.eyebrow),
.base-hero__content > p:not(.eyebrow) {
    max-width: 680px;
    color: rgb(255 255 255 / 92%);
    font-weight: 650;
    text-wrap: pretty;
}

@media (max-width: 760px) {
    .page-hero,
    .ride-hero,
    .base-hero {
        min-height: 330px;
        align-items: center;
        padding-block: 2.75rem;
    }

    .page-hero::before,
    .ride-hero::after,
    .base-hero--image::after {
        background: linear-gradient(
            90deg,
            rgb(3 39 29 / 72%) 0%,
            rgb(3 39 29 / 47%) 42%,
            rgb(3 39 29 / 16%) 70%,
            transparent 100%
        ) !important;
    }

    .page-hero__media,
    .ride-hero > img,
    .base-hero__image {
        object-position: 46% center;
        filter: saturate(.98) brightness(1.14) contrast(1.02) !important;
    }

    .page-hero h1,
    .ride-hero h1,
    .base-hero h1 {
        font-size: clamp(2.45rem, 11vw, 3.35rem);
        line-height: .92;
        text-shadow: 0 2px 14px rgb(2 25 18 / 44%);
    }

    .page-hero .eyebrow,
    .ride-hero .eyebrow,
    .base-hero .eyebrow {
        max-width: 100%;
        font-size: .68rem;
        line-height: 1.45;
        letter-spacing: .11em;
        overflow-wrap: anywhere;
    }

    .page-hero p:last-child,
    .ride-hero__content > p:not(.eyebrow),
    .base-hero__content > p:not(.eyebrow) {
        margin-top: 1rem;
        font-size: .94rem;
        line-height: 1.45;
        text-shadow: 0 1px 10px rgb(2 25 18 / 48%);
    }

    .page-hero--graphic::after {
        right: -24%;
        opacity: .38;
    }

    .page-hero--graphic h1 {
        font-size: clamp(2.15rem, 9.5vw, 2.85rem);
        line-height: 1;
        letter-spacing: -.02em;
    }

    .page-hero--calendar::after,
    .page-hero--contact::after,
    .page-hero--praesidium::after,
    .page-hero--legal::after,
    .page-hero--news::after,
    .page-hero--gallery::after,
    .page-hero--vereine::after,
    .page-hero--athletes::after {
        right: -12%;
        opacity: .34;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero *,
    .ride-hero *,
    .base-hero * {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 390px) {
    .page-hero,
    .ride-hero,
    .base-hero {
        min-height: 310px;
        padding-block: 2.35rem;
    }

    .page-hero h1,
    .ride-hero h1,
    .base-hero h1 {
        font-size: clamp(2.25rem, 12vw, 2.8rem);
    }
}

@media (prefers-contrast: more) {
    .page-hero::before,
    .ride-hero::after,
    .base-hero--image::after {
        background: linear-gradient(90deg, rgb(2 30 22 / 98%) 0%, rgb(2 30 22 / 88%) 64%, rgb(2 30 22 / 55%) 100%);
    }
}

@media print {
    .page-hero,
    .ride-hero,
    .base-hero {
        min-height: auto;
        padding-block: 1.5rem;
        color: #000;
        background: #fff;
    }

    .page-hero__media,
    .ride-hero > img,
    .base-hero__image,
    .page-hero::before,
    .ride-hero::after,
    .base-hero--image::after {
        display: none;
    }
}