/* KIdemie — Bewegung (N13, 16.10.2026). Regeln: collabV4/harness/gestaltung/DYNAMIK.md (Zahlen §2, Messweg §3.1).
   Ein Ort pro Bewegung: Dauerbewegung NUR im Held der Startseite — seit M9 (17.10.2026, S1) das Netz-Canvas (web/netz-canvas.js,
   Zyklus 12 s); die Bühne des Zeichens unten bleibt für Seiten, die sie tragen (zur Zeit keine).
   sonst Einflug (550 ms, einmal) und Hover (150 ms). Inhalt und Übung bleiben still.
   Alles Bewegte steht unter prefers-reduced-motion: no-preference — reduce zeigt sofort das Endbild (Bauregeln).
   Unter 800 px Breite keine Dauerbewegung (Auftrag N13): die Bühne verschwindet dort ganz.
   Einbindung (N12, web-rahmen.mjs): diese Datei NACH stil.css; in .held der Startseite ein Kind
     <div class="zeichen-buehne" aria-hidden="true"><img class="zeichen-lebt" src="/marke-animiert.svg?v=…" width="290" height="290" alt=""></div>
   Kein Hex hier — nur Tokens aus stil.css. */

/* ── Bühne: rechts neben h1, absolut, damit sie den Textfluss (USP-Abstand, N12-Tor) nicht verschiebt. 20 px nach oben:
   bei top 0 streifte der Hof der Aura unten den Rand der Übungskarte (Bild 1280-hell, 16.10.2026, 10:2x) — Inhalt bleibt still. ── */
.zeichen-buehne { display: none; }
@media (min-width: 800px) {
  .held:has(> .zeichen-buehne) { position: relative; padding-right: calc(var(--buehne, 340px) + 24px); min-height: var(--buehne, 340px); }
  .zeichen-buehne {
    display: grid; place-items: center; position: absolute; top: -20px; right: 0;
    width: var(--buehne, 340px); height: var(--buehne, 340px); pointer-events: none; isolation: isolate;
  }
  .zeichen-lebt { position: relative; z-index: 1; display: block; width: 290px; height: 290px; }
  /* Aura: ein Kegelverlauf aus den drei Farben des Hauses im Wechsel mit Leere — der Wechsel hell/farbig ist es, was das Auge
     (und das Graustufen-Maß aus DYNAMIK §3.1) als Bewegung sieht; reine Farbwechsel gleicher Helligkeit zählen kaum.
     Falle (gemessen 16.10.2026, 10:1x): drei gleiche Keulen im 120°-Takt drehen sich in 4 s (12-s-Zyklus) genau um EINEN
     Helligkeits-Takt weiter — das Maß sah 3,2 %. Darum ungleiche Keulen (zwei Lücken bei 80° und 280°).
     Gedreht wird der WINKEL des Verlaufs (@property), nicht die Fläche: ein gedrehtes Quadrat wüchse um 41 % über die Bühne
     hinaus und machte Querlauf. Browser ohne @property zeigen die Aura still. */
  .zeichen-buehne::before {
    content: ""; position: absolute; inset: 3%; z-index: 0; border-radius: 50%;
    background: conic-gradient(from var(--aura-winkel),
      color-mix(in srgb, var(--akzent) 80%, transparent),
      transparent 80deg,
      color-mix(in srgb, var(--frisch) 75%, transparent) 150deg,
      color-mix(in srgb, var(--altert) 70%, transparent) 210deg,
      transparent 280deg,
      color-mix(in srgb, var(--akzent) 80%, transparent));
    filter: blur(22px); opacity: .9;
  }
  /* B2 „Tief“ (seine Wahl 16.10.2026, M6; Muster M2 start-muster.html): ruhige Aura-Fläche aus --aura-a → --aura-b (= Grund) unter
     dem drehenden Kegel. Sie steht auch unter reduce und beim Anhalten da — still, aber nicht leer. */
  .zeichen-buehne::after {
    content: ""; position: absolute; inset: -6%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, var(--aura-a), var(--aura-b));
  }
}
/* Halteknopf: seit M9 (17.10.2026) im Fuß der Startseite — Gestalt in stil.css „Halteknopf im Fuß“, angelegt von bewegung.js. */
@property --aura-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* reduce: die Seite wählt das Standbild selbst (#still, :target in der SVG). Die SVG hält auch eine eigene reduce-Regel,
   aber gemessen 16.10.2026: emuliertes reduce erreichte sie im <img> nicht — dieser Weg hängt an keiner Weitergabe. */
@media (prefers-reduced-motion: reduce) {
  .zeichen-lebt { content: url("/marke-animiert.svg#still"); }
}

/* ── Bewegung nur, wo erwünscht ── */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 800px) {
    .zeichen-buehne::before { animation: aura 12s linear infinite, aura-an 900ms ease-out both; }
    .zeichen-lebt { animation: zeichen-an 700ms cubic-bezier(.2, .7, .2, 1) both; }
  }
  /* Hintergrund-Tab: bewegung.js setzt .bewegung-ruht (visibilitychange) — die Aura hält an. */
  .bewegung-ruht .zeichen-buehne::before { animation-play-state: paused; }
  /* Angehalten (Halteknopf, M6): Kegel steht, das Zeichen zeigt sein Standbild — derselbe Weg wie unter reduce. */
  .bewegung-steht .zeichen-buehne::before { animation-play-state: paused; }
  .bewegung-steht .zeichen-lebt { content: url("/marke-animiert.svg#still"); }

  /* Einflug beim ersten Laden: reines CSS, braucht kein Skript (fällt bewegung.js aus, steht trotzdem alles da). */
  .einflug { animation: einflug 550ms cubic-bezier(.2, .7, .2, 1) both; }
  .einflug:nth-child(2) { animation-delay: 80ms; }
  .einflug:nth-child(3) { animation-delay: 160ms; }
  .einflug:nth-child(4) { animation-delay: 240ms; }
  /* Einflug beim Scrollen: bewegung.js setzt .einflug-wartet NUR an Elementen unterhalb des Bildschirms (dort sieht niemand
     das Ausblenden) und tauscht beim Hereinkommen gegen .einflug-da. Die Verzögerung je Kachel setzt das Skript per CSSOM. */
  .einflug-wartet { animation: none; opacity: 0; transform: translateY(18px); }
  .einflug-da { animation: none; opacity: 1; transform: none;
    transition: opacity 550ms cubic-bezier(.2, .7, .2, 1), transform 550ms cubic-bezier(.2, .7, .2, 1); }

  /* Hover: Hub 2 px und Schatten, 150 ms (DYNAMIK §2: 120–180 ms). stil.css setzt für .kachel schon border-color .15s. */
  .heben, a.kachel {
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  }
  .heben:hover, a.kachel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--text) 35%, transparent);
  }
  /* Ein Einflug-Element, das zugleich Kachel ist, behält nach dem Einflug den Hub. */
  a.kachel.einflug-da { transition: opacity 550ms cubic-bezier(.2, .7, .2, 1), transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }

  @keyframes aura { from { --aura-winkel: 0deg; transform: scale(.96); } 50% { --aura-winkel: 180deg; transform: scale(1.03); } to { --aura-winkel: 360deg; transform: scale(.96); } }
  @keyframes aura-an { from { opacity: 0; } to { opacity: .9; } }
  @keyframes zeichen-an { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
  @keyframes einflug { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}