/* Knobelbande „Finde die Unterschiede“ — Regeln in 03-spiele/unterschiede/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-unterschiede am body).
   Handy: Bild 1 und Bild 2 untereinander, die Leiste mit Zähler und Tipp klebt oben. Ab 48rem nebeneinander.
   Druck: beide Bilder nebeneinander auf Blatt 1, die Lösung (Bild 2 mit Kreisen) auf Blatt 2. */

.unterschiede { position: relative; margin: var(--abstand-3) auto; max-width: 34rem; }
@media (max-width: 34rem) {
  .unterschiede { margin-inline: var(--rand-spiel-breit); }
}
.ud-frage { font-weight: 700; }

/* --- Bilder ---------------------------------------------------------------- */
.ud-bilder { position: relative; display: grid; gap: var(--abstand-3); overflow-x: clip; }
.ud-bild { margin: 0; }
.ud-rahmen {
  position: relative; line-height: 0;
  border: 2px solid var(--tinte); border-radius: var(--radius-mittel);
  overflow: hidden; background: var(--papier-weiss);
}
.ud-rahmen img { display: block; width: 100%; height: auto; }
.ud-bild__name {
  margin: var(--abstand-1) 0 0; text-align: center;
  font-family: var(--schrift-hand); font-size: 1.25em; line-height: 1.2;
}
.ud-quelle { margin: var(--abstand-1) 0 var(--abstand-3); font-size: var(--groesse-klein); color: var(--bleistift); text-align: center; }
.ud-ohne-js { margin-top: var(--abstand-2); }

/* Kreise in Rotstift (Spiel und Lösung), Hinweis in Blaustift, Fehltipp als Bleistiftpunkt */
.ud-ebene, .ud-kreise { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ud-kreis { fill: none; stroke: var(--rotstift); stroke-width: 3.5; stroke-linecap: round; }
.ud-kreise .ud-kreis { stroke-width: .9; }
.ud-kreis--neu { animation: ud-kringel .45s ease-out; }
.ud-hinweis { fill: var(--blaustift-hell); fill-opacity: .35; stroke: var(--blaustift); stroke-width: 3; stroke-dasharray: 6 5; animation: ud-blinken .65s ease-in-out 4 alternate; }
.ud-fehl { fill: var(--bleistift); fill-opacity: .55; animation: ud-weg 1.2s ease-out forwards; }
.ud-nr-grund { fill: var(--rotstift); }
.ud-nr { fill: var(--papier-weiss); font: 800 4px var(--schrift-grund); text-anchor: middle; }
@keyframes ud-kringel { from { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ud-blinken { from { opacity: 1; } to { opacity: .15; } }
@keyframes ud-weg { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ud-kreis--neu, .ud-fehl { animation: none; }
  .ud-hinweis { animation: none; }
}

/* --- Spiel (nur mit JavaScript) -------------------------------------------- */
.unterschiede--aktiv .ud-ohne-js { display: none; }
.ud-rahmen--spiel { cursor: crosshair; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ud-leiste {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-1) var(--abstand-2);
  margin-bottom: var(--abstand-1); padding: var(--abstand-1) var(--abstand-2);
  background: var(--farbe-art); border: 2px solid var(--tinte); border-radius: var(--radius-mittel);
}
.ud-zaehler { margin: 0; font-weight: 800; font-size: 1.15em; }
.ud-knoepfe { display: flex; gap: var(--abstand-1); }
.ud-knoepfe .knopf { min-height: var(--tippflaeche); }
/* Die Meldung steht in der klebenden Leiste: am Handy bleibt sie beim Tippen in Bild 2 im Blick */
.ud-meldung { flex: 1 1 100%; margin: 0; font-family: var(--schrift-hand); font-size: 1.15em; line-height: 1.25; }
.ud-meldung:empty { display: none; }
.ud-meldung--gut { color: var(--gruenstift); }
.ud-gefunden { margin: var(--abstand-3) 0 0; padding-left: 1.6em; }
.ud-gefunden:empty { display: none; }
.ud-gefunden li::marker { color: var(--rotstift); font-weight: 800; }
/* Mitte über den Bildern; ohne eigenes transform, das braucht die Stempel-Animation (.stempel--auf) */
.ud-stempel { position: absolute; top: 42%; left: 0; right: 0; width: max-content; margin-inline: auto; z-index: 1; pointer-events: none; }

/* Breit: beide Bilder nebeneinander, damit man direkt vergleicht */
@media (min-width: 48rem) {
  .unterschiede { max-width: none; }
  .ud-bilder { grid-template-columns: 1fr 1fr; gap: var(--abstand-3); }
  .ud-leiste { position: static; }
}

/* --- Lösung ------------------------------------------------------------------ */
.ud-loesung .ud-rahmen--loesung { max-width: 22rem; margin: var(--abstand-2) auto; }
.ud-liste { margin: var(--abstand-2) 0 0; padding-left: 1.6em; }
.ud-liste li::marker { color: var(--rotstift); font-weight: 800; }

/* --- Druck ------------------------------------------------------------------- */
@media print {
  .unterschiede { max-width: none; margin: 2mm 0 0; }
  .ud-leiste, .ud-meldung, .ud-gefunden, .ud-ebene, .ud-ohne-js, .ud-stempel { display: none !important; }
  .ud-bilder { grid-template-columns: 1fr 1fr; gap: 5mm; break-inside: avoid; }
  .ud-rahmen { border: 1pt solid #000; border-radius: 2mm; }
  .ud-bild__name { font-size: 12pt; margin-top: 1mm; }
  .ud-quelle { margin: 1mm 0 0; font-size: 8pt; text-align: left; }
  .ud-loesung--druck { display: grid; grid-template-columns: 95mm 1fr; gap: 6mm; align-items: start; }
  .ud-loesung--druck .ud-rahmen--loesung { max-width: none; margin: 0; }
  .ud-loesung--druck .ud-liste { margin: 0; font-size: 11pt; }
  .ud-kreis { stroke: #000; }
  .ud-nr-grund { fill: #000; }
}