/* 
  ---------------------------------------------------------------
  Website Content and Design © www.ClaxDesign.com
  Alle Styles, Layouts und Design-Code in dieser Datei wurden
  exklusiv von ClaxDesign erstellt.
  Jede unautorisierte Nutzung, Modifikation oder Weitergabe ist verboten.
  ---------------------------------------------------------------
*/

/* Root-Variablen für Farben, Hintergrund und Text */
:root {
    --primary: red; /* Hauptfarbe für Icons, Hover-Effekte und Akzente */
    --text-dark: white; /* Textfarbe im Dark Mode */
    --text-light: black; /* Textfarbe im Light Mode */
    --bg-dark: black; /* Hintergrundfarbe Dark Mode */
    --bg-light: white; /* Hintergrundfarbe Light Mode */
    --navbar-bg-dark: rgba(50, 50, 50, 0.85); /* Navbar Hintergrund Dark Mode */
    --navbar-bg-light: rgba(240, 240, 240, 0.95); /* Navbar Hintergrund Light Mode */
}

/* Navbar Container */
.navbar {
    position: fixed; /* Navbar bleibt beim Scrollen oben */
    top: 20px; /* Abstand vom oberen Bildschirmrand */
    left: 50%; /* Zentriert horizontal */
    transform: translateX(-50%); /* Korrektur zur exakten Zentrierung */
    width: 95%; /* Breite relativ zum Bildschirm */
    max-width: 1400px; /* Maximale Breite */
    background-color: var(--navbar-bg-dark) !important; /* Hintergrundfarbe Dark Mode */
    backdrop-filter: blur(15px); /* Blur-Effekt für Hintergrund */
    border-radius: 50px; /* Abgerundete Ecken */
    z-index: 2000; /* Navbar liegt über allen Elementen */
    padding: 10px 30px; /* Innenabstand oben/unten und links/rechts */
    transition: all 0.6s; /* Sanfte Animation bei Farb- oder Positionsänderungen */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Schatten für Tiefe */
    display: flex; /* Flexbox für Logo, Navigation, Hamburger */
    align-items: center; /* Vertikale Zentrierung der Elemente */
    justify-content: space-between; /* Abstand zwischen Logo und Navigation */
}

/* Navbar im Light Mode */
body.light-mode .navbar {
    background-color: var(--navbar-bg-light) !important; /* Heller Hintergrund */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Logo innerhalb der Navbar */
.navbar-brand img {
    height: 70px !important; /* Höhe des Logos */
    width: auto; /* Breite proportional zur Höhe */
    display: block; /* Block-Element für bessere Zentrierung */
    margin: 0 auto; /* Horizontal zentrieren */
    margin-top: -10px; /* Leichtes Anheben */
    margin-left: -30px; /* Linksversatz für Designanpassung */
}

/* Hamburger-Button Container – rechts oben */
.hamburger-button {
    display: flex; /* Flexbox für Icon-Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    width: 50px; /* Breite des Buttons */
    height: 50px; /* Höhe des Buttons */
    cursor: pointer; /* Zeiger bei Hover */
    background: transparent; /* Transparenter Hintergrund */
    border: none; /* Kein Standard-Rahmen */
    padding: 0; /* Kein Innenabstand */
    z-index: 2001; /* Über Navbar-Elementen */
    margin-left: auto; /* Position rechts außen */
}

/* Entfernt Fokus-Rahmen bei Klick */
.hamburger-button:focus {
    outline: none; /* Kein Fokus-Rahmen */
    box-shadow: none; /* Keine Schattierung beim Fokus */
}

/* Hamburger-Icon Striche – Basislinie */
.hamburger-icon {
    position: relative; /* Position für Pseudo-Elemente */
    width: 25px; /* Länge des Strichs */
    height: 2px; /* Dicke des Strichs */
    background-color: var(--primary); /* Strichfarbe */
    transition: all 0.3s; /* Sanfte Übergänge */
}

/* Pseudo-Elemente für obere und untere Striche */
.hamburger-icon::before,
.hamburger-icon::after {
    content: ''; /* Leere Inhalte */
    position: absolute; /* Position relativ zum Hauptstrich */
    width: 25px; /* Länge identisch */
    height: 2px; /* Dicke identisch */
    background-color: var(--primary); /* Strichfarbe */
    transition: all 0.3s; /* Sanfte Animation */
}

/* Oberer Strich versetzt */
.hamburger-icon::before {
    transform: translateY(-7px); /* Nach oben verschoben */
}

/* Unterer Strich versetzt */
.hamburger-icon::after {
    transform: translateY(7px); /* Nach unten verschoben */
}

/* Aktiver Zustand – Hamburger öffnet Menü */
.hamburger-icon.active {
    background-color: transparent; /* Mittlerer Strich verschwindet */
}

/* Obere Linie rotiert */
.hamburger-icon.active::before {
    transform: rotate(45deg); /* Diagonale Linie */
}

/* Untere Linie rotiert */
.hamburger-icon.active::after {
    transform: rotate(-45deg); /* Diagonale Linie kreuzend */
}

/* Navbar Navigation Container */
.navbar-nav {
    gap: 15px; /* Abstand zwischen Navigationselementen */
    align-items: center; /* Vertikale Ausrichtung */
}

/* Einzelne Links innerhalb der Navbar */
.nav-link {
    color: var(--text-dark) !important; /* Textfarbe Dark Mode */
    font-weight: 500; /* Schriftgewicht */
    font-size: 1rem; /* Schriftgröße */
    padding: 8px 20px !important; /* Innenabstand */
    background-color: transparent; /* Kein Hintergrund */
    transition: all 0.3s; /* Sanfte Farbänderung */
    white-space: nowrap; /* Kein Zeilenumbruch */
    position: relative; /* Für Pseudo-Elemente (z.B. Unterstriche) */
}

/* Navbar Links Light Mode */
body.light-mode .nav-link {
    color: var(--text-light) !important; /* Textfarbe Light Mode */
}

/* Hover- und aktive Links */
.nav-link:hover,
.nav-link.active {
    color: var(--primary) !important; /* Farbwechsel beim Hover/aktiv */
    font-weight: 600; /* Schriftgewicht erhöhen */
}

/* Unterstrich bei Hover oder aktiv */
.nav-link:hover::after,
.nav-link.active::after {
    content: ''; /* Leer für Unterstrich */
    position: absolute; /* Position relativ zum Link */
    left: 50%; /* Horizontal zentriert */
    bottom: 0; /* Unterkante des Links */
    width: 60%; /* Breite des Unterstrichs */
    height: 3px; /* Höhe des Unterstrichs */
    background-color: var(--primary); /* Farbe des Unterstrichs */
    transform: translateX(-50%); /* Exakte Zentrierung */
}

/* Dropdown-Menü Container */
.dropdown-menu {
    background-color: var(--navbar-bg-dark); /* Dark Mode Hintergrund */
    backdrop-filter: blur(10px); /* Blur-Effekt */
    border: none; /* Kein Rahmen */
    border-radius: 15px; /* Abgerundete Ecken */
    padding: 0; /* Innenabstand entfernen */
    min-width: 200px; /* Mindestbreite */
}

/* Dropdown Light Mode */
body.light-mode .dropdown-menu {
    background-color: var(--navbar-bg-light); /* Heller Hintergrund */
}

/* Einzelne Dropdown Items */
.dropdown-item {
    color: var(--text-dark); /* Textfarbe Dark Mode */
    padding: 8px 16px; /* Innenabstand */
    font-size: 0.95rem; /* Schriftgröße */
    background-color: transparent; /* Kein Hintergrund */
    transition: all 0.3s; /* Farbwechsel sanft */
}

/* Dropdown Item Light Mode */
body.light-mode .dropdown-item {
    color: var(--text-light); /* Textfarbe Light Mode */
}

/* Hover Effekt Dropdown Items */
.dropdown-item:hover {
    background-color: var(--primary); /* Hintergrundfarbe ändern */
    color: white !important; /* Textfarbe weiß */
}

/* Aktiver Dropdown-Item Zustand */
.dropdown-item.active {
    background-color: var(--primary); /* Hintergrundfarbe aktiv */
    color: white !important; /* Textfarbe aktiv */
    font-weight: 600; /* Schriftgewicht erhöhen */
}

/* Responsive Anpassungen ab Desktop (>=992px) */
@media (min-width: 992px) {
    .hamburger-button {
        display: none; /* Hamburger Button ausblenden */
    }

    .dropdown-menu {
        position: absolute; /* Dropdown unter Link positionieren */
        top: 100%; /* Direkt unter dem Link */
        left: 0; /* Links ausrichten */
    }
}

/* Responsive Anpassungen für Tablets und Smartphones (<992px) */
@media (max-width: 991px) {
    .navbar {
        width: 90%; /* Etwas schmaler */
        background-color: transparent !important; /* Transparent */
        box-shadow: none !important; /* Kein Schatten */
    }

    .navbar-nav {
        margin-left: 0; /* Kein zusätzlicher Rand */
        width: 100%; /* Volle Breite */
    }

    .navbar-collapse {
        position: fixed; /* Overlay über Content */
        top: 70px; /* Unterhalb der Navbar */
        left: 5%; /* Linker Abstand */
        width: 90%; /* Breite des Overlays */
        background-color: var(--navbar-bg-dark) !important; /* Dark Mode Hintergrund */
        backdrop-filter: blur(10px); /* Blur Effekt */
        padding: 20px; /* Innenabstand */
        border-radius: 20px; /* Abgerundete Ecken */
        z-index: 1999; /* Overlay über Content */
        box-shadow: none !important; /* Kein Schatten */
        border: none !important; /* Kein Rahmen */
    }

    /* Navbar Collapse Light Mode */
    body.light-mode .navbar-collapse {
        background-color: var(--navbar-bg-light) !important;
    }

    .navbar-nav {
        flex-direction: column; /* Links vertikal anordnen */
        gap: 10px; /* Abstand zwischen Links */
    }

    .navbar-collapse.show {
        display: flex; /* Anzeigen, wenn aktiv */
    }

    .navbar-collapse:not(.show) {
        display: none; /* Verstecken, wenn inaktiv */
    }

    /* Mobile Dropdown Menü */
    .dropdown-menu {
        position: static; /* Kein absoluter Abstand */
        width: 100%; /* Volle Breite */
        background-color: var(--navbar-bg-dark); /* Dark Mode */
        border-radius: 10px; /* Leicht abgerundet */
        margin-top: 5px; /* Abstand zum übergeordneten Link */
    }

    /* Mobile Dropdown Light Mode */
    body.light-mode .dropdown-menu {
        background-color: var(--navbar-bg-light);
    }
}