/* AIO.City Leitstelle (2026-10-08): Clips, Replay, Live-Ansicht (aio-aufnahme.js). Panel + Team-Bereich im Spiel.
   Nur Funktionen, die FiveMs alter CEF kann (kein color-mix, kein :has, keine inset-Kurzform). */
.af-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 8); margin: calc(var(--u) * 14) 0; }
.af-leiste .suchfeld-klein { flex: 1 1 calc(var(--u) * 220); min-width: 0; }
.af-leiste .eingabe.kompakt { width: auto; }
.af-oder { color: var(--ter); }

.af-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 210), 1fr)); gap: calc(var(--u) * 12); }
.af-gitter.klein { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 170), 1fr)); margin-top: calc(var(--u) * 10); }
.af-karte { display: flex; flex-direction: column; text-align: left; border-radius: calc(var(--u) * 16); overflow: hidden; background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante); color: inherit; cursor: pointer; min-width: 0; }
.af-karte:hover { background: var(--karte-hover, rgba(255, 255, 255, .07)); }
.af-bild { position: relative; display: block; width: 100%; padding-top: 56.25%; background: #0b0f14; }
.af-bild img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.af-platz { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ter); }
.af-platz svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.af-dauer, .af-behalten { position: absolute; bottom: calc(var(--u) * 6); font-style: normal; font-size: calc(var(--u) * 11); font-weight: 700; padding: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: 99px; background: rgba(0, 0, 0, .7); color: #fff; }
.af-dauer { right: calc(var(--u) * 6); }
.af-behalten { left: calc(var(--u) * 6); display: flex; align-items: center; color: var(--gold); }
.af-behalten svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.af-text { display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 12); min-width: 0; }
.af-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--u) * 13); }
.af-text small { color: var(--ter); font-size: calc(var(--u) * 11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-pillen { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 4); }
.af-pillen .pille { height: calc(var(--u) * 20); font-size: calc(var(--u) * 10); }
.pille.af-tod, .pille.af-taeter { background: rgba(255, 90, 106, .14); color: var(--rot); }
.pille.af-ticket, .pille.af-meldung { background: rgba(90, 169, 255, .14); color: var(--blau); }
.pille.af-admin, .pille.af-fall { background: rgba(255, 122, 26, .16); color: var(--akzent-hell); }
.pille.af-beobachtung { background: rgba(255, 226, 191, .14); color: var(--gold); }
.af-seiten { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12); margin: calc(var(--u) * 18) 0 calc(var(--u) * 6); color: var(--sek); font-size: calc(var(--u) * 12); }

/* Clip-Dialog */
.dialog-hg.af-weit .dialog { width: min(calc(var(--u) * 1180), 94vw); max-width: 94vw; max-height: 92vh; overflow-y: auto; }
.af-dialog .box-kopf { margin-bottom: calc(var(--u) * 12); }
.af-dialog-raster { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 300); gap: calc(var(--u) * 16); align-items: start; }
.af-medien { width: 100%; max-height: 70vh; border-radius: calc(var(--u) * 14); background: #000; display: block; }
.af-medien.af-leer { padding: calc(var(--u) * 80) calc(var(--u) * 20); text-align: center; color: var(--ter); background: rgba(0, 0, 0, .35); }
.af-dialog-info { display: flex; flex-direction: column; gap: calc(var(--u) * 12); min-width: 0; }
.af-dialog-info .werkzeuge { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.af-dialog-info .knopf.gefahr { color: #ff8a96; }
.af-treffer { display: flex; flex-direction: column; gap: calc(var(--u) * 4); margin: calc(var(--u) * 8) 0 calc(var(--u) * 12); max-height: calc(var(--u) * 260); overflow-y: auto; }
.af-treffer-z { display: flex; flex-direction: column; text-align: left; padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: rgba(255, 255, 255, .04); color: inherit; box-shadow: inset 0 0 0 1px var(--kante); }
.af-treffer-z small { color: var(--ter); font-size: calc(var(--u) * 11); }
.af-treffer-z.an { box-shadow: inset 0 0 0 2px var(--akzent); background: rgba(255, 122, 26, .1); }

/* Replay */
.rumpf.voll.af-replay { display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 16); }
.af-replay .af-leiste { margin: 0; flex: none; }
.af-rp-raster { flex: 1; min-height: calc(var(--u) * 320); display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 270); gap: calc(var(--u) * 10); }
.af-rp-karte { position: relative; border-radius: calc(var(--u) * 16); overflow: hidden; background: #0d1a24; box-shadow: inset 0 0 0 1px var(--kante); min-height: 0; }
.af-rp-karte canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: grab; display: block; }
.af-rp-karte canvas:active { cursor: grabbing; }
.af-rp-info { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 10); padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: 99px; background: rgba(8, 12, 18, .78); font-size: calc(var(--u) * 12); color: var(--sek); pointer-events: none; max-width: calc(100% - calc(var(--u) * 20)); }
.af-rp-seite { overflow-y: auto; min-height: 0; }
.af-rp-liste { display: flex; flex-direction: column; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 10); }
.af-rp-zeile { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 4) calc(var(--u) * 6); border-radius: calc(var(--u) * 10); }
.af-rp-zeile.an { background: rgba(255, 122, 26, .1); }
.af-rp-haken { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; border: 2px solid; background: transparent; }
.af-rp-name { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; color: inherit; background: none; }
.af-rp-name b { font-size: calc(var(--u) * 12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-rp-name small { font-size: calc(var(--u) * 10); color: var(--ter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-rp-zeile .mini-knopf { flex: none; padding: 0 calc(var(--u) * 6); }
.af-rp-zeile .mini-knopf svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.af-rp-zeit { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 14); }
.af-rp-zeit .knopf svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.af-rp-spur { position: relative; flex: 1; min-width: 0; height: calc(var(--u) * 34); }
.af-rp-spur canvas { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 14); pointer-events: none; }
.af-rp-spur input { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; accent-color: #ff7a1a; }
.af-rp-uhr { flex: none; font-variant-numeric: tabular-nums; min-width: calc(var(--u) * 70); text-align: right; }

/* Akte: Sitzungen */
.af-akte-kopf { margin-bottom: calc(var(--u) * 4); }
.af-akte-kopf .werkzeuge { display: flex; gap: calc(var(--u) * 6); }
.af-sitzungen { display: flex; flex-direction: column; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 10); }
.af-sitzung { display: grid; grid-template-columns: calc(var(--u) * 190) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--kante); color: inherit; text-align: left; }
.af-sitzung:hover { background: rgba(255, 255, 255, .07); }
.af-sz-zeit { display: flex; flex-direction: column; min-width: 0; }
.af-sz-zeit b { font-size: calc(var(--u) * 12); }
.af-sz-zeit small { font-size: calc(var(--u) * 11); color: var(--ter); }
.af-sz-balken { position: relative; height: calc(var(--u) * 8); border-radius: 99px; background: rgba(255, 255, 255, .06); }
.af-sz-balken i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--verlauf, #ff7a1a); opacity: .75; }
.af-sz-balken em { position: absolute; top: calc(var(--u) * -3); width: calc(var(--u) * 3); height: calc(var(--u) * 14); background: var(--rot); border-radius: 2px; }

@media (max-width: 1100px) {
  .af-rp-raster, .af-dialog-raster { grid-template-columns: minmax(0, 1fr); }
  .af-rp-seite { max-height: calc(var(--u) * 200); }
  .af-rp-karte { min-height: calc(var(--u) * 360); }
  .af-medien { max-height: 52vh; }
}