/* ------------------------------------------- Figuren zusammensetzen (Trainer)
   Wie FigurenScreen.tsx: Aufgabenbild als Karte (Teile oben, Figuren A–E
   unten), Antippen vergrößert; „Lösung ansehen" zeigt das Lösungsbild und die
   ausgeschlossenen Figuren. Dunkelmodus über den SVG-Filter je Aufgabe
   (landing/aufgaben/figuren.mjs): Grund und Linien umgekehrt, Blau bleibt. */

/* Aufgabe frei auf dem Grund wie in der App — ohne den alten Quiz-Kasten
   (.aufgabe in stil.css: Rahmen, Fläche, rot/grün getönter Rand). */
.trainer .aufgabe:has(.fz-bild) { margin: 0; border: 0; border-radius: 0; background: none; }
/* Kopfzeile: der lange Titel bekommt am Handy eine eigene Zeile, statt dass
   Titel, Stand und Zähler je zweizeilig umbrechen. */
.trainer:has(.fz-bild) .t-kopf { flex-wrap: wrap; row-gap: 6px; }
.trainer:has(.fz-bild) .t-stand, .trainer:has(.fz-bild) .t-zaehler { white-space: nowrap; }

.fz-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.fz-bild { margin: 14px 0 0; padding: 12px; border-radius: 20px; background: var(--t-flaeche, #fffdfa); box-shadow: 0 1px 2px rgba(74, 60, 44, 0.05), 0 10px 26px -16px rgba(74, 60, 44, 0.18); }
/* multiply: Der weiße Bildgrund nimmt die Kartenfarbe an, statt als hellerer
   Kasten in der Karte zu stehen; Blau und Linien bleiben praktisch gleich. */
.fz-bild img, .fz-loesung img { display: block; width: 100%; height: auto; border-radius: 8px; will-change: transform; mix-blend-mode: multiply; }
.fz-bild[role="button"] { cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; }
.fz-bild[role="button"]:active { transform: scale(0.99); }
.fz-bild:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.fz-loesung { margin: 4px 0 0; }

/* Erklärung: Kernsatz, dann je ausgeschlossener Figur eine Zeile */
.fz-aus-titel { margin: 16px 0 0 !important; font: 600 11.5px/1.2 "Work Sans", sans-serif !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-muted) !important; }
.fz-aus { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fz-aus li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--t-flaeche2); font: 400 14px/1.5 "Work Sans", sans-serif; color: var(--t-soft); }
.fz-aus-b { flex: none; width: 22px; height: 22px; margin-top: 0.5px; display: grid; place-items: center; border-radius: 7px; background: var(--t-flaeche); color: var(--t-muted); font: 700 12px/1 "Work Sans", sans-serif; }
.fz-aus strong { font-weight: 600; color: var(--t-ink); }

@media (max-width: 520px) {
  .trainer:has(.fz-bild) .t-titel { flex-basis: 100%; }
  .fz-bild { padding: 8px; border-radius: 18px; }
}

@media (prefers-color-scheme: dark) {
  .fz-bild img, .fz-loesung img { filter: var(--fz-filter, invert(0.84) hue-rotate(180deg) sepia(0.12)); mix-blend-mode: normal; }
}

/* Vergrößerung (landing/figuren.js) — liegt über allem, auch über der Leiste */
.fz-gesperrt, .fz-gesperrt body { overflow: hidden; }
.fz-zoom { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(251, 248, 243, 0.97); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fz-ein 0.2s ease; font-family: "Work Sans", sans-serif; }
.fz-zoom[hidden] { display: none; }
@keyframes fz-ein { from { opacity: 0; } }
.fz-zoom-kopf { display: flex; justify-content: flex-end; padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 0; }
.fz-zu { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fffdfa; color: #2a2521; box-shadow: 0 1px 2px rgba(74, 60, 44, 0.08), 0 8px 20px -10px rgba(74, 60, 44, 0.35); cursor: pointer; transition: transform 0.15s; }
.fz-zu:active { transform: scale(0.95); }
.fz-zu:focus-visible { outline: 2px solid var(--akzent, #c2543c); outline-offset: 2px; }
.fz-zoom-flaeche { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.fz-zoom-flaeche.gezoomt { cursor: grab; }
/* 100vh zuerst: Browser ohne dvh (iOS < 15.4) verwerfen sonst die ganze
   Breite, und das Bild stünde in voller Größe (1000 px) abgeschnitten da. */
.fz-zoom-flaeche img { display: block; width: min(100%, calc((100vh - 120px) * 2.3256)); width: min(100%, calc((100dvh - 120px) * 2.3256)); max-width: none; height: auto; transform-origin: center center; will-change: transform; pointer-events: none; user-select: none; -webkit-user-select: none; mix-blend-mode: multiply; }
.fz-zoom-hinweis { margin: 0; padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 16px); text-align: center; font: 400 13px/1.4 "Work Sans", sans-serif; color: #7a7065; }
@media (hover: none) { .fz-zoom-hinweis .maus { display: none; } }
@media (hover: hover) { .fz-zoom-hinweis .touch { display: none; } }
@media (prefers-color-scheme: dark) {
  .fz-zoom { background: rgba(33, 29, 26, 0.97); }
  .fz-zu { background: #2b2622; color: #f1ebe3; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
  .fz-zoom-flaeche img { filter: url(#fz-dunkel-zoom); mix-blend-mode: normal; }
  .fz-zoom-hinweis { color: #a69a8d; }
}
@media (prefers-reduced-motion: reduce) {
  .fz-zoom { animation: none; }
}