/* ==========================================
   SPLIT-SCREEN HERO - RESPONSIVE STYLES
   Media Queries für Tablet & Desktop
   ========================================== */

/* ==========================================
   TABLET (768px - 1023px)
   ========================================== */

/**
 * Tablet-Breakpoint: Erhöht Padding und Font-Sizes
 *
 * Warum 768px: Standard-Tablet-Breite (iPad portrait)
 * Layout: Immer noch gestapelt (column), aber mehr Platz
 */
@media (min-width: 768px) {
  /**
   * Hero-Container: Mehr Padding vertikal
   * 4rem statt 3rem = mehr Weißraum oben/unten
   */
  .split-hero {
    padding: 4rem 2rem;
  }

  /**
   * Container: Mehr Gap zwischen Left und Right
   */
  .split-hero__container {
    gap: 3rem;
  }

  /**
   * Titel: Größere Font auf Tablet
   * 3rem = 48px (war 2.5rem = 40px auf Mobile)
   */
  .split-hero__title {
    font-size: 3rem;
  }

  /**
   * Untertitel: Leicht größer und mehr Platz
   */
  .split-hero__subtitle {
    font-size: 1.125rem;
    max-width: 600px;
  }

  /**
   * CTA-Buttons: Nebeneinander statt gestapelt
   *
   * Warum: Auf Tablet ist genug Platz für 2 Buttons
   * in einer Zeile (Primary + Secondary)
   *
   * flex-wrap: wrap erlaubt Umbruch bei sehr langen Texten
   */
  .split-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /**
   * Buttons: Mehr Padding links/rechts
   */
  .btn-hero {
    padding: 1.25rem 2.5rem;
  }
}

/* ==========================================
   DESKTOP (1024px+)
   ========================================== */

/**
 * Desktop-Breakpoint: Split-Screen Layout aktivieren
 *
 * Warum 1024px: Standard-Laptop-Breite, ab hier
 * macht nebeneinander-Layout Sinn
 *
 * WICHTIG: Hier wechselt Layout von Column zu Grid!
 */
@media (min-width: 1024px) {
  /**
   * Hero-Section: Viel mehr Padding, minimale Höhe
   *
   * 6rem = 96px vertikal: Schafft "Hero"-Gefühl
   * min-height 80vh: Hero nimmt fast ganzen Screen ein
   *
   * Flexbox: Zentriert Container vertikal
   */
  .split-hero {
    padding: 6rem 3rem;
    min-height: 80vh;
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
  }

  /**
   * Container: CSS Grid für 50/50 Split
   *
   * Grid statt Flexbox: Exakte 50/50 Aufteilung garantiert
   * gap 6rem: Viel Abstand zwischen Left und Right
   *
   * align-items center: Zentriert Inhalte vertikal,
   * falls eine Seite höher ist als die andere
   */
  .split-hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    gap: 6rem;
    align-items: center;
  }

  /**
   * Titel: Dynamische Größe mit clamp()
   *
   * clamp(min, ideal, max):
   * - min: 3rem (48px) bei sehr kleinen Screens
   * - ideal: 5vw (5% der Viewport-Breite)
   * - max: 4.5rem (72px) bei sehr großen Screens
   *
   * Warum: Titel skaliert mit Screen-Breite,
   * wird aber nie zu klein oder zu groß
   */
  .split-hero__title {
    font-size: clamp(3rem, 5vw, 4.5rem);
  }

  /**
   * Untertitel: Größer auf Desktop
   */
  .split-hero__subtitle {
    font-size: 1.25rem;
  }

  /**
   * CTA-Actions: Mehr Margin unten
   * (trennt Buttons visuell vom Badge)
   */
  .split-hero__actions {
    margin-bottom: 3rem;
  }

  /**
   * Checklist-Items: Stagger-Animation
   *
   * Animation: Items fliegen nacheinander von links ein
   * Startet mit opacity: 0 (unsichtbar)
   *
   * Warum Animation: Macht Seite lebendiger,
   * zieht Aufmerksamkeit auf Services
   *
   * WICHTIG: Wird deaktiviert bei prefers-reduced-motion
   * (siehe unten)
   */
  .checklist-item {
    opacity: 0;
    animation: slideInRight 0.6s ease forwards;
  }

  /**
   * Stagger-Effect: Jedes Item startet 0.1s später
   *
   * Item 1: 0.1s delay
   * Item 2: 0.2s delay
   * Item 3: 0.3s delay
   * ...
   *
   * nth-child(n+7): Ab 7. Item alle mit 0.7s delay
   */
  .checklist-item:nth-child(1) { animation-delay: 0.1s; }
  .checklist-item:nth-child(2) { animation-delay: 0.2s; }
  .checklist-item:nth-child(3) { animation-delay: 0.3s; }
  .checklist-item:nth-child(4) { animation-delay: 0.4s; }
  .checklist-item:nth-child(5) { animation-delay: 0.5s; }
  .checklist-item:nth-child(6) { animation-delay: 0.6s; }
  .checklist-item:nth-child(n+7) { animation-delay: 0.7s; }
}

/* ==========================================
   ANIMATION KEYFRAMES
   ========================================== */

/**
 * Slide-In-Right Animation: Von links einf liegen
 *
 * From: 30px nach links, unsichtbar (opacity 0)
 * To: Original-Position, sichtbar (opacity 1)
 *
 * Dauer: 0.6s (siehe .checklist-item)
 * Easing: ease (langsam → schnell → langsam)
 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================== */

/**
 * prefers-reduced-motion: Deaktiviert alle Animationen
 *
 * Warum: WCAG 2.1 Success Criterion 2.3.3
 * Manche User (Vestibulär-Erkrankungen, Epilepsie)
 * werden durch Bewegung übel oder bekommen Anfälle
 *
 * Lösung: Animation komplett entfernen,
 * Items sofort sichtbar anzeigen
 */
@media (prefers-reduced-motion: reduce) {
  .checklist-item {
    animation: none !important;
    opacity: 1 !important;
  }

  .btn-hero:hover {
    transform: none;
  }

  .checklist-item:hover {
    transform: none;
  }
}

/* ==========================================
   LARGE DESKTOP (1400px+)
   ========================================== */

/**
 * Extra-große Screens: Noch mehr Gap
 *
 * Warum: Auf sehr breiten Monitoren (>1400px)
 * würde 6rem Gap zu eng wirken
 */
@media (min-width: 1400px) {
  .split-hero__container {
    gap: 8rem;
  }
}

/* ==========================================
   SMALL LANDSCAPE PHONES (568px - 767px)
   ========================================== */

/**
 * Landscape-Modus auf kleinen Phones
 *
 * Problem: Im Landscape ist Höhe gering (z.B. 375px)
 * Lösung: Reduziert Padding vertikal
 */
@media (min-width: 568px) and (max-width: 767px) and (orientation: landscape) {
  .split-hero {
    padding: 2rem 1.5rem;
    min-height: auto;
  }

  .split-hero__title {
    font-size: 2rem;
  }

  .split-hero__actions {
    margin-bottom: 1.5rem;
  }
}