/* ------------------------------------------------------------------
   Bremen 1860 – Theme-Custom-Styles
   Greift ausschließlich auf Tokens aus tokens.css zu.
   Bildsprache spiegelt das CI-Manual: konzentrische Kreise,
   Halbkreis-Flächen, schwarze runde CTAs, Split-Layouts.
------------------------------------------------------------------ */

/* ===== Basis ===== */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-surface);
    -webkit-font-smoothing: antialiased;
}
p { margin: 0 0 var(--s-4); }
ul { padding-left: 1.25rem; }

h1, h2, h3, h4 {
    font-family: var(--ff-display);
    text-transform: uppercase;
    line-height: var(--lh-title);
    letter-spacing: var(--tracking-title);
    color: var(--c-text);
    margin: 0 0 var(--s-4);
}

h1 { font-size: var(--fs-h1); font-weight: 900; }
h2 { font-size: var(--fs-h2); font-weight: 900; }
h3 { font-size: var(--fs-h3); font-weight: 900; }

a {
    color: var(--c-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--motion-base) var(--easing);
}
a:hover { color: var(--c-rot-700); }

:focus-visible {
    outline: 3px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ===== Container ===== */
.b1860-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ===== Buttons (CTA = schwarz, rund, weiß)
       CI: kreisrunder Anthrazit-Button mit weißer Versalschrift
*/
.b1860-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: var(--radius-pill);
    background: var(--c-cta);
    color: var(--c-on-cta);
    font-family: var(--ff-display);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    padding: var(--s-3);
    transition: transform var(--motion-base) var(--easing), background var(--motion-base) var(--easing);
}
.b1860-cta:hover {
    transform: scale(1.04);
    background: #000;
    color: var(--c-on-cta);
}

.b1860-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius);
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    text-decoration: none;
    transition: background var(--motion-base) var(--easing);
}
.b1860-btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.b1860-btn--primary:hover { background: var(--c-rot-700); color: var(--c-on-primary); }
.b1860-btn--ghost {
    background: transparent;
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
}
.b1860-btn--ghost:hover { background: var(--c-primary); color: var(--c-on-primary); }

/* ===== Cards ===== */
.b1860-card {
    background: var(--c-surface);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-lg);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
    transition: transform var(--motion-base) var(--easing), box-shadow var(--motion-base) var(--easing);
}
.b1860-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

/* ===== Status-Pills ===== */
.b1860-pill {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    font-family: var(--ff-display);
    font-size: var(--fs-small);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--tracking-em);
    line-height: 1;
}
.b1860-pill--success { background: #e8f6ee; color: var(--c-success); }
.b1860-pill--warning { background: #fef2e2; color: var(--c-warning); }
.b1860-pill--danger  { background: var(--c-primary); color: var(--c-on-primary); }
.b1860-pill--brand   { background: var(--c-primary); color: var(--c-on-primary); }

/* ===== Skip-Link ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--c-primary);
    color: var(--c-on-primary);
    padding: var(--s-3) var(--s-4);
    z-index: 9999;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* ===== Trainingszeiten-Tabelle ===== */
.b1860-schedule {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
}
.b1860-schedule th,
.b1860-schedule td {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-neutral-300);
}
.b1860-schedule th {
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
}

/* ===== URL-Style (CI: Versalschrift mit Spreizung 250) ===== */
.b1860-url {
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-url);
    line-height: var(--lh-subtitle);
}

/* ==================================================================
   GESTALTUNGSELEMENTE AUS DEM CI-MANUAL
================================================================== */

/* Halbkreis-Element (Tiefrot auf Rot, links unten – wiederkehrendes Motiv)
   Anwendung: an einer Section .b1860-section--halfcircle setzen
*/
.b1860-halfcircle {
    position: relative;
    overflow: hidden;
}
.b1860-halfcircle::before {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -40%;
    width: 60%;
    aspect-ratio: 1 / 1;
    background: var(--c-primary-deep);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.b1860-halfcircle > * { position: relative; z-index: 1; }

/* Konzentrische-Kreise-Pattern (Tiefrot auf Rot)
   Hintergrund-Klasse für Hero-Bereiche, Banner, Social-Cards.
   Reines CSS, keine Bilder – skaliert mit jedem Container.
*/
.b1860-rings {
    background-color: var(--c-primary);
    background-image: repeating-radial-gradient(
        circle at 0% 100%,
        var(--c-primary-deep) 0,
        var(--c-primary-deep) 18px,
        var(--c-primary) 18px,
        var(--c-primary) 56px
    );
    color: var(--c-on-primary);
}
.b1860-rings--center {
    background-image: repeating-radial-gradient(
        circle at 50% 50%,
        var(--c-primary-deep) 0,
        var(--c-primary-deep) 14px,
        var(--c-primary) 14px,
        var(--c-primary) 44px
    );
}

/* Sportarten-Cluster-Pill (runde rote Bubble mit Sportname, CI-Element) */
.b1860-cluster-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 5rem;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-family: var(--ff-display);
    font-size: 0.85rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    padding: var(--s-2);
}

/* ==================================================================
   HERO IM KAMPAGNEN-LOOK ("FIT MIT!")
   Split-Layout: links Rotfläche mit Logo + Slogan, rechts Bild-Freisteller
================================================================== */
.b1860-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.b1860-hero__panel {
    position: relative;
    padding: var(--s-8);
    color: var(--c-on-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.b1860-hero__panel--brand {
    background-color: var(--c-primary);
    background-image: repeating-radial-gradient(
        circle at 0% 100%,
        var(--c-primary-deep) 0,
        var(--c-primary-deep) 18px,
        var(--c-primary) 18px,
        var(--c-primary) 56px
    );
}
.b1860-hero__title {
    font-family: var(--ff-display);
    font-size: var(--fs-display);
    font-weight: 900;
    line-height: var(--lh-title);
    text-transform: uppercase;
    color: var(--c-on-primary);
    transform: skewX(-8deg);   /* CI: dynamische Schräge im Titelsatz */
    transform-origin: left center;
}
.b1860-hero__sub {
    font-family: var(--ff-display);
    text-transform: uppercase;
    line-height: var(--lh-subtitle);
    letter-spacing: var(--tracking-title);
}
@media (max-width: 720px) {
    .b1860-hero { grid-template-columns: 1fr; min-height: 0; }
    .b1860-hero__title { transform: none; }
}

/* ==================================================================
   FRONT-PAGE DEMO-KOMPONENTEN
================================================================== */

.b1860-section {
    padding-block: var(--s-16);
}
.b1860-section--alt { background: var(--c-neutral-100); }
.b1860-section__head {
    text-align: center;
    max-width: 56ch;
    margin: 0 auto var(--s-12);
}
.b1860-section__head h2 { margin-bottom: var(--s-3); }
.b1860-section__head p {
    color: var(--c-neutral-700);
    font-size: 1.125rem;
}

/* Hero auf der Startseite – konkret bemaßt */
.b1860-front-hero {
    min-height: 560px;
    margin: var(--s-4);
    border-radius: var(--radius-lg);
}
/* Wenn kein Featured Image auf der Startseiten-Page: volle Breite */
.b1860-front-hero--single { grid-template-columns: 1fr; }

/* Bild-Panel der Startseite: Bild deckend, zentriert */
.b1860-hero__panel--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.b1860-hero__panel--placeholder {
    background-color: var(--c-neutral-100);
    background-image:
        linear-gradient(45deg, var(--c-neutral-300) 25%, transparent 25%, transparent 75%, var(--c-neutral-300) 75%, var(--c-neutral-300)),
        linear-gradient(45deg, var(--c-neutral-300) 25%, transparent 25%, transparent 75%, var(--c-neutral-300) 75%, var(--c-neutral-300));
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    display: grid;
    place-items: center;
}
.b1860-front-hero__imghint {
    background: rgba(255,255,255,0.85);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    color: var(--c-neutral-700);
}
.b1860-front-hero__logo {
    font-family: var(--ff-display);
    font-size: clamp(4rem, 8vw, 7.5rem);
    font-weight: 900;
    line-height: 0.85;
    color: var(--c-on-primary);
    letter-spacing: -0.02em;
}
.b1860-front-hero__cta {
    align-self: flex-end;
    margin-top: var(--s-6);
}

/* Cluster-Grid */
.b1860-cluster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-6);
}
.b1860-cluster-grid--ages {
    grid-template-columns: repeat(5, 1fr);
}
.b1860-cluster-grid--three {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) {
    .b1860-cluster-grid--three { grid-template-columns: 1fr; }
}

.b1860-cluster-card--big {
    padding: var(--s-8);
    text-align: left;
    align-items: flex-start;
    gap: var(--s-3);
}
.b1860-cluster-card--big .b1860-cluster-bubble {
    width: 4rem;
    font-size: 0.8rem;
}
.b1860-cluster-card--big .b1860-cluster-card__title {
    font-size: 1.5rem;
}
.b1860-cluster-card__lead {
    margin: 0;
    color: var(--c-neutral-700);
    font-size: 0.95rem;
}
.b1860-cluster-card--big .b1860-cluster-card__meta {
    font-size: 1rem;
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-neutral-200);
    width: 100%;
}
.b1860-cluster-card--big .b1860-cluster-card__meta strong {
    color: var(--c-primary);
    font-size: 1.25rem;
    margin-right: 0.25rem;
}
@media (max-width: 980px) {
    .b1860-cluster-grid--ages { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .b1860-cluster-grid--ages { grid-template-columns: repeat(2, 1fr); }
}
.b1860-cluster-card__age {
    margin: 0;
    font-family: var(--ff-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    color: var(--c-primary);
}
.b1860-cluster-grid__fallback {
    text-align: center;
    margin-top: var(--s-8);
    color: var(--c-neutral-700);
}
.b1860-cluster-grid__fallback a {
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    margin-left: var(--s-2);
}
.b1860-cluster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
    padding: var(--s-6);
    background: var(--c-surface);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: transform var(--motion-base) var(--easing), border-color var(--motion-base) var(--easing);
}
.b1860-cluster-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-primary);
    color: inherit;
}
.b1860-cluster-card__title {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    text-transform: uppercase;
    line-height: var(--lh-title);
    letter-spacing: var(--tracking-title);
    margin: var(--s-2) 0 0;
}
.b1860-cluster-card__meta {
    margin: 0;
    color: var(--c-neutral-500);
    font-size: var(--fs-small);
}

/* Zweispalt Trainings-Teaser */
.b1860-twocol {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-8);
    align-items: start;
}
@media (max-width: 820px) {
    .b1860-twocol { grid-template-columns: 1fr; }
}
.b1860-card--brand {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border: none;
    padding: var(--s-8);
}
.b1860-card--brand h3,
.b1860-card--brand p { color: var(--c-on-primary); }
.b1860-btn--on-brand {
    border-color: var(--c-on-primary);
    color: var(--c-on-primary);
}
.b1860-btn--on-brand:hover {
    background: var(--c-on-primary);
    color: var(--c-primary);
}

/* CTA-Banner mit Ringen */
.b1860-banner {
    color: var(--c-on-primary);
    margin: var(--s-4);
    border-radius: var(--radius-lg);
}
.b1860-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-8);
    padding-block: var(--s-12);
}
.b1860-banner__title {
    color: var(--c-on-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 var(--s-2);
}
.b1860-banner__sub {
    color: var(--c-on-primary);
    font-size: 1.125rem;
    margin: 0;
}
@media (max-width: 720px) {
    .b1860-banner__inner { flex-direction: column; text-align: center; }
}

/* ==================================================================
   TOP-BAR (Service-Links über dem Header)
================================================================== */
.b1860-topbar {
    background: var(--c-primary-deep);
    color: var(--c-on-primary);
    font-size: 0.85rem;
}
.b1860-topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-block: 0.4rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.b1860-topbar a {
    color: var(--c-on-primary);
    text-decoration: none;
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.85;
}
.b1860-topbar a:hover { opacity: 1; color: var(--c-on-primary); }
.b1860-topbar__sep { opacity: 0.4; }
.b1860-topbar__login {
    border: 1px solid rgba(255,255,255,0.45);
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-sm);
}
@media (max-width: 640px) {
    .b1860-topbar { display: none; }
}

/* ==================================================================
   SITE-HEADER
================================================================== */
.b1860-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-neutral-300);
}
.b1860-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding-block: var(--s-3);
}

/* Logo */
.b1860-site-logo,
.b1860-site-logo:hover,
.b1860-site-logo:focus {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;   /* Hello Elementor + Elementor-Kit-7 setzen sonst underline */
    color: var(--c-primary);
}
.b1860-site-logo--invert { color: var(--c-on-primary); }

/* Hochgeladenes PNG/SVG-Logo */
.b1860-logo-img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 220px;
}

/* Footer-Logo: invertiert das Bild zu weißer Silhouette.
   Funktioniert nur mit PNG/SVG mit transparentem Hintergrund.
   Bei JPG mit weißem Hintergrund-Rechteck wird die ganze Fläche weiß. */
.b1860-site-logo--invert .b1860-logo-img {
    filter: brightness(0) invert(1);
}
.b1860-logo {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}
.b1860-logo__num {
    font-family: var(--ff-display);
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.b1860-logo__arc {
    width: 1.5rem;
    height: 1.5rem;
}
.b1860-logo__arc--top { align-self: start; transform: translateY(-0.25rem); }
.b1860-logo__arc--bottom { align-self: end; transform: translateY(0.25rem); }

/* Nav */
.b1860-site-nav { display: flex; align-items: center; }
.b1860-nav-list {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    list-style: none;
    margin: 0;
    padding: 0;
}
.b1860-nav-list a,
.b1860-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ff-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    text-decoration: none;
    color: var(--c-text);
    padding: var(--s-2) 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.b1860-nav-list a:hover,
.b1860-nav-link:hover,
.b1860-nav-link[aria-expanded="true"] { color: var(--c-primary); }

.b1860-nav-chevron { width: 0.75rem; height: 0.5rem; transition: transform var(--motion-base) var(--easing); }
.b1860-nav-link[aria-expanded="true"] .b1860-nav-chevron { transform: rotate(180deg); }

.b1860-nav-cta {
    background: var(--c-primary);
    color: var(--c-on-primary) !important;
    padding: var(--s-2) var(--s-4) !important;
    border-radius: var(--radius);
}
.b1860-nav-cta:hover { background: var(--c-rot-700); color: var(--c-on-primary) !important; }

/* Verein-Dropdown */
.b1860-nav-item--has-sub { position: relative; }
.b1860-nav-sub {
    position: absolute;
    top: 100%; left: 0;
    background: var(--c-surface);
    border-top: 3px solid var(--c-primary);
    box-shadow: var(--shadow-2);
    list-style: none;
    margin: 0;
    padding: var(--s-2);
    min-width: 220px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--motion-base) var(--easing), transform var(--motion-base) var(--easing);
    z-index: 90;
}
.b1860-nav-item--has-sub:hover .b1860-nav-sub,
.b1860-nav-item--has-sub:focus-within .b1860-nav-sub {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.b1860-nav-sub li { padding: 0; }
.b1860-nav-sub a {
    display: block;
    padding: var(--s-2) var(--s-3);
    font-family: var(--ff-body);
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-text);
    text-decoration: none;
    border-radius: var(--radius);
}
.b1860-nav-sub a:hover { background: var(--c-neutral-100); color: var(--c-primary); }
@media (max-width: 820px) {
    .b1860-nav-sub {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        border-top: 0;
        box-shadow: none;
        padding-left: var(--s-4);
        background: transparent;
    }
}

/* ==================================================================
   MEGA-MENÜ – Sportarten
================================================================== */
.b1860-nav-item--has-mega { position: static; }   /* statisch, damit Mega volle Breite kann */

.b1860-megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--c-surface);
    border-top: 3px solid var(--c-primary);
    box-shadow: var(--shadow-2);
    padding-block: var(--s-8);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--motion-base) var(--easing), transform var(--motion-base) var(--easing);
    z-index: 90;
}
.b1860-megamenu[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.b1860-megamenu[hidden] { display: none; }

.b1860-megamenu__inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--s-8);
}
.b1860-megamenu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6) var(--s-8);
}
.b1860-megamenu__grid--ages {
    grid-template-columns: repeat(5, 1fr);
}
.b1860-megamenu__grid--typen {
    grid-template-columns: repeat(3, 1fr);
}
.b1860-megamenu__grid--zweispalter {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-8);
}
.b1860-megamenu__list--cols {
    column-count: 2;
    column-gap: var(--s-4);
}
@media (max-width: 600px) {
    .b1860-megamenu__list--cols { column-count: 1; }
}
.b1860-megamenu__inner--typen {
    grid-template-columns: 1fr 280px;
}
.b1860-megamenu__span {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    margin-top: 2px;
}
.b1860-megamenu__col { min-width: 0; }
.b1860-megamenu__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-neutral-300);
}
.b1860-megamenu__head:hover { color: var(--c-primary); }
.b1860-megamenu__title {
    font-family: var(--ff-display);
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    line-height: 1.1;
}
.b1860-cluster-bubble--sm {
    width: 2.5rem;
    font-size: 0.65rem;
    aspect-ratio: 1 / 1;
}

.b1860-megamenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.b1860-megamenu__list a {
    display: block;
    padding: 0.3rem 0;
    font-family: var(--ff-body);
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-neutral-700);
    text-decoration: none;
}
.b1860-megamenu__list a:hover {
    color: var(--c-primary);
}

/* "Alle Angebote für X →" Footer-Link pro Spalte */
.b1860-megamenu__all {
    display: block;
    margin-top: var(--s-3);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-neutral-300);
    font-family: var(--ff-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    text-decoration: none;
    color: var(--c-primary);
}
.b1860-megamenu__all:hover { color: var(--c-rot-700); }

.b1860-megamenu__side {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.b1860-megamenu__audiences h3 {
    font-family: var(--ff-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    margin: 0 0 var(--s-2);
    color: var(--c-text);
}
.b1860-megamenu__audiences .b1860-megamenu__list a {
    font-weight: 600;
}
.b1860-megamenu__cta {
    padding: var(--s-6);
    border-radius: var(--radius-lg);
    color: var(--c-on-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--s-3);
}
.b1860-megamenu__cta h3 {
    color: var(--c-on-primary);
    font-size: 1.125rem;
    margin: 0;
}
.b1860-megamenu__cta p {
    color: var(--c-on-primary);
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

@media (max-width: 1100px) {
    .b1860-megamenu__inner { grid-template-columns: 1fr; }
    .b1860-megamenu__grid { grid-template-columns: repeat(3, 1fr); }
    .b1860-megamenu__grid--ages { grid-template-columns: repeat(3, 1fr); }
    .b1860-megamenu__grid--typen { grid-template-columns: 1fr; }
    .b1860-megamenu__cta { display: none; }
}
@media (max-width: 820px) {
    /* Im mobilen Drawer wird Mega zum Accordion innerhalb des Nav-Drawers */
    .b1860-nav-item--has-mega { position: relative; }
    .b1860-megamenu {
        position: static;
        border: 0;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--motion-base) var(--easing);
    }
    .b1860-megamenu[hidden] { display: block; }
    .b1860-megamenu[data-open="true"] { max-height: 1200px; padding-block: var(--s-4); }
    .b1860-megamenu__grid { grid-template-columns: 1fr; gap: var(--s-3); }
    .b1860-megamenu__head { border-bottom: 0; padding-bottom: 0; }
}

/* Mobile Toggle */
.b1860-nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.b1860-nav-toggle span {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--c-text);
    margin: 5px auto;
    transition: transform var(--motion-base) var(--easing);
}

@media (max-width: 820px) {
    .b1860-nav-toggle { display: block; }
    .b1860-nav-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s-4);
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-neutral-300);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--motion-base) var(--easing);
    }
    .b1860-nav-list.is-open { max-height: 60vh; }
    .b1860-nav-list li { padding-block: var(--s-2); }
    .b1860-nav-cta { display: inline-block; margin-top: var(--s-2); }
}

/* ==================================================================
   SITE-FOOTER
================================================================== */
.b1860-site-footer {
    margin-top: var(--s-16);
    background: var(--c-primary);
    color: var(--c-on-primary);
    overflow: hidden;
}
.b1860-site-footer.b1860-halfcircle::before {
    background: var(--c-primary-deep);
    left: -15%;
    bottom: auto;
    top: -30%;
}
.b1860-site-footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--s-8);
    padding-block: var(--s-16);
}
.b1860-site-footer h3 {
    color: var(--c-on-primary);
    font-size: 1.125rem;
    margin: 0 0 var(--s-4);
}
.b1860-site-footer__brand p,
.b1860-site-footer__brand address { color: rgba(255,255,255,0.85); font-style: normal; }
.b1860-site-footer__brand a {
    color: var(--c-on-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.b1860-site-footer__claim {
    margin-block: var(--s-4);
    font-size: 1.0625rem;
}
.b1860-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.b1860-footer-list li { padding-block: 0.25rem; }
.b1860-footer-list a {
    color: var(--c-on-primary);
    text-decoration: none;
    opacity: 0.9;
}
.b1860-footer-list a:hover { opacity: 1; text-decoration: underline; color: var(--c-on-primary); }
.b1860-footer-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
}
.b1860-site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-block: var(--s-4);
    font-size: var(--fs-small);
    background: var(--c-primary-deep);
}
.b1860-site-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.b1860-site-footer__bottom p { margin: 0; }

/* Social-Icons */
.b1860-social {
    display: flex;
    gap: var(--s-3);
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0 0;
}
.b1860-social a {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    color: var(--c-on-primary);
    transition: background var(--motion-base) var(--easing);
}
.b1860-social a:hover {
    background: var(--c-on-primary);
    color: var(--c-primary);
}
.b1860-social svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 900px) {
    .b1860-site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .b1860-site-footer__inner { grid-template-columns: 1fr; }
}

/* ==================================================================
   SPORTART-DETAIL
================================================================== */
.b1860-sport-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    margin: var(--s-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* Wenn kein Featured Image: volle Breite, keine zweite Spalte */
.b1860-sport-hero--single { grid-template-columns: 1fr; }

/* Foto-Panel: Bild deckend, zentriert, kein Repeat */
.b1860-sport-hero__panel--photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.b1860-sport-hero__panel {
    position: relative;
    padding: var(--s-12);
    color: var(--c-on-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.b1860-sport-hero__panel--image {
    background-color: var(--c-neutral-100);
    background-image:
        linear-gradient(45deg, var(--c-neutral-300) 25%, transparent 25%, transparent 75%, var(--c-neutral-300) 75%, var(--c-neutral-300)),
        linear-gradient(45deg, var(--c-neutral-300) 25%, transparent 25%, transparent 75%, var(--c-neutral-300) 75%, var(--c-neutral-300));
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    display: grid;
    place-items: center;
}
.b1860-sport-hero__kicker {
    font-family: var(--ff-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-url);
    opacity: 0.9;
    margin: 0;
}
.b1860-sport-hero__title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    color: var(--c-on-primary);
    margin: var(--s-3) 0 var(--s-4);
    transform: skewX(-6deg);
    transform-origin: left center;
}
.b1860-sport-hero__sub {
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    font-size: 1.125rem;
    margin: 0;
}
.b1860-sport-hero__cta {
    align-self: flex-start;
    margin-top: var(--s-8);
}
@media (max-width: 820px) {
    .b1860-sport-hero { grid-template-columns: 1fr; }
    .b1860-sport-hero__title { transform: none; }
}

/* Checklist & Deflist */
.b1860-checklist {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0;
}
.b1860-checklist li {
    position: relative;
    padding-left: 2rem;
    padding-block: var(--s-2);
    border-bottom: 1px solid var(--c-neutral-300);
}
.b1860-checklist li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 1.25rem; height: 1.25rem;
    background: var(--c-primary);
    border-radius: 50%;
    transform: translateY(-50%);
}
.b1860-deflist { margin: 0; }
.b1860-deflist dt {
    font-family: var(--ff-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    opacity: 0.8;
    margin-top: var(--s-3);
}
.b1860-deflist dt:first-child { margin-top: 0; }
.b1860-deflist dd {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.b1860-table-wrap { overflow-x: auto; }

/* Trainer-Cards */
.b1860-trainer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-6);
}
.b1860-trainer-card {
    text-align: center;
    padding: var(--s-6);
    background: var(--c-neutral-100);
    border-radius: var(--radius-lg);
}
.b1860-trainer-card__avatar {
    width: 5rem; height: 5rem;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-on-primary);
    display: grid;
    place-items: center;
    font-family: var(--ff-display);
    font-size: 2.25rem;
    font-weight: 900;
    margin: 0 auto var(--s-3);
}
.b1860-trainer-card__name {
    margin: 0;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
}
.b1860-trainer-card__role,
.b1860-trainer-card__rank {
    margin: var(--s-1) 0 0;
    font-size: var(--fs-small);
    color: var(--c-neutral-700);
}

/* ==================================================================
   SPORTART-LISTINGS (Archiv + Filter-Seiten)
================================================================== */
.b1860-archive-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--s-8);
    align-items: start;
}
@media (max-width: 820px) {
    .b1860-archive-layout { grid-template-columns: 1fr; }
}

.b1860-archive-filters {
    position: sticky;
    top: 100px;
}
.b1860-archive-filters__title {
    font-size: 1rem;
    margin: 0 0 var(--s-3);
}
.b1860-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.b1860-filter-list a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--c-text);
    font-size: 0.95rem;
}
.b1860-filter-list a:hover { background: var(--c-neutral-100); color: var(--c-primary); }
.b1860-filter-list .is-active a { background: var(--c-primary); color: var(--c-on-primary); }
.b1860-filter-list small { color: var(--c-neutral-500); font-size: 0.75rem; }
.b1860-filter-list .is-active small { color: rgba(255,255,255,0.85); }

.b1860-cluster-bubble--xs { width: 2.2rem; font-size: 0.6rem; }

.b1860-archive-list-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}
.b1860-archive-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-6);
    align-items: stretch;
}
.b1860-archive-letter {
    grid-column: 1 / -1;
    color: var(--c-primary);
    font-size: 2rem;
    margin: var(--s-6) 0 0;
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--c-primary);
}

.b1860-sportart-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--motion-base) var(--easing), box-shadow var(--motion-base) var(--easing);
}
.b1860-sportart-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    color: inherit;
}
.b1860-sportart-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--c-primary);
    overflow: hidden;
}
.b1860-sportart-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.b1860-sportart-card__placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--c-on-primary);
    font-family: var(--ff-display);
    font-size: 2.5rem;
    font-weight: 900;
    opacity: 0.4;
}
.b1860-sportart-card__age {
    position: absolute;
    top: var(--s-3); right: var(--s-3);
    background: var(--c-anthrazit);
    color: var(--c-on-primary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    font-family: var(--ff-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-title);
    text-transform: uppercase;
}
.b1860-sportart-card__body { padding: var(--s-4); }
.b1860-sportart-card__cluster {
    margin: 0 0 0.25rem;
    font-family: var(--ff-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    color: var(--c-primary);
}
.b1860-sportart-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    text-transform: uppercase;
}
.b1860-sportart-card__kicker {
    margin: 0;
    color: var(--c-neutral-700);
    font-size: 0.9rem;
}

.b1860-prose { line-height: 1.7; }
.b1860-prose p:last-child { margin-bottom: 0; }

/* News-Cards */
.b1860-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-6);
}
.b1860-news-card {
    background: var(--c-surface);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--motion-base) var(--easing), box-shadow var(--motion-base) var(--easing);
}
.b1860-news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
.b1860-news-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.b1860-news-card__media {
    aspect-ratio: 16 / 9;
    background: var(--c-primary);
    position: relative;
    overflow: hidden;
}
.b1860-news-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.b1860-news-card__body {
    padding: var(--s-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.b1860-news-card__date {
    margin: 0;
    font-family: var(--ff-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    color: var(--c-primary);
}
.b1860-news-card__title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}
.b1860-news-card__excerpt {
    margin: 0;
    color: var(--c-neutral-700);
    font-size: 0.9rem;
}

.b1860-megamenu__empty {
    color: var(--c-neutral-500);
    font-size: 0.85rem;
    font-style: italic;
    padding-block: var(--s-2);
}

/* ==================================================================
   HINWEISE / AUSFÄLLE — Status-Tracker
================================================================== */
.b1860-hinweise-section { padding-block: var(--s-6) var(--s-4); }
.b1860-hinweise-section .b1860-section__head h2 { margin: 0; }

.b1860-hinweise {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-4);
}
.b1860-hinweise--inline {
    margin: var(--s-4) auto 0;
    max-width: var(--container-max);
    padding-inline: var(--container-pad);
}

.b1860-hinweis {
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
    padding: var(--s-4) var(--s-6);
    border-radius: var(--radius-lg);
    border-left: 6px solid var(--c-neutral-300);
    background: var(--c-neutral-100);
}
.b1860-hinweis__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.b1860-hinweis__body { flex: 1; }
.b1860-hinweis__meta {
    margin: 0 0 0.25rem;
    font-family: var(--ff-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    color: var(--c-neutral-700);
}
.b1860-hinweis__title {
    margin: 0 0 var(--s-2);
    font-size: 1.15rem;
    line-height: 1.2;
}
.b1860-hinweis__content { font-size: 0.95rem; }
.b1860-hinweis__content p { margin: 0; }

.b1860-hinweis--info {
    background: #e8f1fb;
    border-left-color: #1d6fbf;
}
.b1860-hinweis--info .b1860-hinweis__meta { color: #1d6fbf; }

.b1860-hinweis--warnung {
    background: #fef2e2;
    border-left-color: var(--c-warning);
}
.b1860-hinweis--warnung .b1860-hinweis__meta { color: var(--c-warning); }

.b1860-hinweis--ausfall {
    background: #fce7e7;
    border-left-color: var(--c-rot);
    color: var(--c-neutral-900);
}
.b1860-hinweis--ausfall .b1860-hinweis__meta { color: var(--c-rot); }

/* ==================================================================
   MEHR VON 1860 — Subdomain-Tiles
================================================================== */
.b1860-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-6);
}
.b1860-tile {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-6);
    background: var(--c-surface);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--motion-base) var(--easing), border-color var(--motion-base) var(--easing);
}
.b1860-tile:hover {
    transform: translateY(-3px);
    border-color: var(--c-primary);
    color: inherit;
}
.b1860-tile__short {
    align-self: flex-start;
    background: var(--c-primary);
    color: var(--c-on-primary);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--ff-display);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: var(--tracking-title);
    text-align: center;
    line-height: 1;
}
.b1860-tile__name {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: var(--lh-title);
    color: var(--c-text);
    margin-top: var(--s-2);
}
.b1860-tile__lead {
    color: var(--c-neutral-700);
    font-size: 0.95rem;
    flex: 1;
}
.b1860-tile__url {
    font-family: var(--ff-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    color: var(--c-primary);
    margin-top: var(--s-3);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-neutral-200);
}

/* ==================================================================
   STANDORT-GRID
================================================================== */
.b1860-standort-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
}
.b1860-standort-card {
    padding: var(--s-5, var(--s-4));
    background: var(--c-surface);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-lg);
}
.b1860-standort-card h3 {
    margin: 0 0 var(--s-2);
    font-size: 1.15rem;
    color: var(--c-primary);
}
.b1860-standort-card p {
    margin: 0;
    color: var(--c-neutral-700);
    font-size: 0.95rem;
}

/* ==================================================================
   SPONSOREN
================================================================== */
.b1860-sponsoren-section { padding-block: var(--s-8); }
.b1860-sponsoren {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-12);
    flex-wrap: wrap;
}
.b1860-sponsor-tile {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-4) var(--s-8);
    background: var(--c-neutral-100);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius);
    min-width: 200px;
    text-align: center;
    text-decoration: none;
    color: var(--c-neutral-700);
    transition: transform var(--motion-base) var(--easing), border-color var(--motion-base) var(--easing), background var(--motion-base) var(--easing);
}
.b1860-sponsor-tile:hover {
    transform: translateY(-2px);
    border-color: var(--c-primary);
    background: var(--c-surface);
    color: var(--c-primary);
}
.b1860-sponsor-tile__name {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    line-height: 1;
}
.b1860-sponsor-tile__sub {
    font-family: var(--ff-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-url);
    opacity: 0.7;
}
.b1860-sponsoren__note {
    margin-top: var(--s-4);
    text-align: center;
    color: var(--c-neutral-500);
    font-size: 0.8rem;
    font-style: italic;
}

/* ==================================================================
   NEWSLETTER (im Footer)
================================================================== */
.b1860-newsletter {
    background: var(--c-primary-deep);
    color: var(--c-on-primary);
    padding-block: var(--s-8);
}
.b1860-newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    flex-wrap: wrap;
}
.b1860-newsletter h3 {
    color: var(--c-on-primary);
    margin: 0 0 var(--s-1);
    font-size: 1.5rem;
}
.b1860-newsletter p {
    color: rgba(255,255,255,0.85);
    margin: 0;
}
.b1860-newsletter__form {
    display: flex;
    gap: var(--s-2);
    min-width: 320px;
    flex: 1;
    max-width: 480px;
}
.b1860-newsletter__form input[type="email"] {
    flex: 1;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1);
    color: var(--c-on-primary);
    font-family: var(--ff-body);
    font-size: 1rem;
}
.b1860-newsletter__form input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.b1860-newsletter__form input[type="email"]:focus {
    background: rgba(255,255,255,0.18);
    outline: 3px solid var(--c-on-primary);
    outline-offset: 2px;
}
.b1860-newsletter__form .b1860-btn { white-space: nowrap; }
@media (max-width: 720px) {
    .b1860-newsletter__form { width: 100%; max-width: none; }
}

/* ==================================================================
   PAGE-HERO — einheitlicher Header für alle Pages
================================================================== */
.b1860-page-hero {
    color: var(--c-on-primary);
}
.b1860-page-hero--image {
    background-size: cover;
    background-position: center;
    padding-block: var(--s-24);
    min-height: 360px;
    display: flex;
    align-items: center;
}
.b1860-page-hero__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
.b1860-page-hero--image .b1860-banner__title,
.b1860-page-hero--image .b1860-banner__sub {
    color: var(--c-on-primary);
}

/* Page-Content (z. B. Über uns, Vorstand, Engagement) */
.b1860-page-content {
    max-width: 720px;
}
.b1860-page-content h2 {
    margin-top: var(--s-12);
}
.b1860-page-content h2:first-child {
    margin-top: 0;
}
.b1860-page-pagination {
    margin-top: var(--s-8);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-neutral-200);
    color: var(--c-neutral-500);
    font-size: var(--fs-small);
    display: flex;
    gap: var(--s-2);
}
.b1860-page-pagination a {
    text-decoration: none;
    color: var(--c-primary);
    font-weight: 700;
    padding: 0 var(--s-2);
}

/* ==================================================================
   NEWS-ARCHIVE + Pagination
================================================================== */
.b1860-news-grid--archive {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.b1860-pagination {
    margin-top: var(--s-12);
    text-align: center;
}
.b1860-pagination .nav-links {
    display: inline-flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.b1860-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius);
    background: var(--c-neutral-100);
    color: var(--c-text);
    text-decoration: none;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    font-size: 0.85rem;
}
.b1860-pagination .page-numbers:hover {
    background: var(--c-primary);
    color: var(--c-on-primary);
}
.b1860-pagination .page-numbers.current {
    background: var(--c-primary);
    color: var(--c-on-primary);
}
.b1860-pagination .page-numbers.dots {
    background: transparent;
}

/* ==================================================================
   SUCHFORMULAR (für 404-Page und allgemein)
================================================================== */
.search-form,
.wp-block-search__inside-wrapper {
    display: inline-flex;
    gap: var(--s-2);
    max-width: 520px;
    width: 100%;
}
.search-form .search-field,
.wp-block-search__input {
    flex: 1;
    padding: 0.85rem 1rem;
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius);
    font-family: var(--ff-body);
    font-size: 1rem;
    background: var(--c-surface);
}
.search-form .search-submit,
.wp-block-search__button {
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
    cursor: pointer;
}
.search-form .search-submit:hover,
.wp-block-search__button:hover {
    background: var(--c-rot-700);
}

/* Karten-Platzhalter */
.b1860-map-placeholder {
    background-color: var(--c-neutral-100);
    background-image:
        linear-gradient(45deg, var(--c-neutral-300) 25%, transparent 25%, transparent 75%, var(--c-neutral-300) 75%, var(--c-neutral-300)),
        linear-gradient(45deg, var(--c-neutral-300) 25%, transparent 25%, transparent 75%, var(--c-neutral-300) 75%, var(--c-neutral-300));
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    min-height: 280px;
    display: grid;
    place-items: center;
}

/* ==================================================================
   MOBILE OPTIMIERUNGEN — gezielt fuer iPhone/Android-Phone-Viewports
   - Hero-Sections kompakter
   - CTA-Buttons skaliert
   - iOS-Safari-spezifische Fixes (Auto-Zoom-Verhinderung, Notch)
================================================================== */

/* Bis 720px: Hero-Spacing reduzieren, Headlines knapper */
@media (max-width: 720px) {
    /* Hero-Tokens fuer Mobile */
    :root {
        --s-12: 2rem;            /* Section-Padding etwas knapper */
        --container-pad: 1rem;   /* Container-Rand 16px */
    }

    /* Front-Page Hero */
    .b1860-front-hero {
        min-height: 0;
        margin: var(--s-3);
    }
    .b1860-hero__panel {
        padding: var(--s-6);
        gap: var(--s-4);
    }
    .b1860-front-hero__logo {
        font-size: 3.5rem;
    }
    .b1860-hero__sub {
        font-size: 1rem;
    }

    /* Sport-Detail Hero */
    .b1860-sport-hero {
        min-height: 0;
        margin: var(--s-3);
    }
    .b1860-sport-hero__panel {
        padding: var(--s-6);
    }
    .b1860-sport-hero__title {
        font-size: clamp(2.25rem, 9vw, 3rem);
        line-height: 1;
    }
    .b1860-sport-hero__kicker {
        font-size: 0.8rem;
        letter-spacing: var(--tracking-title);   /* statt 0.25em — sonst Umbruch */
    }
    .b1860-sport-hero__sub {
        font-size: 1rem;
    }
    .b1860-sport-hero__cta {
        margin-top: var(--s-4);
    }

    /* Banner-Hero (Archiv-Seiten, 404, News, Page-Hero ohne Bild) */
    .b1860-banner {
        margin: var(--s-3);
    }
    .b1860-banner__inner {
        padding-block: var(--s-8);
        flex-direction: column;
        align-items: flex-start;
    }
    .b1860-banner__title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }
    .b1860-banner__sub {
        font-size: 1rem;
    }

    /* Page-Hero mit Bild: weniger vertikales Padding */
    .b1860-page-hero--image {
        padding-block: var(--s-12);
        min-height: 240px;
    }

    /* Runder CTA-Button: kompakter */
    .b1860-cta {
        width: 5.5rem;
        height: 5.5rem;
        font-size: 0.8rem;
        padding: var(--s-2);
    }

    /* URL-Texte: weniger Spreizung, sonst Umbruch */
    .b1860-url {
        letter-spacing: var(--tracking-em);
        word-break: break-word;
    }

    /* Section-Padding global etwas kompakter */
    .b1860-section {
        padding-block: var(--s-12);
    }
    .b1860-section__head {
        margin-bottom: var(--s-8);
    }

    /* Trainings-Tabelle: horizontal scrollbar deutlicher */
    .b1860-table-wrap {
        margin-inline: calc(-1 * var(--container-pad));
        padding-inline: var(--container-pad);
    }
    .b1860-schedule {
        font-size: 0.9rem;
    }
    .b1860-schedule th,
    .b1860-schedule td {
        padding: var(--s-2) var(--s-3);
        white-space: nowrap;
    }
}

/* iOS-Safari-spezifische Fixes */
@supports (-webkit-touch-callout: none) {
    /* Inputs >= 16px verhindert iOS-Auto-Zoom beim Fokus */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: max(16px, 1rem);
    }
}

/* Notch / Home-Indicator Berücksichtigung (iPhone X+) */
@supports (padding: env(safe-area-inset-bottom)) {
    .b1860-site-footer__bottom {
        padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
    }
    .b1860-container {
        padding-left: max(var(--container-pad), env(safe-area-inset-left));
        padding-right: max(var(--container-pad), env(safe-area-inset-right));
    }
}

/* Ganz schmale Phones (≤ 380px, z. B. iPhone SE 1st Gen) */
@media (max-width: 380px) {
    .b1860-hero__title {
        font-size: 2.25rem;
    }
    .b1860-cta {
        width: 5rem;
        height: 5rem;
        font-size: 0.7rem;
    }
    .b1860-front-hero__logo {
        font-size: 2.75rem;
    }
}

/* ==================================================================
   ELEMENTOR-GLOBAL-SETTINGS sollen die gleichen Tokens spiegeln.
   Hier nur leichte Angleichung, damit Standard-Widgets nicht aus
   dem Markenraster fallen.
================================================================== */
.elementor-button {
    border-radius: var(--radius);
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-title);
}
.elementor-heading-title {
    font-family: var(--ff-display);
    text-transform: uppercase;
    line-height: var(--lh-title);
}