/* ==========================================================================
   1. DESKTOP-HEADER & HINTERGRUND (DEINE ANPASSUNG + FIX)
   ========================================================================== */
html body#top div#page-wrapper section#header.section {
    background-color: #1a252f !important;
    background: #41803d !important;
    padding-top: 80px !important;            /* Deine Wunschhöhe oben */
    padding-bottom: 80px !important;         /* Deine Wunschhöhe unten */
    transition: padding 0.3s ease, background-color 0.3s ease !important;
    display: flex !important;                /* GEÄNDERT: Muss Flex sein, damit die Navbar nicht kollabiert */
    align-items: center !important;
}

/* ==========================================================================
   2. ABSOLUTE REIHEN-ERZWINGUNG (KEIN UMBRECHEN UNTER DAS LOGO)
   ========================================================================== */
/* Die Navbar-Klasse des Quark-Themes zwingen, Flexbox strikt anzuwenden */
#header .navbar {
    display: flex !important;
    flex-direction: row !important;         /* Strikte Reihe nebeneinander */
    align-items: center !important;          /* Zentriert Logo und Menü vertikal */
    width: 100% !important;
}

/* Die Logo-Sektion im HTML (enthält den Link, das Logo-Bild und den Text) */
#header .navbar-section.logo {
    display: flex !important;
    flex-direction: row !important;         /* Zwingt Bild und Text bedingungslos nebeneinander */
    align-items: center !important;          /* Zentriert den Text vertikal zum Logo-Bild */
    gap: 20px !important;                    /* Abstand zwischen Logo-Bild und Vereinsname */
    flex: 1 1 auto !important;
    max-width: 70% !important;              /* Gibt dem Text viel Platz zum Atmen */
}

/* Der Link selbst (A-Tag) muss ebenfalls als Reihe agieren */
#header .nav-logo,
#header .navbar-brand {
    display: flex !important;
    flex-direction: row !important;         /* Erzwingt, dass das <img> und das <span> nebeneinander stehen */
    align-items: center !important;
    gap: 15px !important;
}

/* ==========================================================================
   3. LOGO-BILD & VEREINSNAME FORMATIERUNG
   ========================================================================== */
#header .logo-img {
    height: 120px !important;                /* Deine Wunschhöhe */
    width: auto !important;
    max-height: none !important;
    flex-shrink: 0 !important;               /* Verhindert, dass das Bild zusammengedrückt wird */
    display: block !important;
}

.logo-text {
    font-size: 1.4rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    white-space: normal !important;          /* Erlaubt dem langen Namen den zweizeiligen Umbruch bei Bedarf */
    line-height: 1.2 !important;
    display: inline-block !important;
}

#header .navbar-section.desktop-menu {
    /* Deine CSS-Befehle kommen hier hin */
    padding-top: 60px !important;
    padding-bottom: 10px !important;
}

#header a, 
#header a:visited {
    color: #ffffff !important;
}

/* ==========================================================================
   4. DEN SEITENINHALT AUTOMATISCH NACH UNTEN SCHIEBEN
   ========================================================================== */
/* Da dein Header durch das 95px-Padding gigantisch hoch ist (über 300px), 
   müssen wir den normalen Content der Seite drastisch nach unten verschieben,
   damit der Titel nicht in den Text hineinragt. */
#page-wrapper {
    padding-top: 50px !important;          /* Schiebt den Inhalt unter den massiven Header */
}

/* Wenn gescrollt wird und der Header schrumpft, korrigieren wir den Abstand */
html body#top div#page-wrapper section#header.section.scrolled {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
    background-color: #41803d !important;
}

html body#top div#page-wrapper section#header.section.scrolled .logo-img {
    height: 50px !important;                 /* Logo schrumpft beim Scrollen */
}

html body#top div#page-wrapper section#header.section.scrolled .logo-text {
    font-size: 1.0rem !important;            /* Text schrumpft beim Scrollen */
}
/* ==========================================================================
   7. FOOTER-STYLES (Links nebeneinander)
   ========================================================================== */
#footer .footer-content {
    display: flex !important;
    justify-content: space-between !important; /* Schiebt Text nach links, Links nach rechts */
    align-items: center !important;
    flex-wrap: wrap !important;                /* Erlaubt Umbruch auf Handys */
    gap: 15px !important;
}

#footer p {
    margin: 0 !important;
    font-size: 0.9rem;
}

#footer .footer-links {
    list-style: none !important;               /* Entfernt die Punkte der Liste */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 20px !important;                      /* Abstand zwischen den einzelnen Links */
}

#footer .footer-links li {
    margin: 0 !important;
}

#footer .footer-links a {
    color: #667180 !important;                 /* Unauffälliges Grau für rechtliche Links */
    text-decoration: none !important;
    font-size: 0.9rem;
}

#footer .footer-links a:hover {
    color: #1a252f !important;                 /* Wird dunkel beim Drüberfahren */
    text-decoration: underline !important;
}

/* Mobil-Optimierung für kleine Displays */
@media screen and (max-width: 600px) {
    #footer .footer-content {
        flex-direction: column !important;     /* Auf dem Handy untereinander zentrieren */
        text-align: center !important;
    }
    #footer .footer-links {
        justify-content: center !important;
    }
}