/**
 * Hero Component
 *
 * Enthält:
 * - Hero Section (Haupt-Banner)
 * - Hero Content
 * - Hero CTA Buttons
 * - Responsive Styles
 *
 * Dependencies:
 * - base.css (CSS Variables)
 *
 * Extrahiert aus ui-elements.css: Zeilen 24-89
 * Datei-Größe: ~65 Zeilen
 *
 * @package SLV_Transporte
 * @version 1.0.0
 */

/* ============================================
   HERO SECTION
   ============================================ */

/**
 * Hero - Haupt-Banner Bereich
 * Für Startseite und Landing Pages
 */
.hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: var(--slv-space-l) 0;
  background: linear-gradient(135deg, var(--slv-primary-blue) 0%, var(--slv-blue-dark) 100%);
  color: var(--slv-bg-white);
  overflow: hidden;
}

/**
 * Hero Content
 */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.hero__title {
  font-size: var(--slv-font-hero);
  margin-bottom: var(--slv-space-s);
  color: var(--slv-bg-white);
}

.hero__subtitle {
  font-size: var(--slv-font-xl);
  margin-bottom: var(--slv-space-m);
  color: var(--slv-bg-white);
  opacity: 0.95;
}

.hero__text {
  font-size: var(--slv-font-l);
  margin-bottom: var(--slv-space-m);
  color: var(--slv-bg-white);
  opacity: 0.9;
}

/**
 * Hero CTA Buttons
 */
.hero__cta {
  display: flex;
  gap: var(--slv-space-s);
  flex-wrap: wrap;
}

/**
 * Hero Responsive
 */
@media (min-width: 768px) {
  .hero {
    min-height: 600px;
    padding: var(--slv-space-xl) 0;
  }
}