/* ==================================
   KKV KARBACH - DESIGN SYSTEM
================================== */

/* ==================================
   Variablen für die ganze Seite definieren
================================== */


/* Style welcher für die ganze HTML Seite gültig ist */
:root {

    /* Variablen zur Wiederverwendung definieren */
    --primary: #0a4faf;
    --primary-dark: #152240e6;
    --primary-light: #3B82F6;

    /* Buttons und sonstige Elemente Abrunden */
    --radius: 24px;

}

/* ==================================
   Initialisierung
================================== */

html {

    scroll-behavior: smooth;
    /* sanftes scrollen auf der seite */
}

body {

    font-family: Arial, sans-serif;

    /* background: var(--background); */
    background: #0F172A;

    color: white;

    line-height: 1.7;

    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

/* Footer copyright einrücken */
#copyright {
    padding-left: 20px;
}

/* ==================================
   Breite der Webseite einstellen
================================== */

.page-wrapper {
    max-width: 1600px;
    /* Die Webseite wird maximal 1600 Pixel breit */
    margin: 0 auto;
    /* Der magische Befehl: Zentriert den Container perfekt in der Mitte */

    /* HIER IST DER RAHMEN */
    border: 1px solid #0a4faf;
    /* 1 Pixel breit, durchgezogen, dezentes Grau */
    border-radius: 8px;
    /* Optional: Leicht abgerundete Ecken für ein modernes Design */

    /* OPTIONAL: Ein feiner Schatten, der den Rahmen plastischer wirken lässt */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    /* Optional: Innenabstand, damit Texte nicht direkt an den neuen Rahmen quetschen */
    padding: 0px;
    box-sizing: border-box;
    /* Sorgt dafür, dass das Padding die 1200px nicht vergrößert */
}

/* ==================================
   Breite des Inhalts der Startseite einstellen
================================== */
.container-startseite {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* ==================================
   HEADER
================================== */

/* Standard Ansicht z.B. im Edge light mode */
header {

    position: sticky;
    top: 0;

    z-index: 1010;

    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));


    backdrop-filter: blur(15px);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, .05);

}

/* Menü */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.2rem;
    padding-top: 5px;
    padding-bottom: 15px;
}

.logo img {
    width: 200px;
}

nav {
    display: flex;
    gap: 25px;
}

nav a {
    color: white;
    font-weight: 600;
    transition: .3s;
}

nav a:hover {
    color: dodgerblue;
}

/* Ticket Button im Menü */
.navtickets {
    background: rgba(30, 41, 59, .85);
    border-radius: var(--radius);
    padding: 10px;
    margin-top: -10px;
    font-weight: 600;
    text-align: center;
}

.navtickets:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}


/* ==================================
   BURGER Menü für Mobile Ansicht - deaktiviert bei Desktop
================================== */

#burger {

    display: none;
    border: none;
    background: none;
    font-size: 2rem;
    cursor: pointer;
    color: white;
}

/* ==================================
   Menü für Mobile Ansicht im dunklen Schema
================================== */

@media(prefers-color-scheme:dark) {

    header {

        background:
            linear-gradient(135deg,
                var(--primary-dark),
                var(--primary));
    }
}

/* ==================================
   Zusammengefasste Mobile Ansicht (unter 800px)
================================== */

@media(max-width: 800px) {

    /* Burger-Button auf dem Handy einblenden */
    #burger {
        display: block !important;
    }

    /* Das mobile Menü absolut sicher verstecken */
    #nav {
        display: none;
        /* Kompakter Schutz: Solange es zu ist, existiert es visuell nicht */
        position: fixed;
        right: 0;
        top: 90px;
        /* Genau unter deinem Header */
        width: 280px;
        height: calc(100vh - 90px);
        /* Nutzt exakt den restlichen Bildschirm */
        background: #083B82;
        flex-direction: column;
        padding: 30px;
        box-shadow: -10px 0 20px rgba(0, 0, 0, .15);
        z-index: 10000;
        gap: 20px;
        /* Ordentlicher Abstand der Links untereinander */
    }

    /* Ticket-Button im mobilen Menü optisch anpassen */
    .navtickets {
        margin-top: 10px !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .navtickets:hover {
        transform: none !important;
        /* Deaktiviert den Desktop-Hover auf Touchscreens */
    }

    /* NUR WENN DAS MENÜ GEÖFFNET IST: Sichtbar schalten */
    #nav.active {
        display: flex !important;
        /* Schaltet von 'none' auf 'flex' um, wenn angeklickt */
    }
}


/* ==================================
   SECTIONS
================================== */

section {

    padding: 0px 0;
}

section h2 {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 0px;

    color: white;
}


/* ==================================
   Section Slideshow owl-slideshow
================================== */

.btn {

    padding: 15px 30px;

    border-radius: 999px;

    font-weight: 700;

    transition: .3s;
}

/* Media Query für Smartphones (Bildschirme bis 768px Breite) */
@media (max-width: 768px) {

    /* 1. Slider-Höhe fixieren, damit Bilder nicht verzerrt werden */
    .owl-slideshow .item {
        position: relative;
        height: 60vh;
        /* Nutzt 60% der Bildschirmhöhe */
        overflow: hidden;
    }

    /* 2. Bilder responsive machen und beschneiden (Zentriert) */
    .owl-slideshow .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Schneidet das Bild passend zu ohne es zu quetschen */
        object-position: center;
    }

    /* 3. Text-Inhalt für Touchscreens optimieren */
    .owl-slideshow .content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        z-index: 3;
    }

    /* 4. Schriftgrößen drastisch verkleinern */
    .owl-slideshow .content h2 {
        font-size: 1.5rem !important;
        /* Kleinere Überschrift */
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .owl-slideshow .content p {
        font-size: 0.9rem !important;
        /* Kleinerer Fließtext */
        margin-bottom: 15px;
        text-align: center;
    }

    /* 5. Button-Größe an Touch-Bedienung anpassen */
    .owl-slideshow .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        display: inline-block;
    }

    /* 6. Das dunkle Overlay verstärken für bessere Lesbarkeit des Textes */
    .owl-slideshow .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* 50% Abdunklung */
        z-index: 2;
    }

    /* 7. Die Zahlen-Navigation (Dots) platzsparend positionieren */
    #custom-dots {
        bottom: 10px !important;
    }
}


/* ==================================
   Section Schnellzugriffe
================================== */

.quick-links {
    background: white;
    padding-bottom: 20px;

}

/* WICHTIG: Überschreibt das Standard-Box-Modell, damit Abstände die Breite nicht verzerren */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.container-quicklink h2 {
    color: var(--primary);
    margin-top: 0px;
}

/* Container für die Kacheln */
.linkbilder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Desktop: 4 nebeneinander */
    gap: 20px;
    width: 100%;
    /* Nutzt den verfügbaren Platz */
    max-width: 1200px;
    margin: 0 auto;
}

/* Link-Button Container */
.link-button {
    display: block;
    width: 100%;
    /* Füllt die Grid-Zelle komplett aus */
    overflow: hidden;
    border-radius: 8px;
}

/* Die entscheidende Korrektur für die Bilder */
.link-button img {
    width: 100%;
    /* Zwingt das Bild auf Spaltenbreite */
    max-width: 100%;
    /* Erlaubt dem Bild dynamisch zu schrumpfen */
    height: auto;
    /* Behält das richtige Seitenverhältnis bei */
    display: block;
    object-fit: cover;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    .linkbilder {
        grid-template-columns: repeat(2, 1fr);
        /* Mobil: 2 Spalten, 2 Zeilen (2x2) */
        gap: 15px;
        padding: 0 15px;
    }
}



/* ==================================
   SECTION Verein
================================== */


.verein {
    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));
}

/* Flexbox-Container für das Nebeneinander */
.container-verein {
    display: flex;
    align-items: center;
    /* Zentriert Bild und Text vertikal zueinander */
    gap: 0px;
    /* Abstand zwischen Bild und Textbereich */
}

/* Linke Seite: Bild-Box */
.verein-bild {
    flex: 1;
    /* Nimmt die Hälfte des Platzes ein */
}

.verein-bild img {
    max-width: 100%;
    /* Verhindert, dass das Bild über den Rand hinausragt */
    height: auto;
    display: block;
}

/* Rechte Seite: Text-Box */
.verein-text {
    flex: 1;
    /* Nimmt die andere Hälfte des Platzes ein */
    color: white;
}

/* Abstand unter der Überschrift und dem Text */
.verein-text h2 {
    margin-bottom: 15px;
    color: white;
}

.verein-text p {
    margin: 20px;
    text-align: center;
    line-height: 1.6;
    /* Erhöht die Lesbarkeit des Textes */
}


/* Link Button */
.btn-verein {
    display: inline-block;
    background: rgba(30, 41, 59, .85);
    border-radius: var(--radius);
    padding: 25px;
    margin-left: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.btn-verein:hover {

    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

/* Responsive Design: Auf Smartphones alles untereinander anzeigen */
@media (max-width: 768px) {
    .container-verein {
        display: flex;
        flex-direction: column;
        /* Schaltet von nebeneinander auf untereinander um */
    }

    .verein-text {
        text-align: center;
        /* Zentriert den Text optional auf dem Handy */
        padding: 20px;
    }

}



/* ==================================
   SECTION Vereinsheim
================================== */


.halle {
    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));
}

/* Flexbox-Container für das Nebeneinander */
.container-halle {
    display: flex;
    align-items: center;
    /* Zentriert Bild und Text vertikal zueinander */
    gap: 0px;
    /* Abstand zwischen Bild und Textbereich */
}

/* Linke Seite: Bild-Box */
.halle-bild {
    flex: 1;
    /* Nimmt die Hälfte des Platzes ein */
}

.halle-bild img {
    max-width: 100%;
    /* Verhindert, dass das Bild über den Rand hinausragt */
    height: auto;
    display: block;
}

/* Rechte Seite: Text-Box */
.halle-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Nimmt die andere Hälfte des Platzes ein */
    color: white;
}

/* Abstand unter der Überschrift und dem Text */
.halle-text h2 {
    margin-bottom: 15px;
    color: white;
}

.halle-text p {
    margin: 20px;
    text-align: center;
    line-height: 1.6;
    /* Erhöht die Lesbarkeit des Textes */
}


/* Link Button */
.btn-halle {
    display: flex;
    background: rgba(30, 41, 59, .85);
    border-radius: var(--radius);
    padding: 25px;
    margin-right: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    justify-content: flex-end;
    align-self: flex-end;
    width: auto;
}

.btn-halle:hover {

    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

/* Responsive Design: Auf Smartphones alles untereinander anzeigen */
@media (max-width: 768px) {

    .container-halle {
        display: flex;
        flex-direction: column;
        /* Schaltet von nebeneinander auf untereinander um */
    }

    /* Bild explizit nach oben setzen (Reihenfolge 1) */
    .halle-bild {
        order: 1 !important;
        width: 100%;
    }

    .halle-text {
        order: 2 !important;
        text-align: center;
        /* Zentriert den Text optional auf dem Handy */
        padding: 20px;
    }

    .halle-bild img {
        width: 100%;
    }

    .btn-halle {
        display: inline-block;
        /* Erlaubt die Berechnung von Außenabständen */
        margin-left: auto;
        /* Schiebt den Button von links in die Mitte */
        margin-right: auto;
        /* Schiebt den Button von rechts in die Mitte */
        margin-top: 15px;
        /* Optional: Erzeugt etwas Abstand zum Text darüber */
    }
}

/* ==================================
   SECTION Ehrenamt
================================== */


.ehrenamt {
    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));
}

/* Flexbox-Container für das Nebeneinander */
.container-ehrenamt {
    display: flex;
    align-items: center;
    /* Zentriert Bild und Text vertikal zueinander */
    gap: 0px;
    /* Abstand zwischen Bild und Textbereich */
}

/* Linke Seite: Bild-Box */
.ehrenamt-bild {
    flex: 1;
    /* Nimmt die Hälfte des Platzes ein */
}

.ehrenamt-bild img {
    max-width: 100%;
    /* Verhindert, dass das Bild über den Rand hinausragt */
    height: auto;
    display: block;
}

/* Rechte Seite: Text-Box */
.ehrenamt-text {
    flex: 1;
    /* Nimmt die andere Hälfte des Platzes ein */
    color: white;
}

/* Abstand unter der Überschrift und dem Text */
.ehrenamt-text h2 {
    margin-bottom: 15px;
    color: white;

}

.ehrenamt-text p {
    margin-bottom: 25px;
    line-height: 1.6;
    /* Erhöht die Lesbarkeit des Textes */
    margin: 20px;
    text-align: center;
}


/* Link Button */
.btn-ehrenamt {
    display: inline-block;
    background: rgba(30, 41, 59, .85);
    border-radius: var(--radius);
    padding: 25px;
    margin-left: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.btn-ehrenamt:hover {

    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

/* Responsive Design: Auf Smartphones alles untereinander anzeigen */
@media (max-width: 768px) {
    .container-ehrenamt {
        display: flex;
        flex-direction: column;
        /* Schaltet von nebeneinander auf untereinander um */
    }

    .ehrenamt-text {
        text-align: center;
        /* Zentriert den Text optional auf dem Handy */
        padding: 20px;
    }
}

/* ==================================
  Section  SOCIAL
================================== */

.social {
    background: white;
    padding: 20px;
}

.container-social h2 {
    color: var(--primary);
    margin-top: 0px;
    padding-top: 20px;
}

/* Wrapper für die  Social-Media-Links, damit sie nebeneinander stehen */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    /* Abstand zwischen den beiden Logos */
    flex-wrap: wrap;
    /* Bricht auf kleinen Handys automatisch um */
}

/* Formatierung für die Links und den Rahmen */
.social-links a {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.2);
    /* Dezenter Standard-Rahmen */
    border-radius: 12px;
    /* Leicht abgerundete Ecken */
    overflow: hidden;
    /* Hält das Bild exakt im Rahmen */
    transition: all 0.4s ease;
    /* Macht die Animation flüssig */
    line-height: 0;
    /* Verhindert unschöne Abstände unter dem Bild */
}

/* Größe der Bilder anpassen */
.social-links img {
    width: 250px;
    /* Hier die gewünschte Breite einstellen (z.B. kleiner als vorher) */
    height: auto;
    /* Proportionale Höhe */
    transition: transform 0.4s ease;
}

/* Der Hover-Effekt: Glänzender Rahmen und leichtes Aufleuchten */
.social-links a:hover {
    border-color: #fff;
    /* Rahmen wird weiß/hell beim Drübergehen */
    /* Erzeugt einen intensiven, glänzenden Leuchteffekt nach außen */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
    filter: brightness(1.15);
    /* Lässt das Bild minimal heller glänzen */
}

/* Minimaler Zoom-Effekt für das Bild beim Hover (optional) */
.social-links a:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {

    .container-social h2 {
        font-size: 1.5rem !important;
        /* Kleinere Überschrift */
        line-height: 1.3;
        margin-bottom: 15px;
    }
}

/* ==================================
   FOOTER
================================== */

footer {

    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));

    color: white;

    padding: 80px 0;
}

.footer-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    text-align: center;
}

footer h3 {

    margin-bottom: 20px;
}

footer a {

    display: block;

    color: white;

    margin-bottom: 10px;
}

/* ==================================
   MOBILE
================================== */




@media(prefers-color-scheme:dark) {

    body {

        background: #0F172A;

        color: white;
    }

    .card {

        background:
            linear-gradient(135deg,
                var(--primary-dark),
                var(--primary));

        color: white;
    }

    nav a {

        color: white;
    }

}

/* ==================================
   Kalender.html Google Kalender
================================== */

/* ==================================
   Kalender.html Überschrift Dynamische Größe bei Mobiler Ansicht
================================== */

.container-kalender h2 {
    /* clamp(Mindestgröße, Dynamische Größe, Maximalgröße) */
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
    /* Optional: Zentriert die Überschrift */
    margin-bottom: 20px;
}


.container-kalender h3 {
    /* clamp(Mindestgröße, Dynamische Größe, Maximalgröße) */
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-left: 20px;
}

/* ==================================
   Kalender.html Kalender Einträge größer als Datum
================================== */
/* Styling für die gesamte Liste */
.kkv-event-liste {
    list-style: none;
    padding: 0;
    margin-left: 50px;
}

/* Einzelner Listeneintrag */
.kkv-event-liste li {
    /* padding: 10px 0; */
    /* border-bottom: 1px solid #eef2f5; */
    display: flex;
    flex-direction: column;
    /* Stapelt Datum und Titel übereinander */
    gap: 4px;
}

/* Das Datum (kleiner und dezenter) */
.event-liste-datum {
    font-size: 0.9rem;
    color: #bfd0d1;
    font-weight: 500;
}

/* Der Event-Name (deutlich größer und hervorgehoben) */
.event-liste-titel {
    margin: 0;
    font-size: 1.3rem;
    /* Macht den Namen größer */
    color: #b4d4f5;
    font-weight: bold;
}

/* ==================================
   Kalender.html Google Kalender auf voller Größe
================================== */
/* Container auf volle Breite setzen */
.container-kalender {
    text-align: left;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
}

.container-kalender iframe {
    border: none;
    width: 100%;
    height: 1000px;
    overflow: hidden;
}

/* ==================================
   mitglied-werden.html Download Buttons formatieren
================================== */


/* Basis-Container */
.container-kontakt {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
}

/* Texte mobil anpassen */
.container-kontakt h2,
.container-kontakt h3 {
    font-size: 1.7rem;
    line-height: 1.5;
    margin-bottom: 20px;
    word-wrap: break-word;
    /* Verhindert, dass lange E-Mails das Layout sprengen */
}

/* Desktop-Ansicht (Standard): 2 Spalten nebeneinander */
.downloadbilder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 30px;
}

/* Link-Button Container */
.download-button {
    display: block;
    width: 100%;
    overflow: hidden;
    color: inherit;
    /* Nutzt Textfarbe der Website */
    font-size: 1.2rem;
    text-decoration: none;
}

/* Text unter dem Bild etwas absetzen */
.download-button span {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

/* Runden Bildern ein schönes Format geben */
.download-button img {
    width: 100%;
    max-width: 250px;
    /* Begrenzt die Bildgröße auf großen Bildschirmen */
    height: auto;
    display: block;
    margin: 0 auto;
    /* Zentriert das Bild im Button */
    object-fit: cover;
    border-radius: 70px;
    /* Behält Ihre runden Ecken bei */
}

/* Klickbarer E-Mail-Link */
.kontakt-link {
    color: #0066cc;
    text-decoration: underline;
}

/* Mobile Ansicht (Smartphones) */
@media (max-width: 768px) {
    .downloadbilder {
        grid-template-columns: 1fr;
        /* Schaltet auf 1 Spalte untereinander um */
        gap: 30px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .container-kontakt h2 {
        font-size: 1.3rem;
        /* Etwas kleinere Überschrift für Handys */
    }

    .download-button {
        font-size: 1.1rem;
        /* Textgröße für Mobilgeräte optimiert */
    }
}



/* ==================================
   mitglied-werden.html Google Whats-App Kontaktformular
================================== */

.whatsapp-form {
    max-width: 450px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    border: 1px solid #e0e0e0;
}

.whatsapp-form h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: #0a4faf;
    text-align: center;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    /* Verhindert, dass das Formular zu breit wird */
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #128C7E;
    outline: none;
    box-shadow: 0 0 0 2px rgba(18, 140, 126, 0.2);
}

.whatsapp-btn {
    width: 100%;
    padding: 0.85rem;
    background-color: #25D366;
    /* WhatsApp Grün */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.whatsapp-btn:hover {
    background-color: #0a4faf;
    /* Dunkleres Grün */
}

.whatsapp-btn:active {
    transform: scale(0.98);
}


/* ==================================
   impressum.html und datenschutz.html
================================== */

.container-impressum,
.container-datenschutz {
    text-align: left;
    width: 80%;
    padding-left: 20%;
}

/* ==================================
   ueber-uns.html 40Jahre.html ordenzeitstrahl.html
================================== */

/* Container auf volle Breite setzen */
.container-ueberuns {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
}

/* Texte mobil anpassen */
.container-ueberuns h2 {
    font-size: 1.7rem;
    line-height: 1.5;
    margin-bottom: 20px;
    word-wrap: break-word;
}


/*--------- Vertikales Menü - Überschriften nebeneinander ausrichten ---------------*/
.ueberschriften-container {
    display: flex;
    justify-content: space-around;
    /* Gleichmäßige Verteilung */
    margin-bottom: 30px;
    border-bottom: 2px solid #eaeaea;
}

/* Vertikales Menü - Einzelne Überschriften stylen und Klickbar machen */
.ueberschriften-container h3 a {
    font-size: 1.5rem;
    /* Standardgröße für den PC */
    line-height: 1.5;
    color: white;
    margin: 5;
    /* WICHTIG: Auf 0 gesetzt, sonst schwebt die aktive Linie! */
    padding: 10px 20px;
    /* Klickbereich um den Text herum */
    cursor: pointer !important;
    /* Erzwingt die Klick-Hand */
    white-space: nowrap;
    /* Verhindert Textumbruch auf dem PC */
    user-select: none;
    /* Verhindert, dass der Text markiert wird */
    -webkit-user-select: none;
    /* Für Safari/Chrome */
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    /* Unsichtbare Linie als Platzhalter für den Übergang */
}

/* --- OPTIMIERUNG FÜR SMARTPHONES (Bildschirme unter 600px) --- */
@media (max-width: 600px) {
    .ueberschriften-container {
        flex-direction: column;
        /* Schaltet von neben- auf untereinander um */
        align-items: stretch;
        /* Buttons strecken sich über die volle Breite */
        border-bottom: none;
        /* Entfernt die lange horizontale Linie */
        gap: 0px;
        /* Abstand zwischen den vertikalen Buttons */
        margin-bottom: 10px;
        /* Abstand zum Inhalt darunter */
    }

    .ueberschriften-container h3 {
        font-size: 1.1rem !important;
        /* Verkleinert die h3-Schriftart sicher auf dem Handy */
        text-align: center;
        /* Zentriert den Text im Button */
        background-color: #545bee;
        /*  Hintergrund für echte Button-Optik */
        border: 1px solid #eaeaea !important;
        border-radius: 6px;
        padding: 12px !important;
        /* Mehr Klickfläche für den Daumen */
        white-space: normal;
        /* Erlaubt Zeilenumbruch, falls ein Titel extrem lang ist */
        margin-bottom: 0px !important;
    }

}

/* ==================================
   ueber-uns.html Historie und Bilder in Lightbox Galerie
================================== */

/* Galerie-Vorschau über dem Text zentriert */
.image-preview-gallery {
    display: flex;
    justify-content: center;
    /* Zentriert die Bilder horizontal */
    flex-wrap: wrap;
    /* NEU: Erlaubt automatischen Zeilenumbruch auf Handys */
    gap: 12px;
    /* Abstand zwischen den Bildern (etwas kompakter für Handys) */
    margin-bottom: 20px;
    /* Abstand zum Text darunter */
}

/* Kleine Vorschaubilder */
.zoom-img {
    width: 200px;
    /* Gewünschte Breite der kleinen Bilder */
    height: 160px;
    /* Gewünschte Höhe */
    object-fit: cover;
    /* Schneidet das Bild sauber zu */
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Kleiner Hover-Effekt signalisiert Klickbarkeit */
.zoom-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Container für Bild und Text, um sie vertikal auszurichten */
.lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 75%;
}

/* Styling für die Bildunterschrift */
.lightbox-caption {
    color: #fff;
    font-size: 1.2rem;
    margin-top: 15px;
    /* Abstand zum Bild */
    text-align: center;
    font-family: sans-serif;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    /* Macht es auf dunklem Grund extrem gut lesbar */
    max-width: 100%;
}

/* Das Lightbox-Overlay ist standardmäßig unsichtbar, nutzt aber Flexbox für die Pfeile */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Etwas dunkler für besseren Fokus */
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Gestylte Pfeiltasten */
.lightbox-prev,
.lightbox-next {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 30px;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
    user-select: none;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Bildanpassung, damit Platz für die Pfeile bleibt */
.lightbox-content {
    max-width: 75%;
    max-height: 85%;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Schließen-Button oben rechts */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Schließt das Overlay, wenn man auf den leeren Hintergrund klickt */
.lightbox {
    cursor: zoom-out;
}

.lightbox-content,
.lightbox-prev,
.lightbox-next {
    cursor: default;
}


/* Animation für das Öffnen */
@keyframes zoomEffect {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Klasse für den sanften Übergang bei mobiler Ansicht*/
.fade-effect {
    animation: fadeIn 0.3s ease-in-out;
}

/* Die dazugehörige Animation: von unsichtbar zu sichtbar */
@keyframes fadeIn {
    from {
        opacity: 0.3;
        transform: scale(0.98);
        /* Minimaler Zoom-Effekt für Dynamik */
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Optimierung der Vorschaubilder speziell für Smartphones */
@media (max-width: 500px) {
    .zoom-img {
        width: calc(33.33% - 10px);
        /* Exakt 3 Bilder pro Zeile auf dem Handy */
        height: 75px;
        /* Etwas flacher für den kleinen Bildschirm */
    }
}

/* --- Vollständige und sichere Korrektur für die Smartphone-Lightbox --- */
@media (max-width: 600px) {

    /* 1. Flexbox aufheben: Wir stapeln nicht mehr starr nebeneinander */
    .lightbox {
        display: none;
        position: fixed;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden;
        padding: 0;
    }

    /* 2. Den Wrapper absolut in der Mitte des Handys positionieren */
    .lightbox-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90% !important;
        max-width: 90% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* 3. Das Bild radikal begrenzen – es DARF nicht breiter als das Handy werden */
    .lightbox-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        /* Wichtig: Hebt Mindestbreiten von Browsern auf */
        height: auto !important;
        max-height: 65vh !important;
        /* Lässt genug Platz für den Text unten */
        object-fit: contain !important;
        /* Behält die echten Proportionen bei */
        display: block;
        margin: 0 auto;
    }

    /* 4. Text-Anpassung */
    .lightbox-caption {
        font-size: 1rem !important;
        margin-top: 15px !important;
        width: 100%;
        text-align: center !important;
        box-sizing: border-box;
    }

    /* 5. Die Pfeile komplett unsichtbar machen (Steuerung läuft ja per Wischgeste) */
    .lightbox-prev,
    .lightbox-next {
        display: none !important;
    }

    /* 6. Schließen-X gut positionieren */
    .lightbox-close {
        top: 20px !important;
        right: 25px !important;
        font-size: 40px !important;
        z-index: 10000;
    }
}



/* =================Karten design der einzelnen Geschichts-Abschnitte================= */
.history-block {
    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));
    border: 1px solid #e0e0e0;
    /* Sehr feine, hellgraue Rahmenlinie */
    border-radius: 8px;
    /* Abgerundete Ecken */
    padding: 5px;
    /* Innenabstand, damit Text nicht am Rand klebt */
    margin-bottom: 20px;
    /* Großzügiger Abstand zum nächsten Block */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Minimaler, weicher Schatten nach unten */
}


.history-block h2 {
    margin-top: 0;
    color: white;
    /* Dunkles Blau-Grau für bessere Lesbarkeit */
}

/* ================= Blocksatz überall in Paragraphen================= */

.text-justify {
    text-align: justify !important;
    text-justify: inter-word;
    padding: 15px;

    /* Automatische Worttrennung bei langen Wörtern aktivieren */
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ================= Darstellung des Gründungsvorstands ================= */

.board-section-modern {
    margin: 0 px;
    padding: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.board-intro {
    font-size: 1.05rem;
    margin-bottom: 20px;
    text-align: left !important;
}

/* Das Grid verteilt die Boxen intelligent */
.board-grid-modern {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

/* Basis-Styling für jede Personen-Karte */
.board-card {
    grid-column: span 2;
    /* Normale Karten nehmen 2 von 6 Spalten ein (3er Reihe) */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* Die beiden Vorsitzenden oben bekommen mehr Gewicht */
.board-card.leader {
    grid-column: span 3;
    /* Vorsitzende nehmen 3 von 6 Spalten ein (2er Reihe) */
    border-color: #cbd5e1;
}

.board-card .role {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #007bff;
    /* Akzentfarbe für das Amt */
    font-weight: bold;
    margin-bottom: 5px;
}

.board-card .name {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

/* Smartphone-Ansicht: Alles sauber untereinander stapeln */
@media (max-width: 650px) {
    .board-grid-modern {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .board-card {
        align-items: flex-start;
        /* Auf dem Handy Text lieber linksbündig in der Karte */
        padding: 12px 15px;
    }
}

/* =================Ansicht der Veranstaltungsliste in zwei Spalten================= */

/* Zweispaltiges Layout für die Veranstaltungsliste */
.two-column-list {
    column-count: 2;
    /* Teilt die Liste in genau 2 Spalten auf */
    column-gap: 40px;
    /* Abstand zwischen den beiden Spalten */
    list-style-position: outside;
    /* Setzt die Punkte LINKS NEBEN den Text */
    padding-left: 200px;
    /* Gibt den Punkten Platz, damit sie nicht abgeschnitten werden */
    margin-top: 15px;
    text-align: left !important;
    /* Garantiert die linksbündige Ausrichtung */
}

/* Einzelne Listenpunkte */
.two-column-list li {
    break-inside: avoid;
    /* Verhindert unschöne Umbrüche zwischen Spalten */
    margin-bottom: 8px;
    /* Abstand zwischen den einzelnen Punkten */
    padding-left: 5px;
    /* Minimaler Abstand zwischen Punkt und Text */
    text-align: left !important;
}

/* Responsive Anpassung: Auf Handys wieder einspaltig anzeigen */
@media (max-width: 600px) {

    .two-column-list,
    .two-column-list li {
        column-count: 1;
        /* Schaltet auf Smartphones auf 1 Spalte zurück */
        text-align: left !important;
        /* Überschreibt die Zentrierung auf dem Smartphone absolut sicher */
        padding-left: 20px;
    }
}

/* ==================================
   PDF Anzeige im Webbrowser
================================== */

/* PDF-Container und das Embed-Element auf 100% Breite bringen */
.pdf40jahre {
    width: 100%;
    margin-top: 30px;
}

.pdf40jahre iframe {
    width: 100%;
    height: 80vh;
    /* Nutzt 80% der verfügbaren Bildschirmhöhe für komfortables Lesen */
    border: none;
    border-radius: 8px;
    /* Optionale leicht abgerundete Ecken */
}

/* Optimierung für Smartphones */
@media (max-width: 768px) {
    .pdf40jahre iframe {
        height: 80vh;
        /* Auf Handys etwas kompakter */
    }
}

/* ==================================
   Kulturhalle.html
================================== */
.container-kulturhalle {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
}

/* Texte mobil anpassen */
.container-kulturhalle h2 {
    font-size: 1.7rem;
    line-height: 1.5;
    margin-bottom: 20px;
    word-wrap: break-word;
}

/* Link zu Google Maps unter der Überschrift */
.maps-link-container {
    display: inline-flex;
    /* Sorgt dafür, dass der Linkbereich so klein wie möglich bleibt */
    align-items: center;
    gap: 6px;
    /* Kleinerer Abstand zwischen Icon und Text */
    font-size: 14px;
    /* Feste, kleinere Schriftgröße unabhängig von der H2 */
    font-weight: 600;
    color: #ffffff !important;
    /* Weißer Text */
    text-decoration: none;
    /* Entfernt den Unterstrich */
    border: 1px solid #222222;
    /* Dezenter, dunkler Rahmen */
    border-radius: 6px;
    /* Leicht abgerundete Ecken */
    padding: 6px 12px;
    /* Geringeres Padding für eine kompakte Darstellung */
    margin-top: 14px;
    /* Abstand zur obigen Überschrift */
    background-color: #2c2c2c;
    /* Dunkler Hintergrund für perfekten Kontrast */
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
}

/* Effekt beim Drüberfahren über den Google Link (Hover) */
.maps-link-container:hover {
    background-color: #1a73e8;
    /* Hintergrund wechselt zu Google-Blau */
    border-color: #1a73e8;
    color: #ffffff !important;
    /* Text bleibt weiß */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* Sanfter Schatteneffekt */
}

/* Das rote Google-Standort-Symbol */
.maps-pin-icon {
    width: 16px;
    /* Etwas kleineres Icon passend zum kompakteren Text */
    height: 16px;
    color: #ea4335;
    /* Das originale Google-Maps-Rot */
    flex-shrink: 0;
}

/* ==================================
   ehrenamt.html 
================================== */

/* Basis-Container */
.container-ehrenamt-seite {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
}

.container-ehrenamt-seite h1 {
    margin: 10px;
    margin-top: 5px;
}

/* Texte mobil anpassen */
.container-ehrenamt-seite h2,
.container-ehrenamt-seite h3 {
    font-size: 1.7rem;
    line-height: 1.5;
    margin-bottom: 20px;
    word-wrap: break-word;
}

/* --- Bild-Styling --- */
.ehrenamt-img {
    width: 80%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 auto 30px auto;

}

/* --- Fließtext --- */
.text-ehrenamt {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- Aufgaben-Liste (Zweispaltig) --- */
.aufgaben-titel {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Anzeige der Ehrenamtlichen Aktivitäten */
.aufgaben-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
    padding: 10px;
}

.aufgabe-item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));
    border: 1px solid #e0e0e0;
    padding: 10px 10px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
}

.aufgabe-icon {
    color: #25d366;
    /* Grüner Haken */
    font-weight: bold;
    flex-shrink: 0;
}

/* --- Call to Action & Kontakt --- */
.cta-box {
    text-align: center;
    background:
        linear-gradient(135deg,
            var(--primary-dark),
            var(--primary));
    border-left: 4px solid #1a73e8;
    padding: 20px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 40px;
}

.cta-titel {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* --- E-Mail Link --- */
.kontakt-links {
    margin: 0;
}

.kontakt-links a {
    color: #4288e3;
    text-decoration: none;
    font-weight: 800;
}

.kontakt-links a:hover {
    text-decoration: underline;
}

/* ==================================
   verein-unterstuetzen.html 
================================== */

/* Basis-Container */
.container-unterstuetzen {
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
}

.container-unterstuetzen h1 {
    margin: 10px;
    margin-top: 5px;
}

/* Texte mobil anpassen */
.container-unterstuetzen h2,
.container-unterstuetzen h3 {
    font-size: 1.7rem;
    line-height: 1.5;
    margin-bottom: 20px;
    word-wrap: break-word;
}

/* --- Bild-Styling --- */
.container-unterstuetzen img {
    width: 40%;
    height: auto;
    /* max-height: 400px;  */
    object-fit: cover;
    border-radius: 12px;
    margin: 0 auto 30px auto;
}