/* ============================================================
   diBP – laufende Menschen
   Ein flaches Band unter der Überschrift „Das ist diBP“.
   Die Farben stehen als Variablen, damit menschen.js sie
   auslesen und auf das Canvas übertragen kann.
   ============================================================ */

.mn-band{
  --mn-fern:   #D3D8DD;   /* Figuren weit hinten  */
  --mn-nah:    #7E8A95;   /* Figuren weit vorne   */
  --mn-kopf:   #9AA5AE;   /* Kopf und Hals        */
  --mn-akzent: #A72920;   /* jede sechste Figur   */

  position:relative;
  height:clamp(150px,18vw,215px);
  margin:clamp(44px,6vw,72px) 0 0;
  overflow:hidden;
  /* Die Figuren laufen an allen vier Kanten aus, damit das Band nicht
     wie ein abgeschnittenes Bild wirkt, sondern wie ein Ausschnitt. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 16%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 16%,#000 88%,transparent 100%);
  mask-composite:intersect;
}
.mn-leinwand{display:block;width:100%;height:100%}

/* Keine harte Standlinie: die Figuren stehen je nach Tiefe auf
   verschiedenen Höhen, eine gerade Linie darunter sähe falsch aus. */

.mn-bu{
  margin:clamp(6px,1.4vw,14px) 0 clamp(40px,5.5vw,64px);
  font-size:14px;line-height:1.55;color:var(--slate);text-align:center;
}

@media (max-width:640px){
  .mn-band{height:clamp(120px,28vw,160px);margin-top:clamp(32px,8vw,48px)}
}

/* Ohne Bewegung bleibt das Band leer – eine Reihe eingefrorener
   Figuren sagt nichts aus und lenkt nur ab. */
@media (prefers-reduced-motion:reduce){
  .mn-band{display:none}
}