/* Knobelbande Überfahrt-Rätsel — Regeln in 03-spiele/ueberfahrt/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-ueberfahrt am body).
   Hochkant: Startufer oben, Fluss quer, Zielufer unten (Spiel und Szene, Entscheidung 032).

   Spielspezifische Tokens (nur hier): --uf-ufer (Wiese), --uf-wasser, --uf-holz (Boot).
   Die Szene (szene_svg() in arten/ueberfahrt.py) nutzt dieselben Klassen auch in Vorschau-, Rätsel-,
   Pinterest- und Beitragsbildern; Maße dort in viewBox-Einheiten (360 breit). */

.ueberfahrt,
.uf-szene,
.uf-fahrten-bild {
  --uf-ufer: var(--zettel-gruen);
  --uf-wasser: var(--zettel-blau);
  --uf-holz: var(--farbe-wuerfel);
  --motiv-grund: var(--papier-weiss);
}
.ueberfahrt { position: relative; max-width: 34rem; margin: var(--abstand-3) auto; }

/* --- Szene (SVG) ---------------------------------------------------------- */
.uf-szene, .uf-fahrten-bild { display: block; width: 100%; height: auto; margin: 0 auto; color: var(--tinte); }
.uf-druck { max-width: 24rem; }
.uf-ufer { fill: var(--uf-ufer); }
.uf-wasser { fill: var(--uf-wasser); }
.uf-welle { fill: none; stroke: var(--blaustift); stroke-opacity: .35; stroke-width: 2; stroke-linecap: round; }
.uf-ufer-name { font: 700 14px var(--schrift-grund); fill: var(--tinte); }
.uf-name { font: 700 13px var(--schrift-grund); fill: var(--tinte); text-anchor: middle; }
.uf-ziel-hinweis { font: 400 20px var(--schrift-hand); fill: var(--bleistift); text-anchor: middle; }
.uf-kg { font: 700 12px var(--schrift-grund); fill: var(--bleistift); text-anchor: middle; }
.uf-rumpf { fill: var(--uf-holz); stroke: var(--tinte); stroke-width: 2.5; stroke-linejoin: round; }
.uf-ruder { fill: none; stroke: var(--tinte); stroke-width: 3; stroke-linecap: round; }
.uf-pfeil { fill: none; stroke: var(--rotstift); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.uf-pfeil--hin { stroke: var(--blaustift); }
.uf-zettel { fill: var(--zettel-gelb); stroke: var(--tinte); stroke-width: 1.5; }
.uf-zettel-kopf { font: 800 15px var(--schrift-grund); fill: var(--tinte); }
.uf-zettel-text { font: 400 13px var(--schrift-grund); fill: var(--tinte); }
.uf-zettel-punkt { fill: var(--tinte); }
.uf-fahrt { fill: var(--papier-weiss); stroke: var(--linie-karo); stroke-width: 1.5; }
.uf-fahrt-nr { font: 800 18px var(--schrift-grund); fill: var(--tinte); text-anchor: middle; }
.uf-fahrt-text { font: 700 14px var(--schrift-grund); fill: var(--tinte); }

/* --- Regelzettel auf der Seite ------------------------------------------- */
.uf-frage { font-weight: 700; }
.uf-zettel-html {
  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);
}
.uf-zettel-html__kopf { margin: 0 0 var(--abstand-1); font-weight: 800; display: flex; align-items: center; gap: var(--abstand-1); }
.uf-zettel-html ul { margin: 0; padding-left: 1.2em; }

/* --- Spiel (nur mit JavaScript) ------------------------------------------- */
@media (max-width: 34rem) {
  .ueberfahrt { margin-inline: var(--rand-spiel-breit); }
}
.ueberfahrt--aktiv .uf-druck,
.ueberfahrt--aktiv .uf-ohne-js { display: none; }
.uf-spiel { position: relative; }
.uf-leiste {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-1) var(--abstand-3);
  margin-bottom: var(--abstand-2); padding-inline: var(--abstand-1); font-weight: 700;
}
.uf-zaehler { font-size: 1.15em; }
.uf-uferfeld {
  position: relative;
  overflow: clip;
  background: var(--uf-ufer);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-1) var(--abstand-2) var(--abstand-2);
  min-height: 7.5rem;
}
.uf-uferfeld__kopf { margin: 0 0 var(--abstand-1); font-weight: 800; }
.uf-uferfeld__figuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: var(--abstand-1); }
.uf-leer { grid-column: 1 / -1; color: var(--bleistift); font-family: var(--schrift-hand); font-size: 1.1em; padding: var(--abstand-2) 0; }

.uf-fig {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-width: 44px; min-height: 5.2rem; padding: .25rem .2rem;
  background: var(--papier-weiss); color: var(--tinte);
  border: 2px solid var(--tinte); border-radius: var(--radius-mittel);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.uf-fig:hover { background: var(--papier); }
.uf-fig:focus-visible { outline: none; box-shadow: var(--fokus); }
.uf-fig__bild { width: 2.6rem; height: 2.6rem; }
.uf-fig__name { font-weight: 700; font-size: .9rem; line-height: 1.15; }
.uf-fig__kg { font-size: .8rem; color: var(--bleistift); font-weight: 700; line-height: 1.1; }
.uf-fig--drueben { border-style: dashed; border-color: var(--bleistift); opacity: .8; }

.uf-fluss {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 9.5rem; margin: 0; padding: var(--abstand-2) var(--abstand-1);
  background: var(--uf-wasser);
  background-image: repeating-linear-gradient(170deg, transparent 0 1.2rem, rgba(30, 80, 140, .08) 1.2rem 1.35rem);
}
.uf-fluss--unten { justify-content: flex-end; }
.uf-fluss__reihe { display: flex; align-items: center; gap: var(--abstand-2); }
.uf-boot {
  flex: 1 1 auto; min-width: 0;
  background: var(--uf-holz);
  border: 2.5px solid var(--tinte);
  border-radius: .4rem .4rem 2.2rem 2.2rem;
  padding: var(--abstand-1) var(--abstand-2) .55rem;
}
.uf-boot__plaetze { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-1); min-height: 5.2rem; }
.uf-boot__plaetze .uf-fig { width: 4.6rem; }
.uf-platz {
  display: flex; align-items: center; justify-content: center; width: 4.6rem; min-height: 5.2rem;
  border: 2px dashed var(--tinte); border-radius: var(--radius-mittel); opacity: .55;
  font-family: var(--schrift-hand); font-size: 1.05em;
}
.uf-boot__last { margin: .3rem 0 0; text-align: center; font-weight: 700; font-size: .9rem; }
.uf-boot__last--zuviel { color: var(--rotstift); }
.uf-los[hidden] { display: none; }
.uf-los { flex: 0 0 auto; min-height: 44px; max-width: 8.5rem; white-space: normal; }

.uf-meldung { min-height: 1.6em; margin: var(--abstand-2) var(--abstand-1); font-family: var(--schrift-hand); font-size: 1.2em; }
.uf-meldung--gut { color: var(--gruenstift); }
.uf-meldung--fehler { color: var(--rotstift); }
.uf-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.uf-aktionen .knopf { flex: 1 1 8rem; }
.uf-protokoll { margin: var(--abstand-2) 0 0; padding-left: 1.6em; font-size: .95rem; columns: 2 10rem; }
.uf-protokoll__fahrt--hin::marker { color: var(--blaustift); }
.uf-protokoll__fahrt--zurueck::marker { color: var(--rotstift); }
.uf-stempel { position: absolute; top: .4rem; right: .6rem; z-index: 1; pointer-events: none; }

/* --- Lösung --------------------------------------------------------------- */
.uf-loesung { margin: var(--abstand-1) 0 0; padding-left: 1.6em; }
.uf-loesung--hin::marker { color: var(--blaustift); font-weight: 800; }
.uf-loesung--zurueck::marker { color: var(--rotstift); font-weight: 800; }

/* --- Druck ---------------------------------------------------------------- */
.uf-tabelle { display: none; }
@media print {
  .uf-blatt { display: grid; grid-template-columns: 58mm 1fr; gap: 5mm; align-items: start; margin-top: 2mm; break-inside: avoid; }
  .ueberfahrt { max-width: none; margin: 0; break-inside: avoid; }
  .ueberfahrt--aktiv .uf-druck { display: block; }
  .uf-spiel, .uf-ohne-js { display: none !important; }
  .uf-druck { width: 100%; max-width: 100%; height: auto; }
  .ueberfahrt, .uf-szene { --uf-ufer: #eee; --uf-wasser: #fff; --uf-holz: #fff; --motiv-grund: #fff; }
  .uf-wasser { stroke: #000; stroke-width: 1; }
  .uf-welle { stroke: #000; stroke-opacity: .5; }
  .uf-zettel-html { box-shadow: none; border: 1pt solid #000; background: #fff; padding: 2mm 3mm; margin: 2mm 0; }
  .uf-tabelle { display: table; width: 100%; border-collapse: collapse; margin: 0; font-size: 10.5pt; break-inside: avoid; }
  .uf-tabelle caption { text-align: left; font-weight: 700; margin-bottom: 1mm; }
  .uf-tabelle__zahl { display: block; font-weight: 400; }
  .uf-tabelle th, .uf-tabelle td { border: .8pt solid #000; padding: 0 2mm; height: 6mm; text-align: left; }
  .uf-tabelle td:first-child { width: 12mm; text-align: center; }
  .uf-tabelle td:nth-child(2) { width: 24mm; }
  .uf-loesung { columns: 2; font-size: 10pt; }
}