/* Allgemeine Navigationseinstellungen */
.sp-megamenu-parent {
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 99;
    display: block;
    float: right;
    position: relative;
}

/* Navigation Hintergrund */
#sp-header {
    background: #000000 !important; /* Schwarzer Hintergrund */
    position: relative;
    z-index: 99;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

.sp-page-title {
  background:#000000 !important; 
  text-align: center !important;
}

.sp-page-title .sp-page-title-heading {
  font-size: 100px !important;
  line-height: 1;
  font-weight: bold !important;
}

/* Logo oben links */
#sp-header .logo {
    display: inline-block;
    height: 90px; /* Setze die Höhe auf die Originalgröße */
    max-height: 90px; /* Sicherstellen, dass es nicht größer wird */
    width: auto; /* Breite proportional zur Höhe */
    transition: all 0.3s ease; /* Animation beim Scrollen oder Resizing */
}

.logo-image {
  height:180px !important;
}
.logo-image-phone {
  height:36px;
}

#sp-header.menu-fixed .logo {
    height: 70px; /* Kleinere Größe bei fixierter Navigation */
    max-height: 70px;
}

/* Navigation Links */
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {
    display: inline-block;
    padding: 0 20px;
    line-height: 90px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #FFFFFF; /* Weiße Schrift */
    background-color: transparent !important;
    font-family: 'Open Sans', Arial, sans-serif;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover- und aktive Links */
.sp-megamenu-parent > li:hover > a, 
.sp-megamenu-parent > li:hover > span, 
.sp-megamenu-parent > li.active > a, 
.sp-megamenu-parent > li.active:hover > a {
    color: #f52e2e !important; /* Rot bei Hover und aktiv */
    text-decoration: none;
}

/* Dropdown-Menü */
.sp-megamenu-parent .sp-dropdown {
    background-color: #FFFFFF; /* Weißer Hintergrund */
    border-radius: 4px;
    padding: 10px 0;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    color: #252525; /* Schwarzer Text */
    font-size: 14px;
    padding: 10px 15px;
    display: block;
    text-transform: uppercase;
    font-weight: 600;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
    color: #f52e2e !important; /* Rot bei Hover */
    background-color: rgba(245, 46, 46, 0.1); /* Leicht roter Hintergrund */
}

/* Mobile Navigation */
#offcanvas-toggler > i {
    font-size: 20px;
    color: #FFFFFF; /* Weiße Schrift für Mobilmenü */
}

#offcanvas-toggler > i:hover, 
#offcanvas-toggler > i:focus {
    color: #f52e2e !important; /* Rot bei Hover */
}

.offcanvas-menu {
    background-color: #FFFFFF; /* Weißer Hintergrund */
    color: #252525; /* Schwarzer Text */
}

.offcanvas-menu .offcanvas-inner a {
    color: #252525;
}

.offcanvas-menu .offcanvas-inner a:hover, 
.offcanvas-menu .offcanvas-inner a:focus {
    color: #f52e2e !important; /* Rot bei Hover */
}

/* Footer */
#sp-footer, #sp-bottom {
    background: #171717; /* Dunkler Hintergrund */
    color: #FFFFFF;
}

#sp-footer a, #sp-bottom a {
    color: #A2A2A2;
}

#sp-footer a:hover, #sp-footer a:focus, 
#sp-bottom a:hover, #sp-bottom a:focus {
    color: #f52e2e !important; /* Rot bei Hover */
}