/* Holzbach Ventures, Szene M1 "Alle wachsen mit" (#menschen, Nacht).
   Präfix .mn-, keine globalen Element-Selektoren. Zeitfunktion ausschließlich ease-in-out. */

.mn {
  position: relative;
  background: var(--nacht);
  color: var(--auf-nacht);
  overflow-x: clip;
}

/* Bühne: ohne Pinning normaler Fluss; mit Pinning (Klasse vom Skript) hohe Bühne, Inhalt klebt. */
.mn-stage {
  padding-block: var(--sektion);
}
.mn.mn-pin .mn-buehne { height: 180vh; }
.mn.mn-pin .mn-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--s-kopf-h, 72px) 24px;
}
.mn.mn-pin .mn-raster { width: 100%; }
.mn.mn-pin .mn-feld { height: clamp(300px, calc(100vh - 400px), 600px); height: clamp(300px, calc(100svh - 400px), 600px); }
.mn.mn-pin .mn-abb { margin-top: clamp(28px, 4.5vh, 56px); }

/* Kopf: Überschrift und Text */
.mn-kopf {
  display: grid;
  gap: 20px;
}
.mn-h2 {
  margin: 0;
  font-size: var(--s-h2-groesse, var(--gr-h2));
  font-weight: var(--s-h2-gewicht, 600);
  line-height: var(--s-h2-zeilenabstand, 1.04);
  letter-spacing: var(--s-h2-laufweite, -0.032em);
  text-wrap: balance;
}
.mn-text {
  margin: 0;
  max-width: 34em;
  font-size: var(--gr-lead);
  line-height: 1.55;
  color: var(--auf-nacht-2);
  text-wrap: pretty;
}
@media (min-width: 960px) {
  .mn-kopf {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spalte-abstand);
    align-items: end;
  }
  .mn-h2 { grid-column: 1 / span 6; }
  .mn-text { grid-column: 7 / span 6; padding-bottom: 0.3em; }
}

/* Abbildung */
.mn-abb {
  margin: clamp(36px, 6vh, 72px) 0 0;
}
.mn-feld {
  position: relative;
  height: clamp(300px, 86vw, 380px);
  border: 1px solid var(--nacht-linie);
}
@media (min-width: 720px) {
  .mn-feld { height: clamp(320px, 46vw, 460px); }
}
@media (min-width: 1024px) {
  .mn-feld { height: clamp(320px, 48vh, 470px); }
}

/* Canvas: reicht rechts bis an den Bildschirmrand (Breite setzt das Skript), damit das Bündel aus dem Bild läuft. */
.mn-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}

/* Ohne Skript: Endzustand als Vektorbild */
.mn-ersatz { position: absolute; inset: 0; width: 100%; height: 100%; }
.mn-ersatz path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mn-ersatz-mensch { stroke: var(--messing-hell); stroke-width: 1px; stroke-opacity: 0.9; }
.mn-ersatz-ki { stroke: var(--signal-nacht); stroke-width: 0.75px; stroke-opacity: 0.8; }

/* Passkreuze an den vier Ecken des Abbildungsrahmens (je 11 px, 1 px stark) */
.mn { --mn-kreuz: var(--s-kreuz-nacht, #46556c); }
.mn-ecken { position: absolute; inset: -1px; pointer-events: none; z-index: 2; }
.mn-kreuz { position: absolute; width: 11px; height: 11px; }
.mn-kreuz::before, .mn-kreuz::after { content: ""; position: absolute; background: var(--mn-kreuz); }
.mn-kreuz::before { left: 5px; top: 0; width: 1px; height: 11px; }
.mn-kreuz::after { left: 0; top: 5px; width: 11px; height: 1px; }
.mn-kreuz:nth-child(1) { left: -5px; top: -5px; }
.mn-kreuz:nth-child(2) { right: -5px; top: -5px; }
.mn-kreuz:nth-child(3) { left: -5px; bottom: -5px; }
.mn-kreuz:nth-child(4) { right: -5px; bottom: -5px; }

/* Zähler: bleibt in jedem Zustand gleich (gezählt aus der Zeichnung) */
.mn-zaehler {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--auf-nacht);
}
.mn-zaehler-wert { white-space: nowrap; }
.mn-zahl { font-weight: 600; }
.mn-schema {
  padding: 0 6px 1px;
  border: 1px solid var(--nacht-linie);
  color: var(--auf-nacht-2);
  font-weight: 500;
}

/* Unterschrift und Legende */
.mn-unterschrift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  margin-top: 14px;
  color: var(--auf-nacht-2);
}
.mn-unterschrift .mn-legende { margin-left: auto; }
@media (max-width: 719px) {
  .mn-unterschrift { gap: 10px 20px; }
  .mn-unterschrift .mn-legende { margin-left: 0; flex-basis: 100%; }
}
.mn-abb-titel { color: var(--auf-nacht); }
.mn-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mn-legende-eintrag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.mn-muster {
  width: 32px;
  height: 6px;
  flex: none;
  overflow: visible;
}
.mn-muster path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mn-muster--mensch path { stroke: var(--messing-hell); stroke-width: 1.5px; }
.mn-muster--ki path { stroke: var(--signal-nacht); stroke-width: 1px; }
@media (min-resolution: 2dppx) {
  .mn-muster--mensch path { stroke-width: 1px; }
  .mn-muster--ki path { stroke-width: 0.5px; }
}