/* Bewegungssystem brandmediale.de (Phase 1, 19.10.2026) · Plan: 00_docs/plan-bewegung.md
   Sprache „Interface, tech, edel“: präzise, kurz, eine Kurve, keine Glows, kein Neon, keine Koralle, kein Federn, keine Parallaxe.
   Nur transform, opacity, clip-path. Zuordnung der Bausteine: js/bewegung/bewegung.js (TYPEN), Schalter: js/bewegung/frueh.js.
   Alle Regeln hängen an html.bw-an (setzt nur JS): ohne JS, ohne Schalter oder bei reduzierter Bewegung gilt hier nichts.
   Zustände: [data-bw="typ"] (zugeordnet) → .bw-da (Einsatz, Animation läuft) → .bw-fertig (Animation abgeräumt). */

:root {
  --bw-ease: cubic-bezier(.2, .7, .1, 1);   /* die eine Kurve */
  --bw-t-kurz: 240ms;                        /* Hover, kleine Wechsel */
  --bw-t: 480ms;                             /* Text, Zeilen, Listen */
  --bw-t-lang: 700ms;                        /* Überschriften, Bilder, Linien */
  --bw-staffel: 70ms;                        /* Versatz je Element einer Gruppe (JS liest den Wert) */
  --bw-weg: 10px;                            /* Hub beim Einblenden */
  --bw-hub: 2px;                             /* Karten heben sich beim Hover */
  --bw-pfeil: 4px;                           /* Pfeil fährt beim Hover */
  --bw-kante: rgba(244, 243, 240, .42);      /* Kontur beim Aufbau und Lichtkante (neutral, nie farbig) */
  --bw-spur: rgba(244, 243, 240, .14);       /* Schiene der Fortschrittslinie */
  --bw-spur-voll: rgba(244, 243, 240, .7);   /* gelaufener Teil */
}
/* helle Flächen: Konturen dunkel */
:is([data-ton="hell"], [data-modus="hell"], [data-seite-modus="hell"], .glas-hell) {
  --bw-kante: rgba(0, 0, 0, .38); --bw-spur: rgba(0, 0, 0, .12); --bw-spur-voll: rgba(0, 0, 0, .65);
}

/* Bis zum ersten Durchlauf von bewegung.js (synchron am Ende von <body>) nichts zeigen, was gleich animiert wird */
html.bw-start main#inhalt { visibility: hidden; }

@keyframes bw-hoch { from { opacity: 0; transform: translate3d(0, var(--bw-weg), 0); } to { opacity: 1; transform: none; } }
@keyframes bw-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes bw-aus { from { opacity: 1; } to { opacity: 0; } }
@keyframes bw-maske { from { transform: translate3d(0, 125%, 0); } to { transform: none; } }
@keyframes bw-wisch { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bw-tippen { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-6px, 0, 0); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 -2px 0 0); transform: none; } }
@keyframes bw-aufbau { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bw-bild { from { transform: scale(1.06); } to { transform: none; } }
@keyframes bw-scan { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate3d(var(--bw-b, 0px), 0, 0); opacity: 0; } }
@keyframes bw-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Startzustände (nur mit JS, nur bis zum Einsatz) ──────────────────────────────────────────────────────────────────── */
html.bw-an :is([data-bw="text"], [data-bw="titel"], [data-bw="zahl"], [data-bw="zeile"], [data-bw="rubrik"]):not(.bw-da) { opacity: 0; }
html.bw-an [data-bw="bild"]:not(.bw-da) { clip-path: inset(0 100% 0 0); }
html.bw-an [data-bw="linie"]:not(.bw-da) { clip-path: inset(0 100% 0 0); }
html.bw-an [data-bw="haken"]:not(.bw-da) { opacity: 0; }
html.bw-an [data-bw="karte"]:not(.bw-da) { opacity: 0; }

/* ── Einsatz ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
html.bw-an [data-bw] { --bw-v: 0ms; }

/* Fließtext, Sublines, Knopfzeilen, Fußspalten: kurz hoch */
html.bw-an [data-bw="text"].bw-da { animation: bw-hoch var(--bw-t) var(--bw-ease) var(--bw-v) both; }

/* Überschriften und Zitate: Zeile für Zeile aus einer Maske (JS teilt in .bw-zeile; Fallback: ganzer Block als eine Zeile) */
html.bw-an [data-bw="titel"].bw-da { opacity: 1; }
html.bw-an [data-bw="titel"] .bw-zeile { display: block; clip-path: inset(-.12em -.25em -.2em -.25em); }
html.bw-an [data-bw="titel"] .bw-zeile__in { display: block; white-space: nowrap; }
html.bw-an [data-bw="titel"] .bw-zeile--block .bw-zeile__in { white-space: normal; }
html.bw-an [data-bw="titel"].bw-da .bw-zeile__in { animation: bw-maske var(--bw-t-lang) var(--bw-ease) calc(var(--bw-v) + var(--bw-i, 0) * 90ms) both; }

/* Rubriken: Wisch von links, ein feiner Scan-Strich läuft voraus */
html.bw-an [data-bw="rubrik"].bw-da { opacity: 1; animation: bw-wisch var(--bw-t) var(--bw-ease) var(--bw-v) both; }
.bw-scan { position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: currentColor; pointer-events: none; opacity: 0;
  animation: bw-scan var(--bw-t) var(--bw-ease) var(--bw-v) both; }

/* Kennzahlen: zählen hoch, feste Ziffernbreite (kein Springen) */
html.bw-an [data-bw="zahl"] { font-variant-numeric: tabular-nums; }
html.bw-an [data-bw="zahl"].bw-da { animation: bw-ein var(--bw-t-kurz) var(--bw-ease) var(--bw-v) both; }

/* Listen, Zeilen, Brotkrumen, Abschnitts-Pillen, FAQ-Einträge: tippen nacheinander ein (Wisch + kurzer Versatz) */
html.bw-an [data-bw="zeile"].bw-da { animation: bw-tippen var(--bw-t) var(--bw-ease) var(--bw-v) both; }

/* Häkchen-Listen: Punkt erscheint, Häkchen zeichnet sich von links */
html.bw-an [data-bw="haken"].bw-da { animation: bw-hoch var(--bw-t) var(--bw-ease) var(--bw-v) both; }
html.bw-an [data-bw="haken"].bw-da > svg { animation: bw-wisch var(--bw-t) var(--bw-ease) calc(var(--bw-v) + 120ms) both; }

/* Bilder: Clip-Wisch statt Fade, Bild setzt sich leicht */
html.bw-an [data-bw="bild"].bw-da { animation: bw-wisch var(--bw-t-lang) var(--bw-ease) var(--bw-v) both; }
html.bw-an [data-bw="bild"].bw-da :is(img, video, picture > img) { animation: bw-bild var(--bw-t-lang) var(--bw-ease) var(--bw-v) both; }

/* Haarlinien: zeichnen sich von links (dünne Elemente selbst, sonst ein Strich an ihrer Kante) */
html.bw-an [data-bw="linie"].bw-da { animation: bw-wisch var(--bw-t-lang) var(--bw-ease) var(--bw-v) both; }
.bw-strich { position: absolute; left: 0; right: 0; height: 1px; background: var(--bw-strich-farbe, var(--bw-kante)); transform-origin: 0 50%;
  pointer-events: none; animation: bw-strich var(--bw-t-lang) var(--bw-ease) var(--bw-v) both; }
html.bw-an [data-bw="linie"].bw-mit-strich:not(.bw-fertig) { clip-path: none; animation: none; border-top-color: transparent; border-bottom-color: transparent; }

/* Karten: Kontur zeichnet sich, dann die Fläche, dann der Inhalt gestaffelt */
html.bw-an [data-bw="karte"].bw-da { opacity: 1; }
html.bw-an [data-bw="karte"].bw-da:not(.bw-fertig) .bw-flaeche { animation: bw-ein var(--bw-t) var(--bw-ease) calc(var(--bw-v) + 220ms) both; }
html.bw-an [data-bw="karte"].bw-da.bw-ohne-flaeche:not(.bw-fertig) { animation: bw-aufbau var(--bw-t-lang) var(--bw-ease) var(--bw-v) both; }
html.bw-an [data-bw="karte"].bw-da:not(.bw-fertig) [data-bw-teil] { animation: bw-hoch var(--bw-t) var(--bw-ease) calc(var(--bw-v) + 300ms + var(--bw-i, 0) * 60ms) both; }
.bw-kontur { position: absolute; inset: 0; border: 1px solid var(--bw-kante); border-radius: inherit; pointer-events: none; z-index: 1;
  animation: bw-aufbau 420ms var(--bw-ease) var(--bw-v) both, bw-aus 300ms var(--bw-ease) calc(var(--bw-v) + 460ms) forwards; }

/* abgeräumt: keine Animation mehr am Element (Hover-Transforms wirken wieder) */
html.bw-an [data-bw].bw-fertig, html.bw-an [data-bw].bw-fertig :is(.bw-zeile__in, svg, img, video, [data-bw-teil], .bw-flaeche) { animation: none; }

/* ── Abläufe: Fortschrittslinie läuft beim Scrollen mit (JS setzt --bw-p 0..1) ─────────────────────────────────────────── */
.bw-spur { position: absolute; left: -18px; top: 0; bottom: 0; width: 1px; background: var(--bw-spur); pointer-events: none; }
.bw-spur__voll { position: absolute; inset: 0; background: var(--bw-spur-voll); transform: scaleY(var(--bw-p, 0)); transform-origin: 50% 0; will-change: transform; }
@media (max-width: 900px) { .bw-spur { left: -9px; } }
html.bw-an [data-bw-ablauf] :is(.bb-m-ablauf__nr, .bb-m-ablauf__kugel) { transition: opacity var(--bw-t) var(--bw-ease); }
html.bw-an [data-bw-ablauf] .bw-vor :is(.bb-m-ablauf__nr, .bb-m-ablauf__kugel) { opacity: .4; }

/* ── FAQ und Akkordeons: Höhe (JS, Web Animations) plus Linie unter der Frage ─────────────────────────────────────────── */
.bw-akk-strich { position: absolute; left: 0; right: 0; height: 1px; background: var(--bw-kante); transform-origin: 0 50%; pointer-events: none;
  animation: bw-strich var(--bw-t) var(--bw-ease) both, bw-aus var(--bw-t) var(--bw-ease) var(--bw-t) forwards; }

/* ── Hover: heben 1–2 px, Kontur heller, Pfeil fährt, Lichtkante nur als Konturaufhellung (keine Glows) ───────────────── */
@media (hover: hover) {
  html.bw-an :is(.bb-karte--link, .bb-m-karten__zeile--link, .bm-weiter__weg, .bb-m-verweise__randeintrag):not(.glas-platte, .glas-platte *) {
    transition: transform var(--bw-t-kurz) var(--bw-ease), border-color var(--bw-t-kurz) var(--bw-ease), background-color var(--bw-t-kurz) var(--bw-ease), color var(--bw-t-kurz) var(--bw-ease);
  }
  html.bw-an :is(.bb-karte--link, .bb-m-karten__zeile--link, .bm-weiter__weg, .bb-m-verweise__randeintrag):not(.glas-platte, .glas-platte *):is(:hover, :focus-visible) {
    transform: translate3d(0, calc(var(--bw-hub) * -1), 0);
  }
  html.bw-an :is(.bb-karte--link, .bb-m-karten__zeile--link, .bb-m-verweise__randeintrag, .bm-weiter__weg) :is(.bb-m-karten__pfeil, .bb-m-verweise__randpfeil, .bm-weiter__pfeil, .bb-m-karten__kreis) {
    display: inline-block; transition: transform var(--bw-t-kurz) var(--bw-ease);
  }
  html.bw-an :is(.bb-karte--link, .bb-m-karten__zeile--link, .bb-m-verweise__randeintrag, .bm-weiter__weg):is(:hover, :focus-visible) :is(.bb-m-karten__pfeil, .bb-m-verweise__randpfeil, .bm-weiter__pfeil, .bb-m-karten__kreis) {
    transform: translate3d(var(--bw-pfeil), 0, 0);
  }
  .bw-kante { position: absolute; inset: 0; border: 1px solid var(--bw-kante); border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0;
    transition: opacity var(--bw-t-kurz) var(--bw-ease);
    -webkit-mask: radial-gradient(220px circle at var(--bw-x, 50%) var(--bw-y, 50%), #000 0%, transparent 70%);
            mask: radial-gradient(220px circle at var(--bw-x, 50%) var(--bw-y, 50%), #000 0%, transparent 70%); }
  html.bw-an :hover > .bw-kante { opacity: 1; }
}

/* Sicherheitsnetz: reduzierte Bewegung → alles sofort sichtbar, nichts läuft (frueh.js schaltet dann ohnehin nicht an) */
@media (prefers-reduced-motion: reduce) {
  html.bw-start main#inhalt { visibility: visible; }
  html.bw-an [data-bw], html.bw-an [data-bw] :is(.bw-zeile__in, [data-bw-teil], .bw-flaeche, svg, img, video) { animation: none !important; clip-path: none !important; }
  html.bw-an :is([data-bw], [data-bw-teil], .bw-flaeche) { opacity: 1 !important; }
  .bw-scan, .bw-strich, .bw-kontur, .bw-kante, .bw-akk-strich { display: none !important; }
}