/* Header CTA "Keine Lust auf Formulare?" */

/* Wrapper: spannt den Header in voller Höhe auf und nutzt dieselbe
   Inhaltsspalte (.inner) wie der Rest der Seite, damit der CTA
   links an derselben Kante ausgerichtet ist wie z. B. die Hero-Überschrift. */
.header-bild .header-cta-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none; /* nur der CTA-Kasten selbst soll klickbar sein */
  padding-bottom: 40px; /* Platzhalter -- Abstand zur unteren Headerkante, wird noch justiert */
}

.header-cta {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 342px;
  max-width: 360px;
  padding: 20px 16px;
  border-radius: 4px;
  background: rgba(15, 69, 143, 0.5);
}

.header-cta__headline {
  margin: 0;
  width: 100%;
  font-family: "NeueHaasUnicaPro-Bold";
  font-size: 18px;
  line-height: normal;
  text-align: center;
  color: #fff;
}

.header-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.header-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 6px;
  border-radius: 2px;
  background: #fd0;
  font-family: "NeueHaasUnicaPro-Bold";
  font-size: 15px;
  color: #5e5e5e;
  text-decoration: none;
  white-space: nowrap;
}

/* Auf Mobile: "Anrufen" (tippen = direkt anrufen).
   Ab Desktop-Breakpoint: Nummer direkt anzeigen, da ein Klick
   am Desktop oft nicht zum gewünschten Anruf führt. */
.header-cta__btn-label--desktop {
  display: none;
}

@media (min-width: 950px) {
  .header-cta__btn-label--mobile {
    display: none;
  }
  .header-cta__btn-label--desktop {
    display: inline;
  }
  /* Ursprüngliche Breite bleibt die Untergrenze (min-width) -- der
     Kasten darf bei Bedarf breiter werden, damit beide Buttons
     nebeneinander passen, aber nie schmaler als das Originaldesign. */
  .header-cta {
    width: auto;
    min-width: 342px;
    max-width: 460px;
  }
  .header-cta__buttons {
    flex-wrap: nowrap;
  }
  .header-cta__btn {
    width: auto;
    padding-inline: 16px;
  }
}