/* 1. DAS HEADER-GRID VON CASSIOPEIA KORRIGIEREN */
/* Wir zwingen den Header, exakt 3 gleichwertige Spalten zu bilden: Links, Mitte, Rechts */
.header-content, 
.site-header .container-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important; /* Links (1 Teil), Mitte (automatisch passend), Rechts (1 Teil) */
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 20px !important;
}

/* Verhindert das Standard-Verhalten von Cassiopeia, das Elemente staucht */
.header-content > * {
    display: flex !important;
    align-items: center !important;
}

/* 2. LINKE SPALTE (Social Icons) VERTIKAL AUSRICHTEN */
.header-content > div:first-child,
.social-icons-container {
    justify-content: flex-start !important;
}

/* Social Icons vergrößern und schön in Reihe halten */
.header-content [class*="social"] a,
.header-content [class*="social"] i {
    font-size: 28px !important;
    color: #ff0044 !important; /* Dein markantes Rot */
    margin-right: 12px !important;
    display: inline-block !important;
}

/* 3. MITTLERE SPALTE (Dein Counter) AUF DEN PIXEL ZENTRIEREN */
/* Wenn der Counter im selben Container wie die Logos liegt, zwingen wir ihn in die mathematische Mitte */
#project-counter-container {
    grid-column: 2 !important; /* Setzt den Counter stur in die 2. Spalte (die Mitte) */
    justify-self: center !important; /* Zentriert ihn exakt */
    margin: 0 auto !important;
    display: inline-flex !important;
}

/* 4. RECHTE SPALTE (Sponsoren-Logos) GANZ NACH RECHTS SCHIEBEN */
.header-content > div:last-child,
.banner-group {
    grid-column: 3 !important; /* Setzt die Logos in die 3. Spalte */
    justify-content: flex-end !important; /* Schiebt sie bündig an den rechten Rand */
    justify-self: end !important;
}

/* 5. HOCHGELAUFENEN CONTENT DARUNTER REPARIEREN */
/* Da wir keine absolute Positionierung mehr nutzen, fließt der Text darunter jetzt wieder völlig normal */
.site-header + div, 
main, 
#main-content {
    clear: both !important;
    margin-top: 20px !important;
}


/* ==========================================
   1. TOPBAR GANZ OBEN
   ========================================== */
.header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Positioniert den Counter exakt in der Mitte */
#project-counter-container {
    margin: 0 auto !important;
}

/* Linker Bereich (Socials/Logo), mittlerer Bereich (Counter), rechter Bereich (Sponsoren) bekommen feste Richtwerte */
.header-left-box {
    width: 15%;
}

#project-counter-container {
    width: 50%; /* Die mittlere Spalte bekommt den meisten Platz */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Zentriert es in der Mitte */
}

/* Sorgt dafür, dass die Zahlen im Counter wieder nebeneinander stehen */
#project-counter {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
}

.header-right-box {
    width: 30%;
}


/* ==========================================
   2. EXAKTES DESIGN FÜR DAS CASSIOPEIA METISMENU
   ========================================== */

/* Hintergrund des aufgeklappten Unterpunkts (der Kasten) */
.metismenu .mm-collapse,
.metismenu ul,
.navbar-nav ul {
    background-color: #D4EFFD !important; /* Dein gewünschtes Hellblau */
    border: 1px solid #2CABDE !important; /* Rahmen in Pfeil-Blau */
    padding: 10px !important;
    list-style: none !important;
    margin: 5px 0 !important;
    border-radius: 4px;
}

/* Die Schriftfarbe der Unterlinks IM hellblauen Kasten */
.metismenu .mm-collapse li a,
.metismenu ul li a,
.navbar-nav ul li a {
    color: #1a2633 !important; /* Dein dunkles Marineblau */
    background-color: transparent !important; /* Entfernt das harte Weiß */
    font-weight: 600 !important;
    display: block !important;
    padding: 8px 12px !important;
}

/* Farbe der Pfeile auf der rechten Seite */
.metismenu .scaler,
.navbar-nav .scaler,
.metismenu [aria-expanded]::after {
    color: #2CABDE !important; /* Pfeil in deinem Hellblau */
    border-color: #2CABDE !important;
}

/* Wenn man auf einen Unterpunkt klickt oder tippt (Hover) */
.metismenu .mm-collapse li a:hover,
.metismenu ul li a:hover {
    background-color: #2CABDE !important;
    color: #ffffff !important;
}
/* ==========================================================================
   FARBANPASSUNG DROP-DOWN (Gilt für Desktop UND Mobil)
   ========================================================================== */

/* 1. Hintergrund des aufklappenden Kastens */
.navbar .dropdown-menu,
.bp-nav .dropdown-menu,
.dropdown-menu {
    background-color: #D4EFFD !important; /* Dein gewünschtes Hellblau */
    border: 1px solid #2CABDE !important; /* Der hellblaue Rahmen */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 2. Die Schriftfarbe der Untermenüpunkte */
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu li a,
.dropdown-item {
    color: #1a2633 !important; /* Dein dunkles Marineblau */
    font-weight: 600 !important;
    background: none !important;
}

/* Hover-Effekt für die Unterpunkte (Beim Drüberfahren) */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu li a:hover {
    background-color: #2CABDE !important; /* Hellblau als Hintergrund */
    color: #ffffff !important; /* Weiße Schrift */
}

/* 3. Der kleine Pfeil (Das Dreieck neben dem Hauptmenüpunkt) */
.dropdown-toggle::after,
.navbar-nav .dropdown-toggle::after {
    border-top-color: #2CABDE !important; /* Färbt den Pfeil nach unten */
    color: #2CABDE !important;
}

/* Falls der Pfeil nach oben zeigt, wenn geöffnet */
.dropdown-toggle.show::after {
    border-bottom-color: #2CABDE !important; 
}
/* Den Header-Hintergrund mit voller Wucht überschreiben */
.header, .container-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/images/Titel/titel.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 120px 0 !important; /* Macht den Header schön hoch für das Bild */
}

/* Schriftfarben im Header auf Weiß anpassen */
.header a, .header .navbar-brand, .header .nav-link, .container-header a {
    color: #D4EFFD !important;
}

/* Hover-Effekt für die Menüpunkte */
.header .nav-link:hover {
    color: #00d2ff !important;
}
/* --- SCHRIFTART FÜR DAS MENÜ ANPASSEN --- */
.header .navbar, 
.header .nav-link, 
.metismenu,
.container-header .mod-menu {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important; /* Schön kräftig für die Menüpunkte */
    text-transform: uppercase !important; /* OPTIONAL: Macht das Menü in SCHICKEN GROSSBUCHSTABEN. Wenn du das nicht willst, lösche diese Zeile einfach! */
    font-size: 1.1rem !important; /* Macht das Menü einen Tick präsenter */
}
/* --- DER FINALE TREFFER FÜR DIE UNTERÜBERSCHRIFT --- */
.site-description, 
.header-profile .site-description, 
span.site-description,
.branding-text .site-description {
    color: #D4EFFD !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1.3rem !important;
    font-style: italic !important;
    display: block !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}
/* --- 2. HINTERGRÜNDE FÜR DIE GANZE SEITE --- */
body.site {
    background-color: #CBE9EB !important; /* Äußerer Hintergrund: Nordsee-Graublau */
}

.grid-child, 
.body, 


/* --- 3. SCHRIFTEN & ÜBERSCHRIFTEN (MARINE) --- */
body, p, span, td, li, .com-content-article p {
    color: #1a2633 !important; /* Normaler Text: Dunkles Marine-Anthrazit */
}

h1, h2, h3, h4, h5, h6, 
.page-header h1, 
.page-header h2,
main h1, main h2 {
    color: #0a1c33 !important; /* Alle Überschriften: Tiefes Navy-Blau */
}

/* --- 4. LINKS IM TEXT --- */
main a, .com-content-article a {
    color: #0077a6 !important; /* Wasserblau für normale Links */
    text-decoration: none !important;
}

main a:hover, .com-content-article a:hover {
    color: #00a3cc !important; /* Hover-Cyan für Links */
    text-decoration: underline !important;
}
/* --- Icons nach vorne holen und in knackiges Magenta einfärben --- */

/* 1. Das übergeordnete Modul/Container für die Icons vorbereiten */
.container-topbar .mod-custom,
.container-topbar .social-icons,
.container-topbar .navbar {
    position: relative !important;
    z-index: 10 !important; /* Höher als der Balken-Hintergrund */
}

/* 2. Die Links und Icons direkt ansprechen, nach vorne holen und färben */
.container-topbar a,
.container-topbar i,
.container-topbar svg,
.container-topbar span {
    position: relative !important;
    z-index: 20 !important; /* Ganz nach vorne vorderste Front */
    color: #e5004d !important; /* Dein Logo-Magenta */
    opacity: 1 !important; /* Verhindert, dass sie die Transparenz des Balkens erben */
    display: inline-block;
}

/* 3. Hover-Effekt: Beim Drüberfahren leuchten sie weiß auf */
.container-topbar a:hover,
.container-topbar a:hover i,
.container-topbar a:hover svg {
    color: #ffffff !important;
}
/* Entfernt den oberen Abstand des gesamten Headers/der Topbar */
.header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Falls die Topbar-Position ein eigenes Padding hat, das gestaucht werden soll */
.container-topbar, .topbar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0 !important;
}

/* Verhindert, dass der Body einen Standard-Abstand erzwingt */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Erzwungene Desktop-Ansicht für das Cassiopeia Mega-Menü auf Mobile */
@media (max-width: 991.98px) {
    
    /* 1. Versteckt den Hamburger-Button komplett */
    .navbar-toggler {
        display: none !important;
    }
    
    /* 2. Erzwingt die Anzeige des Menü-Containers */
    .navbar-collapse.collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    /* 3. Richtet die Hauptmenüpunkte horizontal aus */
    .bp-nav .navbar-nav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center; /* Zentriert das Menü im mobilen Bildschirm */
        gap: 7px; /* Abstand zwischen den Hauptpunkten */
        width: 100%;
        padding-left: 0;
    }

    /* 4. Sorgt dafür, dass die Hauptpunkte nebeneinander stehen */
    .bp-nav .nav-item {
        position: relative; /* Wichtig für die Positionierung der Dropdowns */
    }

    /* 5. Anpassung der Schriftgröße für Smartphones, damit es nebeneinander passt */
    .bp-nav .nav-link {
        font-size: 0.9rem;
        padding: 6px 10px !important;
    }

    /* 6. Das Mega-Menü-Dropdown auf Mobile richtig positionieren */
    .bp-nav .dropdown-menu {
        position: absolute !important;
        float: none !important;
        background-color: #1a2d42 !important; /* Passt sich deinem marineblauen Stil an */
        box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
        z-index: 1000;
        min-width: 180px;
    }
    
    /* Links im Dropdown weiß färben, falls sie im dunklen Hintergrund untergehen */
    .bp-nav .dropdown-menu .dropdown-item {
        color: #ffffff !important;
        padding: 8px 15px !important;
    }
}
/* --- Endgültiges Footer-Design mit deinen Wunschfarben --- */

/* 1. Der Hintergrund des gesamten Footer-Balkens */
footer,
.footer,
.container-footer,
.footer-container {
    background-color: #156281 !important; /* Dein kräftiges Blau als Hintergrund */
    background: #156281 !important;
    background-image: none !important; /* Vernichtet das Cassiopeia-Rot endgültig */
    border: none !important;
}

/* 2. Die Schriftfarbe für dein Copyright im Balken */
footer .mod-custom, 
footer p,
.footer-content,
.footer .mod-custom p,
footer span {
    color: #D4EFFD !important; /* Dein helles Blau für die Schrift */
    text-align: center !important; /* Schön mittig platziert */
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 15px 0 !important; /* Angenehmer Abstand nach oben und unten */
}

/* Falls du Links im Footer hast (z.B. Impressum) */
footer a,
.footer a {
    color: #D4EFFD !important;
    text-decoration: underline !important;
}

/* Hover-Effekt für Links */
footer a:hover,
.footer a:hover {
    color: #ffffff !important; /* Leuchtet weiß auf beim Drüberfahren */
}

/* Zwingt das erste Element (deine Social Icons) in die vertikale Mitte */
.header-content > *:first-child,
.header-content .mod-custom:first-child,
.header-content div[class*="social"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important; /* Nutzt die volle Höhe des Headers zur Zentrierung */
}

/* Falls die Symbole selbst ein umschließendes Listen-Element haben */
.header-content > *:first-child ul,
.header-content > *:first-child div {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}