/*
 * SOLDATENIDENTITÄT (Auftrag 033 Phase C).
 *
 * Gehört zu js/ui/soldier-identity.js. Eigene Datei, damit der abgenommene Bestand
 * (style.css) unangetastet bleibt.
 *
 * Grundton wie im übrigen Spiel: dunkler Stahl, gedämpftes Cyan. Farbige Akzente kommen
 * ausschliesslich aus der Klassenzugehörigkeit, nicht aus der Gestaltung — so bleibt die
 * Farbe eine Information und wird nicht zur Dekoration.
 *
 * Tablet: alles, was man anfassen soll, ist mindestens 44 px hoch. Hover ist eine Zugabe.
 */

/* ---------------------------------------------------------------- Bilder */
.sold-bild {
  display: block;
  flex: 0 0 auto;
  object-fit: cover;
  background: #0b1116;
  border: 1px solid #2c4250;
  border-radius: 2px;
  /* Leicht entsättigt: die Porträts sollen die Oberfläche stützen, nicht überstrahlen. */
  filter: saturate(.88) contrast(1.04);
}

.sold-bild--thumb    { width: 44px;  aspect-ratio: 1 / 1;  object-position: 50% 22%; }
.sold-bild--card     { width: 96px;  aspect-ratio: 3 / 4; }
.sold-bild--portrait { width: clamp(96px, 12vw, 168px); aspect-ratio: 3 / 4; }
.sold-bild--tactical { width: clamp(72px, 9vw, 120px);  aspect-ratio: 1 / 1; object-position: 50% 30%; }
.sold-bild--fullbody { width: 100%; max-width: 260px; aspect-ratio: 2 / 3; object-position: 50% 12%; }

/* Ersatzabzeichen, wenn ein Soldat kein Bild hat (Altstand) oder das Bild fehlt. */
.sold-bild--ersatz {
  display: grid;
  place-items: center;
  gap: 2px;
  background: linear-gradient(160deg, #16222b 0%, #0e161d 100%);
  color: #6d8794;
  filter: none;
}
.sold-ersatz-zeichen   { font-size: 1.35em; line-height: 1; color: #4b8fa3; }
.sold-ersatz-initialen { font-size: .62em; letter-spacing: .1em; }
.sold-bild--thumb.sold-bild--ersatz .sold-ersatz-initialen { display: none; }

/* ---------------------------------------------------------------- Kopfzeile */
.sold-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sold-kopf-text { min-width: 0; }

.sold-name {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 600; color: #e8f1f4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sold-klassenzeichen { color: #6fb6c9; font-size: .95em; flex: 0 0 auto; }
.sold-unterzeile { font-size: .84em; color: #7f98a4; }
.sold-zusatz     { font-size: .8em;  color: #9fb4bd; margin-top: 2px; }

.sold-kopf--verwundet .sold-bild { border-color: #7a5a2c; }
.sold-kopf--gefallen  .sold-bild { filter: grayscale(1) contrast(.9) brightness(.75); }
.sold-kopf--gefallen  .sold-name { color: #8b9aa1; }

/* ---------------------------------------------------------------- Akte */
/*
 * ⚠️ AKTENKOPF ÜBER BEIDEN SPALTEN (Restliste Punkt 8).
 * Die Akte sah aus wie ein Web-Dialog: helles Feld, runder „Schliessen"-Knopf, Fliesstext.
 * Sie ist aber ein Dokument aus einem Bunker. Der Kopf spannt deshalb über die volle Breite
 * und trägt Registriernummer, Einheit und Stempel — die drei Dinge, an denen man ein
 * Personalblatt auf den ersten Blick erkennt.
 */
.sold-akte {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  grid-template-areas: "band band" "bild text";
  gap: clamp(14px, 2.2vw, 28px);
  align-items: start;
}
.sold-akte-bild { grid-area: bild; }
.sold-akte-text { grid-area: text; }

.sold-akte-band {
  grid-area: band;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  flex-wrap: wrap;
  /* rechts Platz fuer den Schliessen-Knopf, der absolut darueber liegt */
  padding: 9px clamp(120px, 12vw, 160px) 9px 12px;
  min-height: 44px;
  background: rgba(95,179,201,.05);
  border: 1px solid #22333f;
  border-left: 3px solid #d9a441;
  border-radius: 1px;
}
.sold-akte-band-marke {
  font-size: .68em; letter-spacing: .26em; text-transform: uppercase; color: #d9a441;
}
.sold-akte-band-nr {
  font-size: .78em; letter-spacing: .14em; color: #b3c6ce;
  font-variant-numeric: tabular-nums;
}
.sold-akte-band-einheit { font-size: .72em; color: #5f7885; }

/* Der Stempel steht rechts und ist das Einzige, was Farbe trägt. */
.sold-akte-stempel {
  margin-left: auto;
  padding: 3px 10px;
  font-size: .66em; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 1px;
  /* Leicht schräg wie ein aufgedrückter Stempel — 1,5 Grad, mehr wäre albern. */
  transform: rotate(-1.5deg);
}
.sold-stempel--ready   { color: #6fb6c9; }
.sold-stempel--wounded { color: #d9a441; }
.sold-stempel--dead    { color: #b4553f; }

.sold-akte-bild { display: flex; flex-direction: column; gap: 8px; }
/**
 * 049 — der Weg in die Ausruestungskammer steht jetzt UNTER DER GANZFIGUR.
 * Vorher hing er am Aktenende hinter der Ausruestungsuebersicht; man musste scrollen,
 * um ihn ueberhaupt zu sehen. Er gehoert zur Person, also steht er bei ihrem Bild.
 * Volle Spaltenbreite, damit er als eigener Weg lesbar ist und nicht wie eine Fussnote.
 */
.sold-akte-kammer {
  margin-top: 12px;
  width: 100%;
  min-height: 44px;          /* Fingerziel — dieselbe Groesse wie ueberall sonst */
}

.sold-akte-merkmal {
  font-size: .78em; line-height: 1.45; color: #7f98a4;
  border-left: 2px solid #2c4250; padding-left: 8px;
}

.sold-akte-text { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 22px); min-width: 0; }

.sold-akte-kopf { border-bottom: 1px solid #22333f; padding-bottom: 10px; }
.sold-akte-name {
  display: flex; align-items: baseline; gap: 10px;
  font-size: clamp(18px, 2.2vw, 28px); font-weight: 600; color: #e8f1f4;
}
.sold-akte-rang   { margin-top: 3px; font-size: .9em; color: #7f98a4; }
.sold-akte-status { margin-top: 5px; font-size: .84em; }
.sold-status--ready   { color: #6fb6c9; }
.sold-status--wounded { color: #d9a441; }
.sold-status--dead    { color: #b4553f; }

.sold-akte-block { display: flex; flex-direction: column; gap: 7px; }
.sold-akte-ueber {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: .72em; letter-spacing: .2em; text-transform: uppercase;
  color: #6d8794; font-weight: 500;
}
/* Die Linie läuft bis zum Rand — so bekommt jeder Abschnitt eine sichtbare Oberkante,
   statt dass alle Blöcke als ein einziger Textfluss verschwimmen. */
.sold-akte-ueber::after {
  content: ''; flex: 1 1 auto; height: 1px; background: #1e2c36;
}
.sold-akte-zeile  { font-size: .9em;  color: #b3c6ce; }
.sold-akte-fliess { margin: 0; font-size: .88em; line-height: 1.55; color: #9fb4bd; max-width: 62ch; }
.sold-akte-hinweis {
  font-size: .82em; color: #d9a441;
  border-left: 2px solid #6b5526; padding-left: 8px;
}

/* Werte- und Bilanzgitter */
.sold-werte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px 14px;
}
.sold-wert {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid #182530;
}
.sold-wert-name { font-size: .82em; color: #7f98a4; }
.sold-wert-zahl { font-size: .95em; color: #dbe8ec; font-variant-numeric: tabular-nums; }

/* Fähigkeitenliste */
.sold-faehigkeiten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sold-faehig {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: #101820; border: 1px solid #22333f; border-radius: 2px;
  font-size: .88em; color: #cfe0e6;
  min-height: 34px;
}
.sold-faehig--leer { color: #6d8794; background: transparent; border-style: dashed; }
.sold-faehig--klickbar { cursor: pointer; min-height: 44px; }
@media (hover: hover) {
  .sold-faehig--klickbar:hover { border-color: #4b8fa3; }
}

/* ---------------------------------------------------------------- Gedenktafel */
.sold-gedenk {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px; background: #0e141a; border: 1px solid #1e2c36; border-radius: 2px;
}
.sold-gedenk .sold-bild { filter: grayscale(1) contrast(.92) brightness(.8); }
.sold-gedenk-text  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sold-gedenk-name  { font-size: 1.02em; font-weight: 600; color: #c6d4da; }
.sold-gedenk-rang,
.sold-gedenk-herkunft,
.sold-gedenk-bilanz { font-size: .82em; color: #748995; }
.sold-gedenk-ort    { font-size: .82em; color: #9a7f5d; margin-top: 3px; }

/* ---------------------------------------------------------------- Spielstandvorschau */
.sold-vorschau { display: flex; align-items: center; gap: 5px; }
.sold-vorschau-eintrag { display: flex; }
.sold-vorschau .sold-bild--thumb { width: 34px; }
.sold-vorschau-mehr {
  font-size: .78em; color: #7f98a4; padding-left: 3px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Schmale Geräte */
@media (max-width: 820px) {
  .sold-akte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "band" "bild" "text"; }
  .sold-akte-bild { flex-direction: row; align-items: flex-start; gap: 14px; }
  .sold-bild--fullbody { max-width: 150px; }
  .sold-akte-merkmal { border-left: none; padding-left: 0; }
}

/* ---------------------------------------------------------------- Aktenfenster
   Die Akte liegt als Overlay über dem Personalbildschirm. Bewusst KEIN eigener
   Bildschirmwechsel: man will einen Soldaten kurz nachschlagen und sofort wieder in der
   Liste stehen, ohne den Weg zurück suchen zu müssen. */
.sold-akte-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vh, 40px);
  background: rgba(5, 8, 11, .82);
}
.sold-akte-overlay[hidden] { display: none; }

.sold-akte-fenster {
  position: relative;
  width: min(1080px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(18px, 3vw, 36px);
  /* Der Aktenkopf steht jetzt selbst in dieser Zeile — ein zusätzlicher Freiraum darüber
     liess das Fenster oben leer und unfertig aussehen. Statt Platz ZU SCHAFFEN, macht der
     Kopf rechts Platz FREI (padding-right unten), und beide stehen auf einer Linie. */
  /* Dunkler, damit das Ganzkörperbild und der Stempel tragen — das alte Feld war so hell,
     dass es wie ein fremdes Browserfenster über dem Spiel lag. */
  background:
    repeating-linear-gradient(0deg, rgba(95,179,201,.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #0f181f 0%, #090e13 100%);
  border: 1px solid #2c4250;
  border-radius: 2px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(95,179,201,.05);
  color: #cfe0e6;
}

.sold-akte-schliessen {
  position: absolute;
  top: clamp(10px, 1.6vh, 18px);
  right: clamp(10px, 1.6vw, 18px);
  min-height: 44px;                          /* Tablet-Ziel */
  padding: 0 18px;
  background: transparent;
  border: 1px solid #2c4250;
  border-radius: 1px;
  color: #93aab5;
  font: inherit;
  font-size: .72em;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (hover: hover) {
  .sold-akte-schliessen:hover { border-color: #4b8fa3; }
}
.sold-akte-schliessen:focus-visible { outline: 2px solid #5fb3c9; outline-offset: 2px; }

/* ---------------------------------------------------------------- Gedenktafel
   Erscheint im Personalbildschirm erst, wenn es Gefallene gibt. */
.memorial-ueber {
  margin: clamp(18px, 3vh, 30px) 0 10px;
  font-size: .78em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5f7885;
  font-weight: 500;
  border-top: 1px solid #1e2c36;
  padding-top: clamp(14px, 2vh, 22px);
}

.memorial-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

/* ---------------------------------------------------------------- Taktik-HUD
   Das Kampfbild sitzt in der Einheitenkarte. Klein, damit die Zahlen die Hauptsache bleiben. */
.uc-portrait {
  width: 100%;
  max-width: 76px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 5px;
  border-color: #24333d;
}

/* ---------------------------------------------------------------- Fähigkeiten mit Wirkung */
.sold-faehig { align-items: flex-start; }
.sold-faehig-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sold-faehig-wirkung { font-size: .84em; line-height: 1.45; color: #8ba2ad; }

/* Nachholbare Ausbildung: eine Schaltfläche je ausgelassener Fähigkeit. */
.sold-nachhol {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  min-height: 52px;                     /* Tablet-Ziel, mit Platz für zwei Textzeilen */
  padding: 9px 12px;
  text-align: left;
  background: #101820; border: 1px solid #2c4250; border-radius: 2px;
  color: #cfe0e6; font: inherit; font-size: .92em;
  cursor: pointer;
  transition: border-color .15s;
}
@media (hover: hover) { .sold-nachhol:hover:not(:disabled) { border-color: #4b8fa3; } }
.sold-nachhol:focus-visible { outline: 2px solid #5fb3c9; outline-offset: 2px; }
.sold-nachhol:disabled { opacity: .5; cursor: default; }
.sold-nachhol-preis {
  flex: 0 0 auto; font-size: .84em; color: #d9a441;
  font-variant-numeric: tabular-nums;
}

.sold-akte-fehler {
  padding: 7px 10px;
  border-left: 3px solid #b4553f;
  background: #1b1614;
  color: #e0b3a6;
  font-size: .84em;
}

/* ---------------------------------------------------------------- Rufname ändern */
.sold-rufname-aendern {
  margin-left: 10px;
  /* ⚠️ War 30 px („klein, Nebensache"). Optisch stimmig, mit dem Finger daneben.
     44 px ist die gemessene Touch-Untergrenze (Auftrag 037, Abschnitt 24); die Schrift
     bleibt klein, nur die Trefferfläche wächst. */
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid #2c4250; border-radius: 2px;
  color: #7f98a4; font: inherit; font-size: .5em;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  align-self: center;
}
@media (hover: hover) { .sold-rufname-aendern:hover { border-color: #4b8fa3; color: #cfe0e6; } }

.sold-rufname-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sold-rufname-eingabe {
  flex: 1 1 180px; min-width: 0;
  min-height: 44px; padding: 0 10px;
  background: #0b1116; border: 1px solid #2c4250; border-radius: 2px;
  color: #e8f1f4; font: inherit; font-size: .58em;
}
.sold-rufname-eingabe:focus-visible { outline: 2px solid #5fb3c9; outline-offset: 1px; }
.sold-rufname-ok, .sold-rufname-ab {
  min-height: 44px; padding: 0 14px;
  border: 1px solid #2c4250; border-radius: 2px;
  font: inherit; font-size: .52em; cursor: pointer;
}
.sold-rufname-ok { background: #17303a; color: #cfe0e6; border-color: #3c6b7d; }
.sold-rufname-ab { background: transparent; color: #7f98a4; }
.sold-rufname-feld .sold-akte-fehler { flex: 1 1 100%; font-size: .5em; }

/* ---------------------------------------------------------------- Ortungszentrale als Station
   (033 Phase I) Der Peilschirm füllt das Stationsfeld vollständig aus; command-center.js
   bringt sein eigenes Innenlayout mit und braucht nur eine Fläche. */
.ortung-mount { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- Personal-Kopfzahlen
   (034 Phase I) Personalbestand und Einsatzlimit sind zwei verschiedene Zahlen und stehen
   deshalb als zwei getrennte Kennwerte da — nicht als ein „4/4", das beides verschmilzt. */
.pers-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 40px);
  padding: 4px 2px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid #1e2c36;
}
.pers-zahl { display: flex; flex-direction: column; gap: 1px; min-width: 76px; }
.pers-wert {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 600;
  color: #e8f1f4;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.pers-bez {
  font-size: clamp(9px, .95vw, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6d8794;
}
.pers-voll .pers-wert { color: #6fb6c9; }
.pers-warn .pers-wert { color: #d9a441; }

/* ---------------------------------------------------------------- Einsatzvorbereitung 4 aus 6
   (034 Phase M) Der ganze verfügbare Bestand steht hier; ein Antippen setzt jemanden in den
   Trupp oder holt ihn heraus. Die Slotzahl kommt aus deploymentLimit() und wächst mit dem
   Ausbau mit — es gibt keine fest verdrahtete Vier. */
.briefing-truppkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #1e2c36;
}
.briefing-slots {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 600;
  color: #cfe0e6;
  font-variant-numeric: tabular-nums;
}
.briefing-slots.voll { color: #6fb6c9; }

.briefing-crewrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;                    /* Tablet: bequem antippbar */
  padding: 8px 12px;
  margin-bottom: 6px;
  text-align: left;
  background: #101820;
  border: 1px solid #22333f;
  border-left: 3px solid #22333f;      /* die Kante trägt den Zustand */
  border-radius: 2px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) {
  .briefing-crewrow:hover { border-color: #3c6b7d; }
}
.briefing-crewrow:focus-visible { outline: 2px solid #5fb3c9; outline-offset: 2px; }

.briefing-crewrow.gewaehlt {
  background: linear-gradient(90deg, #14252e 0%, #101820 60%);
  border-left-color: #5fb3c9;
}

.briefing-slotmark {
  flex: 0 0 auto;
  font-size: .74em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5f7885;
}
.briefing-crewrow.gewaehlt .briefing-slotmark { color: #6fb6c9; }

/* ---------------------------------------------------------------- Diensterfahrung (034E)
 * Die Karriereleiste erscheint in der Nachbesprechung bei JEDEM eingesetzten Soldaten —
 * auch wenn niemand aufsteigt. Genau das war der Befund: der Spieler sah nach dem ersten
 * Einsatz keinerlei Fortschritt und hielt ihn für ausgeblieben.
 *
 * Bewusst Blockzeichen statt <progress>: das soll wie eine Terminalausgabe wirken. Die
 * Zeichenbreite muss deshalb fest sein, sonst „atmet" der Balken beim Neuzeichnen.
 */
.karriere {
  margin-top: 9px;
  padding: 8px 10px;
  background: rgba(95,179,201,.045);
  border: 1px solid #22333f;
  border-left: 2px solid #3c6b7d;
  border-radius: 1px;
}
.karriere-kopf { display: flex; align-items: baseline; gap: 10px; }
.karriere-marke {
  font-size: .64em; letter-spacing: .24em; text-transform: uppercase; color: #6d8794;
}
.karriere-rang { margin-left: auto; font-size: .74em; color: #b3c6ce; }

.karriere-balken {
  /* ⚠️ ZWEI FEHLER AUS DER ERSTEN FASSUNG, BEIDE IM BILD SICHTBAR GEWESEN:
   *
   * 1. `line-height: 1.1` war zu eng. Das Zeichen ░ ist in den Ersatzschriften HÖHER als
   *    seine Zeilenbox und ragte nach oben in die Beschriftung „DIENSTERFAHRUNG" hinein —
   *    im Abnahmebild als schmutziger Punktraster über den letzten Buchstaben zu sehen.
   * 2. `letter-spacing: .06em` trennte auch die VOLLEN Blöcke █ voneinander. Ein Balken mit
   *    Lücken sieht nicht nach Terminalausgabe aus, sondern nach kaputter Schrift.
   *
   * Deshalb: kein Sperrsatz, grosszügige Zeilenhöhe, eigener Block. Die feste Zeichenbreite
   * der Monoschrift genügt völlig, damit die Leiste beim Neuzeichnen nicht springt.
   */
  display: block;
  margin: 6px 0 4px;
  font-family: Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  color: #6fb6c9;
}
.karriere-zahl {
  font-size: .72em; color: #8ba2ad; font-variant-numeric: tabular-nums;
}
.karriere-zuwachs {
  margin-top: 4px;
  font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: #6fb6c9;
}
/* Der einzige Amber-Punkt in diesem Kasten — er markiert das, was jetzt ansteht. */
.karriere-befoerderung {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid #6b5526;
  font-size: .74em; letter-spacing: .18em; text-transform: uppercase;
  color: #d9a441; font-weight: 600;
}


/* ---------------------------------------------------------------- Namen nicht abschneiden (034F)
 * ⚠️ EIN EXTERN GEFUNDENER FEHLER, UND MEIN TEST HAT IHN NICHT GESEHEN.
 * `.sold-name` trägt `text-overflow: ellipsis`. In der schmalen Briefing-Spalte wurde daraus
 * „Jonas „Ha…" — der Rufname, den 034E gerade erst sichtbar gemacht hat, war wieder weg.
 * Mein E2E prüfte nur, DASS ein Rufname im Text steht, nicht ob er VOLLSTÄNDIG dasteht.
 *
 * Hier darf der Name umbrechen statt abzuschneiden. Das kostet in der Liste eine Zeile und
 * ist der ganze Preis dafür, dass man die Leute wiedererkennt — was der einzige Zweck des
 * festen Rosters ist.
 */
.briefing-crewrow .sold-name,
.briefing-crewrow .sold-name-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.briefing-crewrow .sold-name {
  flex-wrap: wrap;
  row-gap: 0;
  line-height: 1.25;
  /* ⚠️ KEIN overflow-wrap: anywhere. Ich hatte es als Notnagel drin — und genau das hat
   * Nachnamen mitten im Wort zerlegt: „Brandhub/er", „Steinlech/ner". Meine Messung
   * (scrollWidth > clientWidth) blieb dabei gruen, weil nichts UEBERLAEUFT. Ein zerbrochener
   * Name ist fuer die Wiedererkennung aber genauso wertlos wie ein abgeschnittener.
   * Umbrochen wird nur an Leerzeichen: „Jonas „Habicht" / Brandhuber". */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
.briefing-crewrow .sold-kopf-text { min-width: 0; flex: 1 1 auto; }

/* ---------------------------------------------------------------- 4 aus 6 lesbar (034F, Phase 3)
 * Die Mechanik bleibt unverändert. Nur der Zustand war zu leise: „im Einsatz" und „bleibt da"
 * unterschieden sich fast nur im Wort. Auf einen Blick — und darum geht es bei einer Auswahl,
 * die man in zwei Sekunden verstehen soll — sah die Liste aus wie sechs gleiche Zeilen.
 *
 * Jetzt trägt der Zustand eine Marke UND eine Kante. Kein Website-Schalter, kein Neon:
 * derselbe Terminalstil wie überall, nur mit klarem Vorne/Hinten.
 */
.briefing-crewrow .briefing-slotmark {
  flex: 0 0 auto;
  align-self: center;
  padding: 3px 9px;
  font-size: .62em;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 1px;
  white-space: nowrap;
}
/* Reserve: vorhanden, aber zurückgenommen — sie soll nicht um Aufmerksamkeit kämpfen. */
.briefing-crewrow:not(.gewaehlt) {
  opacity: .78;
  border-left: 3px solid #24333d;
}
.briefing-crewrow:not(.gewaehlt) .briefing-slotmark {
  color: #5f7885;
  border-style: dashed;
}
/* Im Einsatz: cyane Kante links, gefüllte Marke. Das ist der Unterschied, den man sucht. */
.briefing-crewrow.gewaehlt {
  border-left: 3px solid #5fb3c9;
}
.briefing-crewrow.gewaehlt .briefing-slotmark {
  color: #0d141a;
  background: #6fb6c9;
  border-color: #6fb6c9;
  font-weight: 600;
}

/* ================================================================ DEBRIEF ALS EINSATZBERICHT
 * (034F, Phase 5) — nur Praesentation, keine Logik, keine XP-Rechnung.
 *
 * Der Debrief war die schwaechste Flaeche der Demo: dunkle Seite, linksbuendiger Text, eine
 * lange senkrechte Kartenliste. Er sah aus wie ein Dokument, waehrend Titel, Kellerzentrale,
 * Personal und Soldatenakte laengst wie Geraete aussehen.
 *
 * Umgebaut wird ausschliesslich mit CSS auf den vorhandenen Klassen. Kein neues Markup,
 * keine vierte Designsprache — dieselben Mittel wie in der Soldatenakte: dunkler Stahl,
 * duenne Cyanlinie, Amber nur fuer das, was ansteht.
 */
#scene-debrief .debrief-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(12px, 2.2vh, 26px) clamp(14px, 2.4vw, 34px);
  background:
    repeating-linear-gradient(0deg, rgba(95,179,201,.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #0f181f 0%, #090e13 100%);
  border: 1px solid #2c4250;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(95,179,201,.05);
}

/* Kopf: Berichtsband statt blosser Ueberschrift. */
#scene-debrief .debrief-wrap > .title {
  margin: 0 0 4px;
  padding: 8px 12px;
  font-size: clamp(15px, 1.8vw, 21px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d9a441;
  background: rgba(95,179,201,.05);
  border: 1px solid #22333f;
  border-left: 3px solid #d9a441;
  border-radius: 1px;
}

/* Abschnittsueberschriften bekommen eine Linie bis zum Rand — so trennen sich die Bloecke,
   statt als ein einziger Textfluss zu verschwimmen (dasselbe Mittel wie in der Akte). */
#scene-debrief .debrief-section > h3,
#scene-debrief #debrief-body > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
  font-size: .74em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6d8794;
  font-weight: 500;
}
#scene-debrief .debrief-section > h3::after,
#scene-debrief #debrief-body > h3::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #1e2c36;
}

/* ⚠️ DER EIGENTLICHE UMBAU: die Einsatzkraefte als Aktenkarten nebeneinander.
 * Vier Soldaten untereinander ergaben eine Liste, die man scrollen musste; nebeneinander
 * sieht man den Trupp als Trupp. Auf schmalen Schirmen faellt das Raster von selbst auf
 * eine Spalte zurueck — dafuer ist auto-fit da, nicht eine zweite Medienabfrage. */
#scene-debrief .debrief-section > div:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 10px;
  align-items: start;
}
#scene-debrief .detail-box {
  padding: 10px 12px;
  background: #101820;
  border: 1px solid #22333f;
  border-left: 2px solid #3c6b7d;
  border-radius: 1px;
}
/* Gefallene tragen die Verlustfarbe an der Kante, nicht nur im Text. */
#scene-debrief .detail-box:has(.sold-kopf--gefallen) { border-left-color: #b4553f; }

/* ================================================================= 037 Playtest-Befund A
 * DER DEBRIEF WAR ABGESCHNITTEN.
 *
 * `#scene-debrief` ist eine `.scene` mit `height:100%`. `.debrief-wrap` trug zwar
 * `overflow-y:auto`, aber KEINE eigene Höhenbegrenzung — bei viel Inhalt (vier
 * Einsatzkraft-Karten mit Karriereleisten) wuchs der Kasten über den Bildschirm hinaus,
 * und der Scrollbereich fing nichts auf. Das gelbe Beförderungsfeld und der Knopf
 * „Zurück zur Basis" lagen dann ausserhalb.
 *
 * Lösung: die Szene selbst wird zum Scrollbereich, der Inhalt darf beliebig hoch werden,
 * und der Weiter-Knopf klebt als Fussleiste am unteren Rand — er ist damit IMMER erreichbar,
 * egal wie lang der Bericht ist.
 */
/* ⚠️⚠️ REGRESSION AUS GENAU DIESER REGEL — 2026-08-13, von Charly im Spiel gefunden.
 * Hier stand `#scene-debrief { display: flex; … }` OHNE `.active`. Szenen werden über
 * `.scene { display: none }` / `.scene.active { display: block }` geschaltet — ein
 * ID-Selektor schlägt eine Klasse. Die Nachbesprechung war damit IMMER sichtbar und lag
 * leer über jedem anderen Bildschirm: „ich kann den Winklarn Einsatz nicht mehr starten".
 * Der Einsatz startete sehr wohl, man sah ihn nur nicht.
 * `#scene-base` in `base.css` macht es seit jeher richtig — daran orientiert sich das hier. */
#scene-debrief.active {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0; overflow: hidden;
}
#scene-debrief .debrief-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* Tablet: Schwung beim Wischen */
  overscroll-behavior: contain;
}
/* Der Weiter-Knopf gehört nicht in den Scrollbereich, sondern darunter. */
#scene-debrief > .debrief-foot,
#scene-debrief #btn-debrief-continue {
  flex: 0 0 auto;
}
#scene-debrief #btn-debrief-continue {
  margin: 0 auto calc(14px + var(--safe-b));
  display: block; width: min(420px, calc(100% - 28px));
}
/* Auf niedrigen Schirmen (1024x768, 1280x800) darf der Bericht ruhig schmaler werden —
   Hauptsache, er ist vollständig erreichbar. */
@media (max-height: 820px) {
  #scene-debrief .debrief-wrap { padding-block: 10px; }
  #scene-debrief .debrief-section { margin-bottom: 12px; }
}

/* ================================================================= 037: AUSRÜSTUNG
 * Slot-Ansicht statt Fliesstext (Playtest: „nicht nur als Text").
 * Dieselben Klassen in Personal UND Einsatzvorbereitung — eine Optik, eine Wahrheit.
 */
.ldo { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 900px) { .ldo { grid-template-columns: repeat(3, 1fr); } }
.ldo-kopf {
  margin: 16px 0 2px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: #d9a441;
}
.ldo-slot {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(11,23,31,.85), rgba(7,15,22,.9));
  border: 1px solid #2c4250; border-left: 3px solid #5fb3c9;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.ldo-slot-titel {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6f97a8;
  margin-bottom: 4px;
}
.ldo-slot-name { font-size: 14px; color: #eaf9ff; font-weight: 600; }
.ldo-slot-name.leer { color: #6f97a8; font-weight: 400; font-style: italic; }
.ldo-werte { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 8px; }
.ldo-wert { font-size: 11.5px; color: #a9c6d4; }
.ldo-wahl { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ldo-opt {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  min-height: 44px;   /* gemessene Touch-Untergrenze — 40 px waren messbar zu knapp */
  background: rgba(12,24,32,.7); border: 1px solid #24414f; color: #a9c6d4;
  font-family: inherit; font-size: 12px; text-align: left; cursor: pointer;
  touch-action: manipulation;
}
.ldo-opt:disabled { cursor: default; }
.ldo-opt.getragen { border-color: #5fb3c9; color: #eaf9ff; background: rgba(30,84,104,.35); }
.ldo-opt-lager { font-size: 10.5px; color: #6f97a8; white-space: nowrap; }
.ldo-opt.getragen .ldo-opt-lager { color: #5fb3c9; }
@media (hover: hover) and (pointer: fine) {
  .ldo-opt:not(:disabled):hover { border-color: #5fb3c9; color: #eaf9ff; }
}
.ldo-gepaeck { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ldo-item {
  display: inline-flex; gap: 6px; padding: 4px 8px;
  background: rgba(12,24,32,.7); border: 1px solid #24414f; font-size: 11.5px; color: #a9c6d4;
}
.ldo-item-n { color: #5fb3c9; }
.ldo-hinweis { margin-top: 8px; font-size: 11px; color: #6f97a8; line-height: 1.4; }
.ldo-leer { font-size: 11.5px; color: #6f97a8; font-style: italic; padding: 4px 0; }
.ldo-fehler { grid-column: 1/-1; color: #f0b6b3; font-size: 12px; padding: 6px 0; }
/* Kompakte Fassung in der Einsatzvorbereitung: eine Spalte, enger. */
.ldo--kompakt { grid-template-columns: 1fr !important; gap: 6px; margin: 4px 0 14px; }
.ldo--kompakt .ldo-slot { padding: 8px 10px; }

/* 037: Ausrüstungszeile + Werkzeugknopf in der Einsatzvorbereitung.
 * Der Knopf steht NEBEN der Auswahlzeile — die Zeile ist selbst ein Button, ein Knopf
 * darin wäre ungültiges Markup und auf dem Tablet eine Klickfalle. */
.briefing-loadout {
  display: block; font-size: 11.5px; color: #8fb2c2; margin-top: 2px;
}
.briefing-crewtools { display: flex; justify-content: flex-end; margin: 2px 0 8px; }

/*
 * 037 (Playtest): „Die Bilder der Soldaten sollten größer werden, über die ganze Höhe
 * des Soldaten Feldes." Gilt für die Personalliste — Wiedererkennung statt Mini-Avatar.
 *
 * ⚠️ 047 §11 — 86×112 HAT DIESE VORGABE NICHT ERFÜLLT.
 * Der 046-Bericht führte 86×112 px als erledigt. Gemessen füllte das Bild damit knapp die
 * halbe Kartenhöhe — die Karte ist rund 175 px hoch (Kopfzeile + zwei Wertereihen +
 * Ausrüstungszeile). „Fast die komplette Cardhöhe“ ist etwas anderes.
 *
 * Neu: 115–145 px breit, Höhe über `align-self: stretch` an die Karte gekoppelt statt fest
 * gesetzt. Damit wächst das Bild mit, wenn eine Karte durch eine längere Ausrüstungszeile
 * höher wird — eine feste Höhe wäre bei genau einem Kartentyp richtig.
 *
 * ⚠️ `object-fit: cover` BLEIBT, `aspect-ratio` FÄLLT WEG.
 * Beides zusammen würde streiten: `aspect-ratio` will ein Verhältnis erzwingen,
 * `align-self: stretch` eine Höhe. `cover` schneidet dann sauber zu, ohne zu verzerren —
 * gestreckte Gesichter sind ausdrücklich verboten (§11). `object-position: 50% 12%` hält
 * dabei den Kopf im Bild, statt mittig durch die Brust zu schneiden.
 */
#crew-list .sold-kopf .sold-thumb,
#crew-list .sold-kopf img {
  width: clamp(115px, 9vw, 145px);
  align-self: stretch;
  min-height: 145px;
  height: auto;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 0;
}
#crew-list .sold-kopf { align-items: stretch; gap: 14px; }

/*
 * Die Karte braucht dafür eine Mindesthöhe — sonst schrumpft sie bei einem Soldaten ohne
 * Beförderungshinweis auf die Texthöhe und das Bild stünde über. §11 nennt 145–175 px.
 */
#crew-list .row { min-height: 165px; }
#crew-list .row-main { display: flex; flex-direction: column; justify-content: center; }

/* ⚠️ Schmale Geräte (~390 px): ohne `min-width: 0` weigern sich Flex-Kinder, unter ihre
   Inhaltsbreite zu schrumpfen — Name, Rang und Ausrüstungszeile schoben die Zeile dann
   seitlich aus dem Rahmen (gemessen, Auftrag 037 Abschnitt 24). Die Seite selbst scrollte
   nie waagerecht; es lief nur der Zeileninhalt über. */
#crew-list .sold-kopf, #crew-list .sold-kopf-text, #crew-list .sold-unterzeile,
#crew-list .row-main { min-width: 0; }
#crew-list .sold-kopf-text, #crew-list .sold-unterzeile { overflow-wrap: anywhere; }
/*
 * Schmale Geräte: kleiner, aber nicht zurück auf Briefmarke. 92 px lassen ein Gesicht
 * erkennbar; darunter beginnt wieder der Mini-Avatar, den 037 abgeschafft hat.
 */
@media (max-width: 900px) {
  #crew-list .sold-kopf .sold-thumb,
  #crew-list .sold-kopf img { width: 92px; min-height: 118px; }
  #crew-list .row { min-height: 132px; }
}

/* ==========================================================================
 * 047 §11 — DIE SOLDATENKARTE MIT PORTRÄT ALS EIGENE SPALTE
 *
 * Das Bild ist jetzt Geschwister von Textspalte und Knopfspalte, nicht mehr Kind der
 * Kopfzeile. Erst dadurch kann `align-self: stretch` es auf die volle Kartenhöhe ziehen —
 * vorher war die Kopfzeile seine Obergrenze (gemessen 145 von 224 px = 65 %).
 * ========================================================================== */

#crew-list .crew-karte {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 10px;
  min-height: 165px;
}

/*
 * ⚠️ `align-self: stretch` MIT `height: auto` — UND OHNE `aspect-ratio`.
 * Ein ersetztes Element (ein Bild) streckt sich nur, wenn seine Quergrösse `auto` ist.
 * Ein gesetztes `aspect-ratio` oder eine feste `height` gewinnt und der Stretch fällt aus —
 * genau daran ist der erste Anlauf gescheitert (145 px = exakt die gesetzte `min-height`).
 *
 * `object-fit: cover` schneidet dabei zu, statt zu verzerren. Gestreckte Gesichter sind in
 * §11 ausdrücklich verboten. `object-position: 50% 18%` hält den Kopf im Ausschnitt, statt
 * mittig durch die Brust zu schneiden.
 */
#crew-list .crew-karte-bild {
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(115px, 9.5vw, 145px);
  height: auto;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 18%;
  border: 1px solid #2c4250;
  background: #0b1116;
  border-radius: 2px;
}

#crew-list .crew-karte .row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

/* Ohne Bild braucht die Kopfzeile keinen Innenabstand mehr für ein Bild. */
#crew-list .crew-karte .sold-kopf { gap: 0; align-items: baseline; }

@media (max-width: 900px) {
  #crew-list .crew-karte { min-height: 132px; gap: 10px; }
  #crew-list .crew-karte-bild { width: 96px; }
}