/* Paketlokale Hero-Styles: deckungsgleich zum App-Hero (ui/src/components/Hero.css) */

/* Blauer Hero-Hintergrund + weißer Text, identisch zu App */
.hero--blue {
  position: relative;
  padding: 120px 0; /* entspricht .hero aus App-Hero.css */
  color: var(--white); /* #ffffff */
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); /* var(--primary)=oklch(0.208 0.042 265.755), var(--primary-dark)=#0e3eab */
}

/* Sicherstelle weiße Typo innerhalb des Hero */
.hero--blue h1,
.hero--blue p {
  color: var(--white);
}

/* CTA-Outline-Button: identisch zu .hero .btn-hero-outline in App-Hero.css */
.hero--blue .btn-hero-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 10px;
  min-height: 48px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hero--blue .btn-hero-outline:hover,
.hero--blue .btn-hero-outline:focus {
  background: var(--white);
  color: #0F1F3A;
}

.hero--blue .btn-hero-outline:active {
  background: var(--white);
  color: #0A101D;
}

.hero--blue .btn-hero-outline:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: none;
}

/* Optionale Alias-Klasse für About-CTA (falls genutzt) */
.hero--blue .btn-hero-about {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 10px;
  min-height: 48px;
  padding: 12px 20px;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero--blue .btn-hero-about:hover,
.hero--blue .btn-hero-about:focus-visible {
  background-color: var(--white);
  color: #0F1F3A;
}
.hero--blue .btn-hero-about:active {
  background-color: var(--white);
  color: #0F1F3A;
}