/* ==========================================================================
   1. GLOBAL & MENÜ-STYLING (STARTSEITE & STANDARD)
   ========================================================================== */

/* Roter Hintergrund NUR für den aktuell aktiven Menüpunkt */
#sp-header .sp-megamenu-parent > li.active > a {
    background-color: #cc1517 !important;
    color: #000000 !important; /* Schwarze Schrift auf dem aktiven roten Feld */
}

/* Rote Schrift, wenn man mit der Maus über inaktive Punkte fährt (Hover) */
.sp-megamenu-parent > li:not(.active):hover > a {
    color: #cc1517 !important;
}

/* ==========================================================================
   2. RADIKALER FIX FÜR DIE PORTFOLIO-DETAILANSICHT (UNTERSEITEN)
   ========================================================================== */

/* ALLE Spalten und Container innerhalb des Headers auf Unterseiten komplett vom Rot befreien */
body.view-sp_simpleportfolio #sp-header *,
body.sp-simpleportfolio-view-item #sp-header *,
body.view-sp_simpleportfolio [class*="col-"],
body.sp-simpleportfolio-view-item [class*="col-"],
body.view-sp_simpleportfolio .container,
body.sp-simpleportfolio-view-item .container,
body.view-sp_simpleportfolio .row,
body.sp-simpleportfolio-view-item .row {
    background: transparent !important;
    background-color: transparent !important;
}

/* Den gesamten Header-Hintergrund auf das dunkle Grau der Hauptseite zwingen */
body.view-sp_simpleportfolio #sp-header, 
body.sp-simpleportfolio-view-item #sp-header {
    background-color: #2b2b2b !important;
    background: #2b2b2b !important;
}

/* Die Schriftfarbe der Navigations-Links auf der Unterseite wieder weiß machen */
body.view-sp_simpleportfolio .sp-megamenu-parent > li > a,
body.sp-simpleportfolio-view-item .sp-megamenu-parent > li > a {
    color: #ffffff !important;
}

/* Hover-Effekt für die Links auf der Unterseite aktivieren */
body.view-sp_simpleportfolio .sp-megamenu-parent > li:hover > a,
body.sp-simpleportfolio-view-item .sp-megamenu-parent > li:hover > a {
    color: #cc1517 !important;
}

/* Das Logo-Bild explizit vor dem unsichtbar machen schützen */
body.view-sp_simpleportfolio .logo img,
body.sp-simpleportfolio-view-item .logo img {
    display: inline-block !important;
    visibility: visible !important;
}

/* ==========================================================================
   3. PORTFOLIO META-INFOS (Client & Date ausblenden, Tags behalten)
   ========================================================================== */

.sp-simpleportfolio-meta ul li:nth-child(1),
.sp-simpleportfolio-meta ul li:nth-child(2),
.sp-simpleportfolio-details ul li:nth-child(1),
.sp-simpleportfolio-details ul li:nth-child(2),
.sp-simpleportfolio-client-name,
.sp-simpleportfolio-created {
    display: none !important;
}

/* ==========================================================================
   4. SERVICE-ICONS & TEAM-SLIDER
   ========================================================================== */

/* Service-Icons (3D-Sechsecke) */
.sppb-icon-container { background-color: #cc1517 !important; }
.sppb-icon-container::before { border-bottom-color: #cc1517 !important; }
.sppb-icon-container::after { border-top-color: #cc1517 !important; }

/* TEAM-SLIDER (Hintergrund & Weisse Schrift) */
.sppb-team .sppb-team-info,
.sppb-team-info,
.sppb-team:hover .sppb-team-info {
    background-color: #cc1517 !important;
}

.sppb-team-info,
.sppb-team-info *,
.sppb-team-info h3, 
.sppb-team-info p,
.sppb-team-info span,
.sppb-team-info a {
    color: #ffffff !important;
}

/* ==========================================================================
   5. OVERLAYS & PORTFOLIO-EFFEKTE (STARTSEITE)
   ========================================================================== */

[class*="sppb-portfolio"] [class*="overlay"],
[class*="portfolio"] [class*="overlay"],
.sppb-gallery-overlay,
.portfolio-overlay,
.sppb-portfolio-overlay {
    background-color: rgba(204, 21, 23, 0.85) !important;
}

[class*="portfolio"] a,
[class*="portfolio"] button,
.sppb-gallery-btn,
.portfolio-btn {
    background-color: #cc1517 !important;
    border-color: #cc1517 !important;
    color: #ffffff !important;
}

[class*="portfolio"] h3,
[class*="portfolio"] h4,
[class*="portfolio"] .portfolio-title {
    color: #000000 !important; 
}