/* Mikro-Szenen der UI-Beispiele in „Leistungen“ und „Einsatzfelder“ (assets/motion/panels.js).
   Alle Bewegungszustände hängen an .zp-anim, das nur das Skript setzt: ohne JS und bei reduzierter
   Bewegung bleibt jedes Panel so, wie es im HTML steht. Farben nur Tinte, Kalk und Status-Töne,
   keine Glühfarben in Panels. Positionen nur in % und lokalen px, damit zoom: var(--ui-zoom) stimmt. */

/* Federn als linear()-Kurven (abgetastete gedämpfte Schwingung), ohne linear() die Marken-Kurve.
   --zp-spring: kurz, kaum Überschwingen (Chips, Punkte). --zp-bounce: sichtbar federnd (Flug, Balken). */
.zp-anim {
  --zp-spring: var(--ease);
  --zp-spring-d: 520ms;
  --zp-bounce: var(--ease);
  --zp-bounce-d: 820ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  .zp-anim {
    --zp-spring: linear(0, 0.017, 0.062, 0.127, 0.203, 0.286, 0.371, 0.455, 0.535, 0.609, 0.677, 0.738, 0.792, 0.839, 0.879, 0.912, 0.94, 0.963, 0.981, 0.995, 1.005, 1.013, 1.018, 1.021, 1.023, 1.023, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.013, 1.011, 1.009, 1.008, 1.006, 1.005, 1.004, 1.003, 1);
    --zp-spring-d: 600ms;
    --zp-bounce: linear(0, 0.027, 0.097, 0.194, 0.307, 0.425, 0.541, 0.649, 0.746, 0.83, 0.9, 0.957, 1, 1.032, 1.053, 1.066, 1.073, 1.073, 1.07, 1.064, 1.056, 1.048, 1.039, 1.031, 1.023, 1.016, 1.011, 1.006, 1.002, 0.999, 0.997, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.996, 0.997, 0.997, 1);
    --zp-bounce-d: 900ms;
  }
}
/* Außerhalb des Bildes ruhen alle CSS-Schleifen im Panel */
.zp-idle *, .zp-idle *::before, .zp-idle *::after { animation-play-state: paused !important; }
/* Sofortiges Zurücksetzen (Start einer Szene, Akkordeon zu) */
.zp-instant, .zp-instant *, .zp-instant *::before, .zp-instant *::after { transition: none !important; }

/* ---------- Bausteine ---------- */
/* Ein- und Ausblenden aus der Unschärfe; .zp-pop springt dazu aus der Verkleinerung */
.zp-anim .zp-fx { transition: opacity 500ms var(--ease), filter 650ms var(--ease), transform var(--zp-spring-d) var(--zp-spring); }
.zp-anim .zp-off { opacity: 0; filter: blur(4px); }
.zp-anim .zp-off.zp-pop { filter: none; transform: scale(0.82); }
.zp-anim .zp-dim { opacity: 0.38; }
.zp-anim .zp-stage { transition: opacity 500ms var(--ease); }
.zp-anim .zp-fade { opacity: 0; }

/* Platzhaltertext und Endtext übereinander im selben Rasterfeld: gleiche Größe in jedem Zustand */
.zp-sw { display: inline-grid; }
.zp-sw > * { grid-area: 1 / 1; align-self: center; transition: opacity 420ms var(--ease), filter 560ms var(--ease); }
.zp-sw.r > * { justify-self: end; }
.zp-sw.o > .zp-sw-b { position: absolute; right: 0; top: 0; bottom: 0; margin-block: auto; }
.zp-sw.o > .mini-btn { padding-inline: 10px; }
.zp-sw > .zp-sw-b, .zp-sw.is-b > .zp-sw-a { opacity: 0; filter: blur(4px); pointer-events: none; }
.zp-sw.is-b > .zp-sw-b { opacity: 1; filter: none; pointer-events: auto; }

/* Wörter, die geschrieben werden (Platz bleibt reserviert) oder beim Lesen kurz dunkel werden */
.zp-anim .zp-w { transition: opacity 400ms var(--ease), color 420ms var(--ease); }
.zp-anim .zp-w.zp-hide { opacity: 0; }
.zp-anim .zp-cur { position: relative; }
.zp-anim .zp-cur::after { content: ""; position: absolute; left: 100%; top: 0.14em; width: 2px; height: 1.05em; margin-left: 2px; background: currentColor; animation: zm-blink 1s steps(1) infinite; }

/* Kurzer Druck auf einen Button (der Mensch gibt frei) */
.zp-press { animation: zp-press 420ms var(--ease); }
@keyframes zp-press { 35% { transform: scale(0.9); } }

/* ---------- 01 Potenziale: Abläufe werden bewertet und in die Matrix sortiert ---------- */
/* Die Fläche „Zuerst“ liegt als eigenes Element unter den Punkten, damit sie sich füllen kann */
.zp-anim .matrix {
  background:
    linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1)) 0 50% / 100% 1px no-repeat;
}
.zp-q1 {
  position: absolute; left: 0; top: 0; width: 50%; height: 50%;
  border-top-left-radius: calc(var(--r-md) - 1px);
  background: color-mix(in srgb, var(--ok-night) 8%, transparent);
  clip-path: circle(142% at 0 0);
  transition: clip-path 1600ms var(--ease), opacity 900ms var(--ease);
}
.zp-pre .zp-q1 { clip-path: circle(0% at 0 0); opacity: 0; }
.zp-anim .matrix .q1 { transition: color 900ms var(--ease); }
.zp-pre .q1 { color: var(--on-night-muted); }
.zp-anim .matrix .pt { transition: left 1000ms var(--ease), top var(--zp-bounce-d) var(--zp-bounce), color 700ms var(--ease), opacity 500ms var(--ease); }
.zp-anim .matrix .pt::before { transition: transform var(--zp-bounce-d) var(--zp-bounce), background-color 600ms var(--ease), box-shadow 600ms var(--ease); }
.zp-anim .matrix .zp-l { transition: transform 1000ms var(--ease); }
/* Unbewertet: als Liste in der Mitte, alle Punkte gleich klein und leise */
.zp-anim .matrix .pt.zp-u { left: calc(50% - 46px); top: calc(50% + var(--zp-i) * 24px); color: var(--on-night-muted); }
.zp-anim .matrix .pt.zp-u::before { transform: scale(var(--zp-k)); background: var(--on-night-muted); box-shadow: 0 0 0 4px rgb(255 255 255 / 0); }
.zp-anim .matrix .pt.zp-u .zp-l { transform: translateX(var(--zp-dx)); }
/* Landung: ein Ring läuft einmal aus */
.zp-ping::after { content: ""; position: absolute; left: 0; top: 50%; width: var(--s); height: var(--s); margin-top: calc(var(--s) / -2); border-radius: 50%; box-shadow: 0 0 0 1px var(--on-night); opacity: 0; pointer-events: none; animation: zp-ping 1000ms var(--ease); }
@keyframes zp-ping { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }

/* ---------- 02 Eingangsrechnungen: Schritte laufen nacheinander ---------- */
/* Feine Linie zwischen den Punkten, füllt sich hinter jedem erledigten Schritt (auch im Standbild) */
.fstep .zp-link { position: absolute; left: 14.5px; top: 47px; bottom: -8px; width: 1px; background: var(--line); pointer-events: none; }
.fstep .zp-link::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 50% 0; transform: scaleY(0); transition: transform 700ms var(--ease) 120ms; }
.fstep.done > .zp-link::after { transform: none; }
[data-zp-warn] { color: var(--warn-text); }
/* Platzhalter „–“ so breit wie eine Uhrzeit, damit die Zeit später nichts umbricht */
.fstep > [data-zp-after].mono, .zp-end > [data-zp-after] { min-width: 6ch; text-align: right; }

.zp-anim .fstep .dot { position: relative; transition: background-color 450ms var(--ease), border-color 450ms var(--ease), color 450ms var(--ease); }
.zp-anim .fstep .dot > * { grid-area: 1 / 1; }
.zp-anim .fstep .dot .icon { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 480ms var(--ease) 140ms; }
.zp-anim .fstep.done .dot .icon { stroke-dashoffset: 0; }
.zp-anim .fstep.done .dot { animation: zp-done var(--zp-spring-d) var(--zp-spring); }
@keyframes zp-done { from { transform: scale(0.84); } }
.zp-n { transition: opacity 220ms var(--ease); }
.zp-anim .fstep.done .zp-n { opacity: 0; }
/* Denkt: feiner Bogen läuft um den Punkt */
.zp-ring { position: absolute; left: -1px; top: -1px; width: 30px; height: 30px; max-width: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 17 100; opacity: 0; transition: opacity 260ms var(--ease); pointer-events: none; }
.zp-r .zp-ring { opacity: 1; animation: zp-spin 950ms linear infinite; }
@keyframes zp-spin { to { transform: rotate(360deg); } }
/* Noch nicht erreicht: leiser */
.zp-anim .fstep > div, .zp-anim .fstep > .zp-end { transition: opacity 500ms var(--ease); }
.zp-anim .fstep.zp-p > div, .zp-anim .fstep.zp-p > .zp-end { opacity: 0.42; }

/* ---------- Anfrage: Begriffe werden markiert ---------- */
/* Markierung in Tinte bzw. im Warnton, bleibt im Endzustand stehen */
[data-zp-term] { --zp-mark: color-mix(in srgb, var(--ink) 38%, transparent); color: var(--ink); background: linear-gradient(var(--zp-mark), var(--zp-mark)) 0 100% / 100% 1px no-repeat; }
[data-zp-term][data-zp-tone="warn"] { background-image: linear-gradient(var(--warn), var(--warn)); }
.zp-anim [data-zp-term] { transition: background-size 700ms var(--ease), color 450ms var(--ease); }
.zp-anim [data-zp-term].zp-unmarked { background-size: 0% 1px; color: inherit; }
.zp-anim [data-zp-read] .zp-w.zp-lit { color: var(--ink); }

/* ---------- Monatsbericht: Balken wachsen ---------- */
.zp-anim .bars > div { background: none; }
.zp-anim .bars > div::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--kalk-deep); transform-origin: 50% 100%; transition: transform var(--zp-bounce-d) var(--zp-bounce); }
.zp-anim .bars > div.on::before { background: var(--night); }
.zp-anim .bars > div.zp-low::before { transform: scaleY(0); }

/* ---------- Freigaben: ein Mensch klickt „Freigeben“ ---------- */
/* Zeiger sitzt im Feld des Buttons (lokal positioniert), kommt von links, drückt, zieht sich zurück */
.zp-sw > .zp-cursor {
  position: absolute; left: 58%; top: 52%; width: 16px; height: 22px;
  justify-self: auto; align-self: auto;
  fill: var(--paper); stroke: var(--night); stroke-width: 1; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgb(8 8 20 / 0.45));
  transform-origin: 2px 2px; pointer-events: none;
  opacity: 0; transform: translate(-96px, 6px);
  transition: opacity 300ms var(--ease), transform 900ms var(--ease);
}
.zp-sw.r { position: relative; }
.zp-sw > .zp-cursor.go { opacity: 1; transform: none; }
.zp-sw > .zp-cursor.out { opacity: 0; transform: translate(10px, 8px); transition-duration: 600ms, 900ms; }
.zp-flash { animation: zp-flash 1600ms var(--ease); }
@keyframes zp-flash { from { background-color: rgb(255 255 255 / 0.07); } to { background-color: rgb(255 255 255 / 0); } }
/* Die Fläche „Zuerst“ blendet beim Zurückspulen mit den Punkten aus, ihr Aufziehen bleibt erhalten */
.zp-anim .zp-q1.zp-stage { transition: clip-path 1600ms var(--ease), opacity 500ms var(--ease); }