/* 1. CSS-Variablen - Zentrales Farbschema */
:root {
    /* Das spezifische SV Blau-Weiß Blau */
    --color-primary: #32389C; 
    /* Ein sehr dunkles Grau für Text, angenehmer zu lesen als reines Schwarz */
    --color-text: #212529; 
    /* Ein reines Weiß für Hintergründe */
    --color-bg: #FFFFFF; 
    /* Ein sehr helles Grau, um Sektionen dezent abzuheben, ohne das cleane Design zu stören */
    --color-bg-alt: #F8F9FA; 
    /* Eine Farbe für Hover-Effekte (leicht aufgehelltes Blau) */
    --color-accent: #4A51C2; 
}

html {
    scroll-behavior: smooth; 
    
    scroll-padding-top: 80px; 

    overflow-x: hidden;
}

/* 2. Globales Reset & Basis-Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    margin: 0;
    overflow-x: clip;
    padding-top: 80px;
}

main {
    flex: 1; 
}

/* 3. Ein globales Layout-Gitter (Container) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 4. Typografie (Überschriften in Vereinsblau) */
h1 {
    color: var(--color-primary);
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: 700;
}

/* 5. Navigation Styling */
.main-nav {
    background-color: var(--color-bg);
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

.nav-hidden {
    transform: translateY(-100%);
}

.nav-container {
    display: flex; /* Magie: Richtet Brand und Links nebeneinander aus */
    justify-content: space-between; /* Brand ganz links, Links ganz rechts */
    align-items: center; /* Vertikal zentrieren */
}

.nav-brand img {
    height: 60px; /* Constrain the height to keep the header clean */
    width: auto;
}

.nav-links {
    list-style: none;
    display: flex; /* Magie: Richtet die Listenpunkte horizontal aus */
    gap: 30px; /* Abstand zwischen den Links */
}

.nav-links a {
    text-decoration: none;
    color: var(--color-accent); /* Weiße Schrift auf blauem Grund */
    font-weight: 500;
    transition: color 0.3s ease; /* Weicher Übergang für Hover-Effekte */
}

/* Wir geben den Hauptlinks unten einen unsichtbaren Rahmen. 
   Das verhindert, dass das Layout springt, wenn beim Hovern plötzlich ein Rahmen auftaucht. */
.nav-links > li > a {
    text-decoration: none;
    color: var(--color-text); /* Standard-Schriftfarbe */
    font-weight: 500;
    padding-bottom: 5px; /* Etwas Luft zwischen Text und Unterstreichung */
    border-bottom: 2px solid transparent; /* Platzhalter! */
    transition: all 0.3s ease;
}

/* Der neue, deutlichere Hover-Effekt */
.nav-links > li > a:hover {
    color: var(--color-primary); /* Der Text wird im satten Vereinsblau hervorgehoben */
    border-bottom: 2px solid var(--color-accent); /* Eine hellblaue Linie deutet Klickbarkeit an */
}

/* Das Styling für den final aktiven Link (durch unsere Jinja-Logik gesteuert) */
.nav-links > li > a.active {
    color: var(--color-primary); /* Bleibt sattes Vereinsblau */
    border-bottom: 2px solid var(--color-primary); /* Die Linie wird final tiefblau */
}

.has-dropdown {
    position: relative; 
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px); 
    left: 0;
    min-width: 220px; 
    background-color: var(--color-bg); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
    border-radius: 8px; 
    padding: 10px 0;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); 
    transition: all 0.3s ease; 
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px; 
    left: 0;
    width: 100%;
    height: 12px;
    background-color: transparent; 
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); 
}

.dropdown-item {
    display: block; 
    padding: 10px 20px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--color-bg-alt); 
    color: var(--color-primary); 
}

.has-dropdown:hover > a {
    color: var(--color-primary); 
    border-bottom: 2px solid var(--color-primary); 
}

.has-dropdown > a {
    display: inline-flex; 
    align-items: center;
    gap: 6px; 
    white-space: nowrap; 
}

.has-dropdown > a::after {
    content: "+";
    font-size: 1.2rem;
    font-weight: 300;  
    line-height: 1;
    transition: transform 0.3s ease;
}

.has-dropdown:hover > a::after {
    transform: rotate(45deg);
}

.burger {
    display: none; 
    cursor: pointer;
    flex-direction: column;
    gap: 5px; 
}

.burger .line {
    width: 25px;
    height: 3px;
    background-color: var(--color-primary); 
    border-radius: 3px;
    transition: all 0.3s ease;
}

@media (max-width: 992px) {
    
    .burger {
        display: flex;
    }

    /* 2. Die normale Navigation verstecken und umbauen */
    .nav-links {
        position: absolute;
        top: 100%; /* Hängt sich genau unter den weißen Header-Balken */
        left: 0;
        width: 100%;
        background-color: var(--color-bg);
        flex-direction: column; /* WICHTIG: Setzt alle Links untereinander */
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        gap: 0; /* Wir steuern den Abstand mobil über margin */
        
        /* Der Versteck-Mechanismus (schiebt die Liste nach oben unsichtbar weg) */
        transform: translateY(-150%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease-in-out;
        z-index: -1; /* Verhindert, dass das unsichtbare Menü Dinge überlagert */

        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    /* 3. Der Aktiv-Zustand (wird von unserem JavaScript ein- und ausgeschaltet) */
    .nav-links.nav-active {
        transform: translateY(0); /* Liste fährt sanft nach unten auf */
        opacity: 1;
        visibility: visible;
        z-index: 999;
    }

    /* --- Optische Anpassungen für die mobilen Listenpunkte --- */
    .nav-links > li {
        width: 100%;
        text-align: center; /* Zentriert die Links auf dem Handy */
        margin: 15px 0; 
    }

    /* Die Linie unter dem aktiven Link auf dem Handy etwas verkürzen, sieht edler aus */
    .nav-links > li > a {
        display: inline-block;
    }

    /* 4. Das Dropdown-Menü "Fußball" für das Handy "entschärfen" */
    .dropdown-menu {
        position: relative; /* Hebt die schwebende Eigenschaft (absolute) auf! */
        top: 0;
        box-shadow: none; /* Auf dem Handy brauchen wir hier keinen Schatten */
        background-color: var(--color-bg-alt); /* Leicht grauer Hintergrund zur Abhebung */
        min-width: 100%; /* Füllt die ganze Breite aus */
        margin-top: 15px;
        padding: 10px 0;
        opacity: 100%;
        visibility: visible;
        transform: none;
    }

    /* Die unsichtbare Brücke wird mobil nicht mehr gebraucht */
    .dropdown-menu::before {
        display: none; 
    }
}

.widget-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
}

iframe[src*="fupa.net"],
.widget-wrapper iframe,
.widget-wrapper div {
    max-width: 100% !important; 
    width: 100% !important;
    overflow-x: hidden;
}

.fupa-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    
    overflow-x: auto; 

    -webkit-overflow-scrolling: touch; 
    
    margin-bottom: 30px;
    
    box-shadow: inset -15px 0 10px -15px rgba(0,0,0,0.15); 
}

.dashboard-card {
    display: block;
    background-color: var(--color-primary);
    padding: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-bg);
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.dashboard-card:hover {
    background-color: var(--color-accent);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.sub-nav {
    margin-bottom: 40px; 
    display: flex;
    justify-content: center; 
}

.sub-nav-links {
    list-style: none; 
    display: flex;
    justify-content: center;
    margin: 0;
    gap: 15px; 
    flex-wrap: wrap; 
    padding: 0;
}

.sub-nav-links a,
.sub-nav-links a:visited {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-bg-alt); 
    color: var(--color-text); 
    text-decoration: none; 
    border-radius: 30px; 
    font-weight: 500;
    transition: all 0.3s ease; 
    border: 1px solid #eaeaea; 
    user-select: none; 
}

.sub-nav-links a:focus,
.sub-nav-links a:active {
    outline: none;
}

.sub-nav-links a:hover {
    background-color: var(--color-primary); 
    color: var(--color-bg); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 50px;
}

#instagram-news {
    margin-top: 40px;
    margin-bottom: 20px;
    padding-top: 20px;
}

.widget-wrapper {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) { 

    .widget-grid, .dashboard-grid {
    grid-template-columns: 1fr;
    }

}


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 1; 
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.hero-fullscreen {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; 
}


.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary, #003366);
    background-image: url('../img/hero-background2webp.webp'); 
    background-size: cover;
    background-position: center;
    
    animation: slowZoom 20s ease-in-out infinite alternate;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.1) 100%);
    
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 900px;
    padding: 0 20px;
    margin: 0 auto;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #ffffff; 
    border-bottom: none;
    line-height: 1.1;

    text-shadow: 2px 2px 8px rgba(0,0,0,0.6); 
}

.hero-content p {
    font-size: 1.5rem;
    font-weight: 400; 
    
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 0 0 15px rgba(0,0,0,0.7);
    
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.2rem; }
    
    .hero-content {
        padding: 40px 15px;
    }

    .hero-fullscreen {
        min-height: calc(100dvh - 60px); 
    }
    
    .scroll-arrow {
        bottom: 20px; 
    }
    .scroll-arrow svg {
        width: 30px;
        height: 30px;
    }
}

.scroll-arrow {
    position: absolute;
    bottom: 40px;

    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px; 
    text-align: center;
    
    color: #ffffff;
    z-index: 3; 
    opacity: 0.8;
    transition: opacity 0.3s ease;
    animation: bounce 2s infinite;
}

.scroll-arrow:hover {
    opacity: 1;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translate(0, 0); 
    }
    40% { 
        transform: translate(0, -15px); 
    }
    60% { 
        transform: translate(0, -7px); 
    }
}

.project-highlight {
    margin-bottom: 60px;
}

.project-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 50px;
    align-items: center; 
    background-color: var(--color-bg-alt); 
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.project-text h2 {
    color: var(--color-primary);
    margin-top: 0;
}

.project-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.project-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.project-text {
    opacity: 0;
    transform: translateX(-40px); /* Startet links verschoben */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.project-image {
    opacity: 0;
    transform: translateX(40px); /* Startet rechts verschoben */
    /* 0.2s Verzögerung, damit zuerst der Text und kurz danach das Bild lädt */
    transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s; 
    will-change: opacity, transform;
}

.foerder-bild {
    opacity: 0;
    transform: translateY(30px); /* Startet nach unten verschoben */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* --- NEU: Endzustände beim Erreichen des Viewports --- */
.project-text.is-visible,
.project-image.is-visible,
.foerder-bild.is-visible {
    opacity: 1;
    transform: translate(0);
}

.btn-primary {
    display: inline-block;
    background-color: var(--color-primary); 
    color: var(--color-bg); 
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none; 
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--color-accent); 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .project-layout {
        grid-template-columns: 1fr; 
        padding: 20px;
        gap: 30px;
    }
    
    .hero-content h1 {
        font-size: 2rem; 
    }
}

.info-box {
    background-color: var(--color-bg-alt);
    padding: 20px;
    margin-bottom: 30px;
    
    border-left: 5px solid var(--color-primary);
    
    border-radius: 0 8px 8px 0; 
    line-height: 1.6;
}

.info-box strong {
    color: var(--color-primary);
}

.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-bottom: 60px;
}

.sponsor-card {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; 
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
    text-decoration: none; 
}

.sponsor-logo {
    width: 100%;
    max-height: 100px; 
    object-fit: contain; 
    
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.sponsor-card:hover {
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.sponsor-card:hover .sponsor-logo {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 768px) {
    .sponsor-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .sponsor-grid {
        grid-template-columns: 1fr;
    }
}

@media (hover: none) {
    .sponsor-logo {
        filter: grayscale(0%);
        opacity: 1;
    }
    
    .sponsor-card {
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        border-color: #e2e8f0;
    }
}


.map-section {
    margin-bottom: 60px;
}

.map-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #eaeaea;
}

.history-section {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    margin-bottom: 60px;
}

.history-article {
    max-width: 800px;
    margin: 0 auto;
}

.history-article h2 {
    color: var(--color-primary);
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    display: inline-block;
}

.history-article p {
    font-size: 1.1rem;
    line-height: 1.8; 
    margin-bottom: 25px;
    color: var(--color-text);
}

.telegram-quote {
    background-color: var(--color-bg-alt);
    border-left: 5px solid var(--color-accent);
    padding: 20px;
    margin: 30px 0;
    font-family: "Courier New", Courier, monospace; 
    font-size: 1rem;
    color: #333;
    border-radius: 0 8px 8px 0;
}

/* --- Bilder im Text --- */
.history-article figure {
    margin: 40px 0;
    text-align: center;
}

.history-article figure img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.history-article figcaption {
    margin-top: 15px;
    font-size: 0.95rem;
    color: #666;
    font-style: italic; 
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .history-section {
        padding: 20px;
    }
    
    .history-article p {
        font-size: 1rem;
    }
}

.video-section {
    margin-bottom: 60px;
}

.video-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #eaeaea;
    background-color: #000; 
}

.drone-video {
    width: 100%;
    display: block; 
    height: auto;
}

/* --- Startzustand für das Scroll-Reveal (Sportstätte) --- */
.map-section,
.video-section,
.history-section,
.single-photo-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.map-section.is-visible,
.video-section.is-visible,
.history-section.is-visible,
.single-photo-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- FALLBACK: Falls JS blockiert, wird die History-Section nach 1 Sekunde trocken eingeblendet --- */
@keyframes forceShow {
    to { opacity: 1; transform: translateY(0); }
}
.history-section {
    animation: forceShow 0.1s ease 1s forwards;
}

.timeline-section {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    margin-bottom: 60px;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 40px auto 0; 
    padding-left: 30px; 
    border-left: 3px solid var(--color-primary); 
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -42px; 
    top: 0;
    width: 15px;
    height: 15px;
    background-color: var(--color-accent); 
    border: 3px solid var(--color-bg); 
    border-radius: 50%; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.timeline-date {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
    display: inline-block;
    background-color: var(--color-bg-alt);
    padding: 4px 12px;
    border-radius: 20px;
}

.timeline-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-text);
}

.timeline-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.timeline-content figure {
    margin: 25px 0;
    text-align: left;
}

.timeline-content img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.timeline-content figcaption {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

@media (max-width: 768px) {
    .timeline-section {
        padding: 20px;
    }
    
    .timeline {
        padding-left: 20px;
    }
    
    .timeline-item::before {
        left: -29px;
    }
}
.history-banner,
.team-card,
.timeline-item {
    opacity: 0;
    transform: translateY(30px);
    
    /* Box-Shadow für den Hover-Effekt direkt mit integriert */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

.content-section {
    margin-bottom: 80px;
}
.history-banner.is-visible,
.team-card.is-visible,
.timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hover-Effekt (greift erst im sichtbaren Zustand) --- */
.team-card.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Startzustand für das Scroll-Reveal --- */
.contact-highlight-box,
.team-card {
    opacity: 0;
    transform: translateY(30px);
    
    /* Wir integrieren hier direkt die Box-Shadow-Transition für den späteren Hover */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* Dein bestehendes Basis-Design für die Karten (ohne Transition-Konflikte) */
.team-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* --- Endzustand durch JavaScript --- */
.contact-highlight-box.is-visible,
.team-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- WICHTIG: Der Hover-Effekt darf erst greifen, wenn die Karte sichtbar ist --- */
.team-card.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.team-card h3 {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
}

.team-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2; 
    color: var(--color-text);
}

.btn-download {
    display: inline-block;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 30px; 
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-download:hover {
    background-color: var(--color-accent); 
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

.training-time-box {
    margin-top: 20px;
    padding: 12px 15px;
    background-color: var(--color-bg-alt);
    border-left: 4px solid var(--color-primary); 
    border-radius: 4px;
    font-size: 0.95rem;
    color: var(--color-text);
}

.timeline-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    margin-top: 25px;
}

.timeline-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.timeline-gallery img:hover {
    transform: scale(1.05);
    z-index: 2;
    position: relative;
}

@media (max-width: 600px) {
    .timeline-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact-avatar {
    width: 70px;
    height: 70px;
    background-color: var(--color-primary); 
    color: #ffffff;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gaststaette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    align-items: start; 
}


.hours-table {
    width: 100%;
    border-collapse: collapse; 
    font-size: 1.05rem;
}

.hours-table th, 
.hours-table td {
    padding: 15px 0;
    border-bottom: 1px solid #eaeaea; 
    text-align: left;
}

.hours-table th {
    color: var(--color-primary);
    width: 45%; 
}

.hours-table tr:last-child th,
.hours-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    .gaststaette-grid {
        grid-template-columns: 1fr; 
        gap: 50px; 
    }
}

/* --- Startzustand für das Scroll-Reveal (Downloads) --- */
.intro-lead,
.team-card {
    opacity: 0;
    transform: translateY(30px);
    
    /* Box-Shadow-Transition für saubere Hover-Effekte */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.intro-lead.is-visible,
.team-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hover-Konfliktvermeidung für die Team-Cards --- */
.team-card.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.intro-lead {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-text);
    background-color: var(--color-bg-alt); 
    padding: 30px 40px;
    border-radius: 12px;
    border-left: 5px solid var(--color-primary); 
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.doc-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.doc-link {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 12px 15px;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    transition: all 0.3s ease; 
}

.doc-link:hover {
    border-color: var(--color-primary);
    background-color: #f4f8fb; 
    color: var(--color-primary);
    transform: translateX(5px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.doc-date {
    font-size: 0.8rem;
    color: #888888;
    font-weight: normal;
}

.dashboard-grid-centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: stretch;
    gap: 20px;
    flex: 0 0 calc(33.333% - 14px); 
    box-sizing: border-box;
}

.dashboard-card {
    display: flex;
    justify-content: center; 
    align-items: center;     
    text-align: center;      
    
    flex: 0 0 calc(33.333% - 14px); 
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    will-change: opacity, transform;
}
.dashboard-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dashboard-card h3 {
    margin: 0; 
    font-size: 1.1rem; 
    line-height: 1.4;  
}

@media (max-width: 992px) {
    .dashboard-grid-centered .dashboard-card {
        flex: 0 0 calc(50% - 10px); 
    }
}

@media (max-width: 600px) {
    .dashboard-grid-centered .dashboard-card {
        flex: 0 0 100%; 
    }
}

.verein-quote {
    font-size: 1.8rem;
    font-weight: 300; 
    font-style: italic;
    color: var(--color-primary);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 20px auto;
    position: relative;
}

.quote-author {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 2px; 
}

@media (max-width: 768px) {
    .verein-quote {
        font-size: 1.35rem; 
        line-height: 1.5; 
        padding-left: 20px; 
        padding-right: 20px;
    }

    .quote-author {
        font-size: 0.85rem; 
        letter-spacing: 1.5px; 
    }
}

.section-divider {
    border: none;
    border-top: 2px solid var(--color-primary); 
    opacity: 0.2; 
    margin: 60px auto; 
    width: 80%; 
    max-width: 800px;
}

/* --- Startzustand für das Scroll-Reveal (Bautagebuch) --- */
.team-card,
.diary-entry {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.team-card.is-visible,
.diary-entry.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Optional: Hover-Effekt für die Infokarte (greift erst im sichtbaren Zustand) --- */
.team-card.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.diary-entry {
    background-color: var(--color-bg-alt);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 40px;
    border-left: 4px solid var(--color-accent);
}

.diary-date {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: block;
}

.diary-entry img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}


.site-footer {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 30px 20px;
    margin-top: 80px;
    font-family: Arial, sans-serif;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid #ffffff;
    border-radius: 50%; 
    color: #ffffff;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background-color: #ffffff;
    color: var(--color-primary); 
}

.footer-socials svg {
    width: 18px;
    height: 18px;
    fill: currentColor; 
}

.footer-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-legal a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600; 
}

.footer-legal a:hover {
    text-decoration: underline;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    gap: 15px;
}

.footer-branding {
    display: flex;
    align-items: center; 
    gap: 20px;
}

.footer-logo {
    height: 50px; 
    width: auto;
}

.footer-hashtag {
    font-size: 2.8rem; 
    font-weight: 900; 
    font-style: italic;
    color: var(--color-bg); 
    letter-spacing: -1px; 
    text-transform: uppercase;
}

.footer-copyright {
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.6;
}

.creator-link {
    color: var(--color-bg);
    text-decoration: none;
    font-weight: bold;
    transition: text-decoration 0.3s ease;
}

.creator-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: flex-start; 
    }
    
    .footer-right {
        align-items: flex-start;
    }
    
    .footer-copyright {
        text-align: left;
    }

    .footer-hashtag {
        font-size: 1.8rem; 
    }
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.legal-card {
    background-color: var(--color-bg-alt); 
    padding: 25px;
    border-radius: 12px;
    border-top: 4px solid var(--color-primary); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.legal-card h2 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-primary);
    border: none; 
}

.legal-text-box {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    border-left: 4px solid var(--color-accent); 
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.legal-text-box h3 {
    margin-top: 0;
    color: var(--color-primary);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
}

/* --- Startzustand für das Scroll-Reveal (Kegeln) --- */
.sub-nav,
.map-section,
.team-card,
.timeline-item,
.history-section,
.single-photo-card,
#erfolge {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.sub-nav.is-visible,
.map-section.is-visible,
.team-card.is-visible,
.timeline-item.is-visible,
.history-section.is-visible,
.single-photo-card.is-visible,
#erfolge.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- FALLBACK: Falls JS blockiert, wird die große Sektion nach 1 Sekunde sicher eingeblendet --- */
@keyframes forceShow {
    to { opacity: 1; transform: translateY(0); }
}
.history-section {
    animation: forceShow 0.1s ease 1s forwards;
}

/* --- Startzustand für das Scroll-Reveal (Gymnastik & Fitness) --- */
.map-section,
.timeline-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.map-section.is-visible,
.timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- FALLBACK: Falls JS blockiert, wird die Zeitleiste sicher eingeblendet --- */
@keyframes forceShow {
    to { opacity: 1; transform: translateY(0); }
}
.timeline-section {
    animation: forceShow 0.1s ease 1s forwards;
}

/* --- Hover-Konfliktvermeidung für die Team-Karten --- */
.team-card.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.contact-form {
    background-color: var(--color-bg-alt); 
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.form-group {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column; 
}

.form-group label {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    padding: 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit; 
    background-color: #ffffff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group textarea {
    resize: vertical; 
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none; 
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(0, 168, 221, 0.15); 
}

@media (max-width: 768px) {
    .contact-form {
        padding: 25px 20px;
    }
}


.flash-messages-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 0 20px;
}

.flash-message {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.flash-message.success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #34d399;
}

.flash-message.error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #f87171;
}

.instagram-wrapper {
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto 50px auto; 
    margin-bottom: 50px;
    padding: 0 15px; 

    box-sizing: border-box; 
    display: flex; 
    justify-content: center;
    overflow: hidden;
}

.instagram-wrapper iframe,
.instagram-wrapper blockquote,
.instagram-wrapper .elfsight-app {
    max-width: 100% !important;
    width: 100% !important;
}


.cookie-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cookie-modal {
    background-color: #ffffff;
    max-width: 800px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cookie-header {
    padding: 25px 30px 10px 30px;
}

.cookie-header h2 {
    font-size: 1.5rem;
    color: #1a1a1a;
    border-bottom: none;
    margin: 0;
}

.cookie-body {
    padding: 10px 30px 20px 30px;
    color: #4a4a4a;
    font-size: 0.95rem;
    line-height: 1.6;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
    padding: 20px 30px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    flex-wrap: wrap; 
}

.btn-cookie {
    flex: 1; 
    padding: 12px 20px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.95rem;
}

.btn-grey {
    background-color: #f1f3f5;
    color: #343a40;
    border: 1px solid #dee2e6;
}

.btn-grey:hover {
    background-color: #e9ecef;
}

.btn-blue {
    background-color: var(--color-primary); 
    color: #ffffff;
}

.btn-blue:hover {
    background-color: #004494;
}

@media (max-width: 768px) {
    .cookie-buttons { flex-direction: column; }
    .btn-cookie { width: 100%; }
}


.archive-year {
    margin-top: 50px;
    margin-bottom: 20px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
}

.archive-album {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.archive-album summary {
    padding: 18px 20px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}

.archive-album summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.archive-album[open] summary::after {
    transform: rotate(45deg); 
}

.archive-album summary:hover {
    background-color: #f1f5f9;
}

.album-hint {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: normal;
}

.archive-album .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
    background-color: #f8fafc;
}

.gallery-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}

.single-photo-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    flex: 1 1 250px;
    max-width: 400px;
}

.single-photo-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.photo-caption {
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
    color: #334155;
}

.history-article {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.history-chapter {
    margin-bottom: 60px;
    overflow: hidden; 
}

.history-chapter:last-child {
    margin-bottom: 0;
}

.history-chapter h2 {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 0;
    font-size: 1.6rem;
}

.history-chapter p {
    line-height: 1.8;
    color: #4a4a4a;
    font-size: 1.05rem;
    margin-bottom: 15px;
    text-align: justify; 
}

.history-img {
    max-width: 350px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

.history-img.right {
    float: right;
    margin-left: 30px;
}

.history-img.left {
    float: left;
    margin-right: 30px;
}

@media (max-width: 768px) {
    .history-article {
        padding: 20px;
    }
    
    .history-chapter p {
        text-align: left; 
    }

    .history-img.right,
    .history-img.left {
        float: none;
        margin: 0 0 20px 0;
        width: 100%;
        max-width: 100%;
    }
}

/* --- Startzustand für das Scroll-Reveal (Sektionsgeschichte) --- */
.history-chapter,
.history-gallery-section h3,
.history-gallery img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.history-chapter.is-visible,
.history-gallery-section h3.is-visible,
.history-gallery img.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.history-gallery-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e9ecef; 
}

.history-gallery-section h3 {
    text-align: center;
    color: #64748b; 
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.history-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.history-gallery img {
    width: 100%;
    height: 200px; 
    object-fit: cover;  
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.history-gallery img:hover {
    transform: scale(1.03); 
}

.decade-title {
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.kader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.kader-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(40px);
    
    /* Wir kombinieren die Einblend-Animation mit dem weichen Hover-Schatten */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.2s ease;
    will-change: opacity, transform;
}

.kader-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- WICHTIG: Hover-Effekt greift erst, wenn die Karte vollständig im Bild ist --- */
.kader-card.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.kader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.kader-img-wrapper {
    width: 100%;
    height: 220px; 
    background-color: #f8fafc;
    border-bottom: 3px solid var(--color-accent);
}

.kader-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.kader-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.9rem;
    font-style: italic;
}

.kader-info {
    padding: 20px;
    flex-grow: 1; 
}

.kader-info h3 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.kader-stats {
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 10px;
    line-height: 1.5;
}

.kader-achievements {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
}

.achievement-item {
    color: #d97706; 
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.honor-card {
    display: flex;
    flex-direction: column; 
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-bottom: 50px;
    border-top: 6px solid var(--color-primary); 
}

.honor-img-wrapper {
    width: 100%;
}

.honor-img-wrapper img {
    width: 100%;
    height: auto; 
    display: block;
    max-height: 500px; 
    object-fit: cover;
    object-position: center; 
}

.honor-text {
    padding: 40px;
    text-align: center; 
}

.honor-text h2 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.honor-text p {
    line-height: 1.8;
    color: #4a4a4a;
    font-size: 1.05rem;
    margin-bottom: 15px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

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

@media (max-width: 768px) {
    .honor-text {
        padding: 25px 20px;
    }
}

/* --- Startzustand für das Scroll-Reveal (Historie-Übersicht) --- */
.honor-card,
.team-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.honor-card.is-visible,
.team-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hover-Konfliktvermeidung für die Team-Karten --- */
.team-card.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.error-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
    min-height: 60vh; 
    padding: 40px 20px;
}

.error-content {
    text-align: center;
    max-width: 600px;
    background: #ffffff;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.error-title {
    font-size: 3rem;
    color: var(--color-primary); 
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 2px;
    border-bottom: none; 
}

.error-subtitle {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

@media (max-width: 768px) {
    .error-title {
        font-size: 2rem;
    }
    .error-content {
        padding: 30px 15px;
    }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    border-radius: 10px;
}

.history-table {
    width: 100%;
    min-width: 800px; 
    border-collapse: collapse; 
    background-color: #ffffff;
}

.history-table th {
    background-color: var(--color-primary); 
    color: #ffffff;
    text-align: left;
    padding: 18px 20px;
    font-size: 1.1rem;
    font-weight: 600;
}

.history-table td {
    padding: 20px;
    border-bottom: 1px solid #eaeaea;
    vertical-align: top; 
    color: var(--color-text);
    line-height: 1.6;
}

.history-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.history-table tbody tr:hover {
    background-color: #f1f5f9;
    transition: background-color 0.3s ease;
}

.person-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.person-list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
}

.person-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}


/* --- Sportgaststätte - Modernes Layout (V2) --- */

/* --- Startzustand für das Scroll-Reveal --- */
.gaststaette-intro,
.services-box,
.hours-card,
.team-card-modern,
.operator-card {
    opacity: 0;
    transform: translateY(30px);
    
    /* Kombinierte Transition, falls du später Hover-Schatten hinzufügst */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.gaststaette-intro.is-visible,
.services-box.is-visible,
.hours-card.is-visible,
.team-card-modern.is-visible,
.operator-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Optional: Hover-Effekt (greift erst im sichtbaren Zustand) --- */
.team-card-modern.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* 1. Intro & Allgemeines */
.gaststaette-intro {
    margin-bottom: 30px;
}

.intro-text {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* 2. Neues Grid für Leistungen & Öffnungszeiten */
.info-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    align-items: stretch; /* Zieht beide Boxen auf die exakt gleiche Höhe */
    margin-bottom: 50px;
}

/* Box 1: Leistungen */
.services-box {
    background-color: var(--color-bg-alt);
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    height: 100%;
    box-sizing: border-box; /* Verhindert, dass das Padding die Box künstlich vergrößert */
}

.services-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.services-list {
    list-style-type: square;
    padding-left: 20px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Box 2: Öffnungszeiten */
.hours-card {
    background-color: var(--color-bg);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    height: 100%;
    box-sizing: border-box;
}

.hours-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.hours-list-modern {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-list-modern li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}

.hours-list-modern li:last-child {
    border-bottom: none;
}

.hours-list-modern li .day {
    font-weight: 500;
    color: var(--color-text);
}

.hours-list-modern li .time {
    color: var(--color-primary);
    font-weight: bold;
    text-align: right;
}

.hours-list-modern li.ruhetag .day {
    color: #666;
}

.hours-list-modern li.ruhetag .time {
    color: #d32f2f;
    font-weight: 500;
}

.small-info {
    font-size: 0.85rem;
    color: #888;
    font-weight: 300;
}

/* 3. Team-Sektion */
.team-section h2 {
    margin-bottom: 30px;
}

.team-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.team-card-modern {
    background-color: var(--color-bg);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.team-card-modern:hover {
    transform: translateY(-5px);
}

/* Profilbilder: Jetzt ohne blauen Rahmen */
.team-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    /* Lediglich ein dezenter Schatten trennt das Bild vom Hintergrund */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.history-photo {
    filter: sepia(30%); 
}

.team-card-modern h3 {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
}

.team-role {
    color: var(--color-primary);
    font-weight: bold;
    margin: 0 0 20px 0;
    font-size: 1rem;
}

.team-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* E-Mail Link wie in der vorherigen Version */
.email-link-text {
    color: var(--color-accent);
    font-size: 0.95rem;
    word-break: break-all;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link-text:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

/* Historische Karte (Großeltern) */
.history-card {
    border: 1px solid var(--color-accent-light);
}

.history-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-top: 20px;
    text-align: left;
}

/* 4. Betreiberinfo am Ende */
.operator-info {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.operator-card {
    background-color: var(--color-bg-alt);
    padding: 20px 30px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    line-height: 1.6;
    max-width: 400px;
}

.operator-card a {
    color: #666;
    text-decoration: none;
}

.operator-card a:hover {
    text-decoration: underline;
}

.trikot-container {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .trikot-container {
        flex-direction: row; 
        justify-content: center;
        align-items: stretch;
    }
}

.trikot-card {
    background-color: var(--color-bg-alt);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Begrenzt die Breite, damit die Hochkant-Bilder nicht riesig werden */
    width: 100%;
    max-width: 280px; 
}

.trikot-card:hover {
    transform: translateY(-8px); /* Hebt die Karte leicht an */
    box-shadow: 0 12px 25px rgba(0,0,0,0.08); /* Verstärkt den Schatten */
}

.trikot-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    object-fit: contain; /* Verhindert das Abschneiden der Grafiken */
}

.trikot-label {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- Startzustand für das Scroll-Reveal (1. Männermannschaft) --- */
.info-box,
.sub-nav,
.widget-grid h2,
.fupa-scroll-wrapper,
.trikot-card {
    opacity: 0;
    transform: translateY(30px);
    
    /* Box-Shadow für den Trikot-Hover wird direkt mit übergeben */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.info-box.is-visible,
.sub-nav.is-visible,
.widget-grid h2.is-visible,
.fupa-scroll-wrapper.is-visible,
.trikot-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hover-Konfliktvermeidung für die Trikot-Karten --- */
.trikot-card.is-visible:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* --- Storytelling Journey (Sticky Cards) --- */

.sticky-journey-section {
    display: flex;
    gap: 10%;
    margin: 120px auto 40px auto;
    
    /* Der wichtigste Befehl: Zwingt die Text-Schiene, genau so lang zu werden wie die Bilder-Spalte */
    align-items: stretch; 
}

.journey-text {
    flex: 1;
    /* Dient nur noch als unsichtbare, lange Schiene. Kein sticky mehr! */
}

.journey-text-inner {
    /* Die Logik zieht komplett in den inneren Container um */
    position: sticky;
    top: 150px;
    height: 60vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.journey-text-inner h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.journey-text-inner p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: var(--color-text);
}

.journey-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20vh; 
    padding-bottom: 80vh; /* Erzwingt den gemeinsamen Stillstand am Ende */
}

/* --- Startzustand: Text unsichtbar und nach unten verschoben --- */
.journey-text-inner h2,
.journey-text-inner p {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* --- Endzustand: Sobald die Klasse durch JS gesetzt wird --- */
.journey-text-inner.is-visible h2,
.journey-text-inner.is-visible p {
    opacity: 1;
    transform: translateY(0);
}

/* --- Kaskaden-Verzögerung für den Premium-Look --- */
.journey-text-inner.is-visible h2 { 
    transition-delay: 0s; 
}
.journey-text-inner.is-visible p:nth-of-type(1) { 
    transition-delay: 0.2s; 
}
.journey-text-inner.is-visible p:nth-of-type(2) { 
    transition-delay: 0.4s; 
}

.sticky-card {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    position: sticky;
    top: 150px; 
    
    height: 60vh; /* Zwingt die Karte auf die exakt selbe Höhe wie den Textblock */
}

.card-1 { transform: rotate(-2deg); }
.card-2 { transform: rotate(3deg); }
.card-3 { transform: rotate(-1.5deg); }

.sticky-card img {
    width: 100%;
    
    /* Zwingt das Bild, die 60vh Karte vollständig auszufüllen */
    height: 100%; 
    object-fit: cover; /* Schneidet die weißen Ränder ab, ohne das Bild zu verzerren */
    
    display: block;
}

/* --- Mobile Anpassung (Smartphones) --- */
@media (max-width: 768px) {
    .sticky-journey-section {
        flex-direction: column;
        gap: 60px;
        margin: 60px auto;
    }
    
    .journey-text-inner {
        position: relative; 
        top: 0;
        height: auto; 
    }
    
    .journey-images {
        gap: 50vh; 
        padding-bottom: 0; 
    }
    
    .sticky-card {
        top: 100px; 
        height: 50vh; 
    }
}

.history-gallery img {
    width: 100%;
    
    /* Zwingt alle Bilder in das exakt selbe Format (4:3 ist ideal für Mannschaftsfotos) */
    aspect-ratio: 4 / 3; 
    
    /* Schneidet überstehende Ränder ab, ohne das Motiv zu quetschen */
    object-fit: cover; 
    
    border-radius: 8px;
    display: block;
}

/* --- Gesamtnavigation Jugendmannschaften --- */

.team-overview-nav {
    margin-bottom: 50px;
    margin-top: 20px;
}

.team-nav-list {
    display: flex;
    flex-wrap: wrap; /* Zwingt die Buttons auf Handys in die nächste Zeile */
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center; /* Zentriert die Navigation auf der Seite */
}

.team-nav-link {
    display: block;
    padding: 12px 24px;
    background-color: #ffffff;
    color: var(--color-primary); 
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px; /* Macht die modernen "Pills" daraus */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Dezenter Schatten */
    border: 2px solid transparent;
    transition: all 0.3s ease; /* Weicher Übergang beim Hovern */
}

/* Hover-Effekt: Füllt sich mit der Vereinsfarbe */
.team-nav-link:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-3px); /* Hebt den Button leicht an */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* --- Startzustand für das Scroll-Reveal (Junioren-Seite) --- */
.team-nav-list li,
.u18-section h2, .u16-section h2, .u14-section h2, .u12-section h2,
.u18-section .info-box, .u16-section .info-box, .u14-section .info-box, .u12-section .info-box,
.sub-nav,
.widget-grid h3,
.fupa-scroll-wrapper,
.history-gallery-section h3,
.history-gallery img {
    opacity: 0;
    transform: translateY(30px);
    
    /* Kombinierte Übergänge für Einblenden, Verschieben und Hover */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
    will-change: opacity, transform;
}

/* --- Endzustand durch JavaScript --- */
.team-nav-list li.is-visible,
.u18-section h2.is-visible, .u16-section h2.is-visible, .u14-section h2.is-visible, .u12-section h2.is-visible,
.u18-section .info-box.is-visible, .u16-section .info-box.is-visible, .u14-section .info-box.is-visible, .u12-section .info-box.is-visible,
.sub-nav.is-visible,
.widget-grid h3.is-visible,
.fupa-scroll-wrapper.is-visible,
.history-gallery-section h3.is-visible,
.history-gallery img.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hover-Konfliktvermeidung für die Galerie-Bilder --- */
.history-gallery img.is-visible:hover {
    transform: scale(1.03); 
}

/* --- Text Rotator Animation --- */

.fade-text {
    display: inline-block;
    /* Ein weicher, 0.4 Sekunden langer Übergang für Sichtbarkeit und Bewegung */
    transition: opacity 0.4s ease, transform 0.4s ease; 
    color: var(--color-primary); /* Hebt das wechselnde Wort in Vereinsfarbe hervor */
}

/* Diese Klasse wird vom JavaScript hinzugefügt und entfernt */
.fade-text.hidden {
    opacity: 0;
    transform: translateY(10px); /* Das Wort rutscht beim Ausblenden leicht nach unten */
}

/* --- Hero Entrance Animation --- */

/* Grundzustand: Beide Texte sind unsichtbar und 30px nach unten verschoben */
.hero-title, .hero-subtitle {
    opacity: 0;
    transform: translateY(30px);
    
    /* Signalisiert der Grafikkarte, dass diese Werte gleich animiert werden */
    will-change: opacity, transform; 
    
    /* Führt den unten stehenden Bauplan 'fadeUp' aus und behält den Endzustand (forwards) */
    animation: fadeUp 0.8s ease-out forwards;
}

/* Die Überschrift startet fast sofort (nach 0.2 Sekunden) */
.hero-title {
    animation-delay: 0.2s; 
}

/* Der Untertitel startet leicht verzögert (nach 0.5 Sekunden) */
.hero-subtitle {
    animation-delay: 0.5s; 
}

/* Der Bauplan für die Bewegung */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0); /* Fährt in die Originalposition */
    }
}

/* --- Sponsoren Marquee Animation --- */

.sponsor-marquee {
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Bricht aus dem Layout aus für volle Bildschirmbreite */
    overflow: hidden;
    background-color: #ffffff; /* Hintergrundfarbe anpassen, falls nötig */
    padding: 30px 0;
    display: flex;
}

.marquee-track {
    display: flex;
    width: max-content;
    /* 35 Sekunden Dauer - Je niedriger die Zahl, desto schneller läuft es */
    animation: scroll-marquee 35s linear infinite;
}

@media (hover: hover) {
    .marquee-track:hover {
        animation-play-state: paused;
    }
}

.marquee-group {
    display: flex;
    align-items: center;
    gap: 100px; /* Abstand zwischen den Logos */
    padding-right: 100px; /* WICHTIG: Muss exakt dem 'gap' entsprechen, damit der Loop nahtlos ist */
}


/* --- NEU: Endlos-Animation Startseite (Isoliert) --- */

.sponsor-marquee {
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Bricht aus dem Layout aus */
    overflow: hidden;
    background-color: #ffffff; 
    padding: 30px 0;
    display: flex;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll-marquee 35s linear infinite;
}

@media (hover: hover) {
    .marquee-track:hover {
        animation-play-state: paused;
    }
}

.marquee-group {
    display: flex;
    align-items: center;
    gap: 100px; 
    padding-right: 100px; 
}

/* SCOPING: Ab hier greifen die Regeln NUR NOCH innerhalb des Endlos-Bandes */

.sponsor-marquee .sponsor-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px; 
    text-decoration: none;
    
    /* Reset: Verhindert, dass Rahmen oder Abstände vom alten Grid vererbt werden */
    border: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.sponsor-marquee .sponsor-logo {
    max-width: 100%;
    max-height: 80px; 
    object-fit: contain;
    
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hover-Effekte ebenfalls strikt isoliert */
@media (hover: hover) {
    .sponsor-marquee .sponsor-card:hover .sponsor-logo {
        filter: grayscale(0%) opacity(100%);
        transform: scale(1.05);
    }
    
    /* Schaltet das leichte Nach-oben-Hüpfen des alten Grids für das Band aus */
    .sponsor-marquee .sponsor-card:hover {
        transform: none;
        box-shadow: none;
    }
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* --- Fan Out Carousel (Cover Flow) --- */

.fan-carousel-container {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 500px; /* Höhe des Karussells */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 40px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.fan-carousel-container.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fan-card {
    position: absolute;
    width: 280px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    
    /* Der wichtigste Befehl: Alle Bewegungen sollen fließend animiert werden */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Bild füllt die Karte aus */
.fan-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Der Text in der Mitte der Karte (wie im Vorlagenbild) */
.fan-card h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
    z-index: 2;
    text-align: center;
}

/* Dunkles Overlay, damit der weiße Text immer lesbar bleibt */
.fan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
    transition: background 0.6s ease;
}

/* --- Die 3D-Positionen --- */

/* Aktive Karte (Mitte) */
.fan-card[data-pos="0"] {
    transform: scale(1) translateX(0) rotate(0deg);
    z-index: 10;
}
.fan-card[data-pos="0"]::after { background: rgba(0,0,0,0.1); }

/* Karte 1 nach links */
.fan-card[data-pos="-1"] {
    transform: scale(0.85) translateX(-65%) rotate(-8deg);
    z-index: 5;
}
/* Karte 1 nach rechts */
.fan-card[data-pos="1"] {
    transform: scale(0.85) translateX(65%) rotate(8deg);
    z-index: 5;
}

/* Karte 2 nach links */
.fan-card[data-pos="-2"] {
    transform: scale(0.7) translateX(-110%) rotate(-16deg);
    z-index: 4;
}
.fan-card[data-pos="-2"]::after { background: rgba(0,0,0,0.6); }

/* Karte 2 nach rechts */
.fan-card[data-pos="2"] {
    transform: scale(0.7) translateX(110%) rotate(16deg);
    z-index: 4;
}
.fan-card[data-pos="2"]::after { background: rgba(0,0,0,0.6); }

/* Alle restlichen Karten (falls ihr mehr als 5 habt) werden unsichtbar im Hintergrund versteckt */
.fan-card[data-pos="hidden"] {
    transform: scale(0.5) translateX(0) rotate(0deg);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* --- Admin Dashboard (Kabine) --- */

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto; /* Zentriert das gesamte Grid */
}

.admin-card {
    background-color: var(--color-primary, #1e3a8a); /* Nutzt eure Vereinsfarbe */
    color: white;
    padding: 30px 20px;
    border-radius: 12px;
    text-decoration: none;
    
    /* Der wichtigste Teil: Zwingt den Text untereinander */
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    text-align: center;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.admin-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: white; /* Überschreibt eventuelle globale h3-Farben */
}

.admin-card p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.85; /* Macht den Untertitel dezent heller */
}

/* Hover-Effekt nur für aktive Karten */
@media (hover: hover) {
    .admin-card:not(.disabled):hover {
        transform: translateY(-5px);
    }
}

/* Graut die inaktiven Buttons aus */
.admin-card.disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
}

/* --- INFINITE MARQUEE SECTION --- */
.marquee-section {
    background-color: var(--color-bg); /* Passt sich nahtlos an deinen Seitenhintergrund an */
    padding: 60px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0px; 
    
    /* Zwingt die Sektion auf die volle Viewport-Breite, 
       selbst wenn sie versehentlich in einem Container landet */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
}

.marquee-content {
    display: flex;
    width: max-content;
    font-size: 4.5rem; /* Etwas größer für noch mehr Modernität */
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-primary); 
    line-height: 1;
}

.marquee-content.scroll-right {
    /* WICHTIG: Die Farbe nicht mehr transparent machen, 
       sondern exakt die Hintergrundfarbe deiner Seite geben (z.B. Weiß) */
    color: var(--color-bg, #ffffff); 
    
    /* Den alten Befehl entfernen/überschreiben */
    -webkit-text-stroke: 0;

    /* Die Outline durch harte 2px Schatten in alle Richtungen aufbauen */
    text-shadow:
        -2px -2px 0 var(--color-primary),
         2px -2px 0 var(--color-primary),
        -2px  2px 0 var(--color-primary),
         2px  2px 0 var(--color-primary),
        -2px  0   0 var(--color-primary),
         2px  0   0 var(--color-primary),
         0   -2px 0 var(--color-primary),
         0    2px 0 var(--color-primary);
}

/* Die Geschwindigkeit wird durch die Dauer (60s) extrem verlangsamt */
.scroll-left {
    animation: marquee-left 60s linear infinite;
}

.scroll-right {
    animation: marquee-right 60s linear infinite;
}

@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@media (max-width: 992px) {
    .marquee-content {
        font-size: 3rem;
    }
    .marquee-section {
        padding: 40px 0;
    }
}

/* --- Scroll-Reveal für das Bilderarchiv --- */
.single-photo-card,
.gallery-grid img {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    
    /* Hardwarebeschleunigung für flüssiges Scrollen bei vielen Bildern */
    will-change: opacity, transform; 
}

/* Der Endzustand durch JavaScript */
.single-photo-card.is-visible,
.gallery-grid img.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}