/* ==========================================
   SPLIT-SCREEN HERO - CTA BEREICH (LEFT SIDE)
   Titel, Untertitel, Buttons, Badge
   ========================================== */

/* ==========================================
   HAUPTTITEL
   ========================================== */

/**
 * Hero-Titel: Gradient-Text mit Orange-Akzent
 *
 * Zweck: Zieht sofort Aufmerksamkeit durch auffälligen
 * Orange-Gradient (Brand-Farbe SLV)
 *
 * Warum Gradient: Moderner Look, hebt sich vom
 * schwarzen Hintergrund ab, passt zur Markenidentität
 *
 * Technik: -webkit-background-clip für Gradient-Text
 * (funktioniert in allen modernen Browsern)
 */
.split-hero__title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;

  /* Gradient-Text: Orange zu Hell-Orange */
  background: linear-gradient(135deg, #ff6b35 0%, #ffb088 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Fallback für ältere Browser (kein Gradient-Support) */
  color: #ff6b35;
}

/**
 * Untertitel: Beschreibung + Social Proof
 *
 * Zweck: Erklärt Leistung und schafft Vertrauen
 * ("500+ zufriedene Kunden")
 *
 * Warum grau: #d1d5db ist hell genug für Lesbarkeit,
 * aber dezenter als reines Weiß (Hierarchie)
 */
.split-hero__subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: #d1d5db;
  margin-bottom: 2rem;
  max-width: 500px; /* Begrenzt Zeilenlänge für Lesbarkeit */
}

/* ==========================================
   CTA BUTTONS
   ========================================== */

/**
 * Button-Container: Flexbox für Spacing
 *
 * Zweck: Stapelt Buttons auf Mobile, zeigt sie
 * nebeneinander auf Desktop (siehe responsive.css)
 *
 * Gap: 1rem = 16px Abstand zwischen Buttons
 */
.split-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

/**
 * Base Button Style: Gemeinsame Eigenschaften
 *
 * Warum Inline-Flex: Zentriert Icon + Text,
 * ermöglicht präzise Ausrichtung
 *
 * min-height 56px: WCAG 2.1 Touch-Target-Size
 * (mindestens 44px, wir nutzen 56px für Komfort)
 */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;

  /* Transition: Smooth Animation bei Hover */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  white-space: nowrap;
  text-align: center;
  cursor: pointer;

  /* WCAG 2.1: Mindest-Touch-Target-Size */
  min-height: 56px;

  /* Verhindert Text-Selektion beim Double-Tap */
  user-select: none;
}

/**
 * Primary Button: Orange Gradient (Haupt-CTA)
 *
 * Zweck: "Jetzt anfragen" ist primäre Aktion
 * → Orange-Gradient zieht maximale Aufmerksamkeit
 *
 * Box-Shadow: Subtiler Schatten schafft Tiefe,
 * verstärkt sich bei Hover
 */
.btn-hero--primary {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.btn-hero--primary:hover {
  background: linear-gradient(135deg, #e55a2a 0%, #e67a31 100%);
  transform: translateY(-2px); /* Hebt sich leicht an */
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.btn-hero--primary:focus {
  outline: 3px solid #ff6b35;
  outline-offset: 4px;
}

/**
 * Secondary Button: Transparent mit Border (Telefon)
 *
 * Zweck: Sekundäre Aktion (Anrufen) soll sichtbar
 * sein, aber nicht mit Primary konkurrieren
 *
 * Warum Transparent: Lässt Hintergrund durchscheinen,
 * wirkt weniger aufdringlich als Solid-Button
 */
.btn-hero--secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.btn-hero--secondary:hover {
  background: rgba(255, 255, 255, 0.1); /* Leichter Hover-Effekt */
  transform: translateY(-2px);
}

.btn-hero--secondary:focus {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

/**
 * Active State: Visuelles Feedback bei Klick
 *
 * Warum scale(0.98): Subtiler "Eindrück-Effekt"
 * signalisiert, dass Button geklickt wurde
 */
.btn-hero:active {
  transform: scale(0.98);
}

/* ==========================================
   BADGE (Optional)
   ========================================== */

/**
 * Badge: "Seit 20XX" oder Trust-Signale
 *
 * Zweck: Schafft Glaubwürdigkeit durch Erfahrung
 * Kann über Customizer ein-/ausgeblendet werden
 *
 * Design: Subtile Orange-Box mit Transparenz,
 * passt zur Brand-Identity
 */
.split-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;

  /* Halbtransparenter Orange-Hintergrund */
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.3);
  border-radius: 20px;

  font-size: 0.875rem;
  color: #ffb088;
}

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

/**
 * prefers-reduced-motion: Deaktiviert Animationen
 * für User mit Motion-Sensitivität
 *
 * Warum: WCAG 2.1 Success Criterion 2.3.3
 * Manche User werden durch Bewegung übel
 */
@media (prefers-reduced-motion: reduce) {
  .btn-hero:hover {
    transform: none; /* Keine Bewegung */
  }

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

  .btn-hero {
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
}

/* ==========================================
   ACCESSIBILITY: HIGH CONTRAST MODE
   ========================================== */

/**
 * prefers-contrast: high
 * Erhöht Kontrast für sehbehinderte User
 *
 * Warum 3px Border: Standard 2px ist bei hohem
 * Kontrast zu dünn, 3px verbessert Sichtbarkeit
 */
@media (prefers-contrast: high) {
  .btn-hero--secondary {
    border-width: 3px;
  }

  .split-hero__title {
    /* Deaktiviert Gradient, nutzt Solid-Color */
    -webkit-text-fill-color: #ff6b35;
    color: #ff6b35;
  }
}

/* ==========================================
   ACCESSIBILITY: TOUCH DEVICES
   ========================================== */

/**
 * hover: none
 * Verhindert Hover-Effekte auf Touch-Geräten
 *
 * Warum: Auf Mobile gibt es kein echtes "Hover"
 * (Touch = Click), Hover-State bleibt "kleben"
 */
@media (hover: none) {
  .btn-hero:hover {
    transform: none;
    background: initial; /* Entfernt Hover-Style */
  }

  .btn-hero--primary:hover {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  }

  .btn-hero--secondary:hover {
    background: transparent;
  }
}

/* ==========================================
   FOCUS STYLES (Keyboard Navigation)
   ========================================== */

/**
 * Focus-Visible: Zeigt Fokus nur bei Tastatur,
 * nicht bei Maus-Klick
 *
 * Warum: Fokus-Ring ist wichtig für Tastatur-User,
 * aber störend bei Maus-Klicks
 */
.btn-hero:focus:not(:focus-visible) {
  outline: none;
}

.btn-hero:focus-visible {
  outline: 3px solid #ff6b35;
  outline-offset: 4px;
  z-index: 1; /* Fokus-Ring über anderen Elementen */
}