/* ════════════════════════════════════════════════════════════════════
   ALLGEMEINE ARTIKEL
   Bilder, Datum und Texte bilden die Grundlage für gewöhnliche Beiträge.
   Dokumente erscheinen nur, wenn sie tatsächlich vorhanden sind.
   Verlinkte Bilder bleiben gut erkennbar und per Tastatur erreichbar.
   Diese Regeln gelten unabhängig vom gewählten Artikeltyp.
   ════════════════════════════════════════════════════════════════════ */

.article__image {
    min-height: 320px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.article__image:not([style]) {
    display: none;
}

.article__date {
    margin-block: 20px 8px;
    color: var(--color-primary, #bb2028);
    font-size: 14px;
}

.article__title {
    margin-bottom: 20px;
}

.article__lead, .article__main {
    white-space: normal;
    line-height: 1.65;
}

.article__lead + .article__main {
    margin-top: 20px;
}

.article__documents:empty {
    display: none;
}

.article__documents ul {
    margin-block: 24px 0;
}

a.article__image--linked {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.article__image--linked:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}

.articles > article[id], .articles > section[id] {
    scroll-margin-top: 110px;
}

/* ════════════════════════════════════════════════════════════════════
   STARTBILD
   Der große Einstieg verbindet ein Hintergrundfoto mit gut lesbarem Text.
   Slogan, Beschreibung und Aktionslinks erhalten eine klare Gewichtung.
   Auf schmalen Bildschirmen steht das Foto über dem Inhalt.
   Die Höhe berücksichtigt auf Desktop auch den folgenden Seiteninhalt.
   ════════════════════════════════════════════════════════════════════ */

.articles.start .article.Startbild {
    --hero-primary: var(--color-primary, #bb2028);
    --hero-text: #17191d;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(560px, 45vw, 800px);
    padding: clamp(48px, 5vw, 88px) clamp(24px, 7vw, 140px);
    background: #f7f7f3;
    color: var(--hero-text);
    font-family: "Manrope", sans-serif;
}

.articles.start .Startbild > .article__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    min-height: 0;
    margin: 0;
    background-size: cover;
    background-position: right center;
}

.articles.start .Startbild::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient( 90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 94%) 20%, rgb(255 255 255 / 78%) 34%, rgb(255 255 255 / 30%) 48%, rgb(255 255 255 / 0%) 65% );
    pointer-events: none;
    content: "";
}

.articles.start .Startbild > .article__date {
    display: none;
}

.articles.start .Startbild > .article__text, .articles.start .Startbild > .article__documents {
    width: 48%;
    max-width: 620px;
    min-width: 0;
}

.articles.start .Startbild .article__main, .articles.start .Startbild .article__lead {
    white-space: normal;
}

.articles.start .Startbild .article__main > :is(h2, h3) {
    margin: 0;
    padding: 0;
    color: var(--hero-text);
    font-family: inherit;
    font-size: clamp(42px, 4.2vw, 76px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.articles.start .Startbild .article__main > h3 {
    color: var(--hero-primary);
}

.articles.start .Startbild .article__main > p {
    max-width: 510px;
    margin: 24px 0 0;
    font-size: clamp(16px, 1.15vw, 20px);
    font-weight: 400;
    line-height: 1.6;
}

.articles.start .Startbild .article__lead {
    margin-bottom: 24px;
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.6;
}

.articles.start .Startbild .article__main > p:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: none;
    margin-top: 32px;
}

.articles.start .Startbild .article__main > p:last-child > a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: var(--hero-button-height);
    padding: 15px 26px;
    border: 1.5px solid var(--hero-primary);
    border-radius: 999px;
    background: var(--hero-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease;
}

.articles.start .Startbild .article__main > p:last-child > a::after {
    content: "→";
    font-size: 20px;
    line-height: 1;
}

.articles.start .Startbild .article__main > p:last-child > a + a {
    border-color: var(--hero-text);
    background: rgb(255 255 255 / 85%);
    color: var(--hero-text);
}

.articles.start .Startbild .article__main > p:last-child > a:hover {
    border-color: var(--hero-text);
    background: var(--hero-text);
    color: #fff;
}

.articles.start .Startbild a:focus-visible {
    outline: 3px solid var(--hero-text);
    outline-offset: 4px;
}

.articles.start .Startbild > .article__documents ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.articles.start .Startbild > .article__documents a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--hero-text);
    font-size: 14px;
    text-underline-offset: 4px;
}

.articles.start .Startbild > .article__documents a::after {
    content: "↓";
}

@media (max-width: 991px) {
    .articles.start .article.Startbild {
        display: block;
        min-height: 0;
        padding: 0 24px 48px;
        background: #fff;
    }

    .articles.start .Startbild::before {
        display: none;
    }

    .articles.start .Startbild > .article__image {
        position: relative;
        inset: auto;
        z-index: auto;
        height: clamp(300px, 52vw, 480px);
        margin: 0 -24px 32px;
    }

    .articles.start .Startbild > .article__text, .articles.start .Startbild > .article__documents {
        width: 100%;
        max-width: 680px;
        margin-inline: auto;
    }

    .articles.start .Startbild .article__main > :is(h2, h3) {
        font-size: clamp(40px, 6.5vw, 64px);
    }

    .articles.start .Startbild .article__main > p {
        max-width: 600px;
        font-size: 17px;
    }

}

@media (max-width: 575px) {
    .articles.start .article.Startbild {
        padding: 0 20px 40px;
    }

    .articles.start .Startbild > .article__image {
        height: clamp(280px, 85vw, 380px);
        margin: 0 -20px 28px;
    }

    .articles.start .Startbild .article__main > :is(h2, h3) {
        font-size: clamp(34px, 9.5vw, 50px);
        line-height: 1.08;
    }

    .articles.start .Startbild .article__main > p {
        margin-top: 22px;
        font-size: 16px;
    }

    .articles.start .Startbild .article__main > p:last-child {
        flex-direction: column;
    }

    .articles.start .Startbild .article__main > p:last-child > a {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .articles.start .Startbild .article__main > p:last-child > a {
        transition: none;
    }

}

@media (min-width: 1280px) {
    .articles.start .article.Startbild {
        padding-inline: var(--site-gutter);
    }

}

@media (min-width: 992px) and (max-width: 1279px) {
    .articles.start .article.Startbild {
        padding-inline: 24px;
    }

}

@media (min-width: 1024px) {
    .articles.start .article.Startbild {
        --hero-height: clamp(560px, 45vw, 800px);
        min-height: clamp( calc(var(--hero-height) - 100px), calc(100svh - 228px), var(--hero-height) );
        padding-block: clamp(32px, 5vh, 72px);
    }

}

@media (min-width: 1024px) and (max-width: 1279px) {
    .articles.start .article.Startbild {
        min-height: clamp( calc(var(--hero-height) - 100px), calc(100svh - 200px), var(--hero-height) );
    }

}

/* ════════════════════════════════════════════════════════════════════
   SPONSOREN
   Partnerlogos erscheinen vollständig und ohne Beschnitt.
   Abstände sorgen für eine ruhige und gleichmäßige Darstellung.
   Bei wenig Platz verteilen sich die Logos auf mehrere Zeilen.
   Zusätzliche Texte erhalten bei Bedarf eine eigene Zeile.
   ════════════════════════════════════════════════════════════════════ */

.article.Sponsoren {
    box-sizing: border-box;
    position: relative;
    isolation: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 44px var(--site-gutter);
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    flex-wrap: wrap;
    gap: 28px clamp(28px, 4vw, 64px);
}

.article.Sponsoren > .article__image {
    position: static;
    inset: auto;
    z-index: auto;
    flex: 0 1 190px;
    width: 190px;
    max-width: 100%;
    height: 100px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: none;
    opacity: 1;
    mix-blend-mode: normal;
}

.article.Sponsoren > .article__text:empty, .article.Sponsoren > .article__documents:empty {
    display: none;
}

.article.Sponsoren > .article__title, .article.Sponsoren > .article__text, .article.Sponsoren > .article__documents {
    flex: 0 0 100%;
}

@media (max-width: 575px) {
    .article.Sponsoren {
        padding: 32px 20px;
        gap: 24px;
    }

    .article.Sponsoren > .article__image {
        flex-basis: 160px;
        width: auto;
        height: 85px;
        flex: 0 1 calc((100% - 24px) / 2);
    }

}

/* ════════════════════════════════════════════════════════════════════
   QUICKMENÜ
   Das Quickmenü führt direkt zu den wichtigsten Seitenbereichen.
   Ein dezenter Bildverlauf hält Überschrift und Links gut lesbar.
   Die Links sind als kompakte, gut anklickbare Flächen gestaltet.
   Auf Smartphones passen sich Abstände und Schriftgrößen an.
   ════════════════════════════════════════════════════════════════════ */

.quick-menu {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 300px;
    padding: 42px var(--site-gutter, 24px);
    overflow: hidden;
    background: #f7f7f3;
}

.quick-menu__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
}

.quick-menu::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient( 90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.90) 18%, rgba(255, 255, 255, 0.70) 30%, rgba(255, 255, 255, 0.30) 43%, rgba(255, 255, 255, 0) 58% );
    pointer-events: none;
    content: "";
}

.quick-menu--no-image::before {
    display: none;
}

.quick-menu__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.quick-menu__title {
    max-width: 620px;
    margin: 0 0 22px;
    color: #171c26;
    font-size: clamp(36px, 3.3vw, 52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.045em;
    font-family: "Manrope", sans-serif;
}

.quick-menu__navigation {
    max-width: 680px;
}

.quick-menu__navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

.quick-menu__navigation li {
    display: flex;
    align-items: center;
}

.quick-menu__navigation li:not(:last-child)::after {
    margin-inline: 12px;
    color: #8b8e94;
    content: "·";
}

.quick-menu__navigation a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: #252a33;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 12px;
    border: 1px solid rgba(30, 35, 45, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.68);
    font-family: "Manrope", sans-serif;
    line-height: 1.35;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.quick-menu__navigation a:hover {
    color: #df0024;
    text-decoration: none;
    text-underline-offset: 5px;
    border-color: #df0024;
    background: #fff;
}

.quick-menu__title::after {
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 18px;
    border-radius: 3px;
    background: #df0024;
    content: "";
}

.quick-menu__navigation li::after, .quick-menu__navigation li:not(:last-child)::after {
    display: none;
}

.quick-menu__navigation a:focus-visible {
    outline: 3px solid #df0024;
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .quick-menu::before {
        background: linear-gradient( 90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 40%, rgba(255, 255, 255, 0.20) 85% );
    }

}

@media (max-width: 767px) {
    .quick-menu {
        min-height: 260px;
        padding: 36px 20px;
    }

    .quick-menu::before {
        background: rgba(255, 255, 255, 0.86);
    }

    .quick-menu__title {
        margin-bottom: 20px;
        font-size: clamp(32px, 7vw, 42px);
    }

    .quick-menu__navigation a {
        font-size: 12px;
        min-height: 34px;
        padding: 7px 10px;
    }

    .quick-menu__navigation li:not(:last-child)::after {
        margin-inline: 8px;
    }

    .quick-menu__title::after {
        margin-top: 14px;
    }

    .quick-menu__navigation ul {
        gap: 7px;
    }

}

/* ════════════════════════════════════════════════════════════════════
   TEXTBEREICHE
   Text und Bilder stehen auf großen Bildschirmen nebeneinander.
   Überschriften, Listen und Links bleiben einheitlich gestaltet.
   Tabellen sind auch auf kleinen Geräten gut zugänglich.
   Ohne Bild nutzt der Text den verfügbaren Platz.
   ════════════════════════════════════════════════════════════════════ */

.club-text {
    padding: 36px var(--site-gutter);
    background: #fff;
}

.club-text__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 20px 36px;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.club-text__title {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-text, #25272b);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.club-text__media {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.club-text__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.club-text__content {
    min-width: 0;
}

.club-text__body {
    color: var(--color-text, #25272b);
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.club-text__body, .club-text__body :where(p, span, li, td, th) {
    font-family: "Manrope", sans-serif !important;
}

.club-text__body p {
    margin: 0 0 18px;
}

.club-text__body :where(h2, h3, h4) {
    margin: 24px 0 14px;
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.club-text__body > :first-child {
    margin-top: 0;
}

.club-text__body > :last-child {
    margin-bottom: 0;
}

.club-text__body strong {
    font-weight: 700;
}

.club-text__body :where(h2, h3, h4) strong {
    color: var(--color-primary, #d60926);
}

.club-text__body a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 4px;
}

.club-text__body :where(ul, ol) {
    margin: 0 0 20px;
    padding-left: 22px;
}

.club-text__body li + li {
    margin-top: 8px;
}

.club-text:has(.club-text__body table) {
    background: #f7f7f3;
}

.club-text__body figure.table {
    width: 100%;
    margin: 0;
    padding: 18px 24px;
    overflow-x: auto;
    border-radius: 12px;
    background: #fff;
}

.club-text__body table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: #fff;
    font-size: 15px;
    line-height: 1.45;
}

.club-text__body :where(td, th) {
    padding: 9px 0;
    border: 0;
    text-align: left;
    vertical-align: top;
}

.club-text__body :where(td, th):first-child {
    width: 45%;
    padding-right: 20px;
    font-weight: 700;
}

.club-text__body :where(td, th) p {
    margin: 0;
}

.club-text--without-image .club-text__inner {
    grid-template-columns: minmax(0, 1fr);
}

.club-text--without-image .club-text__content {
    width: 100%;
    max-width: 900px;
}

@media (max-width: 767px) {
    .club-text {
        padding: 28px var(--site-gutter);
    }

    .club-text__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .club-text__title {
        grid-column: 1;
    }

    .club-text__body {
        font-size: 15px;
    }

    .club-text__body figure.table {
        padding: 14px 16px;
    }

    .club-text__body table {
        font-size: 14px;
    }

}

/* ════════════════════════════════════════════════════════════════════
   STATUTEN
   Statuten werden als eigenständiger, bewusst kompakter Bereich gezeigt.
   Dokumente lassen sich über gut erkennbare Schaltflächen öffnen.
   Text und Downloads stehen je nach Platz neben- oder untereinander.
   Auch die Bedienung mit der Tastatur wird berücksichtigt.
   ════════════════════════════════════════════════════════════════════ */

.club-statutes {
    padding: clamp(36px, 5vw, 64px) var(--site-gutter);
    background: #fff;
    padding-block: 24px;
}

.club-statutes__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px 64px;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.club-statutes__inner--text-only {
    grid-template-columns: minmax(0, 1fr);
}

.club-statutes__content {
    min-width: 0;
    max-width: 800px;
}

.club-statutes__title {
    margin: 0 0 16px;
    color: var(--color-text, #25272b);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
    margin-bottom: 6px;
}

.club-statutes__body {
    color: var(--color-text, #25272b);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.club-statutes__body, .club-statutes__body :where(p, span, li) {
    font-family: "Manrope", sans-serif !important;
}

.club-statutes__body > :first-child {
    margin-top: 0;
}

.club-statutes__body > :last-child {
    margin-bottom: 0;
}

.club-statutes__body p {
    margin: 0 0 16px;
}

.club-statutes__body a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 4px;
}

.club-statutes__downloads {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 380px;
}

.club-statutes__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 999px;
    background: transparent;
    color: var(--color-primary, #d60926);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 160ms ease;
    border: 1.5px solid var(--color-primary, #d60926);
}

.club-statutes__download svg {
    flex-shrink: 0;
}

.club-statutes__download:hover {
    background: var(--color-primary, #d60926);
    color: #fff;
}

.club-statutes__download:focus-visible {
    outline: 3px solid var(--color-primary, #d60926);
    outline-offset: 4px;
}

.club-statutes__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .club-statutes {
        padding: 36px var(--site-gutter);
    }

    .club-statutes__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .club-statutes__downloads {
        width: 100%;
        max-width: none;
        align-items: flex-start;
    }

    .club-statutes__download {
        max-width: 100%;
        padding-inline: 20px;
    }

}

/* ════════════════════════════════════════════════════════════════════
   LEISTUNGEN
   Die Vorteile der Mitgliedschaft werden übersichtlich präsentiert.
   Einleitung und Foto ergänzen die einzelnen Leistungskarten.
   Auf kleineren Geräten stehen weniger Karten nebeneinander.
   So bleiben Symbole und Beschreibungen angenehm lesbar.
   ════════════════════════════════════════════════════════════════════ */

.club-benefits {
    padding: 36px var(--site-gutter);
    background: #f7f7f3;
}

.club-benefits__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.club-benefits__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
}

.club-benefits__intro--text-only {
    grid-template-columns: minmax(0, 1fr);
}

.club-benefits__content {
    min-width: 0;
}

.club-benefits__title {
    margin: 0 0 18px;
    color: var(--color-text, #25272b);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.club-benefits__body {
    color: var(--color-text, #25272b);
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.club-benefits__body, .club-benefits__body :where(p, span, li) {
    font-family: "Manrope", sans-serif !important;
}

.club-benefits__body p {
    margin: 0 0 16px;
}

.club-benefits__body :where(h2, h3, h4) {
    margin: 24px 0 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.club-benefits__body > :first-child {
    margin-top: 0;
}

.club-benefits__body > :last-child {
    margin-bottom: 0;
}

.club-benefits__body strong {
    font-weight: 700;
}

.club-benefits__body a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 4px;
}

.club-benefits__body :where(ul, ol) {
    margin: 0 0 16px;
    padding-left: 22px;
}

.club-benefits__photo {
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
}

.club-benefits__photo img {
    display: block;
    width: 100%;
    height: auto;
}

.club-benefits__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.club-benefits__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 22px 20px;
    border-radius: 12px;
    background: #fff;
}

.club-benefits__icon {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0;
    object-fit: contain;
}

.club-benefits__details {
    min-width: 0;
}

.club-benefits__heading {
    margin: 0 0 6px;
    padding: 0;
    color: var(--color-text, #25272b);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-wrap: initial;
    overflow-wrap: anywhere;
}

.club-benefits__description {
    margin: 0;
    padding: 0;
    color: #62666c;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .club-benefits__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 767px) {
    .club-benefits {
        padding: 28px var(--site-gutter);
    }

    .club-benefits__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .club-benefits__title {
        margin-bottom: 16px;
    }

    .club-benefits__body {
        font-size: 15px;
    }

    .club-benefits__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .club-benefits__item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .club-benefits__icon {
        width: 48px;
        height: 48px;
    }

    .club-benefits__heading {
        font-size: 16px;
    }

    .club-benefits__description {
        font-size: 14px;
    }

}

/* ════════════════════════════════════════════════════════════════════
   NEUMITGLIED
   Der Mitgliedschaftsbereich hebt die nächsten Schritte deutlich hervor.
   Nummerierte Hinweise und Downloads unterstützen die Anmeldung.
   Auf großen Bildschirmen sind Informationen und Aktionen getrennt.
   Auf Smartphones folgt alles in einer gut lesbaren Reihenfolge.
   ════════════════════════════════════════════════════════════════════ */

.club-membership {
    padding: 24px var(--site-gutter);
    background: #f7f7f3;
}

.club-membership__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 36px;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 32px;
    border-radius: 16px;
    background: var(--color-primary, #d60926);
    color: #fff;
}

.club-membership__inner--text-only {
    grid-template-columns: minmax(0, 1fr);
}

.club-membership__content {
    min-width: 0;
}

.club-membership__title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.club-membership__body {
    color: #fff;
    font-size: 17px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.club-membership__body, .club-membership__body :where(p, span, li), .club-membership__steps, .club-membership__steps :where(p, span, li) {
    font-family: "Manrope", sans-serif !important;
}

.club-membership__body :where(h2, h3, h4) {
    margin: 20px 0 12px;
    color: #fff;
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.club-membership__body p {
    margin: 0 0 10px;
}

.club-membership__body > :first-child {
    margin-top: 0;
}

.club-membership__body > :last-child {
    margin-bottom: 0;
}

.club-membership__body strong {
    font-weight: 700;
}

.club-membership__body a, .club-membership__steps a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.club-membership__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    min-width: 0;
    padding-left: 36px;
    border-left: 1px solid rgb(255 255 255 / 45%);
}

.club-membership__steps ol {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: membership-step;
}

.club-membership__steps ol > li {
    position: relative;
    min-height: 36px;
    margin: 0;
    padding: 5px 0 0 52px;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    counter-increment: membership-step;
}

.club-membership__steps ol > li::before {
    content: counter(membership-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary, #d60926);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.club-membership__steps li > p {
    margin: 0;
}

.club-membership__steps li > p + p {
    margin-top: 6px;
}

.club-membership__downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.club-membership__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary, #d60926);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 160ms ease, color 160ms ease;
}

.club-membership__download svg {
    flex-shrink: 0;
}

.club-membership__download:hover {
    background: transparent;
    color: #fff;
}

.club-membership__download:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.club-membership__body a:focus-visible, .club-membership__steps a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.club-membership__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .club-membership {
        padding-block: 20px;
    }

    .club-membership__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
        border-radius: 14px;
    }

    .club-membership__body {
        font-size: 15px;
    }

    .club-membership__actions {
        gap: 20px;
        padding-top: 24px;
        padding-left: 0;
        border-top: 1px solid rgb(255 255 255 / 45%);
        border-left: 0;
    }

    .club-membership__steps ol > li {
        padding-left: 48px;
        font-size: 15px;
    }

    .club-membership__download {
        width: 100%;
        padding-inline: 18px;
        font-size: 14px;
    }

    .club-membership__downloads {
        width: 100%;
    }

}

/* ════════════════════════════════════════════════════════════════════
   MITGLIEDER
   Die Mitgliederfotos bleiben im einheitlichen Hochformat.
   Je nach Bildschirmbreite erscheinen zwei bis acht Fotos pro Reihe.
   Auf kleineren Geräten werden zwei Reihen gleichzeitig angezeigt.
   Die Seitennavigation passt sich der sichtbaren Anzahl an.
   ════════════════════════════════════════════════════════════════════ */

.club-members {
    padding: clamp(48px, 6vw, 88px) var(--site-gutter);
    background: #fff;
    --members-per-page: 8;
}

.club-members__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.club-members__title {
    margin: 0 0 24px;
    color: var(--color-text, #25272b);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.club-members__intro {
    max-width: 850px;
    margin-bottom: 36px;
    color: var(--color-text, #25272b);
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.club-members__intro, .club-members__intro :where(p, span, li) {
    font-family: "Manrope", sans-serif !important;
}

.club-members__intro > :first-child {
    margin-top: 0;
}

.club-members__intro > :last-child {
    margin-bottom: 0;
}

.club-members__intro a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 4px;
}

.club-members__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 28px 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.club-members__item {
    min-width: 0;
}

.club-members__figure {
    margin: 0;
}

.club-members__portrait {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 14px;
    background: #f7f7f3;
}

.club-members__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.club-members__caption {
    padding: 12px 0 0;
    text-align: center;
}

.club-members__name {
    margin: 0;
    color: var(--color-text, #25272b);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.club-members__description {
    margin: 3px 0 0;
    padding: 0;
    color: #62666c;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: auto;
}

.club-members__caption .club-members__name {
    margin: 0 !important;
    padding: 0;
    line-height: 1.35;
}

.club-members__caption .club-members__description {
    margin: 3px 0 0 !important;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
}

.club-members__item[hidden], .club-members__pagination[hidden] {
    display: none !important;
}

.club-members__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
}

.club-members__pagination button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #deded8;
    border-radius: 50%;
    background: #fff;
    color: var(--color-text, #25272b);
    font: inherit;
    font-size: 22px;
    cursor: pointer;
}

.club-members__pagination button:hover:not(:disabled) {
    border-color: var(--color-primary, #d60926);
    background: var(--color-primary, #d60926);
    color: #fff;
}

.club-members__pagination button:disabled {
    opacity: 0.35;
    cursor: default;
}

.club-members__pagination button:focus-visible {
    outline: 3px solid var(--color-primary, #d60926);
    outline-offset: 4px;
}

.club-members__page {
    min-width: 60px;
    color: var(--color-text, #25272b);
    font-size: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 1100px) and (max-width: 1439px) {
    .club-members__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .club-members {
        --members-per-page: 6;
    }

}

@media (min-width: 901px) and (max-width: 1099px) {
    .club-members {
        --members-per-page: 5;
    }

    .club-members__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

}

@media (min-width: 701px) and (max-width: 900px) {
    .club-members {
        --members-per-page: 8;
    }

    .club-members__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px 16px;
    }

}

@media (min-width: 601px) and (max-width: 700px) {
    .club-members {
        --members-per-page: 6;
    }

    .club-members__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 14px;
    }

}

@media (max-width: 600px) {
    .club-members {
        padding: 40px var(--site-gutter);
        --members-per-page: 4;
    }

    .club-members__title {
        margin-bottom: 18px;
    }

    .club-members__intro {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .club-members__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
        margin-top: 24px;
    }

    .club-members__portrait {
        border-radius: 10px;
    }

    .club-members__caption {
        padding-top: 12px;
    }

    .club-members__name {
        font-size: 15px;
    }

    .club-members__description {
        font-size: 13px;
    }

    .club-members__caption .club-members__description {
        font-size: 13px;
    }

    .club-members__pagination {
        margin-top: 24px;
    }

}

/* ════════════════════════════════════════════════════════════════════
   VEREINSMEISTER
   Aktuelle Erfolge erhalten Platz für Bilder und Beschreibungen.
   Die bisherigen Vereinsmeister sind in einer Tabelle nachlesbar.
   Auf kleinen Bildschirmen werden Inhalte untereinander angeordnet.
   Breite Tabellen bleiben durch seitliches Scrollen nutzbar.
   ════════════════════════════════════════════════════════════════════ */

.club-champions {
    padding: clamp(48px, 6vw, 88px) var(--site-gutter);
    background: #f7f7f3;
}

.club-champions__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.club-champions__title {
    margin: 0 0 32px;
    color: var(--color-text, #25272b);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.club-champions__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
}

.club-champions__intro--text-only {
    grid-template-columns: minmax(0, 1fr);
}

.club-champions__media {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.club-champions__figure {
    margin: 0;
}

.club-champions__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.club-champions__caption {
    margin-top: 12px;
    color: #62666c;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}

.club-champions__body {
    min-width: 0;
    color: var(--color-text, #25272b);
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.club-champions__body, .club-champions__body :where(p, span, li), .club-champions__history :where(td, th, p, span) {
    font-family: "Manrope", sans-serif !important;
}

.club-champions__body > :first-child {
    margin-top: 0;
}

.club-champions__body > :last-child {
    margin-bottom: 0;
}

.club-champions__body p {
    margin: 0 0 18px;
}

.club-champions__body :where(h2, h3, h4) {
    margin: 24px 0 16px;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.025em;
}

.club-champions__body a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 4px;
}

.club-champions__history {
    display: grid;
    gap: 24px;
    margin-top: clamp(36px, 5vw, 64px);
}

.club-champions__table-scroll {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid #e7e7e3;
    border-radius: 14px;
    background: #fff;
}

.club-champions__table-scroll:focus-visible {
    outline: 3px solid var(--color-primary, #d60926);
    outline-offset: 4px;
}

.club-champions__table-scroll figure.table {
    width: 100%;
    margin: 0;
}

.club-champions__table-scroll table {
    width: 100%;
    min-width: 520px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    color: var(--color-text, #25272b);
    font-size: 15px;
    line-height: 1.5;
}

.club-champions__table-scroll :where(td, th) {
    padding: 16px 24px;
    border: 0;
    border-bottom: 1px solid #e7e7e3;
    text-align: left;
    vertical-align: middle;
}

.club-champions__table-scroll th {
    background: #efefea;
    font-weight: 700;
}

.club-champions__table-scroll :where(td, th):first-child {
    width: 120px;
    color: var(--color-primary, #d60926);
    font-weight: 700;
    white-space: nowrap;
}

.club-champions__table-scroll tbody tr:nth-child(even) {
    background: #fafaf8;
}

.club-champions__table-scroll tbody tr:last-child > :where(td, th) {
    border-bottom: 0;
}

.club-champions__table-scroll td p {
    margin: 0;
}

@media (max-width: 767px) {
    .club-champions {
        padding: 40px var(--site-gutter);
    }

    .club-champions__title {
        margin-bottom: 24px;
    }

    .club-champions__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .club-champions__figure img {
        border-radius: 14px;
    }

    .club-champions__body {
        font-size: 15px;
    }

    .club-champions__table-scroll table {
        font-size: 14px;
    }

    .club-champions__table-scroll :where(td, th) {
        padding: 13px 16px;
    }

    .club-champions__table-scroll :where(td, th):first-child {
        width: 90px;
    }

}

/* ════════════════════════════════════════════════════════════════════
   TRAININGSLÄUFE
   Der nächste Trainingslauf wird mit Termin und Treffpunkt hervorgehoben.
   Vergangene Termine sind platzsparend im Archiv erreichbar.
   Zusätzliche Beschreibungen bleiben bei Bedarf sichtbar.
   Auf mobilen Geräten ordnen sich alle Angaben übersichtlich an.
   ════════════════════════════════════════════════════════════════════ */

.training-module {
    padding: 36px var(--site-gutter);
    background: #f7f7f3;
}

.training-module__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.training-module__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
}

.training-module__content {
    min-width: 0;
}

.training-module__title {
    margin: 0 0 22px;
    color: var(--color-text, #25272b);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.training-module__body, .training-module__description {
    color: var(--color-text, #25272b);
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.training-module__body, .training-module__body :where(p, span, li), .training-module__description, .training-module__description :where(p, span, li) {
    font-family: "Manrope", sans-serif !important;
}

.training-module__body p, .training-module__description p {
    margin: 0 0 16px;
}

.training-module__body > :first-child, .training-module__description > :first-child {
    margin-top: 0;
}

.training-module__body > :last-child, .training-module__description > :last-child {
    margin-bottom: 0;
}

.training-module__body a, .training-module__description a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 3px;
}

.training-module__next {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #edb6bf;
    border-radius: 12px;
    background: #fff;
    align-self: start;
}

.training-module__next-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: var(--color-primary, #d60926);
    color: #fff;
}

.training-module__next-header svg {
    flex-shrink: 0;
}

.training-module__next-header h3 {
    margin: 0;
    color: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.training-module__next-body {
    padding: 20px 22px;
}

.training-module__date {
    margin: 0 0 8px;
    color: var(--color-text, #25272b);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.training-module__time {
    margin: 0;
    color: var(--color-primary, #d60926);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.training-module__run-title {
    margin: 0 0 10px;
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.training-module__location {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    min-width: 0;
    color: var(--color-text, #25272b);
}

.training-module__location svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-primary, #d60926);
    margin: 0;
}

.training-module__description {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e7e7e3;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    padding: 0;
    border: 0;
}

.training-module__empty {
    margin: 0;
    color: #62666c;
    font-size: 16px;
    line-height: 1.65;
}

.training-module__archive {
    margin-top: 32px;
    overflow: hidden;
    border: 1px solid #e7e7e3;
    border-radius: 12px;
    background: #fff;
}

.training-module__archive summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 26px;
    list-style: none;
    cursor: pointer;
}

.training-module__archive summary::-webkit-details-marker {
    display: none;
}

.training-module__archive summary strong {
    display: block;
    color: var(--color-text, #25272b);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.training-module__archive-subtitle {
    display: block;
    margin-top: 4px;
    color: #62666c;
    font-size: 14px;
    line-height: 1.4;
}

.training-module__toggle {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--color-primary, #d60926);
}

.training-module__toggle::before, .training-module__toggle::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 3px;
    width: 16px;
    height: 2px;
    background: currentColor;
}

.training-module__toggle::after {
    transform: rotate(90deg);
}

.training-module__archive[open] .training-module__toggle::after {
    display: none;
}

.training-module__archive summary:focus-visible {
    outline: 3px solid var(--color-primary, #d60926);
    outline-offset: -4px;
}

.training-module__archive-list {
    margin: 0;
    padding: 0 26px;
    list-style: none;
}

.training-module__archive-item {
    display: grid;
    grid-template-columns: 110px minmax(160px, 1fr) minmax(0, 2fr) auto;
    align-items: start;
    gap: 24px;
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid #e7e7e3;
}

.training-module__archive-item time {
    color: var(--color-primary, #d60926);
    font-size: 15px;
    font-weight: 700;
}

.training-module__archive-item h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.training-module__archive-item p {
    margin: 5px 0 0;
    color: #62666c;
    font-size: 14px;
    line-height: 1.5;
}

.training-module__archive-time {
    font-size: 14px;
    white-space: nowrap;
}

.training-module__archive-empty {
    margin: 0;
    padding: 20px 26px;
    border-top: 1px solid #e7e7e3;
    color: #62666c;
    font-size: 15px;
    line-height: 1.6;
}

.training-module__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin-bottom: 18px;
}

.training-module__description p {
    margin: 0 0 10px;
}

.training-module__description > :last-child {
    margin-bottom: 0;
}

.training-module__archive-content {
    min-width: 0;
}

.training-module__archive-description {
    margin-top: 10px;
    color: var(--color-text, #25272b);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    min-width: 0;
    margin: 0;
}

.training-module__archive-description, .training-module__archive-description :where(p, span, li) {
    font-family: "Manrope", sans-serif !important;
}

.training-module__archive-description p {
    margin: 0 0 10px;
}

.training-module__archive-description > :first-child {
    margin-top: 0;
}

.training-module__archive-description > :last-child {
    margin-bottom: 0;
}

.training-module__archive-description a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .training-module {
        padding-block: 28px;
    }

    .training-module__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .training-module__body {
        font-size: 15px;
    }

    .training-module__next-header {
        padding: 14px 18px;
    }

    .training-module__next-body {
        padding: 18px;
    }

    .training-module__archive {
        margin-top: 24px;
    }

    .training-module__archive summary {
        padding: 20px;
    }

    .training-module__archive summary strong {
        font-size: 18px;
    }

    .training-module__archive-list {
        padding-inline: 20px;
    }

    .training-module__archive-item time {
        grid-column: 1 / -1;
    }

    .training-module__next-header h3 {
        font-size: 19px;
    }

    .training-module__meta {
        gap: 6px 16px;
        margin-bottom: 16px;
    }

    .training-module__time, .training-module__location {
        font-size: 14px;
    }

}

@media (max-width: 900px) {
    .training-module__archive-item {
        grid-template-columns: 110px minmax(0, 1fr) auto;
        gap: 12px 20px;
    }

    .training-module__archive-item > time {
        grid-column: 1;
        grid-row: 1;
    }

    .training-module__archive-content {
        grid-column: 2;
        grid-row: 1;
    }

    .training-module__archive-time {
        grid-column: 3;
        grid-row: 1;
    }

    .training-module__archive-description {
        grid-column: 2 / -1;
        grid-row: 2;
    }

}

@media (max-width: 600px) {
    .training-module__archive-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .training-module__archive-item > time {
        grid-column: 1;
        grid-row: 1;
    }

    .training-module__archive-time {
        grid-column: 2;
        grid-row: 1;
    }

    .training-module__archive-content {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .training-module__archive-description {
        grid-column: 1 / -1;
        grid-row: 3;
    }

}

/* ════════════════════════════════════════════════════════════════════
   LAUFSTRECKEN
   Laufstrecken lassen sich über eine Auswahl gezielt anzeigen.
   Karte, Streckenlänge und weitere Angaben stehen beieinander.
   Details und Tipps können bei Bedarf aufgeklappt werden.
   Auf Smartphones folgen Karte und Informationen untereinander.
   ════════════════════════════════════════════════════════════════════ */

.running-routes {
    padding: 36px var(--site-gutter);
    background: #f7f7f3;
}

.running-routes__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.running-routes__title {
    margin: 0 0 18px;
    color: var(--color-text, #25272b);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.running-routes__intro {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.65;
}

.running-routes__intro p {
    margin: 0 0 8px;
}

.running-routes__intro > :last-child {
    margin-bottom: 0;
}

.running-routes__intro a, .running-routes__body a {
    color: var(--color-primary, #d60926);
    text-underline-offset: 3px;
}

.running-routes__selector {
    max-width: 360px;
    margin-bottom: 24px;
}

.running-routes__selector label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.running-routes__selector select {
    width: 100%;
    min-height: 44px;
    padding: 10px 36px 10px 14px;
    border: 1px solid #d7d9dc;
    border-radius: 7px;
    background-color: #fff;
    color: var(--color-text, #25272b);
    font: inherit;
    font-size: 15px;
}

.running-routes__selector select:focus-visible {
    outline: 3px solid var(--color-primary, #d60926);
    outline-offset: 3px;
}

.running-routes__route {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-top: 24px;
}

.running-routes__route--no-image {
    grid-template-columns: minmax(0, 1fr);
}

.running-routes__route[hidden], .running-routes__selector[hidden] {
    display: none !important;
}

.running-routes__map {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e4df;
    border-radius: 12px;
    background: #fff;
}

.running-routes__map img {
    display: block;
    width: 100%;
    height: auto;
}

.running-routes__map:focus-visible {
    outline: 3px solid var(--color-primary, #d60926);
    outline-offset: 4px;
}

.running-routes__card {
    min-width: 0;
    padding: 28px;
    border-radius: 12px;
    background: #fff;
}

.running-routes__name {
    margin: 0 0 16px;
    color: var(--color-text, #25272b);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.running-routes__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.running-routes__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f4f4f2;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.running-routes__badge svg {
    flex-shrink: 0;
    color: var(--color-primary, #d60926);
}

.running-routes__facts {
    margin: 0 0 20px;
}

.running-routes__facts > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid #e7e7e3;
}

.running-routes__facts dt {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.running-routes__facts dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.running-routes__description summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid #f2d9de;
    border-radius: 7px;
    background: #fcf3f5;
    font-size: 16px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.running-routes__description summary::-webkit-details-marker {
    display: none;
}

.running-routes__description summary > span {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--color-primary, #d60926);
}

.running-routes__description summary > span::before, .running-routes__description summary > span::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 1px;
    width: 16px;
    height: 2px;
    background: currentColor;
}

.running-routes__description summary > span::after {
    transform: rotate(90deg);
}

.running-routes__description[open] summary > span::after {
    display: none;
}

.running-routes__description summary:focus-visible {
    outline: 3px solid var(--color-primary, #d60926);
    outline-offset: 3px;
}

.running-routes__body {
    padding-top: 14px;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.running-routes__intro, .running-routes__intro :where(p, span, li), .running-routes__body, .running-routes__body :where(p, span, li) {
    font-family: "Manrope", sans-serif !important;
}

.running-routes__body p {
    margin: 0 0 12px;
}

.running-routes__body > :first-child {
    margin-top: 0;
}

.running-routes__body > :last-child {
    margin-bottom: 0;
}

.running-routes__tip {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #fcf0f2;
}

.running-routes__tip strong {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary, #d60926);
    font-size: 16px;
    font-weight: 700;
}

.running-routes__tip p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.running-routes__empty {
    margin: 0;
    color: #62666c;
    font-size: 15px;
}

@media (max-width: 767px) {
    .running-routes {
        padding-block: 28px;
    }

    .running-routes__intro {
        font-size: 15px;
    }

    .running-routes__route {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .running-routes__card {
        padding: 22px 20px;
    }

    .running-routes__facts > div {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 12px;
    }

}