/*made by www.ClaxDesign.com*/

/* =============================================================================
   SIDEBAR (RECHTS – GESPIEGELT)
   =============================================================================
   Hier definiere ich die rechte Sidebar, die standardmäßig versteckt ist und bei Bedarf
   eingeklappt werden kann. Sie ist rechtsbündig positioniert und enthält Icons für
   Sprachauswahl, Social Media und Modus-Umschaltung.

   - display: none;: Versteckt die Sidebar standardmäßig.
   - position: fixed;: Fixiert die Sidebar auf dem Bildschirm, unabhängig vom Scrollen.
   - right: 10px;: Positioniert die Sidebar 10 Pixel vom rechten Bildschirmrand entfernt.
   - top: 200px;: Positioniert die Sidebar 200 Pixel vom oberen Bildschirmrand entfernt.
   - width: 70px;: Setzt die Breite der Sidebar auf 70 Pixel.
   - height: calc(100vh - 120px);: Berechnet die Höhe der Sidebar als Viewport-Höhe minus 120 Pixel,
     um Platz für Header und Footer zu lassen.
   - flex-direction: column;: Ordnet die Elemente in der Sidebar vertikal an.
   - align-items: center;: Zentriert die Elemente horizontal in der Sidebar.
   - padding-top: 20px;: Fügt einen Innenabstand von 20 Pixel oben hinzu.
   - gap: 20px;: Erzeugt einen Abstand von 20 Pixel zwischen den Elementen in der Sidebar.
   - z-index: 1000;: Setzt eine hohe Stapelebene, damit die Sidebar über anderen Elementen liegt.
   - background: transparent;: Macht den Hintergrund der Sidebar transparent.
   - pointer-events: auto !important;: Erzwingt, dass Mausereignisse (z. B. Klicks) auf die Sidebar wirken,
     besonders wichtig für iOS-Geräte.
   - touch-action: manipulation !important;: Optimiert die Touch-Interaktion auf mobilen Geräten und
     verhindert Verzögerungen beim Scrollen oder Zoomen.
   ============================================================================= */
.sidebar-left {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    right: 10px;
    top: 200px;
    width: 70px;
    height: calc(100vh - 120px);
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    gap: 20px;
    z-index: 1000;
    background: transparent;
    pointer-events: auto !important; /* Wichtig für iOS */
    touch-action: manipulation !important; /* Verhindert Verzögerung auf iOS */
}

/* =============================================================================
   SIDEBAR – GEÖFFNETER ZUSTAND
   =============================================================================
   Hier definiere ich den Zustand der Sidebar, wenn sie geöffnet ist.
   Die Sidebar wird als Flex-Container angezeigt und erhält eine Scrollbar,
   falls der Inhalt zu lang ist.

   - display: flex;: Zeigt die Sidebar als Flex-Container an.
   - overflow-y: auto;: Aktiviert eine vertikale Scrollbar, wenn der Inhalt die Sidebar-Höhe überschreitet.
   - -webkit-overflow-scrolling: touch;: Ermöglicht flüssiges Scrollen auf iOS-Geräten.
   ============================================================================= */
.sidebar-left.open {
    display: flex;
    overflow-y: auto; /* Scrollbar aktivieren */
    -webkit-overflow-scrolling: touch; /* Smooth Scrolling auf iOS */
}

/* =============================================================================
   LIGHT/DARK-MODE-ICON (SONNE/MOND) IN DER SIDEBAR
   =============================================================================
   Hier definiere ich den Container für das Icon zur Umschaltung zwischen Light- und Dark-Mode.
   Das Icon ist zentriert und hat einen Abstand nach oben.

   - position: relative;: Ermöglicht die Positionierung von Kind-Elementen relativ zu diesem Container.
   - width: 100%;: Nimmt die volle Breite des Eltern-Containers ein.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - justify-content: center;: Zentriert das Icon horizontal.
   - margin-top: 20px;: Fügt einen Abstand von 20 Pixel nach oben hinzu.
   ============================================================================= */
.mode-toggle-nav {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* =============================================================================
   LIGHT/DARK-MODE-BUTTON IN DER SIDEBAR
   =============================================================================
   Hier definiere ich den Button zur Umschaltung zwischen Light- und Dark-Mode.
   Der Button ist transparent, hat keine Rahmen und ist zentriert.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund.
   - border: none;: Entfernt den Standard-Rahmen des Buttons.
   - padding: 10px;: Fügt einen Innenabstand von 10 Pixel hinzu.
   - cursor: pointer;: Zeigt an, dass der Button klickbar ist.
   - width: 50px;: Setzt die Breite des Buttons auf 50 Pixel.
   - height: -30px !important;: Setzt die Höhe des Buttons auf -30 Pixel (Fehler? Sollte wahrscheinlich 30px sein).
   - display: flex;: Aktiviert das Flexbox-Layout.
   - align-items: center;: Zentriert das Icon vertikal.
   - justify-content: center;: Zentriert das Icon horizontal.
   ============================================================================= */
.mode-toggle-btn {
    background: transparent !important;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 50px;
    height: -30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   LIGHT/DARK-MODE-ICON (BILD) IM BUTTON
   =============================================================================
   Hier definiere ich das Icon-Bild im Light/Dark-Mode-Button.
   Das Icon hat eine feste Größe und einen Schatten für bessere Sichtbarkeit.

   - width: 40px;: Setzt die Breite des Icons auf 40 Pixel.
   - height: 40px;: Setzt die Höhe des Icons auf 40 Pixel.
   - filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));: Fügt einen Schatten hinzu, um das Icon vom Hintergrund abzuheben.
   - transition: transform 0.3s ease;: Ermöglicht eine sanfte Skalierungsanimation beim Hovern.
   ============================================================================= */
.mode-toggle-btn img {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

/* =============================================================================
   LIGHT/DARK-MODE-ICON – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für das Light/Dark-Mode-Icon.
   Beim Hovern wird das Icon leicht vergrößert.

   - transform: scale(1.2);: Vergrößert das Icon um 20%.
   ============================================================================= */
.mode-toggle-btn:hover img {
    transform: scale(1.2);
}

/* =============================================================================
   SIDEBAR-ICONS (ALLGEMEIN)
   =============================================================================
   Hier definiere ich die allgemeinen Stile für alle Icons in der Sidebar.
   Die Icons sind transparent, haben eine feste Größe und eine sanfte Hover-Animation.

   - width: 50px !important;: Erzwingt eine Breite von 50 Pixel.
   - height: 50px !important;: Erzwingt eine Höhe von 50 Pixel.
   - object-fit: contain;: Skaliert das Icon proportional, um es vollständig anzuzeigen.
   - object-position: center;: Zentriert das Icon im Container.
   - border-radius: 20px;: Rundet die Ecken des Icons leicht ab.
   - transition: all 0.3s ease;: Ermöglicht sanfte Übergänge für alle Eigenschaften.
   - padding: 2px;: Fügt einen kleinen Innenabstand hinzu.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund.
   ============================================================================= */
.sidebar-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    object-position: center;
    border-radius: 20px;
    transition: all 0.3s ease;
    padding: 2px;
    background: transparent !important;
}

/* =============================================================================
   SIDEBAR-ICONS – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Sidebar-Icons.
   Beim Hovern werden die Icons vergrößert und erhalten einen Schatten.

   - transform: scale(1.3);: Vergrößert das Icon um 30%.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund.
   - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);: Fügt einen Schatten hinzu, um das Icon hervorzuheben.
   ============================================================================= */
.sidebar-icon:hover {
    transform: scale(1.3);
    background: transparent !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

/* =============================================================================
   GLOBE-ICON UND SOCIAL-HOVER-ICON (GRÖßER)
   =============================================================================
   Hier passe ich die Größe des Globe-Icons und der Social-Hover-Icons an.
   Diese Icons sind etwas größer als die Standard-Icons.

   - width: 50px !important;: Erzwingt eine Breite von 50 Pixel.
   - height: 50px !important;: Erzwingt eine Höhe von 50 Pixel.
   ============================================================================= */
.globe,
.social-hover .sidebar-icon {
    width: 50px !important;
    height: 50px !important;
}

/* =============================================================================
   LIGHT-MODE – SIDEBAR-ANPASSUNGEN
   =============================================================================
   Hier definiere ich Anpassungen für die Sidebar im Light-Mode.
   Die Sidebar bleibt transparent, und die Icons erhalten einen transparenten Hintergrund.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für die Sidebar.
   ============================================================================= */
body.light-mode .sidebar-left {
    background: transparent !important;
}

/* =============================================================================
   LIGHT-MODE – SIDEBAR-ICONS
   =============================================================================
   Hier definiere ich Anpassungen für die Icons im Light-Mode.
   Die Icons bleiben transparent, auch beim Hovern.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für die Icons.
   ============================================================================= */
body.light-mode .sidebar-icon {
    background: transparent !important;
}

/* =============================================================================
   LIGHT-MODE – SIDEBAR-ICONS BEIM HOVERN
   =============================================================================
   Hier definiere ich Anpassungen für die Icons im Light-Mode beim Hovern.
   Die Icons bleiben transparent, auch beim Hovern.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für die Icons beim Hovern.
   ============================================================================= */
body.light-mode .sidebar-icon:hover {
    background: transparent !important;
}

/* =============================================================================
   VERHINDERT SCROLL-BLOCKADE UND POSITION-FIXING DER SEITE
   =============================================================================
   Hier definiere ich Regeln, um zu verhindern, dass die Seite beim Öffnen der Sidebar
   blockiert wird oder ihre Position verliert. Dies ist besonders wichtig für mobile Geräte.

   - overflow: hidden !important;: Verhindert das Scrollen der Seite, wenn das Menü geöffnet ist.
   - position: fixed !important;: Fixiert die Position der Seite, um ein Verschieben zu verhindern.
   - height: 100% !important;: Setzt die Höhe der Seite auf 100% der Viewport-Höhe.
   - width: 100% !important;: Setzt die Breite der Seite auf 100% der Viewport-Breite.
   - touch-action: manipulation !important;: Optimiert die Touch-Interaktion auf mobilen Geräten.
   ============================================================================= */
html.menu-open,
body.menu-open {
    overflow: hidden !important;
    position: fixed !important; /* Fixiert die Position */
    height: 100% !important;
    width: 100% !important;
    touch-action: manipulation !important; /* Verhindert Verzögerung auf iOS */
}

/* =============================================================================
   KORREKTUR FÜR HTML.MENU-OPEN
   =============================================================================
   Hier korrigiere ich die Position des html-Elements, wenn das Menü geöffnet ist.
   Dies stellt sicher, dass die Seite korrekt gerendert wird.

   - position: relative !important;: Setzt die Position auf relativ, um Konflikte zu vermeiden.
   ============================================================================= */
html.menu-open {
    position: relative !important;
}

/* =============================================================================
   KORREKTUR FÜR MAIN-CONTENT BEIM GEÖFFNETEN MENÜ
   =============================================================================
   Hier stelle ich sicher, dass der Hauptinhalt der Seite nicht durch das geöffnete Menü
   beeinflusst wird. Alle Container-Elemente bleiben statisch und ohne Transformationen.

   - position: static !important;: Setzt die Position auf statisch, um Verschiebungen zu vermeiden.
   - transform: none !important;: Entfernt alle Transformationen.
   - overflow: visible !important;: Ermöglicht das Anzeigen von überlaufendem Inhalt.
   ============================================================================= */
body.menu-open #main,
body.menu-open .wrapper,
body.menu-open main,
body.menu-open .content,
body.menu-open [class*="container"],
body.menu-open [id*="content"],
body.menu-open [class*="page"] {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
}

/* =============================================================================
   SIDEBAR INITIAL VERSTECKT
   =============================================================================
   Hier definiere ich, dass die Sidebar standardmäßig versteckt ist.

   - display: none;: Versteckt die Sidebar.
   ============================================================================= */
#sidebarMenu {
    display: none;
}

/* =============================================================================
   SIDEBAR IM GEÖFFNETEN ZUSTAND
   =============================================================================
   Hier definiere ich, dass die Sidebar als Flex-Container angezeigt wird, wenn sie geöffnet ist.

   - display: flex;: Zeigt die Sidebar als Flex-Container an.
   ============================================================================= */
#sidebarMenu.open {
    display: flex;
}

/* =============================================================================
   FINALER FIX: HAMBURGER-BUTTON TRANSPARENT
   =============================================================================
   Hier stelle ich sicher, dass der Hamburger-Button und seine Icons vollständig transparent sind.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für den Button.
   - border: none !important;: Entfernt den Rahmen des Buttons.
   - padding: 0 !important;: Entfernt den Innenabstand des Buttons.
   - border-radius: 0 !important;: Entfernt die abgerundeten Ecken des Buttons.
   - backdrop-filter: none !important;: Deaktiviert den Unschärfe-Filter.
   ============================================================================= */
.hamburger-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

/* =============================================================================
   HAMBURGER-BUTTON – POSITIONIERUNG (RECHTS)
   =============================================================================
   Hier definiere ich die Position des Hamburger-Buttons.
   Der Button ist rechts oben positioniert und hat eine hohe Stapelebene.

   - position: fixed;: Fixiert den Button auf dem Bildschirm.
   - top: 20px;: Positioniert den Button 20 Pixel vom oberen Rand entfernt.
   - right: 20px;: Positioniert den Button 20 Pixel vom rechten Rand entfernt.
   - z-index: 1005 !important;: Setzt eine hohe Stapelebene, damit der Button über anderen Elementen liegt.
   ============================================================================= */
.hamburger-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1005 !important;
}

/* =============================================================================
   HAMBURGER-BUTTON – ICON-STILE
   =============================================================================
   Hier definiere ich die Stile für das Icon im Hamburger-Button.
   Das Icon hat eine feste Größe und einen Schatten für bessere Sichtbarkeit.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Icon.
   - width: 50px;: Setzt die Breite des Icons auf 50 Pixel.
   - height: 50px;: Setzt die Höhe des Icons auf 50 Pixel.
   - object-fit: contain;: Skaliert das Icon proportional, um es vollständig anzuzeigen.
   - filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));: Fügt einen Schatten hinzu, um das Icon vom Hintergrund abzuheben.
   ============================================================================= */
.hamburger-btn img,
#hamburgerIcon {
    background: transparent !important;
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* =============================================================================
   LIGHT-MODE – HAMBURGER-BUTTON
   =============================================================================
   Hier definiere ich Anpassungen für den Hamburger-Button im Light-Mode.
   Der Button bleibt transparent.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für den Button.
   ============================================================================= */
body.light-mode .hamburger-btn {
    background: transparent !important;
}

/* =============================================================================
   LIGHT-MODE – HAMBURGER-BUTTON-ICON
   =============================================================================
   Hier definiere ich Anpassungen für das Icon im Hamburger-Button im Light-Mode.
   Das Icon bleibt transparent und erhält einen leichteren Schatten.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Icon.
   - filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));: Fügt einen leichteren Schatten hinzu.
   ============================================================================= */
body.light-mode .hamburger-btn img,
body.light-mode #hamburgerIcon {
    background: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* =============================================================================
   SCHLICHTE + HOCH KONTRASTREICHE TOOLTIP-ANPASSUNG FÜR LIGHT MODE
   =============================================================================
   Hier definiere ich den Tooltip für den Hamburger-Button im Light-Mode.
   Der Tooltip ist immer sichtbar, wenn das Menü geöffnet ist, und hat einen dunklen Hintergrund.

   - display: block !important;: Zeigt den Tooltip immer an, wenn das Menü geöffnet ist.
   - position: absolute;: Positioniert den Tooltip absolut relativ zum Button.
   - left: 50% !important;: Positioniert den Tooltip horizontal in der Mitte des Buttons.
   - transform: translateX(-50%) !important;: Zentriert den Tooltip horizontal.
   - bottom: -25px !important;: Positioniert den Tooltip 25 Pixel unter dem Button.
   - color: white !important;: Setzt die Textfarbe auf weiß.
   - padding: 5px 10px !important;: Fügt Innenabstände von 5 Pixel oben/unten und 10 Pixel links/rechts hinzu.
   - border-radius: 5px !important;: Rundet die Ecken des Tooltips leicht ab.
   - font-weight: 600 !important;: Setzt die Schrift auf fett.
   - font-size: 0.7rem !important;: Setzt die Schriftgröße auf 0.7rem.
   - white-space: nowrap !important;: Verhindert Zeilenumbrüche im Tooltip-Text.
   - z-index: 1003 !important;: Setzt eine hohe Stapelebene für den Tooltip.
   - opacity: 1 !important;: Macht den Tooltip vollständig sichtbar.
   - pointer-events: none !important;: Verhindert Mausinteraktionen mit dem Tooltip.
   - background: rgba(0, 0, 0, 0.7) !important;: Setzt einen halbtransparenten schwarzen Hintergrund.
   - text-shadow: 0 0 2px rgba(0, 0, 0, 0.8) !important;: Fügt einen Textschatten hinzu, um die Lesbarkeit zu verbessern.
   - width: max-content !important;: Passt die Breite des Tooltips an den Inhalt an.
   ============================================================================= */
.hamburger-btn .nav-tooltip {
    display: block !important;    /* immer sichtbar, wenn Menü offen */
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -25px !important;
    color: white !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    z-index: 1003 !important;
    opacity: 1 !important;        /* immer sichtbar, wenn Menü offen */
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.7) !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8) !important;
    width: max-content !important;
}

/* =============================================================================
   TOOLTIP BLEIBT SICHTBAR, SOLANGE MENÜ GEÖFFNET IST
   =============================================================================
   Hier stelle ich sicher, dass der Tooltip sichtbar bleibt, solange das Menü geöffnet ist.

   - display: block !important;: Zeigt den Tooltip an.
   - opacity: 1 !important;: Macht den Tooltip vollständig sichtbar.
   ============================================================================= */
#sidebarMenu.open .hamburger-btn .nav-tooltip {
    display: block !important;
    opacity: 1 !important;
}

/* =============================================================================
   LIGHT-MODE – TOOLTIP FÜR HAMBURGER-BUTTON
   =============================================================================
   Hier definiere ich Anpassungen für den Tooltip des Hamburger-Buttons im Light-Mode.
   Der Tooltip hat einen dunklen Hintergrund und weiße Textfarbe.

   - color: #1a1a1a !important;: Setzt die Textfarbe auf dunkelgrau.
   - text-shadow: 0 0 2px rgba(255, 255, 255, 0.9) !important;: Fügt einen weißen Textschatten hinzu.
   - background: rgba(255, 255, 255, 0.85) !important;: Setzt einen halbtransparenten weißen Hintergrund.
   - opacity: 1 !important;: Macht den Tooltip vollständig sichtbar.
   ============================================================================= */
body.light-mode #sidebarMenu.open .hamburger-btn .nav-tooltip {
    color: #1a1a1a !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}

/* =============================================================================
   STARTSEITEN-TEXT IM LIGHT-MODE (SCHWARZ)
   =============================================================================
   Hier definiere ich, dass der Text auf der Startseite im Light-Mode schwarz ist.

   - color: #1a1a1a !important;: Erzwingt eine schwarze Textfarbe.
   ============================================================================= */
body.light-mode #home h1 {
    color: #1a1a1a !important;
}

/* =============================================================================
   EINHEITLICHER HOVER-SCALE-EFFEKT FÜR ALLE BILDER UND ICONS
   =============================================================================
   Hier definiere ich einen einheitlichen Hover-Effekt für alle Bilder und Icons.
   Beim Hovern werden die Elemente leicht vergrößert.

   - transition: transform 0.4s ease !important;: Ermöglicht eine sanfte Skalierungsanimation.
   ============================================================================= */
.hamburger-btn img {
    transition: transform 0.4s ease !important;
}

/* =============================================================================
   HAMBURGER-BUTTON-ICON – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für das Icon im Hamburger-Button.
   Beim Hovern wird das Icon um 60% vergrößert.

   - transform: scale(1.6) !important;: Vergrößert das Icon um 60%.
   ============================================================================= */
.hamburger-btn:hover img {
    transform: scale(1.6) !important;
}

/* =============================================================================
   LIGHT/DARK-MODE-ICON – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für das Light/Dark-Mode-Icon.
   Beim Hovern wird das Icon um 60% vergrößert.

   - transition: transform 0.4s ease !important;: Ermöglicht eine sanfte Skalierungsanimation.
   ============================================================================= */
.mode-toggle-btn img,
.mode-toggle-desktop {
    transition: transform 0.4s ease !important;
}

/* =============================================================================
   LIGHT/DARK-MODE-ICON – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für das Light/Dark-Mode-Icon.
   Beim Hovern wird das Icon um 60% vergrößert.

   - transform: scale(1.6) !important;: Vergrößert das Icon um 60%.
   ============================================================================= */
.mode-toggle-btn:hover img,
.mode-toggle-desktop:hover {
    transform: scale(1.6) !important;
}

/* =============================================================================
   NAVIGATIONS-ICONS – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Navigations-Icons.
   Beim Hovern wird das Icon um 60% vergrößert.

   - transition: transform 0.4s ease !important;: Ermöglicht eine sanfte Skalierungsanimation.
   ============================================================================= */
.nav-img-icon {
    transition: transform 0.4s ease !important;
}

/* =============================================================================
   NAVIGATIONS-ICONS – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Navigations-Icons.
   Beim Hovern wird das Icon um 60% vergrößert.

   - transform: scale(1.6) !important;: Vergrößert das Icon um 60%.
   ============================================================================= */
nav a:hover .nav-img-icon {
    transform: scale(1.6) !important;
}

/* =============================================================================
   DIENSTLEISTUNGS-BILDER – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Bilder in den Dienstleistungskarten.
   Beim Hovern wird das Bild leicht vergrößert.

   - transition: transform 0.4s ease !important;: Ermöglicht eine sanfte Skalierungsanimation.
   ============================================================================= */
.service-img {
    transition: transform 0.4s ease !important;
}

/* =============================================================================
   DIENSTLEISTUNGS-BILDER – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Bilder in den Dienstleistungskarten.
   Beim Hovern wird das Bild um 10% vergrößert.

   - transform: scale(1.1) !important;: Vergrößert das Bild um 10%.
   ============================================================================= */
.service-card:hover .service-img {
    transform: scale(1.1) !important;
}

/* =============================================================================
   GALERIE-BILDER – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Bilder in der Galerie.
   Beim Hovern wird das Bild leicht vergrößert.

   - transition: transform 0.4s ease !important;: Ermöglicht eine sanfte Skalierungsanimation.
   ============================================================================= */
#galleryImg {
    transition: transform 0.4s ease !important;
}

/* =============================================================================
   GALERIE-BILDER – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Bilder in der Galerie.
   Beim Hovern wird das Bild um 5% vergrößert.

   - transform: scale(1.05) !important;: Vergrößert das Bild um 5%.
   ============================================================================= */
#galleryImg:hover {
    transform: scale(1.05) !important;
}

/* =============================================================================
   SPRACHAUSWAHL, KARTE, TELEFON, E-MAIL – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Icons der Sprachauswahl, Karte, Telefon und E-Mail.
   Beim Hovern werden die Icons um 20% vergrößert.

   - transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;: Ermöglicht eine sanfte,
     elastische Skalierungsanimation.
   ============================================================================= */
.languages,
.maps-icon,
.telefone,
.email {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* =============================================================================
   SPRACHAUSWAHL, KARTE, TELEFON, E-MAIL – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Icons der Sprachauswahl, Karte, Telefon und E-Mail.
   Beim Hovern werden die Icons um 20% vergrößert.

   - transform: scale(1.2) !important;: Vergrößert die Icons um 20%.
   ============================================================================= */
.languages:hover,
.maps-icon:hover,
.telefone:hover,
.email:hover {
    transform: scale(1.2) !important;
}

/* =============================================================================
   GESPIEGELTE AUSKLAPP-RICHTUNG – FLAGGEN RECHTS, TEXT LINKS
   =============================================================================
   Hier definiere ich die Ausrichtung der Flaggen und Texte in der Sprachauswahl.
   Die Flaggen sind rechts und die Texte links positioniert.

   - right: 0px;: Positioniert das Element am rechten Rand.
   - left: auto !important;: Hebt die automatische Positionierung links auf.
   - top: -30px;: Positioniert das Element 30 Pixel über seiner ursprünglichen Position.
   - flex-direction: row-reverse;: Kehrt die Reihenfolge der Flex-Elemente um (Text zuerst, dann Flagge).
   - justify-content: flex-start;: Richtet die Elemente am Anfang der Hauptachse aus.
   - align-items: center;: Zentriert die Elemente vertikal.
   ============================================================================= */
.flag-item {
    right: 0px;
    left: auto !important;
    top: -30px;
    flex-direction: row-reverse;           /* normale Reihenfolge: Text zuerst, dann Flagge */
    justify-content: flex-start;
    align-items: center;
}

/* =============================================================================
   FLAGGEN-BILD IN DER SPRACHAUSWAHL
   =============================================================================
   Hier definiere ich die Position und Größe des Flaggen-Bilds in der Sprachauswahl.
   Die Flagge ist rechts vom Text positioniert.

   - margin-right: 0;: Entfernt den rechten Außenabstand.
   - margin-left: 30px;: Fügt einen linken Außenabstand von 30 Pixel hinzu, um Abstand zwischen Text und Flagge zu schaffen.
   - order: 1;: Setzt die Reihenfolge des Elements auf 1, sodass die Flagge visuell rechts erscheint.
   ============================================================================= */
.flag-item img {
    margin-right: 0;
    margin-left: 30px;            /* Abstand zwischen Text und Flagge */
    order: 1;                     /* Flagge visuell rechts */
}

/* =============================================================================
   FLAGGEN-TEXT IN DER SPRACHAUSWAHL
   =============================================================================
   Hier definiere ich die Position und Ausrichtung des Flaggen-Texts in der Sprachauswahl.
   Der Text ist links von der Flagge positioniert.

   - margin-left: 0;: Entfernt den linken Außenabstand.
   - margin-right: 0px;: Entfernt den rechten Außenabstand.
   - text-align: left;: Richtet den Text linksbündig aus.
   - order: 2;: Setzt die Reihenfolge des Elements auf 2, sodass der Text links von der Flagge erscheint.
   - width: 50px;: Setzt die Breite des Textcontainers auf 50 Pixel.
   ============================================================================= */
.flag-label {
    margin-left: 0;
    margin-right: 0px;           /* Text links von Flagge */
    text-align: left;
    order: 2;
    width: 50px;                  /* Text kommt links */
}

/* =============================================================================
   FLAGGEN-TOOLTIP – POSITIONIERUNG
   =============================================================================
   Hier definiere ich die Position des Tooltips für die Flaggen in der Sprachauswahl.
   Der Tooltip erscheint links von den Flaggen.

   - right: 100%;: Positioniert den Tooltip 100% vom rechten Rand entfernt, also links.
   - left: auto !important;: Hebt die automatische Positionierung links auf.
   - transform: translateX(10px);: Verschiebt den Tooltip um 10 Pixel nach rechts.
   - flex-direction: column;: Ordnet die Elemente im Tooltip vertikal an.
   ============================================================================= */
.flags-tooltip {
    right: 100%;
    left: auto !important;
    transform: translateX(10px);
    flex-direction: column;
}

/* =============================================================================
   SOCIAL-MEDIA-ITEM – AUSRICHTUNG
   =============================================================================
   Hier definiere ich die Ausrichtung der Social-Media-Items.
   Die Items sind rechtsbündig, und der Text erscheint links vom Icon.

   - flex-direction: row-reverse;: Kehrt die Reihenfolge der Flex-Elemente um (Text zuerst, dann Icon).
   - justify-content: flex-start;: Richtet die Elemente am Anfang der Hauptachse aus.
   - align-items: center;: Zentriert die Elemente vertikal.
   - right: 120px;: Positioniert das Element 120 Pixel vom rechten Rand entfernt.
   - left: auto !important;: Hebt die automatische Positionierung links auf.
   - top: 10px;: Positioniert das Element 10 Pixel vom oberen Rand entfernt.
   - margin-bottom: 8px !important;: Fügt einen unteren Außenabstand von 8 Pixel hinzu.
   ============================================================================= */
.social-item {
    flex-direction: row-reverse;           /* normale Reihenfolge: Text zuerst, dann Flagge */
    justify-content: flex-start;
    align-items: center;
    right: 120px;
    left: auto !important;
    top: 10px;
    margin-bottom: 8px !important;         /* statt -70px */

    /* Ergänzungen für durchgehenden Hover */
    position: relative;                    /* wichtig, damit ::before/::after relativ zum Item positioniert werden */
    padding: 12px 0;                       /* vertikale Erweiterung der Hover-Fläche (oben + unten) */
    margin-bottom: 0 !important;           /* Margin-Bottom auf 0 → Items liegen enger zusammen */
}

/* =============================================================================
   SOCIAL-MEDIA-ITEM – ERWEITERTE HOVER-FLÄCHE
   =============================================================================
   Hier definiere ich eine erweiterte Hover-Fläche für die Social-Media-Items.
   Ein unsichtbares Pseudo-Element vergrößert die klickbare Fläche.

   - content: "";: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Pseudo-Element absolut relativ zum Social-Media-Item.
   - inset: -10px -80px -10px -20px;: Positioniert das Pseudo-Element 10 Pixel über, 80 Pixel rechts,
     10 Pixel unter und 20 Pixel links vom Social-Media-Item.
   - z-index: -1;: Positioniert das Pseudo-Element hinter dem Social-Media-Item.
   ============================================================================= */
.social-item::before {
    content: "";
    position: absolute;
    inset: -10px -80px -10px -20px;      /* erweitert die Hover-Fläche nach oben, unten, links, rechts */
    z-index: -1;                           /* bleibt im Hintergrund, stört nicht visuell */
}

/* =============================================================================
   SOCIAL-MEDIA-ICON – POSITIONIERUNG
   =============================================================================
   Hier definiere ich die Position des Social-Media-Icons.
   Das Icon ist rechts vom Text positioniert.

   - margin-right: 120px;: Fügt einen rechten Außenabstand von 120 Pixel hinzu.
   - margin-left: 30px;: Fügt einen linken Außenabstand von 30 Pixel hinzu.
   - order: 1;: Setzt die Reihenfolge des Icons auf 1, sodass es rechts vom Text erscheint.
   - margin-top: 0;: Entfernt den oberen Außenabstand.
   ============================================================================= */
.social-item img {
    margin-right: 120px;
    margin-left: 30px;            /* gleicher großer Abstand wie bei Flaggen */
    order: 1;
    margin-top: 0;                         /* statt 50px */
}

/* =============================================================================
   SOCIAL-MEDIA-TEXT – POSITIONIERUNG
   =============================================================================
   Hier definiere ich die Position des Social-Media-Texts.
   Der Text ist links vom Icon positioniert und standardmäßig ausgeblendet.

   - margin-left: 0;: Entfernt den linken Außenabstand.
   - margin-right: 0px;: Entfernt den rechten Außenabstand.
   - text-align: left;: Richtet den Text linksbündig aus.
   - order: 2;: Setzt die Reihenfolge des Texts auf 2, sodass er links vom Icon erscheint.
   - width: 50px;: Setzt die Breite des Textcontainers auf 50 Pixel.
   - display: none !important;: Blendet den Text standardmäßig aus.
   ============================================================================= */
.social-label {
    margin-left: 0;
    margin-right: 0px;           /* Text links vom Icon */
    text-align: left;
    order: 2;                     /* Text kommt links */
    width: 50px;                  /* gleiche Breite wie bei Flaggen-Text */
    display: none !important;
}

/* =============================================================================
   SOCIAL-MEDIA-ITEM – HOVER-EFFEKT
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Social-Media-Items.
   Beim Hovern erhalten die Items einen halbtransparenten weißen Hintergrund.

   - background: rgba(255, 255, 255, 0.25) !important;: Setzt einen halbtransparenten weißen Hintergrund.
   ============================================================================= */
.social-item:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* =============================================================================
   MOBILE ANPASSUNGEN NUR FÜR SOCIAL-BUTTONS
   =============================================================================
   Hier definiere ich spezifische Anpassungen für die Social-Buttons auf mobilen Geräten.
   Die Buttons sind kleiner und zentriert.

   - width: 44px !important;: Setzt die Breite der Buttons auf 44 Pixel.
   - height: 44px !important;: Setzt die Höhe der Buttons auf 44 Pixel.
   - padding: 0 !important;: Entfernt den Innenabstand.
   - margin: 0 auto !important;: Zentriert die Buttons horizontal.
   - justify-content: center !important;: Zentriert die Inhalte der Buttons.
   - transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;: Ermöglicht eine sanfte,
     elastische Skalierungsanimation.
   - cursor: pointer !important;: Zeigt an, dass die Buttons klickbar sind.
   - pointer-events: auto !important;: Erzwingt, dass Mausereignisse auf die Buttons wirken.
   ============================================================================= */
@media (max-width: 768px) {
    .social-item {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        justify-content: center !important;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* =========================================================================
       SOCIAL-MEDIA-ICON – MOBILE ANPASSUNGEN
       ========================================================================= */
    .social-item img {
        background: rgba(255, 255, 255, 0.85) !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: -40px !important;
        margin-right: 0 !important;
        padding: 4px;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    /* =========================================================================
       LIGHT-MODE – SOCIAL-MEDIA-ICON – MOBILE ANPASSUNGEN
       ========================================================================= */
    body.light-mode .social-item img {
        background: rgba(0, 0, 0, 0.7) !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: -40px !important;
        margin-right: 0 !important;
        padding: 4px;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    /* =========================================================================
       SOCIAL-MEDIA-TEXT – MOBILE ANPASSUNGEN (AUSGEBLENDET)
       ========================================================================= */
    .social-label {
        display: none !important;           /* Labels komplett ausblenden auf Mobile */
        width: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* =========================================================================
       SOCIAL-MEDIA-ITEM – HOVER-EFFEKT (MOBIL)
       ========================================================================= */
    .social-item:hover {
        transform: scale(1.15) !important;
    }

    /* =========================================================================
       LIGHT-MODE – SOCIAL-MEDIA-ITEM – HOVER-EFFEKT (MOBIL)
       ========================================================================= */
    body.light-mode .social-item:hover {
        transform: scale(1.15) !important;
    }

    /* =========================================================================
       SOCIAL-MEDIA-TEXT – HOVER-EFFEKT (MOBIL – AUSGEBLENDET)
       ========================================================================= */
    .social-item:hover .social-label {
        display: none !important;
    }

    /* =========================================================================
       SIDEBAR – MOBILE ANPASSUNGEN (ABSTAND)
       ========================================================================= */
    .sidebar-left {
        gap: 12px !important; /* 40% weniger als 20px */
        padding-top: 12px !important;
    }

    /* =========================================================================
       SOCIAL-MEDIA-ITEM – AKTIVER ZUSTAND (MOBIL)
       ========================================================================= */
    .social-item:active {
        transform: scale(1.08) !important;
    }
}

/* =============================================================================
   MOBILE ANPASSUNGEN FÜR SEHR KLEINE BILDSCHIRME (BIS 480PX)
   =============================================================================
   Hier definiere ich weitere Anpassungen für sehr kleine mobile Geräte.
   Die Social-Buttons sind noch kleiner, und die Sidebar ist schmaler.

   - width: 42px !important;: Setzt die Breite der Buttons auf 42 Pixel.
   - height: 42px !important;: Setzt die Höhe der Buttons auf 42 Pixel.
   ============================================================================= */
@media (max-width: 480px) {
    .social-item {
        width: 42px !important;
        height: 42px !important;
    }

    /* =========================================================================
       SOCIAL-MEDIA-ICON – ANPASSUNGEN FÜR SEHR KLEINE BILDSCHIRME
       ========================================================================= */
    .social-item img {
        width: 36px !important;
        height: 36px !important;
    }

    /* =========================================================================
       SIDEBAR – ANPASSUNGEN FÜR SEHR KLEINE BILDSCHIRME
       ========================================================================= */
    .sidebar-left {
        right: 8px !important;
        width: 56px !important;
        gap: 14px !important;
    }
}

/* =============================================================================
   DARK/LIGHT-MODE-BUTTON IN DER SIDEBAR
   =============================================================================
   Hier definiere ich den Light/Dark-Mode-Button in der Sidebar.
   Der Button ist relativ positioniert und hat einen Abstand nach oben.

   - position: relative;: Ermöglicht die Positionierung von Kind-Elementen relativ zu diesem Container.
   - bottom: auto;: Hebt die automatische Positionierung unten auf.
   - right: auto;: Hebt die automatische Positionierung rechts auf.
   - margin-top: 20px;: Fügt einen Abstand von 20 Pixel nach oben hinzu.
   - z-index: 1001;: Setzt eine hohe Stapelebene.
   ============================================================================= */
.mode-toggle-nav {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 20px;
    z-index: 1001;
}

/* =============================================================================
   DARK/LIGHT-MODE-BUTTON – STILE
   =============================================================================
   Hier definiere ich die Stile für den Light/Dark-Mode-Button.
   Der Button ist transparent und hat keine Rahmen.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund.
   - border: none;: Entfernt den Standard-Rahmen.
   - padding: 10px;: Fügt einen Innenabstand von 10 Pixel hinzu.
   - cursor: pointer;: Zeigt an, dass der Button klickbar ist.
   ============================================================================= */
.mode-toggle-btn {
    background: transparent !important;
    border: none;
    padding: 10px;
    cursor: pointer;
}

/* =============================================================================
   DARK/LIGHT-MODE-BUTTON – ICON-STILE
   =============================================================================
   Hier definiere ich die Stile für das Icon im Light/Dark-Mode-Button.
   Das Icon hat eine feste Größe und einen Schatten für bessere Sichtbarkeit.

   - width: 50px;: Setzt die Breite des Icons auf 50 Pixel.
   - height: 50px;: Setzt die Höhe des Icons auf 50 Pixel.
   - filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));: Fügt einen Schatten hinzu.
   ============================================================================= */
.mode-toggle-btn img {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* =============================================================================
   DARK/LIGHT-MODE-BUTTON – TOOLTIP
   =============================================================================
   Hier definiere ich den Tooltip für den Light/Dark-Mode-Button.
   Der Tooltip ist standardmäßig ausgeblendet und erscheint beim Hovern.

   - display: none;: Versteckt den Tooltip standardmäßig.
   - position: absolute;: Positioniert den Tooltip absolut relativ zum Button.
   - right: 105%;: Positioniert den Tooltip 105% vom rechten Rand entfernt, also links vom Button.
   - left: auto !important;: Hebt die automatische Positionierung links auf.
   - top: 50%;: Positioniert den Tooltip vertikal in der Mitte des Buttons.
   - transform: translateY(-50%);: Zentriert den Tooltip vertikal.
   - color: white;: Setzt die Textfarbe auf weiß.
   - padding: 5px 10px;: Fügt Innenabstände von 5 Pixel oben/unten und 10 Pixel links/rechts hinzu.
   - border-radius: 5px;: Rundet die Ecken des Tooltips leicht ab.
   - font-weight: 600;: Setzt die Schrift auf fett.
   - font-size: 0.7rem;: Setzt die Schriftgröße auf 0.7rem.
   - white-space: nowrap;: Verhindert Zeilenumbrüche im Tooltip-Text.
   - z-index: 1003;: Setzt eine hohe Stapelebene für den Tooltip.
   - opacity: 0;: Macht den Tooltip standardmäßig unsichtbar.
   - pointer-events: none;: Verhindert Mausinteraktionen mit dem Tooltip.
   - background: transparent;: Macht den Hintergrund des Tooltips transparent.
   - text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);: Fügt einen Textschatten hinzu.
   ============================================================================= */
.mode-toggle-btn .nav-tooltip {
    display: none;
    position: absolute;
    right: 105%;
    left: auto !important;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 1003;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

/* =============================================================================
   KORREKTUR: TEXT "LIGHT MODE" FARBE AN MODUS ANPASSEN
   =============================================================================
   Hier definiere ich die Farbe des Textes "Light Mode" im Tooltip für den Dark-Mode.
   Der Text ist weiß mit schwarzem Hintergrund.

   - background: black !important;: Setzt einen schwarzen Hintergrund.
   - color: #ffffff !important;: Setzt die Textfarbe auf weiß.
   - text-shadow: none !important;: Entfernt den Textschatten.
   - border: none !important;: Entfernt den Rahmen.
   - padding: 6px 12px !important;: Fügt Innenabstände von 6 Pixel oben/unten und 12 Pixel links/rechts hinzu.
   - width: auto;: Passt die Breite automatisch an den Inhalt an.
   - height: 25px !important;: Setzt die Höhe auf 25 Pixel.
   ============================================================================= */
body:not(.light-mode) .mode-toggle-btn .nav-tooltip {
    background: black !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border: none !important;
    padding: 6px 12px !important;
    width: auto;
    height: 25px !important;
}

/* =============================================================================
   LIGHT-MODE – TOOLTIP FÜR DARK/LIGHT-MODE-BUTTON
   =============================================================================
   Hier definiere ich den Tooltip für den Light/Dark-Mode-Button im Light-Mode.
   Der Tooltip hat einen schwarzen Hintergrund und weiße Textfarbe.

   - background: black !important;: Setzt einen schwarzen Hintergrund.
   - color: #ffffff !important;: Setzt die Textfarbe auf weiß.
   - text-shadow: none !important;: Entfernt den Textschatten.
   - border: none !important;: Entfernt den Rahmen.
   - box-shadow: none !important;: Entfernt den Schatten.
   - padding: 6px 12px !important;: Fügt Innenabstände hinzu.
   - width: auto;: Passt die Breite automatisch an den Inhalt an.
   - height: 25px !important;: Setzt die Höhe auf 25 Pixel.
   ============================================================================= */
body.light-mode .mode-toggle-btn .nav-tooltip {
    background: black !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
    width: auto;
    height: 25px !important;
}

/* =============================================================================
   TOOLTIP BEIM HOVERN ANZEIGEN
   =============================================================================
   Hier definiere ich, dass der Tooltip beim Hovern über den Light/Dark-Mode-Button angezeigt wird.

   - display: block !important;: Zeigt den Tooltip an.
   - opacity: 1 !important;: Macht den Tooltip vollständig sichtbar.
   ============================================================================= */
.mode-toggle-btn:hover .nav-tooltip {
    display: block !important;
    opacity: 1 !important;
}

/* =============================================================================
   MOBILE ANPASSUNGEN FÜR DARK/LIGHT-MODE-BUTTON (BIS 900PX)
   =============================================================================
   Hier definiere ich Anpassungen für den Light/Dark-Mode-Button auf Bildschirmen bis 900 Pixel Breite.
   Der Button ist etwas kleiner.

   - margin-top: 10px;: Reduziert den Abstand nach oben auf 10 Pixel.
   ============================================================================= */
@media (max-width: 900px) {
    .mode-toggle-nav {
        margin-top: 10px;
    }

    /* =========================================================================
       DARK/LIGHT-MODE-ICON – MOBILE ANPASSUNGEN (BIS 900PX)
       ========================================================================= */
    .mode-toggle-btn img {
        width: 45px;
        height: 45px;
    }
}

/* =============================================================================
   MOBILE ANPASSUNGEN FÜR DARK/LIGHT-MODE-BUTTON (BIS 600PX)
   =============================================================================
   Hier definiere ich weitere Anpassungen für den Light/Dark-Mode-Button auf Bildschirmen bis 600 Pixel Breite.
   Der Button ist noch kleiner.

   - width: 40px;: Setzt die Breite des Icons auf 40 Pixel.
   - height: 40px;: Setzt die Höhe des Icons auf 40 Pixel.
   ============================================================================= */
@media (max-width: 600px) {
    .mode-toggle-btn img {
        width: 40px;
        height: 40px;
    }
}

/* =============================================================================
   FIX: ADRESSE, TELEFON, E-MAIL – HOVER + SOFORT KLICKBAR, KEIN FLACKERN
   =============================================================================
   Hier definiere ich spezifische Stile für die Container der Adress-, Telefon- und E-Mail-Icons.
   Die Container haben eine feste Größe und einen Abstand nach unten.

   - position: relative;: Ermöglicht die absolute Positionierung von Kind-Elementen.
   - width: 50px;: Setzt die Breite auf 50 Pixel.
   - height: 50px;: Setzt die Höhe auf 50 Pixel.
   - padding-bottom: 80px;: Fügt einen Innenabstand von 80 Pixel nach unten hinzu.
   ============================================================================= */

/* Container der drei Icons – nur für diese drei */
.maps-icon,
.telefone,
.email {
    position: relative;
    width: 50px;
    height: 50px;
    padding-bottom: 80px;
}

/* Die <a>-Tags – volle Klickfläche, kein Übergang auf Container */
.maps-icon a,
.telefone a,
.email a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: none; /* Verhindert Flackern durch Layout-Änderungen */
}

/* Hover + Scale NUR auf diesen drei Icons – isoliert! */
.maps-icon:hover .sidebar-icon,
.telefone:hover .sidebar-icon,
.email:hover .sidebar-icon {
    transform: scale(1.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

/* Light-Mode Hover nur für diese drei */
body.light-mode .maps-icon:hover .sidebar-icon,
body.light-mode .telefone:hover .sidebar-icon,
body.light-mode .email:hover .sidebar-icon {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    background: rgba(0, 0, 0, 0.05);
}

/* Performance-FIX nur für diese drei Icons (gegen Flackern) */
.maps-icon .sidebar-icon,
.telefone .sidebar-icon,
.email .sidebar-icon {
    will-change: transform, box-shadow, background;
    backface-visibility: hidden;
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}

/* Erweiterte Klickfläche – sofort klickbar beim Hover */
.maps-icon a::before,
.telefone a::before,
.email a::before {
    content: '';
    position: absolute;
    inset: -12px; /* etwas größer – noch sicherer klickbar */
    z-index: 1;
}
/* Pfeil neben Flaggen / Sprachauswahl entfernen */
.flags-tooltip::before,
.flags-tooltip::after,
.language-hover::before,
.language-hover::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
}