/* FormelKit — animierte Umformungen in KaTeX (Doku: docs/architektur/FORMELKIT.md).
 *
 *   <link rel="stylesheet" href="../_shared/vendor/katex/katex.min.css">
 *   <link rel="stylesheet" href="../_shared/formelkit.css">
 *
 * Farben kommen ausschließlich aus der Palette: FormelKit setzt --fk-<farbe> am Wurzelelement
 * (setFarben), Rückfall sind die --pal-*-Variablen aus visukit.js. Keine eigenen Bunttöne.
 */

.fk-root { position: relative; user-select: none; -webkit-user-select: none; }
.fk-root, .fk-grund {
  /* Rückfall, solange setFarben() nicht gelaufen ist */
  --fk-accent: var(--pal-accent, #4380b9);
  --fk-bold: var(--pal-bold, #2a1fe0);
  --fk-medium: var(--pal-medium, #5d55e7);
  --fk-soft: var(--pal-soft, #8882ed);
  --fk-subtle: var(--pal-subtle, #b2aff4);
  --fk-altA: var(--pal-alt-a, #e5619c);
  --fk-altB: var(--pal-alt-b, #e5ab61);
  --fk-altC: var(--pal-alt-c, #9ce561);
  --fk-altD: var(--pal-alt-d, #61e5ab);
  --fk-altE: var(--pal-alt-e, #d461e5);
  --fk-altF: var(--pal-alt-f, #61c5e5);
  --fk-ink: currentColor;
  --fk-faint: currentColor;
}
body.theme-dark  .fk-root, body.theme-dark  .fk-grund { --fk-ink: #e8ebf4; --fk-faint: rgba(232, 235, 244, 0.42); }
body.theme-light .fk-root, body.theme-light .fk-grund { --fk-ink: #1b2436; --fk-faint: rgba(27, 36, 54, 0.42); }
.fk-root { color: var(--fk-ink); }

/* Ebenen: je Schritt eine KaTeX-Zeile, mittig in der Bühne. Die KaTeX-Einheit (em) ist die
   Schriftgröße der Ebene — FormelKit setzt sie (groesse), .katex vergrößert nicht noch einmal. */
.fk-ebene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; white-space: nowrap;
}
.fk-root .katex { font-size: 1em; }
.fk-root .katex-display { margin: 0; }
.fk-root .katex-display > .katex { text-align: center; }
.fk-messen { position: absolute; left: -99999px; top: 0; visibility: hidden; white-space: nowrap; }

/* Unter- und Überlage: Farbflächen hinter der Formel, Striche/Bögen/kleine Zahlen/Geister darüber */
.fk-unter, .fk-ueber { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.fk-ueber svg { position: absolute; left: 0; top: 0; overflow: visible; }
.fk-geist { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; will-change: transform, opacity; }
.fk-geist.katex { line-height: 1.2; }
.fk-flip { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; backface-visibility: hidden; }
.fk-balken { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 0.02em; will-change: transform, opacity; }
.fk-klein { position: absolute; left: 0; top: 0; white-space: nowrap; }
.fk-klein .katex { font-size: 1em; }
.fk-flaeche { position: absolute; left: 0; top: 0; border-radius: 0.18em; }

/* Farbcode per Markierung: \fk{id:altA}{…} → data-fkc="altA"; \fkdim → data-fkd */
.fk-root [data-fkc="accent"], .fk-grund [data-fkc="accent"] { color: var(--fk-accent); }
.fk-root [data-fkc="bold"], .fk-grund [data-fkc="bold"] { color: var(--fk-bold); }
.fk-root [data-fkc="medium"], .fk-grund [data-fkc="medium"] { color: var(--fk-medium); }
.fk-root [data-fkc="soft"], .fk-grund [data-fkc="soft"] { color: var(--fk-soft); }
.fk-root [data-fkc="subtle"], .fk-grund [data-fkc="subtle"] { color: var(--fk-subtle); }
.fk-root [data-fkc="altA"], .fk-grund [data-fkc="altA"] { color: var(--fk-altA); }
.fk-root [data-fkc="altB"], .fk-grund [data-fkc="altB"] { color: var(--fk-altB); }
.fk-root [data-fkc="altC"], .fk-grund [data-fkc="altC"] { color: var(--fk-altC); }
.fk-root [data-fkc="altD"], .fk-grund [data-fkc="altD"] { color: var(--fk-altD); }
.fk-root [data-fkc="altE"], .fk-grund [data-fkc="altE"] { color: var(--fk-altE); }
.fk-root [data-fkc="altF"], .fk-grund [data-fkc="altF"] { color: var(--fk-altF); }
.fk-root [data-fkc="ink"], .fk-grund [data-fkc="ink"] { color: var(--fk-ink); }
.fk-root [data-fkc="faint"], .fk-grund [data-fkc="faint"] { color: var(--fk-faint); }
.fk-root [data-fkd] > *, .fk-grund [data-fkd] > * { opacity: 0.4; }

/* Tippflächen (Üben): mindestens 44 px, sichtbarer Hover */
.fk-tipp {
  position: absolute; pointer-events: auto; cursor: pointer;
  border: none; padding: 0; margin: 0; background: transparent; border-radius: 12px;
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
body.theme-dark  .fk-tipp:hover { background: rgba(255, 255, 255, 0.07); }
body.theme-light .fk-tipp:hover { background: rgba(15, 23, 42, 0.06); }
.fk-tipp:focus-visible { outline: none; }
body.theme-dark  .fk-tipp:focus-visible { background: rgba(255, 255, 255, 0.10); }
body.theme-light .fk-tipp:focus-visible { background: rgba(15, 23, 42, 0.08); }
.fk-tipp.gewaehlt { background: color-mix(in srgb, var(--fk-altB) 26%, transparent) !important; }

/* Begründung und Schrittleiste (optional, von der App platziert) */
.fk-grund { text-align: center; transition: opacity 0.22s; }
.fk-grund.aus { opacity: 0; }
.fk-grund .katex { font-size: 1.12em; }
.fk-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.fk-nav button {
  min-width: 44px; height: 44px; border: none; border-radius: 12px; cursor: pointer;
  background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.75; transition: background-color 0.15s, opacity 0.15s;
}
.fk-nav button:hover { opacity: 1; }
body.theme-dark  .fk-nav button:hover { background: rgba(255, 255, 255, 0.08); }
body.theme-light .fk-nav button:hover { background: rgba(15, 23, 42, 0.06); }
.fk-nav button:disabled { opacity: 0.25; cursor: default; background: transparent !important; }
.fk-nav button svg { width: 20px; height: 20px; }
.fk-nav .fk-punkte { display: flex; gap: 2px; }
.fk-nav .fk-punkt { min-width: 22px; width: 22px; padding: 0; }
.fk-nav .fk-punkt::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.3; transition: opacity 0.2s, transform 0.2s;
}
.fk-nav .fk-punkt.an::before { opacity: 1; transform: scale(1.25); background: var(--vk-ui-action, currentColor); }
body.theme-dark .fk-nav .fk-punkt.an::before { background: var(--vk-ui-active-ink, currentColor); }
@media (max-width: 560px) { .fk-nav .fk-punkt { min-width: 16px; width: 16px; } }

/* Filmmodus: nur die Formel */
body.buehne-film .fk-grund, body.buehne-film .fk-nav, body.buehne-film .fk-tipp { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fk-grund { transition: none; }
}