/* RD-0-05 — Bewegungs-Bausteine D (Redesign 2026/27, Entscheid 125). Rein additiv: jede Regel gilt nur im Geltungsbereich .d-system bzw.
   [data-design="2027"] (Container, <body> oder <html>); keine Bestandsseite lädt diese Datei (Einbindung erst in den Etappen 1–4, zusammen
   mit ci.css und akw-bewegung.js). Tokens: --dur-*, --ease-*, --stagger, --rise aus ci.css. Gegenstück: public/js/akw-bewegung.js.

   Regeln (Plan 4.4), die BewegungsRegelnTest erzwingt:
   1. Schleifen (infinite) stehen nur unter [data-laeuft] — das Skript setzt es, wenn das Element sichtbar, der Tab sichtbar, nichts pausiert,
      keine reduzierte Bewegung und kein Leerlauf gilt. Backoffice und Portale bekommen keine Endlosschleifen.
   2. Versteckende Startzustände (opacity:0) nur mit Skript (html.js), ohne Pause und innerhalb von prefers-reduced-motion:no-preference;
      sonst steht der Inhalt sofort da. Bei data-erstmals="nein" (Livewire nach dem ersten Rendern) wird nie versteckt oder eingeblendet.
   3. Nur Compositor-Eigenschaften in den Keyframes (transform, opacity, filter, stroke-dash*).
   4. Pause (html[data-bewegung="aus"]) wie reduzierte Bewegung: alle Animationen enden sofort im Endzustand, die Schleifen entfallen.
   Das Wurzelelement kann selbst der Scope sein; deshalb stehen die Regeln mit Wurzel-Flag je einmal für „Scope darunter“ und „Wurzel = Scope“.

   Markup:  <div data-schleife><i class="d-atmen"></i></div> · <h2 data-einblenden>…</h2> · <b data-zaehlen="1234">1.234</b> (sichtbare Kopie aria-hidden,
   Endwert zusätzlich für Screenreader) · <div data-aufbau><i class="d-ziehen"></i></div> · Leitung: <div data-leitung data-schleife><i data-leitung-linie>
   </i><i class="d-spur"></i><i class="d-knoten" data-leitung-knoten></i></div> · Pause-Knopf: <button class="d-pause-knopf" data-bewegung-schalter
   aria-pressed="false">Animationen anhalten</button> (Beschriftung aus lang/*). Stempel-Ring: [data-stempel-ring] mit --d-p (Prozent, vom Skript gesetzt). */

@property --d-p{syntax:'<percentage>';inherits:false;initial-value:0%}

@keyframes d-auf{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes d-ziehen{from{transform:scaleX(0)}}
@keyframes d-atmen{from{transform:scale(.92);opacity:.75}to{transform:scale(1.06);opacity:1}}
@keyframes d-dreh{to{transform:rotate(360deg)}}
@keyframes d-fahrt{to{transform:translateY(var(--d-weg,72px))}}
@keyframes d-strom{to{stroke-dashoffset:-24}}
@keyframes d-spur{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes d-spur-y{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes d-zuenden{0%{opacity:0}3%{opacity:1}24%,100%{opacity:0}}

/* ---- Einblenden: einmal je Anzeige (Skript setzt .ist-sichtbar und die Staffel --i). Nur der Startzustand ist animiert (backwards): danach gilt
   der natürliche Zustand des Elements, damit z. B. ein Hover-Transform erhalten bleibt. Nach dem Ende setzt das Skript .ist-fertig: Pause und
   Fortsetzen spielen es nicht noch einmal ab (bei Pause endet es über den Pause-Block unten sofort und meldet animationend). ---- */
@media screen and (prefers-reduced-motion:no-preference){
    :root.js:not([data-bewegung="aus"]) :is(.d-system,[data-design="2027"]) [data-einblenden]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *),
    :root.js:not([data-bewegung="aus"]):is(.d-system,[data-design="2027"]) [data-einblenden]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *){opacity:0}

    :is(.d-system,[data-design="2027"]) [data-einblenden].ist-sichtbar:not(.ist-fertig,[data-erstmals="nein"],[data-erstmals="nein"] *){
        animation:d-auf var(--dur-reveal) var(--ease-out) backwards;
        animation-delay:calc(var(--i,0) * var(--stagger));
    }

    /* Aufbau-Animationen (Leitung zieht sich, Bögen, Balken, Linien): starten erst, wenn der Bereich [data-aufbau] sichtbar ist; bei
       data-erstmals="nein" (schon gezeigt) wird nie angehalten. */
    :root.js:not([data-bewegung="aus"]) :is(.d-system,[data-design="2027"]) :is([data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *),[data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *) *),
    :root.js:not([data-bewegung="aus"]) :is(.d-system,[data-design="2027"]) :is([data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *),[data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *) *)::before,
    :root.js:not([data-bewegung="aus"]) :is(.d-system,[data-design="2027"]) :is([data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *),[data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *) *)::after,
    :root.js:not([data-bewegung="aus"]):is(.d-system,[data-design="2027"]) :is([data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *),[data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *) *),
    :root.js:not([data-bewegung="aus"]):is(.d-system,[data-design="2027"]) :is([data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *),[data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *) *)::before,
    :root.js:not([data-bewegung="aus"]):is(.d-system,[data-design="2027"]) :is([data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *),[data-aufbau]:not(.ist-sichtbar,[data-erstmals="nein"],[data-erstmals="nein"] *) *)::after{animation-play-state:paused}
}

/* ---- Leitung zieht sich (einmal, Backoffice): Linie als scaleX von der linken Kante. ---- */
:is(.d-system,[data-design="2027"]) .d-ziehen{transform-origin:left center;animation:d-ziehen var(--dur-flow) var(--ease-inout) .2s both}

/* Bewegung reduzieren: Linie und Ring stehen sofort im Endzustand (auch ohne ci.css). */
@media (prefers-reduced-motion:reduce){
    :is(.d-system,[data-design="2027"]) .d-ziehen{animation:none}
    :is(.d-system,[data-design="2027"]) [data-stempel-ring]{transition:none}
}

/* ---- Schleifen: ausschließlich unter [data-laeuft] (Laufsperre, WCAG 2.2.2). Takt über --d-takt je Element. ---- */
:is(.d-system,[data-design="2027"]) [data-schleife][data-laeuft] .d-atmen{animation:d-atmen var(--d-takt,9s) var(--ease-inout) infinite alternate}
:is(.d-system,[data-design="2027"]) [data-schleife][data-laeuft] .d-dreh{animation:d-dreh var(--d-takt,30s) linear infinite}
:is(.d-system,[data-design="2027"]) [data-schleife][data-laeuft] .d-fahrt{animation:d-fahrt var(--d-takt,3.6s) linear infinite}
:is(.d-system,[data-design="2027"]) [data-schleife][data-laeuft] .d-strom{animation:d-strom var(--d-takt,2.2s) linear infinite}

/* ---- Leitung: Impuls läuft die Linie entlang, die Knoten zünden (Halo, nur Deckkraft) zur vom Skript gemessenen Verzögerung. Der Impuls
   ist nur sichtbar, solange die Schleife läuft; steht sie, bleiben die Knoten statisch. ---- */
:is(.d-system,[data-design="2027"]) .d-spur{visibility:hidden}
:is(.d-system,[data-design="2027"]) [data-schleife][data-laeuft] .d-spur{visibility:visible;animation:d-spur var(--leitung-dauer,7.2s) linear infinite}
:is(.d-system,[data-design="2027"]) [data-schleife][data-laeuft][data-richtung="senkrecht"] .d-spur{animation-name:d-spur-y}
:is(.d-system,[data-design="2027"]) .d-knoten{position:relative;isolation:isolate}
:is(.d-system,[data-design="2027"]) .d-knoten::after{content:"";position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 4px var(--d-glow),0 0 24px var(--d-akzent);visibility:hidden;pointer-events:none;z-index:-1}
:is(.d-system,[data-design="2027"]) [data-schleife][data-laeuft] .d-knoten::after{visibility:visible;animation:d-zuenden var(--leitung-dauer,7.2s) linear infinite backwards;animation-delay:var(--leitung-delay,0s)}

@media (prefers-contrast:more){
    :is(.d-system,[data-design="2027"]) .d-knoten::after{box-shadow:0 0 0 2px var(--d-kontur)}
}

/* ---- Stempel-Ring: --d-p füllt sich weich (Skript setzt den Prozentwert); ohne Bewegung sofort. ---- */
:is(.d-system,[data-design="2027"]) [data-stempel-ring]{transition:--d-p 1.1s var(--ease-inout)}

/* ---- Pause-Knopf (Zielgröße 44 px, Fokusring 2 px mit 3 px Abstand, Zustand auch als Zeichen: Balken = läuft, Dreieck = angehalten). ---- */
:is(.d-system,[data-design="2027"]) .d-pause-knopf{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);border:1px solid var(--d-kante-2);border-radius:var(--radius-pill);background:var(--d-glas);color:var(--d-text-2);font:500 13px/1 var(--d-font-body);cursor:pointer}
:is(.d-system,[data-design="2027"]) .d-pause-knopf:focus-visible{outline:2px solid var(--d-fokus);outline-offset:3px}
:is(.d-system,[data-design="2027"]) .d-pause-knopf[aria-pressed="true"]{border-color:var(--d-akzent)}
:is(.d-system,[data-design="2027"]) .d-pause-knopf::before{content:"";box-sizing:border-box;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
:is(.d-system,[data-design="2027"]) .d-pause-knopf[aria-pressed="true"]::before{width:0;height:0;border-width:6px 0 6px 10px;border-style:solid;border-color:transparent transparent transparent currentColor}

/* Ohne Skript wäre der Knopf wirkungslos: dann verborgen. */
:root:not(.js) :is(.d-system,[data-design="2027"]) .d-pause-knopf,
:root:not(.js):is(.d-system,[data-design="2027"]) .d-pause-knopf{display:none}
@media (forced-colors:active){
    :is(.d-system,[data-design="2027"]) .d-pause-knopf::before{forced-color-adjust:none}
}

/* ---- Leistungsstufen (Skript setzt data-sparsam am Wurzelelement: schmale Anzeige ≤ 900 px, prefers-reduced-transparency, Datensparen):
   kein backdrop-filter; Elemente mit data-nur-voll (Bodenraster, Orbit-Karten 7–9) entfallen; reine Deko-Schleifen (data-schleife="deko") stehen. ---- */
:root[data-sparsam] :is(.d-system,[data-design="2027"]),
:root[data-sparsam] :is(.d-system,[data-design="2027"]) *,
:root[data-sparsam]:is(.d-system,[data-design="2027"]),
:root[data-sparsam]:is(.d-system,[data-design="2027"]) *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root[data-sparsam] :is(.d-system,[data-design="2027"]) [data-nur-voll],
:root[data-sparsam]:is(.d-system,[data-design="2027"]) [data-nur-voll]{display:none!important}

/* ---- Pause: wie „Bewegung reduzieren“ (ci.css) — alles endet sofort im Endzustand, nichts bleibt halb stehen. ---- */
:root[data-bewegung="aus"] :is(.d-system,[data-design="2027"]),
:root[data-bewegung="aus"] :is(.d-system,[data-design="2027"])::before,
:root[data-bewegung="aus"] :is(.d-system,[data-design="2027"])::after,
:root[data-bewegung="aus"] :is(.d-system,[data-design="2027"]) *,
:root[data-bewegung="aus"] :is(.d-system,[data-design="2027"]) *::before,
:root[data-bewegung="aus"] :is(.d-system,[data-design="2027"]) *::after,
:root[data-bewegung="aus"]:is(.d-system,[data-design="2027"]),
:root[data-bewegung="aus"]:is(.d-system,[data-design="2027"])::before,
:root[data-bewegung="aus"]:is(.d-system,[data-design="2027"])::after,
:root[data-bewegung="aus"]:is(.d-system,[data-design="2027"]) *,
:root[data-bewegung="aus"]:is(.d-system,[data-design="2027"]) *::before,
:root[data-bewegung="aus"]:is(.d-system,[data-design="2027"]) *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
}