/* ==========================================================================
   BILDBAND - blaues Band mit Motiv als Grund
   Am 29.08.2026 herausgeloest, als die Bauform zum fuenften Mal gebraucht
   wurde. Vorher stand sie viermal fast wortgleich in Seitendateien:
     .pschael     pages/produkt.css      (Produktdetailseiten, FREIGEGEBEN)
     .kaabbinder  pages/karriere.css     (/karriere/stellen/)
     .heschael    pages/herstellung.css  -> nutzt jetzt dieses Bauteil
     .pukern      pages/produkte.css     -> nutzt jetzt dieses Bauteil

   NICHT MIGRIERT sind .pschael und .kaabbinder. .pschael steht auf
   freigegebenen Seiten; .kaabbinder traegt einen zusaetzlichen Knopf. Beide
   sind gemeldet und gehoeren beim naechsten Anfassen hierher.

   DER VERLAUF IST GERICHTET, nicht gleichmaessig: links dicht unter dem Text,
   rechts durchlaessig, damit das Motiv sichtbar bleibt. Das unterscheidet das
   Bildband von .hiheute auf /unternehmen/historie/, das gleichmaessig deckt.
   ========================================================================== */
.bildband {
  position: relative;
  overflow: hidden;
  background: var(--toem-blau);
  padding-block: clamp(var(--sp-8), 9vw, var(--sp-9));
  color: var(--on-blau-2);
}
.bildband__media { position: absolute; inset: 0; }
.bildband__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Je Seite ueberschreibbar: das Motiv entscheidet, wo der Mittelpunkt liegt. */
  object-position: var(--band-fokus, 60% 50%);
  display: block;
}
.bildband__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(12, 36, 62, 0.95) 0%,
      rgba(12, 36, 62, 0.92) 40%,
      rgba(12, 36, 62, 0.76) 62%,
      rgba(12, 36, 62, 0.58) 100%);
}
/* Kein max-width hier: das Element traegt auch .wrap und dessen
   margin-inline: auto. Zusammen mit einer Breitenbegrenzung landet der
   Textblock in der Bildmitte statt am linken Seitenraster. Die Begrenzung
   gehoert an die Kinder. */
.bildband__inner { position: relative; }
.bildband__title,
.bildband__sub { max-width: 46rem; }
.bildband__title { color: var(--on-blau-1); }
.bildband__title em { color: var(--toem-gold); }
.bildband__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-400);
  color: var(--on-blau-2);
}
.bildband__text {
  margin: var(--sp-5) 0 0;
  max-width: 46rem;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
}
.bildband__aktion { margin: var(--sp-6) 0 0; }
/* Gold traegt auf dem blauen Band. Auf hellem Grund haelt das Hausgold nur
   1,79:1 - deshalb steht der Weg nur hier in Gold. */
.bildband__weg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  text-decoration: none;
}
.bildband__weg svg {
  flex: none;
  width: var(--zeichen-inline);
  height: var(--zeichen-inline);
  transition: translate var(--dur-hover) var(--ease-hover);
}
.bildband__weg:hover svg { translate: var(--sp-2) 0; }