/* ==========================================
   SPLIT-SCREEN HERO - CHECKLIST (RIGHT SIDE)
   Service-Items, Equipment-Box
   ========================================== */

/* ==========================================
   SERVICE-CHECKLIST (Container)
   ========================================== */

/**
 * Service-Liste: Unstyled List
 *
 * Zweck: Entfernt Browser-Default-Styles (Bullets, Padding)
 * damit wir volle Kontrolle über das Design haben
 *
 * Warum List: Semantisch korrekt für Screen-Reader
 * (Liste von Services wird als Liste erkannt)
 */
.service-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================
   CHECKLIST-ITEM (Einzelner Service)
   ========================================== */

/**
 * Single Service-Item: Flexbox Layout
 *
 * Layout: Icon (✓) links, Content rechts
 * Gap: 1rem = 16px Abstand zwischen Icon und Text
 *
 * Border-Bottom: Subtile Trennlinie zwischen Items
 * (nicht bei letztem Item, siehe :last-child)
 */
.checklist-item {
  display: flex;
  align-items: flex-start; /* Top-Alignment für mehrzeilige Items */
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  /* Transition: Smooth Animation bei Hover */
  transition: all 0.3s ease;
}

/**
 * Hover-Effekt: Verschiebt Item nach rechts
 *
 * Zweck: Visuelles Feedback, zeigt Interaktivität
 * Warum 8px: Subtil genug, um nicht störend zu wirken
 *
 * Border-Color: Wechselt zu Orange bei Hover
 */
.checklist-item:hover {
  transform: translateX(8px);
  border-bottom-color: rgba(255, 107, 53, 0.5);
}

/**
 * Letztes Item: Keine Border unten
 *
 * Warum: Verhindert doppelte Border zwischen
 * Checklist und Equipment-Box
 */
.checklist-item:last-child {
  border-bottom: none;
}

/* ==========================================
   CHECK-ICON (Orange Checkmark)
   ========================================== */

/**
 * Check-Icon: Orange ✓ Symbol
 *
 * Zweck: Visueller "Abgehakt"-Indikator,
 * verstärkt Vertrauen ("Wir bieten das!")
 *
 * flex-shrink: 0 verhindert, dass Icon kleiner wird,
 * wenn Text zu lang ist
 */
.check-icon {
  font-size: 1.5rem;
  color: #ff6b35; /* SLV Brand-Orange */
  flex-shrink: 0;
  font-weight: bold;
  line-height: 1;

  /* Zentriert Icon vertikal mit erstem Text-Block */
  margin-top: 0.1rem;
}

/* ==========================================
   CHECK-CONTENT (Text-Bereich)
   ========================================== */

/**
 * Content-Container: Nimmt verfügbaren Platz ein
 *
 * flex: 1 bedeutet: Wachse, um Restplatz zu füllen
 * (Icon ist fix, Content flexibel)
 */
.check-content {
  flex: 1;
}

/**
 * Check-Label: Titel des Service (z.B. "🚚 Regelmäßige Touren")
 *
 * Display: Block für eigene Zeile
 * Font-Weight: 600 = Semi-Bold für Hierarchie
 */
.check-label {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #ffffff;
}

/**
 * Check-Description: Untertitel des Service
 *
 * Zweck: Erklärt Service detaillierter
 * Farbe: Grau (#d1d5db) für visuelle Hierarchie
 * (wichtiger = weiß, weniger wichtig = grau)
 */
.check-description {
  display: block;
  font-size: 0.95rem;
  color: #d1d5db;
  line-height: 1.5;
}

/* ==========================================
   EQUIPMENT-BOX (Highlight-Box am Ende)
   ========================================== */

/**
 * Equipment-Highlight: Orange Box mit Spezialausrüstung
 *
 * Zweck: Hebt besonderes Feature hervor
 * (Kippsattel = Alleinstellungsmerkmal)
 *
 * Design: Orange Gradient passt zu Brand-Identity,
 * hebt sich vom schwarzen Hintergrund ab
 */
.equipment-box {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  padding: 1.5rem;
  border-radius: 12px;
  margin-top: 2rem;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/**
 * Equipment-Content: Flexbox Layout
 *
 * Layout: Icon links, Text rechts
 * Warum: Konsistent mit Checklist-Item-Layout
 */
.equipment-content {
  display: flex;
  align-items: center; /* Center-Alignment (kein mehrzeiliger Text erwartet) */
  gap: 1rem;
}

/**
 * Equipment-Icon: Großes Emoji
 *
 * Zweck: Visueller Anker, zieht Aufmerksamkeit
 * flex-shrink: 0 verhindert Verkleinerung
 */
.equipment-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

/**
 * Equipment-Text: Beschreibung der Ausrüstung
 *
 * Color: Weiß (gute Lesbarkeit auf Orange)
 * Strong: Fetter Titel oben, normaler Text unten
 */
.equipment-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #ffffff;
}

.equipment-text strong {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

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

/**
 * Focus-Within: Hebt Item hervor, wenn Kind-Element
 * (z.B. Link im Text) Fokus hat
 *
 * Warum: Verbessert Orientierung für Tastatur-User
 */
.checklist-item:focus-within {
  outline: 2px solid #ff6b35;
  outline-offset: 4px;
  border-radius: 4px;
}

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

/**
 * prefers-reduced-motion: Deaktiviert Transform-Animation
 *
 * Warum: Manche User werden durch Bewegung übel
 * (WCAG 2.1 Success Criterion 2.3.3)
 */
@media (prefers-reduced-motion: reduce) {
  .checklist-item:hover {
    transform: none;
  }

  .checklist-item {
    transition: border-color 0.2s ease;
  }
}

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

/**
 * hover: none
 * Verhindert Hover-Effekt auf Touch-Geräten
 *
 * Warum: Auf Mobile gibt es kein echtes Hover,
 * Transform würde "kleben" bleiben nach Touch
 */
@media (hover: none) {
  .checklist-item:hover {
    transform: none;
  }
}

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

/**
 * Druckoptimierung: Entfernt unnötige visuelle Effekte
 *
 * Warum: Spart Druckertinte, verbessert Lesbarkeit
 * auf Papier (kein Schatten, kein Gradient nötig)
 */
@media print {
  .equipment-box {
    background: #ffffff !important;
    color: #000000;
    border: 2px solid #000000;
    box-shadow: none;
  }

  .equipment-text {
    color: #000000;
  }

  .check-icon {
    color: #000000;
  }

  .checklist-item {
    border-bottom: 1px solid #cccccc;
  }
}