/* ===========================================================================
   DIE LEMNISKATE — der Ablauf als geschlossener Weg
   Aufbau nach der Referenz (Baulig): liegende Acht, nummerierte Stationen
   auf dem Pfad, Richtungspfeile, Zulauf oben und Ablauf unten.

   Estera-Material statt Farbband:
   — zwei parallele Haarlinien, wie eine Guilloche auf einem Wertpapier
   — Medaillons statt bunter Kreise, gleiche Form wie das Siegel
   — die Linie zieht sich beim Scrollen in einem Zug auf

   WICHTIG: Die Kreuzung in der Mitte bleibt frei. Sobald dort etwas liegt,
   liest man zwei Kreise statt einer Acht.
   =========================================================================== */

.loop {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.loop__stage { position: relative; }
.loop__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Zu- und Ablauf ------------------------------------------------------- */
.loop__feed {
  fill: none;
  stroke: rgba(16, 41, 73, 0.62);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  color: rgba(16, 41, 73, 0.55);
  /* pathLength="1000" im Markup: die Dash-Werte sind dadurch von der
     echten Geometrie entkoppelt und können nicht zu kurz geraten. */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
[data-drawn='true'] #loop-in  { transition: stroke-dashoffset 0.8s var(--ease-soft); stroke-dashoffset: 0; }
[data-drawn='true'] #loop-out { transition: stroke-dashoffset 0.9s var(--ease-soft) calc(var(--t, 3) * 1s); stroke-dashoffset: 0; }

/* --- Die Acht ------------------------------------------------------------- */
.loop__band {
  fill: none;
  stroke: rgba(16, 41, 73, 0.3);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.loop__line {
  fill: none;
  stroke: rgba(16, 41, 73, 0.88);
  stroke-width: 2.8;
  vector-effect: non-scaling-stroke;
}
.loop__band, .loop__line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
[data-drawn='true'] .loop__band {
  transition: stroke-dashoffset 2.2s var(--ease-soft) 0.75s;
  stroke-dashoffset: 0;
}
[data-drawn='true'] .loop__line {
  transition: stroke-dashoffset 2.2s var(--ease-soft) 0.6s;
  stroke-dashoffset: 0;
}

/* Richtungspfeile auf dem Weg */
.loop__marks path {
  fill: none;
  stroke: var(--gold-text);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft) calc(var(--t, 2) * 1s);
}
[data-drawn='true'] .loop__marks path { opacity: 1; }

/* Stationen auf dem Pfad */
.loop__dots g {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.45s var(--ease-soft) calc(var(--t, 2) * 1s),
              transform 0.45s var(--ease-soft) calc(var(--t, 2) * 1s);
}
[data-drawn='true'] .loop__dots g { opacity: 1; transform: scale(1); }
.loop__dots circle {
  fill: var(--paper-warm);
  stroke: var(--gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.loop__dots text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: var(--gold-text);
  text-anchor: middle;
  dominant-baseline: central;
}

/* --- Beschriftung der Stationen ------------------------------------------ */
/* Liegt als HTML über der Grafik, damit echte Schrift und echter Umbruch
   greifen. Die Positionen kommen aus der Pfadberechnung. */
.loop__labels { position: absolute; inset: 0; pointer-events: none; }

.loop__label {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.18vw, 1.18rem);
  line-height: 1.2;
  color: var(--ink-black);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.55s var(--ease-soft) calc((var(--t, 2) + 0.1) * 1s);
}
[data-drawn='true'] .loop__label { opacity: 1; }
.loop__label--links  { transform: translate(-100%, -50%); text-align: right; }
.loop__label--rechts { transform: translate(0, -50%); text-align: left; }

/* --- Ergebnis: klein und fein, direkt unter dem Ablaufpfeil --------------- */
.loop__result {
  margin-top: clamp(0.4rem, 1.4vh, 1rem);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.65vw, 1.65rem);
  letter-spacing: 0.02em;
  color: var(--ink-black);
}

@media (prefers-reduced-motion: reduce) {
  .loop__band, .loop__line, .loop__feed { stroke-dashoffset: 0; }
  .loop__marks path, .loop__dots g, .loop__label { opacity: 1; transform: none; }
  .loop__dots g { transform: none; }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 780px) {
  /* Beschriftung wird sonst zu eng an der Kurve — kleiner setzen */
  .loop__label { font-size: 0.92rem; }
  .loop__dots text { font-size: 19px; }
}

/* --- Marke im Kreuzungspunkt --------------------------------------------- */
/* Klein gehalten: Die Kreuzarme der Acht müssen daneben sichtbar bleiben,
   sonst liest man wieder zwei Kreise statt einer Acht. */
.loop__mid {
  position: absolute;
  left: 50%;
  top: 36.25%;                /* Schnittpunkt: y=232 von 640 Einheiten */
  transform: translate(-50%, -50%);
  padding: 0.3em 0.62em;
  background: var(--paper-warm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.72rem, 0.92vw, 0.92rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--navy-800);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s var(--ease-soft) 3s;
}
[data-drawn='true'] .loop__mid { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .loop__mid { opacity: 1; } }