/* =====================================================================
 * EINSATZPLÄTZE + AUSRÜSTUNGSKAMMER (Auftrag 038)
 *
 * ⚠️ WARUM DIESE DATEI ÜBERHAUPT ENTSTAND.
 * Die alte Einsatzgruppen-Liste hatte keine eigene Grundfläche: jede Zeile war ein Knopf,
 * in den nacheinander Kopf, Ausrüstungstext und Statusmarke geschoben wurden. Auf dem
 * echten Bildschirm lag das übereinander. Deshalb hier ausschliesslich RASTER mit festen
 * Zeilen und Spalten — kein Element bekommt seine Position aus dem Zufall des Textflusses.
 * ===================================================================== */

/* ------------------------------------------------------ Einsatzplätze (Briefing) */

.squad-zahl {
  font-size: .8em; color: #6f97a8; letter-spacing: .06em;
}
.squad-zahl.voll { color: #5fb3c9; }

/* ⚠️ SPALTENZAHL AUS DER CONTAINERBREITE, NICHT AUS DER FENSTERBREITE.
 * Erste Fassung: feste zwei Spalten, umgeschaltet per `@media (max-width: 1100px)`. Auf
 * einem 1600er Fenster blieben es damit zwei Spalten — in einer rund 300 px schmalen
 * Seitenleiste. Gemessen war die Textspalte danach 4 px breit. Eine Medienabfrage misst das
 * FENSTER; hier zaehlt aber, wie breit die Leiste ist. `auto-fit` mit einer Mindestbreite
 * fragt genau das ab und nimmt eine Spalte, wenn zwei nicht passen. */
.squad-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.sq-slot {
  position: relative;
  display: grid;
  grid-template-columns: auto 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 84px;
  padding: 8px 46px 8px 8px;      /* rechts Platz für das ✕ (44 px + Rand) */
  border: 1px solid #1d3947;
  background: rgba(9, 19, 26, .72);
}
.sq-slot--frei,
.sq-slot--gesperrt {
  grid-template-columns: auto minmax(0, 1fr);
  border-style: dashed;
  color: #5c7d8c;
}
.sq-slot--gesperrt { opacity: .55; }
.sq-slot--belegt { border-color: #2f6a80; }

.sq-nr {
  align-self: start;
  font-size: 11px; color: #4d6e7d; letter-spacing: .1em;
  min-width: 14px;
}
.sq-bild {
  width: 52px; height: 68px; object-fit: cover;
  border: 1px solid #24414f; background: #0a141b;
}
/* ⚠️ `min-width: 0` ist hier PFLICHT, nicht Kosmetik: ohne das weigert sich die Textspalte,
   unter ihre Inhaltsbreite zu schrumpfen, und schiebt Bild und ✕ aus der Kachel. */
.sq-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* ⚠️ DER NAME WIRD NICHT ABGESCHNITTEN.
 * Erste Fassung: `white-space: nowrap` + Ellipse. Gemessen kam dabei „Jonas „Habicht" Bran…"
 * heraus — bei einem Spiel, in dem die Leute Rufnamen tragen und man sie wiedererkennen soll,
 * ist das der falsche Kompromiss. Der Name darf umbrechen; abgeschnitten wird nur die
 * Ausruestungszeile, und die traegt ihren vollen Text im Tooltip. */
.sq-name {
  font-size: 12.5px; color: #dceaf2; font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.sq-rolle, .sq-hp, .sq-gear {
  font-size: 10.5px; color: #7f9dac;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-gear { color: #5f8496; }
.sq-frei-text { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sq-grund { font-size: 10px; color: #4d6e7d; }

/* ⚠️ 44×44, nicht 26×26. Gemessen mit echtem Touch: das Kreuz war die kleinste Fläche des
   ganzen Bildschirms — und die einzige, mit der man einen Soldaten wieder herausnimmt. */
.sq-raus {
  position: absolute; top: 3px; right: 3px;
  width: 44px; height: 44px;
  touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid #2c4250; border-radius: 2px;
  color: #86a3b1; font-size: 13px; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .sq-raus:hover { border-color: #b4553f; color: #e8b9ad; } }

/* Ersatzbank: ein Tipp reicht, der Platz ergibt sich von selbst. */
.sq-bank {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 6px 8px;
  margin-bottom: 5px;
  text-align: left;
  background: rgba(12, 24, 32, .6);
  border: 1px solid #1d3947;
  color: #a9c6d4;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.sq-bank.gesperrt { opacity: .5; cursor: not-allowed; }
@media (hover: hover) { .sq-bank:not(.gesperrt):hover { border-color: #5fb3c9; } }
.sq-bank-bild { width: 40px; height: 40px; object-fit: cover; object-position: top center;
  border: 1px solid #24414f; background: #0a141b; }
.sq-bank-text { display: flex; flex-direction: column; min-width: 0; }
.sq-bank-name { font-size: 12.5px; color: #dceaf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-bank-rolle { font-size: 10.5px; color: #7f9dac;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-bank-plus { font-size: 15px; color: #5fb3c9; padding: 0 6px; }

.sq-ausfall-kopf {
  margin: 12px 0 4px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #6f97a8;
}
.sq-ausfall { margin: 0 0 2px; font-size: 11px; color: #7a6b64; }

/* ======================================================================
 * AUSRÜSTUNGSKAMMER — PAPERDOLL (Auftrag 038b)
 *
 * ⚠️ WARUM DIESER UMBAU.
 * Erste Fassung war eine Spaltenliste mit Textkästen. Charly: „schaut nur nach einer billigen
 * Website aus als nach einem schönem Spiel". Der Unterschied liegt nicht an Farben, sondern
 * an drei Dingen: die Plätze sitzen ANATOMISCH um eine Figur statt untereinander, jeder Platz
 * ist ein gerahmter Hardpoint mit Sinnbild statt einer Textzeile, und der Rahmen hat Ecken
 * und Leitlinien, die ihn als Gerät lesbar machen statt als Formular.
 * ====================================================================== */

#scene-equip { display: none; }
/* ⚠️ Die Szenenschaltung liegt bei `.scene`/`.scene.active`. Ein ID-Selektor ohne `.active`
   wäre stärker als die Klasse und liesse die Szene IMMER stehen — genau dieser Fehler hat
   am 13.08. die Nachbesprechung über den ganzen Einsatz gelegt. */
#scene-equip.active { display: flex; flex-direction: column; }

.eq-wrap {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(30, 84, 104, .18), transparent 60%),
    linear-gradient(180deg, #050b11, #08131a);
}

/* ---------------------------------------------------------------- Kopfzeile */
.eq-head {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #1d3947;
  background: linear-gradient(180deg, rgba(12, 28, 38, .9), rgba(8, 18, 26, .5));
}
.eq-title { min-width: 0; text-align: center; }
.eq-sub { margin: 2px 0 0; font-size: 11.5px; color: #7f9dac; letter-spacing: .04em; }
.eq-nav {
  width: 56px; min-height: 44px;
  background: rgba(12, 24, 32, .8); border: 1px solid #2f6a80;
  color: #a9c6d4; font-size: 16px; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.eq-nav:disabled { opacity: .3; cursor: default; border-color: #24414f; }
@media (hover: hover) { .eq-nav:not(:disabled):hover { border-color: #5fb3c9; color: #eaf9ff; } }

.eq-body {
  flex: 1 1 0; min-height: 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 320px;
  gap: 12px;
  padding: 12px 14px;
  overflow: hidden;
}
@media (max-width: 1180px) { .eq-body { grid-template-columns: 168px minmax(0, 1fr) 264px; gap: 8px; } }
@media (max-width: 900px)  { .eq-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } }

/* ---------------------------------------------------------------- Mannschaft */
.eq-crewlist { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.eq-crew {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center; gap: 7px;
  min-height: 48px; padding: 4px 6px;
  background: rgba(12, 24, 32, .6); border: 1px solid #1a3341;
  border-left: 3px solid #1a3341;
  color: #a9c6d4; text-align: left; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
}
.eq-crew.aktiv { border-color: #5fb3c9; border-left-color: #5fb3c9; background: rgba(30, 84, 104, .35); }
@media (hover: hover) { .eq-crew:not(.aktiv):hover { border-left-color: #2f6a80; } }
.eq-crew-bild { width: 38px; height: 38px; object-fit: cover; object-position: top center;
  border: 1px solid #24414f; background: #0a141b; }
.eq-crew-text { display: flex; flex-direction: column; min-width: 0; }
.eq-crew-name { font-size: 12px; color: #dceaf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-crew-rolle { font-size: 10px; color: #7f9dac; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-crew-marke { font-size: 9px; letter-spacing: .08em; color: #5fb3c9; }

/* ---------------------------------------------------------------- Paperdoll */
.eq-doll { min-height: 0; overflow-y: auto; display: flex; }
/* ⚠️ Der Rahmen fuellt die Hoehe. Erste Fassung liess unter dem Traggurt ein Drittel des
   Bildschirms leer — ein Geraet, das nur oben benutzt wird, sieht aus wie ein abgebrochenes
   Formular. Der Inhalt verteilt sich jetzt ueber die volle Flaeche. */
.eq-doll-rahmen {
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: space-evenly;
  padding: 18px 20px 16px;
  border: 1px solid #24414f;
  background:
    linear-gradient(180deg, rgba(10, 22, 30, .82), rgba(7, 15, 22, .92)),
    repeating-linear-gradient(0deg, rgba(95, 179, 201, .045) 0 1px, transparent 1px 4px);
}
/* Ecken statt Rundungen — das unterscheidet ein Gerät von einem Web-Panel. */
.eq-ecke { position: absolute; width: 14px; height: 14px; border: 2px solid #5fb3c9; opacity: .7; }
.eq-ecke--lo { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.eq-ecke--ro { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.eq-ecke--lu { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.eq-ecke--ru { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

  .eq-raster-platzhalter{}
.eq-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px 14px;
  align-items: center;
}
.eq-hp--kopf     { grid-column: 1; grid-row: 1; }
.eq-hp--waffe    { grid-column: 1; grid-row: 2; }
.eq-hp--ruestung { grid-column: 3; grid-row: 1; }
.eq-hp--neben    { grid-column: 3; grid-row: 2; }
.eq-figur        { grid-column: 2; grid-row: 1 / span 2; }

/* Leitlinie vom Hardpoint zur Figur — sie macht aus vier Kästen ein Schema. */
.eq-hardpoint { position: relative; }
.eq-hardpoint::after {
  content: ''; position: absolute; top: 50%; width: 14px; height: 1px;
  background: linear-gradient(90deg, #2f6a80, transparent);
}
.eq-hp--kopf::after, .eq-hp--waffe::after { right: -14px; }
.eq-hp--ruestung::after, .eq-hp--neben::after {
  left: -14px; background: linear-gradient(270deg, #2f6a80, transparent);
}
@media (max-width: 780px) { .eq-hardpoint::after { display: none; } }

.eq-figur { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eq-figur-plinthe {
  position: relative;
  width: 230px; max-width: 30vw;
  border: 1px solid #2f6a80;
  background: #060e14;
  box-shadow: inset 0 -40px 60px -30px rgba(95, 179, 201, .25);
  overflow: hidden;
}
.eq-figur-plinthe img { display: block; width: 100%; height: auto; }
/* Feine Abtastlinien — Bunkermonitor statt Fotogalerie. */
.eq-scanline {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
.eq-figur figcaption { font-size: 10.5px; color: #6f97a8; text-align: center; }

/* ---- ein Hardpoint */
.eq-hp {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 74px 7px 9px;      /* rechts Platz für „ablegen" */
  border: 1px solid #24414f;
  border-left: 3px solid #2f6a80;
  background: rgba(12, 24, 32, .7);
  min-height: 62px;
}
.eq-hp--leer { border-style: dashed; border-left-color: #24414f; }
/* Gesperrt: schraffiert. Man sieht sofort, dass da nichts hinkommt — ohne Text lesen zu müssen. */
.eq-hp--gesperrt {
  border-style: dashed; border-left-color: #24414f; opacity: .6;
  background:
    repeating-linear-gradient(45deg, rgba(95, 179, 201, .05) 0 6px, transparent 6px 12px),
    rgba(12, 24, 32, .5);
}
.eq-hp-titel { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #6f97a8; }
.eq-hp-koerper { display: flex; align-items: center; gap: 9px; min-width: 0; }
.eq-hp-text { display: flex; flex-direction: column; min-width: 0; }
.eq-hp-name { font-size: 12.5px; color: #dceaf2; overflow-wrap: anywhere; }
.eq-hp--leer .eq-hp-name, .eq-hp--gesperrt .eq-hp-name { color: #4d6e7d; font-style: italic; }
.eq-hp-werte { font-size: 10px; color: #7f9dac; }
.eq-hp-grund { font-size: 10px; color: #5a7382; font-style: italic; }
.eq-hp-ab {
  position: absolute; top: 3px; right: 3px;
  min-height: 44px; min-width: 60px; padding: 0 9px;
  background: transparent; border: 1px solid #2c4250;
  color: #86a3b1; font-size: 9.5px; letter-spacing: .06em; cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) { .eq-hp-ab:hover { border-color: #b4553f; color: #e8b9ad; } }

/* ---- Gürtel und Rucksack */
.eq-traggurt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #1d3947;
}
@media (max-width: 780px) { .eq-traggurt { grid-template-columns: minmax(0, 1fr); } }
.eq-gurt-block { min-width: 0; }
.eq-gurt-titel {
  margin: 0 0 5px; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #6f97a8;
}
.eq-gurt-reihe { display: flex; flex-wrap: wrap; gap: 6px; }

.eq-zelle {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  min-width: 132px; min-height: 46px;
  padding: 5px 30px 5px 7px;
  border: 1px solid #24414f;
  background: rgba(9, 19, 26, .8);
}
.eq-zelle--frei { border-style: dashed; opacity: .75; padding-right: 7px; }
.eq-zelle--gesperrt {
  border-style: dashed; opacity: .45; padding-right: 7px;
  background: repeating-linear-gradient(45deg, rgba(95, 179, 201, .05) 0 6px, transparent 6px 12px);
}
/* Das Spezialgerät der Klasse bekommt eine eigene Kante — daran wächst der Rang. */
.eq-zelle--spezial { border-left: 3px solid #c9a35f; }
.eq-zelle-text {
  font-size: 11px; color: #cfe0e6; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-zelle--frei .eq-zelle-text, .eq-zelle--gesperrt .eq-zelle-text {
  color: #4d6e7d; font-style: italic;
}
.eq-zelle-menge { font-size: 10px; color: #6f97a8; white-space: nowrap; margin-left: auto; }
.eq-zelle--spezial .eq-zelle-menge { color: #c9a35f; }
.eq-zelle-ab {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 26px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-left: 1px solid #1d3947;
  color: #7f9dac; font-size: 11px; cursor: pointer; touch-action: manipulation;
}
@media (hover: hover) { .eq-zelle-ab:hover { color: #e8b9ad; background: rgba(180, 85, 63, .15); } }

.eq-zuwachs {
  margin: 10px 0 0; font-size: 10.5px; color: #c9a35f; letter-spacing: .03em;
}

/* ---------------------------------------------------------------- rechte Spalte */
.eq-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.eq-block { display: flex; flex-direction: column; min-height: 0; }
.eq-block--wachsend { flex: 1 1 0; }
.eq-block > h2 {
  margin: 0 0 5px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #6f97a8;
  border-bottom: 1px solid #1d3947; padding-bottom: 3px;
}
.eq-werte { display: flex; flex-direction: column; gap: 1px; }
.eq-wertzeile { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.eq-wert-k { color: #7f9dac; }
.eq-wert-v { color: #dceaf2; }
.eq-wertzeile--spezial .eq-wert-k, .eq-wertzeile--spezial .eq-wert-v { color: #c9a35f; }

.eq-lager { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.eq-lager-gruppe {
  margin: 8px 0 3px; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #4d6e7d;
}
.eq-lagerkachel {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 5px 8px;
  background: rgba(12, 24, 32, .7); border: 1px solid #24414f;
  color: #a9c6d4; font-family: inherit; font-size: 11.5px; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.eq-lagerkachel:disabled { cursor: default; opacity: .6; }
.eq-lagerkachel.angelegt { border-color: #5fb3c9; background: rgba(30, 84, 104, .3); opacity: 1; }
@media (hover: hover) { .eq-lagerkachel:not(:disabled):hover { border-color: #5fb3c9; } }
.eq-lk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-lk-n { font-size: 10.5px; color: #6f97a8; white-space: nowrap; }
.eq-leer { margin: 2px 0; font-size: 10.5px; color: #4d6e7d; }

.eq-sofort { display: flex; flex-direction: column; gap: 3px; }
.eq-sofort-knopf {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 5px 8px;
  background: rgba(20, 44, 40, .55); border: 1px solid #2c5a4c;
  color: #b9d8cc; font-family: inherit; font-size: 11.5px; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.eq-sofort-knopf:disabled {
  opacity: .5; cursor: default;
  background: rgba(12, 24, 32, .6); border-color: #24414f; color: #6f97a8;
}
@media (hover: hover) { .eq-sofort-knopf:not(:disabled):hover { border-color: #6fc9a8; } }
.eq-sofort-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-sofort-preis { font-size: 10.5px; white-space: nowrap; }
.eq-sofort-lager { font-size: 10px; color: #6f97a8; white-space: nowrap; }

.eq-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px calc(10px + var(--safe-b));
  border-top: 1px solid #1d3947;
}
.eq-meldung { margin: 0; font-size: 11.5px; color: #7f9dac; }
.eq-meldung.good { color: #6fc9a8; }
.eq-meldung.bad { color: #e8a08d; }

/* ---------------------------------------------------------------- Sinnbilder */
.ico-huelle { display: inline-flex; align-items: center; justify-content: center; color: #8fbccb; }
.ico-huelle.ico-leer { color: #33566a; }
.eq-lagerkachel.angelegt .ico-huelle { color: #5fb3c9; }
.eq-sofort-knopf .ico-huelle { color: #79c6ab; }
.eq-sofort-knopf:disabled .ico-huelle { color: #4d6e7d; }
.eq-zelle--spezial .ico-huelle { color: #c9a35f; }
.ico { display: block; }

/* ⚠️ EINSPALTIG DARF NICHTS MEHR „DEN REST" NEHMEN.
 * `.eq-block--wachsend` (das Lager) hat `flex: 1 1 0` — richtig, solange die Seitenspalte eine
 * eigene Höhe hat. Im einspaltigen Hochformat scrollt die ganze Seite, und aus „nimm den Rest"
 * wurde „nimm fast nichts": die Lagerliste war ein Streifen von zwei Zeilen. */
@media (max-width: 900px) {
  .eq-side { min-height: auto; }
  .eq-block--wachsend { flex: 0 0 auto; }
  .eq-lager { overflow-y: visible; max-height: none; }
  .eq-doll { overflow-y: visible; }
}

/* Der dritte Knopf in der Einsatzvorbereitung braucht Platz — drei gleich breite Flächen. */
.briefing-foot { display: flex; gap: 10px; }
.briefing-foot > .btn { flex: 1 1 0; }

/* ---------------------------------------------------------------- Werkstattliste */
/* Sinnbilder auch dort, wo bestellt wird — dieselbe Zeichenfamilie wie in der Kammer. */
#manufacture-list .mf-ico { display: inline-flex; margin-right: 8px; color: #8fbccb; vertical-align: middle; }
#manufacture-list .mf-ico .ico { display: block; }

/* ======================================================================
 * ZIEHEN UND ABLEGEN + GROSSE GEGENSTANDSBILDER (Auftrag 038c)
 * ====================================================================== */

/* ⚠️ `touch-action: none` IST PFLICHT, KEINE KOSMETIK.
 * Ohne das scrollt der Browser bei der ersten Fingerbewegung die Seite und liefert gar keine
 * `pointermove`-Ereignisse mehr — das Ziehen wäre auf dem Tablet tot. */
.dd-quelle { touch-action: none; cursor: grab; }
.dd-quelle:active { cursor: grabbing; }
.dd-zieht { opacity: .35; }
body.dd-laeuft { cursor: grabbing; user-select: none; }

/* Das Schwebebild am Finger. `pointer-events: none`, sonst findet
   `elementFromPoint` immer nur den Klon und nie das Ziel darunter. */
.dd-klon {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px; border: 1px solid #5fb3c9;
  background: rgba(10, 24, 32, .92);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .6);
}
.dd-klon img { width: 56px; height: 56px; object-fit: contain; display: block; }
.dd-klon span { font-size: 10.5px; color: #dceaf2; white-space: nowrap; }

/* Ziele färben sich, sobald etwas in der Luft ist — man sieht, wohin es darf. */
.dd-ziel { outline: 1px dashed #5fb3c9; outline-offset: 1px; }
.dd-ziel-nein { opacity: .45; }
.dd-ziel-an {
  outline: 2px solid #6fc9a8; outline-offset: 1px;
  background: rgba(40, 96, 84, .35) !important;
}

/* Grosse Gegenstandsbilder */
.ico-huelle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ico-bild { object-fit: contain; display: block; }
.ico-gross { width: 56px; height: 56px; }
.ico-mittel { flex: 0 0 auto; }
/* ⚠️ SEIT DEM FREISTELLEN KEIN KASTEN MEHR UM DIE BILDER.
 * Anfangs standen die Icons auf schwarzem Grund und brauchten einen Rahmen, damit sie nicht
 * wie ein Loch aussahen. `tools/art/freistellen.py` hat den Grund entfernt — die Gegenstaende
 * liegen jetzt frei im Fach, wie im Vorbild. Ein Rahmen wuerde sie wieder einsperren. */
.eq-hp .ico-bild, .eq-zelle .ico-bild, .eq-lagerkachel .ico-bild, .eq-sofort-knopf .ico-bild {
  border: 0; background: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75));
}
.dd-klon img { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .8)); }

/* Fachgroessen an die grösseren Bilder angepasst */
.eq-hp { min-height: 76px; }
.eq-zelle { min-height: 54px; min-width: 150px; }
.eq-lagerkachel { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 52px; }
.eq-sofort-knopf { grid-template-columns: 34px minmax(0, 1fr) auto auto; min-height: 46px; }

/* Hinweiszeile über den Fächern */
.eq-ziehhinweis {
  margin: 0 0 8px; font-size: 10.5px; color: #6f97a8; letter-spacing: .03em;
}

/* ⚠️ Der native Bild-Zug des Browsers wuerde das eigene Ziehen abwuergen — siehe drag-drop.js. */
.dd-quelle img, .ico-bild { -webkit-user-drag: none; user-drag: none; }

/* ======================================================================
 * CHARME DES VORBILDS (Auftrag 038c)
 *
 * Charly: „gestalte es so das es den Charme vom Original Bild widerspiegelt".
 * Das Vorbild ist der Ausrüstungsschirm aus X-COM Apocalypse. Sein Charakter kommt aus
 * vier Dingen, nicht aus Farbe allein:
 *   1. ABGEKANTETES BLECH statt Haarlinien — jedes Feld hat Licht oben und Schatten unten.
 *   2. SCHREIBMASCHINENSCHRIFT in Grün für Zahlen, Türkis für Beschriftungen.
 *   3. QUADRATISCHE ZELLEN, in denen der Gegenstand selbst liegt — nicht Textzeilen mit Bild.
 *   4. WENIG WORTE. Beschriftung knapp, Werte rechtsbündig, Zahl vor Erklärung.
 * ====================================================================== */

:root {
  --eq-gruen: #7ee08a;      /* Zahlen, wie die Werte im Vorbild */
  --eq-tuerkis: #57c8c0;    /* Beschriftungen */
  --eq-bernstein: #e0a94a;  /* Titel und Spezialgerät */
  --eq-blech: #12232e;
  --eq-kante-hell: #2d5f74;
  --eq-kante-dunkel: #050d13;
}

/* --- Abgekantetes Blech: Licht oben links, Schatten unten rechts. */
.eq-hp, .eq-zelle, .eq-lagerkachel, .eq-sofort-knopf, .eq-nav, .eq-crew {
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 var(--eq-kante-hell),
    inset -1px -1px 0 var(--eq-kante-dunkel);
}
.eq-doll-rahmen {
  box-shadow:
    inset 2px 2px 0 rgba(45, 95, 116, .55),
    inset -2px -2px 0 rgba(5, 13, 19, .9);
}

/* --- Schreibmaschinenschrift für alles Technische. */
.eq-hp-titel, .eq-gurt-titel, .eq-lager-gruppe, .eq-block > h2,
.eq-wert-k, .eq-wert-v, .eq-zelle-menge, .eq-lk-n, .eq-sofort-preis, .eq-sofort-lager {
  font-family: "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
}
.eq-hp-titel, .eq-gurt-titel, .eq-lager-gruppe, .eq-block > h2 {
  color: var(--eq-tuerkis); letter-spacing: .16em;
}
.eq-wert-k { color: var(--eq-tuerkis); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.eq-wert-v { color: var(--eq-gruen); font-size: 12.5px; font-weight: 700; }
.eq-wertzeile { align-items: baseline; padding: 1px 0; border-bottom: 1px dotted rgba(87, 200, 192, .14); }
.eq-wertzeile--spezial .eq-wert-k { color: var(--eq-bernstein); }
.eq-wertzeile--spezial .eq-wert-v { color: var(--eq-bernstein); }
.eq-zelle-menge, .eq-lk-n { color: var(--eq-gruen); }
.eq-zuwachs { color: var(--eq-bernstein); font-family: "Consolas", monospace; }

/* --- Titelzeile mit Emblem, wie der Wappenkasten links im Vorbild. */
#eq-name { color: var(--eq-bernstein); letter-spacing: .1em; }
.eq-head { position: relative; padding-left: 62px; }
.eq-head::before {
  content: '◈';
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #3a2c12, #14212b);
  border: 1px solid var(--eq-bernstein);
  color: var(--eq-bernstein); font-size: 16px;
  box-shadow: inset 1px 1px 0 rgba(224, 169, 74, .45), inset -1px -1px 0 #050d13;
}

/* --- Gepäck als QUADRATISCHE Zellen: der Gegenstand liegt drin, Text darunter. */
.eq-gurt-reihe { gap: 8px; }
.eq-zelle {
  flex-direction: column; justify-content: flex-start;
  width: 88px; min-width: 88px; height: 104px; min-height: 104px;
  padding: 6px 4px 4px;
  gap: 3px;
  background: linear-gradient(180deg, #0d1c25, #071118);
}
.eq-zelle .ico-huelle { width: 48px !important; height: 48px !important; }
.eq-zelle .ico-bild { width: 48px; height: 48px; border: 0; background: transparent; }
.eq-zelle-text {
  font-size: 9.5px; line-height: 1.15; text-align: center;
  white-space: normal; overflow: hidden; max-height: 2.4em;
  font-family: "Consolas", monospace; letter-spacing: .02em;
}
.eq-zelle-menge { margin-left: 0; font-size: 10.5px; }
.eq-zelle-ab {
  top: 2px; right: 2px; bottom: auto; width: 20px; height: 20px;
  border: 1px solid #2c4250; border-left: 1px solid #2c4250;
  background: rgba(6, 14, 20, .8);
}
.eq-zelle--frei, .eq-zelle--gesperrt { justify-content: center; }
.eq-zelle--spezial { border-left: 1px solid #24414f; box-shadow:
  inset 1px 1px 0 rgba(224, 169, 74, .5), inset -1px -1px 0 var(--eq-kante-dunkel); }

/* --- Lager als Kachelraster mit grossem Bild, nicht als Zeilenliste. */
.eq-lager { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.eq-lager-gruppe { grid-column: 1 / -1; margin: 8px 0 2px; }
.eq-leer { grid-column: 1 / -1; }
.eq-lagerkachel {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; min-height: 104px; padding: 6px 4px 4px;
  background: linear-gradient(180deg, #0d1c25, #071118);
}
.eq-lagerkachel .ico-huelle { width: 48px !important; height: 48px !important; }
.eq-lagerkachel .ico-bild { width: 48px; height: 48px; border: 0; background: transparent; }
.eq-lk-name {
  font-size: 9.5px; line-height: 1.15; text-align: center; white-space: normal;
  max-height: 2.4em; overflow: hidden;
  font-family: "Consolas", monospace;
}
.eq-lk-n { font-size: 10.5px; }
.eq-lagerkachel.angelegt { box-shadow: inset 1px 1px 0 #5fb3c9, inset -1px -1px 0 var(--eq-kante-dunkel); }

/* --- Hardpoints: Beschriftung oben, Bild links, Werte in Grün. */
.eq-hp { background: linear-gradient(180deg, var(--eq-blech), #08141c); }
.eq-hp-name { font-family: "Consolas", monospace; font-size: 12px; letter-spacing: .03em; }
.eq-hp-werte { font-family: "Consolas", monospace; color: var(--eq-gruen); font-size: 9.5px; }
.eq-hp-grund { font-family: "Consolas", monospace; }
.eq-hp .ico-bild { border: 0; background: transparent; }

/* --- Knöpfe: klobig, nicht filigran. */
.eq-nav { background: linear-gradient(180deg, #16303d, #0a1720); font-size: 18px; }
.eq-sofort-knopf { background: linear-gradient(180deg, #16342c, #0a1a16); }

/* --- Figur: kein Rundum-Rahmen, sondern eine Nische im Blech. */
.eq-figur-plinthe {
  border: 0;
  box-shadow: inset 2px 2px 0 var(--eq-kante-dunkel), inset -2px -2px 0 rgba(45, 95, 116, .4);
}

.eq-ziehhinweis { font-family: "Consolas", monospace; color: var(--eq-tuerkis); opacity: .8; }

/* ⚠️ NACHBESSERUNG: das ✕ war nach dem Stilumbau 20×20 px — unter der gemessenen
 * Touch-Untergrenze von 44. In der Vorlage nimmt man Sachen durch ZIEHEN heraus; das geht
 * hier auch. Der Knopf bleibt trotzdem, weil man nicht ziehen MUSS — aber als Fussleiste
 * über die volle Zellenbreite, nicht als Fliegenschiss in der Ecke. */
.eq-zelle { width: 96px; min-width: 96px; height: 152px; min-height: 152px; padding: 6px 4px 0; }
.eq-zelle--belegt { padding-bottom: 0; }
.eq-zelle-ab {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-top: 1px solid #24414f;
  background: rgba(6, 14, 20, .85);
  font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .1em;
}
.eq-lagerkachel { min-height: 116px; }

/* ======================================================================
 * GITTER-INVENTAR + ANBAUPLAETZE (Auftrag 039)
 * ====================================================================== */
/* ⚠️ Breite UND Hoehe getrennt: der ABLEGEN-Streifen braucht 44 px Fingerhoehe, und die
   wuerde in einem Quadrat von 76 px den Gegenstand erdruecken. */
:root { --eq-zelle: 76px; --eq-zelle-h: 104px; }

/* Sieben Plaetze rund um die Figur. Linke Spalte = rechte Koerperseite des Soldaten. */
.eq-raster { grid-template-rows: auto auto auto; }
.eq-hp--schulterL { grid-column: 1; grid-row: 1; }
.eq-hp--waffe     { grid-column: 1; grid-row: 2; }
.eq-hp--schulterR { grid-column: 3; grid-row: 1; }
.eq-hp--ruestung  { grid-column: 3; grid-row: 2; }
.eq-hp--beinL     { grid-column: 1; grid-row: 3; }
.eq-hp--qd        { grid-column: 2; grid-row: 3; }
.eq-hp--beinR     { grid-column: 3; grid-row: 3; }
.eq-figur         { grid-column: 2; grid-row: 1 / span 2; }
.eq-hp--anbau { min-height: 64px; }
.eq-hp--qd .eq-hp-titel { color: var(--eq-bernstein); }

/* Das Gitter: echte Felder als Untergrund, Gegenstaende darueber ueber ihre Flaeche. */
.eq-gitter { display: grid; gap: 4px; }
.eq-feld {
  border: 1px dashed #24414f;
  background: rgba(6, 14, 20, .55);
  display: flex; align-items: center; justify-content: center;
}
.eq-feld--gesperrt {
  opacity: .45;
  background: repeating-linear-gradient(45deg, rgba(95,179,201,.07) 0 6px, transparent 6px 12px);
}
.eq-feld-schloss { font-size: 15px; color: #33566a; }

.eq-stueck {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 3px 46px;
  border: 1px solid #2f6a80;
  background: linear-gradient(180deg, #0d1c25, #071118);
  box-shadow: inset 1px 1px 0 var(--eq-kante-hell), inset -1px -1px 0 var(--eq-kante-dunkel);
  overflow: hidden;
}
.eq-stueck--spezial { border-color: var(--eq-bernstein); }
.eq-stueck .ico-bild { border: 0; background: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)); }
.eq-stueck-menge { font-family: "Consolas", monospace; font-size: 10.5px; color: var(--eq-gruen); }
.eq-stueck--spezial .eq-stueck-menge { color: var(--eq-bernstein); }
.eq-stueck-ab {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 44px; border: 0; border-top: 1px solid #24414f;
  background: rgba(6, 14, 20, .9);
  color: #86a3b1; font-family: "Consolas", monospace; font-size: 8.5px;
  letter-spacing: .1em; cursor: pointer; touch-action: manipulation;
}
@media (hover: hover) { .eq-stueck-ab:hover { color: #e8b9ad; background: rgba(180,85,63,.25); } }

.eq-heimatlos { margin: 6px 0 0; font-family: "Consolas", monospace;
  font-size: 10px; color: #e8a08d; }

/* Der Traggurt-Bereich traegt jetzt Gitter, keine Kachelreihen mehr. */
.eq-gurt-reihe { display: block; }
.eq-traggurt { grid-template-columns: auto auto; justify-content: start; gap: 10px 26px; }

@media (max-width: 1180px) { :root { --eq-zelle: 66px; --eq-zelle-h: 100px; } }

/* ⚠️ HOCHFORMAT: DER PAPERDOLL WIRD GESTAPELT, NICHT GEQUETSCHT.
 * Das dreispaltige Schema (Platz — Figur — Platz) braucht Breite. Unter 900 px lief es mit
 * `overflow: visible` ueber die Nachbarspalte und legte sich ueber Werte und Lager — auf dem
 * Bild sofort zu sehen, in den Zahlen nur als „verdeckt ← div". Einspaltig gestapelt ist es
 * laenger, aber lesbar. */
@media (max-width: 900px) {
  .eq-raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 8px;
  }
  .eq-raster > * { grid-column: 1 !important; grid-row: auto !important; }
  .eq-figur { order: -1; }
  .eq-hardpoint::after { display: none; }
  .eq-figur-plinthe { width: 200px; max-width: 60vw; }
  .eq-traggurt { grid-template-columns: minmax(0, 1fr); }
}

/* HOCHFORMAT: EINE SPALTE HEISST FLEX, NICHT GITTER.
 *
 * ⚠️ GEMESSEN, NICHT GERATEN — DREI ANLÄUFE HATTEN AM SYMPTOM GEDREHT.
 * `tools/qa/hochformat_diagnose.mjs` zeigte: `.eq-body` blieb auch einspaltig ein Gitter mit
 * fester Höhe. Die drei Abschnitte bekamen Zeilen von 63 px, obwohl ihr Inhalt 240 bzw.
 * 1304 px hoch ist — sie liefen übereinander, statt zu scrollen. Meine früheren Versuche
 * („der Rahmen streckt sich", ein `z-index`, eine Höhenbremse) haben den Fehler jeweils nur
 * verschoben, weil sie an den Kindern zogen statt am Gitter.
 *
 * Untereinander stapeln kann Flexbox ohne Platzierungsregeln. Damit entfällt jede
 * Wechselwirkung mit `grid-row`/`grid-column` auf einen Schlag. */
@media (max-width: 900px) {
  .eq-body {
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto; overflow-x: hidden;
  }
  .eq-body > * { flex: 0 0 auto; }
  /* Die Mannschaftsliste bekommt ein eigenes Fenster, sonst schiebt sie bei zehn Soldaten
     alles Wichtige unter den Bildschirmrand. */
  .eq-crewlist { max-height: 232px; overflow-y: auto; }
  .eq-doll { display: block; min-height: 0; overflow: visible; }
  .eq-doll-rahmen { display: block; }
  .eq-side { min-height: auto; overflow: visible; }
}

/* ================================================== 039: TEXT BEKOMMT SEINE BREITE ZURÜCK
 *
 * ⚠️ GEMESSEN AM LAUFENDEN BILD, NICHT GESCHAETZT.
 * `VR_BREITE=1 node tools/qa/hochformat_diagnose.mjs` ergab bei 1180 px:
 * Kachel 200 px → Koerper 113 px → Textspalte **48 px**. Bei 48 px bricht „Kellerflinte" zu
 * „Keller / flinte" und „Einfache Schutzweste" in vier Stuecke. Genau das, was Charly zu
 * Beginn dieses Auftrags beanstandet hat („die Schrift ist übereinander") — nur an einer
 * anderen Stelle. Keine Messung hat es gemeldet: Tippbarkeit ist nicht Lesbarkeit.
 *
 * Ursache war meine eigene Zeile `padding: 7px 74px 7px 9px` — 74 px am rechten Rand fuer den
 * „ablegen"-Knopf, reserviert AUCH bei leeren Faechern, die gar keinen Knopf haben. Der Knopf
 * wandert jetzt als volle Leiste nach unten, wie schon bei den Gepaeckkacheln. */
.eq-hp { padding: 7px 9px; }
.eq-hp-koerper { width: 100%; }
.eq-hp-text { flex: 1 1 auto; }
/* `anywhere` erlaubt den Bruch MITTEN IM WORT und macht die Mindestbreite der Spalte zu einem
 * einzigen Zeichen. `break-word` bricht nur, wenn ein Wort wirklich nicht auf eine Zeile passt. */
.eq-hp-name { overflow-wrap: break-word; }
.eq-hp-ab {
  position: static; width: 100%; margin-top: 5px;
  min-height: 44px; min-width: 0;
}

/* Werkstattzeile: der Grund steht unter dem Namen, nicht in der Preisspalte. */
.eq-sofort-knopf--gesperrt { grid-template-rows: auto auto; align-items: center; }
.eq-sofort-grund {
  grid-column: 2 / -1;
  font-size: 10px; color: #7f9dac; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ⚠️ UNTEN RECHTS SCHWEBT DAS FUNKPULT.
 * Der runde Radioknopf liegt über der letzten Werkstattzeile — „Lager 3" war dort nicht mehr
 * lesbar. Statt am Knopf zu drehen (den es auf jedem Bildschirm gibt) bekommt die rechte
 * Spalte unten Luft, damit ihre Liste an ihm vorbeiscrollen kann. */
.eq-side { padding-bottom: 96px; }