:root {
    --club-surface: #ffffff;
    --club-text: #17202a;
    --club-muted: #667085;
    --club-border: #d9e2ec;
    --bs-primary: #0d3b66;
    --bs-secondary: #f4a300;
    --tpl-radius: 0.5rem;
    --tpl-container-width: 1140px;

    /* Zusaetzliche semantische Tokens fuer Light/Dark-Trennung */
    --club-card-bg: #ffffff;
    --club-header-bg: #ffffff;
    --club-offcanvas-bg: #ffffff;
    --club-offcanvas-hover-bg: #f5f8fb;
    --club-offcanvas-dropdown-bg: #f5f8fb;
    --club-offcanvas-dropdown-hover-bg: #e8eef5;
    --club-hover-tint: rgba(0, 0, 0, 0.05);
    --club-image-placeholder-bg: #eef2f6;
    --club-calendar-muted-bg: #f9f9f9;
    --club-footer-bg: #111827;
    --club-shadow-sm: rgba(0, 0, 0, 0.08);
    --club-shadow-md: rgba(0, 0, 0, 0.12);
    --club-shadow-lg: rgba(0, 0, 0, 0.2);
    --club-code-bg: #f5f5f5;
}

/* Dunkle Gegenstuecke der obigen Tokens sowie der Bootstrap-Basisvariablen.
   data-bs-theme sitzt auf <html>, daher :root[data-bs-theme="dark"]. */
:root[data-bs-theme="dark"] {
    --club-surface: #12161c;
    --club-text: #e8ecf1;
    --club-muted: #9aa5b1;
    --club-border: #2a323d;
    --bs-primary: #4a89c7;
    --bs-secondary: #f4a300;

    --club-card-bg: #1a1f27;
    --club-header-bg: #1a1f27;
    --club-offcanvas-bg: #1a1f27;
    --club-offcanvas-hover-bg: #232a34;
    --club-offcanvas-dropdown-bg: #20262f;
    --club-offcanvas-dropdown-hover-bg: #2a323d;
    --club-hover-tint: rgba(255, 255, 255, 0.08);
    --club-image-placeholder-bg: #20262f;
    --club-calendar-muted-bg: #171b21;
    --club-footer-bg: #0b0e12;
    --club-shadow-sm: rgba(0, 0, 0, 0.35);
    --club-shadow-md: rgba(0, 0, 0, 0.45);
    --club-shadow-lg: rgba(0, 0, 0, 0.6);
    --club-code-bg: #20262f;
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--club-link, #0c5da3);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--club-link-hover, #094284);
    text-decoration: underline;
}

/* Unterstreichung waechst per Hintergrund-Trick statt text-decoration von
   links nach rechts ein: ein 2px hoher Farbbalken (background-image) startet
   bei background-size: 0% und waechst beim Hover auf 100% Breite. Deutlich
   fluessiger als das abrupte An/Aus von text-decoration. Bewusst nur auf
   Fliesstext-Links (Card-Titel, Read-More-Links, Footer-Item-Links, ...)
   statt global auf <a>, damit Buttons/Nav/Badges/Icon-Links ihre eigenen
   Hover-Stile behalten. */
.club-card__body h3 a,
.club-card__link,
.club-category-card__title a,
.club-training-table a,
.club-sport-article__content a:not(.btn):not(.club-content-figure a),
.club-event-content a:not(.btn) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    text-decoration: none !important;
    transition: color 0.3s ease, background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.club-card__body h3 a:hover,
.club-card__link:hover,
.club-category-card__title a:hover,
.club-category-card__title a:focus,
.club-training-table a:hover,
.club-sport-article__content a:not(.btn):not(.club-content-figure a):hover,
.club-event-content a:not(.btn):hover {
    background-size: 100% 2px;
}

.club-content-figure a,
.club-content-figure a:hover {
    background-image: none;
}

@media (prefers-reduced-motion: reduce) {
    .club-card__body h3 a,
    .club-card__link,
    .club-category-card__title a,
    .club-sport-article__content a,
    .club-event-content a,
    .club-training-table a {
        transition: color 0.3s ease;
    }
}

/* Sichtbarer Fokusring fuer Tastatur-/Screenreader-Navigation (WCAG 2.4.7).
   :focus-visible statt :focus, damit der Ring nur bei Tastaturfokus erscheint,
   nicht bei jedem Mausklick. */
.tmpl-club-manager a:focus-visible,
.tmpl-club-manager button:focus-visible,
.tmpl-club-manager .btn:focus-visible,
.tmpl-club-manager input:focus-visible,
.tmpl-club-manager textarea:focus-visible,
.tmpl-club-manager select:focus-visible,
.tmpl-club-manager [tabindex]:focus-visible {
    outline: 3px solid var(--bs-secondary, #f4a300);
    outline-offset: 2px;
    border-radius: var(--tpl-radius);
}

/* Auf dunklem Grund (Header/Nav/Footer/Hero) reicht der Standard-Ring optisch
   nicht - zusaetzlicher heller Halo fuer ausreichenden Kontrast. */
.tmpl-club-manager .club-header :focus-visible,
.tmpl-club-manager .club-nav :focus-visible,
.tmpl-club-manager .club-footer :focus-visible,
.tmpl-club-manager .club-hero :focus-visible,
.tmpl-club-manager .offcanvas :focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
}

/* Scroll-Reveal: Cards/Sections starten dezent unsichtbar/verschoben und blenden
   per IntersectionObserver (template.js, initScrollReveal) beim Eintritt in den
   Viewport ein. [data-reveal] wird serverseitig nicht gesetzt - siehe JS, das
   die Klasse selbst an den Zielelementen ergaenzt. */
.tmpl-club-manager [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tmpl-club-manager [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Innerhalb eines Grids/einer Card-Reihe leicht gestaffelt einblenden statt
   alle gleichzeitig - wirkt organischer. Reihenfolge der Kinder = Reihenfolge
   im DOM, daher reicht nth-child ohne JS-seitiges Delay-Tracking. */
.tmpl-club-manager [data-reveal-group] > [data-reveal] {
    transition-delay: calc(var(--reveal-index, 0) * 80ms);
}

/* Karten innerhalb eines Bootstrap-Carousels duerfen nicht per Scroll-Reveal
   ausgeblendet werden - sonst blitzen sie beim Folien-Wechsel als unsichtbar
   auf, weil der Observer sie ggf. nie (erneut) als "intersecting" erkennt. */
.tmpl-club-manager .carousel-item [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .tmpl-club-manager [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Klick-Feedback: alle CTA-Buttons/-Links, die per Hover anheben (translateY),
   druecken beim tatsaechlichen Klick kurz ein statt starr zu bleiben. */
.tmpl-club-manager .hero-buttons .btn:active,
.tmpl-club-manager .club-card__badge:active,
.tmpl-club-manager .club-event-list__view-all:active,
.tmpl-club-manager .club-section__view-all:active,
.tmpl-club-manager .club-carousel .carousel-control-prev:active .carousel-control-prev-icon,
.tmpl-club-manager .club-carousel .carousel-control-next:active .carousel-control-next-icon {
    transform: translateY(0) scale(0.97);
}

body.tmpl-club-manager {
    margin: 0;
    color: var(--club-text);
    background: var(--club-surface);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    overflow-x: hidden;
}

.tmpl-club-manager .navbar-nav {
    gap: 0.25rem;
}

/* .club-footer__quicklinks .nav-link explizit ausgeklammert (CSS Selectors
   Level 4 erlaubt komplexe Selektoren in :not(), von allen aktuellen Browsern
   unterstuetzt): die Klasse .nav-link ist generisch und landet ueber den
   mod_menu-Override auch im Footer-Quicklinks-Block, braucht dort aber ein
   anderes, kompakteres Padding (siehe .club-footer__quicklinks li a weiter
   unten) statt dieser fuer die Hauptnavigation gedachten Touch-Target-Regel. */
.tmpl-club-manager .nav-link:not(.club-footer__quicklinks .nav-link) {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: var(--tpl-radius);
    padding: 0.625rem 0.75rem !important;
    text-decoration: none;
}

.tmpl-club-manager .nav-link:hover,
.tmpl-club-manager .nav-item.active > .nav-link {
    background: rgba(255, 255, 255, 0.14);
}

.tmpl-club-manager .dropdown-menu {
    border-radius: var(--tpl-radius);
}

.tmpl-club-manager .offcanvas {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1045;
    width: min(86vw, 360px);
    max-width: 100%;
    visibility: hidden;
    transform: translateX(-100%);
    background: var(--club-offcanvas-bg, #fff);
    transition: transform 0.2s ease, visibility 0.2s ease;
}

.tmpl-club-manager .offcanvas.show,
.tmpl-club-manager .offcanvas.showing {
    visibility: visible;
    transform: translateX(0);
}

.tmpl-club-manager .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--club-border);
}

.tmpl-club-manager .offcanvas-body {
    padding: 1rem;
}

.tmpl-club-manager .btn-close {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
}

.tmpl-club-manager .btn-close::before {
    content: "x";
    font-size: 1.5rem;
}

.tmpl-club-manager .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: var(--tpl-radius);
    background: transparent;
    color: #fff;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tmpl-club-manager .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.tmpl-club-manager .navbar-toggler-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='4' y1='6' x2='20' y2='6'%3E%3C/line%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3Cline x1='4' y1='18' x2='20' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.club-container {
    width: min(100% - 2rem, var(--tpl-container-width));
    margin-inline: auto;
}

.club-header {
    background: var(--club-header-bg, #fff);
    border-bottom: 1px solid var(--club-border);
    z-index: 1020;
    position: sticky;
    top: 0;
    min-height: 96px;
    box-shadow: 0 4px 12px transparent;
    transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.club-header.is-scrolled {
    box-shadow: 0 4px 12px var(--club-shadow-sm, rgba(0, 0, 0, 0.08));
}

.club-header__inner {
    min-height: 96px;
    transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.club-brand__logo {
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.club-brand__name {
    transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.club-brand__subtitle {
    transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.club-header.is-scrolled {
    min-height: 56px;
}

.club-header.is-scrolled .club-header__inner {
    min-height: 56px;
}

.club-header.is-scrolled .club-brand__logo {
    max-width: 120px;
    max-height: 44px;
}

.club-header.is-scrolled .club-brand__name {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
}

.club-header.is-scrolled .club-brand__subtitle {
    font-size: 0.75rem;
}

.club-header__inner,
.club-header__stack,
.club-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.club-header__inner {
    min-height: 96px;
    justify-content: space-between;
}

.club-header__stack {
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 0;
    text-align: center;
}

.club-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

.club-brand:hover {
    text-decoration: none;
}

.club-brand__logo {
    width: auto;
    max-width: 200px;
    max-height: 84px;
}

.club-brand__name {
    display: block;
    margin: 0;
    font-size: clamp(1.35rem, 1.2rem + 1vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.club-brand__name:hover {
    text-decoration: none;
}

.club-brand__subtitle {
    margin: 0.25rem 0 0;
    color: var(--club-muted);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
}

.club-brand__subtitle:hover {
    text-decoration: none;
}

.club-toolbar {
    flex-wrap: nowrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.club-toolbar__module:empty {
    display: none;
}

.club-icon-button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    background: transparent;
    color: var(--club-text);
}

.club-icon-button:hover {
    background: var(--club-hover-tint, rgba(0, 0, 0, 0.05));
}

/* Als Link (z. B. Kontakt-Icon) genauso zentrieren wie als Button */
a.club-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--club-text);
}

a.club-icon-button:hover {
    text-decoration: none;
    color: var(--club-text);
}

/* Toolbar-Icons mit Text (siehe header/toolbar.php): Icon allein bleibt
   quadratisch (44x44px von .club-icon-button), sobald ein Label dazukommt
   braucht der Button variable Breite plus Innenabstand fuer den Text. */
.club-icon-button--labelled {
    min-width: auto;
    width: auto;
    padding: 0 0.85rem;
    gap: 0.5rem;
    white-space: nowrap;
}

.club-icon-button__label {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Kombiniertes Icon-Paar (z. B. Haus im Hintergrund + Formular im Vordergrund):
   fa-stack skaliert Font Awesome standardmaessig auf 2rem/2x-Groesse, das
   sprengt den 44x44px Toolbar-Button - hier auf Button-Groesse verkleinert. */
.club-icon-button__stack {
    width: 1.35em;
    height: 1.35em;
    line-height: 1.35em;
}

.club-icon-button__stack .fa-stack-1x {
    font-size: 0.55em;
}

.club-icon-button__stack .fa-stack-2x {
    font-size: 1.35em;
}

/* Toolbar-Icon als Dropdown-Auslöser (Mehrfach-Menüpunkte, z.B. "Kurspläne"):
   .club-icon-button-dropdown ist der Bootstrap-.dropdown-Wrapper, der Button
   selbst bleibt visuell identisch zu den einfachen Link-Icons, nur mit
   zusätzlichem Caret. */
.club-icon-button-dropdown {
    display: inline-flex;
}

.club-icon-button__caret {
    font-size: 0.65em;
    margin-left: 0.15rem;
}

.club-icon-button--dropdown-toggle::after {
    display: none;
}

.club-icon-button-dropdown__menu {
    --tpl-dropdown-min-width: 180px;
    min-width: var(--tpl-dropdown-min-width);
    border-radius: var(--tpl-radius);
    border-color: var(--club-border);
}

.club-icon-button-dropdown__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Eigene Hintergrundfarbe fuer einzelne Toolbar-Icons (Backend-Colorpicker,
   siehe header/toolbar.php). --club-icon-bg/--club-icon-fg werden inline pro
   Button gesetzt; hier nur die Anwendung + ein abgedunkelter Hover-Zustand
   ueber filter, damit nicht pro Farbe ein eigener Hover-Wert berechnet
   werden muss. Als Link UND als Button (Dropdown-Toggle) nutzbar. */
.club-icon-button.club-icon-button--colored,
a.club-icon-button.club-icon-button--colored {
    background: var(--club-icon-bg);
    border-color: var(--club-icon-bg);
    color: var(--club-icon-fg);
}

.club-icon-button.club-icon-button--colored:hover,
a.club-icon-button.club-icon-button--colored:hover {
    background: var(--club-icon-bg);
    border-color: var(--club-icon-bg);
    color: var(--club-icon-fg);
    filter: brightness(0.92);
}

/* Mobile Hamburger Menu Button in Toolbar */
.navbar-toggler-mobile {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    background: transparent;
    color: var(--club-text);
    padding: 0;
    display: none;
}

.navbar-toggler-mobile:hover {
    background: var(--club-hover-tint, rgba(0, 0, 0, 0.05));
}

.navbar-toggler-mobile {
    gap: 0.5rem;
    padding: 0 0.625rem;
}

.navbar-toggler-mobile .navbar-toggler-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--club-text);
}

.navbar-toggler-mobile .navbar-toggler-icon {
    width: 34px;
    height: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317202a' stroke-width='2'%3E%3Cline x1='4' y1='6' x2='20' y2='6'%3E%3C/line%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3Cline x1='4' y1='18' x2='20' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Dark Mode: SVG-Data-URI erlaubt keine CSS-Variablen im Stroke, daher
   eigene helle Variante des Hamburger-Icons fuer ausreichenden Kontrast. */
:root[data-bs-theme="dark"] .navbar-toggler-mobile .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8ecf1' stroke-width='2'%3E%3Cline x1='4' y1='6' x2='20' y2='6'%3E%3C/line%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3Cline x1='4' y1='18' x2='20' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

/* Always show hamburger for offcanvas_only layout */
.navbar-toggler-always {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show hamburger on mobile for other layouts */
@media (max-width: 991.98px) {
    .navbar-toggler-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* "Mitglied werden" Button in der Header-Toolbar (nicht Startseite).
   Kompakter als der grosse Hero-Button, damit er neben den Icons und dem
   Hamburger nicht dominiert. Auf sehr kleinen Screens ausgeblendet, da dort
   der Hamburger die primaere Navigation zur Mitgliedschaft-Seite übernimmt. */
.club-toolbar__member-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border: none;
    border-radius: var(--tpl-radius);
    background: var(--bs-secondary);
    color: #000;
    text-decoration: none;
    transition: all 0.2s ease;
}

.club-toolbar__member-btn:hover {
    background: color-mix(in srgb, var(--bs-secondary) 90%, #000);
    color: #000;
    text-decoration: none;
    transform: translateY(-2px);
}

@media (max-width: 575.98px) {
    .club-toolbar__member-btn {
        display: none;
    }
}

.club-nav {
    background: color-mix(in srgb, var(--bs-primary) 92%, #000);
    color: #fff;
    padding: 0;
    min-height: 56px;
    position: sticky;
    top: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 1019;
}

.club-nav--horizontal {
    padding: 0 1rem;
}

.club-breadcrumbs-section {
    padding: 1rem 0;
    border-bottom: 1px solid var(--club-border);
    margin-top: 0;
}

.club-breadcrumbs-section .breadcrumb {
    margin: 0;
    background: transparent;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.club-breadcrumbs-section .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.club-breadcrumbs-section .breadcrumb-item.active {
    display: inline-flex;
    align-items: center;
}

.club-breadcrumbs-section .mod-breadcrumbs__here {
    display: inline-flex;
    align-items: center;
}

.club-breadcrumbs-section .breadcrumb-item a {
    color: var(--club-text);
    text-decoration: none;
    border-radius: var(--tpl-radius);
    padding: 0.4rem 0.6rem;
    transition: background 0.2s ease;
}

.club-breadcrumbs-section .breadcrumb-item a:hover {
    background: var(--club-hover-tint, rgba(0, 0, 0, 0.05));
}

.club-breadcrumbs-section .breadcrumb-item::before {
    color: var(--club-muted);
}

.club-nav a {
    color: #fff;
}

/* Desktop menu (dark background) */
.club-nav .club-menu .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: var(--tpl-radius);
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    color: #fff;
}

.club-nav .club-menu .nav-link:hover,
.club-nav .club-menu .active > .nav-link {
    background: rgba(255, 255, 255, 0.14);
}

.club-nav .club-menu .dropdown-menu {
    border-radius: var(--tpl-radius);
    background: color-mix(in srgb, var(--bs-primary) 85%, #000);
    border: none;
}

.club-nav .club-menu .dropdown-menu .nav-link {
    color: #fff;
}

.club-nav .club-menu .dropdown-menu .nav-link:hover,
.club-nav .club-menu .dropdown-menu .nav-item.active > .nav-link {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Offcanvas menu (light background) */
.offcanvas .club-menu .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: var(--tpl-radius);
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    color: var(--club-text);
}

.offcanvas .club-menu .nav-link:hover,
.offcanvas .club-menu .active > .nav-link {
    background: var(--club-offcanvas-hover-bg, #f5f8fb);
    color: var(--bs-primary);
}

.offcanvas .club-menu .dropdown-menu {
    border-radius: var(--tpl-radius);
    background: var(--club-offcanvas-dropdown-bg, #f5f8fb);
    border: 1px solid var(--club-border);
}

.offcanvas .club-menu .dropdown-menu .nav-link {
    color: var(--club-text);
    padding-left: 2rem;
}

.offcanvas .club-menu .dropdown-menu .nav-link:hover,
.offcanvas .club-menu .dropdown-menu .nav-item.active > .nav-link {
    background: var(--club-offcanvas-dropdown-hover-bg, #e8eef5);
    color: var(--bs-primary);
}


.club-breadcrumbs {
    padding: 0.75rem 0;
}

.club-alert {
    padding: 1rem 0;
    text-align: center;
}

.club-alert--warning {
    background-color: var(--bs-secondary, #f4a300);
    color: #000;
}

.club-alert__content {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
}

.club-hero {
    position: relative;
    min-height: 320px;
    display: grid;
    align-items: center;
    isolation: isolate;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: club-hero-kenburns 24s ease-in-out infinite alternate;
}

/* Ken-Burns: sehr langsamer, dauerhafter Zoom auf das Hero-Hintergrundbild.
   background-size (statt transform:scale) laesst sich direkt animieren, ohne
   dass Overlay/Content mitskaliert werden muessten. Basis ist "cover" statt
   eines festen %-Werts, da das Bild sonst auf schmalen Mobile-Viewports die
   Sektion nicht vollstaendig ausfuellt und der Browser es mangels
   background-repeat:no-repeat vertikal wiederholt (sichtbares Bild-Duplikat). */
@keyframes club-hero-kenburns {
    from {
        background-size: cover;
    }
    to {
        background-size: 114%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-hero {
        animation: none;
    }
}

.club-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(5, 19, 33, 0.78), rgba(5, 19, 33, 0.28));
}

/* Spotlight-Cursor-Effekt: template.js schreibt --mx/--my (Mausposition in %)
   auf .club-hero waehrend mousemove. Zusaetzlicher Layer noetig, da
   .club-hero__overlay bereits einen eigenen linearen Gradient traegt und ein
   zweiter background-Wert diesen sonst ersetzen wuerde. */
.club-hero__spotlight {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(
        480px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.16),
        transparent 70%
    );
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.club-hero:hover .club-hero__spotlight,
.club-hero:focus-within .club-hero__spotlight {
    opacity: 1;
}

@media (hover: none) {
    .club-hero__spotlight {
        display: none;
    }
}

.club-hero__content {
    padding: 4rem 0;
    color: #fff !important;
}

.club-hero--has-video .club-hero__content {
    padding-right: min(34vw, 30rem);
}

.club-hero--has-brandmark .club-hero__content {
    padding-right: min(32vw, 26rem);
}

.club-hero__brandmark-position {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: clamp(1rem, 4vw, 4.5rem);
    pointer-events: none;
}

.club-hero__brandmark {
    display: block;
    width: clamp(11rem, 24vw, 20rem);
    max-height: calc(100% - 3rem);
    object-fit: contain;
    filter: drop-shadow(0 0.9rem 1.6rem rgba(0, 0, 0, 0.32));
}

@media (max-width: 767.98px) {
    .club-hero--has-brandmark .club-hero__content {
        padding-right: 0;
    }

    .club-hero__brandmark-position {
        align-items: flex-end;
        padding-right: 0;
        opacity: 0.22;
        overflow: hidden;
    }

    .club-hero__brandmark {
        width: min(11rem, 46vw);
        margin: 0 -1.25rem -1.25rem 0;
    }
}

.club-hero__video-position {
    position: absolute;
    inset: auto 0 2.25rem;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.club-hero__video-card {
    width: clamp(15rem, 21vw, 21.5rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--tpl-radius);
    background: #050f19;
    box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.club-hero__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #050f19;
}

/* Play-Button-Card (Desktop/Tablet): ersetzt das frueher direkt aktive
   <video> in der kleinen Hero-Card - zeigt nur noch Poster + Play-Icon,
   Klick oeffnet das grosse Video im Modal (siehe hero/default.php,
   #heroVideoModal). Uebernimmt bewusst dieselben Massse wie .club-hero__video
   (aspect-ratio 16/9), damit sich am Card-Layout optisch nichts aendert. */
.club-hero__video-trigger {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    background: #050f19;
    cursor: pointer;
}

.club-hero__video-trigger img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain statt cover: identisches Verhalten zum vorherigen <video>
       (object-fit:contain, siehe .club-hero__video oben) - das Poster soll
       das komplette Bild zeigen, nicht hineingezoomt/beschnitten wirken. */
    object-fit: contain;
    transition: transform 0.35s ease;
}

/* Card selbst bleibt in ihrer Groesse fix (overflow:hidden auf
   .club-hero__video-card, siehe oben) - der leichte Zoom auf dem Bild
   ragt dadurch nie sichtbar ueber die Kartengrenze hinaus. */
.club-hero__video-trigger:hover img,
.club-hero__video-trigger:focus-visible img {
    transform: scale(1.06);
}

.club-hero__video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 15, 25, 0.25);
    transition: background 0.2s ease;
}

.club-hero__video-trigger:hover .club-hero__video-play,
.club-hero__video-trigger:focus-visible .club-hero__video-play {
    background: rgba(5, 15, 25, 0.45);
}

.club-hero__video-play .fa-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--sport-ink-band, #111827);
    font-size: 1.15rem;
    /* Play-Dreieck ist optisch nicht zentriert im eigenen Glyph-Kasten -
       leichter Versatz gleicht das im runden Button aus. */
    padding-left: 0.2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.club-hero__video-trigger:hover .fa-play,
.club-hero__video-trigger:focus-visible .fa-play {
    transform: scale(1.08);
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.12);
}

/* Pulsierender Ring um den Play-Button bei Hover/Fokus - laeuft dauerhaft in
   einer Schleife, solange gehovert wird, und stoppt sauber (kein "Springen"
   zurueck zum Ausgangszustand) sobald die Maus die Card verlaesst. */
.club-hero__video-play .fa-play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    opacity: 0;
}

.club-hero__video-trigger:hover .fa-play::after,
.club-hero__video-trigger:focus-visible .fa-play::after {
    animation: club-hero-video-play-pulse 1.6s ease-out infinite;
}

@keyframes club-hero-video-play-pulse {
    from {
        transform: scale(1);
        opacity: 0.6;
    }
    to {
        transform: scale(1.9);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-hero__video-trigger:hover .fa-play::after,
    .club-hero__video-trigger:focus-visible .fa-play::after {
        animation: none;
    }
}

/* Video-Modal: schlichter, dunkler Rahmen ohne Bootstrap-Standard-Weiss, da
   das Video selbst meist dunkle/gemischte Inhalte zeigt und ein weisser
   Rahmen darum optisch stoeren wuerde. */
.club-hero__video-modal .modal-content {
    background: #050f19;
    border: none;
}

.club-hero__video-modal .modal-header {
    border-bottom: none;
    padding: 0.75rem 0.75rem 0;
}

.club-hero__video-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.85;
}

.club-hero__video-modal-player {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: #050f19;
}

@media (max-width: 991.98px) {
    .club-hero--has-video .club-hero__content {
        padding: 3rem 0 1.5rem;
    }

    .club-hero__video-card {
        width: min(100%, 32rem);
    }
}

/* Mobile Video-Instanz (hero.video-mobile): steht als eigener Block nach den
   Statistik-Kacheln, statt absolut ueber dem Hero zu schweben wie am Desktop.
   Eigener Abstand noetig, da .club-statistics keinen margin-bottom mitbringt. */
.club-hero__video-position--mobile {
    position: static;
    justify-content: center;
    padding: 0;
    margin: 1.5rem 0 2rem;
}

.club-hero__video-position--mobile .club-hero__video-card {
    width: min(85%, 22rem);
    margin-inline: auto;
}

.club-hero h1 {
    max-width: 100%;
    margin: 0;
    letter-spacing: 0;
    color: #fff !important;
}

.club-hero p {
    max-width: 680px;
    margin: 1rem 0 0;
    font-size: 1.125rem;
    color: #fff !important;
}

/* Redaktioneller Editor-Inhalt (hero_content) kann eigene Inline-Farben je
   Absatz/Wort mitbringen (TinyMCE) - im Hero muss trotzdem alles hell bleiben */
.club-hero__content,
.club-hero__content * {
    color: #fff !important;
}

.club-hero__eyebrow,
.club-hero__eyebrow * {
    color: var(--bs-secondary, #f4a300) !important;
}

.club-hero--article {
    min-height: clamp(460px, 42vw, 620px);
    background-position: center;
}

/* Optionale, pro Artikel im Backend waehlbare Hero-Bildausrichtung: im
   Artikel unter "Bilder und Links" -> Einleitungsbild -> "CSS-Klasse Bild"
   einen dieser Klassennamen eintragen (validate="CssIdentifier" im
   Joomla-Core erlaubt nur gueltige Klassennamen, kein direkter
   background-position-Wert - daher der Umweg ueber benannte Klassen).
   Noetig, wenn die abgebildete Person/das Motiv nicht mittig im Foto steht
   und background-position:center (Standard oben) sie sonst anschneidet. */
.club-hero--article.hero-position-right {
    background-position: 85% 20%;
}

.club-hero--article.hero-position-left {
    background-position: 15% 20%;
}

/* hero-image-full-right: zeigt das KOMPLETTE Einleitungsbild ohne Anschnitt,
   rechtsbuendig - im Unterschied zu hero-position-right (verschiebt nur den
   cover-Ausschnitt, schneidet aber weiterhin Kopf/Fuesse an). background-size
   wird dafuer von cover auf contain umgestellt: das Bild wird komplett
   eingepasst, links davon bleibt Platz fuer den Overlay-Gradient + Text (der
   Farbverlauf in .club-hero--article .club-hero__overlay weiter unten laeuft
   ohnehin von links nach rechts - passt also inhaltlich zusammen). contain
   kann dabei oben/unten Streifen ohne Bildinhalt zeigen (background-color
   als dunkler Fallback dahinter); der Kenburns-Zoom ueber background-size
   waere hier visuell unpassend, daher wird die Animation deaktiviert. */
.club-hero--article.hero-image-full-right {
    background-color: var(--sport-ink-band, #111827);
    background-size: contain;
    background-position: right center;
    animation: none;
}

.club-hero--default {
    background-color: var(--sport-ink, #111827);
    background-position: center;
    background-repeat: no-repeat;
}

.club-hero--article .club-hero__overlay {
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.94) 0%, rgba(17, 24, 39, 0.72) 48%, rgba(17, 24, 39, 0.2) 100%);
}

.club-hero--article.club-hero--default .club-hero__overlay {
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.96) 0%, rgba(17, 24, 39, 0.9) 48%, rgba(17, 24, 39, 0.62) 100%);
}

.club-hero--article .club-hero__content {
    display: flex;
    min-height: inherit;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5rem);
}

.club-hero__eyebrow {
    margin: 0 0 1rem;
    color: var(--bs-secondary, #f4a300) !important;
    font-size: 0.88rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-hero--article h1 {
    max-width: 820px;
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);
    font-weight: 900;
    line-height: 1.05;
}

.club-hero--article p:not(.club-hero__eyebrow) {
    max-width: 760px;
    font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92) !important;
}

.hero-content-block {
    width: 100%;
}

.hero-content-block h2 {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 1.5rem 0;
    color: #fff;
}

.hero-content-block .text-highlight {
    color: var(--bs-secondary);
}

.hero-content-block p {
    font-size: 1rem;
    margin: 0 0 2rem 0;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Dritter CTA neben den beiden Haupt-Buttons: faengt Besucher ab, die vor der
   Anmeldung erst eine Frage klaeren wollen. Bewusst als Outline-Button (statt
   Solid-Fill wie Primary/Secondary), damit die Hierarchie klar bleibt - er
   wird per JS (template.js, initHeroContactButtonPlacement) aus dem Hero-Ende
   direkt hinter die zwei Haupt-Buttons in .hero-buttons verschoben. */
.hero-contact-btn {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
}

.hero-contact-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #fff !important;
    transform: translateY(-2px);
}

.hero-member-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--bs-primary) !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px #fff;
}

.hero-buttons .hero-member-btn i,
.hero-buttons .hero-member-btn .fa,
.hero-buttons .hero-member-btn .fas {
    color: var(--bs-primary) !important;
    opacity: 1;
}

.hero-member-btn:hover,
.hero-member-btn:focus-visible {
    background: var(--bs-secondary) !important;
    color: #17202a !important;
    box-shadow: inset 0 0 0 2px var(--bs-secondary);
    transform: translateY(-2px);
}

.hero-buttons .hero-member-btn:hover i,
.hero-buttons .hero-member-btn:focus-visible i {
    color: #17202a !important;
}

.hero-buttons .btn,
.club-tile__tags .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: var(--tpl-radius);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hero-buttons .btn-primary {
    background: var(--bs-primary);
    color: #fff;
}

.hero-buttons .btn-primary:hover {
    background: color-mix(in srgb, var(--bs-primary) 85%, #000);
    transform: translateY(-2px);
}

.hero-buttons .btn-secondary,
.club-tile__tags .btn-secondary {
    background: var(--bs-secondary);
    color: #000;
}

.hero-buttons .btn-secondary:hover,
.hero-buttons .btn-secondary:focus-visible,
.club-tile__tags .btn-secondary:hover,
.club-tile__tags .btn-secondary:focus-visible {
    background: color-mix(in srgb, var(--bs-secondary) 90%, #000);
    transform: translateY(-2px);
}

.hero-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-tags .tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-tags .tag:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Startseiten-Hashtag-Pills (aus dem freien hero_content-Editorfeld) kosten auf
   kleinen Screens wertvollen Platz direkt vor den CTA-Buttons und haben dort
   keinen Klickwert. Artikel-Tags (.club-hero--article) bleiben unberuehrt,
   da sie echte Verlinkung zu Tag-Uebersichten bieten. */
@media (max-width: 767.98px) {
    .club-hero:not(.club-hero--article) .hero-tags {
        display: none;
    }

    .hero-buttons .btn {
        padding: 0.65rem 1.1rem;
        font-size: 0.75rem;
    }
}

.club-main {
    padding: 3rem 0;
    background: transparent;
}

.club-statistics {
    position: relative;
    margin-top: -116px;
    padding: 0;
    background: transparent;
    border-bottom: none;
}

.club-statistics__box {
    max-width: 50%;
    margin-left: auto;
}

.club-statistic {
    padding: 0.75rem;
    text-align: center;
    border: none;
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
    box-shadow: 0 4px 12px var(--club-shadow-md, rgba(0, 0, 0, 0.12));
    transition: box-shadow 0.3s ease;
}

.club-statistic:hover {
    box-shadow: 0 8px 24px var(--club-shadow-lg, rgba(0, 0, 0, 0.16));
}

/* Flip-Card fuer Statistiken mit hinterlegtem Link (Trainer/Abteilungen):
   .club-statistic--flip bekommt die 3D-Perspektive, .club-statistic__inner
   dreht sich komplett, Front/Back liegen uebereinander (backface-visibility)
   und werden je nach Drehwinkel sichtbar/unsichtbar. Karten ohne Link
   (.club-statistic ohne --flip) bleiben unveraendert - dort ist
   .club-statistic__inner nur ein normaler Block ohne Transform. */
.club-statistic--flip {
    padding: 0;
    perspective: 1200px;
    overflow: visible;
}

.club-statistic--flip .club-statistic__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 9.5rem;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.club-statistic--flip:hover .club-statistic__inner,
.club-statistic--flip:focus-within .club-statistic__inner {
    transform: rotateY(180deg);
}

.club-statistic--flip .club-statistic__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.club-statistic--flip .club-statistic__face--back {
    transform: rotateY(180deg);
    gap: 0.5rem;
    color: var(--bs-primary);
    text-decoration: none !important;
    background: var(--club-card-bg, #fff);
    border-radius: var(--tpl-radius);
}

.club-statistic--flip .club-statistic__face--back span {
    color: var(--bs-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.club-statistic__link-icon {
    font-size: 1.4rem;
    transition: transform 0.2s ease;
}

.club-statistic--flip .club-statistic__face--back:hover .club-statistic__link-icon {
    transform: translateX(4px);
}

/* Mit reduzierter Bewegung: kein 3D-Flip. Vorderseite bleibt dauerhaft
   statisch sichtbar (kein Drehmoment, das Uebelkeit ausloesen koennte);
   die Rueckseite/der Link ist in diesem Modus bewusst nicht per Hover
   erreichbar, sondern nur ueber den regulaeren Seiteninhalt. */
@media (prefers-reduced-motion: reduce) {
    .club-statistic--flip .club-statistic__inner {
        position: static;
        min-height: 0;
        transition: none;
    }

    .club-statistic--flip:hover .club-statistic__inner,
    .club-statistic--flip:focus-within .club-statistic__inner {
        transform: none;
    }

    .club-statistic--flip {
        padding: 0.75rem;
    }

    .club-statistic--flip .club-statistic__face--front {
        position: static;
        padding: 0;
    }

    .club-statistic--flip .club-statistic__face--back {
        display: none;
    }
}

.club-statistic__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.35rem;
}

.club-statistic__ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.club-statistic__ring-track,
.club-statistic__ring-fill {
    fill: none;
    stroke-width: 4;
}

.club-statistic__ring-track {
    stroke: var(--club-border);
}

.club-statistic__ring-fill {
    stroke: var(--bs-primary);
    stroke-linecap: round;
    /* Umfang bei r=28: 2 * PI * 28 ≈ 175.93 */
    stroke-dasharray: 175.93;
    stroke-dashoffset: 175.93;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.club-statistic.is-visible .club-statistic__ring-fill {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .club-statistic__ring-fill {
        transition: none;
        stroke-dashoffset: 0;
    }
}

.club-statistic__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--bs-primary);
}

.club-statistic strong {
    display: block;
    color: var(--bs-primary);
    font-size: 1.25rem;
    line-height: 1.1;
    margin-bottom: 0.15rem;
}

.club-statistic span {
    display: block;
    color: var(--club-muted);
    font-size: 0.8rem;
}

.club-sections-wrapper {
    width: 100%;
    position: relative;
    --color-primary: var(--bs-primary);
}

/* Der Hintergrund wird im Backend als Inline-style (Farbe/Gradient auf Basis von
   white) konfiguriert und daher unabhaengig vom Theme immer hell gerendert -
   im Dark Mode per !important auf die dunkle Flaeche umbiegen. */
:root[data-bs-theme="dark"] .club-sections-wrapper {
    background: var(--club-surface) !important;
}

.club-sections {
    background: transparent;
}

.club-sections__subtitle {
    margin: 0 0 2rem 0;
    font-size: 1rem;
    color: var(--club-muted);
    font-weight: 400;
    line-height: 1.5;
}

.club-section {
    padding: 1.5rem 0;
    background: transparent;
}

.club-section h2 {
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
    letter-spacing: 0;
}

.club-section__subtitle {
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
    color: var(--club-muted);
    font-weight: 400;
    line-height: 1.5;
}

.club-section__title-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--club-text);
    background: linear-gradient(to right, var(--section-badge-color, #0c5da3) 50%, transparent 50%);
    background-position: bottom;
    background-size: 100% 3px;
    background-repeat: no-repeat;
}

.club-section__title-badge i {
    font-size: 1.1em;
    color: var(--club-text);
}

.club-section__placeholder {
    color: var(--club-muted);
}

.club-tile {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 14.5rem;
    height: 100%;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--club-border);
    border-top: 3px solid var(--bs-secondary);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
    color: var(--club-text);
    box-shadow: none;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.club-tile:hover,
.club-tile:focus-within {
    transform: translateY(-0.3rem);
    border-color: color-mix(in srgb, var(--bs-secondary) 55%, var(--club-border));
    background: color-mix(in srgb, var(--club-card-bg, #fff) 96%, var(--bs-secondary));
    box-shadow: 0 0.9rem 2rem var(--club-shadow-md, rgba(0, 0, 0, 0.12));
}

.club-tile__header {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.club-tile__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1rem;
}

.club-tile__title {
    margin: 0;
    color: var(--club-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.club-tile__subtitle {
    margin: 0;
    color: var(--bs-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.club-tile__icon {
    flex: 0 0 auto;
    color: var(--bs-secondary);
    font-size: 0.8rem;
}

.club-tile__description {
    margin: 0;
    color: var(--club-muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.club-tile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.club-tile__tag {
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

.club-tile__tag:not(.btn) {
    color: var(--club-link, var(--bs-primary));
}

.club-tile__tags.hero-tags .tag:not(.btn) {
    padding: 0.4rem 0.75rem;
    background: transparent;
    color: var(--club-link, var(--bs-primary));
    border: 1px solid color-mix(in srgb, var(--bs-primary) 20%, var(--club-border));
    border-radius: 20px;
}

a.club-tile__tag:not(.btn):hover,
a.club-tile__tag:not(.btn):focus-visible {
    color: var(--club-link-hover);
    text-decoration: underline;
}

.club-tile__tags.hero-tags a.tag:not(.btn):hover,
.club-tile__tags.hero-tags a.tag:not(.btn):focus-visible {
    background: color-mix(in srgb, var(--bs-secondary) 20%, var(--club-card-bg, #fff));
    color: var(--club-link-hover);
    border-color: var(--bs-secondary);
    text-decoration: none;
    transform: translateY(-0.1rem);
}

.club-tile__tags.hero-tags .tag.btn-secondary {
    background: var(--bs-secondary);
    color: #000;
    border-color: var(--bs-secondary);
    border-radius: var(--tpl-radius);
}

.club-tile__tags.hero-tags .tag.btn-secondary:hover,
.club-tile__tags.hero-tags .tag.btn-secondary:focus-visible {
    background: color-mix(in srgb, var(--bs-secondary) 90%, #000);
    color: #000;
    border-color: color-mix(in srgb, var(--bs-secondary) 90%, #000);
}

.club-tile__tags .club-tile__tag--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    text-align: center;
    white-space: normal;
    text-decoration: none;
}

.club-tile__tag--button .fa-arrow-right {
    transition: transform 0.2s ease;
}

a.club-tile__tag--button:hover .fa-arrow-right,
a.club-tile__tag--button:focus-visible .fa-arrow-right {
    transform: translateX(0.2rem);
}

@media (prefers-reduced-motion: reduce) {
    .club-tile {
        transition: none;
    }

    .club-tile:hover,
    .club-tile:focus-within {
        transform: none;
    }

    .club-tile__tag--button .fa-arrow-right {
        transition: none;
    }
}

.club-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.club-card__image-wrapper {
    position: relative;
}

.club-card__image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--club-image-placeholder-bg, #eef2f6);
}

/* Shimmer waehrend des (lazy) Bildladens: template.js setzt [data-loaded] auf
   das <img>, sobald load gefeuert hat bzw. img.complete schon true war
   (Cache-Fall). Bis dahin laeuft der Puls ueber den Platzhalter-Hintergrund. */
.club-card__image img:not([data-loaded]) {
    opacity: 0;
}

.club-card__image:has(img:not([data-loaded]))::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--club-shadow-sm, rgba(0, 0, 0, 0.06)),
        transparent
    );
    background-size: 200% 100%;
    animation: club-image-shimmer 1.4s ease-in-out infinite;
}

@keyframes club-image-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-card__image:has(img:not([data-loaded]))::after {
        animation: none;
    }
}

.club-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.club-card__cta-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: var(--club-cta-button, #0c5da3);
    color: #fff;
    border-radius: var(--tpl-radius);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.club-card__cta-badge:hover {
    background: var(--club-cta-button-hover, #094284);
    text-decoration: none;
    color: #fff;
}

.club-card__body {
    padding: 1rem;
}

.club-card__body h3 {
    margin: 0.25rem 0;
    font-size: 1.1rem;
    letter-spacing: 0;
}

.club-card__body h3 a {
    color: var(--club-text);
    text-decoration: none;
}

.club-card__meta {
    display: block;
    margin: 0 0 0.5rem;
    color: var(--club-muted);
    font-size: 0.9rem;
}

.club-like-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--club-muted);
    font-size: inherit;
    cursor: pointer;
}

.club-like-button .fa-heart {
    display: inline-block;
    color: var(--club-muted);
    transition: color 0.2s ease;
}

.club-like-button:hover .fa-heart {
    color: #dc3545;
    animation: club-like-heartbeat 0.6s ease-in-out;
}

/* Herzschlag-Puls: zwei schnelle Pulse statt eines langen, wie ein
   echter Herzschlag. Nur bei :hover, nicht dauerhaft aktiv, damit es nicht
   nervt, wenn der Button laenger im Blick bleibt. */
@keyframes club-like-heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.25);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.2);
    }
    60% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-like-button:hover .fa-heart {
        animation: none;
    }
}

.club-like-button.is-active .fa-heart {
    color: #dc3545;
}

.club-like-button:disabled {
    cursor: default;
    opacity: 0.7;
}

.floating-heart {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #dc3545;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.club-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

.club-share-buttons {
    display: inline-flex;
    gap: 0.35rem;
}

.club-share-buttons a {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--club-text);
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    text-decoration: none;
}

.club-carousel-wrapper {
    position: relative;
}

.club-carousel {
    padding-inline: 0;
    border-radius: var(--tpl-radius);
    overflow: visible;
    position: relative;
    padding-top: 3.5rem;
}

.club-carousel .carousel-inner {
    border-radius: var(--tpl-radius);
    overflow: hidden;
}

.club-carousel .carousel-control-prev,
.club-carousel .carousel-control-next {
    position: absolute;
    top: 0.5rem;
    width: 2rem;
    height: 2rem;
    opacity: 1;
    background: transparent;
    border: none;
    transform: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmpl-club-manager .club-carousel .carousel-control-prev {
    left: auto !important;
    right: 2.75rem !important;
}

.tmpl-club-manager .club-carousel .carousel-control-next {
    right: 0.5rem !important;
}

.club-carousel .carousel-control-prev-icon,
.club-carousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--bs-primary);
    background-color: color-mix(in srgb, var(--club-card-bg, #fff) 55%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.club-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.club-carousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--bs-primary);
}

.club-carousel .carousel-control-prev:hover .carousel-control-prev-icon::before {
    border-right-color: #fff;
}

.club-carousel .carousel-control-next:hover .carousel-control-next-icon::before {
    border-left-color: #fff;
}

.club-carousel .carousel-control-prev-icon::before,
.club-carousel .carousel-control-next-icon::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
}

.club-carousel .carousel-control-prev-icon::before {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--bs-primary);
}

.club-carousel .carousel-control-next-icon::before {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--bs-primary);
}

.club-carousel .carousel-indicators {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    gap: 0;
    display: flex;
    width: auto;
    height: 3px;
    background: transparent;
    border-radius: 0;
    margin-top: 1rem;
    margin-left: 0;
    margin-right: auto;
    padding: 0;
    overflow: hidden;
    max-width: 200px;
}

.club-carousel .carousel-indicators button {
    flex: 1;
    width: auto;
    height: 100%;
    border-radius: 0;
    background-color: var(--club-border);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0;
    margin: 0;
}

.club-carousel .carousel-indicators button.active {
    background-color: var(--bs-primary);
}

@media (max-width: 768px) {
    .club-carousel .carousel-control-prev,
    .club-carousel .carousel-control-next {
        display: none;
    }
}

.club-event-list {
    display: grid;
    gap: 0.75rem;
}

.club-event-list__item {
    padding: 1rem 1.5rem;
    background: var(--club-card-bg, #fff);
    border-radius: var(--tpl-radius);
    border-left: 5px solid var(--bs-primary);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    display: block;
}

.club-event-list__item {
    text-decoration: none !important;
}

.club-event-list__item:hover {
    background: color-mix(in srgb, var(--bs-primary) 4%, var(--club-card-bg, #fff));
    box-shadow: 0 2px 8px var(--club-shadow-sm, rgba(0, 0, 0, 0.08));
    text-decoration: none !important;
}

.club-event-list__footer {
    margin-top: 2rem;
    text-align: center;
}

.club-event-list__view-all:hover {
    background: var(--club-cta-button-hover);
    color: #fff;
    text-decoration: none;
}

.club-section__footer {
    margin-top: 2rem;
    text-align: center;
}

.club-section__view-all {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--club-cta-button);
    color: #fff;
    border-radius: var(--tpl-radius);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.club-section__view-all:hover {
    background: var(--club-cta-button-hover);
    color: #fff;
    text-decoration: none;
}

.club-footer .row {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.club-event-list__view-all {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--club-cta-button);
    color: #fff;
    border-radius: var(--tpl-radius);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.club-month-calendar {
    background: var(--club-card-bg, #fff);
    border-radius: var(--tpl-radius);
    padding: 1.5rem;
    border: 1px solid var(--club-border);
}

.club-month-calendar__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.club-month-calendar__header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--club-text);
}

.club-month-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--club-border);
}

.club-month-calendar__weekday {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--club-muted);
}

.club-month-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.club-month-calendar__day {
    min-height: 120px;
    padding: 0.75rem;
    background: var(--club-card-bg, #fff);
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    display: flex;
    flex-direction: column;
}

.club-month-calendar__day.is-today {
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--club-card-bg, #fff));
    border-color: var(--bs-primary);
    border-width: 2px;
}

.club-month-calendar__day.is-other-month {
    background: var(--club-calendar-muted-bg, #f9f9f9);
    color: var(--club-muted);
}

.club-month-calendar__date {
    font-weight: 700;
    font-size: 1rem;
    color: var(--club-text);
    margin-bottom: 0.5rem;
}

.club-month-calendar__day.is-other-month .club-month-calendar__date {
    color: var(--club-border);
}

.club-month-calendar__events {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    min-width: 0;
}

.club-month-calendar__event {
    line-height: 1.3;
    min-width: 0;
}

.club-month-calendar__event a {
    color: var(--bs-primary);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.club-month-calendar__event a:hover {
    color: color-mix(in srgb, var(--bs-primary) 85%, #000);
}

.club-month-calendar__event time {
    display: block;
    font-weight: 600;
    color: var(--club-text);
}

.club-month-calendar__more {
    color: var(--club-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.club-event-list__item {
    align-items: start;
}

.club-event-list__date {
    display: grid;
    min-height: 72px;
    place-items: center;
    padding: 0.5rem;
    color: #fff;
    background: var(--bs-primary);
    border-radius: var(--tpl-radius);
    text-align: center;
}

.club-event-list__date span {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.club-event-list__date small {
    text-transform: uppercase;
}

.club-month-grid__item {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
}

.club-month-grid__item > time {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: var(--bs-primary);
    font-weight: 800;
}

.club-month-grid__item .club-card {
    border: 0;
}

.club-month-grid__item .club-card__body {
    padding: 0;
}

/* Sponsoren-Band: endlos laufendes Logo-Carousel (reines CSS) */
.club-sponsors {
    padding: 2.5rem 0;
    background: var(--club-surface, #fff);
    border-top: 1px solid var(--club-border);
    overflow: hidden;
}

.club-sponsors__title {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    text-align: center;
    color: var(--club-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.club-sponsors__viewport {
    overflow: hidden;
}

.club-sponsors__track {
    --sponsors-gap: 4rem;
    display: flex;
    align-items: center;
    gap: var(--sponsors-gap);
    width: max-content;
    animation: club-sponsors-scroll var(--sponsors-duration, 30s) linear infinite;
}

.club-sponsors__viewport:hover .club-sponsors__track {
    animation-play-state: paused;
}

.club-sponsors__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.club-sponsors__item img {
    max-height: 96px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s ease;
}

.club-sponsors__item:hover img,
.club-sponsors__item:focus-visible img {
    filter: grayscale(0%) opacity(1);
}

@keyframes club-sponsors-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Eine komplette Logo-Liste (die Haelfte des doppelten Tracks) */
        transform: translateX(calc(-50% - var(--sponsors-gap) / 2));
    }
}

/* Mobil: kleinere Logos und engerer Abstand, Laufband bleibt horizontal */
@media (max-width: 767.98px) {
    .club-sponsors__track {
        --sponsors-gap: 2rem;
    }

    .club-sponsors__item img {
        max-height: 64px;
        max-width: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-sponsors__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.5rem;
    }

    /* Zweite (duplizierte) Logo-Liste ausblenden, sonst erscheint jedes Logo doppelt */
    .club-sponsors__item[aria-hidden="true"] {
        display: none;
    }
}

.club-footer {
    background: color-mix(in srgb, var(--bs-primary) 90%, #000);
    color: #fff;
    padding: 3rem 0 1rem;
}

/* Social-Media-Leiste ganz oben im Footer: Text links, Icons rechts */
.club-footer__social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.club-footer__social-text {
    margin: 0;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.club-footer__social-icons {
    display: flex;
    gap: 0.75rem;
}

.club-footer__social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    color: #000;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.club-footer__social-icons a:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Brand-Spalte im Footer: Logo + Vereinsname + Beschreibung */
.club-footer__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.club-footer__brand img {
    max-height: 56px;
    width: auto;
}

.club-footer__brand-name {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.club-footer__description {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

.club-footer__quicklinks {
    margin-top: 1.5rem;
}

.club-footer__quicklinks h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 1rem;
    color: #fff;
}

/* mod_menu (style="none") gibt <ul class="mod-menu mod-list nav"><li class="nav-item ...">
   ohne feste Klasse auf dem <a> selbst aus - siehe modules/mod_menu/tmpl/default.php
   und default_url.php im Joomla-Core. Keine .nav-link-Klasse verfuegbar, daher
   wird direkt auf <li> a selektiert. Bootstraps .nav/.nav-item bringen eigene
   padding/margin mit, die hier explizit auf 0 gesetzt werden, sonst wirkt die
   Liste unnoetig aufgeblaeht. */
.club-footer__quicklinks ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.club-footer__quicklinks li {
    margin: 0;
    padding: 0;
}

/* Die Hauptnav-Regel .tmpl-club-manager .nav-link (weiter oben in dieser
   Datei) klammert .club-footer__quicklinks .nav-link explizit per :not()
   aus - deshalb kann hier ganz ohne !important gearbeitet werden, kein
   Risiko mehr, versehentlich die Hauptnavigation im Header zu beeinflussen. */
.club-footer .club-footer__quicklinks li a {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    gap: 0.6rem;
    padding: 0;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color 0.2s ease;
}

/* Menue-Icon aus dem Joomla-Menuepunkt-Feld "Link-Symbol": Core rendert
   <span class="p-2 fa-solid fa-...">, das Bootstrap-p-2-Padding wird hier
   neutralisiert, damit das Icon buendig mit dem Rest der Footer-Spalten
   (.club-footer__item i) ausgerichtet ist. */
.club-footer__quicklinks li a span[class*="fa-"] {
    padding: 0 !important;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}

.club-footer__quicklinks li a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Untere Footer-Leiste: Copyright links, Rechtslinks (Footer-Menue) rechts */
.club-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.club-footer__legal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.club-footer__legal ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* club-footer__legal enthaelt zwei unabhaengige <ul>-Listen nebeneinander
   (Menue-Modul, eigene "Cookie anpassen"-Liste) - jede liefert ihr eigenes,
   bereits geschlossenes Markup (jdoc:include), daher koennen ihre <li>-Elemente
   nicht in eine gemeinsame <ul> zusammengefasst werden. :not(:first-child)
   wirkt nur innerhalb derselben Liste, deshalb wird hier die zweite <ul> an
   ein "vorheriges Geschwister-<ul> vorhanden"-Muster gekoppelt. */
.club-footer__legal > ul:not(:first-child) .nav-item:first-child::before {
    content: "·";
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Newsletter Anmelden/Abmelden: eigene zentrierte Zeile unterhalb von
   Copyright/Impressum/Datenschutz/Cookie anpassen. */
.club-footer__newsletter-row {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.club-footer__newsletter-title {
    margin: 0 0 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.club-footer__newsletter-row .mod-newsletter .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.club-footer__newsletter-row .mod-newsletter .nav-link {
    padding: 0 !important;
    min-height: auto;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.club-footer__newsletter-row .mod-newsletter .nav-link:hover {
    color: #fff;
    background: transparent;
}

.club-footer__legal .nav-item {
    display: inline-flex;
    align-items: center;
}

.club-footer__legal .nav-item:not(:first-child)::before {
    content: "·";
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.club-footer__legal .nav-link {
    display: inline;
    min-height: auto;
    padding: 0 !important;
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.club-footer__legal .nav-link:hover {
    background: none;
    color: #fff;
    text-decoration: underline;
}

.club-footer__legal .nav-item.active > .nav-link {
    background: none;
    color: #fff;
}

/* Mobil: Menue und Copyright gestapelt und zentriert */
@media (max-width: 767.98px) {
    .club-footer__legal ul {
        justify-content: center;
    }

    .club-footer__bottom {
        padding-top: 1.25rem;
        text-align: center;
    }
}

.club-footer__inner {
    display: flex;
    flex-direction: column;
}

.club-footer__col {
    display: flex;
    flex-direction: column;
}

.club-footer__col h2 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 1.5rem;
    color: #fff;
}

.club-footer__section {
    margin-bottom: 1.5rem;
}

.club-footer__section h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 1rem;
    color: #fff;
}

.club-footer__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.club-footer__item i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.8);
}

.club-footer__item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.club-footer__item a:hover {
    color: #fff;
    text-decoration: none;
}

.club-footer__map {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--club-shadow-md, rgba(0, 0, 0, 0.2));
}

/* Original Footer CSS */
.club-footer {
    padding: 3rem 0;
    color: #fff;
    background: var(--club-footer-bg, #111827);
}

.club-footer a {
    color: #fff;
}

.club-footer a i {
    color: #111827
}

.club-footer__grid {
    display: grid;
    gap: 2rem;
}

.club-footer h2 {
    font-size: 1rem;
    letter-spacing: 0;
}

.club-social-links {
    display: flex;
    gap: 0.75rem;
}

.club-social-links a {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--tpl-radius);
}

html.a11y-large-fonts {
    font-size: 112.5%;
}

html.a11y-high-contrast,
html.a11y-high-contrast body {
    color: #ffff00;
    background: #000;
}

html.a11y-high-contrast a {
    color: #00ff00;
}

html.a11y-highlight-links a {
    font-weight: 700;
    text-decoration: underline;
}

html.a11y-grayscale {
    filter: grayscale(100%);
}

@media (max-width: 767.98px) {
    /* Mobil kein Overlap ins Hero-Bild: Kacheln sitzen als eigener Block darunter
       statt (wie am Desktop gewollt) in den Hero-Rand hineinzuragen. */
    .club-statistics {
        margin-top: 1.5rem;
    }

    .club-statistics__box {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .club-header__inner {
        min-height: auto;
        padding: 1rem 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .club-toolbar {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: flex-start;
        width: 100%;
    }

    /* Burger rechts, A11y-/Darkmode-Icons links */
    .club-toolbar .navbar-toggler-mobile {
        margin-left: auto;
    }

    .club-brand__logo {
        max-height: 72px;
        max-width: 160px;
    }

    .club-brand {
        max-width: 100%;
    }

    .club-brand__name {
        white-space: normal;
    }

    .club-carousel {
        padding-inline: 0;
    }

    .club-carousel .carousel-control-prev,
    .club-carousel .carousel-control-next {
        display: none;
    }

    .club-event-list__item {
        grid-template-columns: 1fr;
    }
}

/* Card Styling (Grid kommt von Bootstrap row/col) */
.club-card {
    display: flex;
    flex-direction: column;
    background: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 3px var(--club-shadow-sm, rgba(0, 0, 0, 0.08));
}

.club-card:hover {
    box-shadow: 0 4px 12px var(--club-shadow-md, rgba(0, 0, 0, 0.15));
    transform: translateY(-2px);
}

/* Hauptartikel im Artikel-Grid: mobil bleibt die gewohnte Kartenstapelung
   erhalten, ab Tablet nutzt die Karte eine kompakte redaktionelle Teilung. */
.club-card--featured {
    border-top: 4px solid var(--bs-primary);
    box-shadow: 0 4px 16px var(--club-shadow-md, rgba(0, 0, 0, 0.14));
}

@media (min-width: 768px) {
    .club-card--featured-with-image {
        display: grid;
        grid-template-columns: minmax(17rem, 40%) minmax(0, 1fr);
        min-height: 20rem;
    }

    .club-card--featured .club-card__image-wrapper {
        width: 100%;
        height: 100%;
        min-height: 20rem;
        border-right: 1px solid var(--club-border);
    }

    .club-card--featured .club-card__image img {
        object-position: center;
    }

    .club-card--featured .club-card__body {
        padding: clamp(1.5rem, 3vw, 2.5rem);
    }

    .club-card--featured .club-card__title {
        margin-bottom: 1rem;
        font-size: clamp(1.35rem, 2vw, 1.75rem);
        line-height: 1.2;
    }

    .club-card--featured .club-card__text {
        font-size: 1rem;
        line-height: 1.65;
    }

    .club-card--featured .club-card__footer {
        margin-top: auto;
    }
}

.club-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: var(--club-image-placeholder-bg, #f0f4f8);
}

.club-card__image-wrapper:has(img:not([data-loaded]))::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--club-shadow-sm, rgba(0, 0, 0, 0.06)),
        transparent
    );
    background-size: 200% 100%;
    animation: club-image-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .club-card__image-wrapper:has(img:not([data-loaded]))::after {
        animation: none;
    }
}

.club-card__image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    position: relative;
}

.club-card__image:hover {
    opacity: 0.9;
}

.wf-icon-zoom-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wf-icon-zoom-image svg {
    fill: #fff;
    width: 24px;
    height: 24px;
}

.club-card__image:hover .wf-icon-zoom-image {
    opacity: 1;
}

.club-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.club-card__image img:not([data-loaded]) {
    opacity: 0;
}

.club-card__image:hover img {
    transform: scale(1.06);
}

.club-card__category {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--bs-primary);
    padding: 0.35rem 0.7rem;
    border-radius: 0.25rem;
    z-index: 10;
}

.club-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
}

.club-card__header {
    margin-bottom: 0.75rem;
}

.club-card__badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--bs-primary);
    color: #fff;
    border-radius: var(--tpl-radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.club-card__badge:hover {
    background: color-mix(in srgb, var(--bs-primary) 85%, #000);
    text-decoration: none;
    color: #fff;
}

.club-card__title {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--club-text);
}

.club-card__text {
    flex: 1;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: var(--club-muted);
    line-height: 1.5;
}

.club-card__tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem 0;
}

.club-card__tag {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-primary);
    background: rgba(13, 59, 102, 0.08);
    border: 1px solid rgba(13, 59, 102, 0.15);
    border-radius: var(--tpl-radius);
    text-decoration: none;
    transition: all 0.2s ease;
}

.club-card__tag:hover {
    background: rgba(13, 59, 102, 0.15);
    border-color: var(--bs-primary);
    text-decoration: none;
}

.club-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--club-border);
    gap: 0.5rem;
}

.club-card__footer--no-divider {
    padding-top: 0;
    border-top: 0;
}

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

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

.club-card--full-content {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.club-card--full-content:hover {
    transform: none;
    box-shadow: none;
}

.club-card--full-content .club-card__body {
    padding: 0;
}

.club-card__footer time {
    display: flex;
    align-items: center;
    color: var(--club-muted);
    font-size: 0.85rem;
    margin: 0;
    flex-shrink: 0;
}

.club-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.club-card__link {
    color: var(--club-link, #0c5da3);
    font-weight: 600;
    text-decoration: none;
}

.club-card__link:hover {
    text-decoration: underline;
}

.club-card__share-btn {
    background: transparent;
    border: none;
    color: var(--club-text);
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.club-card__share-btn:hover {
    color: var(--bs-primary);
}

body.modal-open {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

.modal.fade {
    padding-right: 0 !important;
}

.modal.show {
    padding-right: 0 !important;
}

.club-share-modal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.club-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    text-decoration: none;
    color: var(--club-text);
    transition: all 0.3s ease;
}

.club-share-option:hover {
    background: var(--club-code-bg, #f5f5f5);
    border-color: var(--club-border, #ccc);
    box-shadow: 0 2px 8px var(--club-shadow-sm, rgba(0, 0, 0, 0.1));
}

.club-share-option i {
    font-size: 2.5rem;
    color: var(--club-text);
}

.club-share-email i {
    color: #EA4335;
}

.club-share-whatsapp i {
    color: #25D366;
}

.club-share-facebook i {
    color: #1877F2;
}

.club-share-option span {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

/* Custom Share Modal (non-Bootstrap, prevents flickering) */
.club-share-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.club-share-modal[hidden] {
    display: none;
}

.club-share-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.club-share-modal__backdrop:hover {
    opacity: 0.7;
}

.club-share-modal__dialog {
    position: relative;
    z-index: 1;
    background: var(--club-card-bg, #fff);
    border-radius: var(--tpl-radius);
    box-shadow: 0 10px 40px var(--club-shadow-lg, rgba(0, 0, 0, 0.2));
    max-width: 450px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.club-share-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--club-border);
    gap: 1rem;
}

.club-share-modal__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--club-text);
}

.club-share-modal__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    background: transparent;
    color: var(--club-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.2s ease;
}

.club-share-modal__close:hover {
    background: var(--club-hover-tint, rgba(0, 0, 0, 0.05));
}

.club-share-modal__body {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.club-share-modal__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.club-share-modal__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border: 1px solid var(--club-border);
    border-radius: var(--tpl-radius);
    text-decoration: none;
    color: var(--club-text);
    transition: all 0.2s ease;
    cursor: pointer;
}

.club-share-modal__option:hover {
    text-decoration: none;
}

.club-share-modal__option:hover {
    background: var(--club-code-bg, #f5f5f5);
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px var(--club-shadow-sm, rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

.club-share-modal__option i {
    font-size: 1.75rem;
}

.club-share-modal__option span {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.club-share-email i {
    color: #EA4335;
}

.club-share-whatsapp i {
    color: #25D366;
}

.club-share-facebook i {
    color: #1877F2;
}

body.club-share-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .club-share-modal__dialog {
        max-width: 100%;
    }

    .club-share-modal__options {
        grid-template-columns: 1fr;
    }
}

.club-card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}

.club-card__date {
    color: var(--club-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.club-card__date i {
    margin-right: 0;
}

.club-card__hits {
    color: var(--club-muted);
    flex-shrink: 0;
}

.club-card__link {
    display: inline-flex;
    align-items: center;
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

    .club-card__link:hover {
    color: var(--bs-secondary);
}

/* Sportangebot Article */
.club-sport-article {
    --sport-ink: #111827;
    --sport-muted: #4b5563;
    --sport-soft: #f4f7f2;
    --sport-line: #d8dee6;
    --sport-blue: var(--club-cta-button, var(--bs-primary, #0c5da3));
    --sport-yellow: var(--bs-secondary, #f4a300);
    --sport-green: #2f7d32;
    /* Eigenstaendiges Token fuer bewusst dunkle Baender (Anchor/Closing/Trainer-Figure/
       Tabellenkopf) - bleibt in beiden Themes dunkel, im Gegensatz zu --sport-ink,
       das als Text-"Tinte" im Dark Mode aufgehellt wird. */
    --sport-ink-band: #111827;
    color: var(--sport-ink);
}

/* Dark Mode: --sport-ink ist hier primaer Textfarbe (Fliesstext, Ueberschriften)
   und wird daher aufgehellt; --sport-ink-band bleibt fuer bewusst dunkle
   Flaechen (Tabellenkopf, Anchor-Section, Trainer-Foto-Hintergrund) unveraendert. */
:root[data-bs-theme="dark"] .club-sport-article {
    --sport-ink: #e8ecf1;
    --sport-muted: #aab2bd;
    --sport-soft: #1c2129;
    --sport-line: #2d3540;
}

/* Redaktioneller Artikeltext (TinyMCE) bringt oft eigene Inline-style="color:..."
   je Absatz mit (z.B. festes Marken-Blau) - im Dark Mode muss das trotzdem hell
   bleiben, sonst bleibt der Fliesstext auf dunklem Grund kaum lesbar. */
:root[data-bs-theme="dark"] .club-sport-article__content,
:root[data-bs-theme="dark"] .club-sport-article__content * {
    color: var(--sport-ink) !important;
}

/* Schlagwort-Buttons (Bootstrap .btn-outline-primary, z.B. Tags im Artikeltext):
   duenne Outline auf dunklem Grund wirkt verwaschen - dezent gefuellter Look
   analog zu .club-card__tag statt reinem Outline-Button. */
:root[data-bs-theme="dark"] .club-sport-article__content .btn-outline-primary {
    color: var(--bs-primary) !important;
    background: color-mix(in srgb, var(--bs-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
}

:root[data-bs-theme="dark"] .club-sport-article__content .btn-outline-primary:hover {
    color: var(--club-surface) !important;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.club-sport-article__page-heading,
.club-sport-article__header {
    margin: 0 0 2rem;
}

.club-sport-article__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: 3.25rem 0 2.25rem;
}

.club-sport-article__header h1,
.club-sport-article__page-heading h1 {
    max-width: none;
    margin: 0;
    color: var(--sport-ink);
    font-size: clamp(2.25rem, 1.65rem + 2vw, 4.25rem);
    font-weight: 850;
    line-height: 1.06;
    letter-spacing: 0;
}

.club-sport-article__eyebrow {
    margin: 0 0 0.7rem;
    color: var(--sport-blue);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-sport-article__eyebrow span {
    color: var(--sport-muted);
}

.club-sport-article__department {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--sport-line);
    border-radius: var(--tpl-radius);
    color: var(--sport-ink);
    font-weight: 750;
    white-space: nowrap;
}

.club-sport-article__department:hover,
.club-sport-article__department:focus {
    border-color: var(--sport-blue);
    color: var(--sport-blue);
    text-decoration: none;
}

.club-training-overview {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
    padding: 3.25rem 0 2.25rem;
}

.club-training-overview__intro h2 {
    max-width: 20rem;
    margin: 0 0 1rem;
    color: var(--sport-ink);
    font-size: clamp(1.65rem, 1.4rem + 0.8vw, 2.1rem);
    font-weight: 850;
    line-height: 1.16;
    letter-spacing: 0;
}

.club-training-overview__intro p:last-child {
    margin-bottom: 0;
    color: var(--sport-muted);
}

.club-training-overview__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--sport-line);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.club-training-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--sport-ink);
}

.club-training-table th,
.club-training-table td {
    padding: 1.15rem 1.35rem;
    text-align: left;
    vertical-align: middle;
}

.club-training-table thead th {
    background: var(--sport-ink-band, var(--sport-ink));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-training-table tbody td {
    border-top: 1px solid var(--sport-line, #e5e7eb);
    font-size: 1rem;
}

.club-training-table tbody td:first-child {
    color: var(--sport-blue);
    font-weight: 850;
}

.club-training-table a {
    color: var(--sport-ink);
    font-weight: 650;
}

.club-training-note {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(244, 163, 0, 0.45);
    border-radius: var(--tpl-radius);
    background: color-mix(in srgb, var(--sport-yellow) 16%, var(--club-card-bg, white));
}

.club-training-note p:last-child {
    margin-bottom: 0;
}

/* Termin-Infobox: Datum/Uhrzeit direkt unter dem Hero-Bild */
.club-event-infobox {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(13, 59, 102, 0.15);
    border-radius: var(--tpl-radius);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--club-card-bg, white));
}

.club-event-infobox__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.club-event-infobox__item i {
    font-size: 1.4rem;
    color: var(--bs-primary);
}

.club-event-infobox__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--club-muted);
}

.club-event-infobox__value {
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--sport-ink, #111827);
}

/* Termin-Fliesstext: bessere Lesbarkeit + groessere, galerieartige Bilder.
   Nutzt bewusst die volle Breite von .club-container wie Header/Infobox
   (kein eigenes max-width), sonst wirkt der Text schmaler eingerueckt als
   der Rest der Seite. Kein Full-Bleed-Breakout, da der Artikeltext aus
   losem Text + <br> statt <p>-Absaetzen besteht (Text-Nodes lassen sich
   nicht per Kind-Selektor einruecken) - stattdessen bricht nur das <img>
   gezielt auf eigene Breite aus. */
.club-event-content {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sport-ink, #111827);
}

.club-event-content img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 30rem;
    margin: 2rem auto;
    border-radius: var(--tpl-radius);
    box-shadow: 0 0.75rem 1.5rem rgba(17, 24, 39, 0.12);
}

/* Full-Bleed-Breakout nur ab Tablet – mobil bleibt der Body in Containerbreite (kein Overflow) */
@media (min-width: 768px) {
    .club-sport-article__content {
        margin-inline: calc(50% - 50vw);
    }

    .club-sport-article__content > * {
        width: min(100% - 2rem, var(--tpl-container-width));
        margin-inline: auto;
    }

    /* Fallback fuer Redaktionsinhalt ohne echte Block-Absaetze (z.B. Freitext
       nur mit <strong>/<br> statt <p> im Backend-Editor getippt): die Regel
       ".club-sport-article__content > *" oben setzt Breite/Zentrierung nur
       auf direkte BLOCK-Kind-Elemente sinnvoll um - <br> hat keine eigene Box,
       <strong> ist inline und width/margin-inline greifen dort nicht. Der
       zwischen diesen Inline-Elementen liegende rohe Text bleibt dadurch im
       (hier bewusst Full-Bleed breiten) Container und klebt am Viewport-Rand.
       :has() mit einer Liste typischer Block-Elemente aus dem WYSIWYG-Editor
       (p, div, section, ul, ol, table, figure, blockquote, h1-h6) prueft, ob
       echte strukturierte Absaetze vorhanden sind - falls nicht, wird Padding
       statt Full-Bleed verwendet. "section" ist dabei explizit gelistet, weil
       .club-related-sports (siehe com_content/article/default.php) genau
       dieses Tag nutzt und als direktes Kind weiterhin Full-Bleed bis zum
       Viewport-Rand reichen soll. */
    .club-sport-article__content:not(:has(> p, > div, > section, > ul, > ol, > table, > figure, > blockquote, > h1, > h2, > h3, > h4, > h5, > h6)) {
        padding-inline: max(1rem, calc((100vw - var(--tpl-container-width)) / 2));
    }
}

.club-sport-article__content > p:first-child {
    max-width: 52rem;
    margin-bottom: 3.5rem;
    color: var(--sport-ink);
    font-size: clamp(1.2rem, 1rem + 0.55vw, 1.55rem);
    font-weight: 520;
    line-height: 1.6;
}

.club-sport-copy,
.club-sport-section {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
}

.club-sport-copy--soft,
.club-sport-section--soft {
    width: 100% !important;
    max-width: none !important;
    padding-inline: max(1rem, calc((100vw - var(--tpl-container-width)) / 2));
    background: var(--sport-soft);
}

.club-sport-copy__inner,
.club-sport-section__inner {
    display: grid;
    grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    width: min(100%, var(--tpl-container-width));
    margin-inline: auto;
}

.club-sport-copy__marker {
    width: 3.625rem;
    height: 0.375rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--sport-yellow);
}

.club-sport-copy__label,
.club-sport-section__label {
    margin: 0 0 0.75rem;
    color: var(--sport-blue);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-sport-copy h2,
.club-sport-section h2 {
    margin: 0;
    color: var(--sport-ink);
    font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.2rem);
    font-weight: 850;
    line-height: 1.16;
    letter-spacing: 0;
}

.club-sport-copy__body,
.club-sport-section__body {
    color: var(--sport-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

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

.club-sport-copy__body > :last-child,
.club-sport-section__body > :last-child {
    margin-bottom: 0;
}

.club-sport-copy__lead {
    color: var(--sport-ink);
    font-size: clamp(1.22rem, 1.05rem + 0.6vw, 1.55rem);
    font-weight: 540;
    line-height: 1.58;
}

.club-sport-anchor {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    padding: clamp(3.5rem, 6vw, 4.5rem) max(1rem, calc((100vw - var(--tpl-container-width)) / 2));
    background: var(--sport-ink-band, var(--sport-ink));
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* Dezenter, dauerhaft wandernder Lichtschein ueber dem CTA-Band - macht die
   sonst statische dunkle Flaeche lebendiger, ohne vom Text abzulenken. */
.club-sport-anchor::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        transparent 70%
    );
    background-size: 250% 100%;
    animation: club-sport-anchor-sweep 9s linear infinite;
}

@keyframes club-sport-anchor-sweep {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-sport-anchor::before {
        animation: none;
    }
}

.club-sport-anchor__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    width: min(100%, var(--tpl-container-width));
    margin-inline: auto;
}

.club-sport-anchor h2 {
    max-width: 46rem;
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem);
    font-weight: 850;
    line-height: 1.15;
}

.club-sport-anchor p {
    max-width: 42rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
}

.club-sport-anchor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.club-sport-anchor__actions a {
    display: inline-flex;
    align-items: center;
    min-height: 2.875rem;
    padding: 0 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--tpl-radius);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.club-sport-anchor__actions a:hover,
.club-sport-anchor__actions a:focus {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.club-sport-anchor__actions a:first-child {
    border-color: var(--sport-blue);
    background: var(--sport-blue);
    color: #fff;
}

.club-sport-anchor__actions a:last-child {
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff;
}

.club-sport-anchor__actions a:first-child:hover,
.club-sport-anchor__actions a:first-child:focus {
    border-color: #fff;
    background: #fff;
    color: var(--sport-ink-band, var(--sport-ink));
}

.club-sport-anchor__actions a:last-child:hover,
.club-sport-anchor__actions a:last-child:focus {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.club-sport-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding: clamp(3.5rem, 6vw, 5rem) 0;
}

.club-sport-panel {
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--sport-line);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.club-sport-panel--soft {
    background: var(--sport-soft);
}

.club-sport-panel__label {
    margin: 0 0 0.65rem;
    color: var(--sport-green);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-sport-panel h3 {
    margin: 0 0 1.5rem;
    color: var(--sport-ink);
    font-size: clamp(1.55rem, 1.3rem + 0.8vw, 2rem);
    font-weight: 850;
    letter-spacing: 0;
}

.club-sport-panel ul,
.club-sport-panel ol {
    margin-bottom: 0;
    padding-left: 1.25rem;
    color: var(--sport-muted);
    line-height: 1.65;
}

.club-sport-panel li + li {
    margin-top: 0.85rem;
}

.club-content-figure {
    margin: 1.5rem 0 0;
}

/* Reine Bild-Panels (z.B. Sportangebote-Uebersicht): kein Karten-Rahmen/
   Hintergrund noetig, da nichts als "Textkarte" wahrgenommen werden soll,
   und begrenzte Bildhoehe statt volle Breite/beliebige Hoehe wie sonst bei
   .club-content-figure img (dort fuer Trainer-/Team-Fotos in Textkontext
   gedacht, hier stattdessen reine Bildergalerie). */
.club-sport-panel--gallery {
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}

.club-sport-panel--gallery .club-content-figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.club-sport-panel--gallery .club-content-figure img {
    height: 14rem;
    /* contain statt cover: zeigt das komplette Foto unverzerrt (kein
       Anschneiden von Koepfen o.ae.), Leerraum links/rechts wird durch den
       neutralen Hintergrund unten kaschiert. */
    object-fit: contain;
    background: var(--sport-soft);
    border-radius: var(--tpl-radius);
}

/* Galerie-Grid: eigene 3-Spalten-Variante statt der Standard-2-Spalten von
   .club-sport-panels, damit Bildergalerien wie auf der Sportangebote-
   Uebersichtsseite nicht mit einem einzelnen Bild in einer eigenen Zeile
   ausklingen. */
@media (min-width: 768px) {
    .club-sport-panels:has(.club-sport-panel--gallery) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.club-content-figure:first-child {
    margin-top: 0;
}

.club-content-figure--compact {
    width: min(100%, 22rem);
}

.club-content-figure a {
    display: block;
    overflow: hidden;
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.club-content-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.club-content-figure figcaption {
    margin-top: 0.65rem;
    color: var(--sport-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: right;
}

.club-team-media {
    padding-top: 0;
}

.club-team-media .club-content-figure img {
    max-height: 24rem;
    object-fit: contain;
    /* Bewusst konstant weiss (nicht var(--club-card-bg)): Team-/Trainerfotos sind
       oft transparente PNGs mit dunklen Konturen, die auf dunklem Grund im
       Dark Mode kaum lesbar waeren. Manuell pruefen, siehe Abschlussbericht. */
    background: #fff;
}

.club-team-media__trainer {
    max-width: 14rem;
    margin-inline: auto;
}

.club-team-media__trainer img {
    max-height: 18rem;
}

.membership-guide {
    --member-blue: #0d3b66;
    --member-slate: #475467;
    --member-green: #177245;
    --member-gold: #f4a300;
    --member-ink: #17202a;
    --member-soft: #f7f9fc;
    padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

:root[data-bs-theme="dark"] .membership-guide {
    --member-blue: #4a89c7;
    --member-slate: #8b96a6;
    --member-green: #4caf6f;
    --member-ink: #e8ecf1;
    --member-soft: #1c2129;
}

.membership-guide__intro {
    max-width: 52rem;
}

.membership-guide__eyebrow,
.membership-guide__kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.65rem;
    color: var(--member-blue);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.membership-guide__title {
    margin: 0 0 1rem;
    color: var(--member-ink);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
}

.membership-guide__lead {
    margin: 0 auto;
    max-width: 42rem;
    color: var(--club-muted);
    font-size: 1.05rem;
}

.membership-guide__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(13, 59, 102, 0.12);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
    box-shadow: 0 1.1rem 2.4rem rgba(13, 59, 102, 0.08);
}

.membership-guide__card::before {
    content: "";
    display: block;
    height: 0.45rem;
    background: var(--member-blue);
}

.membership-guide__card--featured {
    border-color: rgba(13, 59, 102, 0.22);
    box-shadow: 0 1.35rem 2.8rem rgba(13, 59, 102, 0.14);
}

.membership-guide__card-head {
    padding: 1.15rem 1.2rem 0;
}

.membership-guide__card-head--secondary {
    color: var(--member-slate);
}

.membership-guide__card-head--success {
    color: var(--member-green);
}

.membership-guide__card-head--warning {
    color: #8a5b00;
}

.membership-guide__card--adult::before {
    background: var(--member-slate);
}

.membership-guide__card--youth::before {
    background: var(--member-green);
}

.membership-guide__card--senior::before {
    background: var(--member-gold);
}

.membership-guide__card-title {
    margin: 0;
    color: inherit;
    font-size: 1.15rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.18;
}

.membership-guide__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.25rem;
}

.membership-guide__price {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: var(--tpl-radius);
    background: color-mix(in srgb, var(--member-blue) 10%, var(--club-card-bg, white));
    color: var(--member-blue);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
}

.membership-guide__card--adult .membership-guide__price {
    background: color-mix(in srgb, var(--member-slate) 10%, var(--club-card-bg, white));
    color: var(--member-slate);
}

.membership-guide__card--youth .membership-guide__price {
    background: color-mix(in srgb, var(--member-green) 10%, var(--club-card-bg, white));
    color: var(--member-green);
}

.membership-guide__card--senior .membership-guide__price {
    background: color-mix(in srgb, var(--member-gold) 18%, var(--club-card-bg, white));
    color: #7a5100;
}

.membership-guide__price span {
    color: var(--club-muted);
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.membership-guide__list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--club-muted);
    line-height: 1.6;
}

.membership-guide__list li + li {
    margin-top: 0.35rem;
}

.membership-guide__note {
    margin: auto 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(13, 59, 102, 0.12);
    color: var(--member-ink);
    font-size: 0.94rem;
}

.membership-guide__badge {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    z-index: 1;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--member-gold);
    color: #332200;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.membership-guide__info {
    margin-top: 1.5rem !important;
}

.membership-guide__panel {
    height: 100%;
    padding: clamp(1.35rem, 2.6vw, 2rem);
    border: 1px solid rgba(13, 59, 102, 0.12);
    border-radius: var(--tpl-radius);
    background: var(--member-soft);
}

.membership-guide__panel--cta {
    background: var(--member-blue);
    color: #fff;
}

.membership-guide__panel-title {
    margin: 0 0 1rem;
    color: inherit;
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
    font-weight: 850;
    letter-spacing: 0;
}

.membership-guide__panel p:last-child {
    margin-bottom: 0;
}

.membership-guide__panel--cta .membership-guide__kicker,
.membership-guide__panel--cta .membership-guide__panel-title,
.membership-guide__panel--cta p {
    color: #fff;
}

.membership-guide__panel--cta .btn {
    width: 100%;
    min-height: 48px;
    margin-top: 0.5rem;
    border-color: #fff;
    background: #fff;
    color: var(--member-blue);
    font-weight: 850;
}

.membership-guide__panel--cta .btn:hover,
.membership-guide__panel--cta .btn:focus {
    border-color: var(--member-gold);
    background: var(--member-gold);
    color: #332200;
}

.merch-guide {
    --merch-blue: #0d3b66;
    --merch-gold: #f4c400;
    --merch-ink: #17202a;
    --merch-soft: #f5f8fc;
    padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

:root[data-bs-theme="dark"] .merch-guide {
    --merch-blue: #4a89c7;
    --merch-ink: #e8ecf1;
    --merch-soft: #1c2129;
}

.merch-guide__intro {
    max-width: 52rem;
}

.merch-guide__eyebrow,
.merch-guide__kicker {
    display: inline-flex;
    margin-bottom: 0.65rem;
    color: var(--merch-blue);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.merch-guide__title {
    margin: 0 0 1rem;
    color: var(--merch-ink);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
}

.merch-guide__lead {
    margin: 0 auto;
    max-width: 42rem;
    color: var(--club-muted);
    font-size: 1.05rem;
}

.merch-guide__panel {
    padding: clamp(1.35rem, 2.6vw, 2rem);
    border: 1px solid rgba(13, 59, 102, 0.12);
    border-radius: var(--tpl-radius);
    background: var(--merch-soft);
}

.merch-guide__panel--accent {
    background: var(--merch-blue);
    color: #fff;
}

.merch-guide__panel--accent .merch-guide__kicker,
.merch-guide__panel--accent .merch-guide__panel-title,
.merch-guide__panel--accent a {
    color: #fff;
}

.merch-guide__panel--accent a {
    text-decoration-color: var(--merch-gold);
}

.merch-guide__panel--print {
    border-left: 0.45rem solid var(--merch-gold);
}

.merch-guide__panel-title,
.merch-guide__section-title {
    margin: 0 0 1rem;
    color: var(--merch-ink);
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
    font-weight: 850;
    letter-spacing: 0;
}

.merch-guide__panel--accent .merch-guide__panel-title {
    color: #fff;
}

.merch-guide__section-head {
    margin-bottom: 1.25rem;
}

.merch-guide__feature {
    height: 100%;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(13, 59, 102, 0.12);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.merch-guide__feature a,
.merch-guide__media,
.merch-guide__media a {
    display: block;
}

.merch-guide__feature img {
    display: block;
    width: 100%;
    height: 17rem;
    object-fit: contain;
}

.merch-guide__card {
    overflow: hidden;
    border: 1px solid rgba(13, 59, 102, 0.14);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
    box-shadow: 0 0.85rem 1.8rem rgba(13, 59, 102, 0.08);
}

.merch-guide__media {
    min-height: 15rem;
    padding: 0.85rem;
    /* Bewusst konstant weiss: Produktfotos (T-Shirts etc.) sind oft transparente
       PNGs mit hellem/weissem Motiv-Rand - auf dunklem Grund im Dark Mode ggf.
       schlecht lesbar. Manuell pruefen, siehe Abschlussbericht. */
    background: #fff;
}

.merch-guide__media img {
    display: block;
    width: 100%;
    height: 14rem;
    object-fit: contain;
}

.merch-guide__media--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.merch-guide__media--pair img {
    height: 14rem;
}

.merch-guide__card-body {
    padding: 1.15rem 1.2rem 1.25rem;
    background: var(--merch-blue);
    color: #fff;
}

.merch-guide__card-body h4 {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: 0;
}

.merch-guide__card-body p {
    margin: 0;
    color: #fff;
    line-height: 1.55;
}

.club-category-archive {
    --archive-blue: #0d3b66;
    --archive-ink: #17202a;
    --archive-soft: #f5f8fc;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4rem, 7vw, 6rem);
}

:root[data-bs-theme="dark"] .club-category-archive {
    --archive-blue: #4a89c7;
    --archive-ink: #e8ecf1;
    --archive-soft: #1c2129;
}

.club-category-archive__head {
    max-width: 56rem;
    margin: 0 auto clamp(2rem, 4vw, 3.25rem);
    text-align: center;
}

.club-category-archive__eyebrow {
    margin: 0 0 0.65rem;
    color: var(--archive-blue);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-category-archive__title {
    margin: 0;
    color: var(--archive-ink);
    font-size: clamp(2rem, 1.65rem + 1.4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
}

.club-category-archive__description {
    margin: 1rem auto 0;
    color: var(--club-muted);
    font-size: 1.05rem;
}

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

.club-category-archive__image {
    display: block;
    width: min(100%, 42rem);
    max-height: 20rem;
    margin: 1.25rem auto 0;
    border-radius: var(--tpl-radius);
    object-fit: cover;
}

.club-category-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
}

.club-category-archive__section + .club-category-archive__section {
    margin-top: 2.5rem;
}

.club-category-archive__section-title {
    margin: 0 0 1.25rem;
    color: var(--archive-ink);
    font-size: 1.35rem;
    font-weight: 800;
}

.club-category-archive__section--expired {
    opacity: 0.75;
}

.club-category-archive__section--expired .club-category-archive__section-title {
    color: var(--club-muted);
}

.club-category-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(13, 59, 102, 0.13);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
    box-shadow: 0 1rem 2rem rgba(13, 59, 102, 0.08);
}

.club-category-card__media {
    display: block;
    height: 13rem;
    background: var(--archive-soft);
}

.club-category-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.club-category-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.35rem 1.35rem 1rem;
}

.club-category-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin: 0 0 0.75rem;
    color: var(--club-muted);
    font-size: 0.84rem;
    font-weight: 750;
}

.club-category-card__meta span {
    color: var(--archive-blue);
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.club-category-card--event .club-category-card__meta span {
    color: #9a6400;
}

.club-category-card__title {
    margin: 0 0 0.75rem;
    color: var(--archive-ink);
    font-size: 1.3rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.2;
}

.club-category-card__title a {
    color: inherit;
    text-decoration: none;
}

.club-category-card__title a:hover,
.club-category-card__title a:focus {
    color: var(--archive-blue);
    text-decoration: underline;
}

.club-category-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--club-muted);
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.club-category-card__footer {
    padding: 0 1.35rem 1.3rem;
}

.club-category-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--archive-blue);
    font-weight: 850;
    text-decoration: none;
}

.club-category-card__link:hover,
.club-category-card__link:focus {
    color: #0a7bbd;
    text-decoration: underline;
}

.club-category-archive__empty {
    padding: 1.25rem 1.5rem;
    border-left: 0.35rem solid var(--archive-blue);
    background: var(--archive-soft);
    color: var(--archive-ink);
}

.club-category-archive__children {
    margin-top: 3rem;
}

.club-category-archive__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
}

.club-category-archive__counter {
    margin: 0;
    color: var(--club-muted);
}

@media (max-width: 575.98px) {
    .club-category-archive__pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

.impressum-guide {
    --impressum-blue: #0d3b66;
    --impressum-ink: #17202a;
    --impressum-soft: #f5f8fc;
    padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

:root[data-bs-theme="dark"] .impressum-guide {
    --impressum-blue: #4a89c7;
    --impressum-ink: #e8ecf1;
    --impressum-soft: #1c2129;
}

.impressum-guide__intro {
    max-width: 52rem;
}

.impressum-guide__eyebrow,
.impressum-guide__kicker {
    display: inline-flex;
    margin-bottom: 0.65rem;
    color: var(--impressum-blue);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.impressum-guide__title {
    margin: 0 0 1rem;
    color: var(--impressum-ink);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
}

.impressum-guide__lead {
    margin: 0 auto;
    max-width: 42rem;
    color: var(--club-muted);
    font-size: 1.05rem;
}

.impressum-guide__identity,
.impressum-guide__panel {
    padding: clamp(1.35rem, 2.6vw, 2rem);
    border: 1px solid rgba(13, 59, 102, 0.12);
    border-radius: var(--tpl-radius);
    background: var(--impressum-soft);
}

.impressum-guide__identity {
    border-left: 0.45rem solid var(--impressum-blue);
}

.impressum-guide__identity h3,
.impressum-guide__panel h3 {
    margin: 0 0 1rem;
    color: var(--impressum-ink);
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
    font-weight: 850;
    letter-spacing: 0;
}

.impressum-guide__panel h4 {
    margin: 1.25rem 0 0.6rem;
    color: var(--impressum-ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
}

.impressum-guide__identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin-bottom: 1.25rem;
}

.impressum-guide address {
    margin: 0;
    color: var(--impressum-ink);
    font-style: normal;
    line-height: 1.6;
}

.impressum-guide__list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--club-muted);
    line-height: 1.65;
}

.impressum-guide__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.impressum-guide__source {
    margin: 1.25rem 0 0;
    color: var(--club-muted);
    font-size: 0.9rem;
}

.privacy-guide__panel--wide {
    max-width: 70rem;
    margin-inline: auto;
}

.privacy-guide__notice {
    padding: 1rem 1.15rem;
    border-left: 0.3rem solid var(--impressum-blue);
    background: var(--club-card-bg, #fff);
    color: var(--impressum-ink);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .impressum-guide__identity-grid,
    .impressum-guide__grid {
        grid-template-columns: 1fr;
    }
}

.club-board-section {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
}

.club-board-section__head {
    max-width: 56rem;
    margin-bottom: 2rem;
}

.club-board-section__head h2 {
    margin: 0;
    color: var(--sport-ink);
    font-size: clamp(2rem, 1.55rem + 1.5vw, 3rem);
    font-weight: 850;
    line-height: 1.12;
}

.club-board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.club-board-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sport-line);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.club-board-card__figure {
    width: min(100% - 2.5rem, 13rem);
    margin: 1.25rem auto 0;
    aspect-ratio: 1;
    background: var(--sport-soft);
    border-radius: 50%;
    overflow: hidden;
}

.club-board-card__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-board-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.15rem 1.35rem 1.35rem;
    text-align: center;
}

.club-board-card__role {
    margin: 0 0 0.55rem;
    color: var(--sport-green);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-board-card h3 {
    margin: 0 0 1.25rem;
    color: var(--sport-ink);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.18;
}

.club-board-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: auto;
}

.club-board-card__actions a {
    display: inline-flex;
    align-items: center;
    min-height: 2.65rem;
    padding: 0 1rem;
    border: 1px solid var(--sport-blue);
    border-radius: var(--tpl-radius);
    color: var(--sport-blue);
    font-weight: 800;
    text-decoration: none;
}

.club-board-card__actions a:last-child {
    background: var(--sport-blue);
    color: #fff;
}

.club-contact-group {
    margin-top: 2rem;
}

.club-contact-list article {
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--sport-line);
}

.club-contact-list article + article {
    padding-top: 1rem;
}

.club-contact-list article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.club-contact-list p {
    margin: 0 0 0.35rem;
    color: var(--sport-green);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.club-contact-list h4 {
    margin: 0 0 0.35rem;
    color: var(--sport-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.club-contact-list a {
    color: var(--sport-blue);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.club-contact-list--compact article + article {
    padding-top: 0.85rem;
}

.team-directory {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
}

.team-directory__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.team-directory__department {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--sport-line);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.team-directory__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sport-line);
}

.team-directory__name {
    margin: 0;
    color: var(--sport-ink);
    font-size: clamp(1.45rem, 1.2rem + 0.75vw, 1.9rem);
    font-weight: 850;
}

.team-directory__link,
.team-directory__course,
.team-directory__mail {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0 0.85rem;
    border-radius: var(--tpl-radius);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.team-directory__link,
.team-directory__course {
    background: var(--sport-soft);
    color: var(--sport-blue);
}

.team-directory__mail {
    border: 1px solid var(--sport-line);
    color: var(--sport-ink);
}

.team-directory__leader {
    padding: 1rem;
    border-radius: var(--tpl-radius);
    background: var(--sport-soft);
}

.team-directory__leader-label,
.team-directory__leader-role,
.team-directory__entry-role {
    margin: 0;
    color: var(--sport-green);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.team-directory__leader-label {
    margin-bottom: 0.65rem;
}

.team-directory__leader-main,
.team-directory__entry {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.team-directory__leader-name,
.team-directory__entry-name {
    margin: 0 0 0.35rem;
    color: var(--sport-ink);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}

.team-directory__leader-name a,
.team-directory__entry-name a {
    color: inherit;
    text-decoration: none;
}

.team-directory__photo-icon {
    color: var(--sport-blue);
    font-size: 0.85em;
}

.team-directory__list {
    display: grid;
    gap: 0.85rem;
}

.team-directory__entry {
    padding: 0 0 0.85rem;
    border-bottom: 1px solid var(--sport-line);
}

.team-directory__entry:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.team-directory__courses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.club-trainer-section {
    margin-inline: calc((100vw - min(100% - 2rem, var(--tpl-container-width))) / -2);
    padding: clamp(3.5rem, 6vw, 5rem) max(1rem, calc((100vw - var(--tpl-container-width)) / 2));
    background: var(--sport-soft);
}

/* Verlinkung zu verwandten Sportangeboten derselben Abteilung (interne
   Verlinkung fuer SEO + Nutzerfuehrung), siehe com_content/article/default.php.
   Ausserhalb von .club-sport-article__content (PHP-generierter Fall bei den
   Sportangebote-Einzelartikeln) braucht es den eigenen Full-Bleed-Trick, um
   bis zum Viewport-Rand zu reichen - innerhalb von .club-sport-article__content
   (z.B. manuell in den Artikeltext der Uebersichtsseite eingefuegt) hat das
   Elternelement bereits selbst einen Full-Bleed-Trick samt automatischer
   Rezentrierung seiner Kinder (siehe media (min-width:768px) Regel weiter
   oben); ein zweiter Full-Bleed-Versuch wuerde sich damit ueberlagern und die
   Sektion einseitig verschieben statt zu zentrieren. */
.club-related-sports {
    margin-inline: calc((100vw - min(100% - 2rem, var(--tpl-container-width))) / -2);
    padding: clamp(2.5rem, 4vw, 3.5rem) max(1rem, calc((100vw - var(--tpl-container-width)) / 2));
}

/* .club-sport-article__content > * (siehe @media min-width:768px weiter oben)
   setzt hier bereits width: min(100% - 2rem, var(--tpl-container-width)) und
   margin-inline: auto - .club-related-sports braucht in diesem Kontext also
   nur noch sein eigenes margin-inline/width zurueckzunehmen (die aus der
   generischen .club-related-sports-Regel oben kaemen), damit es die vom
   Elternteil bereits korrekt berechnete Breite/Zentrierung nicht ueberschreibt. */
.club-sport-article__content .club-related-sports {
    margin-inline: revert;
    width: revert;
    padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.club-related-sports__list {
    width: min(100%, var(--tpl-container-width));
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Im Artikeltext-Kontext ist .club-related-sports selbst schon exakt
   var(--tpl-container-width) breit (siehe oben) - die Liste braucht dort
   keine eigene Breitenbegrenzung mehr. */
.club-sport-article__content .club-related-sports__list {
    width: 100%;
    margin-inline: 0;
}

.club-related-sports__item {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--sport-ink, #111827);
    border-radius: 999px;
    color: var(--sport-ink, #111827);
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.club-related-sports__item:hover,
.club-related-sports__item:focus-visible {
    background: var(--sport-ink, #111827);
    color: #fff;
}

.club-trainer-section__head,
.club-trainer-list {
    width: min(100%, var(--tpl-container-width));
    margin-inline: auto;
}

.club-trainer-section__head {
    margin-bottom: 1.5rem;
}

.club-trainer-section__head h2 {
    margin: 0;
    color: var(--sport-ink);
    font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.2rem);
    font-weight: 850;
}

.club-trainer-list {
    display: grid;
    gap: 1.5rem;
}

.club-trainer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22.5rem);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: stretch;
}

.club-trainer-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid var(--sport-line);
    border-radius: var(--tpl-radius);
    background: var(--club-card-bg, #fff);
}

.club-trainer-card__body h3 {
    margin: 0 0 1rem;
    color: var(--sport-ink);
    font-size: clamp(1.85rem, 1.45rem + 1.05vw, 2.35rem);
    font-weight: 850;
    letter-spacing: 0;
}

.club-trainer-card__body p {
    max-width: 44rem;
    color: var(--sport-muted);
    font-size: 1.05rem;
}

.club-trainer-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.club-trainer-card__actions a,
.club-trainer-card__actions span {
    display: inline-flex;
    align-items: center;
    min-height: 2.875rem;
    padding: 0 1rem;
    border-radius: var(--tpl-radius);
    font-weight: 800;
}

.club-trainer-card__mail {
    background: var(--sport-blue);
    color: #fff;
}

.club-trainer-card__mail:hover,
.club-trainer-card__mail:focus {
    color: #fff;
    text-decoration: none;
}

.club-trainer-card__actions span {
    border: 1px solid var(--sport-line);
    background: var(--club-card-bg, #fff);
    color: var(--sport-ink);
}

.club-trainer-card__qualifications {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sport-line);
}

.club-trainer-card__qualifications h4 {
    margin: 0 0 0.75rem;
    color: var(--sport-ink);
    font-size: 1rem;
    font-weight: 850;
}

.club-trainer-card__qualifications ul {
    margin: 0;
    padding-left: 1.2rem;
}

.club-trainer-card__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: 2rem;
    border-radius: var(--tpl-radius);
    background: var(--sport-ink-band, var(--sport-ink));
}

.club-trainer-card__figure img {
    width: auto;
    height: min(26rem, 58vw);
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--tpl-radius);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.24);
}

.club-trainer-card__figure figcaption {
    color: rgba(255, 255, 255, 0.84);
    font-weight: 750;
    text-align: center;
}

.club-trainer-section__empty {
    width: min(100%, var(--tpl-container-width));
    margin-inline: auto;
}

.fasching-orgchart-wrapper {
    --org-primary: var(--sport-ink-band, var(--sport-ink));
    --org-primary-soft: rgba(11, 31, 58, 0.12);
    --org-line: rgba(11, 31, 58, 0.28);
    --org-text: var(--sport-ink-band, var(--sport-ink));
    --org-surface: #ffffff;
    --org-shadow: 0 12px 28px rgba(11, 31, 58, 0.15);
    padding: 0 0 clamp(3rem, 5vw, 4.5rem);
}

/* Dark Mode: das Organigramm bleibt ein bewusst eigenstaendiges, helles
   Widget (Sprechblasen auf Weiss) fuer maximale Lesbarkeit der Hierarchie -
   nur die Flaeche darum (Card/Hintergrund) wird dunkler abgesetzt. */
:root[data-bs-theme="dark"] .fasching-orgchart {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-color: rgba(255, 255, 255, 0.12);
}

.fasching-orgchart {
    width: min(100%, var(--tpl-container-width));
    margin-inline: auto;
    padding: 0.75rem;
    border: 1px solid rgba(11, 31, 58, 0.09);
    border-radius: var(--tpl-radius);
    background: linear-gradient(180deg, rgba(11, 31, 58, 0.05), rgba(11, 31, 58, 0.01));
}

.fasching-orgchart__toolbar {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-bottom: 1.8rem;
}

.fasching-orgchart__btn {
    border: 1px solid rgba(11, 31, 58, 0.2);
    background: var(--org-surface);
    color: var(--org-primary);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 750;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.fasching-orgchart__btn:hover,
.fasching-orgchart__btn:focus {
    background: rgba(11, 31, 58, 0.08);
    box-shadow: 0 4px 14px rgba(11, 31, 58, 0.16);
    transform: translateY(-1px);
}

.fasching-orgchart__root {
    display: grid;
    gap: 1.1rem;
    justify-items: center;
    margin-top: 0.4rem;
}

.fasching-orgchart__children {
    width: 100%;
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: start;
}

.fasching-orgchart__branch {
    position: relative;
    padding-top: 0.85rem;
    border-top: 2px dashed var(--org-line);
}

.fasching-orgchart__branch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    width: 2px;
    height: 0.85rem;
    transform: translateX(-50%);
    background: var(--org-line);
}

.fasching-orgchart__node-wrap {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.fasching-orgchart__bubble {
    min-height: 56px;
    width: min(100%, 290px);
    border: 1px solid rgba(11, 31, 58, 0.16);
    background: var(--org-surface);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(11, 31, 58, 0.1);
    color: var(--org-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 1rem;
    font-weight: 750;
    line-height: 1.2;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    cursor: default;
}

.fasching-orgchart__bubble:hover {
    transform: translateY(-2px);
    box-shadow: var(--org-shadow);
    background: #f7faff;
}

.fasching-orgchart__bubble--main {
    min-height: 62px;
    width: min(100%, 360px);
    background: var(--org-primary);
    color: #ffffff;
    border-color: var(--org-primary);
    box-shadow: 0 14px 28px rgba(11, 31, 58, 0.22);
}

.fasching-orgchart__bubble--main:hover {
    background: var(--org-primary);
    color: #ffffff;
}

.fasching-orgchart__bubble--toggle {
    cursor: pointer;
    padding-right: 2.2rem;
    position: relative;
}

.fasching-orgchart__bubble--toggle::after {
    content: "-";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--org-primary-soft);
    color: var(--org-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1;
}

.fasching-orgchart__bubble--main.fasching-orgchart__bubble--toggle::after {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.fasching-orgchart__bubble--toggle[aria-expanded="false"]::after {
    content: "+";
}

.fasching-orgchart__subtree {
    width: 100%;
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.28s ease, transform 0.28s ease;
    max-height: 1800px;
    opacity: 1;
    transform: translateY(0);
}

.fasching-orgchart__subtree.is-collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.fasching-orgchart__node {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.fasching-orgchart__node.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.club-sport-closing {
    display: grid;
    grid-template-columns: minmax(15rem, 27rem) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 0 0 clamp(3.5rem, 6vw, 5rem);
}

.club-sport-closing__suitability,
.club-sport-closing__statement {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--tpl-radius);
}

.club-sport-closing__suitability {
    background: var(--sport-ink-band, var(--sport-ink));
    color: #fff;
}

.club-sport-closing__statement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--sport-yellow);
    color: var(--sport-ink-band, var(--sport-ink));
}

.club-sport-closing__suitability h3,
.club-sport-closing__statement h3 {
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem);
    font-weight: 850;
    line-height: 1.25;
    color: inherit;
}

.club-sport-closing__statement h3 {
    font-size: clamp(1.8rem, 1.45rem + 1.15vw, 2.5rem);
    line-height: 1.1;
}

.club-sport-closing p {
    margin: 1rem 0 0;
}

@media (min-width: 992px) {
    .fasching-orgchart {
        padding: 1.2rem;
    }

    .fasching-orgchart__children {
        max-width: 980px;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(320px, 420px));
        justify-content: center;
        gap: 2.2rem;
    }
}

@media (max-width: 991.98px) {
    .club-sport-article__header,
    .club-sport-anchor__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .club-training-overview,
    .club-sport-copy__inner,
    .club-sport-section__inner,
    .club-trainer-card,
    .club-sport-closing {
        grid-template-columns: 1fr;
    }

    .club-sport-panels {
        grid-template-columns: 1fr;
    }

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

    .team-directory__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .club-training-table {
        min-width: 42rem;
    }

    .club-trainer-card__body,
    .club-trainer-card__figure {
        padding: 1.35rem;
    }

    .club-board-grid {
        grid-template-columns: 1fr;
    }

    .fasching-orgchart {
        padding: 0.7rem;
    }

    .fasching-orgchart__toolbar {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .fasching-orgchart__btn {
        flex: 1 1 46%;
        min-height: 42px;
    }

    .fasching-orgchart__bubble {
        width: 100%;
        border-radius: var(--tpl-radius);
        font-size: 0.95rem;
    }

    .fasching-orgchart__bubble--main {
        border-radius: var(--tpl-radius);
    }

    .fasching-orgchart__branch {
        border-top-style: solid;
    }

    .team-directory__header,
    .team-directory__leader-main,
    .team-directory__entry {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-directory__courses {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .club-card__image-wrapper {
        height: 200px;
    }


    .club-month-calendar__grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }

    .club-month-calendar__day {
        min-height: 80px;
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .club-month-calendar__date {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .club-month-calendar__events {
        gap: 0.15rem;
        font-size: 0.7rem;
    }

    .club-month-calendar__weekdays {
        gap: 0.25rem;
    }

    .club-month-calendar__weekday {
        font-size: 0.7rem;
    }
}

/* ============================================================
   Dark Mode: Kontrast-Nachschaerfung fuer duennwandige,
   primaerfarbige rgba(13, 59, 102, x)-Rahmen/Schatten (Card-,
   Panel- und Tag-Border-Akzente in club-card__tag, club-event-infobox,
   membership-guide__card, merch-guide__panel/card, club-category-card,
   impressum-guide__identity/panel u.a.). Auf dunklem Kartenhintergrund
   verschwindet ein dunkles 8-15%-Navy-Rgba fast vollstaendig, daher hier
   pauschal auf einen helleren, besser sichtbaren Ton angehoben.
   ============================================================ */
:root[data-bs-theme="dark"] .club-card__tag,
:root[data-bs-theme="dark"] .club-event-infobox,
:root[data-bs-theme="dark"] .membership-guide__card,
:root[data-bs-theme="dark"] .membership-guide__card--featured,
:root[data-bs-theme="dark"] .membership-guide__note,
:root[data-bs-theme="dark"] .membership-guide__panel,
:root[data-bs-theme="dark"] .merch-guide__panel,
:root[data-bs-theme="dark"] .merch-guide__feature,
:root[data-bs-theme="dark"] .merch-guide__card,
:root[data-bs-theme="dark"] .club-category-card,
:root[data-bs-theme="dark"] .impressum-guide__identity,
:root[data-bs-theme="dark"] .impressum-guide__panel {
    border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent);
}

:root[data-bs-theme="dark"] .club-card__tag:hover {
    background: color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

/* ==========================================================================
   mod_newsletter Override: das Modul bringt eigenes CSS mit hartcodiertem
   altem Vereinsblau (#003398) und vielen !important-Regeln mit, das nicht
   zum aktuellen Template-Design passt. Statt das (auch anderswo genutzte)
   Modul-CSS zu aendern, wird hier gezielt mit hoeherer Spezifitaet + eigenen
   !important-Regeln ueberschrieben, damit Modal/Formular/Buttons die
   Template-Variablen (inkl. Dark Mode) uebernehmen.
   ========================================================================== */
html body .mod-newsletter .modal-content {
    background: var(--club-card-bg, var(--club-surface)) !important;
    color: var(--club-text) !important;
    border-radius: calc(var(--tpl-radius) * 3);
    border: 0;
    box-shadow: 0 1.5rem 3rem var(--club-shadow-lg, rgba(17, 24, 39, 0.18));
    padding: 0.5rem !important;
}

html body .mod-newsletter .modal-header {
    border-bottom: 0;
    padding-top: 1.5rem;
}

html body .mod-newsletter .modal-body {
    padding: 0.5rem 1.5rem 1.5rem;
}

/* Icon-Badge: farbiger Kreis statt freistehendem Icon */
html body .mod-newsletter .mod-newsletter__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
}

html body .mod-newsletter .mod-newsletter__icon-badge i {
    color: var(--bs-primary) !important;
    font-size: 1.75rem;
}

html body .mod-newsletter form,
html body .mod-newsletter #newsletterSignUpModalLabel,
html body .mod-newsletter #newsletterUnsignModalLabel {
    color: var(--club-text) !important;
}

html body .mod-newsletter .modal-title {
    font-size: 1.4rem !important;
    font-weight: 700;
}

html body .mod-newsletter .modal-body p {
    color: var(--club-muted);
    font-size: 0.95rem;
}

/* Checkbox modernisieren: abgerundet, Akzentfarbe beim Ankreuzen */
html body .mod-newsletter input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border-radius: 0.3rem;
    border: 1px solid var(--club-border);
    accent-color: var(--bs-primary);
    cursor: pointer;
}

/* Schliessen-Button dezenter: reiner Text-Link statt gleichwertiger Button */
html body .mod-newsletter .btn-default {
    background-color: transparent !important;
    color: var(--club-muted) !important;
    border: 0 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

html body .mod-newsletter .btn-default:hover {
    color: var(--club-text) !important;
}

html body .mod-newsletter .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    border-radius: var(--tpl-radius);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-weight: 650;
}

html body .mod-newsletter #unsign-form a,
html body .mod-newsletter #signup-form a {
    color: var(--club-link, var(--bs-primary)) !important;
}

html body .mod-newsletter .input-group-text {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

html body .mod-newsletter .form-control,
html body .mod-newsletter .form-select {
    background-color: var(--club-input-bg, var(--club-surface)) !important;
    color: var(--club-text) !important;
    border: 1px solid var(--club-input-border, var(--club-border)) !important;
    font-size: 1rem !important;
    border-radius: var(--tpl-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body .mod-newsletter .form-control:hover,
html body .mod-newsletter .form-select:hover {
    border-color: var(--bs-primary) !important;
}

html body .mod-newsletter .form-control:focus,
html body .mod-newsletter .form-select:focus {
    background-color: var(--club-input-bg, var(--club-surface)) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent) !important;
    outline: none !important;
}

html body .mod-newsletter .form-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230d3b66' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592c.86 0 1.319 1.013.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}

html body .mod-newsletter .form-select option:hover,
html body .mod-newsletter .form-select option:checked {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

:root[data-bs-theme="dark"] html body .mod-newsletter .modal-header i {
    color: var(--bs-primary) !important;
}

:root[data-bs-theme="dark"] html body .mod-newsletter .form-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e8ecf1' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592c.86 0 1.319 1.013.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}

:root[data-bs-theme="dark"] .club-card__tag {
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
}

/* ==========================================================================
   com_users/login Override: Anmelde-/Abmeldeformular im Karten-Look,
   konsistent mit den anderen Karten/Modals des Templates.
   ========================================================================== */
.club-login {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
}

.club-login__card {
    width: 100%;
    max-width: 28rem;
    padding: 2rem;
    background: var(--club-card-bg, #fff);
    border-radius: calc(var(--tpl-radius) * 2);
    box-shadow: 0 1rem 2.5rem var(--club-shadow-lg, rgba(17, 24, 39, 0.12));
}

.club-login__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.club-login__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
}

.club-login__icon-badge i {
    color: var(--bs-primary);
    font-size: 1.5rem;
}

.club-login__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--club-text);
}

.club-login__description {
    margin-bottom: 1.5rem;
    color: var(--club-muted);
    font-size: 0.95rem;
    text-align: center;
}

.club-login__image {
    max-width: 100%;
    border-radius: var(--tpl-radius);
    margin-top: 0.75rem;
}

.club-login__form .form-group,
.club-login__fields .form-group,
.club-login__fields .control-group {
    margin-bottom: 1rem;
}

.club-login__form label,
.club-login__fields label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--club-text);
}

.club-login__form .form-control,
.club-login__fields .form-control {
    background-color: var(--club-input-bg, var(--club-surface));
    color: var(--club-text);
    border: 1px solid var(--club-input-border, var(--club-border));
    border-radius: var(--tpl-radius);
}

.club-login__form .form-control:focus,
.club-login__fields .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

.club-login__remember {
    margin: 0.5rem 0 1.25rem;
}

.club-login__submit {
    margin-bottom: 0.75rem;
}

.club-login__submit .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    border-radius: var(--tpl-radius);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-weight: 650;
}

.club-login__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--club-border);
    text-align: center;
}

.club-login__option-link {
    color: var(--club-link, var(--bs-primary));
    font-size: 0.9rem;
    text-decoration: none;
}

.club-login__option-link:hover {
    text-decoration: underline;
}

/* Startseite: kompakte Nutzenargumentation direkt nach dem Hero. */
.club-why {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.75rem);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 16%, var(--club-border));
    border-top: 4px solid var(--bs-secondary);
    border-radius: calc(var(--tpl-radius) * 1.5);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--bs-secondary) 14%, transparent) 0, transparent 34%),
        linear-gradient(135deg, var(--club-card-bg, #fff) 0%, color-mix(in srgb, var(--bs-primary) 5%, var(--club-card-bg, #fff)) 100%);
    box-shadow: 0 1.25rem 3rem var(--club-shadow-sm, rgba(0, 0, 0, 0.08));
}

.club-why::after {
    position: absolute;
    top: -4.5rem;
    right: -4.5rem;
    width: 11rem;
    height: 11rem;
    border: 1.75rem solid color-mix(in srgb, var(--bs-secondary) 12%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.club-why__intro,
.club-why__benefits {
    position: relative;
    z-index: 1;
}

.club-why__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--bs-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.club-why h2 {
    max-width: 12ch;
    margin: 0 0 1.25rem;
    color: var(--club-text);
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 850;
    line-height: 1.02;
}

.club-why__lead {
    margin: 0 0 1rem;
    color: var(--club-text);
    font-size: clamp(1.05rem, 1vw + 0.8rem, 1.25rem);
    font-weight: 600;
    line-height: 1.55;
}

.club-why__text {
    margin: 0;
    color: var(--club-muted);
    line-height: 1.7;
}

.club-why__actions {
    display: flex;
    align-items: center;
    gap: 1rem 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.club-why__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.25rem;
    border-radius: var(--tpl-radius);
    font-weight: 700;
}

.club-why__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--club-link, var(--bs-primary));
    font-weight: 750;
    text-decoration: none;
}

.club-why__link .fa {
    transition: transform 0.2s ease;
}

.club-why__link:hover,
.club-why__link:focus-visible {
    color: var(--club-link-hover);
    text-decoration: underline;
}

.club-why__link:hover .fa,
.club-why__link:focus-visible .fa {
    transform: translateX(0.2rem);
}

.club-why__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.club-why__benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 14%, var(--club-border));
    border-radius: var(--tpl-radius);
    background: color-mix(in srgb, var(--club-card-bg, #fff) 92%, transparent);
    box-shadow: 0 0.35rem 1rem transparent;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.club-why__benefit:hover {
    transform: translateY(-0.2rem);
    border-color: color-mix(in srgb, var(--bs-secondary) 65%, var(--club-border));
    box-shadow: 0 0.65rem 1.4rem var(--club-shadow-sm, rgba(0, 0, 0, 0.08));
}

.club-why__icon {
    display: grid;
    flex: 0 0 2.7rem;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-secondary) 18%, var(--club-card-bg, #fff));
    color: var(--bs-primary);
    font-size: 1.05rem;
}

.club-why__benefit h3 {
    margin: 0 0 0.4rem;
    color: var(--club-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.club-why__benefit p {
    margin: 0;
    color: var(--club-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .club-why {
        grid-template-columns: 1fr;
    }

    .club-why h2 {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .club-why {
        padding: 1.5rem;
    }

    .club-why__benefits {
        grid-template-columns: 1fr;
    }

    .club-why__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .club-why__actions .btn,
    .club-why__link {
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-why__benefit,
    .club-why__link .fa {
        transition: none;
    }

    .club-why__benefit:hover,
    .club-why__link:hover .fa,
    .club-why__link:focus-visible .fa {
        transform: none;
    }
}