/* Kleiderschrank und Gestaltung in Läden (web/js/kleiderschrank.js, agent/aussehen) – Bausteine und Farben aus style.css (docs/STIL.md B):
   Messingfelder wie die Leiste, Pixelbilder ganzzahlig (Echti 2- und 4-fach, Farbkleckse 3-fach), Schrift 20 px, Tippflächen ≥ 44 px. */
body.fullfarm .info-panel.schrank-panel { max-height: 82vh; }
.schrank-kopf { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.schrank-kopf > div { flex: 1 1 200px; min-width: 0; }
canvas.schrank-vorschau { box-sizing: content-box; width: 128px; height: 160px; flex: none; background: var(--paper);
  border: 8px solid; border-image: url("/img/ui/field.png") 4 stretch; }
canvas.px { image-rendering: pixelated; }
.schrank-status { min-height: 30px; margin: 4px 0 0; }
.schrank-neu, .schrank-fest { margin: 6px 0; font-weight: 700; }
.schrank-reiter { margin: 10px 0 6px; flex-wrap: wrap; gap: 4px; }
.schrank-feld h3 { margin: 10px 0 4px; }
.schrank-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.schrank-raster.farben { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.schrank-teil, .schrank-farbe { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px;
  min-width: 56px; min-height: 56px; background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  border-style: solid; border-width: 10px; border-image: url("/img/ui/slot.png") 5 fill / 10px stretch; }
.schrank-teil[aria-pressed="true"], .schrank-farbe[aria-pressed="true"] { border-image-source: url("/img/ui/slot-on.png"); }
.schrank-teil canvas.schrank-bild { width: 64px; height: 80px; }
.schrank-farbe canvas.schrank-klecks { width: 36px; height: 36px; }
.schrank-teil.fehlt canvas, .schrank-farbe.fehlt canvas { opacity: .45; filter: grayscale(1); }
.schrank-fehlt { position: absolute; right: 0; bottom: -4px; font-weight: 700; color: var(--wine); text-shadow: 2px 2px 0 var(--paper); }
.schrank-teil:focus-visible, .schrank-farbe:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.schrank-farben { margin: 4px 0 8px; }
.schrank-farben > .note { display: block; }
.schrank-info { margin-top: 10px; min-height: 30px; }
.schrank-info h3 { margin: 6px 0 2px; }
.schrank-wege { margin: 4px 0; padding-left: 22px; }
.schrank-wege li { margin: 2px 0; }
.schrank-laden .schrank-ware li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.schrank-laden canvas.schrank-bild.klein { width: 64px; height: 80px; flex: none; }
@media (prefers-contrast: more) { .schrank-teil.fehlt canvas, .schrank-farbe.fehlt canvas { opacity: .7; } .schrank-fehlt { color: var(--ink); } }
@media (forced-colors: active) { .schrank-teil, .schrank-farbe { border: 2px solid ButtonText; } .schrank-teil[aria-pressed="true"], .schrank-farbe[aria-pressed="true"] { outline: 3px solid Highlight; } }