/* ───────────────────────────────────────────────────────────────
   1. FONTS & ICONS
─────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Font Awesome 7 Free Regular';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-regular-400.woff2');
}

@font-face {
    font-family: 'Font Awesome 7 Free Solid';
    font-style: normal;
    font-weight: 900;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-solid-900.woff2');
}

.font-awesome-regular {
    --rz-icon-font-family: 'Font Awesome 7 Free Regular';
}

.font-awesome-solid {
    --rz-icon-font-family: 'Font Awesome 7 Free Solid';
}
/* montserrat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/montserrat/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/montserrat/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/montserrat/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('/fonts/montserrat/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/lato/lato-v25-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-300italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    src: url('/fonts/lato/lato-v25-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/lato/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/lato/lato-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/lato/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/lato/lato-v25-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ── Material Symbols Outlined (Icons) ────────────────────────
   Download: https://github.com/google/material-design-icons
   Pfad: variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2
   → umbenennen in MaterialSymbolsOutlined.woff2
─────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('/fonts/material-symbols/MaterialSymbolsOutlined.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: block;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}
/* ───────────────────────────────────────────────────────────────
   2. DESIGN-TOKENS
─────────────────────────────────────────────────────────────── */
:root {
    --aegir-primary: #0378a6;
    --aegir-primary-dark: #025f84;
    --aegir-primary-deeper: #023859;
    --aegir-secondary: #3ba5fc;
    --aegir-accent: #2cc8c8;
    --aegir-success: #5dbf74;
    --aegir-warning: #fac152;
    --aegir-danger: #d64d42;
    --aegir-base: #d9e1ea;
    --aegir-white: #ffffff;
    --aegir-text: #1c3545;
    --aegir-text-muted: #4e6e80;
    --navbar-height: 64px;
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --placeholder-color: #6c757d;
}
/* ───────────────────────────────────────────────────────────────
   3. BASIS
─────────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--aegir-base);
    color: var(--aegir-text);
}

input::placeholder,
textarea::placeholder {
    color: var(--aegir-text);
    opacity: 0.5;
}
/* ───────────────────────────────────────────────────────────────
   4. STICKY-FOOTER-LAYOUT
─────────────────────────────────────────────────────────────── */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    flex: 1 0 auto;
    padding-top: var(--navbar-height);
}

/* ───────────────────────────────────────────────────────────────
   5. NAVBAR
─────────────────────────────────────────────────────────────── */
.club-navbar {
    height: var(--navbar-height);
    background-color: var(--aegir-primary) !important;
    border-bottom: 3px solid var(--aegir-accent);
    box-shadow: 0 2px 16px rgba(2,56,89,.30);
    z-index: 1000;
    transition: background var(--transition), box-shadow var(--transition);
}

    .club-navbar.scrolled {
        background-color: var(--aegir-primary-dark) !important;
        box-shadow: 0 4px 24px rgba(2,56,89,.45);
    }

/* Brand */
.club-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: .5px;
    color: var(--aegir-white) !important;
    text-decoration: none;
    transition: opacity var(--transition);
}

    .club-brand:hover {
        opacity: .9;
    }

    .club-brand .brand-icon {
        font-size: 1.7rem;
        line-height: 1;
    }

    .club-brand .brand-name strong {
        color: var(--aegir-accent);
    }

/* Nav-Links */
.navbar-nav .nav-link {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.90) !important;
    padding: .4rem .75rem !important;
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
}
/* button-Reset: damit <button class="nav-link"> identisch zu <a class="nav-link"> aussieht */
button.nav-link {
    background: none;
    border: none;
    cursor: pointer;
    line-height: inherit;
    width: auto;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--aegir-white) !important;
    background: rgba(255,255,255,.18);
}

.nav-icon-link {
    font-size: 1.3rem;
    padding: .3rem .5rem !important;
}

/* Toggler */
.club-navbar .navbar-toggler {
    border-color: rgba(255,255,255,.4) !important;
}

.club-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown */
.dropdown-menu-club {
    border: none;
    border-top: 3px solid var(--aegir-accent);
    border-radius: 0 0 10px 10px;
    background: var(--aegir-primary-deeper);
    box-shadow: 0 10px 30px rgba(2,56,89,.45);
    min-width: 210px;
    padding: .4rem 0;
}

    .dropdown-menu-club .dropdown-item {
        font-family: var(--font-body);
        font-size: .9rem;
        color: rgba(255,255,255,.80);
        padding: .55rem 1.2rem;
        transition: background var(--transition), color var(--transition);
    }

        .dropdown-menu-club .dropdown-item:hover {
            background: rgba(44,200,200,.18);
            color: var(--aegir-accent);
        }

    .dropdown-menu-club hr.dropdown-divider {
        border-color: rgba(255,255,255,.10);
        margin: .3rem 0;
    }

/* Theme-Toggle */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border-radius: 20px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    transition: background var(--transition);
}

    .theme-toggle-wrapper:hover {
        background: rgba(255,255,255,.22);
    }

.theme-label {
    font-size: 1.1rem;
    color: var(--aegir-accent);
    display: flex;
    align-items: center;
}

/* ───────────────────────────────────────────────────────────────
   6. WEB-CLUB-UNTERMENÜ
─────────────────────────────────────────────────────────────── */
.nav-submenu {
    position: relative;
}

.nav-submenu__toggle {
    display: flex !important;
    align-items: center;
    gap: .4rem;
}

    .nav-submenu__toggle > .rz-icon:first-child {
        font-size: 1rem;
        color: var(--aegir-accent);
        flex-shrink: 0;
    }

    .nav-submenu__toggle > span {
        flex: 1;
    }

.nav-submenu__chevron {
    font-size: 1rem !important;
    flex-shrink: 0;
    color: rgba(255,255,255,.55);
    transition: transform var(--transition), color var(--transition);
}

.nav-submenu__header {
    display: block;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--aegir-accent);
    padding: .45rem 1.2rem .3rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .15rem;
}

.nav-submenu__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
}

    .nav-submenu__menu .dropdown-item .rz-icon {
        font-size: .95rem;
        color: var(--aegir-accent);
        flex-shrink: 0;
        opacity: .75;
        transition: opacity var(--transition);
    }

    .nav-submenu__menu .dropdown-item:hover .rz-icon {
        opacity: 1;
    }


/* ───────────────────────────────────────────────────────────────
   7. FOOTER
─────────────────────────────────────────────────────────────── */
.site-footer {
    flex-shrink: 0;
    background: var(--aegir-primary-deeper);
    color: rgba(255,255,255,.70);
    font-family: var(--font-body);
    padding-top: 3rem;
}

.footer-top {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--aegir-white);
}

.footer-brand-icon {
    font-size: 1.5rem;
}

.footer-brand-name strong {
    color: var(--aegir-accent);
}

.footer-tagline {
    font-size: .85rem;
    line-height: 1.7;
    color: rgba(255,255,255,.52);
    margin: 0;
}

.footer-heading {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--aegir-accent);
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: .45rem;
    }

    .footer-links a, footer-links button {
        color: rgba(255,255,255,.58);
        text-decoration: none;
        font-size: .9rem;
        display: inline-block;
        transition: color var(--transition), padding-left var(--transition);
    }

        .footer-links a:hover, footer-links button:hover {
            color: var(--aegir-accent);
            padding-left: 5px;
        }

.footer-address {
    font-style: normal;
    font-size: .875rem;
    line-height: 1.6;
}

    .footer-address p {
        display: flex;
        align-items: flex-start;
        gap: .45rem;
        margin-bottom: .6rem;
        color: rgba(255,255,255,.58);
    }

    .footer-address .rz-icon {
        font-size: 1rem;
        color: var(--aegir-accent);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .footer-address a {
        color: rgba(255,255,255,.58);
        text-decoration: none;
        transition: color var(--transition);
    }

        .footer-address a:hover {
            color: var(--aegir-accent);
        }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
}

    .footer-legal a {
        color: rgba(255,255,255,.42);
        text-decoration: none;
        font-size: .80rem;
        white-space: nowrap;
        transition: color var(--transition);
    }

        .footer-legal a:hover {
            color: var(--aegir-accent);
        }

.footer-copyright {
    font-size: .80rem;
    color: rgba(255,255,255,.32);
    margin: 0;
}

/* ───────────────────────────────────────────────────────────────
   8. GEMEINSAME TYPOGRAFIE & BUTTONS
─────────────────────────────────────────────────────────────── */
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem,5vw,3rem);
    font-weight: 800;
    color: var(--aegir-primary-deeper);
    margin-bottom: .5rem;
}

    .section-title::after {
        content: '';
        display: block;
        width: 64px;
        height: 4px;
        background: linear-gradient(90deg, var(--aegir-primary), var(--aegir-accent));
        border-radius: 2px;
        margin: .6rem auto 0;
    }

.section-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--aegir-text-muted);
    margin-top: .5rem;
}

.btn-aegir {
    display: inline-block;
    background: var(--aegir-primary);
    color: var(--aegir-white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .7rem 1.8rem;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    transition: all var(--transition);
}

    .btn-aegir:hover {
        background: var(--aegir-primary-dark);
        color: var(--aegir-white);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3,120,166,.40);
        text-decoration: none;
    }

.btn-aegir--sm {
    font-size: .85rem;
    padding: .5rem 1.3rem;
}

.btn-aegir-outline {
    display: inline-block;
    background: transparent;
    color: var(--aegir-primary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .68rem 1.8rem;
    border-radius: 50px;
    border: 2px solid var(--aegir-primary);
    text-decoration: none;
    transition: all var(--transition);
}



/* ───────────────────────────────────────────────────────────────
   9. PAGE-HEADER  (alle Unterseiten: legal-header, k-header)
─────────────────────────────────────────────────────────────── */
.legal-header,
.k-header {
    background: linear-gradient(130deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
    padding: 3rem 0 2.8rem;
    color: var(--aegir-white);
    position: relative;
    overflow: hidden;
}

    .legal-header::before,
    .k-header::before {
        content: '';
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(255,255,255,.04);
        top: -140px;
        right: -60px;
        pointer-events: none;
    }

    .legal-header::after,
    .k-header::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 40px;
        background: var(--aegir-base);
        clip-path: ellipse(55% 100% at 50% 100%);
    }

.legal-header__inner {
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.legal-breadcrumb,
.k-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: .82rem;
    color: rgba(255,255,255,.62);
    margin-bottom: .75rem;
    position: relative;
    z-index: 1;
}

    .legal-breadcrumb a,
    .k-breadcrumb a {
        color: rgba(255,255,255,.62);
        text-decoration: none;
        transition: color var(--transition);
    }

        .legal-breadcrumb a:hover,
        .k-breadcrumb a:hover {
            color: var(--aegir-accent);
        }

.breadcrumb-sep {
    color: rgba(255,255,255,.35);
}

/* Titel */
.legal-title,
.k-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem,5vw,3.2rem);
    font-weight: 800;
    color: var(--aegir-white);
    margin: 0 0 .4rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* Untertitel */
.legal-subtitle,
.k-header__sub {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255,255,255,.65);
    margin: 0;
    position: relative;
    z-index: 1;
}
/* ───────────────────────────────────────────────────────────────
   10. STARTSEITE – HERO-CAROUSEL
─────────────────────────────────────────────────────────────── */
.hero-carousel {
    margin-top: calc(-1 * var(--navbar-height));
    height: 100vh;
}

.hero-slide {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.hero-slide--schwimmen {
    background-image: url('images/carousel/02_1900x1080.jpg');
}

.hero-slide--wasserball {
    background-image: url('images/carousel/03_1900x1080.jpg');
}

.hero-slide--breitensport {
    background-image: url('images/carousel/mick-haupt-AydQEMqCYHI-unsplash.jpg');
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(2,56,89,.82) 0%, rgba(3,120,166,.55) 45%, rgba(44,200,200,.12) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--aegir-white);
    padding: 2rem 3rem;
    max-width: 700px;
    margin-left: 5vw;
    animation: heroFadeIn .8s ease-out both;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-badge {
    display: inline-block;
    background: var(--aegir-accent);
    color: var(--aegir-primary-deeper);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: .28rem .9rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem,9vw,7rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -1px;
    margin-bottom: 1.1rem;
    text-shadow: 0 4px 24px rgba(2,56,89,.45);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem,2vw,1.2rem);
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: .92;
}

.btn-hero {
    display: inline-block;
    background: var(--aegir-accent);
    color: var(--aegir-primary-deeper);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: .8rem 2.2rem;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(44,200,200,.50);
    transition: all var(--transition);
}

    .btn-hero:hover {
        background: var(--aegir-white);
        color: var(--aegir-primary);
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(44,200,200,.55);
        text-decoration: none;
    }

/* Carousel-Indikatoren */
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

.hero-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.55);
    border: 2px solid rgba(255,255,255,.4);
    transition: all .3s ease;
}

.hero-carousel .carousel-indicators .active {
    background-color: var(--aegir-accent);
    border-color: var(--aegir-accent);
    transform: scale(1.2);
}

/* Scroll-Hinweis */
.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255,255,255,.72);
    text-align: center;
    font-family: var(--font-body);
    font-size: .70rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: fadeInUp 1s ease 1.2s both;
}

.scroll-arrow {
    font-size: 2rem;
    animation: bounce 1.6s ease-in-out infinite;
    color: var(--aegir-accent);
}

@keyframes bounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(9px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%,18px);
    }

    to {
        opacity: 1;
        transform: translate(-50%,0);
    }
}


/* ───────────────────────────────────────────────────────────────
   11. STARTSEITE – SPORT-KARTEN
─────────────────────────────────────────────────────────────── */
.sport-section {
    padding: 5rem 0 6rem;
    background: var(--aegir-base);
}

.sport-card {
    border-radius: 16px !important;
    border: none !important;
    padding: 0 !important;
    background: var(--aegir-white) !important;
    box-shadow: 0 2px 16px rgba(2,56,89,.08) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
    position: relative;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}
    /* farbige obere Linie entfernt – wird durch Bild-Header ersetzt */
    .sport-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 44px rgba(3,120,166,.16) !important;
    }

.sport-card__icon {
    margin-bottom: 1.2rem;
}

.sport-emoji {
    font-size: 3rem;
    filter: drop-shadow(0 3px 8px rgba(2,56,89,.18));
}

.sport-card__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin-bottom: .75rem;
}

.sport-card__text {
    font-family: var(--font-body);
    font-size: .94rem;
    line-height: 1.75;
    color: var(--aegir-text-muted);
    flex-grow: 1;
    margin-bottom: 1.25rem;
}

.sport-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

    .sport-card__features li {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: .88rem;
        font-weight: 600;
        color: var(--aegir-text);
        padding: .32rem 0;
        border-bottom: 1px solid rgba(3,120,166,.08);
    }

        .sport-card__features li:last-child {
            border-bottom: none;
        }

    .sport-card__features .rz-icon {
        color: var(--aegir-primary);
        font-size: 1.05rem;
        flex-shrink: 0;
    }

.sport-card__footer {
    margin-top: auto;
}

.btn-sport {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    color: var(--aegir-primary);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .55rem 1.2rem;
    border-radius: 50px;
    border: 2px solid var(--aegir-primary);
    text-decoration: none;
    transition: all var(--transition);
}

    .btn-sport:hover {
        background: var(--aegir-primary);
        color: var(--aegir-white);
        text-decoration: none;
        transform: translateX(4px);
    }


/* ───────────────────────────────────────────────────────────────
   12. STARTSEITE – CALL-TO-ACTION
─────────────────────────────────────────────────────────────── */
.cta-section {
    padding: 5.5rem 2rem;
    background: linear-gradient(130deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 55%, var(--aegir-secondary) 100%);
    color: var(--aegir-white);
    position: relative;
    overflow: hidden;
}

    .cta-section::before,
    .cta-section::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        opacity: .06;
        background: var(--aegir-white);
    }

    .cta-section::before {
        width: 500px;
        height: 500px;
        top: -180px;
        right: -80px;
    }

    .cta-section::after {
        width: 320px;
        height: 320px;
        bottom: -100px;
        left: -60px;
    }

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem,4vw,2.8rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.cta-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: .88;
    max-width: 560px;
    margin: 0 auto 2rem;
}

.btn-cta {
    display: inline-block;
    background: var(--aegir-accent);
    color: var(--aegir-primary-deeper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .8rem 2.2rem;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(44,200,200,.40);
    transition: all var(--transition);
}

    .btn-cta:hover {
        background: var(--aegir-white);
        color: var(--aegir-primary);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(44,200,200,.45);
        text-decoration: none;
    }

.btn-cta-outline {
    display: inline-block;
    background: transparent;
    color: var(--aegir-white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .78rem 2.2rem;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,.55);
    text-decoration: none;
    transition: all var(--transition);
}

    .btn-cta-outline:hover {
        border-color: var(--aegir-white);
        background: rgba(255,255,255,.12);
        color: var(--aegir-white);
        text-decoration: none;
    }
/* ───────────────────────────────────────────────────────────────
   13. RECHTLICHE SEITEN
─────────────────────────────────────────────────────────────── */
.legal-body {
    padding: 3rem 0 5rem;
    background: var(--aegir-base);
}

.wk-body,
.wb-body,
.news-body,
.na-body,
.tz-body,
.ga-body,
.gd-body {
    background: var(--aegir-base);
    padding: 2rem 0 5rem;
}

.sitemap-body,
.kurs-body,
.anm-body,
.sai-body,
.pers-body,
.nd-body,
.lk-body {
    background: var(--aegir-base);
    padding: 2.5rem 0 5rem;
}

.legal-content-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
    align-items: start;
}

.legal-main {
    min-width: 0;
}

.legal-section {
    margin-bottom: 2.5rem;
}

.legal-section__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.legal-section__icon {
    font-size: 1.3rem;
    line-height: 1;
}

.legal-section__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--aegir-primary);
    color: var(--aegir-white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.legal-card {
    background: var(--aegir-white);
    border-radius: 12px;
    padding: 1.5rem 1.8rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 12px rgba(2,56,89,.07);
    border-left: 4px solid var(--aegir-primary);
}

.legal-card--info {
    border-left-color: var(--aegir-accent);
    background: rgba(44,200,200,.06);
}

.legal-card__subtitle {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--aegir-primary);
    margin: 0 0 .75rem;
}

.legal-text {
    font-family: var(--font-body);
    font-size: .93rem;
    line-height: 1.8;
    color: var(--aegir-text-muted);
    margin: 0 0 .75rem;
}

    .legal-text:last-child {
        margin-bottom: 0;
    }

    .legal-text strong {
        color: var(--aegir-text);
    }

.legal-info-grid {
    display: flex;
    flex-direction: column;
}

.legal-info-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(3,120,166,.08);
    align-items: center;
}

    .legal-info-row:last-child {
        border-bottom: none;
    }

.legal-info-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--aegir-primary);
}

    .legal-info-label .rz-icon {
        display: block !important;
        font-size: 1rem !important;
        flex-shrink: 0;
        line-height: 1;
        width: 1rem;
        height: 1rem;
    }

.legal-info-value {
    font-family: var(--font-body);
    font-size: .93rem;
    color: var(--aegir-text);
    line-height: 1.6;
}

    .legal-info-value a {
        color: var(--aegir-primary);
        text-decoration: none;
        transition: color var(--transition);
    }

        .legal-info-value a:hover {
            color: var(--aegir-accent);
        }

.legal-list {
    font-family: var(--font-body);
    font-size: .93rem;
    line-height: 1.8;
    color: var(--aegir-text-muted);
    padding-left: 1.2rem;
    margin: .5rem 0 .75rem;
}

    .legal-list li {
        margin-bottom: .3rem;
        padding-left: .3rem;
    }

        .legal-list li::marker {
            color: var(--aegir-primary);
        }

/* Cookie-Tabelle */
.legal-cookie-table {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(3,120,166,.15);
}

.cookie-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 1rem;
    padding: .7rem 1rem;
    font-size: .88rem;
    font-family: var(--font-body);
    color: var(--aegir-text);
    border-bottom: 1px solid rgba(3,120,166,.08);
}

    .cookie-row:last-child {
        border-bottom: none;
    }

.cookie-row--header {
    background: var(--aegir-primary);
    color: var(--aegir-white);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.cookie-name {
    font-family: monospace;
    font-size: .82rem;
    color: var(--aegir-primary-dark);
    background: rgba(3,120,166,.07);
    padding: .1rem .4rem;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rechte-Grid */
.legal-rights-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.legal-right-card {
    background: var(--aegir-white);
    border-radius: 10px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(2,56,89,.07);
    border-top: 3px solid var(--aegir-primary);
    transition: transform var(--transition), box-shadow var(--transition);
}

    .legal-right-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(3,120,166,.14);
    }

.legal-right-card__icon {
    font-size: 1.8rem;
    margin-bottom: .6rem;
}

.legal-right-card h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0 0 .4rem;
}

.legal-right-card p {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--aegir-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Sidebar */
.legal-sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sidebar-card {
    background: var(--aegir-white);
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: 0 2px 12px rgba(2,56,89,.07);
}

.sidebar-card--contact,
.sidebar-card--highlight {
    background: var(--aegir-primary);
    color: var(--aegir-white);
}

    .sidebar-card--contact .sidebar-card__title,
    .sidebar-card--highlight .sidebar-card__title {
        color: var(--aegir-accent);
    }

    .sidebar-card--contact .sidebar-card__text,
    .sidebar-card--highlight .sidebar-card__text {
        color: rgba(255,255,255,.80);
    }

    .sidebar-card--contact .btn-aegir,
    .sidebar-card--highlight .btn-aegir {
        background: var(--aegir-accent);
        color: var(--aegir-primary-deeper);
        display: block;
        text-align: center;
        width: 100%;
        margin-top: 1rem;
    }

        .sidebar-card--contact .btn-aegir:hover,
        .sidebar-card--highlight .btn-aegir:hover {
            background: var(--aegir-white);
            color: var(--aegir-primary);
        }

.sidebar-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--aegir-primary);
    margin: 0 0 1rem;
}

.sidebar-card__text {
    font-family: var(--font-body);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--aegir-text-muted);
    margin: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--aegir-text);
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 8px;
    transition: background var(--transition), color var(--transition);
}

    .sidebar-nav__link .rz-icon {
        font-size: 1rem;
        color: var(--aegir-primary);
        flex-shrink: 0;
    }

    .sidebar-nav__link:hover {
        background: rgba(3,120,166,.08);
        color: var(--aegir-primary);
    }

.sidebar-nav__link--active {
    background: rgba(3,120,166,.10);
    color: var(--aegir-primary);
    font-weight: 600;
}

    .sidebar-nav__link--active .rz-icon {
        color: var(--aegir-accent);
    }

.sidebar-toc {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.sidebar-toc__link {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--aegir-text-muted);
    text-decoration: none;
    padding: .3rem .5rem;
    border-left: 2px solid transparent;
    transition: all var(--transition);
}

    .sidebar-toc__link:hover {
        color: var(--aegir-primary);
        border-left-color: var(--aegir-accent);
        padding-left: .9rem;
    }


/* ───────────────────────────────────────────────────────────────
   14. SITEMAP
─────────────────────────────────────────────────────────────── */

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.sitemap-section {
    background: var(--aegir-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(2,56,89,.08);
    transition: transform var(--transition), box-shadow var(--transition);
}

    .sitemap-section:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(3,120,166,.13);
    }

.sitemap-section__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.2rem;
    color: var(--aegir-white);
}

.sitemap-section__header--primary {
    background: var(--aegir-primary);
}

.sitemap-section__header--club {
    background: var(--aegir-primary-dark);
}

.sitemap-section__header--swimming {
    background: var(--aegir-secondary);
}

.sitemap-section__header--waterpolo {
    background: var(--aegir-primary-deeper);
}

.sitemap-section__header--courses {
    background: var(--aegir-accent);
    color: var(--aegir-primary-deeper);
}

.sitemap-section__header--legal {
    background: #4e6e80;
}

.sitemap-section__icon {
    font-size: 1.2rem;
    line-height: 1;
}

.sitemap-section__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0;
}

.sitemap-links {
    list-style: none;
    padding: .5rem 0;
    margin: 0;
}

.sitemap-link a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1.2rem;
    text-decoration: none;
    color: var(--aegir-text);
    border-bottom: 1px solid rgba(3,120,166,.06);
    transition: background var(--transition), padding-left var(--transition);
}

.sitemap-link:last-child a {
    border-bottom: none;
}

.sitemap-link a:hover {
    background: rgba(3,120,166,.06);
    padding-left: 1.5rem;
    color: var(--aegir-primary);
}

.sitemap-link a .rz-icon {
    font-size: 1rem;
    color: var(--aegir-primary);
    flex-shrink: 0;
    opacity: .7;
}

.sitemap-link a:hover .rz-icon {
    opacity: 1;
}

.sitemap-link__name {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    color: var(--aegir-text);
    line-height: 1.3;
}

.sitemap-link__url {
    font-family: monospace;
    font-size: .75rem;
    color: var(--aegir-text-muted);
    display: block;
    margin-top: 1px;
}

.sitemap-link--main a {
    background: rgba(3,120,166,.04);
}

.sitemap-link--main .sitemap-link__name {
    font-size: .95rem;
}

.sitemap-badge {
    display: inline-block;
    background: var(--aegir-accent);
    color: var(--aegir-primary-deeper);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .1rem .45rem;
    border-radius: 10px;
    vertical-align: middle;
    line-height: 1.6;
}

.sitemap-link--current a {
    background: rgba(250,193,82,.10);
}

.sitemap-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding: 1rem 1.5rem;
    background: var(--aegir-white);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(2,56,89,.06);
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--aegir-text-muted);
}

.legend-title {
    font-weight: 700;
    color: var(--aegir-text);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ───────────────────────────────────────────────────────────────
   15. KONTAKTSEITE
─────────────────────────────────────────────────────────────── */
.k-body {
    background: var(--aegir-base);
    padding: 3rem 0 5rem;
}

.k-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* Info-Spalte */
.k-info {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    position: sticky;
    top: calc(var(--navbar-height) + 1.5rem);
}

.k-address {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.2rem 1.3rem;
    font-style: normal;
}

    .k-address strong {
        font-family: var(--font-display);
        font-size: 1.05rem;
        color: var(--aegir-primary-deeper);
        margin-bottom: .3rem;
    }

    .k-address span {
        font-family: var(--font-body);
        font-size: .92rem;
        color: var(--aegir-text-muted);
        line-height: 1.5;
    }

/* Karten-Platzhalter */
.k-map {
    background: var(--aegir-white);
    border-radius: 14px;
    border: 2px dashed rgba(3,120,166,.22);
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.8rem 1.5rem;
    box-shadow: 0 2px 16px rgba(2,56,89,.06);
    gap: .3rem;
}

.k-map__icon {
    font-size: 3rem !important;
    color: rgba(3,120,166,.22);
    margin-bottom: .4rem;
}

.k-map__label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--aegir-primary);
    margin: 0;
}

.k-map__hint {
    font-family: var(--font-body);
    font-size: .80rem;
    color: var(--aegir-text-muted);
    line-height: 1.55;
    margin: 0 0 .6rem;
}

.k-map__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--aegir-primary);
    text-decoration: none;
    padding: .45rem 1.1rem;
    border: 2px solid var(--aegir-primary);
    border-radius: 50px;
    transition: all var(--transition);
}


/* Formular-Karte */
.k-form-card {
    background: var(--aegir-white);
    border-radius: 16px;
    box-shadow: 0 4px 28px rgba(2,56,89,.10);
    overflow: hidden;
}

.k-form-card__head {
    padding: 1.8rem 2rem 1.4rem;
    border-bottom: 1px solid rgba(3,120,166,.09);
}

    .k-form-card__head h2 {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--aegir-primary-deeper);
        margin: 0 0 .3rem;
    }

    .k-form-card__head p {
        font-family: var(--font-body);
        font-size: .88rem;
        color: var(--aegir-text-muted);
        margin: 0;
    }

.k-req {
    color: var(--aegir-danger);
    font-weight: 700;
}

/* Formular */
.k-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.8rem 2rem 2.2rem;
}

.k-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

    .k-row:not(.k-row--two):not(.k-row--anrede) {
        grid-template-columns: 1fr;
    }

.k-row--anrede {
    grid-template-columns: 220px 1fr;
}

.k-row--check {
    grid-template-columns: 1fr;
    gap: .4rem;
}

.k-row--submit {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.k-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .k-field .rz-label {
        font-family: var(--font-body) !important;
        font-size: .80rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .7px;
        color: var(--aegir-primary) !important;
    }

    .k-field .rz-textbox,
    .k-field .rz-textarea,
    .k-field .rz-dropdown {
        border-color: rgba(3,120,166,.28) !important;
        border-radius: 8px !important;
        font-family: var(--font-body) !important;
        font-size: .93rem !important;
        transition: border-color var(--transition), box-shadow var(--transition);
    }

        .k-field .rz-textbox:focus,
        .k-field .rz-textarea:focus,
        .k-field .rz-dropdown.rz-state-focused {
            border-color: var(--aegir-primary) !important;
            box-shadow: 0 0 0 3px rgba(3,120,166,.14) !important;
            outline: none !important;
        }

    .k-field .rz-messages,
    .k-row--check .rz-messages {
        font-size: .79rem;
        color: var(--aegir-danger);
        margin-top: 1px;
    }

.k-charcount {
    font-family: var(--font-body);
    font-size: .74rem;
    color: var(--aegir-text-muted);
    text-align: right;
}

.k-field--check {
    flex-direction: row;
    align-items: flex-start;
    gap: .75rem;
}

    .k-field--check .rz-chkbox {
        margin-top: 3px;
        flex-shrink: 0;
    }

.k-check-label {
    font-family: var(--font-body);
    font-size: .875rem;
    line-height: 1.65;
    color: var(--aegir-text-muted);
    cursor: pointer;
}

    .k-check-label a {
        color: var(--aegir-primary);
        text-decoration: underline;
        text-decoration-color: rgba(3,120,166,.35);
        text-underline-offset: 2px;
        font-weight: 600;
        transition: color var(--transition), text-decoration-color var(--transition);
    }

        .k-check-label a:hover {
            color: var(--aegir-accent);
            text-decoration-color: var(--aegir-accent);
        }

.k-btn-submit.rz-button {
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    padding: .75rem 2.2rem !important;
    border-radius: 50px !important;
    min-width: 200px;
    transition: transform var(--transition), box-shadow var(--transition) !important;
}

    .k-btn-submit.rz-button:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(3,120,166,.32) !important;
    }

.k-hint {
    font-family: var(--font-body);
    font-size: .80rem;
    color: var(--aegir-text-muted);
}

/* Erfolgs-Zustand */
.k-success {
    padding: 3rem 2rem;
    text-align: center;
    animation: kFadeUp .5s ease-out both;
}

@keyframes kFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.k-success__icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: kPop .4s cubic-bezier(.34,1.56,.64,1) .15s both;
}

@keyframes kPop {
    from {
        transform: scale(.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.k-success h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--aegir-success);
    margin: 0 0 .75rem;
}

.k-success p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--aegir-text-muted);
    max-width: 460px;
    margin: 0 auto 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   19. KURSANGEBOTE
   Klassen-Präfix: kurs-*
   Verwendet auf: /kurse  (Kursangebote.razor)
═══════════════════════════════════════════════════════════════ */

/* ── Seiten-Body ────────────────────────────────────────────── */


/* Trefferzähler */
.kurs-count {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--aegir-text-muted);
    margin-bottom: 1.5rem;
}

    .kurs-count .rz-icon {
        font-size: 1.1rem;
        color: var(--aegir-primary);
    }

/* ── Filter-Leiste ──────────────────────────────────────────── */
.kurs-filterbar {
    background: var(--aegir-white);
    border-bottom: 1px solid rgba(3,120,166,.12);
    padding: 1.1rem 0;
    position: sticky;
    top: var(--navbar-height);
    z-index: 100;
    box-shadow: 0 2px 10px rgba(2,56,89,.06);
}

.kurs-filterbar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.kurs-filterbar__field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .kurs-filterbar__field .rz-label {
        font-family: var(--font-body) !important;
        font-size: .72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .7px;
        color: var(--aegir-primary) !important;
    }

.kurs-filterbar__field--action {
    min-width: 160px;
}

/* ── Kursliste ──────────────────────────────────────────────── */
.kurs-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Kurs-Karte ─────────────────────────────────────────────── */
.kurs-card {
    background: var(--aegir-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(2,56,89,.08);
    transition: box-shadow var(--transition), transform var(--transition);
}

    .kurs-card:hover {
        box-shadow: 0 8px 28px rgba(3,120,166,.14);
        transform: translateY(-2px);
    }

/* ── Kurs-Header ────────────────────────────────────────────── */
.kurs-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.8rem;
    background: linear-gradient(100deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
    color: var(--aegir-white);
}

/* Farb-Varianten je Kategorie */
.kurs-card__header--schwimmen {
    background: linear-gradient(100deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
}

.kurs-card__header--breitensport {
    background: linear-gradient(100deg, #056b3a 0%, var(--aegir-success) 100%);
}

.kurs-card__header--baby {
    background: linear-gradient(100deg, #b06020 0%, var(--aegir-warning) 100%);
}

.kurs-card__header--wasserball {
    background: linear-gradient(100deg, #023859 0%, #035f84 100%);
}

.kurs-card__header-main {
    flex: 1;
    min-width: 0;
}

/* Kategorie-Pill */
.kurs-badge {
    display: inline-block;
    background: rgba(255,255,255,.22);
    color: var(--aegir-white);
    font-family: var(--font-body);
    font-size: .70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: .15rem .65rem;
    border-radius: 12px;
    margin-bottom: .5rem;
    border: 1px solid rgba(255,255,255,.30);
}

/* Kursname */
.kurs-card__name {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    color: var(--aegir-white);
    margin: 0 0 .35rem;
    line-height: 1.15;
}

/* Kurzbeschreibung */
.kurs-card__beschreibung {
    font-family: var(--font-body);
    font-size: .88rem;
    color: rgba(255,255,255,.78);
    margin: 0;
    line-height: 1.55;
}

/* Freie-Plätze-Badge */
.kurs-plaetze {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-size: .80rem;
    font-weight: 700;
    padding: .35rem .8rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: .2rem;
}

    .kurs-plaetze .rz-icon {
        font-size: 1rem;
    }

.kurs-plaetze--frei {
    background: rgba(93,191,116,.25);
    color: #e8ffee;
    border: 1px solid rgba(93,191,116,.45);
}

.kurs-plaetze--wenig {
    background: rgba(250,193,82,.28);
    color: #fff8e1;
    border: 1px solid rgba(250,193,82,.50);
}

.kurs-plaetze--voll {
    background: rgba(214,77,66,.28);
    color: #ffe8e6;
    border: 1px solid rgba(214,77,66,.45);
}

/* ── Kurs-Body (Detailtabelle) ─────────────────────────────── */
.kurs-card__body {
    padding: 0 1.8rem;
}

.kurs-details {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.kurs-details__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: .5rem 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(3,120,166,.08);
    align-items: center;
}

    .kurs-details__row:last-child {
        border-bottom: none;
    }

.kurs-details__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: .80rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--aegir-primary);
}

    .kurs-details__label .rz-icon {
        font-size: 1rem;
        flex-shrink: 0;
    }

.kurs-details__value {
    font-family: var(--font-body);
    font-size: .93rem;
    color: var(--aegir-text);
    line-height: 1.5;
}

/* Preis-Zelle */
.kurs-details__value--preis {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
}

.kurs-preis {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 700;
    padding: .25rem .75rem;
    border-radius: 20px;
}

    .kurs-preis .rz-icon {
        font-size: .95rem;
    }

    .kurs-preis em {
        font-style: normal;
        font-weight: 400;
        font-size: .78rem;
        opacity: .8;
    }

.kurs-preis--mitglied {
    background: rgba(44,200,200,.12);
    color: var(--aegir-primary-deeper);
    border: 1px solid rgba(44,200,200,.35);
}

    .kurs-preis--mitglied .rz-icon {
        color: var(--aegir-accent);
    }

.kurs-preis--extern {
    background: rgba(3,120,166,.08);
    color: var(--aegir-primary-deeper);
    border: 1px solid rgba(3,120,166,.20);
}

    .kurs-preis--extern .rz-icon {
        color: var(--aegir-primary);
    }

/* ── Kurs-Footer (Buttons) ─────────────────────────────────── */
.kurs-card__footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.2rem 1.8rem;
    background: rgba(3,120,166,.03);
    border-top: 1px solid rgba(3,120,166,.09);
    flex-wrap: wrap;
}

/* Radzen-Buttons werden per class angepasst */
.kurs-card__btn.rz-button {
    font-family: var(--font-display) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    border-radius: 50px !important;
    padding: .55rem 1.5rem !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
}

    .kurs-card__btn.rz-button:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(3,120,166,.25) !important;
    }

/* ── Leerzustand ────────────────────────────────────────────── */
.kurs-empty {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(2,56,89,.07);
}

.kurs-empty__icon {
    font-size: 4rem !important;
    color: rgba(3,120,166,.25);
    display: block;
    margin-bottom: .75rem;
}

.kurs-empty__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0 0 .4rem;
}

.kurs-empty__text {
    font-family: var(--font-body);
    font-size: .93rem;
    color: var(--aegir-text-muted);
    margin: 0 0 1.25rem;
}

/* ── Responsive Kursangebote ────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   20. KURSANMELDUNG
   Klassen-Präfix: anm-*
   Verwendet auf: /kurse/anmeldung  (KursAnmeldung.razor)
   Wiederverwendet: .k-field, .k-req, .kurs-preis* aus §15/§19
═══════════════════════════════════════════════════════════════ */

/* ── Seiten-Body ─────────────────────────────────────────────── */


/* Schmales Single-Column-Layout */
.anm-body .container {
    max-width: 860px;
}

/* ── Abschnitte ─────────────────────────────────────────────── */
.anm-section {
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(2,56,89,.08);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* Abschnitts-Header */
.anm-section__head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.25rem 1.8rem;
    background: linear-gradient(100deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
    color: var(--aegir-white);
}

.anm-section__icon {
    font-size: 1.8rem !important;
    margin-top: .1rem;
    flex-shrink: 0;
    color: var(--aegir-accent);
}

.anm-section__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--aegir-white);
    margin: 0 0 .1rem;
    line-height: 1.2;
}

.anm-section__sub {
    font-family: var(--font-body);
    font-size: .82rem;
    color: rgba(255,255,255,.68);
    margin: 0;
}

/* Abschnitt "Kursinformation" – leicht abgesetzter Hintergrund */
.anm-section--kurs .anm-section__head {
    background: linear-gradient(100deg, #023859 0%, #035f84 100%);
}

/* Letzter Abschnitt (Nachricht + Submit) */
.anm-section--final {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

    .anm-section--final .k-field {
        gap: .35rem;
    }

/* ── Kurs-Info-Box ───────────────────────────────────────────── */
.anm-kursinfo {
    padding: 1.2rem 1.8rem;
}

.anm-kursinfo__grid {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.anm-kursinfo__row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: .4rem 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(3,120,166,.08);
    align-items: baseline;
}

    .anm-kursinfo__row:last-child {
        border-bottom: none;
    }

    .anm-kursinfo__row dt {
        display: flex;
        align-items: center;
        gap: .35rem;
        font-family: var(--font-body);
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--aegir-primary);
    }

        .anm-kursinfo__row dt .rz-icon {
            font-size: .95rem;
            flex-shrink: 0;
        }

    .anm-kursinfo__row dd {
        font-family: var(--font-body);
        font-size: .93rem;
        color: var(--aegir-text);
        margin: 0;
        line-height: 1.5;
    }

.anm-kursinfo__row--preis dd {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .8rem;
    align-items: center;
}

/* ── Formular-Felder-Bereich ─────────────────────────────────── */
.anm-fields {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.5rem 1.8rem 1.8rem;
}

/* Zeilen-Layouts */
.anm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

/* Einzelfeld (volle Breite) */
.anm-row--single {
    grid-template-columns: 1fr;
    max-width: 420px; /* Handynummer nicht zu breit */
}

/* Anrede (schmal) + Vorname + Nachname */
.anm-row--anrede {
    grid-template-columns: 180px 1fr 1fr;
}

/* ── Checkboxen ─────────────────────────────────────────────── */
.anm-checks {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: .6rem 0 .2rem;
}

.anm-check {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    user-select: none;
}

    .anm-check .rz-chkbox {
        margin-top: 2px;
        flex-shrink: 0;
    }

.anm-check__label {
    font-family: var(--font-body);
    font-size: .9rem;
    line-height: 1.6;
    color: var(--aegir-text);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

    .anm-check__label .rz-icon {
        font-size: 1.05rem;
        color: var(--aegir-primary);
        flex-shrink: 0;
    }

/* SEPA-Mandat (Pflicht-Checkbox) */
.anm-sepa {
    background: rgba(3,120,166,.04);
    border: 1px solid rgba(3,120,166,.15);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.anm-check--sepa .anm-check__label {
    font-size: .875rem;
    color: var(--aegir-text-muted);
    line-height: 1.65;
    flex-wrap: unset;
    align-items: flex-start;
}

/* ── IBAN-Eingabefeld (Monospace) ───────────────────────────── */
.anm-iban.rz-textbox,
.anm-iban {
    /*font-family: 'Courier New', monospace !important;*/
    letter-spacing: .05em;
}

/* ── Einwilligungs-Blöcke ───────────────────────────────────── */
.anm-consent {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .anm-consent .anm-check__label {
        font-size: .875rem;
        color: var(--aegir-text-muted);
        line-height: 1.65;
        flex-wrap: unset;
        align-items: flex-start;
    }

        .anm-consent .anm-check__label a {
            color: var(--aegir-primary);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
            text-decoration-color: rgba(3,120,166,.35);
            transition: color var(--transition), text-decoration-color var(--transition);
        }

            .anm-consent .anm-check__label a:hover {
                color: var(--aegir-accent);
                text-decoration-color: var(--aegir-accent);
            }

/* Validator-Meldungen */
.anm-validator {
    font-size: .79rem;
    color: var(--aegir-danger);
}

/* ── Pflichtfeld-Hinweis ─────────────────────────────────────── */
.anm-pflicht {
    font-family: var(--font-body);
    font-size: .80rem;
    color: var(--aegir-text-muted);
    margin: 0;
}

/* ── Submit-Zeile ───────────────────────────────────────────── */
.anm-submit-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-top: .5rem;
    border-top: 1px solid rgba(3,120,166,.09);
}

.anm-btn-submit.rz-button {
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-radius: 50px !important;
    padding: .8rem 2.4rem !important;
    box-shadow: 0 4px 18px rgba(214,77,66,.30) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
}

    .anm-btn-submit.rz-button:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 26px rgba(214,77,66,.40) !important;
    }

.anm-btn-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--aegir-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

    .anm-btn-back:hover {
        color: var(--aegir-primary);
        text-decoration: none;
    }

    .anm-btn-back .rz-icon {
        font-size: 1rem;
    }

/* ── Fehler-Banner ──────────────────────────────────────────── */
.anm-error, .anm-warning {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.1rem;
    
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .88rem;
}

.anm-error {
    color: var(--aegir-danger);
    background: rgba(214,77,66,.08);
    border: 1px solid rgba(214,77,66,.25);
}

.anm-warning {
    background: var(--aegir-warning);
    color: var(--aegir-primary-deeper);
    border-color: var(--aegir-warning);
}

    .anm-error .rz-icon, .anm-warning .rz-icon {
        font-size: 1.1rem;
        flex-shrink: 0;
    }
/* ── Erfolgsseite ───────────────────────────────────────────── */
.anm-success {
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 4px 28px rgba(2,56,89,.10);
    padding: 3.5rem 2rem;
    text-align: center;
    animation: kFadeUp .5s ease-out both; /* aus §15 */
}

.anm-success__icon {
    font-size: 4.5rem !important;
    color: var(--aegir-success);
    display: block;
    margin-bottom: 1rem;
    animation: kPop .45s cubic-bezier(.34,1.56,.64,1) .1s both; /* aus §15 */
}

.anm-success__title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--aegir-primary-deeper);
    margin: 0 0 .75rem;
}

.anm-success__text {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--aegir-text-muted);
    max-width: 500px;
    margin: 0 auto 2rem;
}

.anm-success__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* ── Responsive KursAnmeldung ───────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   21. SCHWIMMEN WETTKÄMPFE  (wk-*)
   22. SCHWIMMEN SAISONS-ARCHIV  (sai-*)
═══════════════════════════════════════════════════════════════ */
/* ── Abschnitt 21: Wettkämpfe ───────────────────────────────── */

.wk-header .legal-header__inner {
    max-width: 100%;
}

.wk-header__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.wk-header__saison {
    color: var(--aegir-accent);
}

.wk-saison-switcher {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;
    padding: .4rem .8rem;
    color: var(--aegir-white);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    flex-shrink: 0;
}

    .wk-saison-switcher .rz-icon {
        font-size: 1.1rem;
        color: var(--aegir-accent);
    }

.wk-saison-dd {
    min-width: 200px;
}

    .wk-saison-dd .rz-dropdown {
        background: transparent !important;
        border: none !important;
        color: var(--aegir-white) !important;
        font-family: var(--font-display) !important;
        font-weight: 600 !important;
        font-size: .95rem !important;
    }

    .wk-saison-dd .rz-dropdown-value {
        color: var(--aegir-white) !important;
    }
/* Toolbar */
.wk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.wk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.wk-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    padding: .3rem .9rem;
    border-radius: 20px;
    border: 1.5px solid rgba(3,120,166,.30);
    background: var(--aegir-white);
    color: var(--aegir-text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

    .wk-chip:hover {
        border-color: var(--aegir-primary);
        color: var(--aegir-primary);
        background: rgba(3,120,166,.06);
    }

.wk-chip--active {
    background: var(--aegir-primary);
    color: var(--aegir-white);
    border-color: var(--aegir-primary);
    box-shadow: 0 3px 10px rgba(3,120,166,.30);
}

.wk-treffer {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--aegir-text-muted);
    margin: 0;
    white-space: nowrap;
}
/* Zeitstrahl */
.wk-timeline {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.wk-month-group {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.wk-month-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--aegir-primary-deeper);
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(3,120,166,.15);
    margin-bottom: .25rem;
}

    .wk-month-label .rz-icon {
        font-size: 1.1rem;
        color: var(--aegir-primary);
    }

.wk-month-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--aegir-primary);
    color: var(--aegir-white);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--font-body);
    margin-left: .2rem;
}

.wk-events {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
/* Event-Karte */
.wk-event {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--aegir-white);
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(2,56,89,.08);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    border-left: 4px solid var(--aegir-primary);
}

    .wk-event:hover {
        box-shadow: 0 6px 24px rgba(3,120,166,.14);
        transform: translateX(3px);
    }

.wk-event--vergangen {
    opacity: .72;
    border-left-color: var(--aegir-text-muted);
}

    .wk-event--vergangen:hover {
        opacity: 1;
    }

.wk-event--jugend {
    border-left-color: var(--aegir-secondary);
}

.wk-event--masters {
    border-left-color: var(--aegir-warning);
}

.wk-event--alle {
    border-left-color: var(--aegir-accent);
}

.wk-event--allgemein {
    border-left-color: var(--aegir-primary);
}
/* Datums-Säule */
.wk-event__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .05rem;
    min-width: 72px;
    padding: 1rem .6rem;
    background: rgba(3,120,166,.05);
    border-right: 1px solid rgba(3,120,166,.10);
    text-align: center;
    flex-shrink: 0;
}

.wk-event__day {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--aegir-primary-deeper);
    line-height: 1;
}

.wk-event__month {
    font-family: var(--font-body);
    font-size: .70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--aegir-text-muted);
}

.wk-event__done {
    margin-top: .4rem;
}

.wk-event__upcoming {
    margin-top: .4rem;
}

.wk-event__done .rz-icon {
    font-size: 1rem !important;
    color: var(--aegir-success);
}

.wk-event__upcoming .rz-icon {
    font-size: 1rem !important;
    color: var(--aegir-secondary);
}
/* Event-Inhalt */
.wk-event__body {
    flex: 1;
    min-width: 0;
    padding: .85rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.wk-event__title-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.wk-event__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0;
    line-height: 1.2;
}
/* Zielgruppe-Badge */
.wk-zielgruppe-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: .12rem .6rem;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wk-zielgruppe-badge--alle {
    background: rgba(44,200,200,.15);
    color: #03695c;
    border: 1px solid rgba(44,200,200,.40);
}

.wk-zielgruppe-badge--jugend {
    background: rgba(59,165,252,.14);
    color: #024fa0;
    border: 1px solid rgba(59,165,252,.40);
}

.wk-zielgruppe-badge--masters {
    background: rgba(250,193,82,.18);
    color: #7a4d00;
    border: 1px solid rgba(250,193,82,.45);
}

.wk-zielgruppe-badge--allgemein {
    background: rgba(3,120,166,.10);
    color: var(--aegir-primary-deeper);
    border: 1px solid rgba(3,120,166,.25);
}
/* Ort */
.wk-event__ort {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: .88rem;
}

    .wk-event__ort > .rz-icon {
        font-size: 1.1rem;
        color: var(--aegir-primary);
        margin-top: 1px;
        flex-shrink: 0;
    }

.wk-event__bad-name {
    font-weight: 700;
    color: var(--aegir-text);
    display: block;
    margin-bottom: .1rem;
}

.wk-event__adresse {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--aegir-primary);
    text-decoration: none;
    font-size: .83rem;
    transition: color var(--transition);
    line-height: 1.4;
}

    .wk-event__adresse:hover {
        color: var(--aegir-accent);
        text-decoration: underline;
    }

    .wk-event__adresse .rz-icon {
        font-size: .85rem;
        flex-shrink: 0;
    }

.wk-event__ext-icon {
    font-size: .7rem !important;
    opacity: .65;
}
/* Meta-Chips */
.wk-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.wk-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 10px;
    background: rgba(3,120,166,.07);
    color: var(--aegir-primary-deeper);
    border: 1px solid rgba(3,120,166,.15);
}

    .wk-meta-chip .rz-icon {
        font-size: .85rem;
    }

.wk-meta-chip--heute {
    background: rgba(93,191,116,.15);
    color: #1a7a3a;
    border-color: rgba(93,191,116,.35);
}
/* Dokument-Links */
.wk-event__docs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .2rem;
    padding-top: .55rem;
    border-top: 1px dashed rgba(3,120,166,.14);
}

.wk-doc-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    padding: .22rem .75rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all var(--transition);
    border: 1px solid transparent;
}

    .wk-doc-link .rz-icon {
        font-size: .9rem;
        flex-shrink: 0;
    }

.wk-doc-link--ausschreibung {
    background: rgba(3,120,166,.08);
    color: var(--aegir-primary-deeper);
    border-color: rgba(3,120,166,.20);
}

    .wk-doc-link--ausschreibung:hover {
        background: var(--aegir-primary);
        color: var(--aegir-white);
        border-color: var(--aegir-primary);
    }

.wk-doc-link--protokoll {
    background: rgba(93,191,116,.10);
    color: #1a7a3a;
    border-color: rgba(93,191,116,.28);
}

    .wk-doc-link--protokoll:hover {
        background: var(--aegir-success);
        color: var(--aegir-white);
        border-color: var(--aegir-success);
    }

.wk-doc-link--hinweis {
    background: rgba(250,193,82,.12);
    color: #7a4d00;
    border-color: rgba(250,193,82,.35);
}

    .wk-doc-link--hinweis:hover {
        background: var(--aegir-warning);
        color: var(--aegir-primary-deeper);
        border-color: var(--aegir-warning);
    }

.wk-doc-link--sonstiges {
    background: rgba(78,110,128,.08);
    color: var(--aegir-text-muted);
    border-color: rgba(78,110,128,.20);
}

    .wk-doc-link--sonstiges:hover {
        background: var(--aegir-text-muted);
        color: var(--aegir-white);
        border-color: var(--aegir-text-muted);
    }
/* "Alle Saisons"-Link */
.wk-saisons-link {
    margin-top: 3rem;
    text-align: center;
}

.wk-saisons-link__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--aegir-primary);
    text-decoration: none;
    padding: .7rem 1.8rem;
    border-radius: 50px;
    border: 2px solid var(--aegir-primary);
    transition: all var(--transition);
}

    .wk-saisons-link__btn:hover {
        background: var(--aegir-primary);
        color: var(--aegir-white);
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(3,120,166,.28);
    }

    .wk-saisons-link__btn .rz-icon {
        font-size: 1.1rem;
    }
/* ── Abschnitt 22: Saisons-Archiv ───────────────────────────── */


.sai-body .container {
    max-width: 820px;
}

.sai-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--aegir-text-muted);
    text-decoration: none;
    margin-bottom: 1.75rem;
    transition: color var(--transition);
}

    .sai-back:hover {
        color: var(--aegir-primary);
        text-decoration: none;
    }

    .sai-back .rz-icon {
        font-size: 1rem;
    }

.sai-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0 0 1.25rem;
}

    .sai-heading .rz-icon {
        font-size: 1.4rem;
        color: var(--aegir-primary);
    }

.sai-grid {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
/* Saison-Karte */
.sai-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: var(--aegir-white);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(2,56,89,.07);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all var(--transition);
    position: relative;
}

    .sai-card:hover {
        border-color: var(--aegir-primary);
        box-shadow: 0 6px 22px rgba(3,120,166,.14);
        transform: translateX(4px);
    }

.sai-card--aktuell {
    border-color: var(--aegir-accent);
    background: linear-gradient(100deg, rgba(44,200,200,.06) 0%, var(--aegir-white) 50%);
}

    .sai-card--aktuell:hover {
        border-color: var(--aegir-primary);
    }

.sai-card__badge {
    position: absolute;
    top: -1px;
    right: 1.2rem;
    background: var(--aegir-accent);
    color: var(--aegir-primary-deeper);
    font-family: var(--font-body);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: .12rem .6rem;
    border-radius: 0 0 8px 8px;
}

.sai-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(3,120,166,.10);
    color: var(--aegir-primary);
    flex-shrink: 0;
}

.sai-card--aktuell .sai-card__icon-wrap {
    background: rgba(44,200,200,.18);
    color: #03695c;
}

.sai-card__icon-wrap .rz-icon {
    font-size: 1.3rem !important;
}

.sai-card__info {
    flex: 1;
    min-width: 0;
}

.sai-card__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    line-height: 1.2;
}

.sai-card__hint {
    display: block;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--aegir-text-muted);
    margin-top: .15rem;
}

.sai-card__arrow {
    font-size: 1.2rem !important;
    color: rgba(3,120,166,.40);
    flex-shrink: 0;
    transition: color var(--transition), transform var(--transition);
}

.sai-card:hover .sai-card__arrow {
    color: var(--aegir-primary);
    transform: translateX(3px);
}
/* ── Responsive (21 + 22) ───────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   23. WASSERBALL – SPIELPLAN
   Präfix : wb-*
   Seiten : /wasserball/spiele  (WasserballSpiele.razor)
            /wasserball/saisons (WasserballSaisons.razor)
   Hinweis: wk-* und sai-* Klassen aus §21/§22 werden mitbenutzt.
═══════════════════════════════════════════════════════════════ */
/* ── Header-Akzent (Wasserball-Navy) ────────────────────────── */
.wb-header .legal-header__inner {
    max-width: 100%;
}

.wb-header {
    background: linear-gradient(130deg, #011f30 0%, #023859 45%, #0378a6 100%) !important;
}
/* ── Statistik-Leiste ───────────────────────────────────────── */
.wb-statsbar {
    background: var(--aegir-white);
    border-bottom: 1px solid rgba(3,120,166,.12);
    padding: .8rem 0;
    box-shadow: 0 2px 8px rgba(2,56,89,.06);
}

.wb-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}

.wb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    flex: 1;
    padding: .55rem .5rem;
    border-right: 1px solid rgba(3,120,166,.10);
    min-width: 80px;
    position: relative;
}

    .wb-stat:last-child {
        border-right: none;
    }

    .wb-stat .rz-icon {
        font-size: .95rem;
        opacity: .55;
    }

.wb-stat__val {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--aegir-primary-deeper);
}

.wb-stat__lbl {
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--aegir-text-muted);
}

.wb-stat--sieg .rz-icon {
    opacity: 1;
    color: var(--aegir-success);
}

.wb-stat--sieg .wb-stat__val {
    color: #1a7a3a;
}

.wb-stat--nied .rz-icon {
    opacity: 1;
    color: var(--aegir-danger);
}

.wb-stat--nied .wb-stat__val {
    color: #a83228;
}

.wb-stat--unent .rz-icon {
    opacity: 1;
    color: var(--aegir-warning);
}

.wb-stat--offen .rz-icon {
    opacity: 1;
    color: var(--aegir-text-muted);
}
/* ── Body ───────────────────────────────────────────────────── */
/* ── Spielplan-Tabelle ──────────────────────────────────────── */
.wb-table-wrap {
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(2,56,89,.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
/* Desktop-Spaltenkopf */
.wb-table-head {
    display: grid;
    grid-template-columns: 160px 1fr 130px 210px 160px;
    gap: 0;
    background: var(--aegir-primary-deeper);
    padding: 0;
}

.wb-th {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.75);
    padding: .65rem 1rem;
    border-right: 1px solid rgba(255,255,255,.08);
}

    .wb-th:last-child {
        border-right: none;
    }
/* Monats-Trenner */
.wb-month-sep {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--aegir-primary-deeper);
    padding: .5rem 1rem;
    background: rgba(3,120,166,.05);
    border-top: 1px solid rgba(3,120,166,.10);
    border-bottom: 1px solid rgba(3,120,166,.08);
}

    .wb-month-sep:first-of-type {
        border-top: none;
    }

    .wb-month-sep .rz-icon {
        font-size: 1rem;
        color: var(--aegir-primary);
    }
/* ── Spielzeile ─────────────────────────────────────────────── */
.wb-row {
    display: grid;
    grid-template-columns: 160px 1fr 130px 210px 160px;
    gap: 0;
    border-bottom: 1px solid rgba(3,120,166,.07);
    transition: background var(--transition);
    border-left: 4px solid transparent;
}

    .wb-row:last-child {
        border-bottom: none;
    }

    .wb-row:hover {
        background: rgba(3,120,166,.03);
    }
/* Zeilenfärbung je Ergebnis */
.wb-row--sieg {
    border-left-color: var(--aegir-success);
}

.wb-row--nied {
    border-left-color: var(--aegir-danger);
}

.wb-row--unent {
    border-left-color: var(--aegir-warning);
}

.wb-row--ausstehend {
    border-left-color: rgba(3,120,166,.25);
}

.wb-row--heute {
    background: rgba(44,200,200,.04);
    border-left-color: var(--aegir-accent);
}
/* Heim-/Auswärts-Hintergrund (sehr subtil) */
.wb-row--heim {
    background: rgba(3,120,166,.018);
}

.wb-row--ausw {
    background: rgba(2,56,89,.012);
}
/* Zelle */
.wb-td {
    padding: .8rem 1rem;
    border-right: 1px solid rgba(3,120,166,.06);
    display: flex;
    align-items: center;
}

    .wb-td:last-child {
        border-right: none;
    }
/* ── Datums-Spalte ──────────────────────────────────────────── */
.wb-datum {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.wb-datum__wd {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--aegir-text-muted);
}

.wb-datum__num {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--aegir-primary-deeper);
    line-height: 1.1;
}

.wb-datum__my {
    font-size: .75rem;
    font-weight: 600;
    color: var(--aegir-text-muted);
}

.wb-datum__zeit {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-family: var(--font-body);
    font-size: .80rem;
    font-weight: 600;
    color: var(--aegir-text);
    margin-top: .1rem;
}

    .wb-datum__zeit .rz-icon {
        font-size: .85rem;
        color: var(--aegir-primary);
    }
/* Heim/Auswärts/Heute Pill */
.wb-pill {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: .1rem .45rem;
    border-radius: 8px;
    margin-top: .2rem;
    width: fit-content;
}

    .wb-pill .rz-icon {
        font-size: .72rem;
    }

.wb-pill--heim {
    background: rgba(3,120,166,.12);
    color: var(--aegir-primary-deeper);
}

.wb-pill--ausw {
    background: rgba(2,56,89,.10);
    color: var(--aegir-primary-deeper);
}

.wb-pill--heute {
    background: rgba(44,200,200,.20);
    color: #03695c;
}
/* ── Begegnung ──────────────────────────────────────────────── */
.wb-paarung {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    width: 100%;
}

.wb-team {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--aegir-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wb-team--aegir {
    color: var(--aegir-primary-deeper);
}

.wb-team--gegner {
    color: var(--aegir-text-muted);
    font-weight: 600;
}

.wb-team--heim-align {
    text-align: right;
}

.wb-team--gast-align {
    text-align: left;
}
/* vs-Badge in der Mitte */
.wb-vs-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 20px;
    background: rgba(3,120,166,.10);
    border: 1px solid rgba(3,120,166,.22);
    border-radius: 5px;
}

.wb-vs-chip__line {
    display: none;
}

.wb-vs-chip__text {
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--aegir-primary);
    white-space: nowrap;
}
/* ── Ergebnis ───────────────────────────────────────────────── */
.wb-ergebnis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .3rem .7rem;
    border-radius: 10px;
    text-align: center;
    width: 100%;
}

.wb-ergebnis__score {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;
}

.wb-ergebnis__label {
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .8;
}

.wb-ergebnis--sieg {
    background: rgba(93,191,116,.15);
    color: #1a7a3a;
}

.wb-ergebnis--nied {
    background: rgba(214,77,66,.12);
    color: #a83228;
}

.wb-ergebnis--unent {
    background: rgba(250,193,82,.18);
    color: #7a4d00;
}

.wb-ergebnis--neutral {
    background: rgba(3,120,166,.08);
    color: var(--aegir-primary-deeper);
}

.wb-ausstehend {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--aegir-text-muted);
    font-style: italic;
}

    .wb-ausstehend .rz-icon {
        font-size: .9rem;
    }

.wb-ausstehend--heute {
    color: #03695c;
    font-style: normal;
    font-weight: 700;
}

    .wb-ausstehend--heute .rz-icon {
        color: var(--aegir-accent);
    }
/* ── Spielort ───────────────────────────────────────────────── */
.wb-ort {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.wb-ort__name {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    color: var(--aegir-text);
}

    .wb-ort__name .rz-icon {
        font-size: .95rem;
        color: var(--aegir-primary);
        flex-shrink: 0;
    }

.wb-ort__adresse {
    display: inline-flex; /* inline statt flex – verhindert volle Breite */
    align-items: center; /* Icon und Text auf gleicher Höhe */
    gap: .25rem;
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--aegir-primary);
    text-decoration: none;
    line-height: 1.35;
    transition: color var(--transition);
    flex-wrap: nowrap; /* Icon bleibt immer links, kein Umbruch davor */
    word-break: break-word; /* langer Adresstext darf umbrechen */
}

    .wb-ort__adresse:hover {
        color: var(--aegir-accent);
        text-decoration: underline;
    }

    .wb-ort__adresse .rz-icon:first-child {
        font-size: .88rem;
        flex-shrink: 0;
    }

.wb-ext-icon {
    font-size: .68rem !important;
    opacity: .55;
    flex-shrink: 0;
}
/* ── Schiedsrichter ─────────────────────────────────────────── */
.wb-sr {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.wb-sr__person {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .80rem;
    color: var(--aegir-text);
}

    .wb-sr__person .rz-icon {
        font-size: .85rem;
        color: var(--aegir-primary);
        flex-shrink: 0;
    }

.wb-sr__tbd {
    font-family: var(--font-body);
    font-size: .75rem;
    color: var(--aegir-text-muted);
    font-style: italic;
}
/* ── Legende ────────────────────────────────────────────────── */
.wb-legende {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    padding: .75rem 0 .25rem;
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--aegir-text-muted);
}

.wb-legende__item {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.wb-legende__dot,
.wb-legende__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wb-legende__dot--nied {
    background: var(--aegir-danger);
}

.wb-legende__swatch {
    border-radius: 3px;
}

.wb-legende__swatch--heim {
    background: rgba(3,120,166,.30);
    border: 1px solid rgba(3,120,166,.45);
}

.wb-legende__swatch--ausw {
    background: rgba(2,56,89,.20);
    border: 1px solid rgba(2,56,89,.35);
}
/* ── Saisons-Karte: Bilanz-Extension ───────────────────────── */
.sai-card__bilanz {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
}

.sai-bilanz {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
}

.sai-bilanz--sieg {
    color: #1a7a3a;
}

.sai-bilanz--nied {
    color: #a83228;
}

.sai-bilanz--unent {
    color: #7a4d00;
}
/* ── Responsive Wasserball ──────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   26. TRAININGSZEITEN SCHWIMMEN  (tz-*)
   Seite  : /schwimmen/trainingszeiten
   Nutzt  : .legal-header, .legal-breadcrumb, .legal-title,
             .legal-subtitle  (§9/§13)
═══════════════════════════════════════════════════════════════ */
/* ── Header ─────────────────────────────────────────────────── */
.tz-header__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
/* ── PDF-Button (Header + Footer-Variante) ──────────────────── */
.tz-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    padding: .6rem 1.3rem;
    border-radius: 50px;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    /* Filled – im Header */
    background: var(--aegir-white);
    color: var(--aegir-primary-deeper);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

    .tz-pdf-btn .rz-icon {
        font-size: 1.1rem;
        color: var(--aegir-danger);
    }

    .tz-pdf-btn:hover {
        background: var(--aegir-primary-deeper);
        color: var(--aegir-white);
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,.25);
    }

        .tz-pdf-btn:hover .rz-icon {
            color: var(--aegir-white);
        }
/* Outline-Variante am Seitenende */
.tz-pdf-btn--outline {
    background: transparent;
    color: var(--aegir-primary);
    border: 2px solid var(--aegir-primary);
    box-shadow: none;
}

    .tz-pdf-btn--outline .rz-icon:first-child {
        color: var(--aegir-danger);
    }

    .tz-pdf-btn--outline:hover {
        background: var(--aegir-primary);
        color: var(--aegir-white);
        border-color: var(--aegir-primary);
        box-shadow: 0 6px 18px rgba(3,120,166,.28);
    }

        .tz-pdf-btn--outline:hover .rz-icon {
            color: var(--aegir-white) !important;
        }

.tz-ext-icon {
    font-size: .72rem !important;
    opacity: .6;
}
/* ── Seiten-Body ─────────────────────────────────────────────── */
/* Gültigkeits-Hinweis */
.tz-gueltig {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(3,120,166,.08);
    border: 1px solid rgba(3,120,166,.20);
    border-radius: 10px;
    padding: .65rem 1.1rem;
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--aegir-primary-deeper);
    margin-bottom: 1.75rem;
}

    .tz-gueltig .rz-icon {
        font-size: 1.1rem;
        color: var(--aegir-primary);
        flex-shrink: 0;
    }
/* ── Gruppen-Sektion ─────────────────────────────────────────── */
.tz-gruppe {
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 3px 18px rgba(2,56,89,.09);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
/* Gruppen-Header */
.tz-gruppe__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    color: var(--aegir-white);
    background: var(--aegir-primary-deeper); /* Fallback */
}
/* Farbvarianten */
.tz-gruppe__head--gold {
    background: linear-gradient(100deg, #a07810 0%, #d4a017 100%);
}

.tz-gruppe__head--lila {
    background: linear-gradient(100deg, #5a3f88 0%, #7b5ea7 100%);
}

.tz-gruppe__head--gruen {
    background: linear-gradient(100deg, #1f6e3a 0%, #3a9a5c 100%);
}

.tz-gruppe__head--blau {
    background: linear-gradient(100deg, #025f84 0%, #0378a6 100%);
}

.tz-gruppe__head--orange {
    background: linear-gradient(100deg, #b35820 0%, #e07b39 100%);
}

.tz-gruppe__head--cyan {
    background: linear-gradient(100deg, #0e7172 0%, #1a9fa0 100%);
}

.tz-gruppe__head--rose {
    background: linear-gradient(100deg, #9a2050 0%, #c2456e 100%);
}

.tz-gruppe__head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    flex-shrink: 0;
}

    .tz-gruppe__head-icon .rz-icon {
        font-size: 1.4rem !important;
        color: var(--aegir-white);
    }

.tz-gruppe__head-text {
    flex: 1;
    min-width: 0;
}

.tz-gruppe__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--aegir-white);
    margin: 0;
    line-height: 1.2;
}

.tz-gruppe__hinweis {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .78rem;
    color: rgba(255,255,255,.82);
    margin: .3rem 0 0;
    line-height: 1.45;
}

    .tz-gruppe__hinweis .rz-icon {
        font-size: .88rem;
        flex-shrink: 0;
        margin-top: 1px;
    }

.tz-gruppe__head-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    background: rgba(255,255,255,.20);
    border: 1px solid rgba(255,255,255,.30);
    padding: .15rem .65rem;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ── Trainingszeiten-Tabelle ─────────────────────────────────── */
.tz-table-wrap {
    overflow-x: auto;
}
/* Desktop-Kopf */
.tz-table-head {
    display: grid;
    grid-template-columns: 140px 160px 1fr 200px 1fr;
    background: rgba(2,56,89,.06);
    border-bottom: 2px solid rgba(3,120,166,.14);
}

.tz-th {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--aegir-text-muted);
    padding: .55rem 1rem;
    border-right: 1px solid rgba(3,120,166,.07);
}

    .tz-th:last-child {
        border-right: none;
    }
/* Tabellenzeile */
.tz-row {
    display: grid;
    grid-template-columns: 140px 160px 1fr 200px 1fr;
    border-bottom: 1px solid rgba(3,120,166,.07);
    transition: background var(--transition);
}

    .tz-row:last-child {
        border-bottom: none;
    }

    .tz-row:hover {
        background: rgba(3,120,166,.03);
    }

    .tz-row:nth-child(even) {
        background: rgba(3,120,166,.025);
    }

        .tz-row:nth-child(even):hover {
            background: rgba(3,120,166,.05);
        }

.tz-td {
    padding: .7rem 1rem;
    border-right: 1px solid rgba(3,120,166,.06);
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .88rem;
}

    .tz-td:last-child {
        border-right: none;
    }
/* Wochentag */
.tz-wochentag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
}

.tz-wochentag__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Wochentag-Farben – subtile Regenbogen-Kennzeichnung */
.tz-wochentag__dot--mo {
    background: #5dbf74;
}
/* Montag    – Grün   */
.tz-wochentag__dot--di {
    background: #3ba5fc;
}
/* Dienstag  – Blau   */
.tz-wochentag__dot--mi {
    background: #2cc8c8;
}
/* Mittwoch  – Cyan   */
.tz-wochentag__dot--do {
    background: #7b5ea7;
}
/* Donnerstag– Lila   */
.tz-wochentag__dot--fr {
    background: #fac152;
}
/* Freitag   – Amber  */
.tz-wochentag__dot--sa {
    background: #d64d42;
}
/* Samstag   – Rot    */
.tz-wochentag__dot--so {
    background: #e07b39;
}
/* Sonntag   – Orange */
/* Uhrzeit */
.tz-uhrzeit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--aegir-text);
}

    .tz-uhrzeit .rz-icon {
        font-size: .9rem;
        color: var(--aegir-primary);
    }
/* Zielgruppe-Badge */
.tz-zielgruppe-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    padding: .18rem .65rem;
    border-radius: 10px;
    white-space: nowrap;
}
/* Farben je Gruppe (passend zu Gruppen-Header) */
.tz-zielgruppe-badge--gold {
    background: rgba(212,160,23,.14);
    color: #7a4d00;
    border: 1px solid rgba(212,160,23,.35);
}

.tz-zielgruppe-badge--lila {
    background: rgba(123,94,167,.12);
    color: #4a2a7a;
    border: 1px solid rgba(123,94,167,.30);
}

.tz-zielgruppe-badge--gruen {
    background: rgba(58,154,92,.12);
    color: #1a5e32;
    border: 1px solid rgba(58,154,92,.30);
}

.tz-zielgruppe-badge--blau {
    background: rgba(3,120,166,.10);
    color: #023859;
    border: 1px solid rgba(3,120,166,.25);
}

.tz-zielgruppe-badge--orange {
    background: rgba(224,123,57,.13);
    color: #7a3510;
    border: 1px solid rgba(224,123,57,.32);
}

.tz-zielgruppe-badge--cyan {
    background: rgba(26,159,160,.12);
    color: #0a5e5f;
    border: 1px solid rgba(26,159,160,.30);
}

.tz-zielgruppe-badge--rose {
    background: rgba(194,69,110,.11);
    color: #7a1535;
    border: 1px solid rgba(194,69,110,.28);
}
/* Bad */
.tz-bad {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    color: var(--aegir-text);
}

    .tz-bad .rz-icon {
        font-size: .9rem;
        color: var(--aegir-primary);
        flex-shrink: 0;
    }
/* Anmerkung */
.tz-anmerkung {
    display: inline-flex;
    align-items: flex-start;
    gap: .25rem;
    font-size: .80rem;
    color: var(--aegir-text-muted);
    font-style: italic;
    line-height: 1.45;
}

    .tz-anmerkung .rz-icon {
        font-size: .82rem;
        color: var(--aegir-accent);
        flex-shrink: 0;
        margin-top: 1px;
    }

.tz-anmerkung--leer {
    color: rgba(78,110,128,.40);
    font-style: normal;
}
/* PDF-Link am Seitenende */
.tz-footer-pdf {
    margin-top: 2.5rem;
    text-align: center;
}
/* ── Responsive Trainingszeiten ─────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   29. VEREINSGESCHICHTE  (vh-*)
   Seite  : /verein/geschichte
   Nutzt  : .legal-header, .legal-breadcrumb, .legal-title,
             .legal-subtitle, .legal-body, .legal-content-grid,
             .legal-card, .legal-card--info, .legal-sidebar,
             .sidebar-card, .sidebar-card__title  (§9/§13)
═══════════════════════════════════════════════════════════════ */
/* Vollbreite auf breiten Screens */
.vh-grid {
    grid-template-columns: 1fr 260px;
}
/* ── Intro-Karte ─────────────────────────────────────────────── */
.vh-intro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.vh-intro__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(44,200,200,.18);
}

    .vh-intro__icon .rz-icon {
        font-size: 1.4rem !important;
        color: var(--aegir-accent);
    }

.vh-intro__text {
    font-family: var(--font-body);
    font-size: .96rem;
    line-height: 1.75;
    color: var(--aegir-text);
    margin: 0;
}
/* ── Timeline-Container ──────────────────────────────────────── */
.vh-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* ── Epochen-Einheit ─────────────────────────────────────────── */
.vh-era {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0 1.5rem;
    position: relative;
}
    /* Durchgehende vertikale Linie rechts vom Badge */
    .vh-era::after {
        content: '';
        position: absolute;
        left: 158px; /* mitten auf dem Dot */
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, rgba(3,120,166,.18) 0%, rgba(3,120,166,.10) 80%, transparent 100%);
    }

    .vh-era:last-child::after {
        display: none;
    }
/* ── Epoche-Badge (linke Spalte) ─────────────────────────────── */
.vh-era__badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1.4rem 1.2rem 1.4rem 0;
    position: relative;
    z-index: 1;
}

.vh-era__year {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;
}

.vh-era__label {
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: .2rem;
    text-align: right;
}
/* Badge Farbvarianten */
.vh-era__badge--gold .vh-era__year {
    color: #9a6c00;
}

.vh-era__badge--gold .vh-era__label {
    color: #b88400;
}

.vh-era__badge--primary .vh-era__year {
    color: var(--aegir-primary-deeper);
}

.vh-era__badge--primary .vh-era__label {
    color: var(--aegir-primary);
}

.vh-era__badge--accent .vh-era__year {
    color: #0a8080;
}

.vh-era__badge--accent .vh-era__label {
    color: var(--aegir-accent);
}

.vh-era__badge--muted .vh-era__year {
    color: var(--aegir-text-muted);
}

.vh-era__badge--muted .vh-era__label {
    color: var(--aegir-text-muted);
    opacity: .7;
}

.vh-era__badge--dark .vh-era__year {
    color: #444;
}

.vh-era__badge--dark .vh-era__label {
    color: #666;
}
/* ── Ereignis-Liste (rechte Spalte) ──────────────────────────── */
.vh-era__events {
    display: flex;
    flex-direction: column;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}
/* ── Einzelnes Ereignis ──────────────────────────────────────── */
.vh-event {
    position: relative;
    padding: .75rem 0 .75rem 2rem;
}
    /* Trennlinie zwischen Events */
    .vh-event + .vh-event {
        border-top: 1px dashed rgba(3,120,166,.10);
    }
/* Dot auf der Linie */
.vh-event__dot {
    position: absolute;
    left: -1px; /* auf der Linie der era::after */
    top: 1.1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--aegir-white);
    border: 2.5px solid var(--aegir-primary);
    z-index: 2;
    transform: translateX(-50%);
    margin-left: 1px;
}

.vh-event__dot--gold {
    border-color: #c8930a;
    background: #fff9ec;
}

.vh-event__dot--accent {
    border-color: var(--aegir-accent);
    background: rgba(44,200,200,.08);
}

.vh-event__dot--muted {
    border-color: var(--aegir-text-muted);
    background: #f4f7fa;
}

.vh-event__dot--primary {
    border-color: var(--aegir-primary);
    background: rgba(3,120,166,.08);
}
/* Event-Varianten */
.vh-event--milestone .vh-event__body {
    background: rgba(3,120,166,.04);
    border-left: 3px solid var(--aegir-primary);
    border-radius: 0 10px 10px 0;
    padding: .9rem 1.1rem;
    margin-top: .1rem;
}

.vh-event--medal .vh-event__body {
    background: rgba(250,193,82,.07);
    border-left: 3px solid #c8930a;
    border-radius: 0 10px 10px 0;
    padding: .9rem 1.1rem;
    margin-top: .1rem;
}

.vh-event--highlight .vh-event__body {
    background: rgba(44,200,200,.05);
    border-left: 3px solid var(--aegir-accent);
    border-radius: 0 10px 10px 0;
    padding: .9rem 1.1rem;
    margin-top: .1rem;
}

.vh-event--motto .vh-event__body {
    padding: .5rem 0;
}
/* ── Event-Body-Inhalt ───────────────────────────────────────── */
.vh-event__body {
    min-width: 0;
}

.vh-event__when {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--aegir-primary);
    margin-bottom: .35rem;
}

    .vh-event__when .rz-icon {
        font-size: .85rem;
    }

.vh-event__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0 0 .4rem;
    line-height: 1.25;
}

.vh-event__text {
    font-family: var(--font-body);
    font-size: .93rem;
    color: var(--aegir-text);
    line-height: 1.75;
    margin: 0 0 .5rem;
}

    .vh-event__text:last-child {
        margin-bottom: 0;
    }

    .vh-event__text em {
        font-style: italic;
    }

    .vh-event__text strong {
        color: var(--aegir-primary-deeper);
    }
/* ── Blockquote / Motto ──────────────────────────────────────── */
.vh-motto {
    margin: 0;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

    .vh-motto::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
    }

.vh-motto__icon {
    font-size: 2rem !important;
    color: rgba(255,255,255,.25);
    display: block;
    margin-bottom: .3rem;
}

.vh-motto__text {
    font-family: var(--font-body);
    font-size: .88rem;
    color: rgba(255,255,255,.75);
    margin: 0 0 .4rem;
    line-height: 1.6;
}

.vh-motto__claim {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--aegir-white);
    margin: 0;
    line-height: 1.2;
    letter-spacing: .3px;
}
/* ── Sidebar – Schnellnavigation ─────────────────────────────── */
.vh-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.vh-nav__link {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: .83rem;
    color: var(--aegir-text);
    text-decoration: none;
    padding: .4rem .6rem;
    border-radius: 7px;
    transition: background var(--transition), color var(--transition);
}

    .vh-nav__link:hover {
        background: rgba(3,120,166,.08);
        color: var(--aegir-primary);
        text-decoration: none;
    }

.vh-nav__dot {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    border: 2px solid var(--aegir-primary);
    background: var(--aegir-white);
    flex-shrink: 0;
}

.vh-nav__dot--gold {
    border-color: #c8930a;
    background: #fff3c4;
}

.vh-nav__dot--accent {
    border-color: var(--aegir-accent);
    background: rgba(44,200,200,.12);
}

.vh-nav__dot--muted {
    border-color: var(--aegir-text-muted);
    background: #f0f3f6;
}
/* ── Sidebar – Fakten-Karte ──────────────────────────────────── */
.vh-facts__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.vh-facts__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .2rem .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(3,120,166,.07);
    align-items: baseline;
}

    .vh-facts__row:last-child {
        border-bottom: none;
    }

    .vh-facts__row dt {
        display: flex;
        align-items: center;
        gap: .3rem;
        font-family: var(--font-body);
        font-size: .73rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--aegir-primary);
    }

        .vh-facts__row dt .rz-icon {
            font-size: .82rem;
        }

    .vh-facts__row dd {
        font-family: var(--font-body);
        font-size: .83rem;
        color: var(--aegir-text);
        margin: 0;
        line-height: 1.45;
    }
/* ── Sidebar – Aegir-Mythos-Karte ───────────────────────────── */
.vh-motto-card {
    background: linear-gradient(135deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%) !important;
    color: var(--aegir-white) !important;
    position: relative;
    overflow: hidden;
}

    .vh-motto-card::before {
        content: '';
        position: absolute;
        bottom: -15px;
        right: -15px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
    }

.vh-motto-card__wave {
    font-size: 2rem !important;
    color: var(--aegir-accent);
    display: block;
    margin-bottom: .6rem;
}

.vh-motto-card__text {
    font-family: var(--font-body);
    font-size: .83rem;
    line-height: 1.65;
    color: rgba(255,255,255,.82);
    margin: 0;
}

    .vh-motto-card__text strong {
        color: var(--aegir-white);
    }
/* ═══════════════════════════════════════════════════════════════
   31. BREITENSPORT  (bs-*)
   Seite  : /breitensport
   Nutzt  : .legal-header, .legal-body, .legal-content-grid,
             .legal-card, .legal-card--info, .legal-card__subtitle,
             .legal-sidebar, .sidebar-card, .sidebar-card--highlight,
             .sidebar-nav, .sidebar-nav__link,
             .btn-aegir  (§9/§13/§8)
═══════════════════════════════════════════════════════════════ */
/* ── Fließtext in Karten ─────────────────────────────────────── */
.bs-text {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

    .bs-text p strong {
        color: var(--aegir-primary-deeper);
    }
/* ── Info-Highlight (Karte mit Icon links) ───────────────────── */
.bs-highlight {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bs-highlight__icon {
    font-size: 1.6rem !important;
    color: var(--aegir-accent);
    flex-shrink: 0;
    margin-top: .1rem;
}

.bs-highlight__text {
    font-family: var(--font-body);
    font-size: .96rem;
    color: var(--aegir-text);
    line-height: 1.80;
    margin: 0 0 .75rem;
}

    .bs-highlight__text:last-child {
        margin-bottom: 0;
    }

    .bs-highlight__text strong {
        color: var(--aegir-primary-deeper);
    }
/* ── Veranstaltungs-Einträge ─────────────────────────────────── */
.bs-events {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.1rem;
}

.bs-event {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: rgba(3,120,166,.04);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    border-left: 3px solid var(--aegir-primary);
}

.bs-event__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bs-event__icon--blue .rz-icon {
    font-size: 1.25rem !important;
    color: var(--aegir-primary);
}

.bs-event__icon--teal {
    background: rgba(44,200,200,.12);
}

    .bs-event__icon--teal .rz-icon {
        font-size: 1.25rem !important;
        color: var(--aegir-accent);
    }

.bs-event__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.bs-event__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    line-height: 1.2;
    display: block;
}

.bs-event__text {
    font-family: var(--font-body);
    font-size: .90rem;
    color: var(--aegir-text-muted);
    line-height: 1.70;
    margin: 0;
}
/* ── Abschluss-Zitat ─────────────────────────────────────────── */
.bs-zitat {
    margin: 0 0 1.5rem;
    padding: 1.4rem 1.8rem;
    background: linear-gradient(100deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

    .bs-zitat::before {
        content: '';
        position: absolute;
        bottom: -20px;
        right: -20px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
    }

.bs-zitat__icon {
    font-size: 2rem !important;
    color: rgba(255,255,255,.22);
    display: block;
    margin-bottom: .3rem;
}

.bs-zitat__text {
    font-family: var(--font-body);
    font-size: .96rem;
    color: rgba(255,255,255,.80);
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 .35rem;
}

.bs-zitat__claim {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--aegir-white);
    margin: 0;
    line-height: 1.2;
}
/* ── CTA-Leiste ──────────────────────────────────────────────── */
.bs-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(2,56,89,.09);
    padding: 1.5rem 1.8rem;
    border-top: 3px solid var(--aegir-accent);
}

.bs-cta__titel {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0 0 .25rem;
}

.bs-cta__sub {
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--aegir-text-muted);
    margin: 0;
    line-height: 1.55;
}

.bs-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    flex-shrink: 0;
}

    .bs-cta__btn .rz-icon {
        font-size: 1rem;
    }
/* ── Sidebar: Vorteils-Liste ─────────────────────────────────── */
.bs-vorteile {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

    .bs-vorteile li {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-family: var(--font-body);
        font-size: .88rem;
        color: var(--aegir-text);
        padding: .3rem 0;
        border-bottom: 1px dashed rgba(3,120,166,.09);
    }

        .bs-vorteile li:last-child {
            border-bottom: none;
        }

        .bs-vorteile li .rz-icon {
            font-size: .95rem;
            color: var(--aegir-success);
            flex-shrink: 0;
        }
/* ── Responsive ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   32. TEILNAHMEBEDINGUNGEN  (tb-*)
   Seite  : /kurse/teilnahmebedingungen
   Nutzt  : .legal-header, .legal-body, .legal-content-grid,
             .legal-main, .legal-card, .legal-card--info,
             .legal-card__subtitle, .legal-text,
             .legal-section__num, .legal-sidebar,
             .sidebar-card, .sidebar-card--highlight,
             .sidebar-toc, .sidebar-toc__link,
             .bs-cta, .bs-cta__btn, .bs-cta__titel, .bs-cta__sub,
             .btn-aegir  (§9/§13/§31/§8)
═══════════════════════════════════════════════════════════════ */
/* ── Intro-Hinweis ───────────────────────────────────────────── */
.tb-intro {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.5rem;
}
/* ── Bedingungen-Liste ───────────────────────────────────────── */
.tb-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
/* ── Einzelner Bedingungspunkt ───────────────────────────────── */
.tb-item {
    /* erbt .legal-card – Anpassungen: */
    padding: 1.1rem 1.4rem 1.2rem;
    margin-bottom: 0; /* gap in .tb-list übernimmt Abstand */
    transition: box-shadow var(--transition), transform var(--transition);
}

    .tb-item:hover {
        box-shadow: 0 6px 22px rgba(3,120,166,.13);
        transform: translateX(3px);
    }
/* Abschlusspunkt – gold hervorgehoben */
.tb-item--final {
    border-left-color: var(--aegir-accent);
    background: rgba(44,200,200,.04);
}

.tb-item__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}

.tb-item__titel {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
/* Акцент-Zahl für Punkt 10 */
.tb-item__num--accent {
    background: var(--aegir-accent) !important;
    color: var(--aegir-primary-deeper) !important;
}
/* ── Status-Tags ─────────────────────────────────────────────── */
.tb-item__tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: .18rem .65rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Pflicht – rot */
.tb-item__tag--required {
    background: rgba(214,77,66,.10);
    color: #a42b22;
    border: 1px solid rgba(214,77,66,.30);
}
/* Kosten – orange */
.tb-item__tag--cost {
    background: rgba(250,150,30,.11);
    color: #8a4d00;
    border: 1px solid rgba(250,150,30,.30);
}
/* Erstattung – grün */
.tb-item__tag--ok {
    background: rgba(93,191,116,.12);
    color: #1e6e35;
    border: 1px solid rgba(93,191,116,.35);
}
/* Warnung / kein Ersatz – amber */
.tb-item__tag--warn {
    background: rgba(250,193,82,.14);
    color: #7a4d00;
    border: 1px solid rgba(250,193,82,.40);
}
/* Hinweis – teal */
.tb-item__tag--info {
    background: rgba(44,200,200,.10);
    color: #0a7070;
    border: 1px solid rgba(44,200,200,.30);
}
/* ── Geldbeträge ─────────────────────────────────────────────── */
.tb-betrag {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: var(--aegir-danger);
    background: rgba(214,77,66,.07);
    padding: .05rem .4rem;
    border-radius: 4px;
}
/* ── Adressblock ─────────────────────────────────────────────── */
.tb-verantwortlich {
    margin-bottom: 1.5rem;
}

.tb-adresse {
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--aegir-text);
    line-height: 1.85;
    font-style: normal;
    padding: .75rem 0 .25rem;
}

    .tb-adresse strong {
        color: var(--aegir-primary-deeper);
        display: block;
        font-size: 1rem;
        margin-bottom: .15rem;
    }
/* ── Sidebar: Tag-Legende ────────────────────────────────────── */
.tb-legende {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.tb-legende__row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.tb-legende__text {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--aegir-text-muted);
}
/* ── Responsive ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   33. AQUAPOWER  (aq-*)
   Seite  : /kurse/aquafitness
   Nutzt  : .legal-header, .legal-body, .legal-content-grid,
             .legal-main, .legal-card, .legal-card--info,
             .legal-card__subtitle, .legal-text,
             .legal-info-grid, .legal-info-row,
             .legal-info-label, .legal-info-value,
             .legal-sidebar, .sidebar-card,
             .sidebar-card--highlight, .sidebar-nav,
             .sidebar-nav__link, .sidebar-nav__link--active,
             .bs-cta, .bs-cta__btn, .bs-cta__titel,
             .bs-cta__sub, .btn-aegir  (§9/§13/§31/§8)
═══════════════════════════════════════════════════════════════ */
/* ── Intro-Box ───────────────────────────────────────────────── */
.aq-intro {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 0;
}

.aq-intro__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(44,200,200,.18);
    flex-shrink: 0;
}

    .aq-intro__icon .rz-icon {
        font-size: 1.4rem !important;
        color: var(--aegir-accent);
    }
/* ── Geräte-Grid ─────────────────────────────────────────────── */
.aq-geraete {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .5rem;
}

.aq-geraet {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(3,120,166,.07);
    border: 1px solid rgba(3,120,166,.18);
    border-radius: 20px;
    padding: .4rem .9rem;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 600;
    color: var(--aegir-primary-deeper);
    transition: background var(--transition), transform var(--transition);
}

    .aq-geraet:hover {
        background: rgba(3,120,166,.13);
        transform: translateY(-2px);
    }

    .aq-geraet .rz-icon {
        font-size: .95rem;
        color: var(--aegir-primary);
    }
/* ── Wasser-Effekte als Icon-Kacheln ────────────────────────── */
.aq-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: .75rem;
}

.aq-benefit {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--aegir-base);
    border-radius: 10px;
    padding: .75rem 1rem;
}

.aq-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aq-benefit__icon--blue .rz-icon {
    color: var(--aegir-primary);
}

.aq-benefit__icon--teal {
    background: rgba(44,200,200,.14);
}

    .aq-benefit__icon--teal .rz-icon {
        color: var(--aegir-accent);
    }

.aq-benefit__icon--green {
    background: rgba(93,191,116,.14);
}

    .aq-benefit__icon--green .rz-icon {
        color: #2e8b4f;
    }

.aq-benefit__icon .rz-icon {
    font-size: 1.2rem !important;
}

.aq-benefit__text {
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 600;
    color: var(--aegir-text);
    line-height: 1.35;
}
/* ── Extras (Checkmark-Liste) ────────────────────────────────── */
.aq-extras {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: .5rem;
}

.aq-extra {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-family: var(--font-body);
    font-size: .93rem;
    color: var(--aegir-text);
    line-height: 1.55;
    padding: .5rem 0;
    border-bottom: 1px dashed rgba(3,120,166,.09);
}

    .aq-extra:last-child {
        border-bottom: none;
    }

.aq-extra__icon {
    font-size: 1.05rem !important;
    color: var(--aegir-success);
    flex-shrink: 0;
    margin-top: .1rem;
}
/* ── Hinweis-Box (Gelenk & Musik) ────────────────────────────── */
.aq-hinweis {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
/* ── Kurstypen ───────────────────────────────────────────────── */
.aq-kurse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: .5rem;
}

.aq-kurs {
    border-radius: 10px;
    padding: 1rem 1.1rem;
    border-left: 4px solid;
}

.aq-kurs--flach {
    background: rgba(3,120,166,.05);
    border-left-color: var(--aegir-primary);
}

.aq-kurs--tief {
    background: rgba(44,200,200,.05);
    border-left-color: var(--aegir-accent);
}

.aq-kurs__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .45rem;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--aegir-primary-deeper);
}

.aq-kurs--flach .aq-kurs__head .rz-icon {
    color: var(--aegir-primary);
}

.aq-kurs--tief .aq-kurs__head .rz-icon {
    color: var(--aegir-accent);
}

.aq-kurs__text {
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--aegir-text-muted);
    line-height: 1.60;
    margin: 0;
}

    .aq-kurs__text strong {
        color: var(--aegir-primary-deeper);
    }
/* Orts-Zeile unterhalb der Kurstypen */
.aq-ort {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-family: var(--font-body);
    font-size: .90rem;
    color: var(--aegir-text-muted);
    padding: .65rem .9rem;
    background: rgba(3,120,166,.04);
    border-radius: 8px;
    border: 1px solid rgba(3,120,166,.10);
}

.aq-ort__icon {
    font-size: 1.05rem !important;
    color: var(--aegir-primary);
    flex-shrink: 0;
}

.aq-ort strong {
    color: var(--aegir-primary-deeper);
}
/* ── Schnuppern-Banner ───────────────────────────────────────── */
.aq-schnupper {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(100deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
    border-radius: 14px;
    padding: 1.25rem 1.6rem;
    margin-bottom: 0;
}

.aq-schnupper__icon {
    font-size: 2rem !important;
    color: #ffd87a;
    flex-shrink: 0;
}

.aq-schnupper__titel {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--aegir-white);
    margin-bottom: .2rem;
}

.aq-schnupper__text {
    font-family: var(--font-body);
    font-size: .88rem;
    color: rgba(255,255,255,.78);
    line-height: 1.55;
    margin: 0;
}
/* ── Responsive ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   34. SEEPFERDCHEN-KURS  (sp-*)
   Seite  : /kurse/seepferdchen
   Nutzt  : .legal-header, .legal-body, .legal-content-grid,
             .legal-main, .legal-card, .legal-card--info,
             .legal-card__subtitle, .legal-text,
             .legal-info-grid, .legal-info-row,
             .legal-info-label, .legal-info-value,
             .legal-sidebar, .sidebar-card,
             .sidebar-card--highlight, .sidebar-nav,
             .sidebar-nav__link, .sidebar-nav__link--active,
             .aq-intro, .aq-intro__icon, .aq-hinweis,
             .aq-hinweis__icon, .bs-cta, .bs-cta__btn,
             .bs-cta__titel, .bs-cta__sub,
             .btn-aegir, .btn-aegir-outline  (§8/§9/§13/§31/§33)
═══════════════════════════════════════════════════════════════ */
/* ── Hero-Bild ───────────────────────────────────────────────── */
.sp-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 6px 28px rgba(2,56,89,.16);
}

.sp-hero__img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center 30%;
}

.sp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, transparent 40%, rgba(2,40,65,.55) 100% );
    display: flex;
    align-items: flex-end;
    padding: 1.2rem 1.4rem;
}

.sp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--aegir-accent);
    color: var(--aegir-primary-deeper);
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: .35rem .9rem;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
}

    .sp-hero__badge .rz-icon {
        font-size: 1rem !important;
    }

.sp-hero__credit {
    position: absolute;
    bottom: .4rem;
    right: .75rem;
    font-family: var(--font-body);
    font-size: .68rem;
    color: rgba(255,255,255,.55);
    margin: 0;
}

    .sp-hero__credit a {
        color: rgba(255,255,255,.65);
        text-decoration: none;
    }

        .sp-hero__credit a:hover {
            color: var(--aegir-white);
        }
/* ── Schritt-für-Schritt ─────────────────────────────────────── */
.sp-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: .75rem;
    position: relative;
}
    /* Verbindungslinie zwischen den Schritten */
    .sp-steps::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 36px;
        bottom: 36px;
        width: 2px;
        background: linear-gradient(to bottom, rgba(3,120,166,.25) 0%, rgba(200,147,10,.45) 100%);
    }

.sp-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem 0 .9rem;
    position: relative;
}

    .sp-step + .sp-step {
        border-top: 1px dashed rgba(3,120,166,.10);
    }
/* Nummer-Kreis */
.sp-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--aegir-primary);
    color: var(--aegir-white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(3,120,166,.30);
}
/* Gold für den letzten Schritt (Prüfung) */
.sp-step__num--gold {
    background: linear-gradient(135deg, #c8930a 0%, #e8b820 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(200,147,10,.40);
}

    .sp-step__num--gold .rz-icon {
        font-size: 1.2rem !important;
    }

.sp-step__body {
    flex: 1;
    min-width: 0;
    padding-top: .25rem;
}

.sp-step__titel {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin-bottom: .3rem;
}

.sp-step__text {
    font-family: var(--font-body);
    font-size: .92rem;
    color: var(--aegir-text-muted);
    line-height: 1.70;
    margin: 0;
}

    .sp-step__text strong {
        color: var(--aegir-primary-deeper);
    }
/* Letzter Schritt leicht hervorgehoben */
.sp-step--final .sp-step__body {
    background: rgba(200,147,10,.05);
    border: 1px solid rgba(200,147,10,.20);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-top: -.1rem;
}

.sp-step--final .sp-step__titel {
    color: #8a5e00;
}
/* ── Preis-Darstellung ───────────────────────────────────────── */
.sp-preis {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--aegir-primary-deeper);
}

.sp-preis-note {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .75rem;
    color: #1e6e35;
    background: rgba(93,191,116,.12);
    border: 1px solid rgba(93,191,116,.30);
    border-radius: 10px;
    padding: .1rem .55rem;
    margin-left: .4rem;
    vertical-align: middle;
}
/* ── Kontakt & Anmeldung ─────────────────────────────────────── */
.sp-kontakt {
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(2,56,89,.09);
    padding: 1.4rem 1.6rem;
    margin-bottom: 0;
}

.sp-kontakt__titel {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0 0 1rem;
}

    .sp-kontakt__titel .rz-icon {
        font-size: 1.2rem;
        color: var(--aegir-primary);
    }

.sp-kontakt__actions {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
}

.sp-kontakt__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .sp-kontakt__btn .rz-icon {
        font-size: 1rem;
    }
/* ── Responsive ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   35. REKORDLISTEN  (rek-*)
   Seite  : /schwimmen/rekordlisten
   Nutzt  : .legal-header, .legal-breadcrumb, .legal-title,
             .legal-subtitle  (§9)
   IFrame : Höhe wird per JS berechnet (100vh - navbar - header)
            Minimum: 500px
═══════════════════════════════════════════════════════════════ */
/* ── Kompakter Seitenheader ──────────────────────────────────── */
.rek-header .legal-header__inner {
    padding: 1.1rem 0 1rem;
}

.rek-header .legal-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: .2rem;
}

.rek-header .legal-subtitle {
    margin: 0;
}
/* ── IFrame-Container ────────────────────────────────────────── */
.rek-wrap {
    position: relative;
    width: 100%;
    min-height: 500px; /* JS überschreibt dies mit berechnetem Wert */
    background: var(--aegir-white);
    overflow: hidden;
}
/* ── IFrame selbst ───────────────────────────────────────────── */
.rek-iframe {
    display: block;
    width: 100%;
    height: 100%; /* füllt .rek-wrap, das per JS eine feste Höhe bekommt */
    min-height: 500px;
    border: none;
    background: var(--aegir-white);
}
/* ── Lade-Overlay ────────────────────────────────────────────── */
.rek-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--aegir-base);
    z-index: 2;
    gap: 1rem;
    transition: opacity .3s ease;
}
/* Spinner-Animation */
.rek-loading__spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(3,120,166,.15);
    border-top-color: var(--aegir-primary);
    border-radius: 50%;
    animation: rekSpin .8s linear infinite;
}

@keyframes rekSpin {
    to {
        transform: rotate(360deg);
    }
}

.rek-loading__text {
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--aegir-text-muted);
    margin: 0;
}
/* ── Fallback-Link unterhalb ─────────────────────────────────── */
.rek-fallback {
    padding: .65rem 1rem;
    background: rgba(3,120,166,.04);
    border-top: 1px solid rgba(3,120,166,.10);
    text-align: center;
}

    .rek-fallback p {
        font-family: var(--font-body);
        font-size: .82rem;
        color: var(--aegir-text-muted);
        margin: 0;
    }

    .rek-fallback a {
        color: var(--aegir-primary);
        font-weight: 600;
        text-decoration: none;
        transition: color var(--transition);
    }

        .rek-fallback a:hover {
            color: var(--aegir-accent);
        }
/* ── Responsive ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   36. LINKSAMMLUNG  (lk-*)
   Seite  : /links
   Nutzt  : .legal-header, .legal-body, .legal-breadcrumb,
             .legal-title, .legal-subtitle  (§9)
═══════════════════════════════════════════════════════════════ */
/* ── Raster: 2 Spalten ab 768 px, 1 Spalte mobil ────────────── */
.lk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
/* ── Sektion-Karte ───────────────────────────────────────────── */
.lk-section {
    background: var(--aegir-white);
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(2,56,89,.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}

    .lk-section:hover {
        box-shadow: 0 8px 28px rgba(3,120,166,.13);
        transform: translateY(-3px);
    }
/* ── Sektions-Header ─────────────────────────────────────────── */
.lk-section__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .95rem 1.3rem;
    color: var(--aegir-white);
}
/* Farbvarianten */
.lk-section__head--blue {
    background: linear-gradient(100deg, #024fa0 0%, var(--aegir-primary) 100%);
}

.lk-section__head--teal {
    background: linear-gradient(100deg, #0a7070 0%, #17a2a2 100%);
}

.lk-section__head--primary {
    background: linear-gradient(100deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
}

.lk-section__head--dark {
    background: linear-gradient(100deg, #1a2a3a 0%, #2d4255 100%);
}

.lk-section__head--gold {
    background: linear-gradient(100deg, #8a5e00 0%, #c8930a 100%);
}

.lk-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}

    .lk-section__icon .rz-icon {
        font-size: 1.2rem !important;
        color: var(--aegir-white);
    }

.lk-section__titel {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--aegir-white);
    margin: 0;
    line-height: 1.3;
}
/* ── Link-Liste ──────────────────────────────────────────────── */
.lk-list {
    list-style: none;
    padding: .5rem 0;
    margin: 0;
    flex: 1;
}

.lk-item {
    border-bottom: 1px solid rgba(3,120,166,.07);
}

    .lk-item:last-child {
        border-bottom: none;
    }
/* ── Link ────────────────────────────────────────────────────── */
.lk-link {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem 1.3rem;
    font-family: var(--font-body);
    font-size: .90rem;
    color: var(--aegir-primary);
    text-decoration: none;
    line-height: 1.45;
    transition: background var(--transition), color var(--transition), padding-left var(--transition);
}

    .lk-link:hover {
        background: rgba(3,120,166,.05);
        color: var(--aegir-primary-deeper);
        padding-left: 1.7rem;
        text-decoration: none;
    }

.lk-link__icon {
    font-size: .82rem !important;
    color: var(--aegir-accent);
    flex-shrink: 0;
    margin-top: .18rem;
    transition: transform var(--transition);
}

.lk-link:hover .lk-link__icon {
    transform: translateX(3px);
}
/* Notiz / Erläuterung in Klammern */
.lk-link__note {
    display: block;
    font-size: .78rem;
    color: var(--aegir-text-muted);
    font-style: italic;
    margin-top: .1rem;
}
/* ── Disclaimer-Hinweis ──────────────────────────────────────── */
.lk-hinweis {
    font-family: var(--font-body);
    font-size: .80rem;
    color: var(--aegir-text-muted);
    text-align: center;
    padding: .75rem 1rem;
    background: rgba(3,120,166,.04);
    border: 1px solid rgba(3,120,166,.10);
    border-radius: 8px;
    line-height: 1.6;
    margin: 0;
}
/* ═══════════════════════════════════════════════════════════════
   37. KINDERSCHWIMMEN  (ks-*)
   Seite  : /schwimmen/kinder
   Nutzt  : .legal-header, .legal-body, .legal-content-grid,
             .legal-main, .legal-card, .legal-card--info,
             .legal-card__subtitle, .legal-text,
             .legal-info-grid, .legal-info-row,
             .legal-info-label, .legal-info-value,
             .legal-sidebar, .sidebar-card,
             .sidebar-card--highlight, .bs-text,
             .bs-zitat, .bs-zitat__icon, .bs-zitat__text,
             .bs-zitat__sub, .bs-cta, .bs-cta__btn,
             .bs-cta__titel, .bs-cta__sub, .bs-vorteile,
             .aq-intro, .aq-intro__icon,
             .aq-hinweis, .aq-hinweis__icon,
             .sp-hero, .sp-hero__img, .sp-hero__overlay,
             .sp-hero__badge, .sp-hero__credit,
             .btn-aegir, .btn-aegir-outline  (§8/§9/§13/§31/§33/§34)
═══════════════════════════════════════════════════════════════ */
/* ── Highlight-Kacheln (4 Icons nebeneinander) ───────────────── */
.ks-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
}

.ks-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    background: var(--aegir-white);
    border-radius: 12px;
    padding: 1.1rem .9rem;
    box-shadow: 0 2px 12px rgba(2,56,89,.07);
    transition: transform var(--transition), box-shadow var(--transition);
}

    .ks-highlight:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 22px rgba(3,120,166,.13);
    }

.ks-highlight__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .ks-highlight__icon .rz-icon {
        font-size: 1.5rem !important;
    }

.ks-highlight__icon--blue .rz-icon {
    color: var(--aegir-primary);
}

.ks-highlight__icon--teal {
    background: rgba(44,200,200,.14);
}

    .ks-highlight__icon--teal .rz-icon {
        color: #0a8080;
    }

.ks-highlight__icon--green {
    background: rgba(93,191,116,.14);
}

    .ks-highlight__icon--green .rz-icon {
        color: #2e8b4f;
    }

.ks-highlight__icon--gold {
    background: rgba(200,147,10,.12);
}

    .ks-highlight__icon--gold .rz-icon {
        color: #9a6c00;
    }

.ks-highlight__label {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    line-height: 1.2;
}

.ks-highlight__text {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--aegir-text-muted);
    line-height: 1.45;
}
/* ═══════════════════════════════════════════════════════════════
   39. SATZUNG  (sz-*)
   Seite  : /satzung
   Nutzt  : .legal-header, .legal-body, .legal-content-grid,
             .legal-main, .legal-section, .legal-section__title,
             .legal-section__num, .legal-card, .legal-card--info,
             .legal-text, .legal-list,
             .legal-sidebar, .sidebar-card,
             .sidebar-card--highlight, .sidebar-toc,
             .sidebar-toc__link, .sidebar-nav,
             .sidebar-nav__link  (§9/§13)
═══════════════════════════════════════════════════════════════ */
/* ── Intro-Hinweis ───────────────────────────────────────────── */
.sz-hinweis {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 0;
}
/* ── Vereinsfarben § 16 ──────────────────────────────────────── */
.sz-farben {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.sz-farbe {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: .5px;
}

.sz-farbe--blau {
    background: var(--aegir-primary);
    color: #fff;
}

.sz-farbe--weiss {
    background: #fff;
    color: var(--aegir-primary-deeper);
    border: 1.5px solid rgba(3,120,166,.25);
}
/* ═══════════════════════════════════════════════════════════════
   40. COOKIE CONSENT  (cc-*)
   Komponente : Components/CookieConsent.razor
   Einbinden  : MainLayout.razor  →  <CookieConsent />
═══════════════════════════════════════════════════════════════ */
/* ── Backdrop ────────────────────────────────────────────────── */
.cc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 38, 58, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: flex-end; /* Dialog unten, wie mobile-üblich  */
    justify-content: center;
    padding: 1rem;
    animation: ccFadeIn 0.25s ease;
}

@keyframes ccFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* ── Dialog-Box ──────────────────────────────────────────────── */
.cc-dialog {
    background: var(--aegir-white);
    border-radius: 18px 18px 14px 14px;
    box-shadow: 0 -4px 40px rgba(2,56,89,.18), 0 2px 20px rgba(0,0,0,.12);
    width: 100%;
    max-width: 560px;
    padding: 2rem 2rem 1.5rem;
    animation: ccSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ccSlideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* ── Keks-Icon ───────────────────────────────────────────────── */
.cc-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: .6rem;
    text-align: center;
}
/* ── Titel ───────────────────────────────────────────────────── */
.cc-titel {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--aegir-primary-deeper);
    margin: 0 0 .9rem;
    text-align: center;
}
/* ── Textbereich ─────────────────────────────────────────────── */
.cc-text {
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--aegir-text-muted);
    line-height: 1.7;
}

    .cc-text p {
        margin: 0 0 .75rem;
    }

    .cc-text strong {
        color: var(--aegir-text);
    }
/* ── Cookie-Liste ────────────────────────────────────────────── */
.cc-liste {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: var(--aegir-base);
    border-radius: 10px;
    padding: .85rem 1rem;
    margin: .5rem 0 .85rem;
}

.cc-liste__item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.cc-liste__dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    margin-top: .35rem;
    flex-shrink: 0;
}


.cc-liste__note {
    display: block;
    font-size: .80rem;
    color: var(--aegir-text-muted);
    margin-top: .1rem;
}
/* ── Hinweis-Zeile ───────────────────────────────────────────── */
.cc-hinweis {
    font-size: .82rem;
    color: var(--aegir-text-muted);
    border-left: 3px solid var(--aegir-success);
    padding-left: .75rem;
    margin: .5rem 0 0;
}
/* ── Aktions-Zeile ───────────────────────────────────────────── */
.cc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(3,120,166,.1);
}
/* Datenschutz-Link */
.cc-link {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--aegir-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
    flex-shrink: 0;
}

    .cc-link:hover {
        color: var(--aegir-accent);
    }
/* OK-Button */
.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, var(--aegir-primary) 0%, var(--aegir-primary-dark) 100%);
    color: var(--aegir-white);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: .65rem 1.6rem;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    box-shadow: 0 3px 12px rgba(3,120,166,.3);
}

    .cc-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3,120,166,.4);
        background: linear-gradient(135deg, var(--aegir-primary-dark) 0%, var(--aegir-primary-deeper) 100%);
    }

    .cc-btn:active {
        transform: translateY(0);
    }
/* ═══════════════════════════════════════════════════════════════
   43. SPORT-CARD BILD-HEADER  (sport-card__header)
   Ersetzt .sport-card__icon / .sport-emoji auf der Startseite.
   Bilder: wwwroot/img/sport/schwimmen.jpg  (empf. 400×220px)
                              wasserball.jpg
                              breitensport.jpg
   Fallback: Emoji wird angezeigt wenn Bild nicht laden kann.
═══════════════════════════════════════════════════════════════ */

.sport-card__header {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: var(--aegir-primary-deeper);
    flex-shrink: 0;
}
/* Farbvarianten als Fallback-Gradient wenn kein Bild */
.sport-card__header--schwimmen {
    background: linear-gradient(135deg, var(--aegir-primary-deeper) 0%, var(--aegir-primary) 100%);
}

.sport-card__header--wasserball {
    background: linear-gradient(135deg, #012a42 0%, var(--aegir-primary-deeper) 100%);
}

.sport-card__header--breitensport {
    background: linear-gradient(135deg, #0a5f60 0%, var(--aegir-accent) 100%);
}

.sport-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s ease;
}

.sport-card:hover .sport-card__img {
    transform: scale(1.04);
}
/* Inhalt unterhalb des Headers – trägt das Card-Padding */
.sport-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem 2rem 2rem;
}
/* Emoji-Fallback (zentriert über Gradient) */
.sport-card__img-fallback {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    /* display:none gesetzt via onerror, wird zu flex wenn Bild fehlt */
}

    .sport-card__img-fallback .sport-emoji {
        font-size: 4rem;
        filter: drop-shadow(0 3px 12px rgba(0,0,0,.3));
    }
/* Badge oben rechts auf dem Bild – z-index über dem img */
.sport-card__header-badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    background: rgba(2,38,58,.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--aegir-white);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: .22rem .65rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.22);
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .sport-card__header {
        height: 150px;
    }
}
/* ═══════════════════════════════════════════════════════════════
   44. SPONSOREN-SEKTION  (sp-section, sp-logos, sp-logo-*)
   Startseite: nach der CTA-Sektion
   Logos: wwwroot/img/sponsoren/sponsor1.png … sponsor4.png
   Vorgaben: Breite 200px, Höhe variabel 70–200px
   → Logos werden auf gleiche Höhe zentriert, Breite fixiert
═══════════════════════════════════════════════════════════════ */

.sp-section {
    padding: 3.5rem 0 4rem;
    background: var(--aegir-white);
    border-top: 1px solid rgba(3,120,166,.08);
}

.sp-section__title {
    font-size: 1.4rem !important;
    color: var(--aegir-text-muted) !important;
}
/* ── Logo-Reihe ──────────────────────────────────────────────── */
.sp-logos {
    display: flex;
    align-items: center; /* vertikale Zentrierung trotz unterschiedlicher Höhen */
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 3.5rem;
    padding: .5rem 0;
}
/* ── Einzelner Logo-Link ─────────────────────────────────────── */
.sp-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px; /* fixe Breite laut Anforderung */
    min-height: 70px; /* mindest Höhe (kleinstes Logo) */
    max-height: 200px; /* maximale Höhe (größtes Logo) */
    padding: .75rem;
    border-radius: 10px;
    border: 1px solid rgba(3,120,166,.08);
    background: var(--aegir-white);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
    text-decoration: none;
}

    .sp-logo-link:hover {
        border-color: rgba(3,120,166,.22);
        box-shadow: 0 4px 18px rgba(3,120,166,.12);
        transform: translateY(-3px);
        opacity: 1;
    }
/* ── Logo-Bild ───────────────────────────────────────────────── */
.sp-logo-img {
    width: 100%; /* füllt die fixe 200px-Breite des Links */
    height: auto; /* Höhe proportional zum Original */
    max-height: 160px; /* Deckelung: Bild läuft nie über den Container */
    object-fit: contain; /* Seitenverhältnis erhalten, kein Abschneiden */
    display: block;
    /* Logos erscheinen dezent, auf Hover volle Intensität */
    opacity: .82;
    filter: grayscale(15%);
    transition: opacity var(--transition), filter var(--transition);
}

.sp-logo-link:hover .sp-logo-img {
    opacity: 1;
    filter: grayscale(0%);
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sp-logos {
        gap: 1.5rem 2rem;
    }

    .sp-logo-link {
        width: 160px;
        min-height: 56px;
        padding: .6rem;
    }
}

@media (max-width: 575.98px) {
    .sp-section {
        padding: 2.5rem 0 3rem;
    }

    .sp-logos {
        gap: 1.25rem 1.5rem;
    }

    .sp-logo-link {
        width: 140px;
        min-height: 50px;
        padding: .5rem;
    }
}
/* ═══════════════════════════════════════════════════════════════
   45. FOOTER SOCIAL MEDIA  (footer-social*)
═══════════════════════════════════════════════════════════════ */

.footer-social {
    display: flex;
    gap: .6rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

.footer-social__link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .85rem .38rem .65rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.70);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

    .footer-social__link:hover {
        background: rgba(255,255,255,.15);
        border-color: rgba(255,255,255,.35);
        color: var(--aegir-white);
        transform: translateY(-2px);
        text-decoration: none;
    }
    /* Facebook – auf Hover Markenfarbe */
    .footer-social__link:nth-child(1):hover {
        background: rgba(24,119,242,.35);
        border-color: rgba(24,119,242,.6);
    }
    /* Instagram – auf Hover Gradient-Markenfarbe */
    .footer-social__link:nth-child(2):hover {
        background: rgba(193,53,132,.30);
        border-color: rgba(193,53,132,.55);
    }

.footer-social__icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}
/* ===============================================================
   RESPONSIVE BREAKPOINTS - zusammengefasst
   =============================================================== */

@media (max-width: 1199.98px) {
    .wb-table-head,
    .wb-row {
        grid-template-columns: 145px 1fr 120px 190px 150px;
    }

    .gd-grid {
        columns: 3;
    }

    .ga-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
    }
}

@media (max-width: 1099.98px) {
    .vh-grid {
        grid-template-columns: 1fr 220px;
    }

    .wbh-facts {
        grid-template-columns: 1fr 1fr;
    }

        .wbh-facts .wbh-fact:last-child {
            grid-column: 1 / -1;
        }
}

@media (max-width: 991.98px) {
    /* Legal */
    .legal-content-grid {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .legal-sidebar .sidebar-card {
            flex: 1 1 240px;
        }

    .legal-rights-grid {
        grid-template-columns: repeat(2,1fr);
    }
    /* Sitemap */
    .sitemap-grid {
        grid-template-columns: repeat(2,1fr);
    }
    /* Kontakt */
    .k-layout {
        grid-template-columns: 1fr;
    }

    .k-info {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .k-map {
        grid-column: 1/-1;
    }
    /* Web-Club-Untermenü Desktop-Flyout: deaktivieren (bereits in ≤767 per static) */

    .kurs-filterbar__inner {
        grid-template-columns: 1fr 1fr;
    }

    .kurs-filterbar__field--action {
        grid-column: 1 / -1;
    }

    .anm-kursinfo__row {
        grid-template-columns: 180px 1fr;
    }
    /* Schiedsrichter-Spalte ausblenden */
    .wb-table-head,
    .wb-row {
        grid-template-columns: 140px 1fr 110px 1fr;
    }

    .wb-th--sr,
    .wb-td--sr {
        display: none;
    }

    .wb-statsbar .wb-stats {
        justify-content: center;
    }

    .pers-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 1.25rem;
    }

    .news-layout {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .news-sidebar__box {
        flex: 1;
        min-width: 240px;
    }

    .nd-layout {
        grid-template-columns: 1fr;
    }

    .nd-sidebar {
        position: static;
    }

    .tz-table-head,
    .tz-row {
        grid-template-columns: 130px 145px 1fr 185px;
    }

    .tz-th--anm,
    .tz-td--anm {
        display: none;
    }

    .gd-grid {
        columns: 3;
    }

    .ga-jahre__chip-year {
        font-size: .88rem;
    }

    .vh-grid {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        display: none;
    }
    /* sidebar wird unter main */
    .vh-era {
        grid-template-columns: 110px 1fr;
    }

        .vh-era::after {
            left: 126px;
        }
    /* sidebar unter main */
    .wbh-foto--rechts {
        float: none;
        width: 100%;
        margin: 0;
    }

    .wbh-facts {
        grid-template-columns: 1fr 1fr;
    }

    .ks-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    /* Navbar – mobil */
    .club-navbar {
        height: auto;
        min-height: var(--navbar-height);
    }

    #navbarContent {
        background: var(--aegir-primary-deeper);
        border-top: 1px solid rgba(255,255,255,.10);
        padding: .75rem 1rem 1.25rem;
        margin-top: .25rem;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 10px 28px rgba(2,56,89,.45);
    }

    .navbar-nav .nav-link {
        padding: .6rem .8rem !important;
        border-radius: 8px;
        font-size: 1rem;
        color: rgba(255,255,255,.88) !important;
    }

        .navbar-nav .nav-link:hover {
            background: rgba(255,255,255,.12);
            color: var(--aegir-white) !important;
        }

    .dropdown-menu-club {
        position: static !important;
        border: none;
        border-left: 3px solid var(--aegir-accent);
        border-radius: 0 0 8px 8px;
        box-shadow: none;
        background: rgba(255,255,255,.05);
        margin: 0 0 .3rem 1rem;
        padding: .2rem 0;
    }

    .theme-toggle-wrapper {
        margin-top: .6rem;
        width: 100%;
        justify-content: center;
        border-radius: 10px;
        padding: .55rem;
    }
    /* Web-Club-Untermenü – inline aufklappbar via Blazor-Toggle
       Standard: versteckt. Mit .nav-submenu__menu--show: sichtbar. */
    .nav-submenu__menu {
        position: static !important;
        border: none !important;
        border-left: 3px solid var(--aegir-secondary) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: rgba(255,255,255,.05) !important;
        margin: .25rem 0 .4rem 1.4rem !important;
        padding: .25rem 0 !important;
        display: none !important; /* standardmäßig versteckt */
    }

    .nav-submenu__menu--show {
        display: block !important;
    }
    /* per Blazor-Toggle */
    /* Toggle-Button: Reset Bootstrap-Button-Styles damit er wie ein dropdown-item aussieht */
    .nav-submenu__toggle {
        justify-content: space-between;
        width: 100%;
        background: none !important;
        border: none !important;
        text-align: left;
        color: rgba(255,255,255,.88) !important;
        padding: .45rem .85rem !important;
        border-radius: 8px;
        cursor: pointer;
    }

        .nav-submenu__toggle:hover {
            background: rgba(255,255,255,.12) !important;
        }
    /* Chevron-Icon: auf Mobil dreht sich das Icon wenn offen */
    .nav-submenu--offen .nav-submenu__chevron {
        transform: rotate(90deg);
        color: var(--aegir-accent);
    }
    /* Legal */
    .legal-body {
        padding: 2rem 0 3rem;
    }

    .legal-card {
        padding: 1.2rem;
    }

    .legal-info-row {
        grid-template-columns: 1fr;
        gap: .2rem;
        padding: .6rem 0;
    }

    .legal-info-label {
        font-size: .75rem;
    }

    .cookie-row {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

        .cookie-row span:last-child {
            grid-column: 1/-1;
            opacity: .7;
        }
    /* Kontakt */
    .k-body {
        padding: 2rem 0 3.5rem;
    }

    .k-form-card__head {
        padding: 1.4rem 1.3rem 1rem;
    }

    .k-form {
        padding: 1.3rem 1.3rem 1.8rem;
        gap: 1rem;
    }

    .k-row,
    .k-row--two,
    .k-row--anrede {
        grid-template-columns: 1fr !important;
    }

    .k-row--submit {
        flex-direction: column;
        align-items: stretch;
    }

    .k-btn-submit.rz-button {
        min-width: unset;
        width: 100%;
    }

    .k-info {
        grid-template-columns: 1fr;
    }
    /* Spielplan */
    :global(.col-hide-sm) {
        display: none !important;
    }

    .begegnung-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
    }

    .spielplan-filter {
        top: 0;
    }

    .kurs-filterbar {
        position: static;
    }

    .kurs-filterbar__inner {
        grid-template-columns: 1fr;
    }

    .kurs-filterbar__field--action {
        grid-column: auto;
    }

    .kurs-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kurs-plaetze {
        align-self: flex-start;
    }

    .kurs-details__row {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .kurs-details__label {
        font-size: .75rem;
    }

    .kurs-card__body {
        padding: 0 1.2rem;
    }

    .kurs-card__footer {
        padding: 1rem 1.2rem;
        gap: .6rem;
    }

    .kurs-card__btn.rz-button {
        width: 100%;
        justify-content: center !important;
    }

    .kurs-details__value--preis {
        flex-direction: column;
        gap: .4rem;
    }

    .anm-section__head {
        padding: 1rem 1.2rem;
    }

    .anm-fields {
        padding: 1.2rem;
        gap: .9rem;
    }

    .anm-kursinfo {
        padding: 1rem 1.2rem;
    }

    .anm-section--final {
        padding: 1.2rem;
    }

    .anm-row,
    .anm-row--anrede {
        grid-template-columns: 1fr !important;
    }

    .anm-row--single {
        max-width: 100%;
    }

    .anm-kursinfo__row {
        grid-template-columns: 1fr;
        gap: .1rem;
        padding: .5rem 0;
    }

        .anm-kursinfo__row dt {
            font-size: .72rem;
        }

    .anm-submit-row {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .anm-btn-submit.rz-button {
        width: 100%;
        justify-content: center !important;
    }

    .anm-btn-back {
        justify-content: center;
    }

    .anm-success {
        padding: 2.5rem 1.2rem;
    }

    .anm-success__title {
        font-size: 1.7rem;
    }

    .anm-success__actions {
        flex-direction: column;
    }

        .anm-success__actions .btn-aegir,
        .anm-success__actions .btn-aegir-outline {
            width: 100%;
            text-align: center;
        }

    .wk-header__top {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .wk-saison-switcher {
        align-self: stretch;
        justify-content: space-between;
    }

    .wk-saison-dd {
        min-width: 160px;
    }

    .wk-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .wk-event__date {
        min-width: 58px;
    }

    .wk-event__day {
        font-size: 1.8rem;
    }

    .wk-event__body {
        padding: .75rem 1rem;
    }

    .wk-event__name {
        font-size: 1rem;
    }

    .sai-card {
        padding: .9rem 1.1rem;
    }

    .sai-card__title {
        font-size: 1.05rem;
    }
    /* Spielort-Spalte ausblenden, Tabellenkopf verstecken */
    .wb-table-head {
        display: none;
    }

    .wb-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        border-left-width: 4px;
        border-bottom: 2px solid rgba(3,120,166,.10);
        padding: 0;
    }

    .wb-td {
        padding: .6rem 1rem;
        border-right: none;
        border-bottom: 1px dashed rgba(3,120,166,.08);
    }

        .wb-td:last-child {
            border-bottom: none;
        }

    .wb-td--sr {
        display: none;
    }

    .wb-td--ort {
        /*display: none;*/
    }
    /* Datum-Zeile: horizontal */
    .wb-td--datum {
        background: rgba(3,120,166,.04);
    }

    .wb-datum {
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        flex-wrap: wrap;
    }

    .wb-datum__wd {
        order: 1;
    }

    .wb-datum__num {
        order: 2;
        font-size: 1rem;
    }

    .wb-datum__zeit {
        order: 3;
    }

    .wb-pill {
        order: 4;
        margin-top: 0;
    }
    /* Paarung */
    .wb-td--paarung {
        padding: .75rem 1rem;
    }

    .wb-team {
        font-size: .95rem;
    }
    /* Ergebnis */
    .wb-td--erg {
        justify-content: flex-start;
    }

    .wb-ergebnis {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        padding: .3rem .8rem;
    }
    /* Stats */
    .wb-stat {
        min-width: 60px;
        padding: .4rem;
    }

    .wb-stat__val {
        font-size: 1.3rem;
    }

    .wb-stat__lbl {
        font-size: .60rem;
    }

    .news-card__hero-img-wrap {
        height: 220px;
    }

    .news-card__hero-body {
        padding: 1.1rem 1.2rem 1.4rem;
    }

    .news-card__titel {
        font-size: 1.25rem;
    }

    .news-card__thumb-wrap,
    .news-card__thumb-placeholder {
        width: 90px;
        min-width: 90px;
    }

    .nd-article {
        padding: 1.4rem 1.2rem;
    }

    .nd-dropcap {
        font-size: 3em;
    }

    .nd-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .na-item__teaser {
        display: none;
    }

    .tz-header__row {
        flex-direction: column;
        align-items: flex-start;
        gap: .9rem;
    }

    .tz-pdf-btn {
        align-self: flex-start;
    }
    /* Tabelle wird zur Karten-Liste */
    .tz-table-head {
        display: none;
    }

    .tz-row {
        grid-template-columns: 1fr;
        padding: .75rem 1rem;
        gap: .35rem;
        border-bottom: 2px solid rgba(3,120,166,.08);
    }

    .tz-td {
        padding: 0;
        border-right: none;
    }
    /* Mobile Labels via ::before */
    .tz-td--zeit::before {
        content: "Uhrzeit: ";
        font-weight: 700;
        font-size: .72rem;
        color: var(--aegir-text-muted);
        margin-right: .25rem;
    }

    .tz-td--zg::before {
        content: "Zielgruppe: ";
        font-weight: 700;
        font-size: .72rem;
        color: var(--aegir-text-muted);
        margin-right: .25rem;
    }

    .tz-td--bad::before {
        content: "Bad: ";
        font-weight: 700;
        font-size: .72rem;
        color: var(--aegir-text-muted);
        margin-right: .25rem;
    }

    .tz-gruppe__head {
        padding: .85rem 1rem;
        gap: .75rem;
    }

    .tz-gruppe__head-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .tz-gruppe__name {
        font-size: 1.05rem;
    }

    .gd-grid {
        columns: 2;
    }

    .ga-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .ga-jahre {
        padding: .3rem .35rem;
    }

    .ga-jahre__chip {
        min-width: 46px;
        padding: .25rem .45rem;
    }
    /* Lightbox mobil */
    .lb-arrow {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

        .lb-arrow .rz-icon {
            font-size: 1.3rem !important;
        }

    .lb-strip__thumb {
        width: 44px;
        height: 30px;
    }

    .lb-caption {
        font-size: .78rem;
        padding: .4rem .7rem;
    }

    .lb-counter {
        font-size: .72rem;
    }

    .eh-brief__body {
        padding: 1.2rem;
    }

    .eh-brief__titel {
        font-size: 1.1rem;
    }

    .eh-row--plz-ort-staat {
        grid-template-columns: 1fr 1fr !important;
    }

        .eh-row--plz-ort-staat .k-field:last-child {
            grid-column: 1 / -1;
        }

    .eh-checks {
        flex-direction: column !important;
    }

    .vh-era {
        grid-template-columns: 90px 1fr;
        gap: 0 1rem;
    }

        .vh-era::after {
            left: 104px;
        }

    .vh-era__year {
        font-size: 1.1rem;
    }

    .vh-era__label {
        font-size: .62rem;
    }

    .vh-event {
        padding-left: 1.5rem;
    }

    .vh-motto__claim {
        font-size: 1.15rem;
    }

    .wbh-kapitel__body,
    .wbh-text-block {
        padding: 1.1rem 1.2rem;
    }

    .wbh-kapitel__head {
        padding: .9rem 1.2rem;
    }

    .wbh-foto-duo {
        grid-template-columns: 1fr;
    }

    .wbh-facts {
        grid-template-columns: 1fr;
    }

        .wbh-facts .wbh-fact:last-child {
            grid-column: auto;
        }

    .wbh-schluss {
        flex-direction: column;
        gap: .75rem;
        padding: 1.1rem 1.2rem;
    }

    .wbh-zitat {
        padding: 1.1rem 1.3rem;
    }

    .bs-highlight {
        flex-direction: column;
        gap: .6rem;
    }

    .bs-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.2rem;
    }

    .bs-event {
        padding: .85rem;
    }

    .tb-item {
        padding: .9rem 1rem 1rem;
    }

        .tb-item:hover {
            transform: none;
        }

    .tb-item__titel {
        font-size: .95rem;
    }

    .aq-benefits {
        grid-template-columns: 1fr;
    }

    .aq-kurse {
        grid-template-columns: 1fr;
    }

    .aq-schnupper {
        flex-direction: column;
        align-items: flex-start;
        gap: .65rem;
        padding: 1rem 1.2rem;
    }

    .sp-hero__img {
        height: 240px;
    }

    .sp-steps::before {
        left: 15px;
    }

    .sp-step__num {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: .95rem;
    }

    .sp-kontakt__actions {
        flex-direction: column;
    }

    .sp-kontakt__btn {
        justify-content: center;
    }
    /* Auf Mobil: Header noch kompakter */
    .rek-header .legal-header__inner {
        padding: .8rem 0 .75rem;
    }

    .rek-header .legal-title {
        font-size: 1.3rem;
    }
    /* IFrame: Mindesthöhe bei schmalen Screens */
    .rek-iframe,
    .rek-wrap {
        min-height: 500px;
    }

    .lk-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .lk-section:hover {
        transform: none;
    }

    .lk-link {
        padding: .6rem 1rem;
    }

        .lk-link:hover {
            padding-left: 1.4rem;
        }

    .lk-section__titel {
        font-size: .92rem;
    }

    .lt-foto-grid {
        grid-template-columns: 1fr;
    }

    .lt-meister {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    /* Navbar */
    .club-brand {
        font-size: 1.2rem;
    }

        .club-brand .brand-icon {
            font-size: 1.4rem;
        }
    /* Footer */
    .site-footer {
        padding-top: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-copyright {
        white-space: normal;
    }

    .footer-legal {
        gap: .25rem 1rem;
    }
    /* Hero */
    .hero-carousel,
    .hero-slide {
        height: 100svh;
        margin-top: 0;
    }

    .hero-overlay {
        background: rgba(2,56,89,.80);
    }

    .hero-content {
        margin-left: 0;
        padding: 1.2rem;
        text-align: center;
        max-width: 100%;
    }

    .hero-badge {
        font-size: .70rem;
    }

    .btn-hero {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .scroll-hint {
        display: none;
    }
    /* Sport-Karten */
    .sport-card {
        padding: 0 !important;
    }

    .sport-emoji {
        font-size: 2.5rem;
    }

    .sport-card__title {
        font-size: 1.5rem;
    }
    /* CTA */
    .cta-section .btn-cta,
    .cta-section .btn-cta-outline {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: .4rem auto !important;
    }
    /* Legal */
    .legal-rights-grid {
        grid-template-columns: 1fr 1fr;
    }

    .legal-sidebar {
        flex-direction: column;
    }
    /* Sitemap */
    .sitemap-grid {
        grid-template-columns: 1fr;
    }
    /* Kontakt */
    .k-header__title {
        font-size: 2rem;
    }

    .k-form-card__head h2 {
        font-size: 1.4rem;
    }
    /* Spielplan */
    :global(.col-hide-xs) {
        display: none !important;
    }

    .kurs-card__header {
        padding: 1.1rem 1.2rem;
    }

    .kurs-card__name {
        font-size: 1.2rem;
    }

    .anm-section__title {
        font-size: 1.1rem;
    }

    .anm-kursinfo__row--preis dd {
        flex-direction: column;
        gap: .3rem;
    }

    .wk-event {
        flex-direction: column;
        border-left: none;
        border-top: 4px solid var(--aegir-primary);
    }

    .wk-event--jugend {
        border-top-color: var(--aegir-secondary);
    }

    .wk-event--masters {
        border-top-color: var(--aegir-warning);
    }

    .wk-event--alle {
        border-top-color: var(--aegir-accent);
    }

    .wk-event__date {
        flex-direction: row;
        align-items: center;
        min-width: auto;
        padding: .6rem 1rem;
        border-right: none;
        border-bottom: 1px solid rgba(3,120,166,.10);
        gap: .6rem;
        justify-content: flex-start;
    }

    .wk-event__day {
        font-size: 1.5rem;
    }

    .wk-event__month {
        font-size: .75rem;
    }

    .wk-event__done,
    .wk-event__upcoming {
        margin-top: 0;
        margin-left: auto;
    }

    .wk-event__docs {
        flex-direction: column;
    }

    .wk-doc-link {
        width: 100%;
        justify-content: center;
    }

    .wk-month-label {
        font-size: .85rem;
    }

    .sai-card__icon-wrap {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .wb-ergebnis {
        flex-direction: column;
        width: 100%;
    }

    .wb-datum {
        gap: .4rem;
    }

    .pers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .pers-card__body {
        padding: .85rem 1rem 1rem;
    }

    .pers-card__name {
        font-size: 1.1rem;
    }

    .pers-card__position {
        font-size: .66rem;
    }

    .news-card--compact {
        border-left-width: 3px;
    }

    .news-card__thumb-wrap,
    .news-card__thumb-placeholder {
        display: none;
    }

    .nd-article {
        padding: 1.1rem 1rem;
    }

    .na-item {
        padding: .65rem 1rem;
    }

    .na-year-head {
        padding: .8rem 1rem;
    }

    .tz-gruppe__head-badge {
        display: none;
    }

    .tz-pdf-btn {
        font-size: .82rem;
        padding: .5rem 1rem;
    }

    .gd-grid {
        columns: 2;
        column-gap: .4rem;
    }

    .gd-item {
        margin-bottom: .4rem;
    }

    .ga-grid {
        grid-template-columns: 1fr;
    }

    .ga-jahre__chip-count {
        display: none;
    }

    .eh-row--plz-ort-staat {
        grid-template-columns: 1fr !important;
    }

        .eh-row--plz-ort-staat .k-field:last-child {
            grid-column: auto;
        }
    /* Auf kleinen Screens: kein Grid, alles linear */
    .vh-era {
        grid-template-columns: 1fr;
    }

        .vh-era::after {
            display: none;
        }

    .vh-era__badge {
        align-items: flex-start;
        padding: 1rem 0 .5rem;
        border-bottom: 2px solid rgba(3,120,166,.15);
        margin-bottom: .5rem;
    }

        .vh-era__badge .vh-era__year {
            font-size: 1.25rem;
        }

    .vh-event__dot {
        display: none;
    }

    .vh-event {
        padding-left: 0;
    }

        .vh-event + .vh-event {
            border-top: 1px solid rgba(3,120,166,.08);
        }

    .wbh-foto--breit .wbh-foto__img-wrap {
        aspect-ratio: 4/3;
    }

    .wbh-foto__badge {
        font-size: .68rem;
    }

    .tb-item__head {
        gap: .5rem;
    }

    .tb-item__tag {
        font-size: .62rem;
        padding: .15rem .5rem;
    }

    .aq-geraete {
        gap: .45rem;
    }

    .aq-geraet {
        font-size: .82rem;
        padding: .35rem .75rem;
    }

    .sp-hero__img {
        height: 200px;
    }

    .sp-hero__badge {
        font-size: .78rem;
        padding: .3rem .7rem;
    }

    .ks-highlights {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
    }

    .ks-highlight {
        padding: .9rem .7rem;
    }

    .ks-highlight__icon {
        width: 40px;
        height: 40px;
    }

        .ks-highlight__icon .rz-icon {
            font-size: 1.25rem !important;
        }

    .lt-foto-grid .wbh-foto__img-wrap {
        aspect-ratio: 16/9;
    }

    .cc-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .cc-dialog {
        border-radius: 18px 18px 0 0;
        max-width: 100%;
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .cc-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cc-btn {
        text-align: center;
        justify-content: center;
    }

    .cc-link {
        text-align: center;
    }
}