/* Plattenkamera (web/js/lichtbild.js, docs/LICHTBILD.md) nach docs/STIL.md: das Bedienfeld ist ein Fenster (.card) – zuerst fürs
   Breitbild links, am Taschenapparat hochkant unten –, die Stadt daneben ist der Sucher. Der Rahmen zeigt genau, was aufs Lichtbild kommt: außen ein Schleier
   (harter Rand, keine Weichzeichnung), an den Ecken die Messingecken des Fokus (/img/ui/fokus.png, 2 CSS-Pixel je Bildpixel). Solange sie
   offen ist, ruhen Menüknopf, Leiste und Hinweise auf der Spielfläche (nur die Welt, STIL.md B1). Tippflächen ≥ 44 px, keine Bewegung. */
body.lichtbild :is(.hotbar, .menu-btn, .osm-credit, .ortsschild, .hud-tut, .dev-badge, .dev-anzeige, .mod-leiste) { display: none !important; }
/* Breitbild zuerst (Frederik 02.11.2026, STIL.md B1): Bedienfeld links über die Höhe, der Sucher rechts daneben */
.lichtbild-feld { position: fixed; z-index: 8; margin: 0; left: calc(8px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top));
  width: min(400px, 40vw); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
/* niedrig und quer (Taschenapparat quer): schmaler, bis unten – der Sucher behält die ganze Höhe */
@media (max-height: 519px) { .lichtbild-feld { width: min(340px, 44vw); bottom: calc(8px + env(safe-area-inset-bottom)); } }
/* hochkant und schmal (Taschenapparat, Tafelapparat hochkant): unten als Blatt, höchstens 42 % der Höhe, der Sucher darüber */
@media (orientation: portrait) and (max-width: 899px) {
  .lichtbild-feld { top: auto; right: calc(8px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 42vh; }
}
.lichtbild-feld > h2 .close { margin-left: auto; }
.lichtbild-inhalt { display: grid; gap: 6px; }
.lichtbild-inhalt > p { margin: 0; }
.lichtbild-zeile { display: grid; gap: 2px; margin: 0; }
.lichtbild-zeile > label { font-weight: 700; }
.lichtbild-wahl { display: flex; align-items: center; gap: 6px; }
.lichtbild-wahl select { flex: 1 1 auto; min-width: 0; width: 100%; }
.lichtbild-haken-zeile { justify-content: flex-start; }
.lichtbild-haken { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tipp); cursor: pointer; }
.lichtbild-knoepfe { justify-content: flex-start; margin: 0 0 4px; }
.lichtbild-mass { margin: 0 0 6px; }
.lichtbild-abholen { gap: 8px; }
.lichtbild-feld.eingeklappt .lichtbild-inhalt { display: none; }
.lichtbild-status { margin: 0 0 6px; }
.lichtbild-status:empty { display: none; }
.lichtbild-loch { position: fixed; z-index: 6; pointer-events: none; box-shadow: 0 0 0 200vmax var(--schleier); }
.lichtbild-rahmen { position: fixed; z-index: 7; pointer-events: none; box-sizing: border-box; border: 12px solid transparent;
  border-image: url("/img/ui/fokus.png") 6 / 12px stretch; image-rendering: pixelated; }
/* Gruppen der Wahl (Format, Stimmung, Im Bild, Licht und Effekte, Akte): ruhig untereinander, Überschrift wie die Beschriftungen */
.lichtbild-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.lichtbild-gruppe > legend { font-weight: 700; padding: 0; margin: 0 0 2px; color: var(--soft); }
.lichtbild-fein { justify-content: flex-start; }
.lichtbild-fein .btn, .lichtbild-eigen input { min-width: var(--tipp); min-height: var(--tipp); }
.lichtbild-eigen input { width: 6.5em; }
.lichtbild-mass.fehler { color: var(--wine); font-weight: 700; }
.lichtbild-abbrechen { display: none; }
.lichtbild-feld.arbeitet .lichtbild-abbrechen { display: inline-flex; }
/* Kontrastdesign (erzwungene Farben): der Schleier (box-shadow) fällt dort weg – der Rahmen bleibt als Linie in Systemfarbe */
@media (forced-colors: active) { .lichtbild-loch { outline: 3px solid Highlight; } }
