/*made by www.ClaxDesign.com*/

/* =============================================================================
   HOME SECTION – Grundlayout und Hintergrund
   =============================================================================
   Hier definiere ich die grundlegenden Stile für die Home-Section, die als Startseite der Webseite dient.
   - padding: 8rem 2rem 4rem;: Setzt Innenabstände von 8rem oben, 2rem links/rechts und 4rem unten.
   - text-align: center;: Zentriert den Text innerhalb der Section.
   - background: var(--dark-bg) url('../img/hero-bg.jpg') no-repeat center/cover;: Definiert einen dunklen Hintergrund mit einem Hintergrundbild, das zentriert und auf die gesamte Section skaliert wird.
   - color: white;: Setzt die Standard-Textfarbe auf Weiß für bessere Lesbarkeit.
   - min-height: 100vh;: Setzt eine Mindesthöhe von 100% der Viewport-Höhe, um sicherzustellen, dass die Section den gesamten Bildschirm ausfüllt.
   - display: flex;: Aktiviert das Flexbox-Layout für die Section.
   - flex-direction: column;: Ordnet die Kind-Elemente vertikal an.
   - justify-content: flex-start;: Richtet die Kind-Elemente am oberen Rand der Section aus.
   ============================================================================= */
/* Feuer / Inferno Glow – extrem modern & auffällig */

   #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 – Positionierung des Hauptinhalts
   =============================================================================
   Hier definiere ich den Container für den Hauptinhalt der Home-Section.
   - margin-top: 180px;: Setzt einen Abstand von 180px von oben, um den Text weiter nach unten zu schieben.
   - padding: 0 2rem;: Setzt Innenabstände links und rechts, um Text an den Rändern zu vermeiden.
   ============================================================================= */
.hero-content {
    margin-top: 180px; /* Text insgesamt weiter nach unten geschoben */
    padding: 0 2rem;
}

/* =============================================================================
   ANIMATION – Farbverlauf für Text
   =============================================================================
   Hier definiere ich die Keyframes für die Animation des Farbverlaufs im Text.
   - 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%; }
}

/* =============================================================================
   CALL-TO-ACTION (CTA) – Container für den Button
   =============================================================================
   Hier definiere ich den Container für den Call-to-Action-Button.
   - margin: 4rem auto;: Zentriert den Container horizontal mit einem Abstand von 4rem oben und unten.
   - max-width: 700px;: Begrenzt die maximale Breite auf 700px.
   - text-align: center;: Zentriert den Button horizontal.
   ============================================================================= */
.cta {
    margin: 4rem auto;
    max-width: 700px;
    text-align: center;
}

/* =============================================================================
   CALL-TO-ACTION (CTA) – Stil für den Button
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Call-to-Action-Button.
   - padding: 1rem 2rem;: Setzt Innenabstände von 1rem oben/unten und 2rem links/rechts.
   - background: linear-gradient(90deg, #00ffff, #0a3cff);: Definiert einen Farbverlauf als Hintergrund (Türkis zu Blau).
   - color: white;: Weiße Textfarbe.
   - border: none;: Entfernt den Standard-Rahmen.
   - margin-top: 100px;: Setzt einen Abstand von 100px von oben.
   - border-radius: 50px;: Abgerundete Ecken für ein moderneres Aussehen.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem.
   - font-weight: 600;: Fettgedruckte Schrift.
   - cursor: pointer;: Zeigt an, dass der Button klickbar ist.
   - transition: all 0.3s ease;: Ermöglicht sanfte Übergänge bei Hover-Effekten.
   - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);: Schatten für Tiefe und bessere Sichtbarkeit.
   - text-align: center;: Zentriert den Text im Button.
   ============================================================================= */
.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);
    text-align: center;
}

/* =============================================================================
   CALL-TO-ACTION (CTA) – Hover-Effekt für den Button
   =============================================================================
   Hier definiere ich den Hover-Effekt für den Call-to-Action-Button.
   - background: linear-gradient(90deg, #00ff00, green);: Ändert den Hintergrund zu einem Farbverlauf von Grün zu Dunkelgrün.
   - transform: translateY(-3px);: Hebt den Button um 3px nach oben an, um einen Klick-Effekt zu simulieren.
   - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);: Verstärkt den Schatten für mehr Tiefe.
   - color: white;: Behält die weiße Textfarbe bei.
   - text-align: center;: Zentriert den Text im Button.
   ============================================================================= */
.cta button:hover {
    background: linear-gradient(90deg, #00ff00, green);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    color: white;
    text-align: center;
}

/* =============================================================================
   UNTERNEHMENSBESCHREIBUNG – Textbox
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Box, die die Unternehmensbeschreibung enthält.
   - max-width: 1000px;: Begrenzt die maximale Breite auf 1000px.
   - margin: 4rem auto 6rem;: Zentriert die Box horizontal mit einem Abstand von 4rem oben und 6rem unten.
   - padding: 2.5rem;: Setzt Innenabstände von 2.5rem für bessere Lesbarkeit.
   - background: rgba(0, 0, 0, 0.7);: Halbtransparenter schwarzer Hintergrund.
   - backdrop-filter: blur(20px);: Wendet einen Unschärfe-Filter auf den Hintergrund an, um einen "Glassmorphism"-Effekt zu erzeugen.
   - border-radius: 0 0 20px 20px;: Abgerundete untere Ecken.
   - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);: Schatten für Tiefe.
   - text-align: left;: Linksbündiger Text.
   - color: white;: Weiße Textfarbe.
   - border: 1px solid rgba(255, 255, 255, 0.1);: Subtiler weißer Rahmen.
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zur Box.
   ============================================================================= */
.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;
}

/* =============================================================================
   UNTERNEHMENSBESCHREIBUNG – Dekoratives Pseudo-Element oben
   =============================================================================
   Hier füge ich ein dekoratives Pseudo-Element hinzu, das eine horizontale Linie mit Farbverlauf oben in der Box darstellt.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut innerhalb der Box.
   - top: 0; left: 0;: Platziert das Element oben links in der Box.
   - width: 100%;: Das Element nimmt die volle Breite der Box ein.
   - height: 5px;: Die Höhe der Linie beträgt 5 Pixel.
   - background: linear-gradient(90deg, #00ffff, #0a3cff);: Definiert einen horizontalen 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);
}

/* =============================================================================
   UNTERNEHMENSBESCHREIBUNG – Überschrift
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Überschrift in der Unternehmensbeschreibung.
   - font-size: 2.2rem;: Schriftgröße von 2.2rem.
   - margin-bottom: 1.8rem;: Abstand von 1.8rem nach unten.
   - color: white;: Weiße Textfarbe.
   - text-align: center;: Zentriert den Text.
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zur Überschrift.
   - padding-bottom: 1rem;: Setzt einen Innenabstand 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;
}

/* =============================================================================
   UNTERNEHMENSBESCHREIBUNG – 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 innerhalb der Überschrift.
   - bottom: 0;: Platziert das Element unten in der Überschrift.
   - left: 50%;: Positioniert das Element horizontal in der Mitte.
   - transform: translateX(-50%);: Korrigiert die Positionierung, um das Element genau zu zentrieren.
   - 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;
}

/* =============================================================================
   UNTERNEHMENSBESCHREIBUNG – Fließtext
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Fließtext in der Unternehmensbeschreibung.
   - font-size: 1.15rem;: Schriftgröße von 1.15rem.
   - line-height: 1.8;: Zeilenhöhe von 1.8 für bessere Lesbarkeit.
   - margin-bottom: 1.5rem;: Abstand von 1.5rem nach unten.
   - color: rgba(255, 255, 255, 0.95);: Fast weiße Textfarbe 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 – Hintergrund und Textfarbe der Home-Section
   =============================================================================
   Hier überschreibe ich die Hintergrund- und Textfarbe der Home-Section im Light-Mode.
   - background: var(--bg-color) url('../img/hero-bg-2.jpg') no-repeat center/cover fixed !important;: Definiert einen hellen Hintergrund mit einem anderen Hintergrundbild.
   ============================================================================= */
body.light-mode {
    background: var(--bg-color) url('../img/hero-bg-2.jpg') no-repeat center/cover fixed !important;
}

/* =============================================================================
   LIGHT MODE – Hintergrund und Textfarbe der Home-Section
   =============================================================================
   Hier überschreibe ich die Hintergrund- und Textfarbe der Home-Section im Light-Mode.
   - background: var(--bg-color) url('../img/hero-bg-2.jpg') no-repeat center/cover !important;: Definiert einen hellen Hintergrund mit einem anderen Hintergrundbild.
   - color: #1a1a1a !important;: Dunkle Textfarbe für bessere Lesbarkeit.
   ============================================================================= */
body.light-mode #home {
    background: var(--bg-color) url('../img/hero-bg-2.jpg') no-repeat center/cover !important;
    color: #1a1a1a !important;
}

/* =============================================================================
   LIGHT MODE – Stil für die Hauptüberschrift
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Hauptüberschrift im Light-Mode.
   - margin-top: 0px !important;: Erzwingt einen Abstand von 0px von oben.
   - font-size: clamp(2rem, 5vw, 3.5rem);: Responsive Schriftgröße (mindestens 2rem, maximal 3.5rem, dazwischen 5vw).
   - margin-bottom: 200px !important;: Erzwingt einen Abstand von 200px nach unten.
   - line-height: 1.2;: Zeilenhöhe von 1.2 für bessere Lesbarkeit.
   - background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff);: Definiert einen Farbverlauf als Hintergrund für den Text (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: 0.5px #ffffff;: Fügt einen weißen Umriss (Stroke) um den Text hinzu.
   - text-stroke: 1.5px #ffffff;: 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).
   ============================================================================= */
.hero-content h1 {
    margin-top: 0px !important; /* noch mehr Abstand nach oben zum Text */
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 200px !important;
    line-height: 1.2;
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: textGradient 7s ease infinite;
    /* Farbverlauf + weiße Kontur für DEN GESAMTEN TEXT (nicht nur strong) */
    -webkit-text-stroke: 0.5px #ffffff;     /* weißer Outline / Stroke um den gesamten Text */
    text-stroke: 1.5px #ffffff;             /* Fallback */
    paint-order: stroke fill;               /* Kontur zuerst malen → Verlauf innen sichtbar */
    text-shadow:
        0 0 12px rgba(255,255,255,0.6),     /* leichter weißer Glow um die Kontur */
        0 0 6px rgba(0,0,0,0.85),           /* dunkler Innen-Schatten für Kontrast */
        0 0 8px #00ffff,
        0 0 16px #00ffff,
        0 0 32px #b08aff,
        0 0 48px #ff6bcb,
        0 0 64px #0a3cff;
}

/* =============================================================================
   LIGHT MODE – Überschrift im Light-Mode
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Hauptüberschrift im Light-Mode.
   - color: #000000 !important;: Schwarze Textfarbe.
   - background: none !important;: Entfernt den Hintergrund.
   - -webkit-background-clip: initial !important;: Setzt den Hintergrund-Clip auf den Standardwert zurück.
   - -webkit-text-fill-color: initial !important;: Setzt die Textfüllfarbe auf den Standardwert zurück.
   - background-image: none !important;: Entfernt das Hintergrundbild.
   - text-shadow: Mehrere Schatteneffekte für einen 3D-Effekt (weißer Umriss, schwarzer Schatten für Tiefe).
   - font-weight: 400 !important;: Normale Schriftstärke.
   - letter-spacing: 0.5px !important;: Leichter Buchstabenabstand für bessere Lesbarkeit.
   ============================================================================= */
body.light-mode .hero-content h1 {
    color: #000000 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-image: none !important;
    text-shadow:
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        -2px 2px 0 #fff,
        2px 2px 0 #fff,
        0 0 20px rgba(0,0,0,0.9),
        0 0 30px rgba(0,0,0,0.8),
        0 0 40px rgba(0,0,0,0.7),
        0 4px 12px rgba(0,0,0,1),
        0 6px 18px rgba(0,0,0,0.9) !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Unternehmensbeschreibungs-Box
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Box im Light-Mode.
   - background: rgba(255, 255, 255, 0.92);: Fast weißer Hintergrund mit leichter Transparenz.
   - color: #111111;: Dunkle Textfarbe.
   - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);: Leichter Schatten für Tiefe.
   - border-color: rgba(0, 0, 0, 0.08);: Subtiler schwarzer Rahmen.
   ============================================================================= */
body.light-mode .company-description-box {
    background: rgba(255, 255, 255, 0.92);
    color: #111111;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.08);
}

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

/* =============================================================================
   LIGHT MODE – Anpassungen für die Linie unter der Überschrift
   =============================================================================
   Hier überschreibe ich die Hintergrundfarbe der Linie unter der Überschrift im Light-Mode.
   - background: #0066ff;: Dunkelblaue Linie.
   ============================================================================= */
body.light-mode .company-description-box h2::after {
    background: #0066ff;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Call-to-Action-Button
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Call-to-Action-Button im Light-Mode.
   - color: white !important;: Weiße Textfarbe.
   - background: linear-gradient(90deg, #00aaff, #0044ff);: Farbverlauf von Hellblau zu Dunkelblau.
   - text-align: center;: Zentriert den Text im Button.
   ============================================================================= */
body.light-mode .cta button {
    color: white !important;
    background: linear-gradient(90deg, #00aaff, #0044ff);
    text-align: center;
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Tablets (bis 900px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Home-Section und die Unternehmensbeschreibungs-Box auf Tablets an.
   - padding: 6rem 1rem 3rem;: Reduziert die Innenabstände.
   - margin-top: 120px;: Reduziert den Abstand von oben für den Hero-Content.
   - margin-top: 180px !important;: Erzwingt einen Abstand von 180px von oben für die Überschrift.
   - margin-bottom: 180px !important;: Erzwingt einen Abstand von 180px nach unten für die Überschrift.
   - font-size: clamp(1.8rem, 6vw, 2.8rem);: Responsive Schriftgröße (mindestens 1.8rem, maximal 2.8rem, dazwischen 6vw).
   - margin: 3rem auto 5rem;: Reduziert die Abstände der Box.
   - padding: 2rem;: Reduziert die Innenabstände der Box.
   - border-radius: 0 0 15px 15px;: Abgerundete untere Ecken.
   - font-size: 1.8rem;: Schriftgröße der Überschrift.
   - font-size: 1rem;: Schriftgröße des Fließtexts.
   - line-height: 1.7;: Zeilenhöhe für bessere Lesbarkeit.
   - margin: 3rem auto 4rem;: Reduziert die Abstände des CTA-Containers.
   - padding: 0.9rem 1.8rem;: Reduziert die Innenabstände der Buttons.
   - font-size: 1rem;: Schriftgröße der Buttons.
   - max-width: 260px;: Maximale Breite der Buttons.
   - margin-top: -80px !important;: Erzwingt einen negativen Abstand von oben für die Buttons.
   ============================================================================= */
@media (max-width: 900px) {
    #home {
        padding: 6rem 1rem 3rem;
    }

    .hero-content {
        margin-top: 120px; /* Text insgesamt weiter nach unten geschoben */
    }

    .hero-content h1 {
        margin-top: 180px !important; /* h1 noch etwas höher innerhalb des Containers */
        margin-bottom: 180px !important;
        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;
    }

    .cta {
        margin: 3rem auto 4rem;
        text-align: center;
    }

    .cta button {
        padding: 0.9rem 1.8rem;
        font-size: 1rem;
        max-width: 260px;
        margin-top: -80px !important;
        text-align: center;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Mobilgeräte (bis 600px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Home-Section und die Unternehmensbeschreibungs-Box auf Mobilgeräten an.
   - margin-top: 100px;: Reduziert den Abstand von oben für den Hero-Content.
   - margin-top: 120px !important;: Erzwingt einen Abstand von 120px von oben für die Überschrift.
   - margin-bottom: 140px !important;: Erzwingt einen Abstand von 140px nach unten für die Überschrift.
   - font-size: clamp(1.5rem, 7vw, 2.2rem);: Responsive Schriftgröße (mindestens 1.5rem, maximal 2.2rem, dazwischen 7vw).
   - padding: 0.8rem 1.6rem !important;: Reduziert die Innenabstände der Buttons weiter.
   - font-size: 0.95rem !important;: Schriftgröße der Buttons.
   - max-width: 240px !important;: Maximale Breite der Buttons.
   - margin-top: 40px !important;: Erzwingt einen Abstand von 40px von oben für die Buttons.
   - margin: 2rem auto 4rem;: Reduziert die Abstände der Box.
   - padding: 1.5rem;: Reduziert die Innenabstände der Box.
   - font-size: 1.5rem;: Schriftgröße der Überschrift.
   ============================================================================= */
@media (max-width: 600px) {
    .hero-content {
        margin-top: 100px; /* auf sehr kleinen Screens noch etwas angepasst */
    }

    .hero-content h1 {
        margin-top: 120px !important;
        margin-bottom: 140px !important;
        font-size: clamp(1.5rem, 7vw, 2.2rem);
    }

    .cta button {
        padding: 0.8rem 1.6rem !important;
        font-size: 0.95rem !important;
        max-width: 240px !important;
        margin-top: 40px !important;
        text-align: center;
    }

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

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