/* ==========================================================================
   L2 — Sektion „Signal wird zur Chance"
   Vier Phasen, gesteuert über Klassen am Wurzelelement .anim-buehne.
   Nur Opacity, Translate und Pfadlängen. Keine eigenen Farbwerte, keine
   eigene Schrift, keine externe Ressource.
   ========================================================================== */

.anim-buehne {
  --anim-zeile: var(--s10);          /* Höhe einer Zeilenspur, 96px */
  --anim-weg:   .6s;                 /* Dauer der Ein- und Ausblendung */
}

/* --------------------------------------------------------------------------
   1. Bühne: fünf Spalten, zwei Zeilen (Beschriftung / Inhalt)
   -------------------------------------------------------------------------- */
.anim-band {
  display: grid;
  grid-template-columns:
    minmax(190px, 1.30fr)   /* Dokument + Pfeil */
    minmax(136px, 1fr)      /* Fakten          */
    44px                    /* Verbindungen    */
    minmax(186px, 1.35fr)   /* Prüfung         */
    minmax(244px, 1.75fr);  /* Chancenkarte    */
  column-gap: var(--s3);
  row-gap: var(--s4);
  align-items: start;
}

.anim-kopf-1 { grid-column: 1; grid-row: 1; }
.anim-kopf-2 { grid-column: 2; grid-row: 1; }
.anim-kopf-3 { grid-column: 4; grid-row: 1; }
.anim-kopf-4 { grid-column: 5; grid-row: 1; }

.anim-block[data-block="1"] { grid-column: 1; grid-row: 2; }
.anim-block[data-block="2"] { grid-column: 2; grid-row: 2; }
.anim-verbgruppe            { grid-column: 3; grid-row: 2; }
.anim-block[data-block="3"] { grid-column: 4; grid-row: 2; }
.anim-block[data-block="4"] { grid-column: 5; grid-row: 2; }

/* --------------------------------------------------------------------------
   2. Schrittbeschriftung über den Spalten
   -------------------------------------------------------------------------- */
.anim-kopfzeile {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  min-height: 42px;
}
.anim-kopfzeile__nr {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  font-size: var(--t-mikro); font-weight: 800;
  color: var(--text-muted); background: var(--surface);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.anim-kopfzeile__text {
  font-size: var(--t-klein); font-weight: 700; line-height: 1.3;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
  padding-top: 2px;
}

.is-schritt-1 .anim-kopf-1 .anim-kopfzeile__nr,
.is-schritt-2 .anim-kopf-2 .anim-kopfzeile__nr,
.is-schritt-3 .anim-kopf-3 .anim-kopfzeile__nr,
.is-schritt-4 .anim-kopf-4 .anim-kopfzeile__nr {
  background: var(--forest); border-color: var(--forest); color: #fff;
}
.is-schritt-1 .anim-kopf-1 .anim-kopfzeile__text,
.is-schritt-2 .anim-kopf-2 .anim-kopfzeile__text,
.is-schritt-3 .anim-kopf-3 .anim-kopfzeile__text,
.is-schritt-4 .anim-kopf-4 .anim-kopfzeile__text {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   3. Grundzustand aller beweglichen Teile
   -------------------------------------------------------------------------- */
.anim-blatt, .anim-fakt, .anim-pruef, .anim-notiz,
.anim-karte, .anim-stufe, .anim-abschluss {
  opacity: 0;
  transition: opacity var(--anim-weg) var(--ease), transform var(--anim-weg) var(--ease);
  will-change: opacity, transform;
}
.anim-blatt     { transform: translate3d(0, 14px, 0); }
.anim-fakt      { transform: translate3d(-18px, 0, 0); }
.anim-pruef     { transform: translate3d(-14px, 0, 0); }
.anim-notiz     { transform: translate3d(-10px, 0, 0); }
.anim-karte     { transform: translate3d(0, 16px, 0); }
.anim-stufe     { transform: translate3d(-10px, 0, 0); }
.anim-abschluss { transform: translate3d(0, 10px, 0); }

.is-doc   .anim-blatt,
.is-f1    .anim-fakt[data-nr="1"],
.is-f2    .anim-fakt[data-nr="2"],
.is-f3    .anim-fakt[data-nr="3"],
.is-p1    .anim-pruef[data-nr="1"],
.is-p2    .anim-pruef[data-nr="2"],
.is-p3    .anim-pruef[data-nr="3"],
.is-notiz .anim-notiz,
.is-karte .anim-karte,
.is-st1   .anim-stufe[data-st="1"],
.is-st2   .anim-stufe[data-st="2"],
.is-st3   .anim-stufe[data-st="3"],
.is-ab    .anim-abschluss {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. Amtliche Meldung als Blatt
   -------------------------------------------------------------------------- */
.anim-block--doc { display: flex; align-items: center; gap: var(--s3); }

.anim-blatt {
  position: relative; overflow: hidden;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
}
.anim-blatt__ohr {
  position: absolute; left: 0; bottom: 0; width: 24px; height: 24px;
  background: var(--surface-muted);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.anim-blatt__ohr::after {
  content: ''; position: absolute; left: -4px; top: 0; width: 34px; height: 1px;
  background: var(--border); transform: rotate(45deg); transform-origin: left center;
}
.anim-blatt__kopf { display: flex; align-items: center; gap: var(--s3); }
.anim-blatt__zeichen { flex: none; }
.anim-blatt__marke {
  font-size: var(--t-mikro); font-weight: 700; line-height: 1.25;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.anim-blatt__zeilen { display: flex; flex-direction: column; gap: var(--s2); }
.anim-strich {
  display: block; height: 6px; border-radius: 3px; background: var(--surface-sink);
}
.anim-strich--luecke { background: var(--border); }

/* --------------------------------------------------------------------------
   5. Verbindungen
   -------------------------------------------------------------------------- */
.anim-verb {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--anim-weg) var(--ease);
  color: var(--border-strong);
}
.anim-verb--f1, .anim-verb--karte { color: var(--forest); }
.anim-verb--f2, .anim-verb--f3    { color: var(--clay); }

.anim-linie {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .7s var(--ease);
}
.anim-verb__v { display: none; width: 2px; height: 30px; }
.anim-verb__strich {
  display: block; width: 2px; height: 100%;
  background: currentColor; border-radius: 1px;
  transform: scaleY(0); transform-origin: top center;
  transition: transform .7s var(--ease);
}

.is-v0 .anim-verb--doc,
.is-vb1 .anim-verb--f1,
.is-vb2 .anim-verb--f2,
.is-vb3 .anim-verb--f3,
.is-vk .anim-verb--karte { opacity: 1; }

.is-v0 .anim-verb--doc .anim-linie,
.is-vb1 .anim-verb--f1 .anim-linie,
.is-vb2 .anim-verb--f2 .anim-linie,
.is-vb3 .anim-verb--f3 .anim-linie,
.is-vk .anim-verb--karte .anim-linie { stroke-dashoffset: 0; }

.is-v0 .anim-verb--doc .anim-verb__strich,
.is-vb1 .anim-verb--f1 .anim-verb__strich,
.is-vb2 .anim-verb--f2 .anim-verb__strich,
.is-vb3 .anim-verb--f3 .anim-verb__strich,
.is-vk .anim-verb--karte .anim-verb__strich { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   6. Ausgelesene Angaben und Prüfzeilen
   -------------------------------------------------------------------------- */
.anim-block--fakten,
.anim-verbgruppe,
.anim-pruefgitter {
  display: grid;
  grid-template-rows: repeat(3, var(--anim-zeile));
  gap: 0;
}
.anim-block--fakten > *, .anim-verbgruppe > *, .anim-pruefgitter > * { align-self: center; }

.anim-fakt {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  box-shadow: var(--sh-1);
}
.anim-fakt__ikon { flex: none; display: inline-flex; color: var(--text-muted); }
.anim-fakt__text {
  font-size: var(--t-klein); font-weight: 700; line-height: 1.25;
  min-width: 0; overflow-wrap: anywhere;
}

.anim-block--pruef { display: flex; flex-direction: column; }
.anim-pruefgitter { flex: none; }

.anim-pruef__was, .anim-notiz__was {
  font-size: var(--t-basis); font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere;
}
.anim-pruef .wm-quelle__fuss, .anim-notiz .wm-quelle__fuss { margin-top: var(--s1); }
.anim-pruef .wm-stufe .anim-ikon, .anim-notiz .wm-stufe .anim-ikon,
.anim-stufe .wm-stufe .anim-ikon { display: inline-flex; }

.anim-notiz { margin-top: var(--s3); }
.anim-notiz__was { font-size: var(--t-klein); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   7. Chancenkarte
   -------------------------------------------------------------------------- */
.anim-block--karte { display: flex; align-items: center; gap: var(--s2); }

.anim-karte { flex: 1 1 auto; min-width: 0; overflow: hidden; box-shadow: var(--sh-2); }
.anim-karte__bild { aspect-ratio: 16 / 10; border-radius: 0; }
.anim-karte__inhalt { padding: var(--s4); }
.anim-karte__titel {
  font-size: var(--t-h4); font-weight: 800; letter-spacing: -.012em; line-height: 1.2;
  overflow-wrap: anywhere;
}
.anim-karte__unter {
  margin-top: var(--s1);
  font-size: var(--t-klein); color: var(--text-muted); line-height: 1.4;
  overflow-wrap: anywhere;
}
.anim-karte__stufen {
  display: flex; flex-direction: column; gap: var(--s2);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.anim-stufe__zeile {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s2);
}
.anim-stufe__was { font-size: var(--t-mikro); color: var(--text-muted); }

.anim-abschluss {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.anim-abschluss__profil {
  font-size: var(--t-mikro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.anim-abschluss__fund {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--t-gross); font-weight: 800; letter-spacing: -.012em;
  color: var(--forest);
}
.anim-abschluss__fund .anim-ikon { display: inline-flex; flex: none; }
.anim-abschluss__fuss {
  margin-top: var(--s2);
  font-size: var(--t-mikro); color: var(--text-muted); line-height: 1.4;
}

/* --------------------------------------------------------------------------
   8. Fortschrittsleiste und Bedienung
   -------------------------------------------------------------------------- */
.anim-leiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4) var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.anim-punkte {
  position: relative;
  flex: 1 1 260px; min-width: 200px; max-width: 420px;
  display: flex; align-items: center; justify-content: space-between;
  height: 26px;
}
.anim-bahn {
  position: absolute; left: 13px; right: 13px; top: 50%; height: 2px;
  margin-top: -1px; background: var(--border); border-radius: 1px;
}
.anim-bahn__fuellung {
  display: block; height: 100%; width: 0;
  background: var(--forest); border-radius: 1px;
  transition: width .7s var(--ease);
}
.is-schritt-2 .anim-bahn__fuellung { width: 33.34%; }
.is-schritt-3 .anim-bahn__fuellung { width: 66.67%; }
.is-schritt-4 .anim-bahn__fuellung { width: 100%; }

.anim-punkt {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong);
  padding: 0; font: inherit; cursor: pointer; appearance: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.anim-punkt:focus-visible {
  outline: 2px solid var(--forest); outline-offset: 2px;
}
.anim-punkt__nr {
  font-size: var(--t-mikro); font-weight: 800; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
/* erledigte Schritte: gefüllte Kontur, ohne Füllfläche */
.is-schritt-2 .anim-punkt[data-nr="1"],
.is-schritt-3 .anim-punkt[data-nr="1"], .is-schritt-3 .anim-punkt[data-nr="2"],
.is-schritt-4 .anim-punkt[data-nr="1"], .is-schritt-4 .anim-punkt[data-nr="2"],
.is-schritt-4 .anim-punkt[data-nr="3"] {
  border-color: var(--forest); background: var(--forest-soft);
}
.is-schritt-2 .anim-punkt[data-nr="1"] .anim-punkt__nr,
.is-schritt-3 .anim-punkt[data-nr="1"] .anim-punkt__nr,
.is-schritt-3 .anim-punkt[data-nr="2"] .anim-punkt__nr,
.is-schritt-4 .anim-punkt[data-nr="1"] .anim-punkt__nr,
.is-schritt-4 .anim-punkt[data-nr="2"] .anim-punkt__nr,
.is-schritt-4 .anim-punkt[data-nr="3"] .anim-punkt__nr { color: var(--forest-dark); }

/* aktueller Schritt: gefüllt und zusätzlich beringt — nicht nur Farbe */
.is-schritt-1 .anim-punkt[data-nr="1"],
.is-schritt-2 .anim-punkt[data-nr="2"],
.is-schritt-3 .anim-punkt[data-nr="3"],
.is-schritt-4 .anim-punkt[data-nr="4"] {
  background: var(--forest); border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--forest-soft);
}
.is-schritt-1 .anim-punkt[data-nr="1"] .anim-punkt__nr,
.is-schritt-2 .anim-punkt[data-nr="2"] .anim-punkt__nr,
.is-schritt-3 .anim-punkt[data-nr="3"] .anim-punkt__nr,
.is-schritt-4 .anim-punkt[data-nr="4"] .anim-punkt__nr { color: #fff; }

.anim-status {
  flex: 1 1 220px;
  font-size: var(--t-klein); color: var(--text-muted); line-height: 1.35;
}
.anim-schalter { flex: none; margin-left: auto; }

/* --------------------------------------------------------------------------
   9. Schmale Ansicht: vier Phasen untereinander
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .anim-band {
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--s2);
    max-width: 440px; margin-inline: auto;
  }
  .anim-kopfzeile { margin-top: var(--s4); }
  .anim-kopf-1 { margin-top: 0; }

  .anim-block--doc,
  .anim-block--karte { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .anim-blatt { max-width: 260px; margin-inline: auto; }

  .anim-verb { align-self: center; }
  .anim-verb__h { display: none; }
  .anim-verb__v { display: block; }

  .anim-block--karte { flex-direction: column-reverse; }
  .anim-block--karte .anim-verb--karte { order: 0; }

  .anim-block--fakten,
  .anim-pruefgitter { grid-template-rows: auto auto auto; gap: var(--s2); }

  .anim-verbgruppe {
    grid-template-rows: auto; gap: 0;
    justify-items: center;
  }
  .anim-verbgruppe .anim-verb[data-nr="2"],
  .anim-verbgruppe .anim-verb[data-nr="3"] { display: none; }

  .anim-notiz { margin-top: var(--s2); }
  .anim-leiste { margin-top: var(--s6); }
  .anim-schalter { margin-left: 0; width: 100%; }
}

@media (max-width: 940px) {
  /* auf schmalen Anzeigen kommen alle drei Angaben gemeinsam an */
  .anim-verbgruppe .anim-verb--f1 { color: var(--border-strong); }
}

/* Zwischenbreiten: mehr Platz je Zeilenspur, weil die Prüftexte umbrechen */
@media (min-width: 941px) and (max-width: 1180px) {
  .anim-buehne { --anim-zeile: calc(var(--s10) + var(--s2)); }
  .anim-pruef__was { font-size: var(--t-klein); }
  .anim-karte__titel { font-size: var(--t-gross); }
}

/* --------------------------------------------------------------------------
   10. Bewegung aus: sofort der vollständige Endzustand
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .anim-blatt, .anim-fakt, .anim-pruef, .anim-notiz,
  .anim-karte, .anim-stufe, .anim-abschluss, .anim-verb {
    transition: none;
  }
  .anim-linie, .anim-verb__strich { transition: none; }
}
.anim-buehne.is-ruhig .anim-blatt,
.anim-buehne.is-ruhig .anim-fakt,
.anim-buehne.is-ruhig .anim-pruef,
.anim-buehne.is-ruhig .anim-notiz,
.anim-buehne.is-ruhig .anim-karte,
.anim-buehne.is-ruhig .anim-stufe,
.anim-buehne.is-ruhig .anim-abschluss,
.anim-buehne.is-ruhig .anim-verb { transition: none; }

/* --------------------------------------------------------------------------
   Weicher Uebergang zum Neustart. Ohne diese Regel springt der Loop hart
   auf den Anfang zurueck — das Briefing verlangt ausdruecklich ein Crossfade.
   Gesetzt von js/animation.js am Ende jedes Durchlaufs.
   -------------------------------------------------------------------------- */
.anim-buehne.is-aus .anim-block,
.anim-buehne.is-aus .anim-verbgruppe {
  opacity: 0;
  transition: opacity .85s var(--ease);
}
.anim-buehne.is-aus .anim-leiste { opacity: .5; transition: opacity .85s var(--ease); }