/* ========================================
   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;
  box-sizing: border-box;
}

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

.footer-erdmann a:hover {
  color: #e63946 !important;
}

/* Mobil-Optimierung für das Menü */
@media (max-width: 768px) {
  .footer-container-inner {
    display: block !important;
    padding: 0 30px !important;
  }

  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;
}

/* ========================================
   HERO SECTIONS
   ======================================== */

.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: 20px 0;
  margin: 0 0 16px 0;
}

.container-header .navbar-toggler {
  color: black !important;
  cursor: pointer;
  border: 1px solid #fff;
}

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

.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;
}

.mm-toggler:active {
  outline: none !important;
}

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

.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;
}

@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;
  }
}

.aktuelles-hero .container-component,
.aktuelles-hero .site-grid {
  background: transparent !important;
}