/* ========================================================================
   SKC BREUBERG-HÖCHST - FINAL COLOR & LOGO
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. HINTERGRUND-FARBEN (Header & Footer)
   ------------------------------------------------------------------------ */
.container-header,
.container-footer {
    background-color: #27348b !important; /* Vereins-Blau */
    background-image: none !important;     /* Entfernt das Standard-Lila */
    color: #ffffff !important;             /* Standard-Schrift weiß */
}

/* Footer etwas hübscher machen */
.container-footer {
    border-top: 4px solid #ffffff; /* Weißer Trennstrich oben */
    padding-top: 30px;
}

/* ------------------------------------------------------------------------
   2. SCHRIFTFARBEN ANPASSEN (Damit alles auf Blau lesbar ist)
   ------------------------------------------------------------------------ */
/* Vereinsname, Menü-Links, Footer-Links und Überschriften -> WEISS */
.site-title, 
.brand-logo .logo, 
.container-header .mod-menu > li > a,
.container-footer a, 
.container-footer h3,
.container-footer h4,
.container-footer li {
    color: #ffffff !important;
}


  /* ------------------------------------------------------------------------
   3. LOGO & NAME NEBENEINANDER (Der "Flex"-Trick)
   ------------------------------------------------------------------------ */
.navbar-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertikal mittig */
    gap: 15px; /* Abstand zwischen Logo und Text */
}

/* Bild-Größe kontrollieren */
.brand-logo img {
    height: 100px !important; /* Passt die Höhe an */
    width: auto !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Text-Formatierung */
.site-title {
    font-size: 1.6rem;
    margin: 0 !important;
    line-height: 1.2;
}


    /* Logo und Name müssen intern auch als Flex behandelt werden (bereits aus früheren Schritten) */
    .navbar-brand {
        display: flex !important; 
        align-items: center !important;
        gap: 15px;
    }

    /* Das Menü muss nur dafür sorgen, dass es keine überflüssigen Margins hat */
    .container-header .mod-menu {
        margin: 0 !important; 
    }
}