/*made by www.ClaxDesign.com*/

/* =============================================================================
   DIENSTLEISTUNGEN – Überschrift mit animiertem Farbverlauf
   ============================================================================= */
#services h2 {
    /* Erzwingt einen Abstand von 70px von oben, unabhängig von anderen Stilen */
    margin-top: 70px !important;
    /* Zentriert den Text horizontal */
    text-align: center;
    /* Schriftgröße von 2.8rem */
    font-size: 2.8rem;
    /* Abstand von 1rem nach unten */
    margin-bottom: 1rem;
    /* Definiert einen horizontalen Farbverlauf als Hintergrund (Türkis, Lila, Pink, Blau, Türkis) */
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff);
    /* Beschränkt den Hintergrund auf den Textbereich, sodass der Verlauf nur im Text sichtbar ist */
    -webkit-background-clip: text;
    /* Macht den Text transparent, damit der Farbverlauf sichtbar wird */
    -webkit-text-fill-color: transparent;
    /* Vergrößert den Hintergrund, um den Animationsbereich zu definieren */
    background-size: 300% 300%;
    /* Wendet eine Animation auf den Hintergrund an, die den Farbverlauf bewegt */
    animation: textGradient 12s ease infinite;
    /* Sehr fettgedruckte Schrift */
    font-weight: 900;
    /* Leichter negativer Buchstabenabstand für bessere Lesbarkeit */
    letter-spacing: -0.5px;
}

/* =============================================================================
   ANIMATION – Farbverlauf für Text
   =============================================================================
   @keyframes textGradient {
       /* Startposition des Farbverlaufs (0% horizontal, 50% vertikal) */
       0% { background-position: 0% 50%; }
       /* Mittlere Position des Farbverlaufs (100% horizontal, 50% vertikal) */
       50% { background-position: 100% 50%; }
       /* Endposition des Farbverlaufs (0% horizontal, 50% vertikal) */
       100% { background-position: 0% 50%; }
   }

/* =============================================================================
   DIENSTLEISTUNGEN – Einleitungstext mit Unschärfe-Effekt
   ============================================================================= */
#services p.services-intro {
    /* Zentriert den Text horizontal */
    text-align: center;
    /* Schriftgröße von 1.1rem */
    font-size: 1.1rem;
    /* Abstand von 3rem nach unten */
    margin-bottom: 3rem;
    /* Weiße Textfarbe */
    color: white;
    /* Halbtransparenter schwarzer Hintergrund */
    background: rgba(0, 0, 0, 0.5);
    /* Wendet einen Unschärfe-Filter auf den Hintergrund an */
    backdrop-filter: blur(12px);
    /* Fallback für den Unschärfe-Filter in Safari */
    -webkit-backdrop-filter: blur(12px);
    /* Innenabstände von 1.2rem oben/unten und 2.5rem links/rechts */
    padding: 1.2rem 2.5rem;
    /* Abgerundete Ecken mit 20px Radius */
    border-radius: 20px;
    /* Maximale Breite von 100% des Eltern-Containers */
    max-width: 100%;
    /* Zentriert den Container horizontal */
    margin-left: auto;
    margin-right: auto;
    /* Schatten für Tiefe: 8px vertikaler Versatz, 32px Unschärfe, schwarze Farbe mit 40% Deckkraft */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    /* Subtiler weißer Rahmen mit 8% Deckkraft */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   DIENSTLEISTUNGEN – Grid-Layout für Dienstleistungskarten (2 Spalten)
   ============================================================================= */
.service-grid {
    /* Aktiviert das CSS-Grid-Layout */
    display: grid;
    /* Erstellt zwei Spalten mit gleicher Breite */
    grid-template-columns: repeat(2, 1fr);
    /* Abstand von 4rem zwischen den Grid-Elementen */
    gap: 4rem;
    /* Abstand von 3rem von oben */
    margin-top: 3rem;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Stil für einzelne Dienstleistungskarten
   ============================================================================= */
.service-card {
    /* Halbtransparenter dunkler Hintergrund (RGBA: 30, 30, 45, 75% Deckkraft) */
    background: rgba(30, 30, 45, 0.7);
    /* Wendet einen Unschärfe-Filter auf den Hintergrund an */
    backdrop-filter: blur(15px);
    /* Innenabstände von 3rem */
    padding: 3rem;
    /* Abgerundete untere Ecken mit 25px Radius */
    border-radius: 0 0 25px 25px;
    /* Zentriert den Text horizontal */
    text-align: center;
    /* Ermöglicht sanfte Übergänge bei Hover-Effekten (z.B. Transformation) */
    transition: transform 0.4s ease;
    /* Weiße Textfarbe */
    color: white;
    /* Schatten für Tiefe: 15px vertikaler Versatz, 40px Unschärfe, schwarze Farbe mit 30% Deckkraft */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* Transparenter Rahmen mit 5px Breite (für spätere Pseudo-Element-Effekte) */
    border: 5px solid transparent;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
    /* Beschränkt den Hintergrund auf den Padding-Bereich */
    background-clip: padding-box;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Animierter Rahmen-Effekt für Dienstleistungskarten
   ============================================================================= */
.service-card::before {
    /* Erzeugt ein leeres Pseudo-Element */
    content: '';
    /* Positioniert das Element absolut innerhalb der Karte */
    position: absolute;
    /* Positioniert das Element 5px außerhalb der Karte (oben, rechts, unten, links) */
    inset: -5px;
    /* Abgerundete Ecken mit 30px Radius */
    border-radius: 30px;
    /* Fester Rahmen mit 10px Breite */
    border: 10px solid;
    /* Definiert einen Farbverlauf als Rahmen (Türkis, Lila, Pink, Blau, Türkis) */
    border-image: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff) 1;
    /* Teilt den Rahmen in 1 Segment */
    border-image-slice: 1;
    /* Vergrößert den Hintergrund für die Animation */
    background-size: 400% 400%;
    /* Wendet eine Animation auf den Rahmen an, die den Farbverlauf bewegt */
    animation: borderFlow 12s linear infinite;
    /* Positioniert den Rahmen hinter dem Inhalt der Karte */
    z-index: -1;
}

/* =============================================================================
   ANIMATION – Rahmen-Farbverlauf
   ============================================================================= */
@keyframes borderFlow {
    /* Startposition des Farbverlaufs (0% horizontal, 50% vertikal) */
    0% { background-position: 0% 50%; }
    /* Mittlere Position des Farbverlaufs (100% horizontal, 50% vertikal) */
    50% { background-position: 100% 50%; }
    /* Endposition des Farbverlaufs (0% horizontal, 50% vertikal) */
    100% { background-position: 0% 50%; }
}

/* =============================================================================
   DIENSTLEISTUNGEN – Hover-Effekt für Dienstleistungskarten (Anhebung)
   ============================================================================= */
.service-card:hover {
    /* Hebt die Karte um 15px nach oben an */
    transform: translateY(-15px);
}

/* =============================================================================
   DIENSTLEISTUNGEN – Überschrift in Dienstleistungskarten mit Farbverlauf
   ============================================================================= */
.service-card h3 {
    /* Abstände: 1.5rem oben, 0 rechts/links, 1rem unten */
    margin: 1.5rem 0 1rem;
    /* Schriftgröße von 1.6rem */
    font-size: 1.6rem;
    /* Definiert einen horizontalen Farbverlauf als Hintergrund (Türkis, Lila, Pink) */
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb);
    /* Beschränkt den Hintergrund auf den Textbereich */
    -webkit-background-clip: text;
    /* Macht den Text transparent, damit der Farbverlauf sichtbar wird */
    -webkit-text-fill-color: transparent;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
    /* Innenabstand von 1rem unten für das Pseudo-Element (Unterstreichung) */
    padding-bottom: 1rem;
    /* Sehr fettgedruckte Schrift */
    font-weight: 800;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Dekorative Unterstreichung unter der Überschrift
   ============================================================================= */
.service-card h3::after {
    /* Erzeugt ein leeres Pseudo-Element */
    content: '';
    /* Positioniert das Element absolut innerhalb der Überschrift */
    position: absolute;
    /* Platziert das Element unten in der Überschrift */
    bottom: 0;
    /* Positioniert das Element am linken Rand */
    left: 0;
    /* Volle Breite der Überschrift */
    width: 100%;
    /* Höhe von 3px */
    height: 3px;
    /* Definiert einen horizontalen Farbverlauf als Hintergrund (Türkis, Lila) */
    background: linear-gradient(90deg, #00ffff, #b08aff);
    /* Setzt den Ursprung der Transformation auf links */
    transform-origin: left;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Listenformatierung in Dienstleistungskarten
   ============================================================================= */
.service-card ul {
    /* Linksbündiger Text */
    text-align: left;
    /* Linker Innenabstand von 1.5rem */
    padding-left: 1.5rem;
    /* Zeilenhöhe von 1.8 für bessere Lesbarkeit */
    line-height: 1.8;
    /* Entfernt Standard-Abstände */
    margin: 0;
    padding: 0;
    /* Entfernt die Standard-Aufzählungszeichen */
    list-style: none;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Formatierung der Listenelemente
   ============================================================================= */
.service-card ul li {
    /* Weiße Textfarbe */
    color: white;
    /* Abstand von 0.5rem nach unten */
    margin-bottom: 0.5rem;
    /* Linker Innenabstand von 1rem (für Aufzählungszeichen) */
    padding-left: 1rem;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
    /* Schriftgröße von 1.05rem */
    font-size: 1.05rem;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Hervorgehobene Texte in Listenelementen
   ============================================================================= */
.service-card ul li strong {
    /* Türkisfarbene Textfarbe */
    color: #00ffff;
    /* Fettgedruckte Schrift */
    font-weight: 700;
    /* Schriftgröße von 1.1rem */
    font-size: 1.1rem;
    /* Türkisfarbener Glow-Effekt (10px Unschärfe, 50% Deckkraft) */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* =============================================================================
   DIENSTLEISTUNGEN – Aufzählungszeichen vor Listenelementen
   ============================================================================= */
.service-card ul li::before {
    /* Definiert das Aufzählungszeichen als Punkt */
    content: "•";
    /* Türkisfarbene Farbe */
    color: #00ffff;
    /* Positioniert das Aufzählungszeichen absolut */
    position: absolute;
    /* Platziert es ganz links */
    left: 0;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Bilder in Dienstleistungskarten
   ============================================================================= */
.service-img {
    /* Volle Breite des Containers */
    width: 100%;
    /* Feste Höhe von 250px */
    height: 250px;
    /* Bilder werden beschnitten, um den Container zu füllen */
    object-fit: cover;
    /* Abgerundete Ecken mit 20px Radius */
    border-radius: 20px;
    /* Abstand von 2rem nach unten */
    margin-bottom: 2rem;
    /* Innenabstände von 1rem */
    padding: 1rem;
    /* Bezieht Padding in die Elementgröße ein */
    box-sizing: border-box;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Zentrale Dienstleistungskarte (Design & Creative Direction)
   ============================================================================= */
.service-center {
    /* Spannt die Karte über die gesamte Grid-Breite */
    grid-column: 1 / -1;
    /* Aktiviert das CSS-Grid-Layout */
    display: grid;
    /* Erstellt zwei Spalten mit gleicher Breite */
    grid-template-columns: repeat(2, 1fr);
    /* Abstand von 4rem zwischen den Grid-Elementen */
    gap: 4rem;
    /* Abstand von 4rem von oben */
    margin-top: 4rem;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Zentrale Dienstleistungskarten (Design & Creative Direction)
   ============================================================================= */
.service-cards {
    /* Halbtransparenter dunkler Hintergrund */
    background: rgba(30, 30, 45, 0.7);
    /* Wendet einen Unschärfe-Filter auf den Hintergrund an */
    backdrop-filter: blur(15px);
    /* Innenabstände von 3rem */
    padding: 3rem;
    /* Abgerundete untere Ecken mit 25px Radius */
    border-radius: 0 0 25px 25px;
    /* Zentriert den Text horizontal */
    text-align: center;
    /* Ermöglicht sanfte Übergänge bei Hover-Effekten */
    transition: transform 0.4s ease;
    /* Weiße Textfarbe */
    color: white;
    /* Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* Transparenter Rahmen mit 5px Breite */
    border: 5px solid transparent;
    /* Spannt die Karte über zwei Spalten */
    grid-column: span 2;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
    /* Beschränkt den Hintergrund auf den Padding-Bereich */
    background-clip: padding-box;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Animierter Rahmen für zentrale Karten
   ============================================================================= */
.service-cards::before {
    /* Erzeugt ein leeres Pseudo-Element */
    content: '';
    /* Positioniert das Element absolut innerhalb der Karte */
    position: absolute;
    /* Positioniert das Element 5px außerhalb der Karte */
    inset: -5px;
    /* Abgerundete Ecken mit 30px Radius */
    border-radius: 30px;
    /* Fester Rahmen mit 10px Breite */
    border: 10px solid;
    /* Definiert einen Farbverlauf als Rahmen (Türkis, Lila, Pink, Blau, Türkis) */
    border-image: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff) 1;
    /* Teilt den Rahmen in 1 Segment */
    border-image-slice: 1;
    /* Vergrößert den Hintergrund für die Animation */
    background-size: 400% 400%;
    /* Wendet eine Animation auf den Rahmen an */
    animation: borderFlow 12s linear infinite;
    /* Positioniert den Rahmen hinter dem Inhalt */
    z-index: -1;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Hover-Effekt für zentrale Karten (Anhebung)
   ============================================================================= */
.service-cards:hover {
    /* Hebt die Karte um 15px nach oben an */
    transform: translateY(-15px);
}

/* =============================================================================
   DIENSTLEISTUNGEN – Überschrift in zentralen Karten
   ============================================================================= */
.service-cards h3 {
    /* Abstände: 1.5rem oben, 0 rechts/links, 1rem unten */
    margin: 1.5rem 0 1rem;
    /* Schriftgröße von 1.6rem */
    font-size: 1.6rem;
    /* Definiert einen horizontalen Farbverlauf als Hintergrund (Türkis, Lila, Pink) */
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb);
    /* Beschränkt den Hintergrund auf den Textbereich */
    -webkit-background-clip: text;
    /* Macht den Text transparent */
    -webkit-text-fill-color: transparent;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
    /* Innenabstand von 1rem unten für die Unterstreichung */
    padding-bottom: 1rem;
    /* Sehr fettgedruckte Schrift */
    font-weight: 800;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Unterstreichung unter der Überschrift in zentralen Karten
   ============================================================================= */
.service-cards h3::after {
    /* Erzeugt ein leeres Pseudo-Element */
    content: '';
    /* Positioniert das Element absolut innerhalb der Überschrift */
    position: absolute;
    /* Platziert das Element unten in der Überschrift */
    bottom: 0;
    /* Positioniert das Element am linken Rand */
    left: 0;
    /* Volle Breite der Überschrift */
    width: 100%;
    /* Höhe von 3px */
    height: 3px;
    /* Türkisfarbene Linie */
    background: #00ffff;
    /* Setzt den Ursprung der Transformation auf links */
    transform-origin: left;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Grid-Layout für den Inhalt zentraler Karten
   ============================================================================= */
.service-cards-content {
    /* Aktiviert das CSS-Grid-Layout */
    display: grid;
    /* Erstellt zwei Spalten mit gleicher Breite */
    grid-template-columns: 1fr 1fr;
    /* Abstand von 2rem zwischen den Grid-Elementen */
    gap: 2rem;
    /* Abstand von 1rem von oben */
    margin-top: 1rem;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Listen in zentralen Karten (ohne Aufzählungszeichen)
   ============================================================================= */
.service-cards-content ul {
    /* Linksbündiger Text */
    text-align: left;
    /* Entfernt Standard-Innenabstände */
    padding: 0;
    /* Entfernt Standard-Außenabstände */
    margin: 0;
    /* Entfernt die Standard-Aufzählungszeichen */
    list-style: none;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Listenelemente in zentralen Karten
   ============================================================================= */
.service-cards-content ul li {
    /* Weiße Textfarbe */
    color: white;
    /* Abstand von 0.5rem nach unten */
    margin-bottom: 0.5rem;
    /* Linker Innenabstand von 1rem (für Aufzählungszeichen) */
    padding-left: 1rem;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Aufzählungszeichen in zentralen Karten
   ============================================================================= */
.service-cards-content ul li::before {
    /* Definiert das Aufzählungszeichen als Punkt */
    content: "•";
    /* Türkisfarbene Farbe */
    color: #00ffff;
    /* Positioniert das Aufzählungszeichen absolut */
    position: absolute;
    /* Platziert es ganz links */
    left: 0;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Hervorgehobene Texte in zentralen Karten
   ============================================================================= */
.service-cards-content ul li strong {
    /* Türkisfarbene Textfarbe */
    color: #00ffff;
    /* Fettgedruckte Schrift */
    font-weight: 700;
    /* Schriftgröße von 1.1rem */
    font-size: 1.1rem;
    /* Türkisfarbener Glow-Effekt */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* =============================================================================
   DIENSTLEISTUNGEN – Video-Container in Dienstleistungskarten
   ============================================================================= */
.service-video-container {
    /* Volle Breite des Eltern-Containers */
    width: 100%;
    /* Feste Höhe von 250px */
    height: 250px;
    /* Abgerundete Ecken mit 20px Radius */
    border-radius: 20px;
    /* Zentriert den Container horizontal mit 2rem Abstand nach unten */
    margin: 0 auto 2rem;
    /* Verbirgt überlaufende Inhalte */
    overflow: hidden;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
    /* Weißer Hintergrund */
    background: white;
    /* Innenabstände von 1rem */
    padding: 1rem;
    /* Bezieht Padding in die Elementgröße ein */
    box-sizing: border-box;
    /* Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   DIENSTLEISTUNGEN – Video-Element im Container
   ============================================================================= */
.service-video-container video {
    /* Volle Breite und Höhe des Containers */
    width: 100%;
    height: 100%;
    /* Videos werden beschnitten, um den Container zu füllen */
    object-fit: cover;
    /* Abgerundete Ecken mit 15px Radius */
    border-radius: 15px;
    /* Block-Element für bessere Kontrolle */
    display: block;
}

/* =============================================================================
   DIENSTLEISTUNGEN – Farbverlauf am unteren Rand des Videos
   ============================================================================= */
.service-video-container::after {
    /* Erzeugt ein leeres Pseudo-Element */
    content: '';
    /* Positioniert das Element absolut innerhalb des Containers */
    position: absolute;
    /* Platziert das Element unten im Container */
    bottom: 0;
    /* Positioniert das Element am linken Rand */
    left: 0;
    /* Volle Breite des Containers */
    width: 100%;
    /* Höhe von 30% des Containers */
    height: 30%;
    /* Definiert einen vertikalen Farbverlauf von transparentem Schwarz nach vollständig transparent */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 70%);
    /* Verhindert Interaktion mit dem Pseudo-Element */
    pointer-events: none;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Bilder und Videos
   ============================================================================= */
body.light-mode .service-img,
body.light-mode .service-video-container video,
body.light-mode .service-video-container {
    /* Schwarzer Hintergrund für besseren Kontrast */
    background: #000;
    /* Weißer Schatten für Kontrast im Light-Mode */
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Überschrift der Dienstleistungen
   ============================================================================= */
body.light-mode #services h2 {
    /* Definiert einen neuen Farbverlauf (Dunkelblau, Lila, Pink) */
    background: linear-gradient(90deg, #0a3cff, #4d0099, #9d4edd);
    /* Beschränkt den Hintergrund auf den Textbereich */
    -webkit-background-clip: text;
    /* Macht den Text transparent */
    -webkit-text-fill-color: transparent;
    /* Fügt einen subtilen Schatten hinzu */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    /* Erzwingt einen Abstand von 200px von oben */
    margin-top: 200px !important;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Einleitungstext
   ============================================================================= */
body.light-mode #services p.services-intro {
    /* Dunkle Textfarbe */
    color: #333333 !important;
    /* Halbtransparenter weißer Hintergrund */
    background: rgba(255, 255, 255, 0.7);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(12px);
    /* Fallback für Safari */
    -webkit-backdrop-filter: blur(12px);
    /* Innenabstände */
    padding: 1.2rem 2.5rem;
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Leichter Schatten */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Dienstleistungskarten
   ============================================================================= */
body.light-mode .service-card,
body.light-mode .service-cards {
    /* Fast weißer Hintergrund mit leichter Transparenz */
    background: rgba(255, 255, 255, 0.9);
    /* Dunkle Textfarbe */
    color: #1a1a1a;
    /* Subtiler schwarzer Rahmen */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Überschriften in Karten
   ============================================================================= */
body.light-mode .service-card h3,
body.light-mode .service-cards h3 {
    /* Definiert einen neuen Farbverlauf (Dunkelblau, Lila, Pink) */
    background: linear-gradient(90deg, #0a3cff, #4d0099, #9d4edd);
    /* Beschränkt den Hintergrund auf den Textbereich */
    -webkit-background-clip: text;
    /* Macht den Text transparent */
    -webkit-text-fill-color: transparent;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Listenelemente
   ============================================================================= */
body.light-mode .service-card ul li,
body.light-mode .service-cards ul li,
body.light-mode .service-cards-content ul li {
    /* Dunkle Textfarbe */
    color: #1a1a1a;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für hervorgehobene Texte
   ============================================================================= */
body.light-mode .service-card ul li strong,
body.light-mode .service-cards ul li strong,
body.light-mode .service-cards-content ul li strong {
    /* Dunkelblaue Textfarbe */
    color: #0a3cff;
    /* Blau-Glow-Effekt */
    text-shadow: 0 2px 10px rgba(10, 60, 255, 0.25);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Unterstreichung
   ============================================================================= */
body.light-mode .service-card h3::after,
body.light-mode .service-cards h3::after {
    /* Dunkelblaue Linie */
    background: #0a3cff;
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Tablets (bis 1200px)
   ============================================================================= */
@media (max-width: 1200px) {
    /* Schriftgröße für Titel */
    .content-title { font-size: 3rem; }
    /* Schriftgröße für Fließtext */
    .content-text { font-size: 1.1rem; }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für kleinere Tablets (bis 992px)
   ============================================================================= */
@media (max-width: 992px) {
    /* Ändert das Grid-Layout auf eine Spalte */
    .service-grid, .service-center {
        grid-template-columns: 1fr;
    }
    /* Reduziert Innenabstände und abgerundete Ecken */
    .service-card, .service-cards {
        padding: 2rem;
        border-radius: 0 0 20px 20px;
    }
    /* Reduziert die Höhe von Bildern und Videos */
    .service-img, .service-video-container, .service-video-container video {
        height: 200px;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Mobilgeräte (bis 600px)
   ============================================================================= */
@media (max-width: 600px) {
    /* Reduziert die Höhe von Bildern und Videos weiter */
    .service-img, .service-video-container, .service-video-container video {
        height: 180px;
    }
    /* Reduziert Innenabstände und abgerundete Ecken */
    .service-card, .service-cards {
        padding: 1.5rem;
        border-radius: 0 0 15px 15px;
    }
    /* Erzwingt einen Abstand von 70px von oben für die Section */
    #services {
        margin-top: 70px !important;
    }
    /* Erzwingt einen Abstand von 70px von oben für die Überschrift */
    #services h2 {
        margin-top: 70px !important;
        /* Reduziert die Schriftgröße */
        font-size: 2.2rem;
    }
    /* Reduziert die Schriftgröße des Einleitungstexts */
    #services p.services-intro {
        font-size: 1.05rem;
    }
    /* Reduziert die Schriftgröße der Überschriften in den Karten */
    .service-card h3, .service-cards h3 {
        font-size: 1.4rem;
    }
    /* Reduziert die Schriftgröße der Listenelemente */
    .service-card ul li, .service-cards ul li, .service-cards-content ul li {
        font-size: 0.95rem;
    }
    /* Reduziert die Schriftgröße der hervorgehobenen Texte */
    .service-card ul li strong, .service-cards ul li strong, .service-cards-content ul li strong {
        font-size: 1rem;
    }
}

/* =============================================================================
   REFERENZEN – Hauptcontainer für die Referenzsektion
   ============================================================================= */
#references {
    /* Innenabstände: 8rem oben/unten, 2rem links/rechts */
    padding: 8rem 2rem;
    /* Maximale Breite von 1600px */
    max-width: 1600px;
    /* Zentriert den Container horizontal */
    margin: 0 auto;
    /* Erzwingt die Sichtbarkeit und Block-Darstellung */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =============================================================================
   REFERENZEN – Container für Referenzen-Inhalte
   ============================================================================= */
.references-container {
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
    /* Innenabstände: 0 oben, 2rem rechts, 4rem unten, 2rem links */
    padding: 0 2rem 4rem 2rem;
    /* Zentriert den Text */
    text-align: center;
    /* Mindesthöhe von 100% der Viewport-Höhe */
    min-height: 100vh;
}

/* =============================================================================
   REFERENZEN – Überschrift mit animiertem Farbverlauf und Kontur
   ============================================================================= */
.references-container h2 {
    /* Erzwingt einen Abstand von 60px von oben */
    margin-top: 60px !important;
    /* Schriftgröße von 60px */
    font-size: 60px !important;
    /* Erzwingt einen Abstand von 50px nach unten */
    margin-bottom: 50px !important;
    /* Zeilenhöhe von 1.2 */
    line-height: 1.2;
    /* Definiert einen horizontalen Farbverlauf (Rot, Gelb, Türkis, Lila, Pink, Blau) */
    background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);
    /* Beschränkt den Hintergrund auf den Textbereich */
    -webkit-background-clip: text;
    /* Macht den Text transparent */
    -webkit-text-fill-color: transparent;
    /* Vergrößert den Hintergrund für die Animation */
    background-size: 300% 300%;
    /* Wendet eine Animation auf den Hintergrund an */
    animation: textGradient 7s ease infinite;
    /* Fügt einen lila Umriss (Stroke) um den Text hinzu */
    -webkit-text-stroke: 1.5px #b08aff;
    /* Fallback für den Text-Umriss */
    text-stroke: 2.5px #000;
    /* Bestimmt die Reihenfolge des Zeichnens: zuerst der Umriss, dann die Füllung */
    paint-order: stroke fill;
    /* Mehrere Schatteneffekte für Glow und Tiefe (weißer Glow, dunkler Schatten, Türkis-, Lila-, Pink-, Blau-Glow) */
    text-shadow:
        1px 0 1px rgba(255,255,255,0.6),
        0 0 1px rgba(0,0,0,0.85),
        0 0 8px #00ffff,
        0 0 16px #00ffff,
        0 0 32px #b08aff,
        0 0 48px #ff6bcb,
        0 0 64px #0a3cff;
}

/* =============================================================================
   REFERENZEN – Einleitungstext mit Unschärfe-Effekt
   ============================================================================= */
.references-container p {
    /* Zentriert den Text */
    text-align: center;
    /* Schriftgröße von 1.1rem */
    font-size: 1.1rem;
    /* Abstand von 3rem nach unten */
    margin-bottom: 3rem;
    /* Weiße Textfarbe */
    color: white;
    /* Halbtransparenter schwarzer Hintergrund */
    background: rgba(0, 0, 0, 0.5);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(12px);
    /* Fallback für Safari */
    -webkit-backdrop-filter: blur(12px);
    /* Innenabstände */
    padding: 1.2rem 2.5rem;
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Maximale Breite von 1100px */
    max-width: 1100px;
    /* Zentriert den Container horizontal */
    margin-left: auto;
    margin-right: auto;
    /* Schatten für Tiefe */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    /* Subtiler weißer Rahmen */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   REFERENZEN – Referenzen-Box mit animiertem Rahmen
   ============================================================================= */
.references-box {
    /* Halbtransparenter dunkler Hintergrund */
    background: rgba(30, 30, 45, 0.7);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(15px);
    /* Innenabstände von 3rem */
    padding: 3rem;
    /* Abgerundete untere Ecken */
    border-radius: 0 0 25px 25px;
    /* Zentriert den Text */
    text-align: center;
    /* Ermöglicht sanfte Übergänge bei Hover-Effekten */
    transition: transform 0.4s ease;
    /* Weiße Textfarbe */
    color: white;
    /* Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* Transparenter Rahmen */
    border: 5px solid transparent;
    /* Ermöglicht die absolute Positionierung von Pseudo-Elementen */
    position: relative;
    /* Beschränkt den Hintergrund auf den Padding-Bereich */
    background-clip: padding-box;
    /* Maximale Breite von 1100px */
    max-width: 1100px;
    /* Zentriert die Box horizontal mit 4rem Abstand oben/unten */
    margin: 4rem auto;
}

/* =============================================================================
   REFERENZEN – Animierter Rahmen für die Referenzen-Box
   ============================================================================= */
.references-box::before {
    /* Erzeugt ein leeres Pseudo-Element */
    content: '';
    /* Positioniert das Element absolut */
    position: absolute;
    /* Positioniert das Element 5px außerhalb der Box */
    inset: -5px;
    /* Abgerundete Ecken */
    border-radius: 30px;
    /* Fester Rahmen mit 10px Breite */
    border: 10px solid;
    /* Definiert einen Farbverlauf als Rahmen */
    border-image: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff) 1;
    /* Teilt den Rahmen in 1 Segment */
    border-image-slice: 1;
    /* Vergrößert den Hintergrund für die Animation */
    background-size: 400% 400%;
    /* Wendet eine Animation auf den Rahmen an */
    animation: borderFlow 12s linear infinite;
    /* Positioniert den Rahmen hinter dem Inhalt */
    z-index: -1;
}

/* =============================================================================
   REFERENZEN – Hover-Effekt für die Referenzen-Box (Anhebung)
   ============================================================================= */
.references-box:hover {
    /* Hebt die Box um 15px nach oben an */
    transform: translateY(-15px);
}

/* =============================================================================
   REFERENZEN – Projektauswahl-Dropdown
   ============================================================================= */
.project-selector {
    /* Abstände: 3rem oben, auto links/rechts, 4rem unten */
    margin: 3rem auto 4rem;
    /* Maximale Breite von 90% der Viewport-Breite oder 500px */
    max-width: min(90%, 500px);
}

/* =============================================================================
   REFERENZEN – Dropdown-Container
   ============================================================================= */
.dropdown-wrapper {
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
    /* Inline-Block-Element */
    display: inline-block;
    /* Volle Breite des Eltern-Containers */
    width: 100%;
}

/* =============================================================================
   REFERENZEN – Dropdown-Button mit Farbverlauf
   ============================================================================= */
.dropdown-btn {
    /* Definiert einen Farbverlauf als Hintergrund (Dunkelblau, Blau, Weiß) */
    background: linear-gradient(135deg, #020b2d 0%, #0a3cff 55%, #ffffff 100%);
    /* Weiße Textfarbe */
    color: #FFF;
    /* Innenabstände: 1.2rem oben/unten, 2.5rem links/rechts */
    padding: 1.2rem 2.5rem;
    /* Entfernt den Standard-Rahmen */
    border: none;
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Zeigt an, dass der Button klickbar ist */
    cursor: pointer;
    /* Schriftgröße von 1.6rem */
    font-size: 1.6rem;
    /* Volle Breite des Eltern-Containers */
    width: 100%;
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
    /* Fettgedruckte Schrift */
    font-weight: 700;
    /* Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(10, 60, 255, 0.4);
    /* Ermöglicht sanfte Übergänge */
    transition: all 0.35s ease;
    /* Verbirgt überlaufende Inhalte */
    overflow: hidden;
    /* Aktiviert Flexbox für horizontale Ausrichtung */
    display: flex;
    /* Zentriert die Kind-Elemente vertikal */
    align-items: center;
    /* Verteilt die Kind-Elemente horizontal */
    justify-content: space-between;
    /* Mindesthöhe von 70px */
    min-height: 70px;
}

/* =============================================================================
   REFERENZEN – Text-Container im Dropdown-Button
   ============================================================================= */
.dropdown-btn .text-container {
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
    /* Volle Breite des Eltern-Containers */
    width: 100%;
    /* Aktiviert Flexbox */
    display: flex;
    /* Verteilt die Kind-Elemente horizontal */
    justify-content: space-between;
    /* Zentriert die Kind-Elemente vertikal */
    align-items: center;
    /* Ermöglicht sanfte Übergänge */
    transition: all 0.35s ease;
}

/* =============================================================================
   REFERENZEN – Text im Dropdown-Button
   ============================================================================= */
.dropdown-btn .text {
    /* Positioniert den Text absolut */
    position: absolute;
    /* Positioniert den Text 2rem vom linken Rand entfernt */
    left: 2rem;
    /* Ermöglicht sanfte Übergänge für die horizontale Position */
    transition: left 0.35s ease;
    /* Setzt eine hohe z-Index-Ebene */
    z-index: 2;
    /* Weiße Textfarbe */
    color: white;
}

/* =============================================================================
   REFERENZEN – Pfeil im Dropdown-Button
   ============================================================================= */
.dropdown-btn .arrow {
    /* Positioniert den Pfeil absolut */
    position: absolute;
    /* Positioniert den Pfeil 2rem vom rechten Rand entfernt */
    right: 2rem;
    /* Weiße Farbe */
    color: white;
    /* Ermöglicht sanfte Übergänge für die horizontale Position */
    transition: right 0.35s ease;
    /* Setzt eine hohe z-Index-Ebene */
    z-index: 2;
    /* Schriftgröße von 1.8rem */
    font-size: 1.8rem;
}

/* =============================================================================
   REFERENZEN – Hover-Effekt für Text im Dropdown-Button
   ============================================================================= */
.dropdown-btn:hover .text {
    /* Verschiebt den Text nach rechts */
    left: calc(100% - 140px);
}

/* =============================================================================
   REFERENZEN – Hover-Effekt für Pfeil im Dropdown-Button
   ============================================================================= */
.dropdown-btn:hover .arrow {
    /* Verschiebt den Pfeil nach links */
    right: calc(100% - 80px);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Text und Pfeil im Dropdown-Button
   ============================================================================= */
body.light-mode .dropdown-btn .text,
body.light-mode .dropdown-btn .arrow {
    /* Weiße Textfarbe */
    color: white !important;
}

/* =============================================================================
   REFERENZEN – Hintergrund des Dropdown-Buttons (erzwungen)
   ============================================================================= */
.dropdown-btn {
    /* Erzwingt einen Farbverlauf als Hintergrund */
    background: linear-gradient(135deg, #020b2d 0%, #0a3cff 55%, #ffffff 100%) !important;
}

/* =============================================================================
   REFERENZEN – Hover-Effekt für Dropdown-Button (Anhebung + Schatten)
   ============================================================================= */
.dropdown-btn:hover {
    /* Hebt den Button um 8px nach oben an */
    transform: translateY(-8px);
    /* Verstärkt den Schatten für mehr Tiefe */
    box-shadow: 0 25px 60px rgba(10, 60, 255, 0.55);
}

/* =============================================================================
   REFERENZEN – Dropdown-Inhalt (versteckt, wird per JavaScript angezeigt)
   ============================================================================= */
.dropdown-content {
    /* Verbirgt den Inhalt standardmäßig */
    display: none;
    /* Positioniert den Inhalt absolut unter dem Button */
    position: absolute;
    top: 100%;
    left: 0;
    /* Volle Breite des Eltern-Containers */
    width: 100%;
    /* Halbtransparenter dunkler Hintergrund */
    background: rgba(30, 30, 45, 0.9);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(15px);
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Abstand von 12px von oben */
    margin-top: 12px;
    /* Maximale Höhe von 420px */
    max-height: 420px;
    /* Ermöglicht vertikales Scrollen */
    overflow-y: auto;
    /* Setzt eine hohe z-Index-Ebene */
    z-index: 10;
    /* Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    /* Subtiler weißer Rahmen */
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* =============================================================================
   REFERENZEN – Anzeige des Dropdown-Inhalts (per JavaScript)
   ============================================================================= */
.dropdown-content.show {
    /* Zeigt den Inhalt an */
    display: block;
}

/* =============================================================================
   REFERENZEN – Einzelne Dropdown-Elemente
   ============================================================================= */
.dropdown-item {
    /* Innenabstände: 1.2rem oben/unten, 2rem links/rechts */
    padding: 1.2rem 2rem;
    /* Weiße Textfarbe */
    color: white;
    /* Zeigt an, dass das Element klickbar ist */
    cursor: pointer;
    /* Ermöglicht sanfte Übergänge für den Hintergrund */
    transition: background 0.3s ease;
    /* Subtiler weißer unterer Rahmen */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Schriftgröße von 1.1rem */
    font-size: 1.1rem;
}

/* =============================================================================
   REFERENZEN – Hover-Effekt für Dropdown-Elemente
   ============================================================================= */
.dropdown-item:hover {
    /* Halbtransparenter türkisfarbener Hintergrund */
    background: rgba(0, 255, 255, 0.12);
}

/* =============================================================================
   REFERENZEN – Letztes Dropdown-Element (ohne unteren Rahmen)
   ============================================================================= */
.dropdown-item:last-child {
    /* Entfernt den unteren Rahmen */
    border-bottom: none;
}

/* =============================================================================
   REFERENZEN – Projekt-Anzeige (Titel und Beschreibung)
   ============================================================================= */
.project-display {
    /* Weiße Textfarbe */
    color: white;
    /* Zentriert den Text */
    text-align: center;
    /* Abstand von 3rem von oben */
    margin-top: 3rem;
    /* Maximale Breite von 1100px */
    max-width: 1100px;
    /* Zentriert den Container horizontal */
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================================
   REFERENZEN – Titel des ausgewählten Projekts
   ============================================================================= */
#selectedProject {
    /* Schriftgröße von 2rem */
    font-size: 2rem;
    /* Abstand von 1.5rem nach unten */
    margin-bottom: 1.5rem;
    /* Fettgedruckte Schrift */
    font-weight: 700;
    /* Definiert einen horizontalen Farbverlauf als Hintergrund */
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff);
    /* Beschränkt den Hintergrund auf den Textbereich */
    -webkit-background-clip: text;
    /* Macht den Text transparent */
    -webkit-text-fill-color: transparent;
}

/* =============================================================================
   REFERENZEN – Beschreibung des ausgewählten Projekts
   ============================================================================= */
#projectDesc {
    /* Schriftgröße von 1.1rem */
    font-size: 1.1rem;
    /* Zeilenhöhe von 1.8 für bessere Lesbarkeit */
    line-height: 1.8;
    /* Maximale Breite von 1100px */
    max-width: 1100px;
    /* Zentriert den Container horizontal mit 3rem Abstand nach unten */
    margin: 0 auto 3rem;
    /* Schwarze Textfarbe (wird im Dark-Mode überschrieben) */
    color: #000000 !important;
    /* Entfernt den Textschatten */
    text-shadow: none !important;
}

/* =============================================================================
   DARK MODE – Textfarbe für Projekt-Beschreibung und Titel
   ============================================================================= */
#projectDesc,
#selectedProject {
    /* Weiße Textfarbe im Dark-Mode */
    color: white !important;
}

/* =============================================================================
   LIGHT MODE – Textfarbe für Projekt-Beschreibung und Titel
   ============================================================================= */
body.light-mode #projectDesc,
body.light-mode #selectedProject {
    /* Schwarze Textfarbe im Light-Mode */
    color: #000000 !important;
    /* Entfernt den Textschatten */
    text-shadow: none !important;
}

/* =============================================================================
   REFERENZEN – Galerie (versteckt, wird per JavaScript angezeigt)
   ============================================================================= */
.gallery {
    /* Verbirgt die Galerie standardmäßig */
    display: none;
    /* Maximale Breite von 100% des Eltern-Containers */
    max-width: 100%;
    /* Zentriert die Galerie horizontal */
    margin: 0 auto;
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
}

/* =============================================================================
   REFERENZEN – Aktive Galerie (per JavaScript)
   ============================================================================= */
.gallery.active {
    /* Zeigt die Galerie an */
    display: block;
}

/* =============================================================================
   REFERENZEN – Medien-Container der Galerie
   ============================================================================= */
#galleryMedia {
    /* Volle Breite des Eltern-Containers */
    width: 100%;
    /* Feste Höhe von 480px */
    height: 480px;
    /* Verbirgt überlaufende Inhalte */
    overflow: hidden;
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Abstand von 2.5rem nach unten */
    margin-bottom: 2.5rem;
    /* Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    /* Halbtransparenter dunkler Hintergrund */
    background: rgba(30, 30, 45, 0.6);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(8px);
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
    /* Subtiler weißer Rahmen */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   REFERENZEN – Medien-Container in der Galerie
   ============================================================================= */
.gallery-media-container {
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
    /* Volle Breite und Höhe des Eltern-Containers */
    width: 100%;
    height: 100%;
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Verbirgt überlaufende Inhalte */
    overflow: hidden;
}

/* =============================================================================
   REFERENZEN – Medien-Wrapper in der Galerie
   ============================================================================= */
.gallery-media-wrapper {
    /* Ermöglicht die absolute Positionierung von Kind-Elementen */
    position: relative;
    /* Volle Breite und Höhe des Eltern-Containers */
    width: 100%;
    height: 100%;
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Verbirgt überlaufende Inhalte */
    overflow: hidden;
}

/* =============================================================================
   REFERENZEN – Medien (Videos und Bilder) in der Galerie
   ============================================================================= */
.gallery-media-wrapper video,
.gallery-media-wrapper img {
    /* Volle Breite und Höhe des Wrappers */
    width: 100%;
    height: 100%;
    /* Medien werden proportional skaliert, um vollständig angezeigt zu werden */
    object-fit: contain;
    /* Abgerundete Ecken */
    border-radius: 20px;
    /* Block-Element für bessere Kontrolle */
    display: block;
    /* Verhindert Mausinteraktionen mit den Medien */
    pointer-events: none;
}

/* =============================================================================
   REFERENZEN – Farbverlauf am unteren Rand der Medien
   ============================================================================= */
.gallery-media-wrapper::after {
    /* Erzeugt ein leeres Pseudo-Element */
    content: '';
    /* Positioniert das Element absolut */
    position: absolute;
    /* Platziert das Element unten links */
    bottom: 0;
    left: 0;
    /* Volle Breite des Wrappers */
    width: 100%;
    /* Höhe von 35% des Wrappers */
    height: 35%;
    /* Definiert einen vertikalen Farbverlauf von transparentem Schwarz nach vollständig transparent */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0) 70%);
    /* Verhindert Interaktion mit dem Pseudo-Element */
    pointer-events: none;
    /* Setzt eine z-Index-Ebene */
    z-index: 1;
    /* Abgerundete untere Ecken */
    border-radius: 0 0 20px 20px;
}

/* =============================================================================
   REFERENZEN – Navigation in der Galerie
   ============================================================================= */
.gallery-navigation {
    /* Positioniert die Navigation absolut */
    position: absolute;
    /* Positioniert die Navigation vertikal in der Mitte */
    top: 50%;
    /* Volle Breite des Eltern-Containers */
    width: 100%;
    /* Aktiviert Flexbox für horizontale Ausrichtung */
    display: flex;
    /* Verteilt die Navigationselemente horizontal */
    justify-content: space-between;
    /* Zentriert die Navigation vertikal */
    transform: translateY(-50%);
    /* Verhindert Mausinteraktionen mit der Navigation selbst */
    pointer-events: none;
    /* Setzt eine hohe z-Index-Ebene */
    z-index: 10;
}

/* =============================================================================
   REFERENZEN – Buttons in der Galerie-Navigation
   ============================================================================= */
.gallery-navigation button {
    /* Ermöglicht Mausinteraktionen mit den Buttons */
    pointer-events: auto;
    /* Halbtransparenter schwarzer Hintergrund */
    background: rgba(0, 0, 0, 0.6);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(8px);
    /* Weiße Textfarbe */
    color: white;
    /* Entfernt den Standard-Rahmen */
    border: none;
    /* Innenabstände: 14px oben/unten, 18px links/rechts */
    padding: 14px 18px;
    /* Abgerundete Ecken für kreisförmige Buttons */
    border-radius: 50%;
    /* Zeigt an, dass der Button klickbar ist */
    cursor: pointer;
    /* Schriftgröße von 24px */
    font-size: 24px;
    /* Außenabstände: 0 oben/unten, 25px links/rechts */
    margin: 0 25px;
    /* Schatten für Tiefe */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    /* Ermöglicht sanfte Übergänge */
    transition: all 0.3s ease;
}

/* =============================================================================
   REFERENZEN – Hover-Effekt für Buttons in der Galerie-Navigation
   ============================================================================= */
.gallery-navigation button:hover {
    /* Halbtransparenter türkisfarbener Hintergrund */
    background: rgba(0, 255, 255, 0.35);
    /* Skaliert den Button um 15% nach oben */
    transform: scale(1.15);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Referenzen-Box
   ============================================================================= */
body.light-mode .references-box {
    /* Fast weißer Hintergrund mit leichter Transparenz */
    background: rgba(255, 255, 255, 0.88);
    /* Dunkle Textfarbe */
    color: #1a1a1a;
    /* Subtiler schwarzer Rahmen */
    border: 1px solid rgba(0, 0, 0, 0.12);
    /* Leichter Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für die Referenzen-Box
   ============================================================================= */
body.light-mode .references-box:hover {
    /* Hebt die Box um 15px nach oben an */
    transform: translateY(-15px);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Dropdown-Inhalt
   ============================================================================= */
body.light-mode .dropdown-content {
    /* Fast weißer Hintergrund mit leichter Transparenz */
    background: rgba(255, 255, 255, 0.92);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(15px);
    /* Subtiler schwarzer Rahmen */
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* Leichter Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Dropdown-Elemente
   ============================================================================= */
body.light-mode .dropdown-item {
    /* Dunkle Textfarbe */
    color: #1a1a1a;
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für Dropdown-Elemente
   ============================================================================= */
body.light-mode .dropdown-item:hover {
    /* Halbtransparenter blau-türkisfarbener Hintergrund */
    background: rgba(10, 60, 255, 0.12);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Galerie-Medien
   ============================================================================= */
body.light-mode #galleryMedia {
    /* Fast weißer Hintergrund mit leichter Transparenz */
    background: rgba(240, 240, 255, 0.7);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(10px);
    /* Subtiler schwarzer Rahmen */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Leichter Schatten für Tiefe */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Tablets (bis 1200px)
   ============================================================================= */
@media (max-width: 1200px) {
    /* Reduziert die Innenabstände der Referenzen-Box */
    .references-box {
        padding: 2.5rem;
    }
    /* Reduziert die Höhe der Galerie-Medien */
    #galleryMedia {
        height: 420px;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für kleinere Tablets (bis 992px)
   ============================================================================= */
@media (max-width: 992px) {
    /* Reduziert die Innenabstände und abgerundete Ecken der Referenzen-Box */
    .references-box {
        padding: 2rem;
        border-radius: 0 0 20px 20px;
    }
    /* Reduziert die Höhe der Galerie-Medien weiter */
    #galleryMedia {
        height: 360px;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Mobilgeräte (bis 600px)
   ============================================================================= */
@media (max-width: 600px) {
    /* Reduziert die Innenabstände der Referenzsektion */
    #references {
        padding: 5rem 1rem;
    }
    /* Reduziert die Innenabstände des Referenzen-Containers */
    .references-container {
        padding: 2rem 1rem;
    }
    /* Reduziert die Innenabstände und abgerundete Ecken der Referenzen-Box */
    .references-box {
        padding: 1.8rem;
        border-radius: 0 0 18px 18px;
    }
    /* Reduziert die Innenabstände und Schriftgröße des Dropdown-Buttons */
    .dropdown-btn {
        padding: 1rem 1.8rem;
        font-size: 1.4rem;
        min-height: 60px;
    }
    /* Reduziert die Höhe der Galerie-Medien */
    #galleryMedia {
        height: 280px;
    }
    /* Reduziert die Größe der Navigationsbuttons in der Galerie */
    .gallery-navigation button {
        padding: 10px 14px;
        font-size: 20px;
        margin: 0 12px;
    }
    /* Reduziert die Schriftgröße des ausgewählten Projekts */
    #selectedProject {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        font-weight: 300;
        /* Definiert einen Farbverlauf als Hintergrund */
        background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff);
        /* Beschränkt den Hintergrund auf den Textbereich */
        -webkit-background-clip: text;
        /* Macht den Text transparent */
        -webkit-text-fill-color: transparent;
    }
}

/* =============================================================================
   RESPONSIVE – Schriftgrößen für Referenzen (skalierend)
   ============================================================================= */
.references-container h2 {
    /* Responsive Schriftgröße (mindestens 2.2rem, maximal 3.4rem, dazwischen 6.5vw) */
    font-size: clamp(2.2rem, 6.5vw, 3.4rem);
}

.references-container p {
    /* Responsive Schriftgröße (mindestens 1.05rem, maximal 1.4rem, dazwischen 3.5vw) */
    font-size: clamp(1.05rem, 3.5vw, 1.4rem);
    line-height: 1.55;
}

.dropdown-btn {
    /* Responsive Schriftgröße (mindestens 1.35rem, maximal 2rem, dazwischen 5vw) */
    font-size: clamp(1.35rem, 5vw, 2rem);
    /* Responsive Innenabstände (mindestens 1.1rem, maximal 1.5rem, dazwischen 3.5vw) */
    padding: clamp(1.1rem, 3.5vw, 1.5rem) clamp(1.8rem, 5vw, 3rem);
    /* Responsive Mindesthöhe (mindestens 64px, maximal 84px, dazwischen 13vw) */
    min-height: clamp(64px, 13vw, 84px);
}

.dropdown-btn .arrow {
    /* Responsive Schriftgröße (mindestens 1.5rem, maximal 2.2rem, dazwischen 5.5vw) */
    font-size: clamp(1.5rem, 5.5vw, 2.2rem);
}

.project-display {
    /* Responsive Schriftgröße (mindestens 1.1rem, maximal 1.45rem, dazwischen 3.8vw) */
    font-size: clamp(1.1rem, 3.8vw, 1.45rem);
    line-height: 1.6;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Überschrift der Referenzen
   ============================================================================= */
body.light-mode .references-container h2 {
    /* Erzwingt einen Abstand von 60px von oben */
    margin-top: 60px !important;
    /* Schriftgröße von 60px */
    font-size: 60px !important;
    /* Erzwingt einen Abstand von 50px nach unten */
    margin-bottom: 50px !important;
    /* Zeilenhöhe von 1.2 */
    line-height: 1.2;
    /* Definiert einen Farbverlauf als Hintergrund */
    background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);
    /* Beschränkt den Hintergrund auf den Textbereich */
    -webkit-background-clip: text;
    /* Macht den Text transparent */
    -webkit-text-fill-color: transparent;
    /* Vergrößert den Hintergrund für die Animation */
    background-size: 300% 300%;
    /* Wendet eine Animation auf den Hintergrund an */
    animation: textGradient 7s ease infinite;
    /* Fügt einen lila Umriss um den Text hinzu */
    -webkit-text-stroke: 1.5px #b08aff;
    /* Fallback für den Text-Umriss */
    text-stroke: 2.5px #000;
    /* Bestimmt die Reihenfolge des Zeichnens */
    paint-order: stroke fill;
    /* Mehrere Schatteneffekte für Glow und Tiefe */
    text-shadow:
        1px 0 1px rgba(255,255,255,0.6),
        0 0 1px rgba(0,0,0,0.85),
        0 0 8px #00ffff,
        0 0 16px #00ffff,
        0 0 32px #b08aff,
        0 0 48px #ff6bcb,
        0 0 64px #0a3cff;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Einleitungstext der Referenzen
   ============================================================================= */
body.light-mode .references-container p {
    /* Dunkle Textfarbe */
    color: #1e293b;
    /* Halbtransparenter weißer Hintergrund */
    background: rgba(255, 255, 255, 0.8);
    /* Wendet einen Unschärfe-Filter an */
    backdrop-filter: blur(14px);
    /* Subtiler blauer Rahmen */
    border: 1px solid rgba(59, 130, 246, 0.16);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Dropdown-Button
   ============================================================================= */
body.light-mode .dropdown-btn {
    /* Definiert einen neuen Farbverlauf (Hellblau, Lila, Blau) */
    background: linear-gradient(135deg, #e0f2fe 0%, #c7d2fe 50%, #a5b4fc 100%) !important;
    /* Dunkelblaue Textfarbe */
    color: #1e40af;
    /* Schatten für Tiefe */
    box-shadow: 0 18px 55px rgba(59, 130, 246, 0.26);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Text und Pfeil im Dropdown-Button
   ============================================================================= */
body.light-mode .dropdown-btn .text,
body.light-mode .dropdown-btn .arrow {
    /* Dunkelblaue Textfarbe */
    color: #1e40af !important;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Projekt-Anzeige
   ============================================================================= */
body.light-mode .project-display {
    /* Dunkle Textfarbe */
    color: #1e293b;
}

/* =============================================================================
   RESPONSIVE – Anpassungen für sehr kleine Mobilgeräte (bis 480px)
   ============================================================================= */
@media (max-width: 480px) {
    /* Reduziert die Schriftgröße der Überschrift */
    .references-container h2 {
        font-size: 2.5rem !important;
        /* Erzwingt einen Abstand von 110px von oben */
        margin-top: 110px !important;
        /* Zentriert den Text */
        text-align: center;
        /* Erzwingt einen Abstand von 50px nach unten */
        margin-bottom: 50px !important;
    }

    /* Überschreibt die Light-Mode-Anpassungen für die Überschrift */
    body.light-mode .references-container h2 {
        font-size: 2.5rem !important;
        margin-top: 110px !important;
        text-align: center;
        margin-bottom: 50px !important;
    }

    /* Reduziert die Innenabstände und Schriftgröße des Einleitungstexts */
    .references-container p {
        font-size: clamp(1rem, 4.2vw, 1.2rem);
        padding: 1rem 1.8rem;
    }

    /* Reduziert die Innenabstände und Schriftgröße des Dropdown-Buttons */
    .dropdown-btn {
        font-size: clamp(1.2rem, 5.5vw, 1.6rem);
        padding: 0.95rem 1.8rem;
        min-height: 60px;
    }

    /* Reduziert die Schriftgröße des Pfeils im Dropdown-Button */
    .dropdown-btn .arrow {
        font-size: clamp(1.4rem, 6vw, 1.9rem);
    }

    /* Reduziert die Schriftgröße und Abstände der Projekt-Anzeige */
    .project-display {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
        margin: 1.8rem auto 3.5rem;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für extrem kleine Mobilgeräte (bis 360px)
   ============================================================================= */
@media (max-width: 360px) {
    /* Reduziert die Schriftgröße der Überschrift weiter */
    .references-container h2 {
        font-size: clamp(1.8rem, 8.5vw, 2.4rem);
    }

    /* Reduziert die Schriftgröße des Dropdown-Buttons */
    .dropdown-btn {
        font-size: clamp(1.1rem, 6vw, 1.4rem);
    }

    /* Reduziert die Schriftgröße der Projekt-Anzeige */
    .project-display {
        font-size: clamp(0.98rem, 5vw, 1.1rem);
    }
}