/* Dynamisches, jugendliches und farbenfrohes Design basierend auf Ihrem Schema */
:root {
    --bg-color: #f8f4ec;              /* Hintergrundfarbe (Beige) */
    --heading-color: #a02e2e;         /* Überschriften / Highlights (Dunkelrot) */
    --nav-link-color: #003366;        /* Navigation / Links (Dunkelblau) */
    --accent-color: #ee5b1d;          /* Akzente, z. B. Buttons, Icons (Orange) */
    --border-color: #e0e0e0;          /* Rahmen, Sektionen, Tabellenhintergrund (Hellgrau) */
    --card-bg-color: #ffffff;         /* Haupttextbereich / Karten / Panels (Weiß) */
    --text-color: #333333;            /* Standard-Textfarbe (Dunkelgrau) */
    --nav-item-bg: #f0f0f0;           /* Hintergrundfarbe für Menüeinträge */
    --header-bg-color: #fffff8;       /* Helle gelb für den Header */
    --border-radius-side: 2px;        /* 8px Rundung der ganzen Seite */
    --border-radius-main: 2px;        /* 8px Setze hier den gewünschten Wert */
    --border-radius-container: 2px;   /* 8px Setze hier den gewünschten Wert */
    --border-radius-foto: 2px;        /* 10%; Optional: Macht das Foto rund */

/* Basis-Styles für den gesamten Körper */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}

/* Container für den Hauptinhalt, um die Breite zu begrenzen */
main {
    max-width: 1000px;
    margin: 4px auto;
    padding: 1.5rem; /* Etwas mehr Innenabstand */
    background-color: var(--card-bg-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Stärkerer Schatten */
    border-radius: var(--border-radius-side); /* 12px; Stärker abgerundete Ecken */
    transition: box-shadow 0.3s ease;
}

main:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* Schatten-Effekt bei Hover */
}

/* Typografie */
h1, h2, h3 {
    color: var(--heading-color);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-weight: bold; /* Alle Überschriften fett */
}

h1 { font-size: 2.0em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.1em; }

p {
    margin-bottom: 1em;
}

a {
    color: var(--nav-link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

ul, ol {
    margin-bottom: 1em;
}

ul.checklist {
    list-style: none;
    padding: 0;
}

ul.checklist li::before {
    content: "✓ ";
    color: var(--accent-color);
    font-weight: bold;
}

hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 2em 0;
}

/* --- Header und Navigation (Desktop-Styles) --- */
header {
    background-color: var(--header-bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 5px 1em 0px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Leichter Schatten */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.logo-desktop img {
    height: 150px;
    transition: transform 0.3s ease;
}
.logo-desktop img:hover {
    transform: rotate(-10deg); /* Zusätzlicher Rotationseffekt */
}

/* Dreht das Logo, wenn die Maus über den Titel-Link oder den Logo-Link fährt */
.header-container:hover .logo-desktop img {
    transform: rotate(-10deg);
}

.header-right-desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.header-right-top {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    flex-direction: row-reverse;
    gap: 15px;
}

.title-container {
    /* Fügt Abstand um den Titel hinzu, damit der Schatten nicht an andere Elemente stößt */
    padding: 5px;
}

.title-container h1 {
    margin-top: 15px; /* NEU: Entfernt den oberen Abstand der Überschrift im Header */
    font-size: 2.0em;
    font-weight: bold;
    color: var(--heading-color);
    transition: color 0.3s ease;
}

.title-link {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--heading-color);
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
    transition: color 0.3s ease;
}

.title-link:hover {
    color: var(--accent-color);
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
}

.social-icons {
}

.social-icon {
    height: 24px;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2); /* Icon wird bei Hover größer */
}

/* .social-icons i, .social-icons-mobile i {
    font-size: 1.4em;
    color: #1e3265;
    margin-right: 10px;
    transition: color 0.2s ease;
} */

/* .social-icons i:hover, .social-icons-mobile i:hover {
    color: #d6336c;
} */

.nav-desktop {
    display: flex;
    flex-direction: row;
}

/* Anpassung: Menüeinträge mit Hintergrund */
.nav-desktop a {
    background-color: var(--nav-item-bg);
    border-radius: calc(var(--border-radius-main) / 2); /* anstelle von 5px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-left: 5px;
    padding: 10px 15px;
    font-weight: bold;
    color: var(--nav-link-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.nav-desktop a:hover {
    background-color: var(--accent-color); /* Menü-Einträge wechseln zu Akzentfarbe */
    color: var(--card-bg-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transform: translateY(-2px);
}

.nav-desktop a.active {
    background-color: var(--heading-color);
    color: var(--card-bg-color);
    border-bottom: none;
}

/* NEU: Button-Stil für mehr Dynamik */
.button {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--accent-color);
    color: var(--card-bg-color);
    font-weight: bold;
    border-radius: var(--border-radius-main); /* anstelle von 50px */
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.header-top-mobile, .mobile-controls, .nav-mobile {
    display: none;
}

/* Container, der den Slogan- und den Briefwahl-Container umschließt */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 20px 0;
}

/* Styling für den Slogan-Bereich */
.slogan-container {
    background-color: var(--accent-color);
    color: var(--card-bg-color);
    padding: 1.5rem;
    margin: 0;
    border-radius: var(--border-radius-container); /* 8px; */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Zusätzliche Anpassung für den Slogan-Bereich */
.slogan-container p {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    display: block;
}

.slogan-container .sub-slogan {
    font-size: 1.1em;
    font-weight: normal;
    color: #ffd8c1;
    display: block;
    margin-top: 5px;
    line-height: 1.2;
}

/* Stil für den Briefwahl-Container */
.ballot-container {
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--card-bg-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Das Bild wird nun absolut positioniert */
.ballot-container img {
    height: 100px; /* Das Bild füllt die Höhe des Wrappers komplett aus */
}

/* --- Sektionen und spezielle Elemente --- */
.note {
    background-color: #f2f8f2; /* Hellere Akzentfarbe für den Hintergrund */
    border-left: 5px solid var(--accent-color);
    padding: 1.2em; /* Mehr Abstand */
    margin: 1.5em 0;
    border-radius: var(--border-radius-container); /* 8px; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.heading-text {
    /* Übernimmt die Farbe aus deiner CSS-Variable */
    color: var(--heading-color); 
    /* Setzt die Schriftgröße und -stärke, die du für <h3> definiert hast */
    font-size: 1.0em;
    font-weight: bold;
    /* Optional: Entfernt den Standard-Abstand, den h3-Tags haben */
    margin: 0;
}

.group-qr-container, .list-qr-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Wichtig für die Darstellung auf kleineren Bildschirmen */
    margin-bottom: 20px; /* Optional: Abstand nach unten */
}
.group-qr-container img, .list-qr-container img {
    max-width: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main); /* 10%; Optional: Macht das Foto rund */
}

.qr-code-container {
    padding: 10px;
    background-color: var(--card-bg-color);
    border: none /* 1px solid var(--border-color); */
}

/* Mitgliedertabelle */
.members-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
.members-table td {
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
    vertical-align: top;
    background-color: var(--card-bg-color);
}
/* NEU: Klasse nur für Mitgliederfotos */
.member-photo {
    height: 100px;
    width: auto;
    border-radius: var(--border-radius-foto); /* 10%; Optional: Macht das Foto rund */
}

/* Flexbox für die erste Spalte, um Bild und Text nebeneinander zu setzen */
.members-table td:first-child {
    /* Die folgenden Zeilen wurden entfernt, da sie nicht mehr benötigt werden:
    display: flex;
    align-items: center;
    gap: 15px; */
    width: 100px; /* Oder der gewünschte Wert */
    min-width: 100px;
    padding-right: 10px; /* Wert wurde verringert */
}

/* Stellt die Textausrichtung für die zweite Spalte sicher */
.members-table td:nth-child(2) {
    text-align: left;
    white-space: nowrap;
}

/* Regel für die dritte Zelle (die Flagge) */
.members-table td:last-child {
    margin-left: auto; /* Schiebt die Flagge ganz nach rechts */
    text-align: right; /* Richtet die Flagge rechtsbündig aus */
}


.members-table td img {
    margin-bottom: 0;
}
.member-info div {
    margin: 0;
}
.members-table strong {
    color: var(--nav-link-color);
    margin-bottom: 5px;
    display: block;
}
/* Event-Ankündigungen */
.event-card {
    display: flex;
    gap: 2rem; /* Abstand zwischen Bild und Text */
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.event-image {
    flex-shrink: 0; /* Verhindert, dass das Bild schrumpft */
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild den Container ausfüllt */
    border-radius: 8px;
}

.event-details {
    flex-grow: 1; /* Erlaubt dem Detailbereich, den restlichen Platz einzunehmen */
}

.event-details h2 {
    margin-top: 0;
    font-size: 1.5em;
    color: var(--heading-color);
}

.event-meta {
    font-size: 0.9em;
    color: #666;
    margin-top: -1em; /* Reduziert den Abstand zur Überschrift */
}

.event-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin-top: 5px;     /* Reduziert den Abstand zum Element darüber */
    margin-bottom: 10px; /* Reduziert den Abstand zum Element darunter */
}

.event-description {
    font-size: 1em;
}

.event-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--accent-color);
    color: var(--card-bg-color);
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.event-link:hover {
    background-color: var(--heading-color);
}

/* Stil für den Image-Link (der das Bild enthält) */
.event-image-link {
    display: inline-block;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    transition: none;
}

/* Stil für das Bild im Image-Link */
.event-image-link img {
    /* Optional: Füge hier spezifische Stile für das Bild hinzu, z. B. eine Hover-Animation */
    transition: transform 0.3s ease;
    width: 80px; /* Größe des Icons */
    height: 80px;
}

.event-image-link:hover img {
    transform: scale(1.1);
}

/* Positionierung der Links im Event-Card-Bereich */
.event-actions {
    display: flex;
    justify-content: space-between; /* Verteilt die Elemente auf die äußeren Ränder */
    align-items: center; /* Zentriert die Elemente vertikal */
    margin-top: 1em;
}

.event-link {
    /* Behalte die bisherigen Styles bei */
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--accent-color);
    color: var(--card-bg-color);
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.event-actions a:last-child {
    /* Der zweite Link soll keine zusätzlichen Styles haben,
       da er nur das Bild enthält. */
    margin-left: 0;
}

/* --- Footer-Styles --- */
footer {
    background-color: var(--nav-link-color);
    color: var(--card-bg-color);
    padding: 1.5em; /* Mehr Abstand */
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1.0em;
    font-weight: normal; /* Fügt diese Zeile hinzu, um die Fettschrift zu entfernen */
}
footer a {
    color: var(--card-bg-color);
    transition: color 0.3s ease, transform 0.3s ease;
}
footer a:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}
.footer-left {
    /* ... */
}
.footer-center {
    /* ... */
}
.footer-impressum {
    align-self: flex-end;
    font-size: 0.8em;
    padding-top: 5px;
}

/* Neue Regel für die Flyer-Bilder */
.flyer-img {
    max-width: 100%;
    height: auto;
    }

/* --- Responsive Design für kleinere Bildschirme (Mobile-Styles) --- */
@media (max-width: 768px) {
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    
    .logo-desktop, .header-right-desktop {
        display: none;
    }
    
    .header-container {
        flex-direction: column;
        align-items: center;
    }
    
    .header-top-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 5px 1em;
        flex-direction: row;
    }

    .header-top-mobile a img {
        height: 50px;
    }

    .title-container {
        display: block;
        margin-left: 10px;
        overflow: hidden;
    }
    
    .title-container h1 {
        margin: 0;
    }
    
    .title-link {
        font-size: 0.9em; /* Wert wurde von 1.1em auf 1.0em reduziert */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.1; 
    }
    
    .mobile-controls {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 2px 1em;
        /* border-top: 1px solid var(--border-color);*/
        background-color: var(--header-bg-color);
    }

    .social-icons-mobile {
        display: flex;
        align-items: center;
    }

/* Container, der den Slogan- und den Briefwahl-Container umschließt */
    .header-row {
        flex-direction: column; 
        align-items: center; 
        width: 100%; /* Stelle sicher, dass der Container die gesamte Breite einnimmt */
    }

    .slogan-container, 
    .ballot-container {
        width: 90%; /* Verwende einen Prozentsatz, um die Breite anzupassen */
        max-width: 500px; /* Optional: Setze eine maximale Breite, damit es auf größeren Tablets nicht zu breit wird */
        margin-bottom: 20px; /* Fügt Abstand zwischen den Containern hinzu */
        box-sizing: border-box; /* Stellt sicher, dass Padding nicht zur Gesamtbreite addiert wird */
        border-radius: var(--border-radius-main); /* 10%; Optional: Macht das Foto rund */
    }

    .ballot-container img {
        max-width: 80px; /* Reduziert die Bildgröße noch weiter */
        max-height: 80px;
    }

    .menu-toggle {
        display: block;
        background: var(--heading-color);
        color: var(--card-bg-color);
        border: none;
        padding: 3px 1em;
        font-size: 1.1em;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .nav-mobile {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        background-color: var(--card-bg-color);
    }
    
    /* Anpassung: Menüeinträge mit Hintergrund */
    .nav-mobile a {
        background-color: var(--nav-item-bg);
        border-radius: var(--border-radius-main); /* 5px; */
        margin: 5px 1em;
        padding: 1em;
        border-bottom: none;
    }
    
    .nav-mobile a:hover {
        background-color: var(--accent-color);
        text-decoration: none;
    }
    
    .nav-mobile a.active {
        background-color: var(--heading-color);
        color: var(--card-bg-color);
    }

    .nav-mobile.active {
        display: flex;
    }

    .group-qr-container, .list-qr-container {
        flex-direction: column;
    }

    .group-qr-container img,
    .list-qr-container img {
        width: 100%;
        height: auto;
        box-sizing: border-box; /* Wichtig, um Padding und Border mit einzubeziehen */
        border-radius: var(--border-radius-main); /* 10%; Optional: Macht das Foto rund */
    }

/* Neue Regel für die Flyer-Bilder */
    .flyer-img {
        max-width: 100%;
        height: auto;
    }

/* NEU: Mobile Footer-Styles */
    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

/* NEUE REGEL: Footer-Container auf mobile Geräte */
    .footer-left,
    .footer-center {
        width: 100%;
        margin-bottom: 10px; /* Fügt Abstand zwischen den Elementen hinzu */
    }

    .footer-impressum {
        align-self: center;
        font-size: 0.9em;
        padding-top: 10px;
    }

    .table-container {
        overflow-x: auto; /* Erlaubt horizontales Scrollen bei Bedarf */
        -webkit-overflow-scrolling: touch;
    }

/* Member-Tabelle wie eine Visitenkarte gestalten */
    .members-table {
        width: 100%;
        display: block; /* Stellt sicher, dass die Tabelle die gesamte Breite einnimmt */
    }

    .members-table tbody,
    .members-table tr {
        display: block; /* Macht Zeilen und Body zu Block-Elementen */
    }

    .members-table tr {
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 15px;
        padding-bottom: 15px;
        /* NEU: Flexbox für die Tabellenzeile selbst */
        display: flex;
        align-items: center;
        padding: 10px; /* Fügt inneren Abstand hinzu */
    }

    /* NEU: Anpassen der Zellen */
    .members-table td {
        display: block; /* Stellt sicher, dass td-Elemente korrekt gehandhabt werden */
        padding: 0; /* Entferne den Standard-Padding, da wir Flexbox-Abstand verwenden */
        border: none;
        font-size: 0.9em; /* Verkleinert die Schrift um 10% */
    }

    /* Regel für die erste Zelle (das Foto) */
    .members-table td:first-child {
        min-width: 80px; /* Gibt dem Foto eine feste Breite */
        max-width: 80px;
        margin-right: 15px; /* Abstand zum folgenden Text */
    }

    /* Regel für die zweite Zelle (Name und Beruf) */
    .members-table td:nth-child(2) {
        flex-grow: 1; /* Nimmt den restlichen verfügbaren Platz ein */
        text-align: left; /* Text linksbündig ausrichten */
    }

    /* Regel für die dritte Zelle (die Flagge) */
    .members-table td:last-child {
        margin-left: auto; /* Schiebt die Flagge ganz nach rechts */
        text-align: right; /* Richtet die Flagge rechtsbündig aus */
    }

    .member-photo {
        width: 100%; /* Das Foto füllt die Breite der Zelle */
        height: auto;
        border-radius: var(--border-radius-main); /* 10%; Optional: Macht das Foto rund */
    }

    .member-info strong {
        margin-bottom: 5px;
        display: block;
    }

    .event-card {
        flex-direction: column;
        gap: 1rem;
    }
    
    .event-image {
        width: 100%;
        height: 150px;
    }

    .event-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Stellt sicher, dass das Bild den Container ausfüllt */
        border-radius: 8px;
    }

    .event-details h2 {
        font-size: 1.3em;
    }

    .event-meta {
        margin-top: 0;
    }
}