/* Google Fonts laden: Roboto für Fließtext, Poppins für Überschriften */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Poppins:wght@400;600;800&display=swap');

/* ============================================================
   DESIGN TOKENS  –  alle zentralen Werte an einem Ort
   Änderungen hier wirken sich auf die gesamte Seite aus.
   ============================================================ */
:root {
    /* Vereinsfarben: Rot in zwei Helligkeitsstufen */
    --red-600: #d00000;            /* Dunkelrot – Hauptakzent (Buttons, Links, Linien) */
    --red-500: #e63030;            /* Helleres Rot – Hover-Zustand */
    --red-100: rgba(208, 0, 0, 0.08); /* Sehr helles Rot – Hover-Hintergrund im Dropdown */

    /* Rückwärtskompatible Aliase für ältere Klassen */
    --accent-red: var(--red-500);
    --primary-red: var(--red-600);

    /* Helle Hintergrundstufen (Seite → Karte → gedimmt) */
    --bg-page:    #faf9f7;  /* Seitenhintergrund: warmes Weiß */
    --bg-surface: #ffffff;  /* Kartenoberfläche: reines Weiß */
    --bg-muted:   #f2f0ed;  /* Abgedimmter Hintergrund z.B. Tabellen-Zebrastreifen */

    /* Bernstein/Orange – zweiter Akzent (z.B. "Kontakt"-Button im Hero) */
    --amber-500: #f59e0b;
    --amber-100: rgba(245, 158, 11, 0.10);

    /* Textfarben von dunkel bis hell */
    --text-primary:   #1c1917;  /* Haupttext: fast schwarz */
    --text-secondary: #57534e;  /* Sekundärtext: mittleres Braun */
    --text-tertiary:  #a8a29e;  /* Hinweistext: helles Grau */
    --text-inverse:   #fafaf8;  /* Heller Text auf dunklem Grund (z.B. Footer) */

    /* Glassmorphism-Effekt: halbtransparentes Glas mit Blur-Hintergrund */
    --glass-bg:     rgba(255, 255, 255, 0.72); /* Halbtransparentes Weiß */
    --glass-border: rgba(255, 255, 255, 0.52); /* Heller Rand, wirkt wie Glasscheibe */
    --glass-blur:   16px;                      /* Stärke des Hintergrund-Unschärfeeffekts */

    /* Schatten in vier Intensitätsstufen (warme Farbtöne statt reinem Schwarz) */
    --shadow-xs:  0 1px 3px rgba(28, 25, 23, 0.07);   /* kaum sichtbar */
    --shadow-sm:  0 4px 12px rgba(28, 25, 23, 0.08);  /* Navigation beim Scrollen */
    --shadow-md:  0 8px 24px rgba(28, 25, 23, 0.11);  /* Karten */
    --shadow-lg:  0 16px 48px rgba(28, 25, 23, 0.14); /* große Elemente */
    --shadow-red: 0 8px 24px rgba(208, 0, 0, 0.20);   /* roter Schatten für Hover-Effekte */

    /* Abrundungsradien von leicht bis vollrund */
    --radius-sm:   10px;
    --radius-md:   18px;
    --radius-lg:   28px;
    --radius-xl:   40px;
    --radius-full: 9999px; /* vollständig rund – für Pills/Tags */

    /* Schriftarten */
    --font-heading: 'Poppins', sans-serif; /* Überschriften, Buttons, Nav */
    --font-body:    'Roboto', sans-serif;  /* Fließtext */

    /* Übergangskurve: Material-Design-ähnliches "ease" für natürliche Animationen */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* sofortige Reaktion (Hover) */
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Standard */
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* weiche Einblendungen */

    --max-width:  1200px; /* maximale Inhaltsbreite */
    --nav-height: 64px;   /* Höhe der sticky Navigation – wichtig für Padding-Berechnungen */
}

/* ============================================================
   RESET  –  Browser-Standardwerte nivellieren
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box; /* Padding/Border werden in die Breite eingerechnet */
    margin: 0;
    padding: 0;
}

/* ============================================================
   BASE  –  globale Grundstile für html und body
   ============================================================ */
html {
    scroll-behavior: smooth; /* sanftes Scrollen bei Ankerlinks (#id)  */
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-page);
    /* Subtile dekorative Farbverläufe im Hintergrund:
       oben-links leicht rot, unten-rechts leicht bernsteinfarben */
    background-image:
        radial-gradient(ellipse 80% 50% at 10% -10%, rgba(208, 0, 0, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 110%, rgba(245, 158, 11, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(208, 0, 0, 0.03) 0%, transparent 70%);
    background-attachment: fixed; /* Hintergrund bewegt sich nicht beim Scrollen (Parallax-Effekt) */
    color: var(--text-primary);
    line-height: 1.6;
}

/* Auf Mobilgeräten verursacht fixed attachment Performance-Probleme → deaktivieren */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

/* ============================================================
   TYPOGRAPHY  –  Überschriften und Absätze
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.2;
}

/* clamp(min, bevorzugt, max): skaliert die Schrift je nach Viewport-Breite */
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 600; }

p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

a {
    color: var(--red-600);
    text-decoration: none;
}

ul { list-style: none; }

/* ============================================================
   LAYOUT  –  zentrierter Inhaltsbereich
   ============================================================ */

/* .container: begrenzt Breite auf max-width, horizontal zentriert */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* main: Hauptinhaltsbereich der Unterseiten */
main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px 24px 64px;
}

/* h2 in main-Bereichen bekommt eine rote Unterstrich-Dekoration */
main h2 {
    margin-bottom: 28px;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

/* rote Linie unter h2-Überschriften (Pseudo-Element statt echtem Border) */
main h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--red-600);
    border-radius: var(--radius-full);
    margin-top: 6px;
}

main p {
    margin-bottom: 16px;
}

/* Tablet */
@media (max-width: 1024px) {
    main {
        padding: 36px 20px 48px;
    }
}

/* Mobil */
@media (max-width: 640px) {
    main {
        padding: 24px 16px 36px;
    }
    main h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
}

/* ============================================================
   HERO  –  Startseite (index.html), voller Viewport-Bereich
   ============================================================ */

/* Volle Höhe des sichtbaren Bereichs, Inhalt zentriert */
.hero {
    min-height: 100svh; /* svh = "small viewport height", mobil-freundlicher als vh */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-height) + 40px) 24px 80px; /* Oberes Padding berücksichtigt sticky Nav */
    position: relative;
}

/* Hero auf mobilen Geräten */
@media (max-width: 768px) {
    .hero {
        padding: calc(var(--nav-height) + 20px) 16px 48px;
        min-height: 80svh;
    }
    .hero__tagline {
        max-width: 100%;
        padding: 0 8px;
    }
    .hero__cta-group {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 300px;
    }
    .hero__cta {
        width: 100%;
        justify-content: center;
    }
}

/* Vereinslogo im Hero mit schwebender Animation */
.hero__logo {
    width: clamp(100px, 14vw, 160px);
    height: auto;
    animation: float 4s ease-in-out infinite; /* @keyframes float weiter unten */
    margin-bottom: 32px;
    filter: drop-shadow(0 8px 24px rgba(208, 0, 0, 0.15));
}

/* Kleiner roter Text über dem Haupttitel ("ESV LOKOMOTIVE SAALFELD") */
.hero__eyebrow {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--red-600);
    margin-bottom: 16px;
    opacity: 0.9;
}

/* Haupt-Überschrift im Hero-Bereich */
.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: 800px;
}

/* Farbiges Wort im Titel (z.B. "Saalfeld" in Rot) */
.hero__title span {
    color: var(--red-600);
}

/* Untertitel/Slogan unter dem Haupttitel */
.hero__tagline {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 48px;
    line-height: 1.7;
}

/* Gruppe der Call-to-Action-Buttons im Hero */
.hero__cta-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;     /* umbrechend auf kleinen Screens */
    justify-content: center;
}

/* Basis-Stil für alle Hero-Buttons */
.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-full); /* Pill-Form */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-fast);
}

/* Primär-Button: roter Hintergrund ("Zum Verein") */
.hero__cta--primary {
    background: var(--red-600);
    color: var(--text-inverse);
    box-shadow: var(--shadow-red);
}

.hero__cta--primary:hover {
    background: var(--red-500);
    transform: translateY(-3px); /* leichtes Anheben beim Hover */
    box-shadow: 0 12px 32px rgba(208, 0, 0, 0.30);
}

/* Sekundär-Button: Glasmorphismus-Stil (halbtransparent) */
.hero__cta--secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur)); /* Safari-Präfix */
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.hero__cta--secondary:hover {
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Amber-Button: orangegelber Hintergrund ("Kontakt") */
.hero__cta--amber {
    background: var(--amber-500);
    color: #fff;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.28);
}

.hero__cta--amber:hover {
    background: #d97706;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.38);
}

/* ============================================================
   SECTION CARDS  –  Karten-Grid unterhalb des Heroes (index.html)
   Zeigt die drei Abteilungen: Tischtennis, Schwimmen, Kegeln
   ============================================================ */

/* Responsives Grid: auto-fit füllt so viele Spalten wie möglich, min. 280px */
.section-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    padding: 64px 24px;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Tablet: etwas kompakter */
@media (max-width: 1024px) {
    .section-cards {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
        padding: 48px 20px;
    }
}

/* Mobil: Karten untereinander, volle Breite */
@media (max-width: 640px) {
    .section-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 32px 16px;
    }
}

/* Vorschaubild oben in der Karte */
.section-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Bild wird zugeschnitten, nicht verzerrt */
    display: block;
}

/* Tablet: niedrigere Bilder */
@media (max-width: 1024px) {
    .section-card__img {
        height: 180px;
    }
}

/* Mobil: noch niedriger */
@media (max-width: 640px) {
    .section-card__img {
        height: 160px;
    }
}

/* Einzelne Abteilungskarte – ist ein <a>-Element (klickbar) */
.section-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}

/* Karte hebt sich beim Hover an und bekommt roten Schatten */
.section-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-red);
}

/* Textbereich der Karte */
.section-card__body {
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    flex: 1; /* nimmt verbleibenden Platz ein → gleiche Kartenhöhen */
}

/* Emoji-Icon über dem Kartentitel */
.section-card__icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

/* Kartenüberschrift (z.B. "Tischtennis") */
.section-card__title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

/* Kurzbeschreibung unter dem Kartentitel */
.section-card__desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.65;
    flex: 1;          /* schiebt den Link nach unten */
    margin-bottom: 20px;
}

/* "Mehr erfahren →"-Link am unteren Ende der Karte */
.section-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--red-600);
    transition: gap var(--transition-fast), color var(--transition-fast);
}

/* Pfeil rückt beim Hover etwas nach rechts */
.section-card:hover .section-card__link {
    gap: 10px;
    color: var(--red-500);
}

/* ============================================================
   PAGE HEADER  –  Seitenkopf der Unterseiten
   (früher diagonal mit clip-path, jetzt flacher Gradient)
   ============================================================ */
header {
    background: linear-gradient(135deg, var(--bg-page) 0%, var(--bg-muted) 100%);
    padding: 80px 24px 64px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(208, 0, 0, 0.12);
}

/* Logo + Text nebeneinander im Header */
.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap; /* umbrechend auf mobil */
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Text im Header ist auf Desktop linksbündig, auf mobil zentriert */
.header-text {
    text-align: left;
}

@media (max-width: 600px) {
    .header-text {
        text-align: center;
    }
}

/* Vereinslogo im Seitenkopf */
header .logo,
header img.logo {
    width: clamp(80px, 10vw, 120px);
    height: auto;
    filter: none;
    transition: transform var(--transition-base);
}

/* Logo dreht sich leicht beim Hover */
header img.logo:hover {
    transform: scale(1.06) rotate(-2deg);
}

header h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Kleiner roter Balken ganz oben im Header (dekorativ) */
header::before {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    background: var(--red-600);
    border-radius: var(--radius-full);
    margin: 0 auto 32px;
}

/* ============================================================
   NAVIGATION  –  sticky Nav-Leiste oben auf jeder Seite
   ============================================================ */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-surface);
    border-bottom: 1px solid rgba(208, 0, 0, 0.15);
    padding: 0 24px;
    position: sticky;  /* bleibt beim Scrollen oben sichtbar */
    top: 0;
    z-index: 1000;     /* liegt über dem restlichen Inhalt */
    height: var(--nav-height);
    box-shadow: var(--shadow-xs);
    transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Wenn die Seite gescrollt wird, schaltet nav.js diese Klasse ein →
   Nav bekommt Glassmorphismus-Effekt statt weißem Hintergrund */
nav.nav--scrolled {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

/* Liste der Nav-Links (enthält <a>-Elemente und .dropdown-Blöcke) */
.nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* Nav-Links: Unterstrich wächst von links beim Hover (animated underline) */
nav a {
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    /* Trick: gradient als Hintergrundbild, Breite startet bei 0% und geht auf 100% */
    background-image: linear-gradient(var(--red-600), var(--red-600));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%; /* Linie am unteren Rand */
    transition: color var(--transition-base), background-size var(--transition-base);
}

/* Hover und aktiver Link: Linie erscheint vollständig */
nav a:hover,
nav a.active {
    color: var(--red-600);
    background-size: 100% 2px;
}

/* ============================================================
   HAMBURGER MENU  –  nur auf mobil sichtbar
   ============================================================ */

/* Drei-Striche-Button (auf Desktop versteckt, per Media Query eingeblendet) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 36px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1100; /* liegt über dem Nav-Overlay */
    margin-left: auto;
}

/* Die drei waagerechten Striche des Hamburger-Icons */
.menu-toggle span {
    width: 28px;
    height: 2.5px;
    background: var(--text-primary);
    border-radius: var(--radius-full);
    transition: all 0.3s var(--ease);
    transform-origin: center;
}

/* Wenn das Menü offen ist (.open-Klasse per JS gesetzt):
   Striche 1 und 3 drehen sich zum X, Strich 2 blendet aus */
.menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* ============================================================
   MOBILE NAV OVERLAY  –  dunkler Hintergrund hinter dem Menü
   ============================================================ */

/* Halbtransparentes Overlay, das beim Öffnen des Menüs erscheint */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 990; /* unter .nav-links (1050), über normalem Inhalt */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* .active-Klasse wird per JS beim Öffnen des Menüs hinzugefügt */
.nav-overlay.active {
    display: block;
    opacity: 1;
}

/* ---- Mobile Styles ab 768px -------------------------------- */
@media (max-width: 768px) {
    nav {
        justify-content: flex-end;
        padding: 10px 20px;
    }

    /* Hamburger-Button einblenden */
    .menu-toggle {
        display: flex;
    }

    /* Nav-Links werden zu einem Vollbild-Overlay-Menü */
    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;  /* Links starten OBEN, nie zentriert */
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        /* Dunkler roter Gradient als Menü-Hintergrund */
        background: linear-gradient(160deg, rgba(28, 25, 23, 0.97) 0%, rgba(50, 8, 8, 0.97) 100%);
        padding: 90px 0 40px;  /* Oben Platz für die Navbar */
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;         /* keine Klicks wenn versteckt */
        transform: translateY(-20px); /* startet leicht nach oben verschoben */
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
        gap: 0;
        overflow-y: auto;             /* scrollen wenn Inhalt zu lang */
        -webkit-overflow-scrolling: touch;
    }

    /* Wenn JS .active setzt: Menü einblenden und nach unten gleiten */
    .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Links im mobilen Menü: SOFORT sichtbar, keine verzögerte Animation */
    .nav-links.active > a,
    .nav-links.active > .dropdown {
        opacity: 1;
        animation: none;
    }

    /* Links im offenen Menü: weißer Text, kein animated underline */
    .nav-links.active > a,
    .nav-links.active .dropbtn {
        color: var(--text-inverse);
        background-image: none;
    }

    /* Erster Link (Startseite) wird speziell hervorgehoben */
    .nav-links.active > a:first-child {
        background-color: rgba(255, 255, 255, 0.07);
        margin-bottom: 16px;
        font-weight: 800;
        border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .nav-links.active > a:first-child:hover {
        background-color: var(--red-600);
        color: var(--text-inverse);
    }

    /* Rote Linie unter dem ersten Link entfernen */
    .nav-links.active > a:first-child::after {
        display: none !important;
    }

    /* Größere, zentrierte Links im Vollbild-Menü */
    nav a,
    .dropbtn {
        margin: 0;
        text-align: center;
        padding: 10px 32px;
        font-size: 1.15rem;
        letter-spacing: 1px;
        border-radius: var(--radius-sm);
        border-bottom: none;
        border-left: none;
        background-image: none;
    }

    nav .nav-links > a + a,
    nav .nav-links > .dropdown {
        margin-top: 2px;
    }

    /* Trennlinie zwischen den Links (kurzer roter Strich) */
    nav .nav-links > a::after {
        content: '';
        display: block;
        width: 36px;
        height: 2px;
        background: var(--red-600);
        margin: 4px auto 0;
        opacity: 0.3;
        border-radius: var(--radius-full);
        transition: width 0.25s ease, opacity 0.25s ease;
    }

    /* Letzter Link braucht keine Trennlinie */
    nav .nav-links > a:last-child::after {
        display: none;
    }

    nav a:hover,
    nav a.active {
        background-color: rgba(208, 0, 0, 0.18);
        color: var(--red-500);
        background-size: 0;
    }

    /* Trennlinie wird beim Hover breiter */
    nav a:hover::after {
        width: 56px;
        opacity: 0.65;
    }

    /* Dropdown im mobilen Menü: nicht positioniert, sondern inline */
    .dropdown {
        width: auto;
        text-align: center;
    }

    /* Dropdown-Inhalte erscheinen direkt darunter (kein Popup) */
    .dropdown-content {
        position: static;
        box-shadow: none;
        background-color: rgba(208, 0, 0, 0.10);
        border-radius: var(--radius-sm);
        border: none;
        margin-top: 2px;
        padding: 2px 0;
    }

    .dropdown-content a {
        padding: 6px 24px;
        font-size: 0.85rem;
        text-align: center;
        border-radius: var(--radius-sm);
        color: var(--text-inverse);
        border-bottom: none;
        border-left: none;
        background-image: none;
    }

    .dropdown-content a:hover {
        background-color: rgba(208, 0, 0, 0.25);
        color: var(--text-inverse);
    }

    /* Scrolling des Hintergrunds sperren wenn Menü offen ist */
    body.menu-open {
        overflow: hidden;
    }

    .menu-toggle {
        z-index: 1100;
    }
}

/* ============================================================
   DROPDOWN  –  Desktop: Aufklappmenü bei Hover
   Wird für "Tischtennis"-Navigation verwendet
   ============================================================ */

/* .dropdown umhüllt den Button und den ausklappbaren Bereich */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Der klickbare Button des Dropdowns */
.dropbtn {
    background-color: transparent;
    color: var(--text-primary);
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-heading);
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.dropdown:hover .dropbtn {
    color: var(--red-600);
}

/* Das Dropdown-Panel – versteckt bis Hover */
.dropdown-content {
    display: none;
    position: absolute;   /* wird direkt unter dem Button platziert */
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    min-width: 200px;
    box-shadow: var(--shadow-md);
    z-index: 1001;        /* liegt über dem Nav-Inhalt */
    top: calc(100% + 8px);
    left: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Links im Dropdown */
.dropdown-content a {
    color: var(--text-primary);
    padding: 13px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin: 0;
    font-style: normal;
    border-bottom: 1px solid rgba(28, 25, 23, 0.07); /* dünne Trennlinie */
    background-image: none;
    border-radius: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-content a:last-child {
    border-bottom: none; /* letzter Link braucht keine Trennlinie */
}

.dropdown-content a:hover {
    background: var(--red-100); /* heller roter Hover-Hintergrund */
    color: var(--red-600);
    background-size: 0;
}

/* Dropdown beim Hover über .dropdown einblenden */
.dropdown:hover .dropdown-content {
    display: block;
}

/* ============================================================
   TEAM GRID / CARDS  –  tischtennis/mannschaften.html
   Zeigt alle Mannschaften in einem responsiven Grid
   ============================================================ */

/* Responsives Grid mit min. 290px pro Karte */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
    padding: 20px 0;
}

/* Einzelne Mannschaftskarte */
.team-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-red);
}

/* Mannschaftsname (z.B. "Herren I") */
.team-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    word-break: break-word;
}

/* Liga-Bezeichnung in Rot (z.B. "Bezirksliga") */
.team-league {
    color: var(--red-600);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 16px;
    display: block;
}

.team-card a {
    color: var(--red-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.team-card strong {
    color: var(--text-primary);
}

/* ============================================================
   INFO TOGGLE + BOX  –  ausklappbare Zusatzinfos in Karten
   Verwendet in mannschaften.html und kegeln/index.html
   via toggleInfo()-Funktion in nav.js
   ============================================================ */

/* Wrapper um Button + ausklappbaren Bereich */
.info-wrapper {
    position: relative;
    display: block;
    margin-top: 16px;
}

/* Roter "Mehr Infos"-Button */
.info-toggle {
    background: var(--red-600);
    color: var(--text-inverse);
    border: none;
    padding: 10px 26px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 4px 12px rgba(208, 0, 0, 0.22);
}

.info-toggle:hover {
    background: var(--red-500);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(208, 0, 0, 0.30);
}

/* Ausklappbarer Infobereich – standardmäßig unsichtbar (max-height: 0)
   Öffnet sich durch .open-Klasse (JS): max-height animiert auf 1000px */
.info-box {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    margin-top: 14px;
    background: var(--bg-muted);
    color: var(--text-primary);
    padding: 0 16px;
    border-left: 3px solid var(--red-600); /* roter linker Akzentbalken */
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Wenn JS .open setzt: Box wird sichtbar */
.info-box.open {
    max-height: 1000px;
    opacity: 1;
    padding: 16px;
}

/* ============================================================
   HIGHLIGHT BOX  –  hervorgehobene Infobox (replaces alten dunklen #222-Block)
   Verwendet für wichtige Hinweise, Kontaktdaten, Öffnungszeiten
   ============================================================ */
.highlight-box {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--red-600); /* Roter linker Akzentbalken */
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-md);
    padding: 28px 32px;
    margin: 24px 0;
}

/* Text innerhalb der Highlight-Box bleibt dunkel (nicht gedimmt) */
.highlight-box p,
.highlight-box li,
.highlight-box h3 {
    color: var(--text-primary);
}

/* ============================================================
   IMAGES  –  globale Bildstile
   ============================================================ */

/* Alle Bilder und iFrames: nie breiter als ihr Container */
iframe,
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* .info-image: Vollbreite Bilder in Inhaltsbereichen (z.B. Timeline) */
.info-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    object-fit: cover;
}

/* .map-embed: Google Maps iFrame in trainingszeiten.html */
.map-embed {
    width: 100%;
    max-width: 100%;
    height: 450px;
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-md);
}

/* ============================================================
   TABLES  –  Trainingszeiten-Tabellen
   ============================================================ */
table {
    width: 100%;
    border-collapse: separate; /* nötig damit border-radius an der Tabelle wirkt */
    border-spacing: 0;
    margin: 24px 0;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

th,
td {
    padding: 14px 16px;
    text-align: left;
    border: 1px solid rgba(28, 25, 23, 0.07);
}

/* Tabellenkopf: roter Hintergrund mit weißem Text */
th {
    background: var(--red-600);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Zebra-Muster: jede zweite Zeile leicht abgedimmt */
tr:nth-child(even) {
    background: var(--bg-muted);
}

/* ============================================================
   BUTTONS  –  Download-Buttons (kontakt.html, Dokumente-Bereich)
   ============================================================ */

/* Flex-Container für mehrere Buttons nebeneinander */
.download-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap; /* umbrechend wenn kein Platz */
    margin: 24px 0;
}

/* Roter Pill-Button mit Icon für PDF/DOCX-Downloads */
.download-buttons a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red-600);
    color: var(--text-inverse);
    padding: 14px 32px;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-red);
    transition: background var(--transition-fast), transform var(--transition-base), box-shadow var(--transition-base);
}

.download-buttons a:hover {
    background: var(--red-500);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(208, 0, 0, 0.30);
}

/* ============================================================
   NEWS TIMELINE  –  tischtennis/news.html
   Nachrichten wechseln zwischen links (.timeline-left) und rechts (.timeline-right)
   ============================================================ */

/* Vertikale Liste der News-Karten */
.news-timeline {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 32px;
}

/* Basis einer Newskarte */
.timeline-card {
    width: 78%;     /* schmaler als voll → visueller Wechsel links/rechts */
    text-align: left;
    padding: 28px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Linke Karte: am linken Rand ausgerichtet */
.timeline-left {
    align-self: flex-start;
    margin-right: 22%; /* schafft Abstand rechts */
}

/* Rechte Karte: am rechten Rand ausgerichtet, leicht abgedimmt */
.timeline-right {
    align-self: flex-end;
    margin-left: 22%; /* schafft Abstand links */
    background: rgba(242, 240, 237, 0.80);
}

/* Bild innerhalb einer Timeline-Karte (max. 58% Breite) */
.timeline-image {
    max-width: 58%;
    margin: 16px 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: block;
}

/* Bilder mit .info-image innerhalb einer Timeline-Karte linksbündig */
.timeline-card .info-image {
    max-width: 58%;
    margin-left: 0;
    margin-right: auto;
}

/* Ab 900px: Karten nehmen volle Breite ein (kein Links-/Rechts-Wechsel) */
@media (max-width: 900px) {
    .timeline-card {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: flex-start !important;
    }

    .timeline-image,
    .timeline-card .info-image {
        max-width: 80%;
        margin: 14px auto;
    }
}

/* Auf sehr kleinen Screens: Bilder dürfen volle Breite nutzen */
@media (max-width: 600px) {
    .timeline-image,
    .timeline-card .info-image {
        max-width: 100%;
    }
}

/* ============================================================
   CONTACT CARDS  –  kontakt.html
   ============================================================ */

/* Zentrierte, schmale Kontakt-Karte */
.contact-card {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   PHOTO GALLERY  –  kegeln/index.html und schwimmen/index.html
   Responsive Bildergalerie mit flexibler Spaltenbreite
   ============================================================ */
.photo-gallery {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 24px 0;
    justify-content: center;
}

/* Einzelnes Bild: wächst und schrumpft, feste Höhe mit cover-Zuschnitt */
.photo-gallery img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    flex: 1 1 260px;     /* wächst ab 260px Breite */
    max-width: 340px;
    object-fit: cover;   /* Bild wird zugeschnitten, nicht gestaucht */
    height: 220px;
}

/* ============================================================
   FLOATING BACK BUTTON  –  "← Zurück"-Button, eingeblendet per nav.js
   Erscheint auf Unterseiten unten links
   ============================================================ */
.floating-back-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: var(--red-600);
    padding: 12px 24px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.floating-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-red);
    color: var(--red-500);
}

/* Auf Mobilgeräten etwas kompakter */
@media (max-width: 768px) {
    .floating-back-btn {
        bottom: 20px;
        left: 16px;
        padding: 10px 18px;
        font-size: 0.88rem;
    }
}

/* ============================================================
   FOOTER  –  dunkler Abschlussbereich auf allen Seiten
   ============================================================ */
footer {
    background: #1c1917; /* fast schwarz, warmer Ton */
    color: var(--text-inverse);
    padding: 56px 24px 36px;
    margin-top: 64px;
    border-top: 1px solid var(--red-600); /* roter oberer Rand */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* abgerundete obere Ecken */
}

/* Dreispaltige Aufteilung: Verein | Links | Kontakt */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    max-width: var(--max-width);
    margin: 0 auto 40px;
}

/* Spaltenüberschrift in Rot (z.B. "VEREIN", "LINKS") */
.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--red-500);
    margin-bottom: 16px;
}

/* Footer-Text und Links: leicht transparent statt knallweiß */
.footer-col p,
.footer-col a {
    font-size: 0.92rem;
    color: rgba(250, 250, 248, 0.70);
    line-height: 1.75;
    display: block;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: var(--text-inverse); /* volle Helligkeit beim Hover */
}

/* Vereinslogo im Footer: weiß eingefärbt per filter */
.footer-logo {
    width: 64px;
    height: auto;
    filter: brightness(0) invert(1); /* macht das Bild weiß */
    opacity: 0.85;
    margin-bottom: 12px;
}

/* Unterer Footer-Bereich: Copyright-Zeile + Legal-Links */
.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: rgba(250, 250, 248, 0.45);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-legal {
    display: flex;
    gap: 16px;
}

.footer-legal a {
    font-size: 0.85rem;
    color: rgba(250, 250, 248, 0.45);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: rgba(250, 250, 248, 0.85);
}

/* Footer auf mobilen Geräten */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* abgerundete Ecken entfernen da kein sichtbarer Inhalt daneben */
    footer {
        border-radius: 0;
        padding: 40px 16px 28px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-legal {
        justify-content: center;
    }
}

/* ============================================================
   PAGE-SPECIFIC: Tischtennis sub-nav
   Zweite Navigationsleiste nur auf Tischtennis-Unterseiten
   (news.html, trainingszeiten.html, mannschaften.html, ueber-uns.html)
   ============================================================ */

/* Leiste mit Links zu den vier Tischtennis-Seiten */
.subnav {
    background: var(--bg-muted);
    border-bottom: 1px solid rgba(28, 25, 23, 0.08);
    padding: 0 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* Sub-Nav-Links: Unterstrich erscheint beim Hover/aktiver Seite */
.subnav a {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 12px 14px;
    text-decoration: none;
    border-bottom: 2px solid transparent; /* unsichtbar bis Hover/active */
    transition: color var(--transition-fast), border-color var(--transition-fast);
    background-image: none;
}

/* Aktiver Link bekommt roten Unterstrich */
.subnav a:hover,
.subnav a.active {
    color: var(--red-600);
    border-bottom-color: var(--red-600);
    background-size: 0;
}

/* ============================================================
   KEYFRAMES  –  Animationsdefinitionen
   ============================================================ */

/* float: sanftes Auf-und-Ab-Schweben (Vereinslogo im Hero) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* menuFadeIn: Links im mobilen Menü gleiten von unten nach oben ein */
@keyframes menuFadeIn {
    from {
        opacity: 0.6;  /* Nicht komplett unsichtbar – sofort erkennbar */
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}