/* ==========================================================================
   Feature-Animationen (Was ist Lector): Klassifikation & Tiefenauslese

   Reine CSS-Keyframes, keine Abhängigkeiten. Die Bühne ist ein Container,
   alle Maße stehen in cqw (1cqw = 1 % der Bühnenbreite) — so skaliert jede
   Szene ohne JS mit ihrer Spalte. Entwurfsraster 100 × 83.25, entspricht
   dem alten Screenshot-Slot von 519 × 432 px (1cqw ≈ 5.2 px).

   Die Bildsprache ist die der Lector-Oberfläche (mosaic/services/frontend):
   kleine Radien, Seiten-Thumbnails mit 1px-Rahmen, Dokumentkarten mit
   farbigem linken Rand, Konfidenz als Tag mit 10 %-Tint, Feldwerte in
   Monospace mit schwebendem Label, Prüfstatus als farbiger rechter Rand,
   Fundstellen als Rahmen mit Namensschild. Die Farben sind aber die der
   Website, nicht der App: Blau für fertig/geprüft, Plum für Hinweise und
   Fundstellen, Grau für „läuft noch“ — keine Ampelfarben.

   Jede Szene hat genau einen Zeitregler (--t). Die Prozentwerte in den
   Keyframes sind Anteile daran. Am Anfang und Ende jeder Runde liegt eine
   Blende (.an__veil) über der Bühne — darunter springen alle Elemente in
   den Ausgangszustand zurück, ohne dass es ruckelt.

   Ohne Container-Query-Einheiten (Browser vor 2023) bleibt der frühere
   Screenshot stehen (.an-fallback).
   ========================================================================== */

.an {
  --t: 11s;
  --an-ease: cubic-bezier(.45, .05, .25, 1);
  --an-pop: cubic-bezier(.34, 1.4, .5, 1);
  /* Statusfarben aus der Website-Palette (main.css) */
  --an-ok: var(--blue-main);
  --an-warn: var(--plum-main);
  --an-box: var(--plum-main);
  --an-border: #d9d9d9;
  --an-thumb: #e8e8e8;
  --an-muted: #808080;
  --an-label: #666;
  --an-mono: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Dokumentfarben: drei Töne der Website-Palette */
  --an-doc1: var(--blue-main);
  --an-doc2: var(--plum-main);
  --an-doc3: var(--blue-dark);

  position: relative;
  container-type: inline-size;
  width: 519px;
  max-width: 100%;
  aspect-ratio: 519 / 432;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 4px rgba(0, 0, 0, .25);
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-body);
  color: var(--blue-dark);
}
.an > * { position: absolute; }

/* Bühne und Blende teilen sich den Hintergrund: weiß mit dem Blueprint-Raster
   der Seite (48 px bei 519 px Breite). */
.an__bg, .an__veil {
  inset: 0;
  background-color: var(--white);
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, .04) 1px, transparent 1px);
  background-size: 9.25cqw 9.25cqw;
}
.an__veil { z-index: 10; opacity: 0; pointer-events: none; animation: an-veil var(--t) infinite ease-in-out; }
/* Der Halt bis 3.5 % (≈ .39 s bei 11 s) deckt den größten animation-delay (.30 s) ab. */
@keyframes an-veil { 0%, 3.5% { opacity: 1 } 7.5% { opacity: 0 } 95% { opacity: 0 } 99%, 100% { opacity: 1 } }

.an-fallback { display: none; }
@supports not (width: 1cqw) {
  .an { display: none; }
  .an-fallback { display: block; }
}

/* --- Gemeinsame Bausteine ------------------------------------------------ */
.an__eyebrow {
  left: 5cqw; top: 5cqw;
  z-index: 3;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.9cqw;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--an-muted);
  display: flex;
  align-items: center;
  gap: 1cqw;
  white-space: nowrap;
}
.an__eyebrow svg { width: 2.4cqw; height: 2.4cqw; color: var(--blue-main); }
.an__eyebrow--in  { animation: an-eye-in  var(--t) infinite ease-out; }
.an__eyebrow--out { opacity: 0; animation: an-eye-out var(--t) infinite var(--an-pop); }

/* KI-Moment: Scanlinie + weicher Plum-Schein (Website-Akzent) */
.an__scan {
  z-index: 4;
  height: .5cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, transparent, var(--plum-main), transparent);
  filter: drop-shadow(0 0 1.4cqw var(--plum-medium));
  opacity: 0;
}
.an__glow {
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--plum-light), transparent 72%);
  filter: blur(1.5cqw);
  opacity: 0;
  pointer-events: none;
}

/* Konfidenz-Tag wie .score-tag der App: Farbe voll, Fläche 10 %, Rand 20 % */
.an__tag {
  display: inline-flex;
  align-items: center;
  gap: .6cqw;
  border-radius: .8cqw;
  padding: .55cqw 1.2cqw;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.75cqw;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.an__tag--proc { color: var(--an-label);  background: rgba(0, 0, 0, .05);      border-color: rgba(0, 0, 0, .12); }
.an__tag--warn { color: var(--an-warn);   background: rgba(186, 0, 196, .08);  border-color: rgba(186, 0, 196, .2); }
.an__tag--ok   { color: var(--an-ok);     background: rgba(44, 123, 255, .1);  border-color: rgba(44, 123, 255, .2); }

/* Seiten-Thumbnail wie .page-thumbnail der App */
.an__pg {
  width: 12cqw;
  height: 17cqw;
  background: var(--white);
  border: 1px solid #dcdcdc;
  border-radius: .5cqw;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.an__pg::before {
  content: "";
  position: absolute;
  left: 2cqw; right: 4.5cqw; top: 2.2cqw;
  height: 1cqw;
  border-radius: .3cqw;
  background: var(--blue-light);
}
.an__pg::after {
  content: "";
  position: absolute;
  left: 2cqw; right: 2cqw; top: 5cqw; bottom: 3cqw;
  background: repeating-linear-gradient(to bottom, #e3e3e3 0 .8cqw, transparent .8cqw 2.3cqw);
}

/* ==========================================================================
   Szene 1 — Klassifikation & Trennung
   Sechs Seiten liegen im Posteingang. Lector liest sie, dann rücken
   zusammengehörige Seiten zu Stapeln zusammen und werden — an Ort und
   Stelle — zu drei erkannten Dokumenten mit Klasse und Konfidenz.
   ========================================================================== */
@keyframes an-eye-in  { 0%, 3% { opacity: 0 } 8%, 56% { opacity: 1 } 60%, 100% { opacity: 0 } }
@keyframes an-eye-out { 0%, 62% { opacity: 0; transform: translateY(.8cqw) } 68%, 100% { opacity: 1; transform: none } }

/* Seiten: Basisposition = Platz im Stapel; die Reihe am Anfang ist ein
   Versatz (--rx/--ry) dazu, --rr die leichte Schräglage in der Reihe. */
.an-cls .pg {
  z-index: 2;
  transform-origin: center;
  opacity: 0;
  transform: translate(var(--rx), var(--ry));
  animation: an-cls-pg var(--t) infinite var(--an-ease);
  will-change: transform, opacity;
}
.an-cls .pg b {
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 1cqw;
  text-align: center;
  font-weight: 400;
  font-size: 1.9cqw;
  line-height: 1;
  color: var(--an-muted);
  animation: an-cls-num var(--t) infinite ease-out;
}
@keyframes an-cls-pg {
  0%, 5% { opacity: 0; transform: translate(var(--rx), calc(var(--ry) - 8cqw)) rotate(0deg) }
  10%    { opacity: 1; transform: translate(var(--rx), var(--ry)) rotate(var(--rr)) }
  40%    { opacity: 1; transform: translate(var(--rx), var(--ry)) rotate(var(--rr)); animation-timing-function: var(--an-pop) }
  52%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) }
}
@keyframes an-cls-num { 0%, 5% { opacity: 0 } 10%, 36% { opacity: 1 } 40%, 100% { opacity: 0 } }
/* Reihe: x = 4 + i·15.6, y = 30.  Stapel A (1–3) um x = 17, B (4) um 50, C (5–6) um 83 */
.an-cls .p1 { left: 9.4cqw;  top: 29cqw;   --rx: -5.4cqw; --ry: 1cqw;    --rr: -2deg }
.an-cls .p2 { left: 11cqw;   top: 30.4cqw; --rx: 8.6cqw;  --ry: -.4cqw;  --rr: 1deg;   animation-delay: .06s }
.an-cls .p3 { left: 12.6cqw; top: 31.8cqw; --rx: 22.6cqw; --ry: -1.8cqw; --rr: 2deg;   animation-delay: .12s }
.an-cls .p4 { left: 44cqw;   top: 29cqw;   --rx: 6.8cqw;  --ry: 1cqw;    --rr: -1deg;  animation-delay: .18s }
.an-cls .p5 { left: 76.2cqw; top: 29cqw;   --rx: -9.8cqw; --ry: 1cqw;    --rr: 1.5deg; animation-delay: .24s }
.an-cls .p6 { left: 77.8cqw; top: 30.4cqw; --rx: 4.2cqw;  --ry: -.4cqw;  --rr: -2deg;  animation-delay: .30s }

.an-cls .an__glow { left: 5cqw; top: 13cqw; width: 90cqw; height: 44cqw; animation: an-cls-glow var(--t) infinite ease-in-out; }
@keyframes an-cls-glow { 0%, 16% { opacity: 0 } 22%, 30% { opacity: .6 } 38%, 100% { opacity: 0 } }
.an-cls .an__scan { left: 3cqw; top: 29cqw; width: 94cqw; animation: an-cls-scan var(--t) infinite cubic-bezier(.6, 0, .4, 1); }
@keyframes an-cls-scan {
  0%, 18% { opacity: 0; transform: translateY(0) }
  20%     { opacity: 1; transform: translateY(0) }
  32%     { opacity: 1; transform: translateY(18cqw) }
  34%, 100% { opacity: 0; transform: translateY(18cqw) }
}

/* Dokumentkarte wie .pred-doc-card der App: weiß, 1px-Rahmen, 3px farbiger
   linker Rand. Sie erscheint hinter dem fertigen Stapel — nichts fliegt. */
.an-cls .cd {
  z-index: 1;
  top: 24cqw;
  width: 30cqw;
  height: 42cqw;
  background: var(--white);
  border: 1px solid rgba(200, 200, 200, .6);
  border-left: .6cqw solid var(--dc);
  border-radius: .8cqw;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
  padding: 30cqw 2.4cqw 0 2.2cqw;
  opacity: 0;
  animation: an-cls-cd var(--t) infinite ease-out;
}
.an-cls .cA { left: 2cqw;  --dc: var(--an-doc1) }
.an-cls .cB { left: 35cqw; --dc: var(--an-doc2); animation-delay: .08s }
.an-cls .cC { left: 68cqw; --dc: var(--an-doc3); animation-delay: .16s }
@keyframes an-cls-cd { 0%, 50% { opacity: 0 } 56%, 100% { opacity: 1 } }

.an-cls .cd__body { display: flex; flex-direction: column; gap: 1.2cqw; opacity: 0; animation: an-cls-cdb var(--t) infinite var(--an-pop); }
.an-cls .cB .cd__body { animation-delay: .08s }
.an-cls .cC .cd__body { animation-delay: .16s }
@keyframes an-cls-cdb { 0%, 58% { opacity: 0; transform: translateY(1cqw) } 64%, 100% { opacity: 1; transform: none } }
.an-cls .cd__title {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.5cqw;
  line-height: 1.15;
  color: var(--blue-dark);
}
.an-cls .cd__title svg { width: 2.6cqw; height: 2.6cqw; flex: none; color: var(--dc); }
.an-cls .cd__row { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.an-cls .cd__meta { font-weight: 300; font-size: 1.9cqw; line-height: 1; color: var(--an-muted); }

/* ==========================================================================
   Szene 2 — Tiefenauslese
   Aus einer Rechnung wandern drei Werte in Felder. Fundstellen bekommen
   das orange Namensschild der App (blau, solange gelesen wird), Felder
   zeigen Konfidenz als Tag und Prüfstatus als rechten Rand. Die IBAN
   kommt unsicher an, wird gegen die Prüfziffer geprüft und ist dann grün.
   ========================================================================== */
.an-ext { --t: 12s; }
.an-ext .an__eyebrow--in  { animation-name: an-ext-eye-in; }
.an-ext .an__eyebrow--out { animation-name: an-ext-eye-out; }
@keyframes an-ext-eye-in  { 0%, 3% { opacity: 0 } 8%, 70% { opacity: 1 } 74%, 100% { opacity: 0 } }
@keyframes an-ext-eye-out { 0%, 76% { opacity: 0; transform: translateY(.8cqw) } 82%, 100% { opacity: 1; transform: none } }

/* Dokument links — ein Blatt wie im Viewer */
.an-ext .dc {
  left: 4cqw; top: 12cqw;
  width: 40cqw; height: 64cqw;
  background: var(--white);
  border: 1px solid var(--an-thumb);
  border-radius: .5cqw;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.an-ext .dc__title {
  left: 8cqw; top: 16cqw;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4cqw;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.an-ext .dc__logo { left: 36.6cqw; top: 15.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--plum-light); }
.an-ext .bar { left: 8cqw; height: 1.3cqw; border-radius: .6cqw; background: var(--gray-1); }
.an-ext .b1 { top: 22cqw; width: 18cqw } .an-ext .b2 { top: 25cqw; width: 13cqw }
.an-ext .b4 { top: 47cqw; width: 32cqw } .an-ext .b5 { top: 50cqw; width: 28cqw } .an-ext .b6 { top: 53cqw; width: 30cqw }
.an-ext .b7 { top: 71cqw; width: 22cqw; height: .9cqw }
.an-ext .dc__lbl { left: 8cqw; font-weight: 300; font-size: 1.8cqw; line-height: 1; color: var(--an-muted); }
.an-ext .dc__val { font-family: var(--an-mono); font-weight: 500; font-size: 1.9cqw; line-height: 1; white-space: nowrap; color: var(--black); }
.an-ext .l1 { top: 31cqw } .an-ext .v1 { left: 22cqw; top: 30.9cqw }
.an-ext .l2 { top: 39cqw } .an-ext .v2 { left: 22cqw; top: 38.9cqw }
.an-ext .l3 { top: 58.3cqw } .an-ext .v3 { left: 8cqw;  top: 64.5cqw; font-size: 1.8cqw }

/* Fundstellen wie die Bounding-Boxes des Viewers: orange Rahmen, Namens-
   schild oben links; blau, solange das Feld "im Fokus" ist. Die Schild-
   farbe folgt dem Rahmen über currentColor, der Text bleibt weiß. */
.an-ext .hb {
  z-index: 2;
  color: var(--an-box);
  border: 1px solid currentColor;
  border-radius: .3cqw;
  opacity: 0;
  animation-duration: var(--t);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.an-ext .hb::before {
  content: attr(data-tag);
  position: absolute;
  left: -1px; bottom: 100%;
  padding: .35cqw .8cqw;
  border-radius: .4cqw .4cqw 0 0;
  background-color: currentColor;
  -webkit-text-fill-color: #fff;
  font-weight: 500;
  font-size: 1.45cqw;
  line-height: 1;
  white-space: nowrap;
}
.an-ext .hb1 { left: 20.5cqw; top: 29.2cqw; width: 19cqw;   height: 5cqw; animation-name: an-ext-hb1 }
.an-ext .hb2 { left: 20.5cqw; top: 37.2cqw; width: 15.5cqw; height: 5cqw; animation-name: an-ext-hb2 }
.an-ext .hb3 { left: 6.5cqw;  top: 63cqw;   width: 33.5cqw; height: 5cqw; animation-name: an-ext-hb3 }
@keyframes an-ext-hb1 {
  0%, 15% { opacity: 0; transform: scale(.92); color: var(--blue-main) }
  18%, 26% { opacity: 1; transform: none; color: var(--blue-main) }
  30%, 100% { opacity: .6; transform: none; color: var(--an-box) }
}
@keyframes an-ext-hb2 {
  0%, 27% { opacity: 0; transform: scale(.92); color: var(--blue-main) }
  30%, 38% { opacity: 1; transform: none; color: var(--blue-main) }
  42%, 100% { opacity: .6; transform: none; color: var(--an-box) }
}
@keyframes an-ext-hb3 {
  0%, 39% { opacity: 0; transform: scale(.92); color: var(--blue-main) }
  42%, 50% { opacity: 1; transform: none; color: var(--blue-main) }
  54% { opacity: .6; color: var(--an-box) }
  56%, 64% { opacity: 1; color: var(--blue-main) }
  68%, 100% { opacity: .6; transform: none; color: var(--an-box) }
}

.an-ext .an__glow { left: 4cqw; top: 12cqw; width: 40cqw; height: 64cqw; animation: an-ext-glow var(--t) infinite ease-in-out; }
@keyframes an-ext-glow { 0%, 4% { opacity: 0 } 8%, 15% { opacity: .5 } 20%, 100% { opacity: 0 } }
.an-ext .an__scan { left: 6cqw; top: 14cqw; width: 36cqw; animation: an-ext-scan var(--t) infinite cubic-bezier(.6, 0, .4, 1); }
@keyframes an-ext-scan {
  0%, 5% { opacity: 0; transform: translateY(0) }
  7%     { opacity: 1; transform: translateY(0) }
  15%    { opacity: 1; transform: translateY(60cqw) }
  17%, 100% { opacity: 0; transform: translateY(60cqw) }
}

/* Fliegende Werte: stehen am Ziel, starten mit Versatz von der Fundstelle */
.an-ext .fc {
  z-index: 5;
  left: 53cqw;
  padding: .9cqw 1.6cqw;
  border-radius: .6cqw;
  background: var(--white);
  border: 1px solid rgba(44, 123, 255, .75);
  box-shadow: 0 1.2cqw 3cqw rgba(44, 123, 255, .2);
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 2cqw;
  line-height: 1;
  white-space: nowrap;
  color: var(--black);
  opacity: 0;
  animation-duration: var(--t);
  animation-iteration-count: infinite;
  animation-timing-function: var(--an-ease);
  will-change: transform, opacity;
}
.an-ext .fc1 { top: 22.2cqw; --dx: -32cqw; --dy: 8.7cqw; animation-name: an-ext-fc1 }
.an-ext .fc2 { top: 39.2cqw; --dx: -32cqw; --dy: -.3cqw;  animation-name: an-ext-fc2 }
.an-ext .fc3 { top: 56.2cqw; --dx: -46cqw; --dy: 8.3cqw;  animation-name: an-ext-fc3 }
@keyframes an-ext-fc1 {
  0%, 17% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.92) }
  20%     { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) }
  25%     { opacity: 1; transform: translate(0, 0) scale(1) }
  27%, 100% { opacity: 0; transform: translate(0, 0) scale(1) }
}
@keyframes an-ext-fc2 {
  0%, 29% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.92) }
  32%     { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) }
  37%     { opacity: 1; transform: translate(0, 0) scale(1) }
  39%, 100% { opacity: 0; transform: translate(0, 0) scale(1) }
}
@keyframes an-ext-fc3 {
  0%, 41% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.92) }
  44%     { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) }
  49%     { opacity: 1; transform: translate(0, 0) scale(1) }
  51%, 100% { opacity: 0; transform: translate(0, 0) scale(1) }
}

/* Felder rechts — wie die Wertefelder der App: Eingabe-Rahmen, Label auf
   dem Rahmen, Monospace-Wert, Konfidenz als Tag, Prüfstatus als farbiger
   rechter Rand (card-success / card-warning), Konfidenz-Tint als Fläche. */
.an-ext .fd {
  left: 50cqw;
  width: 46cqw;
  height: 11cqw;
  background: var(--white);
  border-radius: .8cqw;
  box-shadow: inset 0 0 0 1px var(--an-border);
  animation-duration: var(--t);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.an-ext .f1 { top: 19cqw; animation-name: an-ext-fd1 }
.an-ext .f2 { top: 36cqw; animation-name: an-ext-fd2 }
.an-ext .f3 { top: 53cqw; animation-name: an-ext-fd3 }
@keyframes an-ext-fd1 {
  0%, 26% { box-shadow: inset 0 0 0 1px var(--an-border); background-color: #fff }
  30%, 100% { box-shadow: inset -1.2cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05) }
}
@keyframes an-ext-fd2 {
  0%, 38% { box-shadow: inset 0 0 0 1px var(--an-border); background-color: #fff }
  42%, 100% { box-shadow: inset -1.2cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05) }
}
@keyframes an-ext-fd3 {
  0%, 50% { box-shadow: inset 0 0 0 1px var(--an-border); background-color: #fff }
  54%, 64% { box-shadow: inset -1.2cqw 0 0 var(--an-warn), inset 0 0 0 1px rgba(186, 0, 196, .5); background-color: rgba(186, 0, 196, .05) }
  68%, 100% { box-shadow: inset -1.2cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05) }
}
.an-ext .fd__lbl {
  position: absolute;
  left: 1.8cqw; top: -1.1cqw;
  padding: 0 .8cqw;
  background: var(--white);
  font-weight: 500;
  font-size: 1.6cqw;
  line-height: 1.3;
  color: var(--an-label);
  white-space: nowrap;
}
.an-ext .fd__val {
  position: absolute;
  left: 3cqw; top: 50%;
  height: 2.2cqw;
  transform: translateY(-50%);
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 2cqw;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--black);
}
.an-ext .fd__val > span { position: absolute; left: 0; top: 0; }
/* die IBAN ist lang — neben dem Tag muss sie kleiner */
.an-ext .f3 .fd__val, .an-ext .fc3 { font-size: 1.6cqw; }
.an-ext .fd__ph { color: var(--an-border); }
.an-ext .fd__v { opacity: 0; }
.an-ext .f1 .fd__ph { animation: an-ext-ph1 var(--t) infinite } .an-ext .f1 .fd__v { animation: an-ext-v1 var(--t) infinite }
.an-ext .f2 .fd__ph { animation: an-ext-ph2 var(--t) infinite } .an-ext .f2 .fd__v { animation: an-ext-v2 var(--t) infinite }
.an-ext .f3 .fd__ph { animation: an-ext-ph3 var(--t) infinite } .an-ext .f3 .fd__v { animation: an-ext-v3 var(--t) infinite }
@keyframes an-ext-ph1 { 0%, 24% { opacity: 1 } 26%, 100% { opacity: 0 } }
@keyframes an-ext-v1  { 0%, 24% { opacity: 0 } 26%, 100% { opacity: 1 } }
@keyframes an-ext-ph2 { 0%, 36% { opacity: 1 } 38%, 100% { opacity: 0 } }
@keyframes an-ext-v2  { 0%, 36% { opacity: 0 } 38%, 100% { opacity: 1 } }
@keyframes an-ext-ph3 { 0%, 48% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes an-ext-v3  { 0%, 48% { opacity: 0 } 50%, 100% { opacity: 1 } }

.an-ext .fd__tag {
  position: absolute;
  right: 2.6cqw; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation-duration: var(--t);
  animation-iteration-count: infinite;
  animation-timing-function: var(--an-pop);
}
.an-ext .f1 .fd__tag { animation-name: an-ext-tag1 }
.an-ext .f2 .fd__tag { animation-name: an-ext-tag2 }
.an-ext .f3 .fd__tag--warn { animation-name: an-ext-tag3w; animation-timing-function: ease-out }
.an-ext .f3 .fd__tag--ok   { animation-name: an-ext-tag3o }
@keyframes an-ext-tag1  { 0%, 27% { opacity: 0; transform: translateY(-50%) scale(.8) } 31%, 100% { opacity: 1; transform: translateY(-50%) scale(1) } }
@keyframes an-ext-tag2  { 0%, 39% { opacity: 0; transform: translateY(-50%) scale(.8) } 43%, 100% { opacity: 1; transform: translateY(-50%) scale(1) } }
@keyframes an-ext-tag3w { 0%, 51% { opacity: 0 } 54%, 64% { opacity: 1 } 66%, 100% { opacity: 0 } }
@keyframes an-ext-tag3o { 0%, 66% { opacity: 0; transform: translateY(-50%) scale(.8) } 70%, 100% { opacity: 1; transform: translateY(-50%) scale(1) } }
.an-ext .fd__tag b { font-weight: 700; }

/* Prüfstatus unter der IBAN */
.an-ext .st { left: 52cqw; top: 66.5cqw; width: 44cqw; height: 2.4cqw; }
.an-ext .st > span {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  gap: .7cqw;
  font-weight: 500;
  font-size: 1.7cqw;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
}
.an-ext .st svg { width: 2cqw; height: 2cqw; }
.an-ext .st--warn { color: var(--an-warn); animation: an-ext-stw var(--t) infinite; }
.an-ext .st--ok   { color: var(--an-ok);   animation: an-ext-sto var(--t) infinite ease-out; }
@keyframes an-ext-stw { 0%, 53% { opacity: 0 } 56%, 63% { opacity: 1 } 65%, 100% { opacity: 0 } }
@keyframes an-ext-sto { 0%, 67% { opacity: 0; transform: translateY(.6cqw) } 71%, 100% { opacity: 1; transform: none } }

/* ==========================================================================
   Reduzierte Bewegung: Endzustand beider Szenen, nichts läuft.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .an * { animation: none !important; }
  .an__veil, .an__scan, .an__glow, .an__eyebrow--in { display: none; }
  .an__eyebrow--out { opacity: 1; transform: none; }

  .an-cls .pg { opacity: 1; transform: none; }
  .an-cls .pg b { display: none; }
  .an-cls .cd, .an-cls .cd__body { opacity: 1; transform: none; }

  .an-ext .hb { opacity: .6; transform: none; color: var(--an-box); }
  .an-ext .fd { box-shadow: inset -1.2cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05); }
  .an-ext .fd__ph, .an-ext .fc, .an-ext .fd__tag--warn, .an-ext .st--warn { display: none; }
  .an-ext .fd__v, .an-ext .st--ok { opacity: 1; transform: none; }
  .an-ext .fd__tag { opacity: 1; transform: translateY(-50%); }
}

/* ==========================================================================
   Breite Bühne (Pricing → Schnellstart): 628 × 354, Raster 100 × 56.4
   ========================================================================== */
.an--wide { width: 628px; aspect-ratio: 628 / 354; }
.an--wide .an__eyebrow { left: 4cqw; top: 3.4cqw; font-size: 1.6cqw; }
.an--wide .an__eyebrow svg { width: 2cqw; height: 2cqw; }

/* Karte wie eine Produktkarte (Rand, 4px-Radius, flacher Schatten) */
.an__card {
  background: var(--white);
  border: 1px solid rgba(200, 200, 200, .6);
  border-radius: .8cqw;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
.an__card-title { font-family: var(--font-head); font-weight: 700; font-size: 2cqw; line-height: 1; color: var(--blue-dark); white-space: nowrap; }
.an__card-sub { font-weight: 300; font-size: 1.45cqw; line-height: 1; color: var(--an-muted); white-space: nowrap; }

/* ==========================================================================
   Szene 3 — Einfache Konfiguration
   Feldnamen und Beschreibungen werden eingetippt, ein Modell gewählt,
   gespeichert — fertig.
   ========================================================================== */
.an-cfg { --t: 12s; }
.an-cfg .an__eyebrow--in  { animation-name: an-cfg-eye-in; }
.an-cfg .an__eyebrow--out { animation-name: an-cfg-eye-out; }
@keyframes an-cfg-eye-in  { 0%, 3% { opacity: 0 } 8%, 64% { opacity: 1 } 68%, 100% { opacity: 0 } }
@keyframes an-cfg-eye-out { 0%, 70% { opacity: 0; transform: translateY(.6cqw) } 76%, 100% { opacity: 1; transform: none } }

.an-cfg .card { left: 4cqw; top: 8.5cqw; width: 92cqw; height: 44.5cqw; }
.an-cfg .card__title { left: 7.5cqw; top: 11.6cqw; }
.an-cfg .card__sub { left: 7.5cqw; top: 14.4cqw; }

/* Eingabefelder wie in der App: weißer Rahmen, Name links, Beschreibung rechts */
.an-cfg .in {
  height: 5.4cqw;
  padding: 0 1.5cqw;
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: .6cqw;
  box-shadow: inset 0 0 0 1px var(--an-border);
  font-size: 1.6cqw;
  line-height: 1;
  white-space: nowrap;
}
.an-cfg .in--name { left: 7.5cqw; width: 29cqw; font-weight: 500; color: var(--black); }
.an-cfg .in--desc { left: 38.5cqw; width: 54cqw; font-weight: 300; color: var(--text-body); }
.an-cfg .r1 { top: 18.4cqw } .an-cfg .r2 { top: 25.4cqw } .an-cfg .r3 { top: 32.4cqw }
.an-cfg .in__lbl { position: absolute; left: 1.5cqw; top: -1cqw; padding: 0 .6cqw; background: var(--white); font-weight: 500; font-size: 1.25cqw; line-height: 1.3; color: var(--an-label); }

/* Tippen: der Text wird in Schritten von links freigelegt (clip-path) */
.an-cfg .tw { clip-path: inset(0 100% 0 0); animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: linear; }
.an-cfg .t1 { animation-name: an-cfg-t1 } .an-cfg .t2 { animation-name: an-cfg-t2 } .an-cfg .t3 { animation-name: an-cfg-t3 }
.an-cfg .t4 { animation-name: an-cfg-t4 } .an-cfg .t5 { animation-name: an-cfg-t5 } .an-cfg .t6 { animation-name: an-cfg-t6 }
@keyframes an-cfg-t1 { 0%, 6%  { clip-path: inset(0 100% 0 0); animation-timing-function: steps(16, end) } 11%, 100% { clip-path: inset(0 0 0 0) } }
@keyframes an-cfg-t2 { 0%, 12% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(34, end) } 19%, 100% { clip-path: inset(0 0 0 0) } }
@keyframes an-cfg-t3 { 0%, 21% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(15, end) } 25%, 100% { clip-path: inset(0 0 0 0) } }
@keyframes an-cfg-t4 { 0%, 26% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(28, end) } 32%, 100% { clip-path: inset(0 0 0 0) } }
@keyframes an-cfg-t5 { 0%, 34% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(5, end)  } 36%, 100% { clip-path: inset(0 0 0 0) } }
@keyframes an-cfg-t6 { 0%, 37% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(32, end) } 43%, 100% { clip-path: inset(0 0 0 0) } }

/* Fokusring wandert von Feld zu Feld (Position/Breite je Station) */
.an-cfg .focus {
  height: 5.4cqw;
  border-radius: .6cqw;
  box-shadow: 0 0 0 1px var(--blue-main), 0 0 0 .5cqw rgba(44, 123, 255, .14);
  opacity: 0;
  pointer-events: none;
  animation: an-cfg-focus var(--t) infinite var(--an-ease);
}
@keyframes an-cfg-focus {
  0%, 4%  { opacity: 0; left: 7.5cqw;  top: 18.4cqw; width: 29cqw }
  5%, 11% { opacity: 1; left: 7.5cqw;  top: 18.4cqw; width: 29cqw }
  12%, 19% { opacity: 1; left: 38.5cqw; top: 18.4cqw; width: 54cqw }
  21%, 25% { opacity: 1; left: 7.5cqw;  top: 25.4cqw; width: 29cqw }
  26%, 32% { opacity: 1; left: 38.5cqw; top: 25.4cqw; width: 54cqw }
  34%, 36% { opacity: 1; left: 7.5cqw;  top: 32.4cqw; width: 29cqw }
  37%, 43% { opacity: 1; left: 38.5cqw; top: 32.4cqw; width: 54cqw }
  45%, 58% { opacity: 1; left: 7.5cqw;  top: 42cqw;   width: 32cqw }
  60%, 100% { opacity: 0; left: 7.5cqw; top: 42cqw;   width: 32cqw }
}

/* Modellwahl: Segmentschalter, die Auswahl rutscht von „Standard“ auf „Gemini“ */
.an-cfg .sel__lbl { left: 7.5cqw; top: 40.2cqw; font-weight: 500; font-size: 1.25cqw; line-height: 1; color: var(--an-label); }
.an-cfg .models {
  left: 7.5cqw; top: 42cqw;
  height: 5.4cqw;
  padding: .5cqw;
  display: flex;
  gap: .5cqw;
  background: #eef3fb;
  border-radius: .8cqw;
}
.an-cfg .models span {
  position: relative;
  z-index: 1;
  width: 10cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.5cqw;
  line-height: 1;
  color: var(--an-muted);
  animation-duration: var(--t);
  animation-iteration-count: infinite;
}
.an-cfg .models span:nth-of-type(1) { animation-name: an-cfg-m1 }
.an-cfg .models span:nth-of-type(2) { animation-name: an-cfg-m2 }
.an-cfg .models__hl {
  position: absolute;
  left: .5cqw; top: .5cqw;
  width: 10cqw; height: 4.4cqw;
  border-radius: .6cqw;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  animation: an-cfg-hl var(--t) infinite var(--an-pop);
}
@keyframes an-cfg-hl { 0%, 52% { transform: translateX(0) } 55%, 100% { transform: translateX(10.5cqw) } }
@keyframes an-cfg-m1 { 0%, 53% { color: var(--blue-main) } 55%, 100% { color: var(--an-muted) } }
@keyframes an-cfg-m2 { 0%, 53% { color: var(--an-muted) } 55%, 100% { color: var(--blue-main) } }

/* Speichern-Knopf: kurz gedrückt, dann grün „Gespeichert“ */
.an-cfg .save {
  left: 74cqw; top: 42cqw;
  width: 19cqw; height: 5.4cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8cqw;
  border-radius: .5cqw;
  background: var(--blue-main);
  color: var(--white);
  font-weight: 600;
  font-size: 1.6cqw;
  line-height: 1;
  white-space: nowrap;
  animation: an-cfg-save var(--t) infinite ease-out;
}
.an-cfg .save svg { width: 1.8cqw; height: 1.8cqw; }
.an-cfg .save > span { position: absolute; display: inline-flex; align-items: center; gap: .8cqw; }
.an-cfg .save__a { animation: an-cfg-v1b var(--t) infinite } .an-cfg .save__b { opacity: 0; animation: an-cfg-v2b var(--t) infinite }
@keyframes an-cfg-save { 0%, 61% { transform: scale(1); background-color: var(--blue-main) } 62.5% { transform: scale(.95); background-color: var(--blue-main) } 64%, 100% { transform: scale(1); background-color: var(--blue-dark) } }
@keyframes an-cfg-v1b { 0%, 63% { opacity: 1 } 64%, 100% { opacity: 0 } }
@keyframes an-cfg-v2b { 0%, 63% { opacity: 0 } 64%, 100% { opacity: 1 } }

/* ==========================================================================
   Szene 4 — Strukturierte Ergebnisse
   Dokumente ablegen, kurz verarbeiten, die konfigurierten Felder sind
   gefüllt und geprüft — bereit für den Export.
   ========================================================================== */
.an-res { --t: 12s; }
.an-res .an__eyebrow--in  { animation-name: an-res-eye-in; }
.an-res .an__eyebrow--out { animation-name: an-res-eye-out; }
@keyframes an-res-eye-in  { 0%, 3% { opacity: 0 } 8%, 66% { opacity: 1 } 70%, 100% { opacity: 0 } }
@keyframes an-res-eye-out { 0%, 72% { opacity: 0; transform: translateY(.6cqw) } 78%, 100% { opacity: 1; transform: none } }

/* Ablagezone wie der gestrichelte Eingangsbereich der App */
.an-res .drop { left: 4cqw; top: 8.5cqw; width: 36cqw; height: 44.5cqw; border: 1px dashed var(--an-border); border-radius: 1cqw; background: var(--white); }
.an-res .drop__hint {
  left: 4cqw; top: 8.5cqw; width: 36cqw; height: 44.5cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw;
  font-weight: 400; font-size: 1.5cqw; line-height: 1; color: var(--an-muted);
  animation: an-res-hint var(--t) infinite ease-out;
}
.an-res .drop__hint svg { width: 5cqw; height: 5cqw; color: var(--blue-main); }
@keyframes an-res-hint { 0%, 9% { opacity: 1 } 13%, 100% { opacity: 0 } }

.an-res .pg { z-index: 2; opacity: 0; transform: translate(var(--dx), -34cqw) rotate(var(--rr)); animation: an-res-pg var(--t) infinite var(--an-ease); will-change: transform, opacity; }
.an-res .p1 { left: 14cqw; top: 17cqw;   --dx: 2cqw;  --rr: -6deg }
.an-res .p2 { left: 16cqw; top: 18.6cqw; --dx: -3cqw; --rr: 5deg;  animation-delay: .12s }
.an-res .p3 { left: 18cqw; top: 20.2cqw; --dx: 4cqw;  --rr: -4deg; animation-delay: .24s }
@keyframes an-res-pg { 0%, 8% { opacity: 0; transform: translate(var(--dx), -34cqw) rotate(var(--rr)) } 16%, 100% { opacity: 1; transform: none } }

.an-res .an__glow { left: 4cqw; top: 8.5cqw; width: 36cqw; height: 44.5cqw; animation: an-res-glow var(--t) infinite ease-in-out; }
@keyframes an-res-glow { 0%, 18% { opacity: 0 } 22%, 30% { opacity: .55 } 36%, 100% { opacity: 0 } }
.an-res .an__scan { left: 11cqw; top: 17cqw; width: 22cqw; animation: an-res-scan var(--t) infinite cubic-bezier(.6, 0, .4, 1); }
@keyframes an-res-scan { 0%, 19% { opacity: 0; transform: translateY(0) } 21% { opacity: 1; transform: translateY(0) } 31% { opacity: 1; transform: translateY(21cqw) } 33%, 100% { opacity: 0; transform: translateY(21cqw) } }

/* Fortschritt unter dem Stapel */
.an-res .bar { left: 10cqw; top: 44cqw; width: 24cqw; height: .8cqw; border-radius: .4cqw; background: var(--an-thumb); overflow: hidden; opacity: 0; animation: an-res-bar var(--t) infinite ease-out; }
.an-res .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: .4cqw; background: var(--blue-main); animation: an-res-fill var(--t) infinite linear; }
.an-res .bar__lbl { left: 4cqw; top: 46.4cqw; width: 36cqw; text-align: center; font-weight: 400; font-size: 1.4cqw; line-height: 1; color: var(--an-muted); opacity: 0; animation: an-res-bar var(--t) infinite ease-out; }
@keyframes an-res-bar { 0%, 19% { opacity: 0 } 21%, 34% { opacity: 1 } 37%, 100% { opacity: 0 } }
@keyframes an-res-fill { 0%, 20% { width: 0 } 34%, 100% { width: 100% } }

/* Ergebnis: die konfigurierten Felder, jetzt gefüllt */
.an-res .panel { left: 46cqw; top: 8.5cqw; width: 50cqw; height: 44.5cqw; }
.an-res .panel__title { left: 49.5cqw; top: 11.6cqw; }
.an-res .panel__sub { left: 49.5cqw; top: 14.4cqw; }
.an-res .rf {
  left: 49.5cqw;
  width: 43cqw; height: 7.2cqw;
  background: var(--white);
  border-radius: .6cqw;
  box-shadow: inset 0 0 0 1px var(--an-border);
  animation-duration: var(--t);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.an-res .rf1 { top: 19.2cqw; animation-name: an-res-rf1 } .an-res .rf2 { top: 28.4cqw; animation-name: an-res-rf2 } .an-res .rf3 { top: 37.6cqw; animation-name: an-res-rf3 }
.an-res .rf__lbl { position: absolute; left: 1.5cqw; top: -.9cqw; padding: 0 .6cqw; background: var(--white); font-weight: 500; font-size: 1.25cqw; line-height: 1.3; color: var(--an-label); white-space: nowrap; }
.an-res .rf__val { position: absolute; left: 2.2cqw; top: 50%; height: 1.7cqw; transform: translateY(-50%); font-family: var(--an-mono); font-weight: 500; font-size: 1.55cqw; line-height: 1.1; white-space: nowrap; color: var(--black); }
.an-res .rf__val > span { position: absolute; left: 0; top: 0; }
.an-res .rf__ph { color: var(--an-border); }
.an-res .rf__v { opacity: 0; transform: translateX(-1cqw); animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: ease-out; }
.an-res .rf1 .rf__ph { animation: an-res-ph1 var(--t) infinite } .an-res .rf1 .rf__v { animation-name: an-res-v1 }
.an-res .rf2 .rf__ph { animation: an-res-ph2 var(--t) infinite } .an-res .rf2 .rf__v { animation-name: an-res-v2 }
.an-res .rf3 .rf__ph { animation: an-res-ph3 var(--t) infinite } .an-res .rf3 .rf__v { animation-name: an-res-v3 }
@keyframes an-res-ph1 { 0%, 37% { opacity: 1 } 39%, 100% { opacity: 0 } }
@keyframes an-res-ph2 { 0%, 43% { opacity: 1 } 45%, 100% { opacity: 0 } }
@keyframes an-res-ph3 { 0%, 49% { opacity: 1 } 51%, 100% { opacity: 0 } }
@keyframes an-res-v1 { 0%, 37% { opacity: 0; transform: translateX(-1cqw) } 40%, 100% { opacity: 1; transform: none } }
@keyframes an-res-v2 { 0%, 43% { opacity: 0; transform: translateX(-1cqw) } 46%, 100% { opacity: 1; transform: none } }
@keyframes an-res-v3 { 0%, 49% { opacity: 0; transform: translateX(-1cqw) } 52%, 100% { opacity: 1; transform: none } }
@keyframes an-res-rf1 { 0%, 39% { box-shadow: inset 0 0 0 1px var(--an-border); background-color: #fff } 42%, 100% { box-shadow: inset -1cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05) } }
@keyframes an-res-rf2 { 0%, 45% { box-shadow: inset 0 0 0 1px var(--an-border); background-color: #fff } 48%, 100% { box-shadow: inset -1cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05) } }
@keyframes an-res-rf3 { 0%, 51% { box-shadow: inset 0 0 0 1px var(--an-border); background-color: #fff } 54%, 100% { box-shadow: inset -1cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05) } }
.an-res .rf__tag { position: absolute; right: 2.2cqw; top: 50%; transform: translateY(-50%); font-size: 1.35cqw; padding: .45cqw 1cqw; opacity: 0; animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: var(--an-pop); }
.an-res .rf1 .rf__tag { animation-name: an-res-tag1 } .an-res .rf2 .rf__tag { animation-name: an-res-tag2 } .an-res .rf3 .rf__tag { animation-name: an-res-tag3 }
@keyframes an-res-tag1 { 0%, 40% { opacity: 0; transform: translateY(-50%) scale(.8) } 44%, 100% { opacity: 1; transform: translateY(-50%) scale(1) } }
@keyframes an-res-tag2 { 0%, 46% { opacity: 0; transform: translateY(-50%) scale(.8) } 50%, 100% { opacity: 1; transform: translateY(-50%) scale(1) } }
@keyframes an-res-tag3 { 0%, 52% { opacity: 0; transform: translateY(-50%) scale(.8) } 56%, 100% { opacity: 1; transform: translateY(-50%) scale(1) } }

/* Export-Zeile */
.an-res .exp { left: 49.5cqw; top: 47.4cqw; width: 43cqw; display: flex; align-items: center; gap: .9cqw; opacity: 0; animation: an-res-exp var(--t) infinite var(--an-pop); }
.an-res .exp__lbl { font-weight: 500; font-size: 1.3cqw; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--an-muted); margin-right: .4cqw; }
.an-res .exp .an__tag { font-size: 1.3cqw; padding: .45cqw 1cqw; }
@keyframes an-res-exp { 0%, 60% { opacity: 0; transform: translateY(.8cqw) } 65%, 100% { opacity: 1; transform: none } }

/* Endzustand bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
  .an-cfg .tw { clip-path: none; }
  .an-cfg .focus, .an-cfg .save > .save__a { display: none; }
  .an-cfg .save__b { opacity: 1; }
  .an-cfg .models__hl { transform: translateX(10.5cqw); }
  .an-cfg .models span:nth-of-type(1) { color: var(--an-muted); }
  .an-cfg .models span:nth-of-type(2) { color: var(--blue-main); }
  .an-cfg .save { background: var(--blue-dark); }
  .an-res .drop__hint, .an-res .bar, .an-res .bar__lbl, .an-res .rf__ph { display: none; }
  .an-res .pg, .an-res .rf__v, .an-res .exp { opacity: 1; transform: none; }
  .an-res .rf { box-shadow: inset -1cqw 0 0 var(--an-ok), inset 0 0 0 1px var(--an-border); background-color: rgba(44, 123, 255, .05); }
  .an-res .rf__tag { opacity: 1; transform: translateY(-50%); }
}

/* Hinweis unter den Animationen. Die gezeigten Rechnungsnummern, Daten und
   Konfidenzwerte sind Kulisse, keine Kennzahlen — für Besucher und ebenso
   für Textextraktoren, die die Animation als lebenden Text mitlesen. */
.shot-note {
  display: block;      /* auch in Flex-Figuren volle Breite, damit die Zentrierung greift */
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-align: center;
  color: inherit;   /* folgt dem Abschnitt, hell wie dunkel */
  opacity: .55;
}