/* ==================================================
   SÄNGERRUNDE ST. MARIENKIRCHEN - VERSION 4.0
   Fokus: Moderner Card-Look & Aufgehelltes Design
   ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Source+Sans+Pro:wght@400;600&display=swap');

:root {
    --primary: #1a4d2e;      /* Dunkelgrün */
    --accent: #FFD700;       /* Gold */
    --accent-dark: #b8941f;  /* Dunkles Gold */
    --text: #2c3e35;
    --white: #ffffff;
    --bg-page: #f7f7f2;      /* NEU: Sehr helles, freundliches Hintergrundgrau */
}

/* 1. LAYOUT & BASIS */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }

body {
    font-family: 'Source Sans Pro', sans-serif !important;
    background-color: var(--bg-page) !important; /* Ganze Seite wird hellgrau */
    color: var(--text);
    line-height: 1.5;
}

#wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background: transparent !important; /* Wrapper transparent für Card-Effekt */
    overflow: visible;
}

/* 2. HEADER ALS KARTE */
#main-header {
    background: var(--white);
    border-radius: 12px; /* Rundet jetzt alle vier Ecken des Containers */
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px;
    /* ÄNDERUNG: Hintergrund wie Menübar */
    background-color: var(--primary) !important; 
    /* Optional: Eine feine goldene Linie unten als Abschluss zum Bild */
    border-bottom: 2px solid var(--accent); 
}

.choir-name {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    /* ÄNDERUNG: Textfarbe auf Weiß */
    color: var(--white) !important; 
    font-weight: 700;
    white-space: nowrap;
}

.mobile-break { display: none; }
#nav-toggle { display: none !important; }

#logo-area {
    width: 100%;
    height: 270px;
    background: url(https://u.jimcdn.com/cms/o/s89552e12042f1430/userlayout/img/header.jpg?t=1767292659) no-repeat center top;
    background-size: cover;
    border-bottom: 5px solid var(--accent);
}

/* 3. HAUPTMENÜ OBEN */
#menubar {
    background: var(--primary);
    position: sticky;
    top: 0;
    z-index: 9999;
    border-radius: 0 0 12px 12px; /* Rundet nur die unteren Ecken der grünen Leiste */
}
#menubar .mainmenu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; }
#menubar .mainmenu li { list-style: none !important; position: relative; }
#menubar .mainmenu li:before { content: none !important; }
#menubar .mainmenu li a { display: block; padding: 8px 18px; color: var(--white) !important; text-decoration: none !important; font-weight: 600; font-size: 0.95rem; transition: all 0.2s; }
#menubar .mainmenu li a:hover, #menubar .mainmenu .cc-nav-current > a { color: var(--primary) !important; background: var(--accent) !important; }
#menubar .mainmenu ul ul { display: none !important; position: absolute; background: var(--primary); min-width: 200px; flex-direction: column !important; }
#menubar .mainmenu li:hover > ul { display: flex !important; }

/* 4. CONTENT & SIDEBAR ALS KARTEN */
#main-container {
    display: flex;
    width: 100%;
    gap: 20px; /* ABSTAND ZWISCHEN CONTENT UND SIDEBAR */
    padding: 20px 0 50px 0;
}

#content {
    width: 70%;
    padding: 40px; /* Der edle, großzügige Wert für Desktop */
    background: var(--white) !important;
    border-radius: 12px; /* Von 8px auf 12px erhöht */
    box-shadow: 0 12px 40px rgba(0,0,0,0.12); /* Intensiverer Schatten */
    overflow: hidden;
}

/* Speziell für Impressum/Datenschutz: Goldener Rand */
body.j-about-page #content, body.j-privacy-page #content {
    border-left: 6px solid var(--accent) !important;
}

#sidebar { width: 30%; } /* Sidebar-Container selbst transparent */

.sidebar-box {
    background: var(--white) !important;
    padding: 25px 20px;
    border-radius: 12px; /* Einheitlich 12px */
    box-shadow: 0 12px 40px rgba(0,0,0,0.12); /* Intensiverer Schatten */
    margin-bottom: 20px;
}

.sidebar-nav-title { font-weight: bold; color: var(--primary); border-bottom: 2px solid var(--accent); margin-bottom: 20px; text-transform: uppercase; font-size: 0.8rem; }

/* 5. SIDEBAR NAVIGATION */
#sidebar-navigation-wrapper ul, #sidebar-navigation-wrapper li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#sidebar-navigation-wrapper li:before { content: none !important; }
#sidebar-navigation-wrapper a.level_1, #sidebar-navigation-wrapper .cc-nav-level-0 > li > a { display: none !important; }
#sidebar-navigation-wrapper li a { color: var(--primary) !important; text-decoration: none !important; display: block !important; transition: all 0.2s ease; }
#sidebar-navigation-wrapper .cc-nav-level-1 > a, a.level_2 { padding: 10px 0 !important; font-weight: 700 !important; border-bottom: 1px solid #ddd !important; }
#sidebar-navigation-wrapper .cc-nav-level-2 > a, a.level_3 { padding: 6px 0 6px 15px !important; color: #555 !important; font-size: 0.85rem !important; }
#sidebar-navigation-wrapper li a:hover, #sidebar-navigation-wrapper .cc-nav-current > a { color: var(--accent-dark) !important; padding-left: 8px !important; }

/* 6. BUTTONS */
#wrapper .cc-m-button, #wrapper .j-button, #wrapper .cc-m-contactform-submit, #wrapper .cc-m-password-submit, #wrapper .cc-m-button-link a, #wrapper input[type="submit"] {
    background: var(--primary) !important; color: var(--white) !important; padding: 12px 24px !important; border-radius: 4px !important; text-transform: uppercase !important; font-weight: 600 !important; font-size: 0.85rem !important; border: none !important; transition: all 0.3s ease !important; cursor: pointer !important;
}
#wrapper .cc-m-button:hover, #wrapper .j-button:hover, #wrapper input[type="submit"]:hover { background: var(--accent) !important; color: var(--primary) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }

/* 7. TABELLEN (0.8rem) */
table { width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important; font-size: 0.8rem !important; }
table th { background-color: #f4f4f0 !important; color: var(--primary) !important; padding: 8px 12px !important; border-bottom: 3px solid var(--accent) !important; text-align: left !important; }
table td { padding: 8px 12px !important; border-bottom: 1px solid #eee !important; }
table tr:nth-child(even) { background-color: #fafafa !important; }

/* 8. MOBILE */
@media (max-width: 850px) {
    /* Ecken-Korrektur & Hintergrund: Header & Menü bündig zum Rand */
    #main-header, 
    #menubar,
    .header-top {
        border-radius: 0 !important; 
        box-shadow: none !important;
        background-color: var(--primary) !important; /* Sandwich-Look: Dunkelgrün */
    }

    #main-container { flex-direction: column; gap: 15px; padding: 15px; }
    #content, #sidebar { width: 100% !important; }

    /* Die Kopfzeile: Kompakte Höhe durch reduziertes Padding */
    .header-top { 
        padding: 6px 15px !important; /* Schlanke Höhe */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 48px !important; /* Mindesthöhe für Touch-Sicherheit */
        position: relative;
    }

    /* Chor-Name: Weiß, Einzeilig, Kompakt */
    .choir-name { 
        white-space: nowrap !important; 
        font-size: 1.1rem !important; 
        color: var(--white) !important;
        line-height: 1.2 !important;
    }

    /* Der Hamburger-Button (Container für das SVG) */
    #nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Dezenter weißer Rahmen */
        border-radius: 4px;
        cursor: pointer;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Das SVG Icon: Feste Größe verhindert Aufblähen der Leiste */
    #nav-toggle svg {
        width: 24px !important;
        height: 24px !important;
        fill: #ffffff !important; /* Weiß für das Icon */
        display: block !important;
    }

    /* Falls noch alte Span-Elemente im HTML sind, diese hier verstecken */
    #nav-toggle span { display: none !important; }

    /* Headerbild-Anpassung (Variante A) */
    #logo-area { 
        height: auto !important; 
        aspect-ratio: 3.5 / 1 !important; 
        background-size: 100% auto !important; 
        background-position: center top !important; 
        border-radius: 0 !important;
    }

    /* Menü-Logik auf dem Handy */
    #menubar { display: none; width: 100%; }
    #menubar.open { display: block !important; }
    #menubar .mainmenu ul { flex-direction: column !important; display: block !important; }
    #menubar .mainmenu ul ul { 
        display: block !important; 
        position: static !important; 
        padding-left: 20px !important; 
        background: rgba(0,0,0,0.1) !important; 
    }
    #menubar .mainmenu .cc-nav-level-0 > li > a { display: block !important; }

    /* Inhalts-Abstände auf dem Handy */
    #content { padding: 20px 15px !important; }
    #content img { max-width: 80% !important; height: auto !important; margin: 15px auto !important; display: block !important; }
}


/* 9. FOOTER */

#footer { background: var(--primary); color: rgba(255,255,255,0.8); text-align: center; padding: 30px 20px; border-top: 5px solid var(--accent); }
#footer a { color: var(--accent); }
.copyright-note { font-size: 0.75rem; opacity: 0.6; margin-top: 15px; display: block; }

/* 10. BILDERGALERIEN OPTIMIERUNG */

.cc-m-gallery-container img {
    border-radius: 12px !important; /* Passend zu deinem neuen Card-Radius */
    transition: all 0.4s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border: 1px solid #eee !important;
}

/* Hover-Effekt für Galeriebilder */
@media (hover: hover) {
    .cc-m-gallery-container img:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
        border-color: var(--accent) !important;
    }
}

/* 11. SLIDER-OPTIMIERUNG (HAUPTBILD & VORSCHAU) */

/* 11 A. Haupt-Sichtfenster (bxSlider) */
/* Hier zwingen wir das große Bild auf eine schöne Höhe */
#content .cc-m-gallery-slider .bx-viewport {
    height: 500px !important; /* Feste Höhe für das Hauptbild */
    border-radius: 12px !important;
    background: transparent !important;
}

#content .cc-m-gallery-slider .bx-wrapper img {
    max-height: 500px !important;
    width: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* 11 B. Die Vorschaubilder-Leiste (Der Bereich unter dem Bild) */

/* 1. Der äußere Balken - wir geben ihm genug Höhe */
#content .cc-m-gallery-slider-bar {
    height: 60px !important; /* Genug Platz nach unten */
    overflow: visible !important;
    margin-top: -183px !important;
    border: none !important;
}

/* 2. Das Schiebefenster (Wrapper) */
#content .cc-m-gallery-slider-thumbnails-wrapper {
    height: 48px !important;
    overflow-x: auto !important; /* Erlaubt seitliches Schieben */
    overflow-y: hidden !important;
    padding: 2px 0 !important;
}

/* 3. Die eigentliche Bilder-Reihe */
#content .cc-m-gallery-slider-thumbnails {
    display: block !important;
    flex-wrap: nowrap !important; /* Verhindert Zeilenumbruch */
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* 4. Die einzelnen Bild-Links (Größe der Kacheln) */
#content .cc-m-gallery-slider-thumbnails a {
    flex: 0 0 50px !important; /* Breite 50px, darf nicht schrumpfen */
    width: 50px !important;
    height: 35px !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    overflow: hidden !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    float: none !important;
}

/* 5. Die Bilder in der Vorschau */
#content .cc-m-gallery-slider-thumbnails img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.6 !important;
}

/* 6. Aktives Bild hervorheben */
#content .cc-m-gallery-slider-thumbnails a.active {
    border-color: var(--accent) !important; /* Goldener Rahmen */
    transform: scale(1.05);
}

#content .cc-m-gallery-slider-thumbnails a.active img {
    opacity: 1 !important;
}

/* 7. Die goldene Scrollbar für das Schiebefenster */
#content .cc-m-gallery-slider-thumbnails-wrapper::-webkit-scrollbar {
    height: 5px !important;
}
#content .cc-m-gallery-slider-thumbnails-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent) !important;
    border-radius: 10px !important;
}
#content .cc-m-gallery-slider-thumbnails-wrapper::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05) !important;
}


/* 12. SIDEBAR SPEZIAL (SUCHE & DATENSCHUTZ) */

.search-label { display: block !important; font-weight: 700 !important; color: var(--primary) !important; font-size: 0.9rem !important; margin-top: 40px !important; margin-bottom: 12px !important; }
.search-group { display: flex !important; width: 100% !important; height: 38px !important; margin-bottom: 40px !important; }
.search-group input { flex: 1 !important; border: 1px solid #ccc !important; border-right: none !important; border-radius: 4px 0 0 4px !important; padding: 0 10px !important; font-size: 14px !important; height: 38px !important; background: #ffffff !important; }
.search-btn { width: 75px !important; height: 38px !important; background-color: var(--primary) !important; color: #ffffff !important; border: none !important; border-radius: 0 4px 4px 0 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; }
.search-btn:hover { background-color: var(--accent) !important; color: var(--primary) !important; }

.privacy-card {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-left: 5px solid var(--accent) !important;
    padding: 15px !important;
    border-radius: 12px !important; /* Einheitlich 12px */
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}
.privacy-header { color: var(--primary) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 11px !important; margin-bottom: 10px !important; }
.privacy-card p { color: var(--text) !important; font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 12px !important; }
.privacy-footer a { color: var(--primary) !important; text-decoration: none !important; border-bottom: 1px solid var(--accent) !important; font-weight: 700 !important; }

/* 13. RECHTLICHE SEITEN - FINALER BALKEN-FIX */

/* A. DER GOLDENE BALKEN (Impressum & Datenschutz) */
#content:has(.cc-privacy),
#content:has(#cc-matrix-1409338980) {
    border-left: 8px solid var(--accent) !important;
    padding-left: 45px !important; /* Genug Abstand zum Text */
}

/* B. ÜBERSCHRIFTEN AUF DIESEN SEITEN */
.cc-privacy h1,
.cc-privacy h2,
#cc-matrix-1409338980 h1 {
    color: var(--primary) !important;
    border-bottom: 3px solid var(--accent) !important;
    width: fit-content !important;
    padding-bottom: 8px !important;
    margin-bottom: 25px !important;
    background: transparent !important;
    text-transform: none !important;
}

/* C. TEXTFLUSS & LINKS */
.cc-privacy p,
#cc-matrix-1409338980 p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text) !important;
    margin-bottom: 15px !important;
}

/* Links im Datenschutz (Gegen Blau) */
.cc-privacy a {
    color: var(--primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--accent) !important;
    font-weight: 700 !important;
}

.cc-privacy a:hover {
    color: var(--accent-dark) !important;
    border-bottom-width: 2px !important;
}

/* D. JIMDO BANNER BEREINIGUNG */
.cc-m-jimdo-banner {
    filter: grayscale(1) !important;
    opacity: 0.2 !important;
    margin-top: 60px !important;
    transition: opacity 0.3s;
}
.cc-m-jimdo-banner:hover { opacity: 1 !important; }


/* 14. GLOBALE LINKS */

#content a:not(.cc-m-button):not(.j-button):not(.search-btn) { color: var(--primary) !important; text-decoration: none !important; border-bottom: 1px solid var(--accent) !important; font-weight: 600 !important; }
#content a:hover:not(.cc-m-button):not(.j-button):not(.search-btn) { color: var(--accent-dark) !important; border-bottom-width: 2px !important; }


/* 15. GALERIE-HUBS - ÜBERSCHRIFTEN SICHTBARKEIT */

/* Wir nutzen die komplette Kette vom body bis zum Link, um die globale Link-Farbe zu besiegen */
body #wrapper #content #cc-matrix-1409361280 p:first-of-type a,
body #wrapper #content #cc-matrix-1409361280 p:first-of-type a span,
body #wrapper #content #cc-matrix-1409361280 p:first-of-type a strong,
body #wrapper #content #cc-matrix-1409361280 p:first-of-type strong a {
    display: block !important;
    background-color: var(--primary) !important;
    background: var(--primary) !important;
    /* WEISSE SCHRIFT ERZWINGEN */
    color: #ffffff !important;
    color: var(--white) !important;
    padding: 12px 25px !important;
    border-radius: 8px 8px 0 0 !important;
    font-family: 'Merriweather', serif !important;
    font-size: 1.25rem !important;
    text-decoration: none !important;
    border-bottom: 4px solid var(--accent) !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover-Zustand: Damit der globale Hover nicht dazwischenfunkt */
body #wrapper #content #cc-matrix-1409361280 p:first-of-type a:hover,
body #wrapper #content #cc-matrix-1409361280 p:first-of-type a:hover span {
    background: var(--accent) !important;
    background-color: var(--accent) !important;
    color: var(--primary) !important;
    text-decoration: none !important;
}

/* 2. DIE WEISSE BOX FÜR DIE LISTE (Stabilisiert) */
#cc-matrix-1409361280 ul {
    background: #ffffff !important;
    margin: 0 0 40px 0 !important;
    padding: 20px 25px !important;
    border-radius: 0 0 12px 12px !important;
    list-style: none !important;
    border: 1px solid #eeeeee !important;
    border-top: none !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
}

/* 3. DIE TIMELINE-EINTRÄGE */
#cc-matrix-1409361280 li {
    position: relative !important;
    padding: 10px 0 10px 35px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    color: var(--text) !important;
    list-style: none !important;
}

#cc-matrix-1409361280 li:before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 16px !important;
    width: 12px !important;
    height: 12px !important;
    background-color: var(--accent) !important;
    border-radius: 50% !important;
    display: block !important;
}

#cc-matrix-1409361280 li:last-child { border-bottom: none !important; }

/* Links in der Timeline (hier ist grün korrekt) */
#cc-matrix-1409361280 li a {
    color: var(--primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
}

#cc-matrix-1409361280 li a:hover {
    color: var(--accent-dark) !important;
    border-bottom: 1px solid var(--accent-dark) !important;
}

/* Wir löschen hier absolut alles, was mit der Timeline zu tun haben könnte */
#cc-matrix-1409361280 ul,
#cc-matrix-1409361280 li {
    border: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#cc-matrix-1409361280 ul::before,
#cc-matrix-1409361280 ul::after,
#cc-matrix-1409361280 li::before,
#cc-matrix-1409361280 li::after {
    content: none !important;
    display: none !important;
}


/* 15.1 ALBUM-RASTER (FÜR GALERIE-KATEGORIEN) */

/* SCHALTER: Greift nur, wenn wir uns im Menüzweig "Bildergalerien" befinden 
   (erkennt das .parent beim Link) UND auf Ebene 2 sind, aber nicht in Ebene 3. */
body:has(a[href*="/bildergalerien/"].parent):has(.level_2.current):not(:has(.level_3.current)) {

    /* 1. Jimdos Spalten-System auf diesen Seiten deaktivieren */
    .cc-m-hgrid, .cc-m-hgrid-column {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    /* 2. Den Inhalts-Container in ein intelligentes Gitter verwandeln */
    #content [id*="cc-matrix-"] {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 25px !important;
        align-items: stretch !important;
    }

    /* 3. Die Module (Bild mit Untertitel) als Karten stylen */
    #content .j-module.j-imageSubtitle,
    #content .j-module.j-textWithImage {
        background: #ffffff !important;
        padding: 20px !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
        border: 1px solid #eee !important;
        border-top: 5px solid var(--primary) !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;
        height: 100% !important;
        min-height: 280px !important;
    }

    /* 4. Die Vorschaubilder in den Karten (Einheitliche Größe) */
    #content img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        border-radius: 6px !important;
        margin-bottom: 15px !important;
        box-shadow: none !important;
    }

    /* 5. Album-Titel unter den Bildern */
    #content figcaption {
        font-weight: 700 !important;
        color: var(--primary) !important;
        text-align: center !important;
        font-size: 1rem !important;
        line-height: 1.3 !important;
        border-top: none !important;
        padding: 0 !important;
    }

    /* 6. Hover-Effekt: Die Karte schwebt */
    #content .j-module:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
        border-top-color: var(--accent) !important;
    }
}

/* 7. Mobile Korrektur */
@media (max-width: 600px) {
    body:has(a[href*="/bildergalerien/"].parent):has(.level_2.current):not(:has(.level_3.current)) #content [id*="cc-matrix-"] {
        grid-template-columns: 1fr !important;
    }
}


/* 16. BILDER MIT LINKS (GALLERY-LOOK & LINIE ENTFERNEN) */

/* 1. Grund-Look für alle Bilder im Content (Abrundung & Schatten) */
#content img {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    transition: all 0.4s ease !important;
    border: 1px solid transparent !important;
    /* FIX: display block entfernt, damit Text umfließen kann */
    display: inline-block !important;
    max-width: 100% !important;
}

/* 2. DIE GOLDENE LINIE LÖSCHEN */
/* Wir nutzen eine sehr lange Kette, um Sektion 14 zu besiegen */
#wrapper #main-container #content a.cc-imagewrap,
#wrapper #main-container #content .cc-m-image-container a,
#wrapper #main-container #content .cc-m-image-align-wrapper a,
#wrapper #main-container #content a:has(img) {
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* 3. HOVER-EFFEKT (Nur das Bild schwebt, keine Linie erscheint) */
#content a:hover img {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    border-color: var(--accent) !important;
    cursor: pointer !important;
}

/* 4. Fix für Bilder-Beschriftungen (Keine Linie unter dem Text) */
#content .cc-m-image-caption,
#content .cc-m-image-caption span {
    border-bottom: none !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: 10px !important;
}

/* Abstand zum umfließenden Text verringern */
/* Bild links, Text rechts */
#content .cc-m-image-align-1, #content .cc-m-image-align-left {
    margin-right: 10px !important;
    margin-bottom: 5px !important;
}

/* Bild rechts, Text links */
#content .cc-m-image-align-2, #content .cc-m-image-align-right {
    margin-left: 5px !important;
    margin-bottom: 5px !important;
}

/* Begrenzt Bilder mit Textumfluss auf maximal 62% Breite */
#content .cc-m-image-align-1, #content .cc-m-image-align-2 {
    max-width: 62% !important;
}


/* 17. CHRONIK TIMELINE - EXKLUSIV FÜR TEXT-LISTEN */

/* Nur ul innerhalb von .j-text Modulen werden zur Timeline */
body:has(a[href="/chronik/"].parent) #content .j-text ul:not(#cc-matrix-1409361280 ul),
body:has(a[href="/chronik/"].current) #content .j-text ul:not(#cc-matrix-1409361280 ul) {
    list-style: none !important;
    padding-left: 45px !important;
    margin: 30px 0 30px 10px !important;
    border-left: none !important;
    position: relative !important;
}

/* Die einzelnen Einträge */
body:has(a[href="/chronik/"].parent) #content .j-text ul li,
body:has(a[href="/chronik/"].current) #content .j-text ul li {
    position: relative !important;
    margin-bottom: 15px !important; /* Dein eingestellter Wert */
    padding-left: 0 !important;
    line-height: 1.6 !important;
}

/* Die vertikale Linie */
body:has(a[href="/chronik/"].parent) #content .j-text ul li::after,
body:has(a[href="/chronik/"].current) #content .j-text ul li::after {
    content: '' !important;
    position: absolute !important;
    left: -26.5px !important;
    top: 11px !important;    /* Deine Justierung */
    bottom: -25px !important; /* Deine Justierung */
    width: 2px !important;
    background-color: #e9e9e2 !important;
    display: block !important;
    z-index: 1 !important;
}

/* Diese Regel löscht den Überhang nach dem letzten Punkt */
body:has(a[href="/chronik/"].parent) #content .j-text ul li:last-child::after,
body:has(a[href="/chronik/"].current) #content .j-text ul li:last-child::after {
    display: none !important;
}

/* Die goldenen Punkte */
body:has(a[href="/chronik/"].parent) #content .j-text ul li::before,
body:has(a[href="/chronik/"].current) #content .j-text ul li::before {
    content: '' !important;
    position: absolute !important;
    left: -33.5px !important;
    top: 6px !important;
    width: 10px !important;
    height: 10px !important;
    background-color: var(--accent) !important;
    border: 2px solid var(--white) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px var(--accent) !important;
    display: block !important;
    z-index: 5 !important;
}

/* Hover-Effekt */
body:has(a[href="/chronik/"].parent) #content .j-text ul li:hover::before {
    background-color: var(--primary) !important;
    transform: scale(1.3) !important;
    transition: all 0.2s ease-in-out;
}

/* 18. KONTAKTFORMULAR - PRÄZISIONS-STYLING */

/* A. Die Beschriftungen (Labels) - Wir gehen direkt auf das DIV im Label */
.cc-m-form-view-element label div {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 700 !important; /* ENDLICH FETT */
    color: var(--primary) !important;
    font-size: 1rem !important;
    margin-bottom: 6px !important;
}

/* B. Die Eingabefelder - Wir überschreiben das 'width: 50%' von Jimdo */
#content .cc-m-form-view-input-wrapper input[type="text"],
#content .cc-m-form-view-input-wrapper input[type="email"],
#content .cc-m-form-view-input-wrapper textarea {
    width: 100% !important; /* Zwingt das Feld auf volle Breite */
    max-width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    color: var(--text) !important;
    outline: none !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

/* Goldener Fokus-Effekt beim Reinklicken */
#content .cc-m-form-view-input-wrapper input:focus,
#content .cc-m-form-view-input-wrapper textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25) !important;
}

/* C. Pflichtfeld-Kennzeichnung (*) */
/* Falls Jimdo ein Sternchen anzeigt, machen wir es Gold */
.cc-m-form-view-element.cc-m-required label div::after {
    color: var(--accent-dark) !important;
}

/* D. Abstände zwischen den Formular-Elementen */
.cc-m-form-view-element {
    margin-bottom: 20px !important;
}

/* E. Captcha & Button (Stabilisierung) */
.cc-m-contactform-captcha {
    background: #f9f9f7 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin: 10px 0 20px 0 !important;
    display: inline-block !important;
}

.cc-m-contactform-submit {
    margin-top: 10px !important;
}


/* 19. BILD-BESCHRIFTUNGEN (NAMENSSCHILDER-LOOK) */
#content figcaption,
#content .cc-m-image-caption {
    display: block !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    color: var(--text) !important;
    padding: 3px 0 !important;
    /* FIX: Abstand nach oben, damit Linie unter dem Bild erscheint */
    margin-top: 1px !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    border-top: 1px solid var(--accent) !important;
    /* FIX: Breite auf auto, damit sie zum Bild passt */
    width: 100% !important;
}


/* 20. ZITAT-WIDGET (DEZENT & EDEL) */
.chor-quote {
    position: relative !important;
    padding: 25px 20px 25px 60px !important; /* Mehr Platz links für das Zeichen */
    margin: 10px 10px !important;
    background: #fffdf0 !important; /* Sanftes Creme-Gold */
    border-left: 6px solid var(--accent) !important;
    border-radius: 8px !important;
    font-style: italic !important;
    font-family: 'Merriweather', serif !important;
    color: var(--primary) !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

.chor-quote::before {
    content: "\201C" !important;
    position: absolute !important;
    left: 15px !important;
    top: 5px !important;
    font-size: 3.5rem !important; /* Deutlich kleiner als vorher */
    color: var(--accent) !important;
    opacity: 0.5 !important;
    font-family: 'Merriweather', serif !important;
}
/* Wir lassen das schließende Anführungszeichen weg, um Überlagerungen zu vermeiden */
.chor-quote::after { content: none !important; }


/* 21. INFO-BOX (DESIGN-GARANTIE) */
.info-box {
    background: var(--primary) !important;
    color: #ffffff !important;
    padding: 20px 25px !important;
    border-radius: 12px !important;
    border-left: 8px solid var(--accent) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    margin: 10px 0 !important;
}

/* Überschriften in der Box */
.info-box h1, .info-box h2, .info-box h3, .info-box strong {
    color: var(--accent) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
    display: block !important;
    font-weight: 700 !important;
}

.info-box h1 { font-size: 1.5rem !important; }
.info-box h2 { font-size: 1.3rem !important; }
.info-box h3 { font-size: 1.1rem !important; }

/* Normaler Text in der Box */
.info-box p {
    margin: 0 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
}


/* 22. EINLADUNGS-KARTE (RECRUITING) */
.join-us-card {
    background: #fdfaf0 !important; /* Sehr warmes, helles Gold-Beige */
    border: 2px solid var(--accent) !important;
    padding: 20px !important;
    border-radius: 15px !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.15) !important;
    margin: 20px 0 !important;
}

.join-us-card h3 {
    color: var(--primary) !important;
    font-family: 'Merriweather', serif !important;
    font-size: 1.5rem !important;
    margin-bottom: 15px !important;
}

.join-us-card p {
    color: var(--text) !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}


/* 23. PARTNER- & SPONSOREN-GITTER (SICHERER AUTO-MODUS) */

/* SCHALTER: Das Gitter wird NUR aktiviert, wenn der Menüpunkt "Freunde-Sponsoren"
   aktiv (.current) oder die Mutterseite (.parent) ist. */
body:has(#cc-nav-view-1176889580 .current) #content [id*="cc-matrix-"],
body:has(#cc-nav-view-1176889580 .parent) #content [id*="cc-matrix-"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 25px !important;
    align-items: stretch !important;
}

/* 2. ÜBERSCHRIFTEN-LOGIK (Nur im Sponsoren-Bereich) */
body:has(#cc-nav-view-1176889580 .current) #content .j-module:has(h1),
body:has(#cc-nav-view-1176889580 .current) #content .j-module:has(h2),
body:has(#cc-nav-view-1176889580 .current) #content .j-module:has(h3),
body:has(#cc-nav-view-1176889580 .parent) #content .j-module:has(h1),
body:has(#cc-nav-view-1176889580 .parent) #content .j-module:has(h2),
body:has(#cc-nav-view-1176889580 .parent) #content .j-module:has(h3),
body:has(#cc-nav-view-1176889580 .current) #content .j-header,
body:has(#cc-nav-view-1176889580 .parent) #content .j-header {
    grid-column: 1 / -1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: -15px !important; /* Deine Einstellung */
    margin-bottom: 0px !important;
    display: block !important;
}

/* 3. DIE KACHELN (Nur im Sponsoren-Bereich) */
body:has(#cc-nav-view-1176889580 .current) #content .j-imageSubtitle,
body:has(#cc-nav-view-1176889580 .current) #content .j-textWithImage,
body:has(#cc-nav-view-1176889580 .parent) #content .j-imageSubtitle,
body:has(#cc-nav-view-1176889580 .parent) #content .j-textWithImage {
    background: #ffffff !important;
    padding: 30px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid #eee !important;
    border-top: 5px solid var(--primary) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 250px !important;
    margin: 0 !important;
}

/* 4. LOGO-GRÖSSE (Deine optimierten Werte) */
body:has(#cc-nav-view-1176889580 .current) #content img,
body:has(#cc-nav-view-1176889580 .parent) #content img {
    width: 85% !important;
    max-width: 300px !important;
    max-height: 180px !important;
    object-fit: contain !important;
    margin-bottom: 15px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 5. TEXTE IN DEN KACHELN */
body:has(#cc-nav-view-1176889580 .current) #content figcaption,
body:has(#cc-nav-view-1176889580 .parent) #content figcaption {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    text-align: center !important;
}

/* 6. HOVER-EFFEKT (Nur für Kacheln im Sponsoren-Bereich) */
body:has(#cc-nav-view-1176889580 .current) #content .j-module:not(.j-header):hover,
body:has(#cc-nav-view-1176889580 .parent) #content .j-module:not(.j-header):hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
    border-top-color: var(--accent) !important;
}


/* 24. SCROLL-TO-TOP BUTTON MODERNISIERUNG - DYNAMISCH */

/* 1. Grundzustand: Absolut versteckt */
.cc-FloatingButtonBarContainer-button-scroll {
    display: none !important; /* Button ist standardmäßig unsichtbar */
    background-color: var(--primary) !important; /* Dunkelgrün */
    border: 2px solid var(--accent) !important;  /* Goldener Außenrand */
    border-radius: 8px !important;               /* Perfekt rund wäre 50% */
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* 2. Sichtbar machen, wenn Jimdo die "Show"-Klasse per Scroll hinzufügt */
.cc-FloatingButtonBarContainer-button-scroll-show {
    display: flex !important; /* Erscheint nun erst beim Scrollen */
    align-items: center !important;
    justify-content: center !important;
}

/* 3. Den Link-Bereich säubern (Kein eigener Rahmen/Hintergrund um den Pfeil) */
.cc-FloatingButtonBarContainer-button-scroll a {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Den alten Jimdo-Text löschen */
.cc-FloatingButtonBarContainer-button-scroll span {
    display: none !important;
}

/* 4. Der Pfeil (Symbol-Farbe: Gold) */
.cc-FloatingButtonBarContainer-button-scroll a::before {
    content: '\25B4' !important; /* Elegantes Dreieck */
    font-size: 28px !important;
    color: var(--accent) !important; /* Standard: Goldener Pfeil */
    display: block !important;
    line-height: 1 !important;
    margin-top: -6px !important; /* Zentrierung korrigieren */
}

/* 5. HOVER: Farbumkehr (Inversion) */
.cc-FloatingButtonBarContainer-button-scroll:hover {
    background-color: var(--accent) !important; /* Hintergrund wird Gold */
    border-color: var(--primary) !important;     /* Rand wird Grün */
    transform: translateY(-5px) !important;      /* Schwebt leicht nach oben */
    box-shadow: 0 12px 25px rgba(0,0,0,0.2) !important;
}

/* Pfeilfarbe bei Hover auf Grün wechseln */
.cc-FloatingButtonBarContainer-button-scroll:hover a::before {
    color: var(--primary) !important;
}

/* Mobile Anpassung */
@media (max-width: 600px) {
    .cc-FloatingButtonBarContainer {
        bottom: 20px !important;
        right: 20px !important;
    }
    .cc-FloatingButtonBarContainer-button-scroll {
        width: 44px !important;
        height: 44px !important;
    }
}


/* 25. SPEZIAL-LAYOUT: VORSTANDS-CHRONIK (FULL WIDTH) */


/* 26. VORSTANDS-TIMELINE (AUTOMATISCH & FLEXIBEL) */

/* 1. Das Gitter auf der Matrix-Ebene aktivieren */
#cc-matrix-1412562880 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 25px !important;
    align-items: stretch !important;
}

/* 2. Normale Bausteine (Überschrift, Einleitung) über die volle Breite */
#cc-matrix-1412562880 > .j-module {
    grid-column: 1 / -1 !important;
}

/* 3. Module, die Karten enthalten, "auflösen" */
/* Wir suchen nach dem Jimdo-Modul ODER deinem alten Div, falls es noch da ist */
#cc-matrix-1412562880 > .j-module:has(.vorstand-card),
#cc-matrix-1412562880 .vorstand-grid {
    display: contents !important;
}

/* 4. Die Karten selbst werden dadurch zu direkten Gitter-Kindern */
.vorstand-card {
    grid-column: auto !important;
    background: #ffffff !important;
    border: 1px solid #eee !important;
    border-top: 5px solid var(--primary) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease !important;
}

.vorstand-card:hover { transform: translateY(-5px) !important; border-top-color: var(--accent) !important; }

/* Inhalt der Karten */
.vorstand-card h3 { color: var(--primary) !important; margin-top: 0 !important; border-bottom: 1px solid #eee; padding-bottom: 10px; font-size: 1.2rem !important; }
.vorstand-entry { display: flex !important; align-items: center !important; gap: 15px !important; margin-bottom: 15px !important; padding: 8px 0 !important; border-bottom: 1px dashed #f0f0f0 !important; }
.vorstand-entry:last-of-type { border-bottom: none !important; }
.vorstand-img { width: 60px !important; height: 60px !important; object-fit: cover !important; border-radius: 50% !important; border: 2px solid var(--accent) !important; flex-shrink: 0 !important; }
.vorstand-info strong { display: block !important; color: var(--primary) !important; font-size: 0.85rem !important; }
.vorstand-info span { font-size: 0.95rem !important; color: var(--text) !important; }


/* 27. LISTEN-STYLING (MEHREBENEN-FIX) */
#content .j-text ul:not(.mainmenu ul) {
    list-style-type: disc !important; /* Ebene 1: Punkt */
    padding-left: 25px !important;
}

#content .j-text ul:not(.mainmenu ul) ul {
    list-style-type: circle !important; /* Ebene 2: Kreis */
}

#content .j-text ul:not(.mainmenu ul) ul ul {
    list-style-type: square !important; /* Ebene 3: Quadrat */
}

/* Farbe für alle Aufzählungszeichen auf Grün setzen */
#content .j-text ul:not(.mainmenu ul) li::marker {
    color: var(--primary) !important;
}


/* 28. GALERIE-BREITE FIX */
/* Wir sprechen das gesamte Galerie-Modul an */
#content .j-module.j-gallery,
#content .cc-m-gallery-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important; /* Verhindert seitliches Schweben */
    clear: both !important;  /* Zwingt die Galerie UNTER den Text */
    margin: 10px 0 !important;
    padding: 0 !important;
}

/* Korrektur für das Gitter (3 Spalten) */
.cc-m-gallery-image-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
}


/* 29. BACK-BUTTON DESIGN (FINALE SYNCHRONISATION) */
#content .j-module:has(.back-link),
#content .j-module:has(.back-btn-container),
#content .cc-m-htmlwidget:has(.back-link) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 40px !important;
}

.back-link {
    display: inline-block !important;
    padding: 10px 22px !important;
    background-color: var(--primary) !important; /* Grün */
    color: var(--accent) !important;              /* Goldene Schrift */
    border: 2px solid var(--accent) !important;   /* GOLDENER RAHMEN (wie Scroll-Button) */
    border-radius: 8px !important;                /* Gleiche Rundung wie oben eingestellt */
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

/* HOVER: Komplette Farbumkehr (wie beim Scroll-Button) */
.back-link:hover {
    background-color: var(--accent) !important;   /* Hintergrund wird Gold */
    color: var(--primary) !important;              /* Schrift wird Grün */
    border-color: var(--primary) !important;      /* Rahmen wird Grün */
    transform: translateX(-5px) !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.2) !important;
}