/*made by www.ClaxDesign.com*/

/* =============================================================================
   HERO SECTION – Hauptüberschrift
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Hauptüberschrift in der Hero-Section.
   - font-size: clamp(2rem, 4vw, 3.5rem);: Die Schriftgröße ist responsiv und passt sich der Bildschirmbreite an (mindestens 2rem, maximal 3.5rem, dazwischen 4vw).
   - margin: 0 auto;: Zentriert die Überschrift horizontal.
   - max-width: 1200px;: Begrenzt die maximale Breite der Überschrift auf 1200px.
   - line-height: 1.2;: Zeilenhöhe von 1.2 für bessere Lesbarkeit.
   - text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);: Fügt einen Schatten hinzu, um die Lesbarkeit auf dem Hintergrund zu verbessern.
   - padding: 0 2rem;: Setzt Innenabstände links und rechts, um Text an den Rändern zu vermeiden.
   ============================================================================= */
#home h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin: 0 auto;
    max-width: 1200px;
    line-height: 1.2;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    padding: 0 2rem;
}

/* =============================================================================
   CALL-TO-ACTION (CTA) – Container für Buttons
   =============================================================================
   Hier definiere ich den Container für die Call-to-Action-Buttons in der Hero-Section.
   - margin-top: 6rem !important;: Erzwingt einen Abstand von 6rem von oben, unabhängig von anderen Stilen.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - justify-content: center;: Zentriert die Buttons horizontal.
   - align-items: center;: Zentriert die Buttons vertikal.
   - gap: 3rem;: Setzt einen Abstand von 3rem zwischen den Buttons.
   - flex-wrap: wrap;: Erlaubt das Umbrechen der Buttons in die nächste Zeile, falls der Platz nicht ausreicht.
   - width: 100%;: Der Container nimmt die volle Breite ein.
   - max-width: 1200px;: Begrenzt die maximale Breite auf 1200px.
   - padding: 0 2rem;: Setzt Innenabstände links und rechts, um Buttons an den Rändern zu vermeiden.
   ============================================================================= */
.cta {
    margin-top: 6rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    padding: 0 2rem;
}

/* =============================================================================
   CALL-TO-ACTION (CTA) – Stil für Buttons
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Call-to-Action-Buttons.
   - padding: 1.4rem 3.5rem !important;: Erzwingt Innenabstände von 1.4rem oben/unten und 3.5rem links/rechts.
   - background: white;: Weißer Hintergrund für bessere Sichtbarkeit.
   - color: var(--primary);: Textfarbe basierend auf der CSS-Variable --primary (Blau).
   - border: none;: Entfernt den Standard-Rahmen.
   - border-radius: 50px;: Abgerundete Ecken für ein moderneres Aussehen.
   - cursor: pointer;: Zeigt an, dass der Button klickbar ist.
   - font-weight: 700 !important;: Erzwingt eine fettgedruckte Schrift.
   - font-size: clamp(0.9rem, 2vw, 1.3rem) !important;: Responsive Schriftgröße (mindestens 0.9rem, maximal 1.3rem, dazwischen 2vw).
   - 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.
   - min-width: 260px;: Mindestbreite von 260px, um sicherzustellen, dass der Button groß genug ist.
   ============================================================================= */
.cta button {
    padding: 1.4rem 3.5rem !important;
    background: white;
    color: var(--primary);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700 !important;
    font-size: clamp(0.9rem, 2vw, 1.3rem) !important;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    min-width: 260px;
}

/* =============================================================================
   CALL-TO-ACTION (CTA) – Hover-Effekt für Buttons
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Call-to-Action-Buttons.
   - transform: translateY(-8px);: Hebt den Button um 8px nach oben an, um einen Klick-Effekt zu simulieren.
   - box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);: Verstärkt den Schatten für mehr Tiefe.
   - background: #f0f8ff;: Ändert den Hintergrund zu einem hellen Blau, um den Hover-Zustand zu betonen.
   ============================================================================= */
.cta button:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    background: #f0f8ff;
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Tablets (bis 1200px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Hauptüberschrift auf Tablets an.
   - font-size: clamp(2rem, 5vw, 3rem);: Responsive Schriftgröße (mindestens 2rem, maximal 3rem, dazwischen 5vw).
   - padding: 0 1.5rem;: Reduziert die Innenabstände links und rechts.
   ============================================================================= */
@media (max-width: 1200px) {
    #home h1 {
        font-size: clamp(2rem, 5vw, 3rem);
        padding: 0 1.5rem;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für kleinere Tablets (bis 900px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Hero-Section und die Call-to-Action-Buttons auf kleineren Tablets an.
   - height: auto;: Passt die Höhe automatisch an den Inhalt an.
   - min-height: 120vh;: Setzt eine Mindesthöhe von 120% der Viewport-Höhe.
   - padding: 4rem 1rem;: Reduziert die Innenabstände.
   - font-size: clamp(1.8rem, 6vw, 2.5rem);: Responsive Schriftgröße (mindestens 1.8rem, maximal 2.5rem, dazwischen 6vw).
   - margin-top: 4rem !important;: Erzwingt einen Abstand von 4rem von oben für den CTA-Container.
   - gap: 2rem;: Reduziert den Abstand zwischen den Buttons.
   - flex-direction: column;: Ändert die Anordnung der Buttons in eine Spalte.
   - padding: 1.3rem 3rem;: Reduziert die Innenabstände der Buttons.
   - font-size: clamp(1rem, 3vw, 1.2rem) !important;: Responsive Schriftgröße (mindestens 1rem, maximal 1.2rem, dazwischen 3vw).
   - min-width: 280px;: Mindestbreite von 280px für die Buttons.
   - width: 100%;: Buttons nehmen die volle Breite ein.
   ============================================================================= */
@media (max-width: 900px) {
    #home {
        height: auto;
        min-height: 120vh;
        padding: 4rem 1rem;
    }

    #home h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .cta {
        margin-top: 4rem !important;
        gap: 2rem;
        flex-direction: column;
    }

    .cta button {
        padding: 1.3rem 3rem;
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
        min-width: 280px;
        width: 100%;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Mobilgeräte (bis 600px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Hero-Section und die Call-to-Action-Buttons auf Mobilgeräten an.
   - padding: 3rem 0.5rem;: Reduziert die Innenabstände weiter.
   - font-size: clamp(1.6rem, 7vw, 2.2rem);: Responsive Schriftgröße (mindestens 1.6rem, maximal 2.2rem, dazwischen 7vw).
   - padding: 0 1rem;: Reduziert die Innenabstände der Überschrift weiter.
   - margin-top: 3rem !important;: Erzwingt einen Abstand von 3rem von oben für den CTA-Container.
   - gap: 1.5rem;: Reduziert den Abstand zwischen den Buttons weiter.
   - padding: 1.2rem 2.5rem;: Reduziert die Innenabstände der Buttons weiter.
   - font-size: clamp(0.9rem, 4vw, 1.1rem) !important;: Responsive Schriftgröße (mindestens 0.9rem, maximal 1.1rem, dazwischen 4vw).
   - min-width: 240px;: Mindestbreite von 240px für die Buttons.
   - padding-bottom: 40px !important;: Erzwingt einen Innenabstand von 40px unten.
   - padding-top: -20px !important;: Erzwingt einen negativen Innenabstand von 20px oben (wird durch andere Stile überschrieben).
   ============================================================================= */
@media (max-width: 600px) {
    #home {
        padding: 3rem 0.5rem;
    }

    #home h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
        padding: 0 1rem;
    }

    .cta {
        margin-top: 3rem !important;
        gap: 1.5rem;
    }

    .cta button {
        padding: 1.2rem 2.5rem;
        font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
        min-width: 240px;
        padding-bottom: 40px !important;
        padding-top: -20px !important;
    }
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Call-to-Action-Buttons
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Call-to-Action-Buttons im Light-Mode.
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund (Dunkelblau, Blau, Weiß).
   - color: var(--primary) !important;: Erzwingt die Textfarbe basierend auf der CSS-Variable --primary (Blau).
   - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);: Leichter Schatten für bessere Sichtbarkeit.
   ============================================================================= */
body.light-mode .cta button {
    background: linear-gradient(
        135deg,
        #020b2d 0%,
        #0a3cff 55%,
        #ffffff 100%
    );
    color: var(--primary) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für Call-to-Action-Buttons
   =============================================================================
   Hier überschreibe ich den Hover-Effekt für die Call-to-Action-Buttons im Light-Mode.
   - background: #e6f3ff !important;: Ändert den Hintergrund zu einem sehr hellen Blau.
   - box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);: Verstärkt den Schatten für mehr Tiefe.
   - color: #020b2d !important;: Ändert die Textfarbe zu Dunkelblau.
   ============================================================================= */
body.light-mode .cta button:hover {
    background: #e6f3ff !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    color: #020b2d !important;
}