/*made by www.ClaxDesign.com*/

/* ========================================
   SECTION: "Unsere Dienste" – Überschrift und Grundlayout
   ========================================
   Hier definiere ich die Haupt-Section für die Dienstleistungen.
   - position: relative;: Ermöglicht absolute Positionierung von Kind-Elementen innerhalb dieser Section.
   - padding: 6rem 2rem;: Großzügige Innenabstände oben/unten (6rem) und links/rechts (2rem).
   - text-align: center;: Zentriert den Text innerhalb dieser Section.
   - margin-top: 60px !important;: Erzwingt einen Abstand von 60px von oben, unabhängig von anderen Stilen.
   ======================================== */
#services {
    position: relative;
    padding: 6rem 2rem;
    text-align: center;
    margin-top: 60px !important;
}

/* ========================================
   Überschrift "Unsere Dienste" – Stildefinition
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die Hauptüberschrift der Dienstleistungen.
   - margin-top: 10px !important;: Erzwingt einen Abstand von 10px von oben.
   - font-size: 60px !important;: Erzwingt eine Schriftgröße von 60px.
   - margin-bottom: 50px !important;: Erzwingt einen Abstand von 50px nach unten.
   - line-height: 1.2;: Zeilenhöhe von 1.2 für bessere Lesbarkeit.
   - text-align: center;: Zentriert den Text.
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund für den Text (Rot, Gelb, Türkis, Lila, Pink, Blau).
   - -webkit-background-clip: text;: Beschränkt den Hintergrund auf den Textbereich.
   - -webkit-text-fill-color: transparent;: Macht den Text transparent, sodass der Farbverlauf sichtbar wird.
   - background-size: 300% 300%;: Vergrößert den Hintergrund, um den Animationsbereich zu definieren.
   - animation: textGradient 7s ease infinite;: Wendet eine Animation auf den Hintergrund an, die den Farbverlauf bewegt.
   - -webkit-text-stroke: 1.5px #b08aff;: Fügt einen farbigen Umriss (Stroke) um den Text hinzu (Lila).
   - text-stroke: 2.5px #000;: Fallback für den Text-Umriss.
   - paint-order: stroke fill;: Bestimmt die Reihenfolge des Zeichnens: zuerst der Umriss, dann die Füllung.
   - text-shadow: Mehrere Schatteneffekte für Glow- und Tiefeneffekte (weißer Glow, dunkler Schatten, Türkis-, Lila-, Pink- und Blau-Glow).
   ======================================== */
#services h2 {
    margin-top: 10px !important;
    font-size: 60px !important;
    margin-bottom: 50px !important;
    line-height: 1.2;
    text-align: center;
    background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: textGradient 7s ease infinite;
    -webkit-text-stroke: 1.5px #b08aff;
    text-stroke: 2.5px #000;
    paint-order: stroke fill;
    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;
}

/* ========================================
   Animation für den Farbverlauf des Textes
   ========================================
   Hier definiere ich die Keyframes für die Animation des Farbverlaufs.
   - 0%: Startposition des Farbverlaufs (0% 50%).
   - 50%: Mittlere Position des Farbverlaufs (100% 50%).
   - 100%: Endposition des Farbverlaufs (0% 50%).
   ======================================== */
@keyframes textGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========================================
   Einleitungstext für Dienstleistungen
   ========================================
   Hier definiere ich die Stil-Eigenschaften für den Einleitungstext der Dienstleistungen.
   - text-align: center;: Zentriert den Text.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem.
   - margin-bottom: 3rem;: Abstand von 3rem nach unten.
   - color: white;: Weiße Textfarbe.
   - background: rgba(0, 0, 0, 0.5);: Halbtransparenter schwarzer Hintergrund.
   - backdrop-filter: blur(12px);: Unschärfe-Effekt für den Hintergrund.
   - -webkit-backdrop-filter: blur(12px);: Fallback für den Unschärfe-Effekt.
   - padding: 1.2rem 2.5rem;: Innenabstände für bessere Lesbarkeit.
   - border-radius: 20px;: Abgerundete Ecken.
   - max-width: 100%;: Maximale Breite von 100% des Eltern-Containers.
   - margin-left: auto; margin-right: auto;: Zentriert den Container horizontal.
   - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);: Schatten für Tiefe.
   - border: 1px solid rgba(255, 255, 255, 0.08);: Subtiler weißer Rahmen.
   ======================================== */
#services p.services-intro {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 3rem;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.2rem 2.5rem;
    border-radius: 20px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

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

/* ========================================
   Service-Karten – Stildefinition
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die einzelnen Dienstleistungskarten.
   - background: rgba(30, 30, 45, 0.7);: Halbtransparenter dunkler Hintergrund.
   - backdrop-filter: blur(15px);: Unschärfe-Effekt für den Hintergrund.
   - padding: 3rem;: Innenabstände für bessere Lesbarkeit.
   - border-radius: 0 0 25px 25px;: Abgerundete untere Ecken.
   - text-align: center;: Zentriert den Text.
   - transition: transform 0.4s ease;: Sanfte Transformations-Animation für Hover-Effekte.
   - color: white;: Weiße Textfarbe.
   - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);: Schatten für Tiefe.
   - border: 5px solid transparent;: Transparenter Rahmen für spätere Effekte.
   - position: relative;: Ermöglicht absolute Positionierung von Pseudo-Elementen.
   - background-clip: padding-box;: Beschränkt den Hintergrund auf den Padding-Bereich.
   ======================================== */
.service-card {
    background: rgba(30, 30, 45, 0.7);
    backdrop-filter: blur(15px);
    padding: 3rem;
    border-radius: 0 0 25px 25px;
    text-align: center;
    transition: transform 0.4s ease;
    color: white;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border: 5px solid transparent;
    position: relative;
    background-clip: padding-box;
}

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

/* ========================================
   Animation für den Rahmen der Service-Karten
   ========================================
   Hier definiere ich die Keyframes für die Animation des Rahmens.
   - 0%: Startposition des Farbverlaufs (0% 50%).
   - 50%: Mittlere Position des Farbverlaufs (100% 50%).
   - 100%: Endposition des Farbverlaufs (0% 50%).
   ======================================== */
@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========================================
   Hover-Effekt für Service-Karten
   ========================================
   Hier definiere ich den Hover-Effekt für die Service-Karten.
   - transform: translateY(-15px);: Hebt die Karte um 15px nach oben an.
   ======================================== */
.service-card:hover {
    transform: translateY(-15px);
}

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

/* ========================================
   Dekoratives Pseudo-Element unter der Überschrift in den Service-Karten
   ========================================
   Hier füge ich eine Linie unter der Überschrift hinzu.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut.
   - bottom: 0; left: 0;: Platziert es unten links.
   - width: 100%;: Volle Breite.
   - height: 3px;: Höhe von 3px.
   - background: linear-gradient(...);: Farbverlauf als Hintergrund (Türkis, Lila).
   - transform-origin: left;: Setzt den Ursprung der Transformation auf links.
   ======================================== */
.service-card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00ffff, #b08aff);
    transform-origin: left;
}

/* ========================================
   Listen in den Service-Karten
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die Listen in den Service-Karten.
   - text-align: left;: Linksbündiger Text.
   - padding-left: 1.5rem;: Linker Innenabstand.
   - line-height: 1.8;: Zeilenhöhe für bessere Lesbarkeit.
   - margin: 0; padding: 0;: Entfernt Standard-Abstände.
   - list-style: none;: Entfernt die Standard-Aufzählungszeichen.
   ======================================== */
.service-card ul {
    text-align: left;
    padding-left: 1.5rem;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ========================================
   Listenelemente in den Service-Karten
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die Listenelemente in den Service-Karten.
   - color: white;: Weiße Textfarbe.
   - margin-bottom: 0.5rem;: Abstand nach unten.
   - padding-left: 1rem;: Linker Innenabstand.
   - position: relative;: Ermöglicht absolute Positionierung von Pseudo-Elementen.
   - font-size: 1.05rem;: Schriftgröße von 1.05rem.
   ======================================== */
.service-card ul li {
    color: white;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
    font-size: 1.05rem;
}

/* ========================================
   Hervorgehobener Text in den Listenelementen
   ========================================
   Hier definiere ich die Stil-Eigenschaften für hervorgehobene Texte in den Listenelementen.
   - color: #00ffff;: Türkisfarbener Text.
   - font-weight: 700;: Fettgedruckte Schrift.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem.
   - text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);: Türkisfarbener Glow-Effekt.
   ======================================== */
.service-card ul li strong {
    color: #00ffff;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* ========================================
   Aufzählungszeichen für Listenelemente
   ========================================
   Hier füge ich ein Aufzählungszeichen vor jedem Listenelement hinzu.
   - content: "•";: Definiert das Aufzählungszeichen als Punkt.
   - color: #00ffff;: Türkisfarbene Farbe für das Aufzählungszeichen.
   - position: absolute;: Positioniert das Aufzählungszeichen absolut.
   - left: 0;: Platziert es ganz links.
   ======================================== */
.service-card ul li::before {
    content: "•";
    color: #00ffff;
    position: absolute;
    left: 0;
}

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

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

/* ========================================
   Zentrale Service-Karten – Stildefinition
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die zentralen Service-Karten.
   - background: rgba(30, 30, 45, 0.7);: Halbtransparenter dunkler Hintergrund.
   - backdrop-filter: blur(15px);: Unschärfe-Effekt für den Hintergrund.
   - padding: 3rem;: Innenabstände für bessere Lesbarkeit.
   - border-radius: 0 0 25px 25px;: Abgerundete untere Ecken.
   - text-align: center;: Zentriert den Text.
   - transition: transform 0.4s ease;: Sanfte Transformations-Animation für Hover-Effekte.
   - color: white;: Weiße Textfarbe.
   - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);: Schatten für Tiefe.
   - border: 5px solid transparent;: Transparenter Rahmen für spätere Effekte.
   - grid-column: span 2;: Spannt die Karte über zwei Spalten.
   - position: relative;: Ermöglicht absolute Positionierung von Pseudo-Elementen.
   - background-clip: padding-box;: Beschränkt den Hintergrund auf den Padding-Bereich.
   ======================================== */
.service-cards {
    background: rgba(30, 30, 45, 0.7);
    backdrop-filter: blur(15px);
    padding: 3rem;
    border-radius: 0 0 25px 25px;
    text-align: center;
    transition: transform 0.4s ease;
    color: white;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border: 5px solid transparent;
    grid-column: span 2;
    position: relative;
    background-clip: padding-box;
}

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

/* ========================================
   Hover-Effekt für zentrale Service-Karten
   ========================================
   Hier definiere ich den Hover-Effekt für die zentralen Service-Karten.
   - transform: translateY(-15px);: Hebt die Karte um 15px nach oben an.
   ======================================== */
.service-cards:hover {
    transform: translateY(-15px);
}

/* ========================================
   Überschrift in den zentralen Service-Karten
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die Überschriften in den zentralen Service-Karten.
   - margin: 1.5rem 0 1rem;: Abstände oben/unten.
   - font-size: 1.6rem;: Schriftgröße von 1.6rem.
   - background: linear-gradient(...);: Farbverlauf als Hintergrund (Türkis, Lila, Pink).
   - -webkit-background-clip: text;: Beschränkt den Hintergrund auf den Textbereich.
   - -webkit-text-fill-color: transparent;: Macht den Text transparent, sodass der Farbverlauf sichtbar wird.
   - position: relative;: Ermöglicht absolute Positionierung von Pseudo-Elementen.
   - padding-bottom: 1rem;: Abstand unten für das Pseudo-Element.
   - font-weight: 800;: Sehr fettgedruckte Schrift.
   ======================================== */
.service-cards h3 {
    margin: 1.5rem 0 1rem;
    font-size: 1.6rem;
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding-bottom: 1rem;
    font-weight: 800;
}

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

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

/* ========================================
   Listen in den zentralen Service-Karten
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die Listen in den zentralen Service-Karten.
   - text-align: left;: Linksbündiger Text.
   - padding: 0; margin: 0;: Entfernt Standard-Abstände.
   - list-style: none;: Entfernt die Standard-Aufzählungszeichen.
   ======================================== */
.service-cards-content ul {
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ========================================
   Listenelemente in den zentralen Service-Karten
   ========================================
   Hier definiere ich die Stil-Eigenschaften für die Listenelemente in den zentralen Service-Karten.
   - color: white;: Weiße Textfarbe.
   - margin-bottom: 0.5rem;: Abstand nach unten.
   - padding-left: 1rem;: Linker Innenabstand.
   - position: relative;: Ermöglicht absolute Positionierung von Pseudo-Elementen.
   ======================================== */
.service-cards-content ul li {
    color: white;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

/* ========================================
   Aufzählungszeichen für Listenelemente in den zentralen Service-Karten
   ========================================
   Hier füge ich ein Aufzählungszeichen vor jedem Listenelement hinzu.
   - content: "•";: Definiert das Aufzählungszeichen als Punkt.
   - color: #00ffff;: Türkisfarbene Farbe für das Aufzählungszeichen.
   - position: absolute;: Positioniert das Aufzählungszeichen absolut.
   - left: 0;: Platziert es ganz links.
   ======================================== */
.service-cards-content ul li::before {
    content: "•";
    color: #00ffff;
    position: absolute;
    left: 0;
}

/* ========================================
   Hervorgehobener Text in den Listenelementen der zentralen Service-Karten
   ========================================
   Hier definiere ich die Stil-Eigenschaften für hervorgehobene Texte in den Listenelementen.
   - color: #00ffff;: Türkisfarbener Text.
   - font-weight: 700;: Fettgedruckte Schrift.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem.
   - text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);: Türkisfarbener Glow-Effekt.
   ======================================== */
.service-cards-content ul li strong {
    color: #00ffff;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

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

/* ========================================
   Video-Element im Video-Container
   ========================================
   Hier definiere ich die Stil-Eigenschaften für das Video-Element.
   - width: 100%; height: 100%;: Füllt den Container vollständig aus.
   - object-fit: cover;: Videos werden beschnitten, um den Container zu füllen.
   - border-radius: 15px;: Abgerundete Ecken.
   - display: block;: Block-Element für bessere Kontrolle.
   ======================================== */
.service-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

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

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

/* ========================================
   Light-Mode: Anpassungen für die Überschrift "Unsere Dienste"
   ========================================
   Hier überschreibe ich die Stil-Eigenschaften für die Überschrift im Light-Mode.
   - margin-top: 10px !important;: Erzwingt einen Abstand von 10px von oben.
   - font-size: 60px !important;: Erzwingt eine Schriftgröße von 60px.
   - margin-bottom: 50px !important;: Erzwingt einen Abstand von 50px nach unten.
   - line-height: 1.2;: Zeilenhöhe von 1.2 für bessere Lesbarkeit.
   - text-align: center;: Zentriert den Text.
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund für den Text.
   - -webkit-background-clip: text;: Beschränkt den Hintergrund auf den Textbereich.
   - -webkit-text-fill-color: transparent;: Macht den Text transparent, sodass der Farbverlauf sichtbar wird.
   - background-size: 300% 300%;: Vergrößert den Hintergrund, um den Animationsbereich zu definieren.
   - animation: textGradient 7s ease infinite;: Wendet eine Animation auf den Hintergrund an.
   - -webkit-text-stroke: 1.5px #b08aff;: Fügt einen farbigen Umriss (Stroke) um den Text hinzu.
   - text-stroke: 2.5px #000;: Fallback für den Text-Umriss.
   - paint-order: stroke fill;: Bestimmt die Reihenfolge des Zeichnens: zuerst der Umriss, dann die Füllung.
   - text-shadow: Mehrere Schatteneffekte für Glow- und Tiefeneffekte.
   ======================================== */
body.light-mode #services h2 {
    margin-top: 10px !important;
    font-size: 60px !important;
    margin-bottom: 50px !important;
    line-height: 1.2;
    text-align: center;
    background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: textGradient 7s ease infinite;
    -webkit-text-stroke: 1.5px #b08aff;
    text-stroke: 2.5px #000;
    paint-order: stroke fill;
    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
   ========================================
   Hier überschreibe ich die Stil-Eigenschaften für den Einleitungstext im Light-Mode.
   - color: #333333 !important;: Dunkle Textfarbe.
   - background: rgba(255, 255, 255, 0.7);: Halbtransparenter weißer Hintergrund.
   - backdrop-filter: blur(12px);: Unschärfe-Effekt für den Hintergrund.
   - -webkit-backdrop-filter: blur(12px);: Fallback für den Unschärfe-Effekt.
   - padding: 1.2rem 2.5rem;: Innenabstände für bessere Lesbarkeit.
   - border-radius: 20px;: Abgerundete Ecken.
   - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);: Leichter Schatten für Tiefe.
   ======================================== */
body.light-mode #services p.services-intro {
    color: #333333 !important;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.2rem 2.5rem;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Light-Mode: Anpassungen für Service-Karten
   ========================================
   Hier überschreibe ich die Stil-Eigenschaften für die Service-Karten im Light-Mode.
   - background: rgba(255, 255, 255, 0.9);: Fast weißer Hintergrund mit leichter Transparenz.
   - color: #1a1a1a;: Dunkle Textfarbe.
   - border: 1px solid rgba(0, 0, 0, 0.1);: Subtiler schwarzer Rahmen.
   - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);: Schatten für Tiefe.
   ======================================== */
body.light-mode .service-card,
body.light-mode .service-cards {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Light-Mode: Anpassungen für Überschriften in Service-Karten
   ========================================
   Hier überschreibe ich die Stil-Eigenschaften für die Überschriften in den Service-Karten im Light-Mode.
   - background: linear-gradient(...);: Farbverlauf als Hintergrund (Dunkelblau, Lila, Pink).
   - -webkit-background-clip: text;: Beschränkt den Hintergrund auf den Textbereich.
   - -webkit-text-fill-color: transparent;: Macht den Text transparent, sodass der Farbverlauf sichtbar wird.
   ======================================== */
body.light-mode .service-card h3,
body.light-mode .service-cards h3 {
    background: linear-gradient(90deg, #0a3cff, #4d0099, #9d4edd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ========================================
   Light-Mode: Anpassungen für Listenelemente in Service-Karten
   ========================================
   Hier überschreibe ich die Stil-Eigenschaften für die Listenelemente in den Service-Karten im Light-Mode.
   - color: #1a1a1a;: Dunkle Textfarbe.
   ======================================== */
body.light-mode .service-card ul li,
body.light-mode .service-cards ul li,
body.light-mode .service-cards-content ul li {
    color: #1a1a1a;
}

/* ========================================
   Light-Mode: Anpassungen für hervorgehobene Texte in Listenelementen
   ========================================
   Hier überschreibe ich die Stil-Eigenschaften für hervorgehobene Texte in den Listenelementen im Light-Mode.
   - color: #0a3cff;: Dunkelblaue Textfarbe.
   - text-shadow: 0 2px 10px rgba(10, 60, 255, 0.25);: Blau-Glow-Effekt.
   ======================================== */
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 {
    color: #0a3cff;
    text-shadow: 0 2px 10px rgba(10, 60, 255, 0.25);
}

/* ========================================
   Light-Mode: Anpassungen für die Linie unter den Überschriften
   ========================================
   Hier überschreibe ich die Hintergrundfarbe der Linie unter den Überschriften im Light-Mode.
   - background: #0a3cff;: Dunkelblaue Linie.
   ======================================== */
body.light-mode .service-card h3::after,
body.light-mode .service-cards h3::after {
    background: #0a3cff;
}

/* ========================================
   Responsive Anpassungen für Tablets (bis 1200px)
   ========================================
   Hier passe ich die Schriftgrößen für Tablets an.
   - font-size: 3rem;: Schriftgröße von 3rem für den Titel.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem für den Fließtext.
   ======================================== */
@media (max-width: 1200px) {
    .content-title {
        font-size: 3rem;
    }

    .content-text {
        font-size: 1.1rem;
    }
}

/* ========================================
   Responsive Anpassungen für kleinere Tablets (bis 992px)
   ========================================
   Hier passe ich das Layout für kleinere Tablets an.
   - grid-template-columns: 1fr;: Ändert das Grid-Layout auf eine Spalte.
   - padding: 2rem;: Reduziert die Innenabstände.
   - border-radius: 0 0 20px 20px;: Abgerundete untere Ecken.
   - height: 200px;: Reduziert die Höhe der Bilder und Videos.
   ======================================== */
@media (max-width: 992px) {
    .service-grid, .service-center {
        grid-template-columns: 1fr;
    }

    .service-card, .service-cards {
        padding: 2rem;
        border-radius: 0 0 20px 20px;
    }

    .service-img, .service-video-container, .service-video-container video {
        height: 200px;
    }
}

/* ========================================
   Responsive Anpassungen für Mobilgeräte (bis 600px)
   ========================================
   Hier passe ich das Layout für Mobilgeräte an.
   - height: 180px;: Reduziert die Höhe der Bilder und Videos weiter.
   - padding: 1.5rem;: Reduziert die Innenabstände weiter.
   - border-radius: 0 0 15px 15px;: Abgerundete untere Ecken.
   - margin-top: 40px !important;: Erzwingt einen Abstand von 40px von oben für die Section.
   - font-size: 2.5rem !important;: Erzwingt eine Schriftgröße von 2.5rem für die Überschrift.
   - margin-top: 70px !important;: Erzwingt einen Abstand von 70px von oben für die Überschrift.
   - text-align: center;: Zentriert den Text.
   - margin-bottom: 50px !important;: Erzwingt einen Abstand von 50px nach unten für die Überschrift.
   - font-size: 1.05rem;: Schriftgröße von 1.05rem für den Einleitungstext.
   - font-size: 1.4rem;: Schriftgröße von 1.4rem für die Überschriften in den Karten.
   - font-size: 0.95rem;: Schriftgröße von 0.95rem für die Listenelemente.
   - font-size: 1rem;: Schriftgröße von 1rem für hervorgehobene Texte in den Listenelementen.
   ======================================== */
@media (max-width: 600px) {
    .service-img, .service-video-container, .service-video-container video {
        height: 180px;
    }

    .service-card, .service-cards {
        padding: 1.5rem;
        border-radius: 0 0 15px 15px;
    }

    #services {
        margin-top: 40px !important;
    }

    #services h2 {
        font-size: 2.5rem !important;
        margin-top: 70px !important;
        text-align: center;
        margin-bottom: 50px !important;
    }

    body.light-mode #services h2 {
        font-size: 2.5rem !important;
        margin-top: 70px !important;
        text-align: center;
        margin-bottom: 50px !important;
    }

    #services p.services-intro {
        font-size: 1.05rem;
    }

    .service-card h3,
    .service-cards h3 {
        font-size: 1.4rem;
    }

    .service-card ul li,
    .service-cards ul li,
    .service-cards-content ul li {
        font-size: 0.95rem;
    }

    .service-card ul li strong,
    .service-cards ul li strong,
    .service-cards-content ul li strong {
        font-size: 1rem;
    }
}