/* CARLO Design — vorhandener Hero-CTA im ersten Bildschirm (26.10.2026)
   Nur auf Seiten mit .page-hero__cta eingebunden (Standort- und Stadtseiten).
   Haelt "Projektcheck starten" auf Handy (390 x 664) und Laptop (ab 1366 x 657)
   ohne Scrollen sichtbar. Fuegt keine neuen Buttons hinzu. */

/* Grosse Bildschirme mit normaler Hoehe: nur etwas weniger Luft ueber dem Titel */
@media (min-width: 721px) and (min-height: 821px) and (max-height: 1080px) {
  .page-hero { padding-top: calc(var(--header-height, 80px) + 4rem); }
  .page-hero__title { font-size: clamp(2.6rem, 4.6vw, 4.1rem); }
}

/* Niedrige Laptop-Bildschirme: Buttons direkt unter Titel und Bewertung */
@media (min-width: 721px) and (max-height: 820px) {
  .page-hero { padding-top: calc(var(--header-height, 80px) + 2rem); padding-bottom: 3rem; }
  .page-hero__title { font-size: clamp(2.3rem, 4vw, 3.4rem); margin: 0.75rem 0 1rem; }
  .page-hero__inner { display: flex; flex-direction: column; }
  .page-hero__inner > .page-hero__cta { order: 1; margin-top: 1.25rem; }
  .page-hero__inner > .page-hero__lead { order: 2; margin-top: 1.5rem; }
}

/* Handy */
@media (max-width: 720px) {
  .page-hero { padding-top: calc(var(--header-height, 80px) + 1rem); padding-bottom: 2.5rem; }
  .page-hero__title { font-size: clamp(2rem, 8.4vw, 2.5rem); margin: 0.6rem 0 0.8rem; }
  .page-hero__inner { display: flex; flex-direction: column; }
  .page-hero__inner > .eyebrow { margin-top: 0.75rem; }
  .page-hero__inner > .page-hero__cta { order: 1; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .page-hero__inner > .page-hero__lead { order: 2; margin-top: 1.25rem; font-size: 16px; }
  .page-hero__cta .btn:first-child { flex: 1 1 100%; justify-content: center; }
  /* Zweiter Button als schlichter Textlink, damit beide in den ersten Bildschirm passen */
  .page-hero__cta .btn + .btn { flex: 0 0 auto; padding: 0.7rem 0; border: 0; background: none; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
  .page-hero__cta .btn + .btn:hover { background: none; }
}
