/* ========================================
   Erdmann Bedachungen - Weißes Menü Design
   ======================================== */

/* FULLWIDTH LAYOUT */

/* ===== Oswald Font (TTF) ===== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

/* Lokale Font Awesome Icons */
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    src: url("/media/fonts/fa/fa-solid-900.woff2") format("woff2");
}

.fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

body {
    font-family: 'Oswald', sans-serif;
}
@font-face {
    font-family: 'Oswald';
    src: url('/media/fonts/oswald/Oswald-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('/media/fonts/oswald/Oswald-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

.site {
    max-width: 100% !important;
}

.site-grid {
    gap: 0 !important;
}

/* HEADER ROT FULLWIDTH */
.container-header {
    background-color: #ffffff !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.container-header .grid-child {
    background-color: #ffffff !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* LOGO MIT WEISSEM HINTERGRUND */
.navbar-brand,
a.navbar-brand {
    background-color: white !important;
    padding: 15px 25px !important;
    margin: 10px 20px !important;
    border-radius: 5px !important;
    display: inline-block !important;
}

.logo {
    background-color: white !important;
    padding: 15px 25px !important;
    border-radius: 5px !important;
}

.logo img {
    max-height: 70px !important;
    width: auto !important;
    display: block !important;
}

/* NAVIGATION - WEISSER HINTERGRUND */
.navbar,
nav.navbar {
    background-color: white !important;
    padding: 0 !important;
    margin: 10px 20px 10px 0 !important;
    border-radius: 5px !important;
}

.mod-menu {
    background-color: white !important;
}

.navbar-nav {
    display: flex !important;
    align-items: center !important;
}

/* Haupt-Menü-Links - SCHWARZ auf WEISS */
.nav-item > a {
    color: #333 !important;
    font-weight: 500 !important;
    padding: 15px 20px !important;
    background-color: white !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.nav-item > a:hover {
    background-color: #f0f0f0 !important;
    color: #E63946 !important;
    text-decoration: none !important;
}

/* AKTIVER MENÜPUNKT - ROT */
.nav-item.active > a,
.nav-item.current > a,
.nav-item > a.current,
.nav-item > a[aria-current="page"] {
    background-color: #E63946 !important;
    color: white !important;
    border-radius: 3px !important;
}

/* Dropdown-Button (Chevron) */
.mod-menu__toggle-sub {
    background-color: transparent !important;
    border: none !important;
    color: #333 !important;
    padding: 15px 10px !important;
}

.mod-menu__toggle-sub .icon-chevron-down {
    color: #333 !important;
    filter: none !important;
}

.mod-menu__toggle-sub:hover {
    background-color: #f0f0f0 !important;
}

/* Wenn Parent aktiv ist, Button auch rot */
.nav-item.active .mod-menu__toggle-sub,
.nav-item.current .mod-menu__toggle-sub {
    color: white !important;
}

.nav-item.active .mod-menu__toggle-sub .icon-chevron-down,
.nav-item.current .mod-menu__toggle-sub .icon-chevron-down {
    color: white !important;
    filter: brightness(0) invert(1) !important;
}

/* DROPDOWN-MENÜ - WEISS mit Hover-Effekt */
.mod-menu__sub,
ul.mod-menu__sub {
    background-color: white !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    margin-top: 5px !important;
    padding: 5px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    position: absolute !important;
    z-index: 1000 !important;
}

/* Dropdown-Items - SCHWARZ auf WEISS */
.mod-menu__sub .nav-item a {
    color: #333 !important;
    background-color: white !important;
    padding: 12px 20px !important;
    display: block !important;
    border-bottom: none !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.mod-menu__sub .nav-item a:hover {
    background-color: #E63946 !important;
    color: white !important;
}

/* Aktiver Dropdown-Item */
.mod-menu__sub .nav-item.active a,
.mod-menu__sub .nav-item.current a {
    background-color: #E63946 !important;
    color: white !important;
}

/* Mobile Toggle */
.navbar-toggler {
    border-color: #333 !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51, 51, 51, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* CONTENT */
.container-component {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
}

/* FOOTER LILA FULLWIDTH */
.container-footer,
footer.footer {
    background-color: #312783 !important;
    color: white !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 0 !important;
}

.footer-erdmann, 
.footer-container-inner,
.start-hero .container-component {
    max-width: 100% !important; /* Erlaubt dem Container, schmaler zu werden */
    box-sizing: border-box;
}

/* Links im Footer */
.footer-erdmann a {
    color: #4A90E2;
    transition: color 0.3s;
}

.footer-erdmann a:hover {
    color: #e63946 !important; /* Erdmann-Rot beim Drüberfahren */
}

/* Mobil-Optimierung für das Menü */
@media (max-width: 768px) {
    .footer-container-inner {
        display: block !important; /* Stapelt die Spalten auf dem Handy */
        padding: 0 30px !important;
    }
    
    /* Falls du ein Modul-Menü oben hast: */
    nav ul {
        flex-direction: column;
        align-items: center;
    }
}

/* PHOCA GALLERY */
div[style*="display:block"][style*="color:#ccc"][style*="text-align:right"],
a[href*="phoca.cz/phocagallery"],
a[href*="format=feed"] {
    display: none !important;
}
.start-hero {
    background-image: url("/images/branding/tool-belt-739152.jpg");
    background-size: cover;
    background-position: center;
    padding: 120px 0;
}
.produkte-hero {
  background-image: url("/images/branding/produkte-bg.webp");
    background-size: cover;
    background-position: center;
    padding: 120px 0;
}

.aktuelles-hero {
  background-image: url("/images/branding/aktuelles-bg.webp");
    background-size: cover;
    background-position: center;
    padding: 120px 0;
}

.job-title {
  display:block;
  background: #312783;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-align: center;
  font-size: 1.25rem;
  padding: 20 0 20 0;
  margin: 0 0 16 0;
}
.container-header .navbar-toggler {
    color: black !important; 
    cursor: pointer;
    border: 1px solid #fff;
}

/* ========================================
   AKTIVER MENÜPUNKT STYLING
   ======================================== */

/* Desktop Menü - Aktiver Menüpunkt */
.metismenu-item.active > a,
.metismenu-item.current > a,
.metismenu-item > a[aria-current="page"] {
    background-color: #E63946 !important;
    color: white !important;
    border-radius: 3px !important;
}

.mm-toggler {
    outline: none !important;
    border: none !important;
    z-index: 100 !important;
}

.mm-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Verhindere, dass der Button über dem Dropdown steht */
.mm-toggler:active {
    outline: none !important;
}

/* Desktop Menü - Hover */
.metismenu-item:not(.active) > a:hover {
    background-color: #f0f0f0 !important;
    color: #E63946 !important;
    border-radius: 3px !important;
}

/* Desktop Menü - Standard Links */
.metismenu-item > a {
    color: #333 !important;
    font-weight: 500 !important;
    padding: 12px 18px !important;
    background-color: transparent !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

/* Mobile Menü - Aktiver Menüpunkt */
@media (max-width: 991px) {
    .metismenu-item.active > a,
    .metismenu-item > a[aria-current="page"] {
        background-color: #E63946 !important;
        color: white !important;
    }
    
    .metismenu-item:not(.active) > a:hover {
        background-color: #f9f9f9 !important;
        color: #E63946 !important;
    }
    
    .mm-collapse .metismenu-item a:hover {
        background-color: #E63946 !important;
        color: white !important;
    }
    
    .mm-collapse .metismenu-item.active a {
        background-color: #E63946 !important;
        color: white !important;
    }
}