/* Animationen, die das Programm selbst rechnet (D-024) — passen sich den drei Welten über die Grundmarken an. */
.anim { margin-bottom: 16px; }
.anim figcaption { margin-bottom: 8px; }
.anim-buehne svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.anim-regler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.anim-schieber { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; }
.anim-schieber input { flex: 1; min-height: var(--ziel); accent-color: var(--akzent); }
.anim-satz { margin: 10px 0 0; font-weight: 500; min-height: 1.6em; }

/* Uhr */
.anim-flaeche { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 3; }
.anim-strich { stroke: var(--tinte-leise); stroke-width: 1.5; }
.anim-strich-dick { stroke: var(--tinte); stroke-width: 3; }
.anim-zahl { font: 600 20px var(--schrift-text); fill: var(--tinte); text-anchor: middle; }
.anim-zeiger-kurz { stroke: var(--tinte); stroke-width: 7; stroke-linecap: round; }
.anim-zeiger-lang { stroke: var(--akzent); stroke-width: 4; stroke-linecap: round; }
.anim-mitte { fill: var(--tinte); }
.anim-spanne { fill: var(--gold-hell); stroke: var(--gold); stroke-width: 1.5; }

/* Spiegeln */
.anim-gitter { stroke: var(--rand); stroke-width: 1; }
.anim-achse { stroke: var(--falsch); stroke-width: 3; stroke-dasharray: 8 5; }
.anim-zentrum { stroke-width: 12; stroke-linecap: round; stroke-dasharray: none; }
.anim-urbild { fill: color-mix(in srgb, var(--akzent) 35%, transparent); stroke: var(--akzent); stroke-width: 2.5; }
.anim-bild { fill: color-mix(in srgb, var(--gold) 40%, transparent); stroke: var(--gold); stroke-width: 2.5; }
.anim-verbinder { stroke: var(--tinte-leise); stroke-width: 1.5; stroke-dasharray: 4 4; }

/* Winkel */
.anim-strahl { stroke: var(--tinte); stroke-width: 4; stroke-linecap: round; }
.anim-winkelbogen { fill: var(--akzent-hell); stroke: var(--akzent); stroke-width: 2; }
.anim-gradzahl { font: 700 18px var(--schrift-text); fill: var(--akzent-tief); text-anchor: middle; }

/* Waage */
.anim-saeule { fill: var(--tinte-leise); }
.anim-balken { fill: var(--tinte); }
.anim-schale { fill: var(--flaeche-tief); stroke: var(--tinte); stroke-width: 2; }
.anim-seil { stroke: var(--tinte-leise); stroke-width: 1.5; }
.anim-schalen-text { font: 600 14px var(--schrift-text); fill: var(--tinte); text-anchor: middle; }

/* Erde, Sonne, Mond */
.anim-sonne { fill: #F5B82E; }
.anim-strahlen { stroke: #F5B82E; stroke-width: 2; stroke-dasharray: 6 6; opacity: .7; }
.anim-erde { fill: #3D8BD9; stroke: #1F5FA0; stroke-width: 1.5; }
.anim-nacht { fill: rgba(10, 16, 40, .62); }
.anim-ort { fill: var(--falsch); stroke: #fff; stroke-width: 2; }
.anim-ort-text { font: 700 13px var(--schrift-text); fill: var(--tinte); text-anchor: middle;
                 paint-order: stroke; stroke: var(--flaeche); stroke-width: 4px; }   /* lesbar auf hell und dunkel */
.anim-bahn { fill: none; stroke: var(--tinte-leise); stroke-width: 1.5; stroke-dasharray: 5 5; }
.anim-achse-erde { stroke: var(--falsch); stroke-width: 2.5; }
.anim-mond { fill: #F1F0E8; stroke: #B9B6A3; stroke-width: 1; }
.anim-mond-dunkel { fill: #3A3F55; }

/* Brüche */
.anim-bruchteil { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 2; }
.anim-bruchteil.voll { fill: color-mix(in srgb, var(--akzent) 55%, var(--flaeche)); }
.anim-bruch-gleich { font: 700 16px var(--schrift-text); fill: var(--akzent-tief); }

/* Würfelnetz — Flächen sind verschachtelte Kästchen: jede klappt um die Kante zu ihrer Elternfläche (CSS 3D) */
.anim-netz-buehne { perspective: 900px; display: grid; place-items: center; min-height: 300px; overflow: hidden; }
/* Null groß und in der Mitte: Die Flächen liegen um diesen Punkt, JS schiebt das Netz (flach: seine Mitte, gefaltet: die
   Würfelmitte) genau dorthin — so steht der Würfel am Ende mittig. */
.anim-netz { position: relative; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; }
.anim-netzfeld { position: absolute; width: 58px; height: 58px; box-sizing: border-box; transform-style: preserve-3d;
                 display: grid; place-items: center; font: 700 18px var(--schrift-text); color: var(--tinte);
                 background: color-mix(in srgb, var(--akzent) 30%, var(--flaeche)); border: 2px solid var(--tinte); }

/* Bildfolgen (Weg 2) */
.anim-folge-buehne { display: grid; justify-items: center; gap: 8px; }
.anim-folge-bild { display: block; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; object-fit: cover;
                   border-radius: 12px; background: var(--flaeche-tief); }
.anim-folge-punkte { display: flex; gap: 6px; }
.anim-folge-punkte span { width: 10px; height: 10px; border-radius: 50%; background: var(--rand); }
.anim-folge-punkte span.an { background: var(--akzent); }

@media (prefers-reduced-motion: reduce) { .anim * { transition: none !important; } }