/* ============================================================================
   pages/unternehmen.css — AP-G: seitenspezifische Ergaenzungen fuer /unternehmen.html
   ============================================================================
   site.css bleibt Eigentum von AP-A. Hier stehen nur Dinge, die dort fehlen:

   1. .hero-compact.with-media — Variante des Katalog-Heros mit Hintergrundbild
      statt reinem Text. .hero-compact selbst bleibt unveraendert (site.css);
      diese Datei ergaenzt nur Bild-Layer + Overlay fuer ausreichenden Kontrast.
   2. .credit-line — sichtbare Bildnachweis-Zeile im Hero, analog zu pages/pv.css.
   3. .team-card — begrenzt die Breite einer einzelnen Team-Karte in .cards,
      damit sie im 3-Spalten-Raster nicht wie ein Darstellungsfehler wirkt.
   ========================================================================== */

.hero-compact.with-media {
  color: #fff;
  background: var(--surface-dark);
}

.hero-compact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-compact-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-compact.with-media::before {
  background: linear-gradient(100deg, rgba(20, 24, 48, .86) 0%, rgba(20, 24, 48, .74) 42%, rgba(20, 24, 48, .32) 100%);
  z-index: 1;
}

.hero-compact.with-media .wrap {
  z-index: 2;
}

.hero-compact.with-media h1 {
  color: #fff;
}

.hero-compact.with-media p.lead {
  color: rgba(255, 255, 255, .82);
}

.hero-compact.with-media .breadcrumb a,
.hero-compact.with-media .breadcrumb span {
  color: rgba(255, 255, 255, .7);
}

.credit-line {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .68);
  text-transform: uppercase;
  margin: var(--sp-4) 0 0;
}

.team-card {
  max-width: 300px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-compact.with-media img { transition: none; }
}