/* ===========================================================================
   Personen-Container
   ---------------------------------------------------------------------------
   Drei freigestellte Personen als getrennte Ebenen in einem Container.
   Alle Ebenen eines Motivs haben dieselbe Leinwand und sind pixelgenau
   zueinander registriert – deshalb reicht inset: 0, es muss nichts
   ausgerichtet werden.
   =========================================================================== */

.personen {
  /* Motiv 2 (gesetzt). Motiv 1 wäre 3975 / 2930. */
  --verhaeltnis: 3587 / 2926;

  /* EINE stetige Regel, kein Umschaltpunkt.

     Zwei Festlegungen, geradlinig verbunden:
        75 % der Fensterbreite bei 375 px  (Handy)
        50 % der Fensterbreite ab 1440 px  (Desktop)

     Daraus die Gerade durch (375 | 281) und (1440 | 720):
        Steigung 0,412  ->  calc(41.2vw + 127px)
     Das max() sorgt dafür, dass oberhalb von 1440 px exakt 50vw gilt.

     Andere Werte gewünscht? Zwei Punkte einsetzen und neu ausrechnen:
        Steigung = (b2 - b1) / (w2 - w1)
        Achsenabschnitt = b1 - Steigung * w1

     Warum eine Rampe und kein Umschaltpunkt: Ein Umschaltpunkt bei 700 px
     ließ die Gruppe zwischen 691 und 703 px Fensterbreite von 968 auf
     352 px kippen. Eine Untergrenze an der HÖHE machte die Breitenregel
     über weite Strecken wirkungslos. Die Rampe hängt an derselben Größe
     wie die Regel selbst und kann sie deshalb nicht aushebeln. */

  position: relative;
  width: min(max(50vw, calc(41.2vw + 127px)), 104vh);
  width: min(max(50vw, calc(41.2vw + 127px)), 104dvh);
  aspect-ratio: var(--verhaeltnis);

  /* Ohne das schrumpft der Container als Flex-Element auf die verfügbare
     Breite zusammen – der Mobil-Anschnitt (140vw) käme nie zustande. */
  flex-shrink: 0;

  /* Überstand nach unten. Zwei Gründe:

     1. aspect-ratio liefert oft eine gebrochene Höhe (z.B. 656,4 px). Das
        Bild rendert dann eine Haaresbreite kürzer als sein Kasten.
     2. Beim schnellen Ziehen am Fensterrand ändern sich Fensterhöhe und
        Gruppenhöhe gleichzeitig. Zwischen der Neuberechnung des Kastens und
        dem Neuzeichnen des Bildes liegt manchmal ein Einzelbild – dann klafft
        unten kurz eine Lücke und der Hintergrund blitzt durch.

     Ein Pixel reicht dafür nicht. Vier Pixel schlucken auch den ruckartigen
     Fall. Sichtbar verloren geht dabei nichts: die Personen sind unten
     ohnehin angeschnitten. */
  margin-bottom: -4px;
}

.personen__ebene {
  position: absolute;
  inset: 0;
}

.personen__ebene img {
  display: block;
  width: 100%;
  height: 100%;
}


/* HINWEISE zur Platzierung:

   1. UNTEN VERANKERN. Die Personen sind im Original an der Unterkante
      angeschnitten. Das umgebende Element braucht align-items: flex-end
      oder Vergleichbares – frei mit Luft darunter geht nicht.

   2. FESTE HÖHE, NICHT min-height. Das umgebende Element braucht
      height: 100dvh und overflow: hidden. Mit min-height wächst es mit,
      sobald die Gruppe höher wird als das Fenster – dann entsteht eine
      Scrollleiste und die Gruppe "hüpft" beim Ziehen am Fensterrand,
      statt oben sauber angeschnitten zu werden.

   3. SEITLICH ÜBERLAUF ERLAUBEN. Im Hochformat ist der Container breiter
      als der Bildschirm. overflow: hidden deckt beides ab.

   4. KEIN HINTERGRUND enthalten. Der kommt separat dahinter.
*/