/*made by www.ClaxDesign.com*/
/* ========================================
   1. CSS-Variablen (Custom Properties)
   ========================================
   Hier definiere ich globale CSS-Variablen, die im gesamten Stylesheet
   wiederverwendet werden. Diese Variablen ermöglichen eine zentrale
   Steuerung von Farben, Transparenzen und Design-Elementen.
   - --primary: Primärfarbe für interaktive Elemente (Blau)
   - --accent: Akzentfarbe für Hervorhebungen (Lila)
   - --glass: Transparente Weiß-Tönung für Glaseffekte
   - --glass-dark: Transparente Schwarz-Tönung für Glaseffekte
   - --bg-color: Hintergrundfarbe für den Light-Mode (Hellgrau)
   - --text-color: Textfarbe für den Light-Mode (Schwarz)
   - --dark-bg: Hintergrundfarbe für den Dark-Mode (Schwarz)
   - --dark-text: Textfarbe für den Dark-Mode (Weiß)
   - --footer-bg: Hintergrundfarbe für den Footer (Transparentes Schwarz)
   - --nexts-gradient: Farbverlauf für spezielle Effekte (Dunkelblau zu Weiß)
   - --nexts-dark: Dunkelblaue Basis für den Farbverlauf
   - --nexts-blue: Helles Blau für den Farbverlauf
   ======================================== */
:root {
    --primary: #007bff;
    --accent: #6f42c1;
    --glass: rgba(255, 255, 255, 0.12);
    --glass-dark: rgba(0, 0, 0, 0.4);
    --bg-color: #f8f9fa;
    --text-color: #000000;
    --dark-bg: #000000;
    --dark-text: #ffffff;
    --footer-bg: rgba(0, 0, 0, 0.6);
    --nexts-gradient: linear-gradient(135deg, #020b2d 0%, #0a3cff 55%, #ffffff 100%);
    --nexts-dark: #020b2d;
    --nexts-blue: #0a3cff;
}

/* ========================================
   2. CSS-Reset & Grundstile für alle Elemente
   ========================================
   Hier setze ich alle Margin- und Padding-Werte auf 0 und stelle sicher,
   dass die Box-Sizing-Eigenschaft für alle Elemente auf 'border-box' gesetzt ist.
   Das sorgt für ein konsistentes Layout-Verhalten.
   - *: Wählt alle Elemente im Dokument aus
   - margin: 0; padding: 0;: Entfernt Standard-Abstände
   - box-sizing: border-box;: Bezieht Padding und Border in die Elementgröße ein
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   HTML-Element-Stile
   ========================================
   Hier definiere ich grundlegende Stile für das HTML-Element.
   - scroll-behavior: smooth;: Ermöglicht sanftes Scrollen zu Ankerpunkten
   ======================================== */
html {
    scroll-behavior: smooth;
}

/* ========================================
   Body-Stile (Hauptcontainer der Seite)
   ========================================
   Hier definiere ich die grundlegenden Stile für den Body-Bereich.
   - font-family: Setzt die Schriftart auf 'Poppins' mit Fallback auf sans-serif
   - margin: 0; padding: 0;: Entfernt Standard-Abstände
   - background: Definiert einen dunklen Hintergrund mit Hintergrundbild für den Dark-Mode
   - color: Setzt die Standard-Textfarbe auf Weiß (für Dark-Mode)
   - transition: Ermöglicht sanfte Übergänge bei Änderungen (z.B. Farbwechsel)
   - overflow-x: hidden;: Verhindert horizontalen Scrollbalken
   ======================================== */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background: var(--dark-bg) url('../img/hero-bg.jpg') no-repeat center/cover fixed;
    color: var(--dark-text);
    transition: all 0.3s ease;
    overflow-x: hidden;
}

/* ========================================
   Light-Mode-Stile für den Body
   ========================================
   Hier überschreibe ich die Body-Stile für den Light-Mode.
   - background: Definiert einen hellen Hintergrund mit Hintergrundbild für den Light-Mode
   - color: Setzt die Standard-Textfarbe auf Schwarz (für Light-Mode)
   ======================================== */
body.light-mode {
    background: var(--bg-color) url('../img/hero-bg-2.jpg') no-repeat center/cover fixed;
    color: var(--text-color);
}

/* ========================================
   Light-Mode-Stile für Sections
   ========================================
   Hier überschreibe ich die Textfarbe für alle Sections im Light-Mode.
   - color: Setzt die Textfarbe auf ein dunkles Grau für bessere Lesbarkeit
   ======================================== */
body.light-mode section {
    color: #1a1a1a;
}

/* ========================================
   3. Globale Klassen für Sections
   ========================================
   Hier definiere ich die grundlegende Struktur für alle Sections der Webseite.
   - .section: Definiert Abstände, maximale Breite, Zentrierung und Standard-Anzeige (nicht sichtbar)
   - padding: 8rem 10rem;: Großzügige Innenabstände für Desktop-Ansicht
   - max-width: 1600px;: Begrenzt die maximale Breite der Section
   - margin: 0 auto;: Zentriert die Section horizontal
   - display: none;: Verbirgt die Section standardmäßig
   ======================================== */
.section {
    padding: 8rem 10rem;
    max-width: 1600px;
    margin: 0 auto;
    display: none;
}

/* ========================================
   Aktive Section-Stile
   ========================================
   Hier definiere ich, wie eine Section aussieht, wenn sie aktiv ist.
   - display: block;: Macht die Section sichtbar
   ======================================== */
.section.active {
    display: block;
}

/* ========================================
   Responsive Anpassungen für Sections (Tablet)
   ========================================
   Hier passe ich die Innenabstände für Tablets an.
   - padding: 6rem 6rem;: Reduziert die Abstände für kleinere Bildschirme
   ======================================== */
@media (max-width: 1200px) {
    .section {
        padding: 6rem 6rem;
    }
}

/* ========================================
   Responsive Anpassungen für Sections (Kleinere Tablets)
   ========================================
   Hier passe ich die Innenabstände für kleinere Tablets an.
   - padding: 5rem 4rem;: Weiter reduzierte Abstände
   ======================================== */
@media (max-width: 900px) {
    .section {
        padding: 5rem 4rem;
    }
}

/* ========================================
   Responsive Anpassungen für Sections (Mobilgeräte)
   ========================================
   Hier passe ich die Innenabstände für Mobilgeräte an.
   - padding: 4rem 2rem;: Minimale Abstände für kleine Bildschirme
   ======================================== */
@media (max-width: 600px) {
    .section {
        padding: 4rem 2rem;
    }
}

/* ========================================
   4. Globale Hover-Effekte für Icons
   ========================================
   Hier definiere ich einen standardisierten Hover-Effekt für Icons.
   - transition: Definiert eine sanfte Transformations-Animation
   - transform: scale(1.6);: Vergrößert das Icon beim Hovern
   ======================================== */
.icon-hover {
    transition: transform 0.4s ease !important;
}

.icon-hover:hover {
    transform: scale(1.6) !important;
}

/* ========================================
   5. Light-Mode Textfarben
   ========================================
   Hier überschreibe ich die Textfarben für alle Textelemente im Light-Mode.
   - color: #1a1a1a;: Setzt die Textfarbe auf ein dunkles Grau für bessere Lesbarkeit
   ======================================== */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode p,
body.light-mode li,
body.light-mode span,
body.light-mode a {
    color: #1a1a1a;
}

/* ========================================
   6. Light-Mode Hintergrundfarben für Service-Karten
   ========================================
   Hier definiere ich die Hintergrundfarben für Service-Karten im Light-Mode.
   - background: rgba(255, 255, 255, 0.9);: Fast weißer Hintergrund mit leichter Transparenz
   - border: Fügt einen subtilen Rahmen hinzu
   ======================================== */
body.light-mode .service-card,
body.light-mode .service-cards {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ========================================
   Light-Mode Hintergrundfarben für Service-Bilder
   ========================================
   Hier definiere ich die Hintergrundfarben für Service-Bilder im Light-Mode.
   - background: rgba(240, 240, 240, 0.9);: Hellgrauer Hintergrund mit leichter Transparenz
   ======================================== */
body.light-mode .service-img,
body.light-mode .service-imgs {
    background: rgba(240, 240, 240, 0.9);
}

/* ========================================
   7. Light-Mode Box-Shadow für verschiedene Elemente
   ========================================
   Hier definiere ich den Schattenwurf für verschiedene Elemente im Light-Mode.
   - box-shadow: Erzeugt einen subtilen Schatten für Tiefe
   ======================================== */
body.light-mode .service-card,
body.light-mode .service-cards,
body.light-mode .references-box,
body.light-mode .contact-box {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Home-Section mit TextBox für Unternehmensbeschreibung
   ========================================
   Hier definiere ich die Stile für die Home-Section, die als Startseite dient.
   - padding: Definiert Innenabstände (oben, seitlich, unten)
   - text-align: center;: Zentriert den Text
   - background: Dunkler Hintergrund mit Hintergrundbild
   - color: Weißer Text für bessere Lesbarkeit
   - min-height: 100vh;: Mindesthöhe von 100% der Viewport-Höhe
   - display: flex;: Aktiviert Flexbox für die Layout-Steuerung
   - flex-direction: column;: Ordnet Elemente vertikal an
   - justify-content: flex-start;: Ausrichtung der Elemente am oberen Rand
   ======================================== */
#home {
    padding: 8rem 2rem 4rem;
    text-align: center;
    background: var(--dark-bg) url('../img/hero-bg.jpg') no-repeat center/cover;
    color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ========================================
   Hero-Content-Bereich
   ========================================
   Hier definiere ich den Container für den Hauptinhalt der Home-Section.
   - margin-top: 100px;: Abstand von oben
   - padding: 0 2rem;: Seitliche Innenabstände
   ======================================== */
.hero-content {
    margin-top: 100px;
    padding: 0 2rem;
}

/* ========================================
   Überschrift im Hero-Bereich
   ========================================
   Hier definiere ich die Stile für die Hauptüberschrift.
   - margin-top: 70px !important;: Erzwingt einen Abstand von oben
   - font-size: clamp(2rem, 5vw, 3.5rem);: Responsive Schriftgröße (min, bevorzugt, max)
   - margin-bottom: 200px !important;: Erzwingt einen großen Abstand nach unten
   - text-shadow: Fügt einen Schatten für bessere Lesbarkeit hinzu
   - line-height: 1.2;: Zeilenhöhe für bessere Lesbarkeit
   - color: #00ffff;: Türkisfarbene Überschrift
   ======================================== */
.hero-content h1 {
    margin-top: 70px !important;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 200px !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
    color: #00ffff;
}

/* ========================================
   Call-to-Action-Bereich
   ========================================
   Hier definiere ich den Container für den Call-to-Action-Button.
   - margin: 4rem auto;: Zentriert den Button mit Abstand
   - max-width: 700px;: Begrenzt die maximale Breite
   ======================================== */
.cta {
    margin: 4rem auto;
    max-width: 700px;
}

/* ========================================
   Call-to-Action-Button
   ========================================
   Hier definiere ich die Stile für den Call-to-Action-Button.
   - padding: 1rem 2rem;: Innenabstände für Größe
   - background: Farbverlauf von Türkis zu Blau
   - color: white;: Weiße Schrift
   - border: none;: Kein Rahmen
   - margin-top: -100px;: Negativer Abstand, um den Button nach oben zu verschieben
   - border-radius: 50px;: Abgerundete Ecken
   - font-size: 1.1rem;: Schriftgröße
   - font-weight: 600;: Fettgedruckte Schrift
   - cursor: pointer;: Zeigt an, dass der Button klickbar ist
   - transition: all 0.3s ease;: Sanfte Übergänge für Hover-Effekte
   - box-shadow: Schatten für Tiefe
   ======================================== */
.cta button {
    padding: 1rem 2rem;
    background: linear-gradient(90deg, #00ffff, #0a3cff);
    color: white;
    border: none;
    margin-top: -100px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Call-to-Action-Button Hover-Effekt
   ========================================
   Hier definiere ich den Hover-Effekt für den Call-to-Action-Button.
   - background: Farbverlauf von Dunkelblau zu Grün zu Blau
   - transform: translateY(-3px);: Hebt den Button leicht an
   - box-shadow: Verstärkter Schatten für Tiefe
   - color: white;: Weiße Schrift bleibt erhalten
   ======================================== */
.cta button:hover {
    background: linear-gradient(90deg, #303f9f, green, #5c6bc0);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    color: white;
}

/* ========================================
   TextBox für Unternehmensbeschreibung
   ========================================
   Hier definiere ich die Stile für die Box, die die Unternehmensbeschreibung enthält.
   - max-width: 1000px;: Begrenzt die maximale Breite
   - margin: 4rem auto 6rem;: Zentriert die Box mit Abstand
   - padding: 2.5rem;: Innenabstände
   - background: Transparentes Schwarz für Glaseffekt
   - backdrop-filter: blur(20px);: Unschärfe-Effekt für Glaseffekt
   - border-radius: 0 0 20px 20px;: Abgerundete untere Ecken
   - box-shadow: Schatten für Tiefe
   - text-align: left;: Linksbündiger Text
   - color: white;: Weiße Schrift
   - border: Subtiler Rahmen
   - position: relative;: Ermöglicht absolute Positionierung von Pseudo-Elementen
   ======================================== */
.company-description-box {
    max-width: 1000px;
    margin: 4rem auto 6rem;
    padding: 2.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    text-align: left;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

/* ========================================
   Dekoratives Pseudo-Element für die Unternehmensbeschreibung
   ========================================
   Hier füge ich ein dekoratives Element oben an der Box hinzu.
   - content: '';: Erzeugt ein leeres Pseudo-Element
   - position: absolute;: Positioniert das Element absolut
   - top: 0; left: 0;: Platziert es oben links
   - width: 100%;: Volle Breite
   - height: 5px;: Höhe von 5px
   - background: Farbverlauf von Türkis zu Blau
   ======================================== */
.company-description-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #00ffff, #0a3cff);
}

/* ========================================
   Überschrift in der Unternehmensbeschreibung
   ========================================
   Hier definiere ich die Stile für die Überschrift in der Box.
   - font-size: 2.2rem;: Schriftgröße
   - margin-bottom: 1.8rem;: Abstand nach unten
   - color: white;: Weiße Schrift
   - text-align: center;: Zentrierter Text
   - position: relative;: Ermöglicht absolute Positionierung des Pseudo-Elements
   - padding-bottom: 1rem;: Abstand unten für das Pseudo-Element
   ======================================== */
.company-description-box h2 {
    font-size: 2.2rem;
    margin-bottom: 1.8rem;
    color: white;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

/* ========================================
   Dekoratives Pseudo-Element unter der Überschrift
   ========================================
   Hier füge ich eine Linie unter der Überschrift hinzu.
   - content: '';: Erzeugt ein leeres Pseudo-Element
   - position: absolute;: Positioniert das Element absolut
   - bottom: 0;: Platziert es unten
   - left: 50%;: Zentriert es horizontal
   - transform: translateX(-50%);: Korrigiert die Zentrierung
   - width: 80px;: Breite der Linie
   - height: 3px;: Höhe der Linie
   - background: #00ffff;: Türkisfarbene Linie
   ======================================== */
.company-description-box h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #00ffff;
}

/* ========================================
   Text in der Unternehmensbeschreibung
   ========================================
   Hier definiere ich die Stile für den Fließtext in der Box.
   - font-size: 1.15rem;: Schriftgröße
   - line-height: 1.8;: Zeilenhöhe für bessere Lesbarkeit
   - margin-bottom: 1.5rem;: Abstand nach unten
   - color: rgba(255, 255, 255, 0.95);: Fast weiße Schrift mit leichter Transparenz
   ======================================== */
.company-description-box p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
}

/* ========================================
   Light-Mode Anpassungen für die Home-Section
   ========================================
   Hier überschreibe ich die Stile für die Home-Section im Light-Mode.
   - background: Heller Hintergrund mit Hintergrundbild
   - color: Dunkle Textfarbe
   ======================================== */
body.light-mode #home {
    background: var(--bg-color) url('../img/hero-bg-2.jpg') no-repeat center/cover;
    color: #1a1a1a;
}

/* ========================================
   Light-Mode Anpassungen für die Hero-Überschrift
   ========================================
   Hier überschreibe ich die Stile für die Hero-Überschrift im Light-Mode.
   - color: #0066ff;: Dunkelblaue Schrift
   - text-shadow: Leichter Schatten für bessere Lesbarkeit
   ======================================== */
body.light-mode .hero-content h1 {
    color: #0066ff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Light-Mode Anpassungen für die Unternehmensbeschreibungs-Box
   ========================================
   Hier überschreibe ich die Stile für die Box im Light-Mode.
   - background: Fast weißer Hintergrund mit leichter Transparenz
   - color: Dunkle Textfarbe
   - box-shadow: Leichter Schatten
   - border-color: Subtiler Rahmen
   ======================================== */
body.light-mode .company-description-box {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ========================================
   Light-Mode Anpassungen für die Überschrift in der Box
   ========================================
   Hier überschreibe ich die Stile für die Überschrift im Light-Mode.
   - color: Dunkle Textfarbe
   ======================================== */
body.light-mode .company-description-box h2 {
    color: #1a1a1a;
}

/* ========================================
   Light-Mode Anpassungen für das Pseudo-Element unter der Überschrift
   ========================================
   Hier überschreibe ich die Farbe der Linie unter der Überschrift im Light-Mode.
   - background: #0a3cff;: Dunkelblaue Linie
   ======================================== */
body.light-mode .company-description-box h2::after {
    background: #0a3cff;
}

/* ========================================
   Light-Mode Anpassungen für den Call-to-Action-Button
   ========================================
   Hier überschreibe ich die Stile für den Button im Light-Mode.
   - color: white !important;: Erzwingt weiße Schrift
   - background: Farbverlauf von Türkis zu Dunkelblau
   ======================================== */
body.light-mode .cta button {
    color: white !important;
    background: linear-gradient(90deg, #00ffff, #0066ff);
}

/* ========================================
   Responsive Anpassungen für Tablets
   ========================================
   Hier passe ich die Stile für Tablets an.
   - padding: 6rem 1rem 3rem;: Reduzierte Innenabstände
   - margin-top: 80px;: Reduzierter Abstand von oben
   - font-size: clamp(1.8rem, 6vw, 2.8rem);: Responsive Schriftgröße
   ======================================== */
@media (max-width: 900px) {
    #home {
        padding: 6rem 1rem 3rem;
    }

    .hero-content {
        margin-top: 80px;
    }

    .hero-content h1 {
        font-size: clamp(1.8rem, 6vw, 2.8rem);
    }

    .company-description-box {
        margin: 3rem auto 5rem;
        padding: 2rem;
        border-radius: 0 0 15px 15px;
    }

    .company-description-box h2 {
        font-size: 1.8rem;
    }

    .company-description-box p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   Responsive Anpassungen für Mobilgeräte
   ========================================
   Hier passe ich die Stile für Mobilgeräte an.
   - margin-top: 60px;: Weiter reduzierter Abstand von oben
   - font-size: clamp(1.5rem, 7vw, 2.2rem);: Responsive Schriftgröße
   - margin-top: 50px;: Reduzierter Abstand für den Button
   - padding: 1.5rem;: Reduzierte Innenabstände für die Box
   - font-size: 1.5rem;: Reduzierte Schriftgröße für die Überschrift
   - margin-top: 150px !important;: Erzwingt einen größeren Abstand von oben für die Überschrift
   - font-size: clamp(2rem, 5vw, 3.5rem);: Responsive Schriftgröße für die Überschrift
   - margin-bottom: 150px !important;: Erzwingt einen größeren Abstand nach unten
   ======================================== */
@media (max-width: 600px) {
    .hero-content {
        margin-top: 60px;
    }

    .hero-content h1 {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
    }

    .cta button {
        padding: 1rem 2rem;
        background: linear-gradient(90deg, #00ffff, #0a3cff);
        color: white;
        border: none;
        margin-top: 50px;
        border-radius: 50px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .company-description-box {
        margin: 2rem auto 4rem;
        padding: 1.5rem;
        border-radius: 0 0 15px 15px;
    }

    .company-description-box h2 {
        font-size: 1.5rem;
    }

    .hero-content h1 {
        margin-top: 150px !important;
        font-size: clamp(2rem, 5vw, 3.5rem);
        margin-bottom: 150px !important;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        line-height: 1.2;
    }
}