/**
 * Cards Component
 *
 * Enthält:
 * - Standard Cards (Card, Card Header/Body/Footer)
 * - Feature Cards (mit Gradients und Icons)
 * - Card Grids (2, 3, 4, 6 Spalten)
 *
 * Dependencies:
 * - base.css (CSS Variables)
 *
 * Extrahiert aus components.css: Zeilen 507-592 + 1730-2111
 * Datei-Größe: ~466 Zeilen
 *
 * @package SLV_Transporte
 * @version 1.0.0
 */

/* ============================================
   CARDS
   ============================================ */

/**
 * Card - Standard Content-Box
 * Wiederverwendbare Karte f�r Services, Features, etc.
 */
.card {
  background-color: var(--slv-bg-white);
  border-radius: var(--slv-radius-m);
  padding: var(--slv-space-m);
  box-shadow: var(--slv-shadow-sm);
  transition: all var(--slv-transition-base);
}

.card:hover {
  box-shadow: var(--slv-shadow-lg);
  transform: translateY(-4px);
}

/**
 * Card Header
 */
.card__header {
  margin-bottom: var(--slv-space-s);
}

.card__title {
  font-size: var(--slv-font-xl);
  margin-bottom: var(--slv-space-xs);
  color: var(--slv-text-dark);
}

/**
 * Card Body
 */
.card__body {
  color: var(--slv-text-muted);
  line-height: var(--slv-line-height-loose);
}

/**
 * Card Footer
 */
.card__footer {
  margin-top: var(--slv-space-m);
  padding-top: var(--slv-space-s);
  border-top: 1px solid var(--slv-border-light);
}

/**
 * Card mit Icon
 */
.card--icon {
  text-align: center;
}

.card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--slv-space-s);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--slv-bg-light);
  border-radius: var(--slv-radius-m);
}

/**
 * Card Varianten
 */
.card--blue {
  background-color: var(--slv-primary-blue);
  color: var(--slv-bg-white);
}

.card--blue .card__title,
.card--blue .card__body {
  color: var(--slv-bg-white);
}

.card--yellow {
  background-color: var(--slv-primary-yellow);
}



/* ============================================
   FEATURE CARDS (Alternating Colors)
   ============================================ */

/**
 * Card Feature - Optimierte Basis-Komponente für Feature/USP Cards
 *
 * OPTIMIERUNGEN 2025:
 * - Größeres Padding (3rem statt 2rem) für luftigeres Design
 * - Modernerer Border-Radius (0.75rem statt 0.5rem)
 * - Weichere Schatten (0 4px 12px) für dezente Tiefe
 * - Höhere Min-Height (320px statt 280px) wegen größerer Icons
 * - Längere Transition (0.35s) für smoothere Animationen
 * - GPU-Beschleunigung (will-change, translateZ) für 60fps
 *
 * Verwendung:
 * - Kombiniere mit --blue oder --yellow Varianten
 * - Zeigt Icon (Phosphor Icons), Überschrift und Beschreibung
 * - Min-Height verhindert ungleiche Höhen
 * - Hover-Effekt: Verstärkter Lift + Shadow
 *
 * Beispiel:
 * <div class="card-feature card-feature--blue">
 *   <div class="card-feature__icon"><i class="ph ph-trophy"></i></div>
 *   <h3 class="card-feature__title">Überschrift</h3>
 *   <p class="card-feature__text">Beschreibung</p>
 * </div>
 */
.card-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-height: 320px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
  /* 3D Transform Support für rotateX */
  transform-style: preserve-3d;
  perspective: 1000px;
}

/**
 * Card Feature - Blaue Variante mit Gradient
 *
 * Gradient: Hell-Blau (#5cb8e9) → Dunkel-Blau (#1177A0)
 * Richtung: 135deg (diagonal von links-oben nach rechts-unten)
 * Wirkung: Dezent, modern, hochwertig
 * Text: Weiß für optimale Lesbarkeit
 * Icon-Bereich: Hellblau mit 20% Opacity
 */
.card-feature--blue {
  background: linear-gradient(135deg, #5cb8e9 0%, #1177A0 100%);
  color: var(--slv-bg-white);
}

.card-feature--blue .card-feature__title,
.card-feature--blue .card-feature__text {
  color: var(--slv-bg-white);
}

.card-feature--blue .card-feature__icon {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--slv-bg-white);
}

/**
 * Card Feature - Gelbe Variante mit Gradient
 *
 * Gradient: Hell-Gelb (#fcbc5b) → Dunkel-Gelb (#d99a44)
 * Richtung: 135deg (diagonal von links-oben nach rechts-unten)
 * Wirkung: Dezent, modern, hochwertig
 * Text: Dunkel für optimalen Kontrast (AAA: 8.5:1)
 * Icon-Bereich: Dezentes Dunkel mit 15% Opacity
 */
.card-feature--yellow {
  background: linear-gradient(135deg, #fcbc5b 0%, #d99a44 100%);
  color: var(--slv-text-dark);
}

.card-feature--yellow .card-feature__title,
.card-feature--yellow .card-feature__text {
  color: var(--slv-text-dark);
}

.card-feature--yellow .card-feature__icon {
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 0, 0, 0.15);
  color: var(--slv-text-dark);
}

/**
 * Card Feature Icon - Vergrößerter Kreisförmiger Icon-Bereich
 *
 * OPTIMIERUNGEN 2025:
 * - Größe: 85px × 85px (vorher 64px, +33% größer)
 * - Icon-Size: 2.75rem / 44px (vorher 2rem / 32px, +37% größer)
 * - Margin-Bottom: 1.5rem (vorher 1rem) für mehr Luftigkeit
 * - Font-Weight: normal (Phosphor Icons haben eigenes Weight)
 * - Transition: Smooth animation für Hover-Effekte
 *
 * Enthält: Phosphor Icons (<i class="ph ph-*"></i>)
 * Border-Radius: 50% (Kreis)
 * Touch-optimiert (85px > 44px Minimum)
 */
.card-feature__icon {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  font-weight: normal;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Phosphor Icon innerhalb des Kreises
 * Line-height: 1 für perfekte vertikale Zentrierung
 */
.card-feature__icon i {
  line-height: 1;
}

/**
 * Card Feature Title - Überschrift
 *
 * OPTIMIERUNGEN 2025:
 * - Font-Weight: 600 (vorher 700) für weicheren, moderneren Look
 * - Font-Size: clamp() für responsive Typografie (1.5rem → 2rem)
 * - Letter-Spacing: -0.02em für engeren, moderneren Look
 *
 * Font: Heading (Montserrat) für Konsistenz
 * Size: Responsive mit clamp() (Mobile 1.5rem, Desktop 2rem)
 * Line-Height: Tight (1.2) für Überschriften
 */
.card-feature__title {
  font-family: var(--slv-font-heading);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/**
 * Card Feature Text - Beschreibung
 *
 * OPTIMIERUNGEN 2025:
 * - Font-Size: clamp() für responsive Typografie (0.95rem → 1.05rem)
 * - Line-Height: 1.6 für optimale Lesbarkeit
 * - Opacity: 0.95 für subtilen Kontrast zur Überschrift
 *
 * Font: Body (Inter) für optimale Lesbarkeit
 * Size: Responsive mit clamp() (Mobile 0.95rem, Desktop 1.05rem)
 * Line-Height: 1.6 (readable)
 */
.card-feature__text {
  font-family: var(--slv-font-body);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.95;
  margin: 0;
}

/**
 * Card Feature Hover - Premium Floating-Effekt mit 3D & Glow
 *
 * UPGRADE v1.1.0 - Animation Enhancement Phase 1:
 * - Transform: translateY(-12px) + rotateX(2deg) für 3D-Effekt
 * - Farbiger Glow basierend auf Card-Variante (Blau/Gelb)
 * - Stärkerer, aber weicher Schatten
 *
 * Effekt:
 * - Card "schwebt" nach oben mit leichter Neigung
 * - Farbiger Glow verstärkt die Markenfarben
 * - Premium-Feeling ohne übertrieben zu sein
 *
 * @since 1.1.0 - Animation Enhancement Phase 1
 */
.card-feature:hover {
  transform: translateY(-12px) rotateX(2deg);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

/* Blau: Blauer Glow-Effekt */
.card-feature--blue:hover {
  box-shadow:
    0 16px 32px rgba(92, 184, 233, 0.25),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Gelb: Goldener Glow-Effekt */
.card-feature--yellow:hover {
  box-shadow:
    0 16px 32px rgba(252, 188, 91, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

/**
 * Icon Hover-Animation - Pulse & Scale
 *
 * UPGRADE v1.1.0:
 * - Pulse-Animation bei Card-Hover
 * - Stärkerer Scale (1.15 statt 1.1)
 * - Background wird aufgehellt
 *
 * Effekt:
 * - Icon "pulsiert" einmal beim Hover
 * - Zieht Aufmerksamkeit auf den USP
 *
 * @since 1.1.0 - Animation Enhancement Phase 1
 */
.card-feature:hover .card-feature__icon {
  transform: scale(1.1);
  animation: subtle-pulse 0.6s ease-in-out;
}

@keyframes subtle-pulse {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.18); }
}

.card-feature--blue:hover .card-feature__icon {
  background-color: rgba(255, 255, 255, 0.25);
}

.card-feature--yellow:hover .card-feature__icon {
  background-color: rgba(0, 0, 0, 0.2);
}

/**
 * Focus-States für Accessibility - Keyboard-Navigation
 *
 * NEUE OPTIMIERUNG 2025:
 * - Deutlicher goldener Outline (3px) für hohe Sichtbarkeit
 * - Offset von 4px für Abstand zur Card
 * - WCAG 2.1 konform für bessere Accessibility
 * - Nur bei :focus-visible (nicht bei Maus-Klick)
 *
 * Wichtig:
 * - Keyboard-Nutzer können Cards navigieren
 * - Screen-Reader-freundlich
 * - Keine störende Focus-Indication bei Maus-Nutzung
 */
.card-feature:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 4px;
}

/**
 * Accessibility: Reduzierte Bewegung
 *
 * Deaktiviert Hover-Animation für Nutzer mit prefers-reduced-motion
 * Wichtig für Motion-Sensitivity und Epilepsie-Prävention
 */
@media (prefers-reduced-motion: reduce) {
  .card-feature {
    transition: none;
  }

  .card-feature:hover {
    transform: none;
  }

  /* Scroll-Reveal: Sofort sichtbar bei reduced-motion */
  .card-feature.scroll-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   SCROLL-REVEAL ANIMATION - Feature Cards
   ============================================ */

/**
 * Scroll-Reveal für Feature Cards
 *
 * Cards erscheinen mit Fade-In + Slide-Up Animation
 * wenn sie in den Viewport scrollen.
 *
 * VERWENDUNG:
 * - Füge .scroll-reveal Klasse zu .card-feature hinzu
 * - JavaScript (scroll-animations.js) fügt .is-visible hinzu
 *
 * STAGGER-EFFEKT:
 * - Cards erscheinen nacheinander mit 100ms Verzögerung
 * - nth-child(1) = 0ms, nth-child(2) = 100ms, etc.
 *
 * @since 1.1.0 - Animation Enhancement Phase 2
 */

/* Initial State: Unsichtbar und nach unten versetzt */
.card-feature.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}

/* Visible State: Sichtbar und an Position */
.card-feature.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger-Effekt: Jede Card 100ms verzögert */
.card-feature.scroll-reveal:nth-child(1).is-visible { transition-delay: 0ms; }
.card-feature.scroll-reveal:nth-child(2).is-visible { transition-delay: 100ms; }
.card-feature.scroll-reveal:nth-child(3).is-visible { transition-delay: 200ms; }
.card-feature.scroll-reveal:nth-child(4).is-visible { transition-delay: 300ms; }
.card-feature.scroll-reveal:nth-child(5).is-visible { transition-delay: 400ms; }
.card-feature.scroll-reveal:nth-child(6).is-visible { transition-delay: 500ms; }

/* ============================================
   FEATURE CARD GRIDS (Responsive Layouts)
   ============================================ */

/**
 * Card Grid 2 Spalten - Container für 2 Cards
 *
 * Responsive:
 * - Mobile (< 640px): 1 Spalte
 * - Tablet+ (≥ 640px): 2 Spalten
 *
 * Gap: 1.5rem Mobile, 2rem Desktop
 */
.card-grid--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/**
 * Card Grid 3 Spalten - Container für 3 Cards
 *
 * Responsive:
 * - Mobile (< 640px): 1 Spalte
 * - Tablet (640px - 1023px): 2 Spalten
 * - Desktop (≥ 1024px): 3 Spalten
 */
.card-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/**
 * Card Grid 4 Cards - Container für 4 Cards
 *
 * Responsive:
 * - Mobile (< 640px): 1 Spalte
 * - Tablet/Desktop (≥ 640px): 2×2 Grid (2 Spalten, 2 Reihen)
 *
 * OPTIMIERT für Lesbarkeit:
 * 2×2 Grid bietet größere Cards und bessere Textlesbarkeit
 * Mit quadratischen Cards (aspect-ratio 1:1) für moderne Optik
 */
.card-grid--4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 3vw, 3rem);
    max-width: 1200px;
    margin: 0 auto;
  }
}

/**
 * Card Grid 6 Cards - Container für 6 Cards
 *
 * Responsive:
 * - Mobile (< 640px): 1 Spalte
 * - Tablet (640px - 1023px): 2 Spalten
 * - Desktop (≥ 1024px): 3×2 Grid (3 Spalten)
 */
.card-grid--6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .card-grid--6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .card-grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/**
 * Feature Section - Wrapper für Card-Grids
 *
 * Funktion:
 * - Zentriert Content (max-width)
 * - Gibt seitlichen Abstand (padding)
 * - Verhindert Überlauf auf kleinen Screens
 *
 * Verwendung (optional):
 * <div class="feature-section">
 *   <h2>Überschrift</h2>
 *   <div class="card-grid--4">...</div>
 * </div>
 */
.feature-section {
  max-width: var(--slv-content-width);
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 768px) {
  .feature-section {
    padding: 0;
  }
}