/* Block «Seitenkopf» — Figma «hero-video»: Startseite 1119, Unterseiten 700 bei 1728 */

.gw-hero {
  position: relative;
  height: clamp(420px, 40.5vw, 700px);
  color: var(--weiss);
  background: var(--dunkelgruen-700);
}
.gw-hero--gross { height: clamp(560px, 64.76vw, 1119px); }
/*
 * Unterseiten: Das gestapelte Menü (ab 1101) endet bei 513 px, «Login» braucht also
 * mind. 553 px Kopf (40 Luft). Stetig ohne Sprung bei 1100/1101: bis 834 wie bisher 420,
 * dann mitwachsend bis 553, ab ~1366 wieder 40.5vw (1440: 583, 1728: 700 wie Figma).
 */
.gw-hero:not(.gw-hero--gross) { height: max(clamp(420px, 50vw + 3px, 553px), min(40.5vw, 700px)); }

.gw-hero__medium { position: absolute; inset: 0; overflow: hidden; }
.gw-hero__medium::before,
.gw-hero__medium::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Verlauf oben → unten: rgba(0,0,0,.5) → transparent */
.gw-hero__medium::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0)); }
/* Verlauf rechts → links: rgba(0,0,0,.4) → transparent (Startseite 2214:3023) */
.gw-hero__medium::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(102, 102, 102, 0)); }
/* Unterseiten (2121:3013, 2128:4389, 2134:6733, 2204:5815, 2204:6563): links → rechts, rgba(0,0,0,.6) bei 85 % */
.gw-hero:not(.gw-hero--gross) .gw-hero__medium::after { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.6) 85%); }

.gw-hero__video,
.gw-hero__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text: links 80, Breite 632, Unterkante 81 (2214:3024: top 909 bei 1119), Drop Shadow/600 */
.gw-hero__text {
  position: absolute;
  z-index: 2;
  /* Über 1728 bündig mit dem Logo im Kopf (−1: Figma Text 80, Logo 81) */
  left: max(var(--rand), (100% - var(--kopf-breite)) / 2 - 1px);
  bottom: clamp(48px, 4.69vw, 81px);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  width: min(632px, 100% - 2 * var(--rand));
  text-transform: uppercase;
  filter: drop-shadow(0 16px 16px rgba(12, 12, 13, 0.4));
}
.gw-hero__text > p { margin: 0; }

/* Inter Medium, s 20, 1.5 */
.gw-hero__kicker {
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.4vw, var(--text-s));
  line-height: 1.5;
}

/* Titel Semibold, lg 32, 1.3, Sperrung 1.28 */
.gw-hero__titel {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, var(--text-lg));
  line-height: 1.3;
  letter-spacing: var(--sperrung-titel);
  /* Keine Waise («TRADITION» allein), bei 1728 unverändert */
  text-wrap: balance;
}

/*
 * Störer «Das sind wir»: 200 × 200, um 7° gedreht, ragt ins Weisse
 * (Korrekturen: «Rechts runder Störer, kommt ins weisse»).
 * Figma: links 83.33 % − 4 px, Unterkante 41 px unter dem Bild.
 */
.gw-stoerer {
  position: absolute;
  z-index: 3;
  /* Nie über den rechten Rand (901–1300 sonst abgeschnitten); 211 = Breite 200 + margin 11 */
  left: min(calc(83.33% - 4px), calc(100% - 211px - var(--rand)));
  bottom: -41px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--text-xs-s);
  width: 200px;
  height: 200px;
  margin: 11px;
  text-decoration: none;
  color: var(--schwarz);
  transform: rotate(7deg);
  transition: transform 0.4s ease;
}
.gw-stoerer:hover { transform: rotate(0deg) scale(1.04); }

.gw-stoerer__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Stoerer: Titel Regular, s 20, 1.2, Sperrung 4 % */
.gw-stoerer__text {
  position: relative;
  max-width: 6.5em;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--text-s);
  line-height: 1.2;
  letter-spacing: var(--sperrung-titel);
  text-align: center;
}
.gw-stoerer .gw-icon { position: relative; }

@media (max-width: 900px) {
  .gw-stoerer { left: auto; right: var(--rand); width: 150px; height: 150px; bottom: -48px; gap: 8px; }
  .gw-stoerer__text { font-size: var(--text-xs); }
  .gw-stoerer .gw-icon { width: 38px; height: 38px; }
  .gw-hero__text { bottom: 96px; }
  /* Mit Störer (Kreis ragt 113 px ins Bild): Titel mind. 24 px darüber, bei 900 wieder 96 */
  .gw-hero:has(> .gw-stoerer) .gw-hero__text { bottom: clamp(96px, 201.9px - 11.76vw, 136px); }
}

@media (prefers-reduced-motion: reduce) {
  .gw-stoerer { transition: none; }
}