/* ==========================================
   SPLIT-SCREEN HERO - BASE STYLES
   Layout, Container, Background
   ========================================== */

/**
 * Hauptcontainer: Split-Screen Hero Section
 *
 * Zweck: Full-width Section mit dunklem Gradient-Background
 * Kann über Customizer mit eigenem Bild überschrieben werden
 *
 * Warum: Dunkler Hintergrund schafft Kontrast für weißen Text
 * und hebt die Hero-Section visuell hervor
 */
.split-hero {
  /* Background: Gradient als Fallback */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Text-Farbe: Weiß für dunklen Hintergrund */
  color: #ffffff;

  /* Spacing: Mobile-First (3rem vertikal) */
  padding: 3rem 1.5rem;

  /* Position: Relative für Overlay-Positionierung */
  position: relative;
  overflow: hidden;

  /* Minimum-Höhe: Verhindert zu flache Section */
  min-height: 60vh;
}

/**
 * Overlay: Dunkle Schicht über Hintergrundbild
 *
 * Zweck: Stellt Lesbarkeit von weißem Text sicher,
 * auch wenn ein helles Custom-Bild verwendet wird
 *
 * Warum: 70% Dunkelheit (0.7 opacity) ist optimal für
 * Kontrast ohne Bild komplett zu verdecken
 */
.split-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 26, 0.7); /* 70% Dunkelheit */
  z-index: 0;
  pointer-events: none; /* Overlay blockiert keine Klicks */
}

/**
 * Content-Container: Zentriert und begrenzt Breite
 *
 * Zweck: Verhindert zu breite Zeilen auf großen Monitoren
 * (über 1400px) für bessere Lesbarkeit
 *
 * Layout: Flexbox Column (Mobile-First)
 * - Mobile: Gestapelt (column)
 * - Desktop: Nebeneinander (Grid, siehe responsive.css)
 */
.split-hero__container {
  max-width: 1400px;
  margin: 0 auto;

  /* Flexbox: Mobile-First Layout */
  display: flex;
  flex-direction: column;
  gap: 2rem;

  /* Z-Index: Content über Overlay anzeigen */
  position: relative;
  z-index: 1;
}

/**
 * Left Side: CTA-Bereich (Mobile-First)
 *
 * Warum leer: Alle Styles in cta.css ausgelagert
 * Diese Klasse dient nur als Strukturelement
 */
.split-hero__left {
  /* Mobile: Full-width */
  width: 100%;
}

/**
 * Right Side: Service-Checklist (Mobile-First)
 *
 * Warum leer: Alle Styles in checklist.css ausgelagert
 * Diese Klasse dient nur als Strukturelement
 */
.split-hero__right {
  /* Mobile: Full-width, nach CTA */
  width: 100%;
}

/* ==========================================
   ACCESSIBILITY: FOCUS STYLES
   ========================================== */

/**
 * Focus-within: Hebt Container hervor, wenn
 * ein Kind-Element Fokus hat (Keyboard-Navigation)
 *
 * Warum: Verbessert Orientierung für Tastatur-User
 */
.split-hero:focus-within {
  outline: 2px solid #ff6b35;
  outline-offset: -4px;
}

/* ==========================================
   PERFORMANCE: WILL-CHANGE
   ========================================== */

/**
 * GPU-Beschleunigung für Overlay-Animationen
 *
 * Warum: Verhindert Ruckeln beim Scrollen auf
 * mobilen Geräten (iOS Safari, Chrome Android)
 */
.split-hero::before {
  will-change: opacity;
}

/* ==========================================
   PRINT STYLES
   ========================================== */

/**
 * Druckoptimierung: Entfernt Hintergrund,
 * verwendet schwarze Schrift
 *
 * Warum: Spart Druckertinte und verbessert Lesbarkeit
 */
@media print {
  .split-hero {
    background: none !important;
    color: #000000;
    padding: 2rem 0;
    min-height: auto;
  }

  .split-hero::before {
    display: none;
  }
}