/* ==========================================================================
   Base: CSS-Variablen (werden per inline-style überschrieben)
   ========================================================================== */
:root {
    /* Falls inline-style fehlt, haben wir Defaults */
    --color-primary: #4F46E5;
    --color-primary_hover: #4338CA;
    --color-secondary: #6B7280;
    --color-background: #1E293B;
    --color-background_light: #334155;
    --color-surface: #475569;
    --color-text: #F1F5F9;
    --color-text_muted: #CBD5E1;
    --color-border: #475569;
    --color-accent: #10B981;
    
    --font-font_family_base: Arial, sans-serif;
    --font-font_family_heading: 'Smudger LET Regular', Arial, sans-serif;
    --font-font_size_base: 16px;
    --font-font_size_h1: 3.5rem;
    --font-font_size_h2: 2.5rem;
    --font-font_size_h3: 1.75rem;
    
    --spacing-unit: 0.5rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    --layout-max_width: 1200px;
    --layout-border_radius: 0.5rem;
    --layout-border_radius_button: 0.375rem;
}

/* ==========================================================================
   Font-Faces (bestehende Custom Fonts)
   ========================================================================== */
@font-face {
    font-family: 'Smudger LET Regular';
    src: url('../fonts/XaraWDEmbeddedHTMLfont1.eot') format('embedded-opentype'),
         url('../fonts/XaraWDEmbeddedHTMLfont1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Trebuchet MS Regular';
    src: url('../fonts/XaraWDEmbeddedHTMLfont2.eot') format('embedded-opentype'),
         url('../fonts/XaraWDEmbeddedHTMLfont2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-font_family_base);
    font-size: var(--font-font_size_base);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-font_family_heading);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-weight: normal;
}

h1 {
    font-size: var(--font-font_size_h1);
}

h2 {
    font-size: var(--font-font_size_h2);
}

h3 {
    font-size: var(--font-font_size_h3);
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-text);
    text-decoration: underline;
}

a:hover {
    color: var(--color-text);
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
    background-color: var(--color-background_light);
    border-bottom: 1px solid var(--color-border);
}

.header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    max-width: var(--layout-max_width);
    margin: 0 auto;
}

.logo {
    flex-shrink: 0;
}

.logo-img {
    max-width: 200px;
    max-height: 140px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.tagline {
    text-align: left;
    flex: 1;
    min-width: 200px;
}

.tagline h1 {
    font-size: clamp(2rem, 8vw, var(--font-font_size_h1));
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.tagline p {
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-font_family_heading);
}

.burger-menu {
    display: none; /* Desktop: hidden */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.burger-menu:hover {
    color: var(--color-text);
}

.burger-menu:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--layout-border_radius_button);
}

.burger-icon {
    display: block;
    width: 24px;
    height: 3px;
    background-color: var(--color-text);
    position: relative;
}

.burger-icon::before,
.burger-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 3px;
    background-color: var(--color-text);
    left: 0;
}

.burger-icon::before {
    top: -8px;
}

.burger-icon::after {
    top: 8px;
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.social-icon {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.social-links a:hover .social-icon {
    transform: scale(1.1);
}

.social-links a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--layout-border_radius_button);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
nav {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    list-style: none;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
    max-width: var(--layout-max_width);
    margin-left: auto;
    margin-right: auto;
}

nav ul li {
    margin: 0;
}

nav ul li a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-background);
    border-radius: var(--layout-border_radius_button);
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 1rem;
}

nav ul li a:hover {
    background-color: var(--color-primary);
    color: var(--color-text);
}

nav ul li a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

nav ul li a.active {
    background-color: var(--color-primary);
    color: var(--color-text);
    font-weight: bold;
}

/* Mitgliederbereich Button (Login) */
.nav-login-item {
    margin-left: auto; /* Rechts ausrichten (Desktop) */
}

.btn-login {
    background-color: var(--color-login_btn_bg, #10B981) !important;
    color: var(--color-login_btn_text, #FFFFFF) !important;
    font-weight: bold !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
}

.btn-login:hover {
    background-color: var(--color-login_btn_bg_hover, #059669) !important;
    color: var(--color-login_btn_text, #FFFFFF) !important;
}

.btn-login:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Main Content
   ========================================================================== */
main {
    min-height: 60vh;
    padding: var(--spacing-lg) var(--spacing-md);
    max-width: var(--layout-max_width);
    margin: 0 auto;
}

/* ==========================================================================
   Sections (Willkommen, Kalender, News)
   ========================================================================== */
.top-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    align-items: start;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.welcome-section,
.calendar-section {
    background-color: var(--color-background_light);
    padding: var(--spacing-lg);
    border-radius: var(--layout-border_radius);
    border: 1px solid var(--color-border);
}

/* Desktop-only: Kalender + Instagram (gleiche Regel) */
.desktop-only {
    display: block;
}

/* Desktop-only: Kalender + Instagram (gleiche Regel) */
.desktop-only {
    display: block;
}

.welcome-section h2,
.calendar-section h2 {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.welcome-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--layout-border_radius);
    margin-top: var(--spacing-md);
}

.news-section {
    /* News ist jetzt unter Willkommen in left-column */
    margin-top: 0;
}

.news-container {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.news-item {
    background-color: var(--color-background_light);
    padding: var(--spacing-lg);
    border-radius: var(--layout-border_radius);
    border: 1px solid var(--color-border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-item img {
    max-width: 100%;
    height: auto;
    border-radius: var(--layout-border_radius);
    margin-bottom: var(--spacing-md);
}

/* News-Bild Vorschau (max 250px hoch) - spezifischere Regel überschreibt .news-item img */
.news-item .news-media {
    max-height: 250px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-item .news-thumb,
.news-item img.news-thumb {
    max-height: 250px;
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.news-thumb:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Media Embed Container (mit padding-top Trick für garantierte Größe) */
.news-embed {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 1rem auto 0;
    display: block;
    overflow: hidden;
    border-radius: var(--layout-border_radius);
}

/* Padding-top Trick für 16:9 (garantiert Höhe auch ohne aspect-ratio Support) */
.news-embed::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 = 56.25% */
}

.news-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* TikTok: 9:16 Verhältnis */
.news-embed.news-embed-tiktok {
    max-width: 360px;
}

.news-embed.news-embed-tiktok::before {
    padding-top: 177.7778%; /* 9:16 = 16/9 = 1.777... = 177.7778% */
}

/* YouTube: 16:9 wird durch .news-embed::before (56.25%) gesetzt */

/* ========================================
   TEST PAGE - iFrame Test (temporär)
   ======================================== */

.test-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.test-page-container h1 {
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.test-info {
    background: var(--color-background_light);
    padding: var(--spacing-md);
    border-radius: var(--layout-border_radius);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text_muted);
    font-size: 0.9rem;
}

.test-info p {
    margin: var(--spacing-sm) 0;
}

/* Test iFrame Container - rote Umrandung */
.test-iframe-container {
    border: 2px solid red;
    margin: var(--spacing-lg) 0;
    /* TikTok: padding direkt am iframe, YouTube: padding am Container */
}

.test-iframe-container.test-error {
    border-color: orange;
    background: rgba(255, 165, 0, 0.1);
    padding: var(--spacing-md);
}

.test-iframe-container.test-error p {
    color: var(--color-text);
    margin: 0;
}

/* YouTube iFrame (horizontal, 16:9) - Offizielles iframe direkt im Container */
.test-youtube {
    /* Container: Zentriert, max-width 560px (YouTube Standard) */
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    /* Responsive: Container wird bei Bedarf kleiner */
    width: 100%;
}

.test-youtube iframe {
    /* YouTube offizielles iframe: width/height werden von YouTube empfohlen, wir machen es responsive */
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* TikTok iFrame (vertikal, 9:16) - Rahmen direkt am iframe (tight) */
.test-tiktok {
    /* Container: Zentriert, exakt so groß wie der skalierte iframe (tight) */
    /* iframe ist 360px breit × 800px hoch, scale(0.8) = 288px × 640px sichtbar */
    width: 288px; /* 360px * 0.8 = 288px (skalierte Breite) */
    height: 640px; /* 800px * 0.8 = 640px (skalierte Höhe) */
    max-width: 288px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    /* Block statt inline-block, damit width/height exakt greifen */
    display: block;
    /* Overflow hidden, damit nichts über den Container hinausragt */
    overflow: hidden;
}

.test-tiktok iframe {
    /* TikTok: Ursprüngliche Größe vor Skalierung */
    display: block;
    width: 360px; /* Ursprüngliche Breite vor Skalierung */
    height: 800px; /* Ursprüngliche Höhe vor Skalierung */
    border: 0;
    /* Transform: Inhalt 20% kleiner, Container passt sich exakt an (tight) */
    transform: scale(0.8);
    transform-origin: top left; /* Oben links, damit kein Leerraum */
    /* Container ist 288px × 640px, passt exakt zu skaliertem iframe */
}

/* Instagram Test Container (für test.php) */
.test-instagram {
    padding: var(--spacing-md);
}

.test-instagram .embed {
    margin: 0;
}

.test-info {
    border-color: #64748b;
    background: rgba(100, 116, 139, 0.1);
}

.test-info p {
    color: var(--color-text_muted);
    margin: 0;
}

/* Nav TEST Link Styling */
.nav-test-link {
    color: #ff6b6b !important; /* Rot, damit es als Test erkennbar ist */
    font-weight: bold;
}

.nav-test-link:hover {
    color: #ff5252 !important;
}


/* Media Embed Link Button (Fallback) */
.btn-link {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--layout-border_radius_button);
    transition: background-color 0.2s ease;
    font-weight: bold;
}

.btn-link:hover {
    background-color: var(--color-primary_hover);
    color: var(--color-text);
}

.btn-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Lightbox Modal */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.lightbox-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    padding: var(--spacing-sm);
    transition: opacity 0.2s ease;
    z-index: 10001;
}

.lightbox-close:hover {
    opacity: 0.7;
}

.lightbox-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--layout-border_radius_button);
}

#lightbox-image {
    max-width: 90%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--layout-border_radius);
}

/* Mobile: Lightbox Anpassungen */
@media (max-width: 768px) {
    .news-item .news-media {
        max-height: 200px; /* Mobile etwas kleiner */
    }

    .news-item .news-thumb,
    .news-item img.news-thumb {
        max-height: 200px; /* Mobile etwas kleiner */
    }

    .lightbox-close {
        font-size: 2rem;
        top: var(--spacing-md);
        right: var(--spacing-md);
    }

    #lightbox-image {
        max-width: 95%;
    }
}

.news-title {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-family: var(--font-font_family_heading);
    font-size: var(--font-font_size_h3);
}

.news-text {
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.news-date {
    display: block;
    color: var(--color-text_muted);
    font-size: 0.875rem;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.news-media-embed {
    width: 100%;
    display: block;
    margin: var(--spacing-md) 0;
}

.text-muted {
    color: var(--color-text_muted);
    font-style: italic;
}

/* ==========================================================================
   Page & Section Titles (generisch, CMS-ready)
   ========================================================================== */

/* Haupttitel der Seite (H1/H2 als Page-Title) */
.page-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

/* Abschnittstitel (z.B. "News", "Unsere Sponsoren") */
.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Sponsors & Gönner (goenner.php)
   ========================================================================== */

/* Sections */
.sponsors-section,
.goenner-section {
    margin-bottom: var(--spacing-2xl);
}

.sponsors-section h3,
.goenner-section h3 {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.sponsors-section > p,
.goenner-section > p {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text_muted);
}

/* Sponsors Grid (responsive) */
.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

/* Sponsor Item (Kachel) */
.sponsor-item {
    background-color: var(--color-background_light);
    padding: var(--spacing-lg);
    border-radius: var(--layout-border_radius);
    border: 1px solid var(--color-border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sponsor Image */
.sponsor-image {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 200px;
    overflow: hidden;
}

.sponsor-image img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--layout-border_radius);
}

.sponsor-image a {
    display: block;
    transition: opacity 0.2s ease;
}

.sponsor-image a:hover {
    opacity: 0.8;
}

/* Sponsor Title */
.sponsor-item h4 {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    color: var(--color-text);
    font-size: 1.25rem;
}

/* Sponsor Text */
.sponsor-item > p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text_muted);
    flex-grow: 1;
}

/* Sponsor Link Button */
.sponsor-item .btn-link {
    margin-top: var(--spacing-sm);
}

/* Mobile: Sponsors Grid */
@media (max-width: 768px) {
    .sponsors-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .sponsor-image {
        max-height: 150px;
    }
    
    .sponsor-image img {
        max-height: 150px;
    }
}

/* ==========================================================================
   Members (mitglieder.php) - 5-Spalten Sternenhimmel Grid
   ========================================================================== */

/* Members Sky Grid - 5 Spalten Grid mit Pattern (Desktop) */
.members-sky-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg) var(--spacing-md);
    align-items: start;
}

/* Grid Cell (eine Zelle im 5-Spalten Raster) */
.grid-cell {
    min-height: 0; /* Verhindert Überlauf */
}

/* Instrument Group (pro Instrument eine Section) */
.instrument-group {
    width: 100%;
}

/* Instrument Title (Name + Icon) - Icon dominiert visuell */
.instrument-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    flex-direction: column;
}

.instrument-icon {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Voices Container (lockere Anordnung der Stimmen-Blöcke) */
.voices-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Voice Group (1. Stimme, 2. Stimme, etc.) - Rahmen um gesamte Stimme, ENGER */
.voice-group {
    margin: 0 auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    max-width: fit-content;
    min-width: 150px;
    border: 1px solid var(--color-border);
    border-radius: var(--layout-border_radius);
    background-color: var(--color-background_light);
}

.voice-title {
    text-align: center;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text_muted);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Members List (vertikale Liste - Namen untereinander) */
.members-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
}

.member-name {
    color: var(--color-text);
    font-size: 0.9rem;
    text-align: center;
}

/* Mobile: Linear/zentriert (1 Spalte, kein Grid) */
@media (max-width: 768px) {
    .members-sky-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        align-items: center;
    }
    
    .grid-cell {
        width: 100%;
        max-width: 100%;
    }
    
    .instrument-group {
        width: 100%;
    }
    
    .instrument-icon {
        max-width: 80px;
        max-height: 80px;
    }
    
    .voice-group {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Geschichte / Timeline (geschichte.php)
   ========================================================================== */

/* History Intro Section */
.history-intro {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding: 0 var(--spacing-lg);
}

.history-intro p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
}

.history-intro-image {
    margin-top: var(--spacing-lg);
}

.history-intro-image img {
    max-width: 80%;
    height: auto;
    border-radius: var(--layout-border_radius);
}

/* History Hero Image (oben) */
.history-hero-image {
    margin: var(--spacing-lg) auto var(--spacing-2xl);
    text-align: center;
    max-width: 100%;
}

.history-hero-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--layout-border_radius);
    display: block;
}

/* Timeline Section */
.timeline-section {
    margin-bottom: var(--spacing-2xl);
}

/* ==========================================================================
   GEMEINSAME TIMELINE-STYLES (Basis für alle Layouts)
   ========================================================================== */

.history-timeline {
    margin: var(--spacing-xl) 0;
}

/* Timeline Item (gemeinsame Basis) */
.timeline-item {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

/* Timeline Card (gemeinsame Basis) */
.timeline-card {
    background-color: var(--color-background_light);
    padding: var(--spacing-lg);
    border-radius: var(--layout-border_radius);
    border: 1px solid var(--color-border);
}

.timeline-date {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* Karten-Titel: Base-Font statt Script-Font (gut lesbar) */
.timeline-headline {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-font_family_base); /* Base-Font für Lesbarkeit */
}

.timeline-text {
    color: var(--color-text_muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.timeline-image {
    margin: var(--spacing-md) 0;
}

.timeline-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--layout-border_radius);
}

.timeline-link {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: underline;
    margin-top: var(--spacing-sm);
}

.timeline-link:hover {
    color: var(--color-primary_hover);
}

/* ==========================================================================
   LAYOUT A: vertical_alternating (aktuell, ohne Marker)
   ========================================================================== */

.history-timeline.layout-vertical-alternating {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Mittel-Linie (vertikal) */
.history-timeline.layout-vertical-alternating::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border);
    transform: translateX(-50%);
}

.history-timeline.layout-vertical-alternating .timeline-item {
    width: calc(50% - var(--spacing-lg));
    margin-bottom: var(--spacing-2xl);
}

.history-timeline.layout-vertical-alternating .timeline-left {
    left: 0;
    text-align: right;
}

.history-timeline.layout-vertical-alternating .timeline-right {
    left: calc(50% + var(--spacing-lg));
    text-align: left;
}

/* ==========================================================================
   LAYOUT B: vertical_single (einspaltig mittig)
   ========================================================================== */

.history-timeline.layout-vertical-single {
    position: relative; /* Wichtig für ::before absolute positioning */
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.history-timeline.layout-vertical-single::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border);
    transform: translateX(-50%);
}

.history-timeline.layout-vertical-single .timeline-item {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ==========================================================================
   LAYOUT C: horizontal_carousel (horizontal scroll)
   ========================================================================== */

.history-timeline.layout-horizontal-carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none; /* Deaktiviert für pixelweises Scrollen */
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-behavior: auto; /* JS kontrolliert Scroll, CSS smooth könnte stören */
    will-change: scroll-position; /* Browser-Optimierung für flüssiges Scrollen */
}

.history-timeline.layout-horizontal-carousel .timeline-item {
    flex: 0 0 auto;
    width: 320px;
    min-width: 320px;
    scroll-snap-align: none; /* Deaktiviert für pixelweises Scrollen */
    margin-bottom: 0;
}

/* ==========================================================================
   LAYOUT D: wheel (Riesenrad-Effekt / rotierender Eindruck)
   ========================================================================== */

.history-timeline.layout-wheel {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    position: relative;
    min-height: 800px; /* Mindesthöhe für Riesenrad-Animation */
}

.history-timeline.layout-wheel::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border);
    transform: translateX(-50%);
}

/* Basis-Positionierung (JS überschreibt mit transforms) */
.history-timeline.layout-wheel .timeline-item {
    position: absolute;
    width: calc(50% - var(--spacing-lg));
    margin-bottom: 0; /* JS kontrolliert Position */
    transition: none; /* JS kontrolliert Animation */
}

/* Fallback für Mobile (wenn JS deaktiviert) */
.history-timeline.layout-wheel .timeline-item:nth-child(even) {
    left: calc(50% + var(--spacing-lg));
    text-align: left;
}

.history-timeline.layout-wheel .timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

/* ==========================================================================
   LAYOUT: wheel-picker (Picker-UI, iOS/Android Style)
   ========================================================================== */

.history-timeline.layout-wheel-picker {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    height: 800px; /* Fixe Höhe (keine Seitenverlängerung) */
    overflow: hidden; /* Items außerhalb verstecken */
    perspective: 1000; /* 3D-Perspektive für Zylinder-Effekt */
    perspective-origin: center center;
    /* WICHTIG: Fixe Höhe verhindert Seitenverlängerung, JS kontrolliert Position der Items */
}

/* Focus-Zone (Mitte, visuell hervorgehoben) */
.history-timeline.layout-wheel-picker::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 180px; /* Höhe der Focus-Zone */
    transform: translateY(-50%);
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    pointer-events: none;
    z-index: 10;
    opacity: 0.3;
}

/* Basis-Positionierung für Items (JS überschreibt mit transforms) */
.history-timeline.layout-wheel-picker .timeline-item {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    transform-style: preserve-3d; /* 3D-Transforms beibehalten */
    transition: none; /* JS kontrolliert Animation */
}

/* Fallback: Wenn JS nicht lädt, zeige als vertical-single */
.history-timeline.layout-wheel-picker:not(.js-active) .timeline-item {
    position: relative;
    margin-bottom: var(--spacing-xl);
    transform: none;
    opacity: 1;
    filter: none;
}

/* ==========================================================================
   LAYOUT E: cards_grid (Grid-Layout, kompakt)
   ========================================================================== */

.history-timeline.layout-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.history-timeline.layout-cards-grid .timeline-item {
    margin-bottom: 0;
}

/* ==========================================================================
   MOBILE: Responsive für alle Layouts
   ========================================================================== */

@media (max-width: 768px) {
    .history-hero-image img {
        max-width: 100%;
    }
    
    .history-timeline.layout-vertical-alternating::before,
    .history-timeline.layout-vertical-single::before,
    .history-timeline.layout-wheel::before {
        left: var(--spacing-lg);
    }
    
    .history-timeline.layout-vertical-alternating .timeline-item,
    .history-timeline.layout-wheel .timeline-item {
        width: calc(100% - var(--spacing-2xl));
        left: var(--spacing-2xl) !important;
        text-align: left !important;
    }
    
    .history-timeline.layout-vertical-single .timeline-item {
        width: 100%;
        max-width: 100%;
    }
    
    .history-timeline.layout-horizontal-carousel {
        /* Mobile: bleibt horizontal scrollbar */
        gap: var(--spacing-md);
    }
    
    .history-timeline.layout-horizontal-carousel .timeline-item {
        width: 280px;
        min-width: 280px;
    }
    
    .history-timeline.layout-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .history-timeline.layout-wheel .timeline-item .timeline-card {
        transform: none; /* Mobile: kein Versatz */
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    background-color: var(--color-background_light);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    text-align: center;
    margin-top: var(--spacing-2xl);
}

.footer-copyright {
    font-family: var(--font-font_family_heading);
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.footer-cookie-info {
    font-size: 0.875rem;
    color: var(--color-text_muted);
    margin-bottom: 0;
}

.footer-cookie-info a {
    color: var(--color-text);
    text-decoration: underline;
}

.footer-cookie-info a:hover {
    color: var(--color-accent);
}

/* ==========================================================================
   Forms
   ========================================================================== */
form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 600px;
    margin: 0 auto;
}

form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
}

form input[type="text"],
form input[type="email"],
form input[type="url"],
form textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-font_size_base);
    border: 1px solid var(--color-border);
    border-radius: var(--layout-border_radius_button);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
}

form input:focus,
form textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
}

form button {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1.125rem;
    border: none;
    border-radius: var(--layout-border_radius_button);
    background-color: var(--color-primary);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;
}

form button:hover {
    background-color: var(--color-primary_hover);
}

form button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Tables
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) auto;
}

table th,
table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    text-align: left;
}

table th {
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: bold;
}

table tr:nth-child(even) {
    background-color: var(--color-background_light);
}

/* ==========================================================================
   Mobile (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .header-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .logo {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .logo-img {
        max-width: 80%;
        max-height: 90px;
        margin: 0 auto;
    }

    .tagline {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        text-align: center;
    }

    .tagline h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .tagline p {
        font-size: clamp(0.875rem, 3vw, 1rem);
    }

    .burger-menu {
        display: block;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .social-links {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        justify-content: center;
    }

    .social-icon {
        width: 32px;
        height: 32px;
    }

    nav ul {
        display: none;
        flex-direction: column;
        padding: var(--spacing-sm);
    }

    nav ul.open {
        display: flex;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li a {
        text-align: center;
    }

    .nav-login-item {
        margin-left: 0; /* Mobile: nicht rechts ausrichten */
        width: 100%;
    }

    .btn-login {
        width: 100%;
        text-align: center;
    }

    .top-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .left-column,
    .right-column {
        gap: var(--spacing-md);
    }

    /* Mobile: Reihenfolge: Willkommen -> News -> Kalender */
    .left-column {
        order: 1;
    }

    .right-column {
        order: 2;
    }

    .desktop-only {
        display: none !important; /* Versteckt auf Mobile: Kalender + Instagram */
    }

    .calendar-section {
        display: none; /* Versteckt auf Mobile (außer auf agenda.php) */
    }
    
    /* Instagram Section (Mobile auch versteckt, wie Kalender) */
    .calendar-only {
        display: none !important;
    }

    main {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}

/* ==========================================================================
   Desktop (min-width: 769px)
   ========================================================================== */
@media (min-width: 769px) {
    .header-container {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: var(--spacing-lg);
    }

    /* Desktop: top-section bereits oben definiert als grid */

    .welcome-section,
    .calendar-section {
        display: flex;
        flex-direction: column;
    }

    .welcome-image img {
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
}