/*made by www.ClaxDesign.com*/

/* =============================================================================
   SPRACHAUSWAHL – Hauptcontainer für Flaggen
   =============================================================================
   Hier definiere ich den Hauptcontainer für die Sprachauswahl, der die Flaggen enthält.
   - position: relative;: Ermöglicht die absolute Positionierung von Kind-Elementen innerhalb dieses Containers.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - align-items: center;: Zentriert die Kind-Elemente vertikal.
   - justify-content: center;: Zentriert die Kind-Elemente horizontal.
   ============================================================================= */
.language-hover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   SPRACHAUSWAHL – Tooltip für Flaggen
   =============================================================================
   Hier definiere ich den Tooltip, der beim Hovern über die Sprachauswahl angezeigt wird.
   - display: none;: Verbirgt den Tooltip standardmäßig.
   - position: absolute;: Positioniert den Tooltip absolut relativ zum Eltern-Element.
   - left: 80px;: Positioniert den Tooltip 80px vom linken Rand des Eltern-Elements entfernt.
   - margin-top: 55px;: Setzt einen oberen Außenabstand von 55px.
   - transform: translateY(-50%);: Verschiebt den Tooltip um 50% seiner Höhe nach oben, um ihn zu zentrieren.
   - backdrop-filter: none;: Deaktiviert den Unschärfe-Filter.
   - background-color: transparent !important;: Setzt den Hintergrund auf transparent.
   - padding: 0;: Entfernt Innenabstände.
   - border-radius: 20px;: Abgerundete Ecken.
   - width: auto;: Passt die Breite automatisch an den Inhalt an.
   - flex-direction: column;: Ordnet die Kind-Elemente vertikal an.
   - gap: 15px;: Setzt einen Abstand von 15px zwischen den Kind-Elementen.
   - margin-left: -25px;: Setzt einen linken Außenabstand von -25px.
   - box-shadow: none !important;: Entfernt den Schatten.
   - align-items: flex-start;: Richtet die Kind-Elemente am linken Rand aus.
   - z-index: 1000;: Setzt eine hohe z-Index-Ebene, um sicherzustellen, dass der Tooltip über anderen Elementen liegt.
   ============================================================================= */
.flags-tooltip {
    display: none;
    position: absolute;
    left: 80px;
    margin-top: 55px;
    transform: translateY(-50%);
    backdrop-filter: none;
    background-color: transparent !important;
    padding: 0;
    border-radius: 20px;
    width: auto;
    flex-direction: column;
    gap: 15px;
    margin-left: -25px;
    box-shadow: none !important;
    align-items: flex-start;
    z-index: 1000;
}

/* =============================================================================
   SPRACHAUSWAHL – Anzeige des Tooltips beim Hovern
   =============================================================================
   Hier definiere ich, dass der Tooltip angezeigt wird, wenn über den Sprachauswahl-Container gehovert wird.
   - display: flex;: Zeigt den Tooltip als Flexbox an.
   ============================================================================= */
.language-hover:hover .flags-tooltip {
    display: flex;
}

/* =============================================================================
   SPRACHAUSWAHL – Einzelnes Flaggen-Element
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für ein einzelnes Flaggen-Element im Tooltip.
   - position: relative;: Ermöglicht die absolute Positionierung von Kind-Elementen innerhalb dieses Elements.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - align-items: center;: Zentriert die Kind-Elemente vertikal.
   - justify-content: flex-start;: Richtet die Kind-Elemente am linken Rand aus.
   - width: auto;: Passt die Breite automatisch an den Inhalt an.
   - gap: 10px;: Setzt einen Abstand von 10px zwischen den Kind-Elementen.
   - padding: 8px 12px;: Setzt Innenabstände von 8px oben/unten und 12px links/rechts.
   - border-radius: 15px;: Abgerundete Ecken.
   - transition: all 0.3s ease;: Ermöglicht sanfte Übergänge bei Hover-Effekten.
   - cursor: pointer;: Zeigt an, dass das Element klickbar ist.
   - margin: 0;: Entfernt Außenabstände.
   - background: transparent;: Setzt den Hintergrund auf transparent.
   ============================================================================= */
.flag-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0;
    background: transparent;
}

/* =============================================================================
   SPRACHAUSWAHL – Hover-Effekt für Flaggen-Elemente
   =============================================================================
   Hier definiere ich den Hover-Effekt für ein einzelnes Flaggen-Element.
   - transform: scale(1.05);: Skaliert das Element um 5% nach oben.
   - background: rgba(0, 0, 0, 0.7);: Setzt einen halbtransparenten schwarzen Hintergrund.
   - backdrop-filter: blur(5px);: Wendet einen Unschärfe-Filter auf den Hintergrund an.
   ============================================================================= */
.flag-item:hover {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

/* =============================================================================
   SPRACHAUSWAHL – Flaggen-Bild
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für das Bild der Flagge.
   - width: 40px;: Setzt die Breite auf 40px.
   - height: 30px;: Setzt die Höhe auf 30px.
   - border-radius: 4px;: Leicht abgerundete Ecken.
   - margin: 0;: Entfernt Außenabstände.
   - margin-bottom: 5px;: Setzt einen unteren Außenabstand von 5px.
   - margin-top: 5px;: Setzt einen oberen Außenabstand von 5px.
   ============================================================================= */
.flag-item img {
    width: 40px;
    height: 30px;
    border-radius: 4px;
    margin: 0;
    margin-bottom: 5px;
    margin-top: 5px;
}

/* =============================================================================
   SPRACHAUSWAHL – Beschriftung der Flagge
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Beschriftung der Flagge.
   - color: white;: Weiße Textfarbe.
   - font-size: 0.8rem;: Schriftgröße von 0.8rem.
   - font-weight: 400;: Normale Schriftstärke.
   - opacity: 0;: Macht den Text standardmäßig unsichtbar.
   - transition: opacity 0.3s ease;: Ermöglicht sanfte Übergänge bei Hover-Effekten.
   - pointer-events: none;: Verhindert, dass der Text auf Mausinteraktionen reagiert.
   - white-space: nowrap;: Verhindert Zeilenumbrüche im Text.
   ============================================================================= */
.flag-label {
    color: white;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* =============================================================================
   SPRACHAUSWAHL – Anzeige der Beschriftung beim Hovern
   =============================================================================
   Hier definiere ich, dass die Beschriftung der Flagge beim Hovern sichtbar wird.
   - opacity: 1;: Macht den Text sichtbar.
   ============================================================================= */
.flag-item:hover .flag-label {
    opacity: 1;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Flaggen-Elemente
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Flaggen-Elemente im Light-Mode.
   - color: #1a1a1a !important;: Dunkle Textfarbe.
   ============================================================================= */
body.light-mode .flags-tooltip div {
    color: #1a1a1a !important;
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für Flaggen-Elemente
   =============================================================================
   Hier überschreibe ich den Hover-Effekt für die Flaggen-Elemente im Light-Mode.
   - background: rgba(255, 255, 255, 0.8) !important;: Setzt einen halbtransparenten weißen Hintergrund.
   ============================================================================= */
body.light-mode .flag-item:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Beschriftung der Flaggen
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Beschriftung der Flaggen im Light-Mode.
   - color: #1a1a1a !important;: Dunkle Textfarbe.
   ============================================================================= */
body.light-mode .flag-label {
    color: #1a1a1a !important;
}

/* =============================================================================
   DARK MODE – Anpassungen für die Beschriftung der Flaggen
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Beschriftung der Flaggen im Dark-Mode.
   - color: white !important;: Weiße Textfarbe.
   ============================================================================= */
body:not(.light-mode) .flag-label {
    color: white !important;
}

/* =============================================================================
   DARK MODE – Anpassungen für Flaggen-Elemente
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Flaggen-Elemente im Dark-Mode.
   - color: white !important;: Weiße Textfarbe.
   ============================================================================= */
body:not(.light-mode) .flags-tooltip div {
    color: white !important;
}

/* =============================================================================
   DARK MODE – Hover-Effekt für Flaggen-Elemente
   =============================================================================
   Hier überschreibe ich den Hover-Effekt für die Flaggen-Elemente im Dark-Mode.
   - background: rgba(0, 0, 0, 0.1) !important;: Setzt einen halbtransparenten schwarzen Hintergrund.
   ============================================================================= */
body:not(.light-mode) .flag-item:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für Flaggen-Abstand und Ausrichtung
   =============================================================================
   Hier passe ich die Innenabstände und Außenabstände der Flaggen-Elemente an.
   - padding: 0px 5px;: Setzt Innenabstände von 0px oben/unten und 5px links/rechts.
   - margin-top: -10px;: Setzt einen negativen oberen Außenabstand von 10px.
   ============================================================================= */
.flag-item {
    padding: 0px 5px;
    margin-top: -10px;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für den Abstand der Flaggen im Tooltip
   =============================================================================
   Hier passe ich den Abstand zwischen den Flaggen-Elementen im Tooltip an.
   - gap: 10px;: Setzt einen Abstand von 10px zwischen den Elementen.
   ============================================================================= */
.flags-tooltip {
    gap: 10px;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Hover-Fläche der Flaggen
   =============================================================================
   Hier füge ich ein Pseudo-Element hinzu, um die Klickfläche der Flaggen-Elemente zu vergrößern.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut innerhalb des Flaggen-Elements.
   - top: 0; left: 0; right: 0; bottom: 0;: Positioniert das Element an allen Rändern des Flaggen-Elements.
   - border-radius: 15px;: Abgerundete Ecken.
   ============================================================================= */
.flag-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
}

/* =============================================================================
   SPRACHAUSWAHL – Klickfläche für Flaggen-Elemente
   =============================================================================
   Hier definiere ich die Klickfläche für die Flaggen-Elemente, um sicherzustellen, dass die gesamte Fläche klickbar ist.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - align-items: center;: Zentriert die Kind-Elemente vertikal.
   - justify-content: flex-start;: Richtet die Kind-Elemente am linken Rand aus.
   - gap: 10px;: Setzt einen Abstand von 10px zwischen den Kind-Elementen.
   - width: 100%;: Volle Breite des Eltern-Elements.
   - height: 100%;: Volle Höhe des Eltern-Elements.
   - padding: 4px 10px;: Setzt Innenabstände von 4px oben/unten und 10px links/rechts.
   - border-radius: 15px;: Abgerundete Ecken.
   - text-decoration: none;: Entfernt die Standard-Unterstreichung von Links.
   - color: inherit;: Erbt die Textfarbe vom Eltern-Element.
   ============================================================================= */
.flag-item a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 4px 10px;
    border-radius: 15px;
    text-decoration: none;
    color: inherit;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Flaggen-Bilder in Links
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Flaggen-Bilder innerhalb von Links.
   - width: 30px;: Setzt die Breite auf 30px.
   - height: 20px;: Setzt die Höhe auf 20px.
   - border-radius: 4px;: Leicht abgerundete Ecken.
   ============================================================================= */
.flag-item a img {
    width: 30px;
    height: 20px;
    border-radius: 4px;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Position der Flaggen-Labels
   =============================================================================
   Hier passe ich den linken Außenabstand der Flaggen-Labels an.
   - margin-left: 20px;: Setzt einen linken Außenabstand von 20px.
   ============================================================================= */
.flag-label {
    margin-left: 20px;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Position des Tooltips
   =============================================================================
   Hier passe ich die Position des Tooltips an.
   - top: 50%;: Positioniert den Tooltip vertikal in der Mitte des Eltern-Elements.
   - transform: translateY(-50%);: Verschiebt den Tooltip um 50% seiner Höhe nach oben, um ihn zu zentrieren.
   ============================================================================= */
.flags-tooltip {
    top: 50%;
    transform: translateY(-50%);
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Mindestbreite der Flaggen-Elemente
   =============================================================================
   Hier setze ich eine Mindestbreite für die Flaggen-Elemente.
   - min-width: 12px;: Setzt eine Mindestbreite von 12px.
   ============================================================================= */
.flag-item {
    min-width: 12px;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Hover-Animation der Flaggen-Elemente
   =============================================================================
   Hier definiere ich die Übergänge für die Hover-Animation der Flaggen-Elemente.
   - transition: transform 0.3s ease, background 0.3s ease;: Ermöglicht sanfte Übergänge für Transformation und Hintergrund.
   ============================================================================= */
.flag-item {
    transition: transform 0.3s ease, background 0.3s ease;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Hintergrundfarbe der Flaggen-Elemente im Dark Mode
   =============================================================================
   Hier setze ich die Hintergrundfarbe der Flaggen-Elemente im Dark-Mode auf transparent.
   - background: transparent;: Transparenter Hintergrund.
   ============================================================================= */
body:not(.light-mode) .flag-item {
    background: transparent;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Hintergrundfarbe der Flaggen-Elemente im Light Mode
   =============================================================================
   Hier setze ich die Hintergrundfarbe der Flaggen-Elemente im Light-Mode auf transparent.
   - background: transparent;: Transparenter Hintergrund.
   ============================================================================= */
body.light-mode .flag-item {
    background: transparent;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Textfarbe der Flaggen-Labels im Light Mode
   =============================================================================
   Hier setze ich die Textfarbe der Flaggen-Labels im Light-Mode auf dunkel.
   - color: #1a1a1a;: Dunkle Textfarbe.
   ============================================================================= */
body.light-mode .flag-label {
    color: #1a1a1a;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Textfarbe der Flaggen-Labels im Dark Mode
   =============================================================================
   Hier setze ich die Textfarbe der Flaggen-Labels im Dark-Mode auf weiß.
   - color: white;: Weiße Textfarbe.
   ============================================================================= */
body:not(.light-mode) .flag-label {
    color: white;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Hintergrundfarbe des Tooltips
   =============================================================================
   Hier setze ich die Hintergrundfarbe des Tooltips auf transparent.
   - background: transparent;: Transparenter Hintergrund.
   ============================================================================= */
.flags-tooltip {
    background: transparent;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Hintergrundfarbe des Tooltips im Light Mode
   =============================================================================
   Hier setze ich die Hintergrundfarbe des Tooltips im Light-Mode auf transparent.
   - background: transparent;: Transparenter Hintergrund.
   ============================================================================= */
body.light-mode .flags-tooltip {
    background: transparent;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Hintergrundfarbe des Tooltips im Dark Mode
   =============================================================================
   Hier setze ich die Hintergrundfarbe des Tooltips im Dark-Mode auf transparent.
   - background: transparent;: Transparenter Hintergrund.
   ============================================================================= */
body:not(.light-mode) .flags-tooltip {
    background: transparent;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für das Pseudo-Element des Tooltips
   =============================================================================
   Hier füge ich ein Pseudo-Element hinzu, das als Pfeil für den Tooltip dient.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - top: -10px;: Positioniert das Element 10px über dem Tooltip.
   - left: 20px;: Positioniert das Element 20px vom linken Rand des Tooltips entfernt.
   - width: 0;: Setzt die Breite auf 0.
   - height: 0;: Setzt die Höhe auf 0.
   - border-left: 10px solid transparent;: Definiert einen transparenten linken Rahmen.
   - border-right: 10px solid transparent;: Definiert einen transparenten rechten Rahmen.
   - border-bottom: 10px solid rgba(0, 0, 0, 0.7);: Definiert einen schwarzen unteren Rahmen.
   - display: none;: Verbirgt das Pseudo-Element standardmäßig.
   ============================================================================= */
.flags-tooltip::before {
    content: '';
    top: -10px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(0, 0, 0, 0.7);
    display: none;
}

/* =============================================================================
   SPRACHAUSWAHL – Fix für die Anzeige des Pseudo-Elements beim Hovern
   =============================================================================
   Hier definiere ich, dass das Pseudo-Element des Tooltips beim Hovern angezeigt wird.
   - display: block;: Zeigt das Pseudo-Element an.
   ============================================================================= */
.language-hover:hover .flags-tooltip::before {
    display: block;
}