/* Knobelbande Bild-Gleichung — Regeln in 03-spiele/bildgleichung/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-bildgleichung am body).
   Die Zeichnung (raetsel_svg(), werte_svg(), loesung_svg() in arten/bildgleichung.py) nutzt dieselben Klassen
   auch in Vorschau-, Rätsel-, Pinterest- und Beitragsbildern; Maße dort in viewBox-Einheiten (eine Zeile 150
   hoch, ein Motiv 118). Motivfarben über bgl-f-<ton>, im Druck schwarz (Motive sind auch ohne Farbe eindeutig). */

.bildgleichung,
.bgl-bild,
.bgl-werte { --motiv-grund: var(--papier-weiss); }

/* --- Zeichnung (SVG) ------------------------------------------------------ */
.bgl-bild, .bgl-werte { display: block; width: 100%; height: auto; margin: 0 auto; color: var(--tinte); overflow: visible; }
.bgl-op { font: 400 96px var(--schrift-hand); fill: var(--tinte); text-anchor: middle; }
.bgl-zahl { font: 800 92px var(--schrift-grund); fill: var(--tinte); }
.bgl-zahl--frage { fill: var(--rotstift); }
.bgl-frage { fill: var(--zettel-gelb); stroke: var(--rotstift); stroke-width: 5; stroke-dasharray: 14 9; }
.bgl-frage--loesung { fill: var(--zettel-gruen); stroke: var(--gruenstift); stroke-dasharray: none; }
.bgl-frage--loesung + .bgl-zahl--frage { fill: var(--gruenstift); }
.bgl-zahl--wert { fill: var(--gruenstift); }
.bgl-kasten { fill: none; stroke: var(--tinte); stroke-width: 4; stroke-dasharray: 12 8; }
.bgl-strich { stroke: var(--tinte-weich); stroke-width: 4; stroke-dasharray: 2 14; stroke-linecap: round; }
/* Waage */
.bgl-schale { fill: var(--farbe-wuerfel); stroke: var(--tinte); stroke-width: 4; stroke-linejoin: round; }
.bgl-stange { stroke: var(--tinte); stroke-width: 6; stroke-linecap: round; }
.bgl-balken { fill: var(--tinte); }
.bgl-stand { fill: var(--farbe-wuerfel); stroke: var(--tinte); stroke-width: 4; stroke-linejoin: round; }
.bgl-sockel { fill: var(--tinte); }
.bgl-gelenk { fill: var(--papier-weiss); stroke: var(--tinte); stroke-width: 4; }
.bgl-gewicht { fill: var(--linie); stroke: var(--tinte); stroke-width: 4; stroke-linejoin: round; }
.bgl-gewicht-zahl { font: 800 60px var(--schrift-grund); fill: var(--tinte); }
/* Motivfarben (Strich; die Tönung folgt über currentColor) */
.bgl-f-rot { color: var(--rotstift); }
.bgl-f-gelb { color: var(--sternfarbe); }
.bgl-f-orange { color: var(--farbe-labyrinth-dunkel); }
.bgl-f-gruen { color: var(--gruenstift); }
.bgl-f-blau { color: var(--blaustift); }
.bgl-f-lila { color: var(--farbe-geheimschrift-dunkel); }
.bgl-f-braun { color: var(--farbe-wuerfel-dunkel); }
.bgl-f-rosa { color: var(--farbe-tresor-dunkel); }
.bgl-f-tinte { color: var(--tinte); }

/* --- Seite ---------------------------------------------------------------- */
.bgl-zettel {
  margin: var(--abstand-2) 0;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--zettel-gelb);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-zettel);
}
.bgl-zettel__kopf { margin: 0 0 var(--abstand-1); font-weight: 800; display: flex; align-items: center; gap: var(--abstand-1); }
.bgl-zettel ul { margin: 0; padding-left: 1.2em; }
.bildgleichung { position: relative; max-width: 34rem; margin: var(--abstand-3) auto; }
@media (max-width: 34rem) {
  .bildgleichung { margin-inline: var(--rand-spiel-breit); }
  .bgl-tafel { padding-inline: var(--abstand-1); }
}
.bgl-tafel {
  padding: var(--abstand-3) var(--abstand-2);
  background: var(--papier-weiss);
  border: 2px solid var(--linie);
  border-radius: var(--radius-mittel);
}
.bildgleichung--waage .bgl-bild { max-width: 28rem; }
.bgl-frage-text { margin: var(--abstand-3) 0 var(--abstand-2); text-align: center; font-weight: 700; }

/* A, B, C ohne JavaScript (zum Ankreuzen) */
.bgl-auswahl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-2) var(--abstand-4); font-size: 1.4rem; font-weight: 800; }
.bgl-auswahl li { display: flex; align-items: center; gap: .4rem; }
.bgl-auswahl b { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border: 2px solid var(--tinte); border-radius: 50%; background: var(--farbe-art); font-size: 1rem; }
.bgl-kreuz { display: none; width: 1.1em; height: 1.1em; border: 2px solid var(--tinte); border-radius: 3px; }
.bgl-auswahl__bilder { display: inline-flex; }
.bgl-auswahl__bild { width: 1.4rem; height: 1.4rem; color: var(--tinte); }
.bgl-auswahl__bild + .bgl-auswahl__bild { margin-left: -.3rem; }

/* --- Spiel (nur mit JavaScript) ------------------------------------------- */
.bildgleichung--aktiv .bgl-auswahl { display: none; }
.bgl-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-2); }
.bgl-knopf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 4rem; min-width: 44px; padding: var(--abstand-2) var(--abstand-1);
  background: var(--papier-weiss); color: var(--tinte);
  border: 3px solid var(--tinte); border-radius: var(--radius-gross);
  font: 800 1.6rem/1 var(--schrift-grund); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bgl-knopf:hover { background: var(--papier); }
.bgl-knopf:focus-visible { outline: none; box-shadow: var(--fokus); }
.bgl-knopf__oben { display: flex; align-items: center; gap: .45rem; }
.bgl-knopf__buchstabe { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border: 2px solid var(--tinte); border-radius: 50%; background: var(--farbe-art); font-size: 1rem; }
.bgl-knopf__bilder { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.bgl-knopf__bild { width: 1.5rem; height: 1.5rem; color: var(--tinte); }
.bgl-knopf__bild + .bgl-knopf__bild { margin-left: -.35rem; }
.bgl-knopf--falsch { border-style: dashed; border-color: var(--bleistift); color: var(--bleistift); cursor: default; }
.bgl-knopf--falsch .bgl-knopf__zahl { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--rotstift); }
.bgl-knopf--richtig { background: var(--zettel-gruen); border-color: var(--gruenstift); }
.bgl-knopf[disabled] { cursor: default; }
.bgl-meldung { min-height: 1.6em; margin: var(--abstand-2) var(--abstand-1); font-family: var(--schrift-hand); font-size: 1.25em; text-align: center; }
.bgl-meldung--gut { color: var(--gruenstift); }
.bgl-meldung--fehler { color: var(--rotstift); }
.bgl-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--abstand-3) var(--abstand-5); }
.bgl-aktionen[hidden] { display: none; }
.bgl-stempel { pointer-events: none; }

/* --- Lösung --------------------------------------------------------------- */
.bgl-loesung-bild { max-width: 22rem; margin: var(--abstand-2) auto; }
.bgl-weg { margin: var(--abstand-1) 0 0; padding-left: 1.6em; }

/* --- Druck ---------------------------------------------------------------- */
.bgl-notiz { display: none; }
@media print {
  .bildgleichung { max-width: none; margin: 2mm 0 0; break-inside: avoid; }
  .bildgleichung, .bgl-bild { --motiv-grund: #fff; }
  .bgl-tafel { border: 1pt solid #000; padding: 2mm; background: #fff; }
  .bgl-bild { width: auto; max-width: 100%; max-height: 74mm; }
  .bildgleichung--waage .bgl-bild { max-width: 100%; max-height: 84mm; }
  .bgl-motiv, .bgl-auswahl__bild { color: #000; }
  .bgl-frage { fill: #fff; stroke: #000; }
  .bgl-zahl--frage { fill: #000; }
  .bgl-schale, .bgl-stand, .bgl-gewicht { fill: #fff; }
  .bgl-knoepfe, .bgl-meldung, .bgl-aktionen, .bgl-stempel { display: none !important; }
  .bildgleichung--aktiv .bgl-auswahl { display: flex; }
  .bgl-frage-text { margin: 2mm 0 1mm; }
  .bgl-auswahl { font-size: 14pt; gap: 2mm 12mm; }
  .bgl-auswahl b { background: #fff; }
  .bgl-kreuz { display: inline-block; }
  .bgl-zettel { display: flex; gap: 4mm; align-items: baseline; box-shadow: none; border: 1pt solid #000; background: #fff;
    padding: 1.5mm 3mm; margin: 0 0 2mm; font-size: 10.5pt; }
  .bgl-zettel__kopf { margin: 0; }
  .bgl-zettel ul { columns: 2; column-gap: 6mm; }
  .bgl-notiz { display: block; margin: 3mm 0 0; break-inside: avoid; }
  .bgl-notiz__titel { margin: 0 0 1mm; font-weight: 700; }
  .bgl-notiz ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2mm 10mm; }
  .bgl-notiz li { display: flex; align-items: center; gap: 2mm; font-size: 14pt; font-weight: 700; }
  .bgl-notiz__bild { width: 10mm; height: 10mm; color: #000; }
  .bgl-notiz__feld { display: inline-block; width: 16mm; border-bottom: 1pt solid #000; height: 7mm; }
  .bgl-weg { font-size: 9pt; columns: 2; column-gap: 6mm; }
}