/* Korrekturschritt 1 – ausschließlich Kopfbereich und Titelbild.
 * Referenzfläche: 1122 px breit, Kopf 87 px, Titelbild 330 px.
 * Bild UND Inhalt skalieren mit derselben Einheit. Kein unabhängiges cover-Zoom.
 * Unter 960 px wird der Text umgebrochen und das Gerätebild darunter angezeigt.
 * Die übrigen Abschnitte werden in dieser Datei nicht angesprochen.
 */
.site-header {
  background-image: url('../images/header-hops-referenz.webp');
  background-size: auto 100%;
}
.hero { background-color: #f4ecd9; }
.hero-picture img { object-fit: contain; }

@media (min-width: 1050px) {
  .site-header {
    --u: calc(100vw / 1122);
    --radius: calc(7 * var(--u));
  }
  .site-header .header-shell { width: 90.55%; max-width: none; grid-template-columns: 31% 1fr; }
  .site-header .brand { width: calc(252 * var(--u)); }
  .site-header .brand img { max-height: none; height: auto; }
  .site-header .header-meta { padding-right: calc(55 * var(--u)); }
  .site-header .header-navigation { margin-left: calc(18 * var(--u)); gap: calc(40 * var(--u)); }
  .site-header .header-service { width: calc(144 * var(--u)); padding-inline: calc(10 * var(--u)); }
  .site-header .primary-navigation .nav-list { gap: calc(20 * var(--u)); }
}

@media (min-width: 960px) {
  .hero {
    --u: calc(100vw / 1122);
    --radius: calc(7 * var(--u));
    min-height: calc(330 * var(--u));
  }
  .hero::before { content: none; }
  .hero .hero-picture { position: absolute; inset: 0; z-index: -1; }
  .hero .hero-picture img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  .hero .hero-inner { width: calc(100% - 120 * var(--u)); max-width: none; padding-top: calc(34 * var(--u)); padding-bottom: calc(30 * var(--u)); }
  .hero .hero-copy { width: calc(560 * var(--u)); max-width: 100%; }
  .hero h1 { font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: calc(-1.7 * var(--u)); font-weight: 800; -webkit-text-stroke: calc(.25 * var(--u)) currentColor; margin-bottom: calc(4 * var(--u)); }
  .hero .hero-subtitle { font-size: calc(22 * var(--u)); line-height: 1.18; letter-spacing: calc(-.7 * var(--u)); margin-bottom: calc(6 * var(--u)); }
  .hero .hero-text { font-size: calc(14 * var(--u)); line-height: 1.27; letter-spacing: calc(-.12 * var(--u)); max-width: none; }
  .hero .hero-actions { gap: calc(16 * var(--u)); margin-top: calc(11 * var(--u)); }
  .hero .hero-actions .button { min-width: calc(197 * var(--u)); padding-inline: calc(14 * var(--u)); }
  .hero .hero-actions .button--outline { min-width: calc(149 * var(--u)); padding-inline: calc(15 * var(--u)); }
  .hero .hero-benefits { display: grid; grid-template-columns: calc(118 * var(--u)) calc(134 * var(--u)) calc(118 * var(--u)) auto; gap: 0; margin-top: calc(26 * var(--u)); margin-left: calc(-1 * var(--u)); max-width: 100%; }
  .hero .hero-benefit { font-size: calc(11.5 * var(--u)); gap: calc(7 * var(--u)); }
  .hero .hero-benefit .round-icon { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
}

/* Small tablets: switch before desktop copy or devices would collide. */
@media (min-width: 768px) and (max-width: 959px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero::before { content: none; }
  .hero .hero-inner { order: 0; padding-top: 30px; padding-bottom: 25px; }
  .hero .hero-copy { width: 100%; }
  .hero h1 { font-size: 38px; line-height: 1.08; margin-bottom: 9px; }
  .hero .hero-subtitle { margin-bottom: 10px; }
  .hero .hero-text { font-size: 15px; max-width: none; }
  .hero .hero-actions { margin-top: 18px; }
  .hero .hero-actions .button { min-height: 44px; font-size: 13px; }
  .hero .hero-benefits { margin-top: 23px; }
  .hero .hero-picture { order: 1; position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 604 / 330; }
  .hero .hero-picture img { height: 100%; width: 100%; object-fit: contain; object-position: center; }
}
@media (max-width: 767px) {
  .hero .hero-picture { aspect-ratio: 604 / 330; }
  .hero .hero-picture img { object-fit: contain; object-position: center; }
}
@media print {
  .hero { min-height: 0; }
  .hero .hero-copy { width: 100%; }
}