/* === Header Hintergrund & Layout === */
header {
  background: linear-gradient(to bottom, #1e3a8a 0%, #2563eb 40%, #22d3ee 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(2, 24, 98, .25);
  border-bottom: none;
  position: relative;
  z-index: 1;
}

/* === Hero-Bereich === */
header .hero {
  position: relative; /* CTA & User-Info absolut verankern */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* stabiler Raum für CTA-Zeile wird per padding-bottom reserviert */
  padding: 40px 20px 32px;
  margin: 0 auto;
  max-width: 960px;
  min-height: 340px;
  background: inherit;
  background-clip: padding-box;
  color: #fff;
  box-sizing: border-box;

  /* Platz für die feste CTA-Höhe (Desktop) + Abstand */
  --cta-desktop-height: 60px;   /* aus deiner bestehenden .hero-cta */
  --cta-desktop-gap: 24px;      /* Abstand vom unteren Rand */
  padding-bottom: calc(var(--cta-desktop-height) + var(--cta-desktop-gap));
}

header .hero h1 {
  font-size: 34px;
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}

.hero-lead {
  margin: 0 auto 18px;
  max-width: 820px;
  font-size: 17px;
  line-height: 1.6;
  color: #eef6ff;
}

/* === CTA-Container ===
   Wichtig: absolut am unteren Rand zentrieren, damit die Position
   vom darüberliegenden Text unabhängig ist. */
.hero-cta {
  position: absolute;
  left: 50%;
  bottom: var(--cta-desktop-gap, 24px);
  transform: translateX(-50%);

  display: flex;
  justify-content: center;
  align-items: center; /* gleiche Baseline auf Desktop */
  gap: 12px;
  flex-wrap: wrap;

  height: 60px;        /* verhindert Springen */
  width: 100%;
  pointer-events: auto;
}

/* === Einheitliche Header-Buttons (Glas-Glow) — DESIGN UNVERÄNDERT === */
header .btn,
header button,
header input[type="button"],
header input[type="submit"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .10) 100%);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(4px);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, .10);
  transition: background .3s ease, transform .15s ease, box-shadow .3s ease;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  min-height: 46px;
}

header .btn:hover,
header button:hover,
header input[type="button"]:hover,
header input[type="submit"]:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .14) 100%);
  box-shadow: 0 6px 16px rgba(255, 255, 255, .25), 0 0 8px rgba(255, 255, 255, .30);
  transform: translateY(-1px);
}

header .btn:active,
header button:active,
header input[type="button"]:active,
header input[type="submit"]:active {
  transform: scale(0.97);
}

/* === Desktop-Größen (unverändert) === */
@media (min-width: 701px) {
  header .hero-cta .btn,
  header .hero-cta button,
  header .hero-cta input[type="button"],
  header .hero-cta input[type="submit"] {
    flex: 0 0 180px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
  }
}

/* === Mobile: Buttons untereinander & feste Position am unteren Rand === */
@media (max-width: 700px) {
  header .hero {
    min-height: 260px;
    padding: 28px 14px 24px;

    /* Auf Mobile rechnen wir mit bis zu 3 Buttons untereinander:
       3x 52px + 2x 10px Gap + 24px Rand = ~200px Reserve */
    --cta-mobile-stack-height: 200px;
    padding-bottom: var(--cta-mobile-stack-height);
  }

  header .hero h1 { font-size: 28px; }
  .hero-lead { font-size: 16px; }

  .hero-cta {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);

    height: auto;                 /* Zeile darf wachsen */
    flex-direction: column;       /* Buttons untereinander */
    align-items: center;          /* mittig ausgerichtet */
    gap: 10px;
    width: 90%;                   /* 90% der Seitenbreite */
    max-width: 90vw;              /* falls Container kleiner wäre */
  }

  header .hero-cta .btn,
  header .hero-cta button,
  header .hero-cta input[type="button"],
  header .hero-cta input[type="submit"] {
    width: 100%;
    flex: 0 0 auto;
    height: 52px;                 /* leicht kompakter auf Mobile */
  }
}

/* === Feste Positionierung der User-Info über den CTA-Buttons === */
.user-info-fixed {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;

  /* Position direkt über den Buttons */
  bottom: calc(var(--cta-desktop-height, 60px) + var(--cta-desktop-gap, 24px) + 8px);

  color: #f1f5f9;
  font-size: 14px;
  opacity: .9;

  /* blockiert keine Button-Klicks */
  pointer-events: none;
}

/* Mobile-Variante: höher, da Buttons stapeln + etwas mehr Abstand zum Text darüber */
@media (max-width: 700px) {
  .user-info-fixed {
    bottom: calc(var(--cta-mobile-stack-height, 200px) + 5px); /* vorher +10px → jetzt +14px */
    font-size: 13px;
  }

  /* Zusätzlicher Abstand zur Hero-Leadin oben */
  header .hero .hero-lead {
    margin-bottom: 26px; /* vorher 18px → jetzt 26px, nur mobil */
  }
}