/* HH Cinar GmbH — Zusatz-CSS nur fuer die Seite "Ueber uns".
   style.css bleibt unveraendert; diese Datei ueberschreibt gezielt das
   Seitenverhaeltnis der Mitarbeiter-Frames von 3:4 auf 1:1, passend zu den neuen
   Fotos mit einheitlichem Hintergrund (Team-Grid + Harun/Hakan). */
.team-card__media {
  aspect-ratio: 1 / 1;
}
.person__media img {
  aspect-ratio: 1 / 1;
}

/* .person nutzt eine bewusst asymmetrische 5fr/7fr-Spaltenaufteilung (style.css).
   .person--flip dreht per "order" nur die visuelle Reihenfolge um, nicht die
   Spaltenbreiten — dadurch landet Hakans Foto in der breiteren 7fr-Spalte und
   wirkt groesser als Haruns (5fr). Hier die Spaltenbreiten fuer .person--flip
   spiegeln, damit das Foto wieder in der schmaleren (5fr) Spalte landet und
   exakt so gross wird wie bei Harun. */
@media (min-width: 900px) {
  .person--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* "Was Sie von uns erwarten koennen": dunkle Sektion bleibt schwarz, dahinter
   dezent Harun und Hakan (dasselbe Foto wie oben auf der Seite). Desktop: Foto
   links hinter der Ueberschrift, laeuft nach rechts ins Schwarz aus, damit der
   Fliesstext rechts gut lesbar bleibt. Mobil: ganzflaechig, sehr zurueckhaltend. */
.dark-section--brueder {
  position: relative;
  overflow: hidden;
}
.dark-section--brueder .container {
  position: relative;
  z-index: 1;
}
.dark-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: grayscale(1);
  opacity: 0.16;
  pointer-events: none;
}
@media (min-width: 900px) {
  .dark-section__bg {
    right: auto;
    width: 58%;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 100%);
    mask-image: linear-gradient(to right, #000 35%, transparent 100%);
  }
}