/* ==========================================================================
   Shared Hero Section – verwendet auf Vergleich, ROI-Rechner, Prompt Generator
   ========================================================================== */

/* Das obere Polster muss die Kopfleiste ueberbieten. Die steht auf
   position: fixed und ist 77px hoch, liegt also ueber dem Seitenanfang.
   Mit den frueheren 64px begann die Ueberschrift 13px HINTER der Leiste,
   es gab keinen Abstand, sondern eine Ueberdeckung. 120px lassen gut
   40px Luft. Die Mobilfassung weiter unten hatte das schon richtig. */
.vh-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 32px 56px;
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.vh-hero-eyebrow {
  font-size: 1.4rem;
  font-weight: 700;
  color: #191c1e;
  margin: 0 0 20px 0;
  letter-spacing: -0.01em;
}

/* Die Kopfzeile ist seit 10.09.2026 das h1 der Seite, siehe unten. Alle Werte
   sind mit .vh-hero-eyebrow oben identisch, damit sich optisch nichts aendert.
   line-height steht bewusst auf inherit statt auf einem festen Wert: als <p>
   erbte die Zeile die Zeilenhoehe vom Body, und ein h1 bekaeme sonst die des
   Themes. Ein fester Wert von 1.2 haette die Zeile bei 1.4rem um rund 7 Pixel
   kompakter gemacht und den ganzen Hero nach oben gezogen. */
.vh-hero h1.vh-hero-eyebrow {
  font-size: 1.4rem;
  font-weight: 700;
  color: #191c1e;
  letter-spacing: -0.01em;
  line-height: inherit;
  margin: 0 0 20px 0;
}

.vh-hero-sep {
  display: inline-block;
  width: 1px;
  height: 0.7em;
  background: #191c1e;
  vertical-align: middle;
  margin: 0 0.1em;
}

.vh-hero h1,
.vh-hero-h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #069669;
  margin: 0 0 24px 0;
}

.vh-hero-subtitle {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 auto 40px;
  max-width: 100%;
}

.vh-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.vh-hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.vh-hero-trust-item .material-symbols-outlined {
  font-size: 18px !important;
  padding: 6px;
  background: rgba(5, 150, 105, 0.08);
  border-radius: 8px;
  color: #069669;
  line-height: 1;
  flex-shrink: 0;
}

.vh-hero-trust-item span:last-child {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4b5563;
  line-height: 1;
}

.vh-hero-eyebrow br.br-mobile,
.vh-hero-h2 br.br-mobile,
.vh-hero h1 br.br-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Auch hier lag das Polster zu knapp an der 77px hohen festen
     Kopfleiste: 88px liessen 11px Luft. Gemessen am 13.08.2026. */
  .vh-hero {
    padding: 112px 20px 32px;
  }
  .vh-hero-eyebrow br.br-mobile,
  .vh-hero-h2 br.br-mobile,
  .vh-hero h1 br.br-mobile {
    display: block;
  }
  .vh-hero-eyebrow,
  .vh-hero h1.vh-hero-eyebrow {
    font-size: 1rem;
  }
  .vh-hero h1,
  .vh-hero-h2 {
    font-size: 1.65rem;
  }
  .vh-hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  .vh-hero-subtitle br {
    display: none;
  }
  .vh-hero-trust {
    gap: 10px;
  }
  .vh-hero-trust-item {
    gap: 4px;
  }
  .vh-hero-trust-item .material-symbols-outlined {
    font-size: 14px !important;
    padding: 6px;
  }
  .vh-hero-trust-item span:last-child {
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}