/* ============================================================
   Welcome Hero — vollflächiger Wegweiser-Hero mit 2+ CTAs.
   Layout-Werte als CSS-Vars exposed, im Tier-CSS überschreibbar
   (siehe CUSTOMER-SETUP.md → Komponenten-Vars).
   ============================================================ */

:root {
  --welcome-hero-height:              100dvh;
  --welcome-hero-min-height:          100vh;        /* Fallback wenn dvh nicht supported */
  --welcome-hero-scrim:               linear-gradient(180deg, hsl(0 0% 0% / 0.4) 0%, hsl(0 0% 0% / 0.65) 100%);
  --welcome-hero-content-max-width:   60rem;
  --welcome-hero-buttons-gap:         var(--space-4);
  --welcome-hero-btn-bg:              hsl(0 0% 100% / 0.12);
  --welcome-hero-btn-bg-hover:        hsl(0 0% 100% / 0.22);
  --welcome-hero-btn-border:          hsl(0 0% 100% / 0.5);
  --welcome-hero-btn-color:           hsl(0 0% 100%);
}

.welcome-hero {
  position: relative;
  width: 100%;
  height: var(--welcome-hero-height);
  min-height: var(--welcome-hero-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: hsl(0 0% 100%);
}

.welcome-hero .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.welcome-hero .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.welcome-hero .bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--welcome-hero-scrim);
}

.welcome-hero .content {
  position: relative;
  z-index: 1;
  max-width: var(--welcome-hero-content-max-width);
  padding: 0 var(--padding-page);
  text-align: center;
}

.welcome-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-3);
}

.welcome-hero p {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-6);
  opacity: 0.92;
}

.welcome-hero .buttons {
  display: flex;
  gap: var(--welcome-hero-buttons-gap);
  justify-content: center;
  flex-wrap: wrap;
}

.welcome-hero .buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: var(--welcome-hero-btn-bg);
  color: var(--welcome-hero-btn-color);
  border: 1px solid var(--welcome-hero-btn-border);
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: var(--button-tracking);
  transition: background var(--transition), transform var(--transition);
  backdrop-filter: blur(0.5rem);
}

.welcome-hero .buttons .btn:hover {
  background: var(--welcome-hero-btn-bg-hover);
  transform: translateY(-0.125rem);
}

/* Mobile: Buttons stacken */
@media (max-width: 44.999rem) {
  .welcome-hero h1 { font-size: var(--text-2xl); }
  .welcome-hero p  { font-size: var(--text-base); }
  .welcome-hero .buttons {
    flex-direction: column;
    width: 100%;
  }
  .welcome-hero .buttons .btn {
    justify-content: center;
  }
}