/* 
  ---------------------------------------------------------------
  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 globale Farben */
:root {
    --primary: red; /* Hauptfarbe für Icons, Highlights und Akzente */
}

/* Sidebar Toggle Button – runder Button unten links zum Öffnen/Schließen der Sidebar */
.sidebar-toggle {
    position: fixed; /* Position fest am Bildschirm */
    left: 20px; /* Abstand von linker Bildschirmkante */
    bottom: 30px; /* Abstand von unterer Bildschirmkante */
    width: 60px; /* Breite des Buttons */
    height: 60px; /* Höhe des Buttons */
    background-color: black; /* Standard Hintergrundfarbe */
    border-radius: 50%; /* Runde Form */
    display: flex; /* Flexbox für zentrierten Inhalt */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    z-index: 1001; /* Sicherstellen, dass Button über allem liegt */
    cursor: pointer; /* Zeigt Mauszeiger als Pointer */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */
    transition: all 0.3s; /* Sanfte Übergänge für Hover/Animationen */
}

/* Sidebar Toggle Button im Light-Mode */
body.light-mode .sidebar-toggle {
    background-color: white; /* Hintergrundfarbe anpassen */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* leichterer Schatten */
}

/* Icon im Sidebar Toggle Button */
.sidebar-toggle i {
    color: red; /* Icon-Farbe */
    font-size: 2rem; /* Größe des Icons */
}

/* Sidebar Container – vertikale fixe Leiste am linken Bildschirmrand */
.fixed-sidebar {
    position: fixed; /* Bleibt beim Scrollen sichtbar */
    left: -80px; /* Start außerhalb des Bildschirms */
    bottom: 100px; /* Abstand von unten */
    width: 60px; /* Breite der Sidebar */
    background-color: rgba(0, 0, 0, 0.9); /* Dunkler, halbtransparenter Hintergrund */
    backdrop-filter: blur(10px); /* Blur-Effekt für Hintergrund */
    border-radius: 30px; /* Abgerundete Ecken */
    padding: 20px 0; /* Innenabstand oben/unten */
    z-index: 1000; /* Ebenenreihenfolge */
    display: flex; /* Flexbox für vertikale Anordnung */
    flex-direction: column; /* Elemente vertikal stapeln */
    align-items: center; /* Zentriert horizontal */
    justify-content: center; /* Zentriert vertikal */
    gap: 20px; /* Abstand zwischen Items */
    transition: left 0.4s ease; /* Sanftes Ein-/Ausblenden */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Schatteneffekt */
}

/* Sidebar geöffnet – sichtbar auf dem Bildschirm */
.fixed-sidebar.open {
    left: 20px; /* Sidebar nach links verschieben */
    margin-top: 200px; /* Abstand oben */
}

/* Sidebar im Light-Mode */
body.light-mode .fixed-sidebar {
    background-color: rgba(255, 255, 255, 0.95); /* Heller Hintergrund */
}

/* Einzelne Sidebar Items – Container für Icons oder Links */
.sidebar-item {
    position: relative; /* Für Tooltips oder Unterelemente */
}

/* Icons innerhalb der Sidebar Items */
.sidebar-item i {
    color: red; /* Icon-Farbe */
    font-size: 1.6rem; /* Icon-Größe */
    cursor: pointer; /* Mauszeiger als Pointer */
    transition: transform 0.3s; /* Animation bei Hover */
}

/* Hover-Effekt für Sidebar Icons */
.sidebar-item i:hover {
    transform: scale(1.2); /* Leichtes Vergrößern */
}

/* Theme Toggle Icon */
#theme-toggle {
    font-size: 1.6rem; /* Größe des Icons */
}

/* Sprachauswahl Container – versteckt standardmäßig */
.language-flags {
    display: none; /* Nicht sichtbar, bis aktiv */
    position: absolute; /* Absolute Positionierung relativ zur Sidebar */
    left: 70px; /* Abstand von Sidebar */
    margin-top: 10%; /* Vertikaler Versatz */
    transform: translateY(-50%); /* Vertikale Zentrierung */
    background-color: rgba(0, 0, 0, 0.9); /* Dunkler Hintergrund */
    padding: 20px 15px; /* Innenabstand */
    border-radius: 20px; /* Abgerundete Ecken */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Schatteneffekt */
    flex-direction: column; /* Flags vertikal anordnen */
    gap: 15px; /* Abstand zwischen Flaggen */
    width: auto; /* Automatische Breite */
    z-index: 1001; /* Ebenenreihenfolge */
}

/* Sprachauswahl Light-Mode */
body.light-mode .language-flags {
    background-color: rgba(255, 255, 255, 0.95); /* Heller Hintergrund */
}

/* Einzelne Flaggen-Items */
.flag-item {
    position: relative; /* Für Text-Overlays */
    display: flex; /* Icon und Text nebeneinander */
    align-items: center; /* Vertikale Zentrierung */
}

/* Flaggen Icon Styling */
.flag-icon {
    width: 50px; /* Breite */
    height: 35px; /* Höhe */
    border-radius: 6px; /* Leicht abgerundet */
    object-fit: cover; /* Bild proportional füllen */
    border: 2px solid transparent; /* Rand initial transparent */
    transition: all 0.3s; /* Sanfte Übergänge */
    cursor: pointer; /* Zeiger bei Hover */
}

/* Hover-Effekt für Flaggen */
.flag-item:hover .flag-icon {
    border: 2px solid red; /* Rand beim Hover */
    transform: scale(1.1); /* Vergrößerung */
}

/* Flaggen-Namen (Text) – versteckt standardmäßig */
.flag-name {
    position: absolute; /* Position relativ zum Flag-Item */
    left: 70px; /* Abstand zum Icon */
    white-space: nowrap; /* Text in einer Zeile */
    background-color: red; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: 5px 12px; /* Innenabstand */
    border-radius: 8px; /* Abgerundete Ecken */
    opacity: 0; /* Unsichtbar */
    visibility: hidden; /* Nicht anklickbar */
    transition: opacity 0.3s; /* Sanfter Übergang beim Einblenden */
    pointer-events: none; /* Keine Mausinteraktion */
}

/* Flag-Name beim Hover anzeigen */
.flag-item:hover .flag-name {
    opacity: 1; /* Sichtbar */
    visibility: visible; /* Aktiv */
}

/* Aktivierte Globe-Item zeigt Sprachauswahl */
.globe-item.active ~ .language-flags {
    display: flex; /* Flexbox sichtbar */
}

/* Tooltip-Text für Sidebar Items */
.tooltip-text {
    position: absolute; /* Relativ zum Item */
    left: 80px; /* Abstand vom Icon */
    top: 50%; /* Vertikal mittig */
    transform: translateY(-50%); /* Vertikal zentrieren */
    background-color: red; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: 8px 15px; /* Innenabstand */
    border-radius: 8px; /* Abgerundete Ecken */
    white-space: nowrap; /* Text in einer Zeile */
    opacity: 0; /* Anfangs unsichtbar */
    visibility: hidden; /* Anfangs nicht sichtbar */
    transition: opacity 0.3s; /* Sanfte Einblendung */
    font-size: 0.95rem; /* Textgröße */
}

/* Tooltip sichtbar beim Hover über Sidebar Item */
.sidebar-item:hover .tooltip-text {
    opacity: 1; /* Sichtbar */
    visibility: visible; /* Aktiv */
}

/* Responsive Anpassungen für Bildschirme <= 768px */
@media (max-width: 768px) {
    /* Sidebar Toggle Button anpassen */
    .sidebar-toggle {
        width: 50px;
        height: 50px;
        left: 15px;
        bottom: 20px;
    }
    .sidebar-toggle i {
        font-size: 1.8rem;
    }

    /* Sidebar geöffnet – Position anpassen */
    .fixed-sidebar.open {
        left: 15px;
        bottom: 90px;
    }

    /* Sprachauswahl für mobile Ansicht */
    .language-flags {
        display: none; /* Standard versteckt */
        position: fixed; /* Feste Position auf dem Bildschirm */
        left: 60px !important;
        right: 10px;
        top: 40%;
        transform: translateY(-50%);
        background-color: transparent !important; /* Transparent für mobile Overlay */
        padding: 15px;
        border-radius: 15px;
        box-shadow: transparent !important;
        gap: 10px;
        width: 180px;
        z-index: 1002; /* Über Sidebar */
    }
    body.light-mode .language-flags {
        background-color: rgba(255, 255, 255, 0.95); /* Heller Hintergrund im Light-Mode */
    }

    /* Tooltips ausblenden auf Mobile */
    .tooltip-text {
        display: none !important;
    }

    /* Flag-Namen in Mobile sichtbar machen */
    .flag-name {
        display: block;
        position: static;
        background-color: red;
        color: white;
        margin-left: 10px !important;
        padding: 3px 8px;
        border-radius: 5px;
        opacity: 1;
        visibility: visible;
        margin-top: 5px;
        width: 80px !important;
        text-align: center;
        font-size: 0.8rem;
    }

    /* Flag-Icon Größe anpassen für Mobile */
    .flag-icon {
        width: 40px;
        height: 28px;
    }
}