/* Grunddesign */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
    /* 1. Das Hintergrundbild laden */
    background-image: url('../images/hintergrund.jpg'); 
    background-size: cover;       
    background-position: center;   
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    
    /* 2. Die gewünschte Graufarbe definieren (hier als HEX oder RGB) */
    background-color: #f9f9f9; /* Mittleres Grau (Alternativ in RGB: rgb(102, 102, 102)) #666666*/
    
    /* 3. Bild und Farbe miteinander verschmelzen lassen */
    background-blend-mode: multiply; /* 'multiply' (Multiplizieren) dunkelt das Bild perfekt ab */
}

main {
    flex: 1;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header & Navigation */
header {
    background-color: #004477;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

/* Fußzeile */
footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 0.9rem;
}

footer a {
    color: #aaa;
    text-decoration: none;
}

/* Styling für das Bild (oben) */
.content-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto 25px auto; /* 25px Abstand nach unten zum Text */
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Optional: Extra Styling für den Text unter dem Bild */
.img-caption-text {
    margin-top: 20px;       /* Zusätzlicher oberer Abstand für den Text */
    line-height: 1.6;       /* Macht den Text durch mehr Zeilenabstand lesbarer */
    color: #333333;         /* Ein angenehmes Dunkelgrau für den Fließtext */
}

/* Klasse für das verkleinerte quadratische Bild oben */
.welcome-badge {
    width: 150px;           /* Ändern Sie diesen Wert (z.B. auf 200px), falls es größer sein soll */
    height: 150px;          /* Behält die quadratische Form bei */
    object-fit: cover;      /* Sorgt dafür, dass das Bild sauber eingepasst wird */
    display: block;         /* Macht das Bild zu einem Block-Element */
    margin: 0 auto 20px auto; /* Zentriert das Bild und erzeugt 20px Abstand zur Überschrift */
    border-radius: 50%;     /* OPTIONAL: Macht das Bild kreisrund. Löschen, wenn es quadratisch bleiben soll */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Das Styling für den Menü-Button */
.accordion-toggle {
    background-color: #004477;
    color: white;
    cursor: pointer;
    padding: 12px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Kleiner Pfeil-Indikator auf der rechten Seite */
.accordion-toggle::after {
    content: '▼';
    font-size: 0.8rem;
}

/* Wenn das Menü aktiv (geöffnet) ist */
.accordion-toggle.active {
    background-color: #002244;
    border-radius: 6px 6px 0 0; /* Unten eckig, wenn offen */
}

.accordion-toggle.active::after {
    content: '▲'; /* Pfeil dreht sich um */
}

/* Der einklappbare Inhalt (standardmäßig versteckt) */
.accordion-content {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-top: none;
    display: none; /* Versteckt das Menü */
    overflow: hidden;
    border-radius: 0 0 6px 6px;
}
/*Einklappbares Menü */
/* Styling für die Links im Menü */
.accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.accordion-content li {
    border-bottom: 1px solid #eee;
}

.accordion-content li:last-child {
    border-bottom: none;
}

.accordion-content a {
    display: block;
    color: #333;
    padding: 12px 20px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.accordion-content a:hover {
    background-color: #e9e9e9;
    color: #004477;
}
/*Alles Zentrieren*/
/* --- HEADER & NAVIGATION (Rechte Seite untereinander) --- */
.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

nav {
    display: flex;
    flex-direction: column;    /* Stapelt Links und Aufklapp-Menü untereinander */
    align-items: flex-end;     /* Richtet alles nach rechts aus */
    gap: 12px;                 /* Abstand zwischen den normalen Links und dem Menü */
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

/* Kompaktes Aufklapp-Menü für den Header-Bereich */
.accordion-menu {
    width: 300px;              /* Feste, saubere Breite im Header */
    position: relative;        /* Wichtig für die absolute Positionierung des Inhalts */
    z-index: 100;              /* Sorgt dafür, dass das Menü über dem Text aufklappt */
}

.accordion-toggle {
    font-size: 0.9rem;
    padding: 8px 12px;
}

.accordion-content {
    position: absolute;        /* Klappt nach unten aus, ohne den Header zu vergrößern */
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Der einklappbare Inhalt */
.accordion-content {
    position: absolute;        
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;             /* Wird per JS auf 'block' gesetzt, wenn geöffnet */
}

/* Zwingt die Liste im Menü, alle Einträge untereinander anzuzeigen */
.accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;             /* Aktiviert Flexbox */
    flex-direction: column;    /* Stapelt die Listeneinträge strikt untereinander */
    width: 100%;
}

.accordion-content li {
    width: 100%;               /* Jeder Eintrag nutzt die volle Breite */
    border-bottom: 1px solid #eee;
}

.accordion-content li:last-child {
    border-bottom: none;       /* Entfernt die Linie beim letzten Eintrag */
}

.accordion-content a {
    display: block;            
    color: #333;
    padding: 12px 20px;
    text-decoration: none;
    background-color: #ffffff; /* Weißer Hintergrund für die Links */
    text-align: left;          /* Richtet den Text innerhalb des Menüs linksbündig aus */
    width: 100%;
    box-sizing: border-box;
}

.accordion-content a:hover {
    background-color: #e9e9e9;
    color: #004477;
}

/* --- HINTERGRUND DES BUTTONS BEIM ANKLICKEN --- */
.accordion-toggle.active {
    background-color: #002244; /* Dunkleres Blau, wenn das Menü geöffnet ist */
    color: #ffffff;            /* Textfarbe des geöffneten Buttons */
    border-radius: 6px 6px 0 0; /* Hält die oberen Ecken rund, unten eckig */
}

/* --- HINTERGRUND DES BUTTONS BEIM ANKLICKEN --- */
.accordion-toggle.active {
    background-color: #002244; /* Dunkleres Blau, wenn das Menü geöffnet ist */
    color: #ffffff;            /* Textfarbe des geöffneten Buttons */
    border-radius: 6px 6px 0 0; /* Hält die oberen Ecken rund, unten eckig */
}



/* --- ZENTRIERTER INHALT (Für Bildschirme 1600px - 1920px) --- */
.center-content-wrapper {
    max-width: 900px;          /* Verhindert zu lange, unleserliche Textzeilen */
    margin: 40px auto;         /* Zentriert den gesamten Block perfekt auf dem Monitor */
    width: 100%;
    box-sizing: border-box;
}

#welcome {
    text-align: center;        /* Setzt Wappen, Überschrift und Begrüßungstext mittig */
}

.welcome-badge {
    width: 160px;              /* Optimale Größe für das Wappen über der Überschrift */
    height: 160px;
    object-fit: cover;
    display: block;
    margin: 0 auto 20px auto;  /* Zentriert das Bild und gibt Abstand nach unten */
    border-radius: 8px;        /* Leicht abgerundete Ecken für das quadratische Wappen */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


/* Responsive Design: Auf kleinen Bildschirmen (Handys) untereinander anzeigen */
@media (max-width: 768px) {
    .page-layout {
        flex-direction: column;
    }
    
    .main-content, .sidebar {
        flex: none;
        width: 100%;
    }
}

/*Bildschirmgröße*/
/* Der Hauptcontainer der Website */
main {
    flex: 1;
    padding: 30px 20px;
    width: 100%;
    
    /* Begrenzt die Inhaltsbreite ideal für 1600px - 1920px Bildschirme */
    max-width: 1400px;  
    
    /* Zentriert die gesamte Webseite auf dem Bildschirm */
    margin: 0 auto;     
    box-sizing: border-box;
}

/* Optimierung des zweispaltigen Layouts für große Bildschirme */
.page-layout {
    display: flex;
    gap: 40px; /* Etwas mehr Abstand zwischen Hauptinhalt und rechter Seitenleiste */
    align-items: flex-start;
}

/* Die linke Spalte (Hauptinhalt) bekommt ca. 75% der Breite */
.main-content {
    flex: 3; 
}

/* Die rechte Spalte (Menü) bekommt ca. 25% der Breite */
.sidebar {
    flex: 1;
    min-width: 320px; /* Verhindert, dass das Menü auf großen Monitoren zu schmal gequetscht wird */
    position: sticky;
    top: 30px;
}

/*Alles Mittig 1600px-1920px*/
/* --- ZENTRIERTER INHALT (Für Bildschirme 1600px - 1920px) --- */
.center-content-wrapper {
    max-width: 900px;          /* Verhindert zu lange, unleserliche Textzeilen */
    margin: 50px auto;         /* Zentriert den gesamten Block perfekt auf dem Monitor */
    width: 100%;
    box-sizing: border-box;
    text-align: center;        /* Zentriert absolut jeden Text in diesem Container */
}

/* Willkommens-Bereich */
#welcome h1 {
    margin-top: 10px;
    font-size: 2.2rem;
}

#welcome p {
    font-size: 1.2rem;
    color: #444;
}

/* Wappen-Styling über der Hauptüberschrift */
.welcome-badge {
    width: 160px;              
    height: 160px;
    object-fit: cover;
    display: block;
    margin: 0 auto 20px auto;  /* Zentriert das Bild eigenständig */
    border-radius: 8px;        
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Neuigkeiten-Bereich */
#news h2 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

/* Einzelne News-Beiträge */
.news-article {
    background-color: rgba(255, 255, 255, 0.9); /* Falls Sie ein Hintergrundbild nutzen */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin: 0 auto;
    max-width: 700px;          /* News-Text wird für bessere Lesbarkeit etwas schmaler gehalten */
}

.news-article h3 {
    margin-top: 0;
    color: #004477;
}

.news-article p {
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- FORMULARE & DESIGN --- */
.verein-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.verein-form input, .verein-form textarea, .chat-input-form input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}

.verein-form button, .chat-input-form button {
    background-color: #004477;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.verein-form button:hover, .chat-input-form button:hover {
    background-color: #002244;
}

/* --- PINNWAND --- */
.pinnwand-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pinnwand-post {
    background: #fff;
    border-left: 5px solid #004477;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center; /* Alles mittig */
}

.post-header {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #666;
}

/* --- CHAT --- */
.chat-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.chat-messages {
    height: 350px;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
    text-align: left; /* Chat-Zeilen lesen sich linksbündig besser */
}

.chat-message {
    margin-bottom: 8px;
    font-size: 1rem;
}

.chat-time {
    color: #999;
    margin-right: 5px;
}

.chat-input-form {
    display: flex;
    gap: 10px;
}

/*Terminplaner*/
/* --- TERMINPLANER STYLING --- */
.termin-liste {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 700px; /* Gleiche Breite wie die News-Artikel */
    margin: 0 auto;
}

.termin-karte {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: left; /* Text in der Karte liest sich linksbündig besser */
    transition: transform 0.2s;
}

.termin-karte:hover {
    transform: translateY(-2px);
}

/* Der Kalender-Block auf der linken Seite */
.termin-datum-box {
    background-color: #004477;
    color: white;
    min-width: 70px;
    height: 70px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.t-tag {
    font-size: 1.6rem;
    line-height: 1.1;
}

.t-monat {
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Infos zum Termin */
.termin-info h3 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 1.2rem;
}

.termin-info p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

/*Logo Halbüberlagerung*/
/* --- LOGO EMBLEM (WAPPEN ÜBER SKATKARTEN) --- */

/* Der Haupt-Logo-Bereich im Header */
.logo {
    display: flex;
    align-items: center;
}

/* Der unsichtbare Rahmen, der beide Bilder zusammenhält */
.logo-emblem-container {
    position: relative;
    width: 52px;               /* Gesamtbreite des Emblems */
    height: 36px;              /* Gesamthöhe des Emblems */
    margin-right: 12px;        /* Abstand zum Vereinsnamen */
    display: inline-block;
}

/* 1. Die Skatkarten (liegen unten links im Hintergrund) */
.emblem-cards {
    width: 36px;
    height: auto;
    object-fit: contain;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;                /* Ebene 1 (unten) */
}

/* 2. Das Wappen (liegt oben rechts im Vordergrund und überlappt) */
.emblem-badge {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 50%;        /* Macht das Wappen kreisrund */
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;                /* Ebene 2 (schiebt sich über die Karten) */
    
    /* Ein schicker weißer oder blauer Rand trennt die Bilder sauber ab */
    border: 2px solid #004477; /* Passt sich perfekt an Ihre Header-Farbe an */
}

/* Styling für den Vereinsnamen daneben */
.logo-text {
    font-weight: bold;
    font-size: 1.25rem;
    color: #ffffff;
}