/*made by www.ClaxDesign.com*/

/* =============================================================================
   SOCIAL MEDIA TOOLTIP – GRUNDSTRUKTUR DES CONTAINERS
   =============================================================================
   Hier definiere ich den Container für den Social-Media-Tooltip, der als relativ
   positioniertes Element fungiert. Dies ermöglicht es, dass die Tooltips absolut
   innerhalb dieses Containers positioniert werden können. Der Container selbst
   hat keine sichtbaren Stile, sondern dient nur als Referenzpunkt für die
   absolut positionierten Tooltips.

   - position: relative;: Setzt die Positionierung auf relativ, sodass Kind-Elemente
     absolut innerhalb dieses Containers positioniert werden können.
   ============================================================================= */
.social-hover {
    position: relative;
}

/* =============================================================================
   SOCIAL MEDIA ICON – TRANSITION FÜR HOVER-EFFEKTE
   =============================================================================
   Hier definiere ich eine Transition für das Social-Media-Icon, die eine sanfte,
   elastische Skalierungsanimation beim Hovern ermöglicht. Die Transition verwendet
   eine kubische Bezier-Kurve für einen natürlichen, leicht federnden Effekt.

   - transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;:
     Definiert eine Transition für die Transform-Eigenschaft mit einer Dauer von 0.4 Sekunden.
     Die kubische Bezier-Kurve (0.175, 0.885, 0.32, 1.275) sorgt für einen leicht federnden Effekt,
     der über das Ziel hinausschießt und dann zurückkehrt, was einen natürlichen Bewegungseindruck erzeugt.
   ============================================================================= */
.social-hover .sidebar-icon {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* =============================================================================
   SOCIAL MEDIA ICON – HOVER-SKALIERUNG
   =============================================================================
   Hier definiere ich den Hover-Effekt für das Social-Media-Icon. Beim Hovern wird das Icon
   um 60% vergrößert, was durch die zuvor definierte Transition sanft animiert wird.

   - transform: scale(1.6) !important;: Skaliert das Icon auf 160% seiner ursprünglichen Größe,
     was einen deutlichen, aber nicht übertriebenen Vergrößerungseffekt erzeugt.
   ============================================================================= */
.social-hover:hover .sidebar-icon {
    transform: scale(1.6) !important;
}

/* =============================================================================
   SOCIAL TOOLTIP – GRUNDSTILE UND POSITIONIERUNG
   =============================================================================
   Hier definiere ich die grundlegenden Stile und die Positionierung des Social-Tooltips.
   Der Tooltip ist standardmäßig ausgeblendet und wird erst beim Hovern über das Social-Media-Icon
   sichtbar. Er ist absolut positioniert, sodass er sich relativ zum Eltern-Container (.social-hover)
   verhält. Der Tooltip hat einen transparenten Hintergrund mit einem Unschärfe-Effekt und ist
   als Flex-Container organisiert, um die Social-Media-Optionen vertikal anzuordnen.

   - display: none;: Versteckt den Tooltip standardmäßig.
   - position: absolute;: Positioniert den Tooltip absolut innerhalb des relativ positionierten
     Eltern-Containers (.social-hover).
   - left: 80px;: Positioniert den Tooltip 80 Pixel vom linken Rand des Eltern-Containers entfernt.
   - margin-top: -170px;: Verschiebt den Tooltip um 170 Pixel nach oben, um ihn über dem Icon zu positionieren.
   - transform: translateY(-50%);: Zentriert den Tooltip vertikal relativ zu seiner eigenen Höhe.
   - backdrop-filter: blur(20px);: Wendet einen Unschärfe-Effekt auf den Hintergrund des Tooltips an,
     um einen modernen, leicht durchscheinenden Look zu erzeugen.
   - background-color: transparent !important;: Setzt den Hintergrund des Tooltips auf transparent,
     sodass nur der Unschärfe-Effekt sichtbar ist.
   - padding: 10px;: Fügt einen Innenabstand von 10 Pixel hinzu, um den Inhalt nicht direkt am Rand zu platzieren.
   - border-radius: 20px;: Rundet die Ecken des Tooltips mit einem Radius von 20 Pixel ab,
     was ein weiches, modernes Erscheinungsbild erzeugt.
   - width: 40px;: Setzt die Breite des Tooltips auf 40 Pixel.
   - flex-direction: column;: Ordnet die Kind-Elemente des Tooltips vertikal an.
   - gap: 10px;: Erzeugt einen Abstand von 10 Pixel zwischen den Kind-Elementen des Tooltips.
   - margin-left: -30px;: Verschiebt den Tooltip um 30 Pixel nach links, um die Position feinabzustimmen.
   - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);: Fügt einen Schatten hinzu, der dem Tooltip Tiefe verleiht
     und ihn vom Hintergrund abhebt. Der Schatten hat eine horizontale Ausdehnung von 0 Pixel,
     eine vertikale Ausdehnung von 8 Pixel, eine Unschärfe von 32 Pixel und eine Deckkraft von 50%.
   ============================================================================= */
.social-tooltip {
    display: none;
    position: absolute;
    left: 80px;
    margin-top: -170px;
    transform: translateY(-50%);
    backdrop-filter: blur(20px);
    background-color: transparent !important;
    padding: 10px;
    border-radius: 20px;
    width: 40px;
    flex-direction: column;
    gap: 10px;
    margin-left: -30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* =============================================================================
   SOCIAL TOOLTIP – ANZEIGE BEIM HOVERN
   =============================================================================
   Hier definiere ich, dass der Social-Tooltip angezeigt wird, wenn über den Social-Media-Container
   (.social-hover) gehovert wird. Der Tooltip wird als Flex-Container angezeigt, um die Social-Media-Optionen
   vertikal anzuordnen.

   - display: flex;: Zeigt den Tooltip als Flex-Container an, wenn über den Eltern-Container gehovert wird.
   ============================================================================= */
.social-hover:hover .social-tooltip {
    display: flex;
}

/* =============================================================================
   SOCIAL TOOLTIP – STILE FÜR EINZELNE OPTIONEN
   =============================================================================
   Hier definiere ich die Stile für die einzelnen Social-Media-Optionen innerhalb des Tooltips.
   Jede Option ist ein Flex-Container, der ein Icon und einen Text enthält. Die Optionen sind
   horizontal zentriert und haben einen transparenten Hintergrund, der sich beim Hovern nicht ändert.

   - display: flex;: Zeigt die Option als Flex-Container an.
   - align-items: center;: Zentriert die Kind-Elemente (Icon und Text) vertikal.
   - gap: 10px;: Erzeugt einen Abstand von 10 Pixel zwischen dem Icon und dem Text.
   - color: white;: Setzt die Textfarbe auf weiß.
   - font-size: 1.1rem;: Setzt die Schriftgröße auf 1.1rem.
   - cursor: pointer;: Zeigt an, dass die Option klickbar ist.
   - margin-top: -15px;: Verschiebt die Option um 15 Pixel nach oben, um die Position feinabzustimmen.
   - padding: 8px;: Fügt einen Innenabstand von 8 Pixel hinzu.
   - top: -9px;: Positioniert die Option 9 Pixel über ihrer Standardposition.
   - border-radius: 10px;: Rundet die Ecken der Option mit einem Radius von 10 Pixel ab.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für die Option.
   ============================================================================= */
.social-tooltip div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: -15px;
    padding: 8px;
    top: -9px;
    border-radius: 10px;
    background: transparent !important;
}

/* =============================================================================
   SOCIAL TOOLTIP – HOVER-EFFEKT FÜR EINZELNE OPTIONEN
   =============================================================================
   Hier definiere ich den Hover-Effekt für die einzelnen Social-Media-Optionen innerhalb des Tooltips.
   Beim Hovern bleibt der Hintergrund der Option transparent, sodass nur der Text und das Icon hervorgehoben werden.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für die Option,
     auch beim Hovern.
   ============================================================================= */
.social-tooltip div:hover {
    background: transparent !important;
}

/* =============================================================================
   SOCIAL TOOLTIP – STILE FÜR SOCIAL-MEDIA-ICONS
   =============================================================================
   Hier definiere ich die Stile für die Social-Media-Icons innerhalb des Tooltips.
   Die Icons haben eine feste Größe und sind leicht abgerundet.

   - width: 40px;: Setzt die Breite der Icons auf 40 Pixel.
   - height: 40px;: Setzt die Höhe der Icons auf 40 Pixel.
   - border-radius: 4px;: Rundet die Ecken der Icons mit einem Radius von 4 Pixel ab.
   - margin-left: 20px;: Fügt einen linken Außenabstand von 20 Pixel hinzu, um Abstand zum Text zu schaffen.
   ============================================================================= */
.social-tooltip img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-left: 20px;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR DEN SOCIAL TOOLTIP
   =============================================================================
   Hier definiere ich Anpassungen für den Social-Tooltip im Light-Mode.
   Der Tooltip bleibt transparent, aber die Textfarbe wird auf dunkelgrau gesetzt, um einen besseren
   Kontrast zum hellen Hintergrund zu bieten. Der Schatten wird entfernt, um ein saubereres Erscheinungsbild
   zu erzielen.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für den Tooltip.
   - backdrop-filter: blur(20px);: Behält den Unschärfe-Effekt bei, um den modernen Look beizubehalten.
   - color: #1a1a1a !important;: Setzt die Textfarbe auf dunkelgrau, um einen besseren Kontrast zum hellen Hintergrund zu bieten.
   - box-shadow: none !important;: Entfernt den Schatten, um ein saubereres Erscheinungsbild zu erzielen.
   ============================================================================= */
body.light-mode .social-tooltip {
    background: transparent !important;
    backdrop-filter: blur(20px);
    color: #1a1a1a !important;
    box-shadow: none !important;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR DIE EINZELNEN OPTIONEN IM TOOLTIP
   =============================================================================
   Hier definiere ich Anpassungen für die einzelnen Social-Media-Optionen im Tooltip im Light-Mode.
   Die Textfarbe wird auf dunkelgrau gesetzt, um einen besseren Kontrast zum hellen Hintergrund zu bieten.

   - color: #1a1a1a !important;: Setzt die Textfarbe auf dunkelgrau.
   ============================================================================= */
body.light-mode .social-tooltip div {
    color: #1a1a1a !important;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR DIE OPTIONEN BEIM HOVERN
   =============================================================================
   Hier definiere ich Anpassungen für die einzelnen Social-Media-Optionen im Tooltip im Light-Mode
   beim Hovern. Der Hintergrund bleibt transparent.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für die Option,
     auch beim Hovern im Light-Mode.
   ============================================================================= */
body.light-mode .social-tooltip div:hover {
    background: transparent !important;
}

/* =============================================================================
   SOCIAL TOOLTIP – TEXT DAUERHAFT UNSICHTBAR, NUR BEIM HOVER SICHTBAR
   =============================================================================
   Hier definiere ich die grundlegenden Stile für den Social-Tooltip, wobei der Text standardmäßig
   unsichtbar ist und erst beim Hovern über das Social-Media-Icon sichtbar wird. Der Tooltip ist
   absolut positioniert und hat einen transparenten Hintergrund mit Unschärfe-Effekt.

   - display: none;: Versteckt den Tooltip standardmäßig.
   - position: absolute;: Positioniert den Tooltip absolut innerhalb des relativ positionierten
     Eltern-Containers (.social-hover).
   - left: 80px;: Positioniert den Tooltip 80 Pixel vom linken Rand des Eltern-Containers entfernt.
   - top: 50%;: Positioniert den Tooltip vertikal in der Mitte des Eltern-Containers.
   - transform: translateY(-50%);: Zentriert den Tooltip vertikal relativ zu seiner eigenen Höhe.
   - background: transparent !important;: Setzt den Hintergrund des Tooltips auf transparent.
   - backdrop-filter: blur(20px);: Wendet einen Unschärfe-Effekt auf den Hintergrund des Tooltips an.
   - padding: 15px;: Fügt einen Innenabstand von 15 Pixel hinzu.
   - margin-top: 180px;: Verschiebt den Tooltip um 180 Pixel nach unten, um ihn unter dem Icon zu positionieren.
   - border-radius: 20px;: Rundet die Ecken des Tooltips mit einem Radius von 20 Pixel ab.
   - flex-direction: column;: Ordnet die Kind-Elemente des Tooltips vertikal an.
   - gap: 15px;: Erzeugt einen Abstand von 15 Pixel zwischen den Kind-Elementen des Tooltips.
   - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);: Fügt einen Schatten hinzu, der dem Tooltip Tiefe verleiht.
   - width: auto;: Passt die Breite des Tooltips automatisch an den Inhalt an.
   - min-width: 120px;: Setzt eine Mindestbreite von 120 Pixel, um sicherzustellen, dass der Tooltip
     ausreichend Platz für den Text bietet.
   ============================================================================= */
.social-tooltip {
    display: none;
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    backdrop-filter: blur(20px);
    padding: 15px;
    margin-top: 180px;
    border-radius: 20px;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    width: auto;
    min-width: 120px;
}

/* =============================================================================
   SOCIAL TOOLTIP – ANZEIGE BEIM HOVERN MIT POSITIONSANPASSUNG
   =============================================================================
   Hier definiere ich, dass der Social-Tooltip angezeigt wird, wenn über den Social-Media-Container
   (.social-hover) gehovert wird. Zusätzlich wird die Position des Tooltips nach oben verschoben,
   um ihn näher am Social-Media-Icon zu platzieren.

   - display: flex;: Zeigt den Tooltip als Flex-Container an, wenn über den Eltern-Container gehovert wird.
   - margin-top: -90px;: Verschiebt den Tooltip um 90 Pixel nach oben, um ihn näher am Icon zu positionieren.
   ============================================================================= */
.social-hover:hover .social-tooltip {
    display: flex;
    margin-top: -90px;
}

/* =============================================================================
   SOCIAL ITEM – GRUNDSTRUKTUR EINES EINZELNEN SOCIAL-MEDIA-ELEMENTS
   =============================================================================
   Hier definiere ich die grundlegende Struktur eines einzelnen Social-Media-Elements innerhalb
   des Tooltips. Das Element ist als Flex-Container organisiert, um das Icon und den Text horizontal
   anzuordnen. Es ist relativ positioniert, um absolute Positionierungen der Kind-Elemente zu ermöglichen.

   - position: relative;: Ermöglicht die absolute Positionierung von Kind-Elementen innerhalb dieses Elements.
   - display: flex;: Zeigt das Element als Flex-Container an.
   - align-items: center;: Zentriert die Kind-Elemente (Icon und Text) vertikal.
   - justify-content: center;: Zentriert die Kind-Elemente horizontal.
   ============================================================================= */
.social-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   SOCIAL LABEL – TEXT DES SOCIAL-MEDIA-ELEMENTS
   =============================================================================
   Hier definiere ich die Stile für den Text eines Social-Media-Elements. Der Text ist standardmäßig
   unsichtbar und wird erst beim Hovern über das Element sichtbar. Er ist absolut positioniert,
   um ihn unabhängig vom Icon platzieren zu können.

   - position: absolute;: Positioniert den Text absolut innerhalb des relativ positionierten Eltern-Elements (.social-item).
   - color: #1a1a1a;: Setzt die Textfarbe auf dunkelgrau.
   - margin-left: -10px;: Verschiebt den Text um 10 Pixel nach links, um die Position feinabzustimmen.
   - font-size: 1rem;: Setzt die Schriftgröße auf 1rem.
   - font-weight: 600;: Setzt die Schrift auf fett.
   - opacity: 0;: Macht den Text standardmäßig unsichtbar.
   - text-align: center;: Zentriert den Text horizontal.
   - transition: opacity 0.3s ease;: Ermöglicht eine sanfte Transition für die Opazität, sodass der Text
     beim Erscheinen und Verschwinden sanft ein- und ausblendet.
   - pointer-events: none;: Verhindert Mausinteraktionen mit dem Text, sodass Klicks auf das Icon oder
     den Hintergrund weitergeleitet werden.
   - white-space: nowrap;: Verhindert Zeilenumbrüche im Text.
   ============================================================================= */
.social-label {
    position: absolute;
    color: #1a1a1a;
    margin-left: -10px;
    font-size: 1rem;
    font-weight: 600;
    opacity: 0;
    text-align: center;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* =============================================================================
   SOCIAL LABEL – SICHTBARKEIT BEIM HOVERN
   =============================================================================
   Hier definiere ich, dass der Text eines Social-Media-Elements sichtbar wird, wenn über das Element
   gehovert wird. Die Opazität wird auf 1 gesetzt, sodass der Text vollständig sichtbar wird.

   - opacity: 1;: Macht den Text vollständig sichtbar.
   ============================================================================= */
.social-item:hover .social-label {
    opacity: 1;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR DEN SOCIAL LABEL
   =============================================================================
   Hier definiere ich Anpassungen für den Text eines Social-Media-Elements im Light-Mode.
   Die Textfarbe wird auf dunkelgrau gesetzt, um einen besseren Kontrast zum hellen Hintergrund zu bieten.

   - color: #1a1a1a !important;: Setzt die Textfarbe auf dunkelgrau.
   ============================================================================= */
body.light-mode .social-label {
    color: #1a1a1a !important;
}

/* =============================================================================
   ENDGÜLTIGER FIX: TEXT RECHTS NEBEN DEM SOCIAL-ICON BEIM HOVERN
   =============================================================================
   Hier definiere ich die endgültige Positionierung des Social-Tooltips, sodass der Text rechts
   neben dem Social-Media-Icon erscheint, wenn über das Icon gehovert wird. Der Tooltip ist absolut
   positioniert und hat einen transparenten Hintergrund.

   - left: 90px;: Positioniert den Tooltip 90 Pixel vom linken Rand des Eltern-Containers entfernt.
   - top: -80px;: Positioniert den Tooltip 80 Pixel über seiner Standardposition.
   - transform: translateY(-50%);: Zentriert den Tooltip vertikal relativ zu seiner eigenen Höhe.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für den Tooltip.
   - min-width: 100px;: Setzt eine Mindestbreite von 100 Pixel, um sicherzustellen, dass der Tooltip
     ausreichend Platz für den Text bietet.
   - align-items: flex-start;: Richtet die Kind-Elemente am Anfang der Querachse aus, sodass sie linksbündig sind.
   - gap: 10px;: Erzeugt einen Abstand von 10 Pixel zwischen den Kind-Elementen des Tooltips.
   ============================================================================= */
.social-tooltip {
    left: 90px;
    top: -80px;
    transform: translateY(-50%);
    background: transparent !important;
    min-width: 100px;
    align-items: flex-start;
    gap: 10px;
}

/* =============================================================================
   SOCIAL ITEM – STRUKTUR UND STILE EINES EINZELNEN SOCIAL-MEDIA-ELEMENTS
   =============================================================================
   Hier definiere ich die Struktur und die Stile eines einzelnen Social-Media-Elements innerhalb
   des Tooltips. Das Element ist als Flex-Container organisiert, um das Icon und den Text horizontal
   anzuordnen. Es hat eine feste Breite und einen transparenten Hintergrund.

   - display: flex;: Zeigt das Element als Flex-Container an.
   - align-items: center;: Zentriert die Kind-Elemente (Icon und Text) vertikal.
   - gap: 20px;: Erzeugt einen Abstand von 20 Pixel zwischen dem Icon und dem Text.
   - justify-content: flex-start;: Richtet die Kind-Elemente am Anfang der Hauptachse aus, sodass sie linksbündig sind.
   - width: 150px;: Setzt die Breite des Elements auf 150 Pixel.
   - padding: 5px;: Fügt einen Innenabstand von 5 Pixel hinzu.
   - border-radius: 15px;: Rundet die Ecken des Elements mit einem Radius von 15 Pixel ab.
   - transition: background 0.3s ease;: Ermöglicht eine sanfte Transition für den Hintergrund,
     falls dieser sich ändern würde.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Element.
   ============================================================================= */
.social-item {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-start;
    width: 150px;
    padding: 5px;
    border-radius: 15px;
    transition: background 0.3s ease;
    background: transparent !important;
}

/* =============================================================================
   SOCIAL ITEM – HOVER-EFFEKT FÜR EINZELNES SOCIAL-MEDIA-ELEMENT
   =============================================================================
   Hier definiere ich den Hover-Effekt für ein einzelnes Social-Media-Element. Beim Hovern wird das Element
   um 50% vergrößert, nach links verschoben und behält seinen transparenten Hintergrund.

   - transform: scale(1.5);: Vergrößert das Element auf 150% seiner ursprünglichen Größe.
   - margin-left: 50px;: Verschiebt das Element um 50 Pixel nach links.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Element,
     auch beim Hovern.
   ============================================================================= */
.social-item:hover {
    transform: scale(1.5);
    margin-left: 50px;
    background: transparent !important;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR SOCIAL ITEM BEIM HOVERN
   =============================================================================
   Hier definiere ich Anpassungen für ein einzelnes Social-Media-Element im Light-Mode beim Hovern.
   Der Hintergrund bleibt transparent.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Element,
     auch beim Hovern im Light-Mode.
   ============================================================================= */
body.light-mode .social-item:hover {
    background: transparent !important;
}

/* =============================================================================
   SOCIAL LABEL – STILE FÜR DEN TEXT DES SOCIAL-MEDIA-ELEMENTS
   =============================================================================
   Hier definiere ich die Stile für den Text eines Social-Media-Elements. Der Text ist standardmäßig
   unsichtbar und wird erst beim Hovern über das Element sichtbar. Er hat eine weiße Textfarbe und
   eine sanfte Transition für die Opazität.

   - opacity: 0;: Macht den Text standardmäßig unsichtbar.
   - transition: opacity 0.3s ease;: Ermöglicht eine sanfte Transition für die Opazität.
   - color: white;: Setzt die Textfarbe auf weiß.
   - font-size: 1.2rem;: Setzt die Schriftgröße auf 1.2rem.
   - font-weight: 500;: Setzt die Schrift auf mittel-fett.
   ============================================================================= */
.social-label {
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
}

/* =============================================================================
   SOCIAL LABEL – SICHTBARKEIT BEIM HOVERN
   =============================================================================
   Hier definiere ich, dass der Text eines Social-Media-Elements sichtbar wird, wenn über das Element
   gehovert wird. Die Opazität wird auf 1 gesetzt, sodass der Text vollständig sichtbar wird.

   - opacity: 1;: Macht den Text vollständig sichtbar.
   ============================================================================= */
.social-item:hover .social-label {
    opacity: 1;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR SOCIAL LABEL
   =============================================================================
   Hier definiere ich Anpassungen für den Text eines Social-Media-Elements im Light-Mode.
   Die Textfarbe wird auf dunkelgrau gesetzt, um einen besseren Kontrast zum hellen Hintergrund zu bieten.

   - color: #1a1a1a !important;: Setzt die Textfarbe auf dunkelgrau.
   ============================================================================= */
body.light-mode .social-label {
    color: #1a1a1a !important;
}

/* =============================================================================
   SOCIAL TOOLTIP – KOMPLETT TRANSPARENTER HINTERGRUND FÜR EINZELNE ICONS
   =============================================================================
   Hier definiere ich den Social-Tooltip mit einem komplett transparenten Hintergrund, sodass nur
   die einzelnen Icons sichtbar sind. Der Tooltip hat keinen Unschärfe-Effekt und keinen Schatten.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für den Tooltip.
   - backdrop-filter: none !important;: Deaktiviert den Unschärfe-Effekt für den Tooltip.
   - box-shadow: none !important;: Entfernt den Schatten des Tooltips.
   - padding: 0;: Entfernt den Innenabstand des Tooltips.
   - gap: 25px;: Erzeugt einen Abstand von 25 Pixel zwischen den Kind-Elementen des Tooltips.
   - left: 90px;: Positioniert den Tooltip 90 Pixel vom linken Rand des Eltern-Containers entfernt.
   - top: 50%;: Positioniert den Tooltip vertikal in der Mitte des Eltern-Containers.
   - transform: translateY(-50%);: Zentriert den Tooltip vertikal relativ zu seiner eigenen Höhe.
   ============================================================================= */
.social-tooltip {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0;
    gap: 25px;
    left: 90px;
    top: 50%;
    transform: translateY(-50%);
}

/* =============================================================================
   SOCIAL ITEM – STRUKTUR EINES EINZELNEN SOCIAL-MEDIA-ELEMENTS ALS BLOCK
   =============================================================================
   Hier definiere ich die Struktur eines einzelnen Social-Media-Elements als Block-Element.
   Das Element ist relativ positioniert, um absolute Positionierungen der Kind-Elemente zu ermöglichen.
   Es hat einen transparenten Hintergrund und eine sanfte Transition für den Hintergrund.

   - position: relative;: Ermöglicht die absolute Positionierung von Kind-Elementen innerhalb dieses Elements.
   - display: block;: Zeigt das Element als Block-Element an.
   - padding: 10px;: Fügt einen Innenabstand von 10 Pixel hinzu.
   - border-radius: 15px;: Rundet die Ecken des Elements mit einem Radius von 15 Pixel ab.
   - transition: background 0.3s ease;: Ermöglicht eine sanfte Transition für den Hintergrund.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Element.
   ============================================================================= */
.social-item {
    position: relative;
    display: block;
    padding: 10px;
    border-radius: 15px;
    transition: background 0.3s ease;
    background: transparent !important;
}

/* =============================================================================
   SOCIAL ITEM – HOVER-EFFEKT FÜR EINZELNES SOCIAL-MEDIA-ELEMENT ALS BLOCK
   =============================================================================
   Hier definiere ich den Hover-Effekt für ein einzelnes Social-Media-Element als Block-Element.
   Beim Hovern wird das Element um 50% vergrößert, nach links verschoben und behält seinen transparenten Hintergrund.

   - transform: scale(1.5);: Vergrößert das Element auf 150% seiner ursprünglichen Größe.
   - margin-left: 50px;: Verschiebt das Element um 50 Pixel nach links.
   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Element,
     auch beim Hovern.
   ============================================================================= */
.social-item:hover {
    transform: scale(1.5);
    margin-left: 50px;
    background: transparent !important;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR SOCIAL ITEM BEIM HOVERN ALS BLOCK
   =============================================================================
   Hier definiere ich Anpassungen für ein einzelnes Social-Media-Element im Light-Mode beim Hovern.
   Der Hintergrund bleibt transparent.

   - background: transparent !important;: Erzwingt einen transparenten Hintergrund für das Element,
     auch beim Hovern im Light-Mode.
   ============================================================================= */
body.light-mode .social-item:hover {
    background: transparent !important;
}

/* =============================================================================
   SOCIAL LABEL – ABSOLUTE POSITIONIERUNG UND STILE FÜR DEN TEXT
   =============================================================================
   Hier definiere ich die absolute Positionierung und die Stile für den Text eines Social-Media-Elements.
   Der Text ist standardmäßig unsichtbar und wird erst beim Hovern über das Element sichtbar.
   Er ist absolut positioniert, um ihn rechts neben dem Icon zu platzieren.

   - position: absolute;: Positioniert den Text absolut innerhalb des relativ positionierten Eltern-Elements (.social-item).
   - left: 70px;: Positioniert den Text 70 Pixel vom linken Rand des Eltern-Elements entfernt.
   - top: 50%;: Positioniert den Text vertikal in der Mitte des Eltern-Elements.
   - transform: translateY(-50%);: Zentriert den Text vertikal relativ zu seiner eigenen Höhe.
   - opacity: 0;: Macht den Text standardmäßig unsichtbar.
   - transition: opacity 0.3s ease;: Ermöglicht eine sanfte Transition für die Opazität.
   - color: white;: Setzt die Textfarbe auf weiß.
   - font-size: 1.1rem;: Setzt die Schriftgröße auf 1.1rem.
   - font-weight: 600;: Setzt die Schrift auf fett.
   - white-space: nowrap;: Verhindert Zeilenumbrüche im Text.
   - pointer-events: none;: Verhindert Mausinteraktionen mit dem Text, sodass Klicks auf das Icon oder
     den Hintergrund weitergeleitet werden.
   ============================================================================= */
.social-label {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* =============================================================================
   SOCIAL LABEL – SICHTBARKEIT BEIM HOVERN
   =============================================================================
   Hier definiere ich, dass der Text eines Social-Media-Elements sichtbar wird, wenn über das Element
   gehovert wird. Die Opazität wird auf 1 gesetzt, sodass der Text vollständig sichtbar wird.

   - opacity: 1;: Macht den Text vollständig sichtbar.
   ============================================================================= */
.social-item:hover .social-label {
    opacity: 1;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR SOCIAL LABEL
   =============================================================================
   Hier definiere ich Anpassungen für den Text eines Social-Media-Elements im Light-Mode.
   Die Textfarbe wird auf dunkelgrau gesetzt, um einen besseren Kontrast zum hellen Hintergrund zu bieten.

   - color: #1a1a1a !important;: Setzt die Textfarbe auf dunkelgrau.
   ============================================================================= */
body.light-mode .social-label {
    color: #1a1a1a !important;
}