/* ORTUNGSZENTRALE (Auftrag 032, Phase D)
 *
 * Leitgedanke: KEIN Dashboard. Es gibt keine Kachel, keinen Web-Fortschrittsbalken und keine
 * schwebende Karte — alles sitzt in Hardware, die im Bunker steht. Die Kulisse ist die
 * abgenommene Lagezentrums-Aufnahme, gedimmt und leicht unscharf, damit die Geräte davor lesbar
 * bleiben und der Raum trotzdem Tiefe hat.
 *
 * Diese Datei betrifft AUSSCHLIESSLICH die neue Ortungszentrale (`.cc-*`). Sie überschreibt
 * nichts Bestehendes; die Regionale Einsatzzentrale bleibt unberührt.
 */

.cc-raum {
  --cc-phos: #6ef2ae;          /* Phosphorgrün des Ortungsschirms */
  --cc-phos-dim: #47a97c;
  --cc-amber: #d8a63c;
  --cc-red: #c4433c;
  --cc-stahl: #1a2027;
  --cc-kante: #39434f;
  --cc-text: #dbe3ea;
  --cc-text-dim: #93a1af;

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #05080b;
  color: var(--cc-text);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 380px);
  /* Die Pultzeile bekommt eine DEFINITE Höhe (kein `auto`) — nur dann lassen sich Schirm und
   * Pult mit Container-Einheiten exakt einpassen, ohne dass eines das andere überlappt. */
  grid-template-rows: auto minmax(0, 1fr) minmax(110px, 0.46fr);
  grid-template-areas:
    "band  band"
    "schirm akte"
    "pult  akte";
  gap: 10px;
  padding: 10px 12px 12px;
}

/* ---------- Raum: Kulisse + Tiefe ---------- */
.cc-kulisse,
.cc-dunst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cc-kulisse {
  background: #05080b url('../assets/base/stations/lagezentrum.webp') center/cover no-repeat;
  /* Der Raum soll HINTEN wirken, nicht dunkel sein. Deshalb kräftiger Weichzeichner statt starkem
   * Dimmen: unscharf liest sich als Tiefe, zu dunkel liest sich nur als „kaputtes Bild".
   * (Erste Fassung hatte brightness .34 + blur 2px + Vignette gestapelt — alles war Matsch.) */
  filter: brightness(.62) saturate(.80) blur(5px);
  transform: scale(1.06);          /* verdeckt die Weichzeichner-Kante am Rand */
}
.cc-dunst {
  background:
    radial-gradient(120% 92% at 50% 44%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, rgba(3, 6, 9, .46) 0%, rgba(3, 6, 9, 0) 30%, rgba(3, 6, 9, .58) 100%);
}

/* ---------- Entwicklungsband (Pflichtkennzeichnung) ---------- */
.cc-devband {
  grid-area: band;
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 5px 12px;
  border: 1px solid #6a5a1c;
  background: repeating-linear-gradient(135deg, rgba(120, 96, 20, .22) 0 10px, rgba(0, 0, 0, .28) 10px 20px);
  font-size: 12px; letter-spacing: .10em; text-transform: uppercase;
  color: #d7bd6a;
}
.cc-devmark {
  padding: 2px 8px; border: 1px solid #a98c2a; color: #f0d489;
  font-weight: 700; letter-spacing: .16em; white-space: nowrap;
}

/* ---------- Schirm im Gehäuse ---------- */
.cc-schirm {
  grid-area: schirm;
  position: relative;
  min-height: 0; min-width: 0;
  display: grid; place-items: center;
  container-type: size; container-name: ccschirm;
}
/*  Umschliesst das Gehäusebild PASSGENAU — daran hängen die Prozentwerte von `.cc-glas`.
 *  WARUM Container-Einheiten und nicht `max-height: 100%` am Bild: eine Prozent-Maximalhöhe
 *  greift nur bei definiter Elternhöhe. Mit `inline-block` (Höhe auto) wurde sie ignoriert,
 *  das Gehäuse behielt seine natürliche Höhe, wuchs aus seiner Rasterzeile heraus und lag über
 *  dem Pult. `min(100cqw, 100cqh * AR)` passt die Kiste in BEIDEN Richtungen ein. */
.cc-rahmen {
  position: relative;
  width: 100%;                                        /* Rückfall ohne Container-Einheiten */
  width: min(100cqw, 100cqh * 1792 / 1216);
  aspect-ratio: 1792 / 1216;
  line-height: 0;
}
.cc-gehaeuse {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
  user-select: none;
  /* Das Gehäuse ist bewusst dunkel gerendert; im Raumlicht bekommt es hier etwas Kante zurück. */
  filter: brightness(1.30) contrast(1.05) drop-shadow(0 18px 30px rgba(0, 0, 0, .70));
}
/*  Die vier Prozentwerte stammen aus der Rendermetadaten-Datei
 *  assets/ui/command_center/cc_ortungsschirm_v1_metadata.json → opening_fraction.
 *  Sichtöffnung 2,56 × 1,44 m bei ortho_scale 3,72 und Bild 1792 × 1216 px.
 *  Nicht „nach Augenmass" nachjustieren — sonst sitzt die Anzeige neben ihrem Rahmen. */
.cc-glas {
  position: absolute;
  left: 15.591%; right: 15.591%; top: 21.477%; bottom: 21.477%;
  overflow: hidden;
  background: #04100c;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .70), inset 0 0 14px rgba(110, 242, 174, .14);
}
.cc-glas::after {                      /* gewölbtes Glas: eine einzelne, schräge Reflexion */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(190, 230, 255, .10) 0 22%, rgba(190, 230, 255, 0) 46%);
}
.cc-svg { width: 100%; height: 100%; display: block; }

/* Schirminhalt */
.cc-ring { fill: none; stroke: rgba(110, 242, 174, .26); stroke-width: 1; }
.cc-strahl { stroke: rgba(110, 242, 174, .14); stroke-width: 1; }
.cc-ringlab, .cc-himmel {
  fill: var(--cc-phos-dim); font-size: 13px; letter-spacing: .12em;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}
.cc-himmel { fill: rgba(130, 245, 190, .62); font-size: 17px; }
.cc-sweepline { stroke: rgba(125, 255, 184, .55); stroke-width: 2; }
.cc-eigen-kern { fill: var(--cc-phos); }
.cc-eigen-ring { fill: none; stroke: rgba(110, 242, 174, .38); stroke-width: 1.5; }
.cc-eigen-lab { fill: rgba(140, 250, 194, .78); font-size: 13px; letter-spacing: .16em; }
.cc-kopf {
  fill: rgba(178, 255, 216, .94); font-size: 19px; letter-spacing: .14em;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}
.cc-unterzeile { fill: rgba(140, 250, 194, .78); font-size: 15px; letter-spacing: .10em; }
.cc-unterzeile.cc-stopp { fill: var(--cc-amber); }
.cc-scanlines { fill: none; pointer-events: none; }   /* Platzhalterfläche in der SVG */
/* Zeilenraster der Bildröhre. Als CSS-Auflage statt als SVG-Muster: kostet nichts und skaliert
 * mit der Glasfläche, nicht mit dem SVG-Koordinatensystem. */
.cc-glas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

/* Standortmarken */
.cc-marke { cursor: pointer; }
.cc-marke:focus-visible { outline: none; }
.cc-marke:focus-visible .cc-marke-lab { fill: #fff; }
.cc-marke-lab {
  fill: rgba(180, 255, 218, .92); font-size: 14px; letter-spacing: .14em;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace; pointer-events: none;
}
.cc-sektor { fill: rgba(110, 242, 174, .085); stroke: rgba(110, 242, 174, .34); stroke-width: 1; }
.cc-band { fill: rgba(110, 242, 174, .16); stroke: rgba(110, 242, 174, .44); stroke-width: 1; }
.cc-marke.sel .cc-sektor { fill: rgba(110, 242, 174, .11); stroke: rgba(148, 255, 200, .52); }
.cc-marke.sel .cc-band { fill: rgba(110, 242, 174, .20); stroke: rgba(148, 255, 200, .66); }
.cc-punkt-kern { fill: #b6ffd8; }
.cc-punkt-halo { fill: rgba(110, 242, 174, .30); }
.cc-punkt-fadenkreuz {
  fill: none; stroke: rgba(148, 255, 200, .70); stroke-width: 1.5;
  stroke-dasharray: 7 9;
}
.cc-marke.sel .cc-punkt-fadenkreuz { stroke: #eafff4; stroke-width: 2; }
.cc-punkt-ring { fill: none; stroke: rgba(140, 160, 175, .55); stroke-width: 1.5; }
.cc-gesichert-kreuz { stroke: rgba(140, 160, 175, .70); stroke-width: 1.5; }
.cc-marke.cc-gesichert .cc-marke-lab { fill: rgba(150, 168, 182, .70); }
.cc-marke.aktiv .cc-sektor { animation: cc-puls 2.6s ease-in-out infinite; }
@keyframes cc-puls { 0%, 100% { opacity: .70; } 50% { opacity: 1; } }

/* ---------- Pult ---------- */
.cc-pult {
  grid-area: pult;
  position: relative;
  min-height: 0; min-width: 0;
  display: grid; place-items: end center;
  container-type: size; container-name: ccpult;
}
.cc-pultrahmen {                       /* umschliesst das Pultbild passgenau (wie `.cc-rahmen`) */
  position: relative;
  line-height: 0;
  /* eigener Messbezug: die Beschriftungen skalieren mit der PULTBREITE, nicht mit dem Fenster —
   * sonst sprengt die Uhrzeit auf schmalen Pulten ihre Fläche (erster Fehlversuch mit `vw`). */
  container-type: inline-size; container-name: ccpultbild;
  width: 100%;                                        /* Rückfall ohne Container-Einheiten */
  width: min(100cqw, 980px, 100cqh * 1792 / 736);
  aspect-ratio: 1792 / 736;
}
.cc-pultbild {
  display: block; width: 100%; height: 100%;
  pointer-events: none; user-select: none;
  filter: brightness(1.30) contrast(1.05) drop-shadow(0 -8px 26px rgba(0, 0, 0, .60));
}
/* Die Bedienelemente liegen ÜBER den gerenderten Kippschaltern.
 * Die Werte stammen aus der Rendergeometrie: Schalterfelder x = -1,42 … -0,52 m bei
 * ortho_scale 4,20 → Bildanteil 13,3 % … 40,5 %. Nicht nach Gefühl verschieben. */
.cc-schalter {
  position: absolute;
  left: 13.3%; width: 27.2%; top: 24.5%; height: 17%;
  display: flex; gap: 0;
}
.cc-kipp {
  flex: 1 1 0; min-width: 0; height: 100%;
  border: 1px solid rgba(120, 138, 156, .30);
  background: linear-gradient(180deg, rgba(30, 38, 47, .40), rgba(10, 14, 18, .58));
  color: var(--cc-text-dim);
  font: 700 clamp(9px, 2.2cqw, 16px)/1 ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
  letter-spacing: .08em; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px;
  transition: color .12s, border-color .12s, box-shadow .12s;
}
.cc-kipp:hover { color: var(--cc-text); border-color: rgba(160, 180, 198, .55); }
.cc-kipp.on {
  color: #eafff4; border-color: rgba(110, 242, 174, .70);
  box-shadow: 0 0 14px rgba(110, 242, 174, .22), inset 0 0 12px rgba(110, 242, 174, .14);
}
.cc-kipp:focus-visible { outline: 2px solid var(--cc-phos); outline-offset: 2px; }
/* Uhrzeit-Anzeige auf der freien Korpusfront zwischen Schriftschild (bis 30 %) und
 * Wartungsklappe (ab 59,5 %) — dazwischen liegt der einzige freie Streifen. */
.cc-uhr {
  position: absolute; left: 31%; width: 27.5%; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1;
  text-align: center;
  text-shadow: 0 0 14px rgba(110, 242, 174, .34);
}
.cc-uhr-zeit {
  font: 700 clamp(12px, 6.2cqw, 30px)/1 ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
  letter-spacing: .04em; color: #cbf7e1; white-space: nowrap;
}
.cc-uhr-sub {
  font-size: clamp(8px, 2.3cqw, 13px); letter-spacing: .08em; text-transform: uppercase;
  color: #93a3b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ---------- Signalakte ---------- */
.cc-akte {
  grid-area: akte;
  position: relative;
  min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
  border: 1px solid var(--cc-kante);
  background: linear-gradient(165deg, rgba(14, 21, 28, .93), rgba(7, 12, 17, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 18px 30px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.cc-akte-kopf {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--cc-kante);
  font-size: 13px; letter-spacing: .18em; color: var(--cc-text-dim);
}
.cc-akte-mark { color: var(--cc-phos); font-size: 16px; }
.cc-spuren { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.cc-spur {
  display: grid; grid-template-columns: 1fr auto; gap: 0 8px;
  align-items: baseline;
  width: 100%; min-height: 40px; padding: 6px 8px; text-align: left;
  border: 1px solid transparent; border-left: 3px solid var(--cc-kante);
  background: rgba(255, 255, 255, .022);
  color: var(--cc-text); cursor: pointer;
  font-family: inherit;
}
.cc-spur:hover { background: rgba(255, 255, 255, .05); }
.cc-spur.sel { border-color: rgba(110, 242, 174, .40); border-left-color: var(--cc-phos); background: rgba(110, 242, 174, .09); }
.cc-spur.aktiv { border-left-color: var(--cc-amber); }
.cc-spur.fertig { opacity: .62; }
.cc-spur--leer { opacity: .40; cursor: default; grid-template-columns: 1fr; }
.cc-spur-name { font-size: 14px; letter-spacing: .06em; }
.cc-spur-status {
  grid-column: 1; font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--cc-text-dim);
}
.cc-spur-wert {
  grid-row: 1 / span 2; align-self: center;
  font: 700 15px/1 ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace; color: var(--cc-phos);
}
.cc-spur.fertig .cc-spur-wert { color: var(--cc-text-dim); }

/* Detail */
.cc-detail {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-top: 8px; border-top: 1px solid var(--cc-kante);
  display: flex; flex-direction: column; gap: 7px;
}
.cc-detail-titel { margin: 0; font-size: 16px; letter-spacing: .04em; color: #e3ebf2; }
.cc-detail-status {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-phos);
}
.cc-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.cc-kv { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.cc-k { color: var(--cc-text-dim); }
.cc-v { color: var(--cc-text); text-align: right; }
.cc-lage, .cc-ziel, .cc-hint, .cc-meldung {
  margin: 0; font-size: 12.5px; line-height: 1.42; color: var(--cc-text-dim);
  font-family: system-ui, sans-serif;
}
.cc-ziel { color: var(--cc-text); }
.cc-meldung { color: var(--cc-amber); }
.cc-hinweise { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cc-hinweise-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text-dim); }
.cc-hinweis {
  padding: 1px 7px; border: 1px solid rgba(110, 242, 174, .26);
  font-size: 11.5px; color: rgba(148, 255, 200, .82);
}
.cc-sperre {
  font-size: 12.5px; color: var(--cc-amber); font-family: system-ui, sans-serif;
  border-left: 2px solid var(--cc-amber); padding-left: 8px;
}
.cc-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

/* ---------- Schaltflächen ---------- */
.cc-btn {
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--cc-kante);
  background: linear-gradient(180deg, rgba(38, 47, 58, .70), rgba(16, 21, 27, .82));
  color: var(--cc-text); cursor: pointer;
  font: 600 13px/1 ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace; letter-spacing: .10em; text-transform: uppercase;
}
.cc-btn:hover { border-color: rgba(160, 180, 198, .60); color: #fff; }
.cc-btn:focus-visible { outline: 2px solid var(--cc-phos); outline-offset: 2px; }
.cc-btn--primary {
  border-color: rgba(110, 242, 174, .55); color: #eafff4;
  background: linear-gradient(180deg, rgba(28, 78, 58, .78), rgba(11, 32, 24, .88));
}
.cc-btn--primary:hover { border-color: var(--cc-phos); box-shadow: 0 0 16px rgba(110, 242, 174, .24); }

/* ---------- Entdeckungsfenster ---------- */
.cc-fund-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(2, 5, 8, .74);
  backdrop-filter: blur(2px);
}
.cc-fund {
  width: min(560px, 100%);
  border: 1px solid rgba(110, 242, 174, .40);
  background: linear-gradient(165deg, rgba(11, 22, 18, .97), rgba(5, 10, 9, .98));
  box-shadow: 0 26px 60px rgba(0, 0, 0, .70), inset 0 0 34px rgba(110, 242, 174, .06);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-fund-kopf { display: flex; flex-direction: column; gap: 4px; }
.cc-fund-tag {
  align-self: flex-start; padding: 2px 9px;
  border: 1px solid var(--cc-phos); color: #eafff4;
  font-size: 11px; letter-spacing: .22em;
}
.cc-fund-kopf h3 { margin: 0; font-size: 20px; letter-spacing: .03em; color: #e8f2ec; }
.cc-fund-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; }
.cc-fund-text {
  margin: 0; font-family: system-ui, sans-serif; font-size: 13px; line-height: 1.5;
  color: var(--cc-text-dim);
}
.cc-fund-sperre {
  margin: 0; font-family: system-ui, sans-serif; font-size: 12.5px;
  color: var(--cc-amber); border-left: 2px solid var(--cc-amber); padding-left: 8px;
}
.cc-fund-aktionen { display: flex; justify-content: flex-end; }

/* ---------- Schmale Geräte: Akte unter den Schirm ---------- */
@media (max-width: 900px), (orientation: portrait) {
  .cc-raum {
    grid-template-columns: minmax(0, 1fr);
    /* Die Pultzeile MUSS auch hier eine definite Höhe behalten. Mit `auto` ist `100cqh` gleich
     * null, `min(100cqw, 100cqh × AR)` wird 0 — und das Pult schrumpft auf einen Strich
     * zusammen (im Hochformat-Abnahmebild 10 der ersten Runde genau so passiert). */
    grid-template-rows: auto minmax(0, 1fr) minmax(84px, 0.26fr) auto;
    grid-template-areas: "band" "schirm" "pult" "akte";
  }
  .cc-akte { max-height: 38vh; }
  .cc-gitter, .cc-fund-gitter { grid-template-columns: 1fr; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-marke.aktiv .cc-sektor { animation: none; }
}

/* v31: one readable control, independent of decorative switch positions. */
.cc-simple-scan{align-self:stretch;display:grid;grid-template-columns:1fr 1.2fr;gap:8px 22px;align-content:center;padding:16px 24px;border:1px solid #366575;border-radius:10px;background:#0c1d26ed;z-index:2;min-height:160px}
.cc-calendar{display:flex;flex-direction:column;justify-content:center;gap:4px;color:#a8bbc5;font-size:13px}
.cc-calendar-day{color:#d6e7ee;font-size:17px}.cc-calendar-time{font-size:34px;font-variant-numeric:tabular-nums;color:#91ebcf;line-height:1.1}
.cc-scan-button{align-self:center;padding:18px 24px;min-height:64px;font-size:22px;font-weight:700;cursor:pointer;border:1px solid #77dcc7;border-radius:8px;color:#eafffa;background:#14574e}.cc-scan-button:hover{background:#1b7567}.cc-scan-button:focus-visible{outline:3px solid #e9c86e;outline-offset:3px}
.cc-scan-note{grid-column:1/-1;margin:0;color:#b7cbd5;font:13px/1.4 system-ui}
@media(max-width:650px){.cc-simple-scan{grid-template-columns:1fr;padding:12px;min-height:230px}.cc-calendar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}.cc-calendar-time{font-size:26px}.cc-scan-button{font-size:19px}}

.cc-simple-scan{container-type:normal}
.cc-raum:has(.cc-simple-scan){grid-template-rows:auto minmax(0,1fr) minmax(180px,.46fr)}
@media(max-width:900px),(orientation:portrait){.cc-raum:has(.cc-simple-scan){grid-template-rows:auto minmax(220px,1fr) auto auto;overflow-y:auto}.cc-simple-scan{min-height:180px}}