/*
 * BEFÖRDERUNGSBILDSCHIRM — KARRIERETERMINAL (Auftrag 034B Phase 15).
 *
 * Ersetzt das 033-Stylesheet vollständig. Der alte Bildschirm zeigte zwei Rechtecke in viel
 * leerer Fläche; die externe Prüfung nannte ihn zu Recht eine Web-App. Neu ist nicht die Farbe,
 * sondern der Inhalt: der ganze Karrierebaum steht auf einem Schirm.
 *
 * Bildsprache: bunkerinterner Trainingscomputer. Dunkler Stahl, gedämpftes Cyan für alles
 * Erreichte, AMBER ausschliesslich für die anstehende Beförderung — dadurch springt sie ins
 * Auge, ohne dass etwas blinken muss.
 *
 * ⚠️ DIESE AMBER-REGEL GILT NUR AUF DIESEM BILDSCHIRM.
 * Projektweit ist Amber die Akzentfarbe (Logo, Abschnittsüberschriften, Aktenkopf). Hier ist
 * sie enger gefasst, weil auf diesem Schirm genau EINE Handlung ansteht und nichts sonst um
 * Aufmerksamkeit konkurrieren soll. Ein externes Gutachten hat den Satz als Hausregel fürs
 * ganze Spiel gelesen und daraus einen Regelverstoss abgeleitet — daher diese Klarstellung.
 *
 * Tablet: alle Felder sind Flächen mit mindestens 60 px Höhe. Hover ist eine Zugabe.
 */

.promo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 16px);
  padding: clamp(10px, 2vh, 22px) clamp(12px, 2.4vw, 34px) clamp(12px, 2vh, 22px);
  overflow-y: auto;
  background:
    /* schwache Leiterbahnen — Technik, die man ahnt statt sieht */
    repeating-linear-gradient(90deg, rgba(95,179,201,.028) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(95,179,201,.02) 0 1px, transparent 1px 74px),
    radial-gradient(120% 80% at 50% 0%, #16212a 0%, #0d141a 55%, #070b0f 100%);
  color: #cfe0e6;
}

/* ---------------------------------------------------------------- Kopfband */
.promo-band {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 26px);
  padding-bottom: 8px;
  border-bottom: 1px solid #22333f;
}
.promo-band-marke {
  font-size: clamp(9px, .92vw, 11px); letter-spacing: .28em;
  text-transform: uppercase; color: #5f7885;
}
.promo-band-titel {
  font-size: clamp(16px, 1.9vw, 23px); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #d9a441;
}
.promo-band-stufe { margin-left: auto; font-size: clamp(11px, 1.1vw, 13px); color: #7f98a4; }

/* ---------------------------------------------------------------- Raumaufteilung */
.promo-raum {
  display: grid;
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------------------------------------------------------------- links: der Mensch */
.promo-person { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.promo-figur {
  width: 100%; max-width: 268px; aspect-ratio: 2 / 3;
  object-fit: cover; object-position: 50% 10%;
  border: 1px solid #2c4250; border-radius: 2px;
  background: #0b1116;
  filter: saturate(.88) contrast(1.05);
}
.promo-person-text { display: flex; flex-direction: column; gap: 3px; }
.promo-name {
  display: flex; align-items: baseline; gap: 9px;
  font-size: clamp(16px, 1.8vw, 22px); font-weight: 600; color: #e8f1f4;
}
.promo-klassenzeichen { color: #6fb6c9; }
.promo-rang     { font-size: .84em; color: #7f98a4; }
.promo-herkunft { font-size: .78em; color: #5f7885; }
.promo-rufname-neu { margin-top: 4px; font-size: .8em; color: #d9a441; }
.promo-punkte {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid #1e2c36;
  font-size: .78em; color: #6d8794; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Karrierebaum */
.promo-baum {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  /* Der Baum fuellt die Hoehe aus. Ohne das klebten die fuenf Zeilen oben und darunter
     blieb ein Viertel Bildschirm leer — genau der Eindruck, den 034B abstellen sollte. */
  flex: 1 1 auto;
}
.promo-baum-kopf {
  font-size: clamp(9px, .92vw, 11px); letter-spacing: .2em;
  text-transform: uppercase; color: #5f7885; margin-bottom: 2px;
}

/* Signaturfähigkeit — steht über der Laufbahn, ist keine Wahl */
.promo-signatur {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; margin-bottom: 4px;
  background: #0f1720; border: 1px dashed #2c4250; border-radius: 2px;
  cursor: pointer;
}
.promo-sig-ic { color: #4b8fa3; font-size: 1.05em; }
.promo-sig-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.promo-sig-name { font-size: .86em; font-weight: 600; color: #b3c6ce; }
.promo-sig-wirkung {
  font-size: .74em; color: #6d8794;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-sig-marke {
  margin-left: auto; flex: 0 0 auto;
  font-size: .64em; letter-spacing: .12em; text-transform: uppercase; color: #4f6b78;
}

/* Eine Rangzeile: Feld — Rangmarke — Feld */
.promo-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  /* Die fuenf Zeilen teilen sich die Hoehe des Baums gleichmaessig auf. */
  flex: 1 1 0;
  min-height: 62px;
}
.promo-zeile--spaeter { opacity: .42; }

.promo-rangmarke {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-left: 1px solid #1e2c36; border-right: 1px solid #1e2c36;
}
.promo-rangzahl {
  font-size: clamp(14px, 1.5vw, 18px); font-weight: 600; color: #4f6b78;
  font-variant-numeric: tabular-nums;
}
.promo-rangwort {
  font-size: .58em; letter-spacing: .14em; text-transform: uppercase; color: #d9a441;
}
.promo-zeile--offen .promo-rangzahl { color: #d9a441; }
.promo-zeile--offen .promo-rangmarke { border-color: #6b5526; }

/* ---------------------------------------------------------------- Fähigkeitsfeld */
.promo-feld {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 60px;                      /* Tablet-Ziel */
  padding: 8px 11px;
  text-align: left;
  background: #101820;
  border: 1px solid #22333f; border-radius: 2px;
  color: inherit; font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.promo-feld--leer { background: transparent; border: none; cursor: default; }
@media (hover: hover) { .promo-feld:hover:not(:disabled) { border-color: #4b8fa3; } }
.promo-feld:focus-visible { outline: 2px solid #5fb3c9; outline-offset: 2px; }
.promo-feld:disabled { cursor: default; }

.promo-feld-kopf { display: flex; align-items: center; gap: 9px; }
.promo-feld-ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; font-size: 15px;
  color: #4f6b78; border: 1px solid #24333d; border-radius: 2px; background: #0c141a;
}
.promo-feld-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.promo-feld-name {
  font-size: clamp(12px, 1.15vw, 14px); font-weight: 600; color: #b3c6ce;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-feld-art {
  font-size: .64em; letter-spacing: .1em; text-transform: uppercase; color: #56707d;
}
.promo-feld-haken { margin-left: auto; color: #6fb6c9; font-size: .95em; }

/* Die vier Zustände */
.promo-feld--gewaehlt {
  background: linear-gradient(180deg, #14252e 0%, #101a21 100%);
  border-color: #3c6b7d;
}
.promo-feld--gewaehlt .promo-feld-name { color: #e8f1f4; }
.promo-feld--gewaehlt .promo-feld-ic { color: #6fb6c9; border-color: #3c6b7d; }

.promo-feld--ausgelassen { border-style: dashed; opacity: .72; }
.promo-feld--ausgelassen .promo-feld-name { color: #8ba2ad; }

.promo-feld--offen {
  background: linear-gradient(180deg, #1e1a12 0%, #15130f 100%);
  border-color: #6b5526;
}
.promo-feld--offen .promo-feld-name { color: #f0d9a8; }
.promo-feld--offen .promo-feld-ic { color: #d9a441; border-color: #6b5526; }
@media (hover: hover) { .promo-feld--offen:hover:not(:disabled) { border-color: #d9a441; } }

.promo-feld--gesperrt { cursor: default; }

/* Der eine Moment nach dem Klick — knapp, kein Theater */
.promo-feld--eben-gewaehlt {
  border-color: #d9a441;
  animation: promo-quittung .7s ease-out;
}
@keyframes promo-quittung {
  0%   { box-shadow: 0 0 0 0 rgba(217,164,65,.45); }
  100% { box-shadow: 0 0 0 14px rgba(217,164,65,0); }
}

/* ---------------------------------------------------------------- Detailfeld */
.promo-detail {
  display: flex; gap: clamp(10px, 1.6vw, 18px); align-items: flex-start;
  padding: clamp(10px, 1.5vh, 15px) clamp(12px, 1.8vw, 20px);
  background: linear-gradient(180deg, #111b23 0%, #0d151b 100%);
  border: 1px solid #22333f; border-left: 3px solid #3c6b7d; border-radius: 2px;
  min-height: 88px;
}
.promo-detail--offen { border-left-color: #d9a441; }
.promo-detail--spaeter { opacity: .78; }

.promo-detail-ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; font-size: 22px;
  color: #6fb6c9; border: 1px solid #2c4a58; border-radius: 2px; background: #0c141a;
}
.promo-detail--offen .promo-detail-ic { color: #d9a441; border-color: #6b5526; }

.promo-detail-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.promo-detail-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.promo-detail-name { font-size: clamp(14px, 1.5vw, 18px); font-weight: 600; color: #e8f1f4; }
.promo-detail-art {
  font-size: .68em; letter-spacing: .12em; text-transform: uppercase; color: #6d8794;
}
.promo-detail-marke {
  font-size: .64em; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid currentColor; border-radius: 2px; color: #5f7885;
}
.promo-detail-marke--gewaehlt { color: #6fb6c9; }
.promo-detail-marke--offen    { color: #d9a441; }

.promo-detail-wirkung {
  margin: 0; font-size: clamp(12px, 1.2vw, 14px); line-height: 1.55;
  color: #b3c6ce; max-width: 92ch;
}
.promo-detail-werte { display: flex; flex-wrap: wrap; gap: 6px; }
.promo-detail-wert {
  font-size: .74em; padding: 2px 9px;
  background: #0c141a; border: 1px solid #24333d; border-radius: 2px; color: #8ba2ad;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Fuss */
.promo-hinweis { font-size: .78em; color: #6d8794; text-align: center; }
.promo-hinweis--fehler { color: #e0b3a6; }

/* ---------------------------------------------------------------- Schmale Geräte
   Unter ~1000 px steht die Person über dem Baum: nebeneinander bliebe für die Laufbahn
   zu wenig Breite, und die Laufbahn ist der Zweck dieses Bildschirms. */
@media (max-width: 1000px) {
  .promo-raum { grid-template-columns: minmax(0, 1fr); }
  .promo-person { flex-direction: row; align-items: flex-start; gap: 14px; }
  .promo-figur { max-width: 132px; }
  .promo-zeile { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-feld { transition: none; }
  .promo-feld--eben-gewaehlt { animation: none; }
}

/* Ceremony v24: the current choice and its effects are visible together. */
.promo.ceremony{z-index:6500;display:block;padding:28px 5vw 40px;background:radial-gradient(ellipse at 50% -10%,#66513566,transparent 58%),linear-gradient(145deg,#17232b,#080e15 70%);color:#e6e9e7;overflow:auto}
.ceremony-header{text-align:center;max-width:1160px;margin:0 auto 25px;border-bottom:1px solid #b298604d;padding-bottom:22px}.ceremony-kicker{font-size:11px;letter-spacing:.28em;color:#bea982;font-weight:600}.ceremony-medal{color:#f4d68d;font-size:36px;line-height:1.25;margin:6px 0;text-shadow:0 0 35px #e4b75580}.ceremony-header h1{font-family:Georgia,serif;font-size:clamp(34px,4.4vw,64px);letter-spacing:.12em;font-weight:500;color:#f3dca7;margin:0}.ceremony-header p{font-size:15px;color:#b6bfc2;margin:9px 0 0}
.ceremony-body{display:grid;grid-template-columns:220px minmax(0,820px);gap:42px;max-width:1082px;margin:auto;align-items:start}.ceremony-person{text-align:center}.ceremony-portrait{width:100%;height:330px;object-fit:cover;object-position:top;border:1px solid #a28b5766;box-shadow:0 15px 45px #0007}.ceremony-person h2{font-size:21px;line-height:1.4;margin:15px 0 5px}.ceremony-rank{color:#dfc694;margin:0}.ceremony-origin{font-size:12px;color:#8e9ca4}
.ceremony-class{text-align:center;margin-bottom:26px}.ceremony-class h2{font-size:30px;margin:7px 0 10px;color:#f2ead9}.ceremony-class p{font-size:15px;line-height:1.55;margin:8px auto;max-width:680px;color:#c0ccd0}.ceremony-class .ceremony-signature{font-size:13px;color:#8fa7b3}.ceremony-choice-title{text-align:center;font-size:18px;margin:0;color:#dfca9c}.ceremony-instruction{text-align:center;color:#9eadb5;font-size:13px;margin:9px 0 18px}
.ceremony-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ceremony-choice{display:flex;flex-direction:column;text-align:left;padding:22px;min-height:232px;min-width:0;color:#dde4e6;border:1px solid #687681;background:linear-gradient(145deg,#24333d,#152029);border-radius:6px;cursor:pointer;box-shadow:0 7px 25px #0003}.ceremony-choice:hover,.ceremony-choice:focus-visible{border-color:#e1c890;background:#293945}.ceremony-choice.selected{border-color:#edce85;box-shadow:0 0 0 2px #b49a5b55;background:linear-gradient(145deg,#403b2d,#1d282b)}.ceremony-ability-kind{text-transform:uppercase;font-size:10px;letter-spacing:.12em;color:#c6b07d}.ceremony-choice h3{font-size:23px;margin:12px 0;color:#fff0ce}.ceremony-effect{font-size:15px;line-height:1.65;margin:0 0 14px}.ceremony-costs{font-size:12px;color:#b3c3cb}.ceremony-pick{margin-top:auto;padding-top:12px;color:#d7c69e;font-size:12px}.selected .ceremony-pick{color:#f6dea3}.ceremony-confirm{display:block;margin:24px auto 8px;padding:13px 30px;border:1px solid #dcc28a;border-radius:4px;background:#e0c183;color:#1f2426;font-size:15px;font-weight:700;cursor:pointer}.ceremony-confirm:disabled{background:#26323a;border-color:#46535d;color:#84939c;cursor:default}.ceremony-note{text-align:center;font-size:12px;color:#9cabb2;margin:14px 0}.ceremony-career{display:grid;gap:8px;margin-top:12px;color:#9eafb9;font-size:13px}.ceremony-career-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.ceremony-future{display:flex;align-items:center;min-height:36px;padding:7px 22px;border:1px solid #3d4d58;border-radius:5px;background:#17232d;font-weight:500}
@media(max-width:760px){.promo.ceremony{padding:20px}.ceremony-body{grid-template-columns:1fr;gap:20px}.ceremony-person{display:none}.ceremony-choices{grid-template-columns:1fr}.ceremony-header{margin-bottom:20px}.ceremony-choice{min-height:0}.ceremony-main:before{content:'Wähle die neue Fähigkeit für deine Einsatzkraft';display:block;text-align:center;color:#aaa;font-size:12px;margin-bottom:16px}}

@media(max-width:760px){.ceremony-person{display:block}.ceremony-portrait{width:76px;height:96px;float:left;margin-right:16px}.ceremony-person{text-align:left;min-height:100px}.ceremony-person h2{margin-top:8px}.ceremony-main:before{display:none}}

@media(max-width:760px){.ceremony-career-row{grid-template-columns:1fr;gap:8px}}