:root {
  --bg: #0b1220;
  --glass: rgba(12, 18, 30, 0.84);
  --glass-2: rgba(22, 30, 46, 0.9);
  --line: rgba(148, 163, 184, 0.18);
  --line-2: rgba(148, 163, 184, 0.32);
  --txt: #e5edf7;
  --muted: #94a3b8;
  --dim: #64748b;
  --accent: #38bdf8;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --tower: #34d399;
  --ground: #fb923c;
  --manager: #fbbf24;
  --role: var(--accent);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --r: 12px;
  --hud-h: 58px;
  --panel-w: 400px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input, select { font-family: inherit; }
.hidden { display: none !important; }
b { font-weight: 700; }

/* ---------- Laden ---------- */
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(ellipse at center, #13213a, #070b14); z-index: 50; }
.load-logo { width: min(460px, 80vw); filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.load-bar { width: min(360px, 70vw); height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
#load-fill { height: 100%; width: 0; background: linear-gradient(90deg, #38bdf8, #fb923c); transition: width .2s; }
.load-txt { color: var(--muted); font-size: 14px; letter-spacing: .06em; }

/* ---------- Menü (Haupt- und Pausenmenü) ---------- */
:root { --mm-cyan: #38d6f5; --mm-amber: #f5a623; --mm-font: 'Chakra Petch', var(--sans); --mm-title: 'Orbitron', 'Chakra Petch', var(--sans); }
#menu { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #05080f; }
.mm-bg { position: absolute; inset: 0; overflow: hidden; }
#menu-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: mm-drift 48s ease-in-out infinite alternate; }
@keyframes mm-drift { from { transform: scale(1.03) translateX(0); } to { transform: scale(1.09) translateX(-1.2%); } }
.mm-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(4,8,15,.94) 0%, rgba(4,8,15,.82) 26%, rgba(4,8,15,.35) 50%, rgba(4,8,15,0) 68%),
  linear-gradient(0deg, rgba(4,8,15,.75) 0%, rgba(4,8,15,0) 30%),
  linear-gradient(180deg, rgba(4,8,15,.45) 0%, rgba(4,8,15,0) 18%); pointer-events: none; }
.mm-corner { position: absolute; left: 0; width: 46px; height: 2px; background: var(--mm-cyan); opacity: .7; z-index: 2; }
.mm-corner.tl { top: 22px; }
.mm-corner.bl { bottom: 22px; }
.mm-left { position: absolute; left: clamp(20px, 4.4vw, 90px); top: 0; bottom: 0; width: min(560px, calc(100vw - 40px)); display: flex; flex-direction: column; justify-content: center; padding: 28px 0; z-index: 3; font-family: var(--mm-font); }
.mm-title { margin: 0; font-family: var(--mm-title); font-weight: 900; line-height: .95; letter-spacing: .08em; display: flex; flex-direction: column; }
.mm-title .t1 { font-size: clamp(46px, 7.4vw, 104px); background: linear-gradient(180deg, #ffffff 0%, #cfd8e3 45%, #8e9aab 58%, #eef2f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.mm-title .t2 { font-size: clamp(40px, 6.4vw, 90px); color: var(--mm-cyan); text-shadow: 0 0 22px rgba(56,214,245,.55), 0 0 60px rgba(56,214,245,.25); margin-top: .08em; }
.mm-title.sm .t1 { font-size: clamp(36px, 4.6vw, 64px); }
.mm-title.sm .t2 { font-size: clamp(30px, 4vw, 56px); }
.mm-tag { display: flex; align-items: center; gap: 14px; margin: 22px 0 26px; color: var(--mm-amber); font-weight: 700; font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .32em; white-space: nowrap; }
.mm-tag i { flex: 1; max-width: 140px; height: 1px; background: linear-gradient(90deg, var(--mm-amber), transparent); }
.mm-list { display: flex; flex-direction: column; border-left: 2px solid rgba(56,214,245,.18); padding-left: 0; }
.mm-list.hidden { display: none; }
.mm-item { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid transparent; color: #eef2f7; padding: 10px 18px 10px 20px; font-family: var(--mm-font); cursor: pointer; transition: background .18s, color .18s; }
.mm-item .n { font-size: 13px; font-weight: 600; color: rgba(203,213,225,.6); letter-spacing: .08em; width: 22px; flex-shrink: 0; font-family: var(--mm-font); }
.mm-item .l { display: flex; flex-direction: column; min-width: 0; }
.mm-item b { font-size: clamp(19px, 2vw, 27px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; transition: color .18s, text-shadow .18s; }
.mm-item small { font-family: var(--sans); font-size: 13px; color: rgba(226,232,240,.75); margin-top: 3px; letter-spacing: 0; text-transform: none; }
.mm-item.on, .mm-item:focus-visible { background: linear-gradient(90deg, rgba(56,214,245,.16), rgba(56,214,245,.04) 70%, transparent); border-top-color: rgba(56,214,245,.25); outline: none; }
.mm-item.on::before, .mm-item:focus-visible::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 3px; background: var(--mm-cyan); box-shadow: 0 0 12px var(--mm-cyan); }
.mm-item.on .n { color: var(--mm-cyan); }
.mm-item.on b { color: #fff; text-shadow: 0 0 18px rgba(56,214,245,.35); }
.mm-item.gold b { color: #fde68a; }
.mm-back { align-self: flex-start; background: none; border: 0; color: var(--mm-cyan); font-family: var(--mm-font); font-weight: 700; letter-spacing: .2em; font-size: 12px; text-transform: uppercase; padding: 4px 20px 10px; cursor: pointer; }
.mm-sub { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(203,213,225,.65); padding: 14px 20px 6px; }
.mm-setup { display: flex; gap: 12px; padding: 0 20px 4px; flex-wrap: wrap; }
.mm-setup label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(203,213,225,.7); }
.mm-setup input, .mm-setup select { background: rgba(8,14,26,.75); color: #fff; border: 1px solid rgba(56,214,245,.3); border-radius: 4px; padding: 9px 11px; font-family: var(--mm-font); font-size: 15px; letter-spacing: .04em; min-width: 150px; }
.mm-setup input { min-width: 230px; }
.mm-setup input:focus, .mm-setup select:focus { outline: none; border-color: var(--mm-cyan); box-shadow: 0 0 0 2px rgba(56,214,245,.2); }
.mm-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: transparent; border: 0; color: #eef2f7; text-align: left; padding: 10px 18px 10px 20px; cursor: pointer; font-family: var(--mm-font); }
.mm-toggle .l { display: flex; flex-direction: column; }
.mm-toggle b { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.mm-toggle small { font-family: var(--sans); font-size: 12px; color: rgba(226,232,240,.65); }
.mm-toggle.on, .mm-toggle:hover { background: rgba(56,214,245,.08); }
.mm-lang { cursor: default; }
.mm-lseg { display: flex; border: 1px solid rgba(56,214,245,.35); border-radius: 4px; overflow: hidden; flex: none; }
.mm-lseg button { background: transparent; border: 0; color: rgba(226,232,240,.7); font-family: var(--mm-font); font-weight: 600; font-size: 13px; letter-spacing: .06em; padding: 6px 12px; cursor: pointer; }
.mm-lseg button + button { border-left: 1px solid rgba(56,214,245,.35); }
.mm-lseg button.on { background: rgba(56,214,245,.18); color: #fff; }
.mm-lseg button:hover:not(.on) { background: rgba(56,214,245,.08); color: #fff; }
.mm-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 30px; padding-left: 20px; }
.mm-link { background: none; border: 0; padding: 0; color: rgba(226,232,240,.8); font-family: var(--mm-font); font-weight: 600; letter-spacing: .18em; font-size: 12px; text-transform: uppercase; cursor: pointer; }
.mm-link:hover { color: var(--mm-cyan); }
.mm-credit { font-size: 11px; letter-spacing: .08em; color: rgba(148,163,184,.75); font-family: var(--sans); }
/* Seitenpanel (Status/Rollen) */
.mm-side { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(380px, 30vw); z-index: 3; font-family: var(--mm-font); }
.mm-side.in .ms-card { animation: ms-in .35s ease-out; }
@keyframes ms-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ms-card { position: relative; background: linear-gradient(180deg, rgba(10,18,32,.92), rgba(6,12,22,.9)); border: 1px solid rgba(56,214,245,.22); border-right: 0; border-radius: 6px 0 0 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; backdrop-filter: blur(8px); }
.ms-card::before { content: ''; position: absolute; left: 0; top: 0; width: 96px; height: 3px; background: var(--mm-cyan); box-shadow: 0 0 12px var(--mm-cyan); }
.ms-body { padding: 22px 24px 20px; }
.ms-h { font-size: 24px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ms-subt { font-family: var(--sans); font-size: 13px; color: rgba(226,232,240,.75); margin: 4px 0 12px; }
.ms-sec { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--mm-cyan); margin: 16px 0 8px; }
.ms-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(56,214,245,.5), transparent); }
.ms-card ul { margin: 0; padding-left: 18px; font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: #dbe4f0; }
.ms-img { height: 170px; background-size: cover; background-position: center 20%; border-bottom: 1px solid rgba(56,214,245,.2); }
.ms-auto { margin-top: 12px; font-family: var(--sans); font-size: 12.5px; color: rgba(203,213,225,.8); }
.ms-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-tile { background: rgba(255,255,255,.04); border-left: 2px solid rgba(56,214,245,.6); padding: 8px 10px; min-width: 0; }
.ms-tile span { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(203,213,225,.7); }
.ms-tile b { display: block; font-size: 17px; color: #fff; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tile b small { display: block; font-size: 11px; color: rgba(203,213,225,.7); font-family: var(--sans); }
.ms-tile.neg b { color: #fca5a5; }
.ms-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ms-row { display: grid; grid-template-columns: 26px 1fr; align-items: center; background: rgba(255,255,255,.035); padding: 6px 8px; }
.ms-row i { font-style: normal; font-size: 16px; grid-row: span 2; }
.ms-row b { font-size: 15px; color: #fff; }
.ms-row small { font-family: var(--sans); font-size: 11px; color: rgba(203,213,225,.7); }
.ms-goal { margin: 6px 0; }
.ms-goal small { display: block; font-family: var(--sans); font-size: 12px; color: #dbe4f0; }
.ms-bar { display: block; height: 4px; background: rgba(255,255,255,.08); margin-top: 4px; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mm-amber), #fde047); }
.ms-foot { margin-top: 14px; font-family: var(--sans); font-size: 11.5px; color: rgba(148,163,184,.9); }
.ms-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ms-trio div { height: 110px; background-size: cover; background-position: center 20%; display: flex; align-items: flex-end; border: 1px solid rgba(56,214,245,.18); }
.ms-trio span { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); padding: 12px 6px 5px; }
.ms-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.ms-dl dt { color: var(--mm-cyan); font-weight: 700; letter-spacing: .08em; }
.ms-dl dd { margin: 0; font-family: var(--sans); color: #dbe4f0; }
.mm-scene { position: absolute; right: clamp(20px, 3vw, 48px); bottom: 26px; z-index: 3; text-align: right; font-family: var(--mm-font); color: rgba(226,232,240,.85); }
.mm-scene small { display: block; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-amber); }
.mm-scene b { display: block; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; margin: 2px 0 6px; }
.mm-scene.in b { animation: ms-in .6s ease-out; }
.mm-scene .dots { display: inline-flex; gap: 5px; }
.mm-scene .dots i { width: 18px; height: 2px; background: rgba(255,255,255,.25); }
.mm-scene .dots i.on { background: var(--mm-cyan); box-shadow: 0 0 8px var(--mm-cyan); }
/* Pausenmenü */
#pause { position: absolute; inset: 0; z-index: 55; font-family: var(--mm-font); animation: pz-in .25s ease-out; }
#pause.hidden { display: none; }
@keyframes pz-in { from { opacity: 0; } to { opacity: 1; } }
.pm-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,8,15,.94) 0%, rgba(4,8,15,.8) 40%, rgba(4,8,15,.62) 100%); backdrop-filter: blur(7px) saturate(.8); }
.pm-left { justify-content: center; }
.pm-paused { display: flex; align-items: center; gap: 4px; color: var(--mm-amber); font-weight: 700; letter-spacing: .34em; font-size: 14px; text-transform: uppercase; margin-bottom: 14px; }
.pm-paused i { width: 5px; height: 16px; background: var(--mm-amber); margin-right: 1px; }
.pm-paused i:nth-child(2) { margin-right: 10px; }
.pm-left .mm-tag { margin: 16px 0 20px; }
.pm-left .mm-item { padding-top: 8px; padding-bottom: 8px; }
.pm-left .mm-item b { font-size: clamp(17px, 1.7vw, 23px); }
.pm-prefs { padding: 2px 0 6px 40px; }
.pm-prefs .mm-toggle { padding: 6px 12px; }
.pm-prefs .mm-toggle b { font-size: 13px; }
.pm-side { width: min(420px, 34vw); }
@media (max-width: 1100px) {
  .mm-side { display: none; }
  .mm-shade { background: linear-gradient(90deg, rgba(4,8,15,.9) 0%, rgba(4,8,15,.7) 60%, rgba(4,8,15,.35) 100%), linear-gradient(0deg, rgba(4,8,15,.8), transparent 40%); }
}
@media (max-width: 760px) {
  .mm-left { justify-content: flex-start; padding: 34px 0 18px; overflow-y: auto; bottom: 0; }
  .mm-tag { letter-spacing: .18em; margin: 14px 0 16px; white-space: normal; }
  .mm-item { padding: 9px 12px 9px 14px; gap: 12px; }
  .mm-scene { display: none; }
  .mm-setup input { min-width: 0; width: 100%; }
  .mm-setup label:first-child { flex: 1 1 100%; }
  .mm-foot { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { #menu-video { animation: none; } .ms-card, .mm-scene b { animation: none !important; } }

/* ---------- Buttons ---------- */
.btn { border: 1px solid var(--line-2); background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: rgba(255,255,255,.12); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #0ea5e9, #0369a1); border-color: #38bdf8; color: white; }
.btn-primary:hover { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.btn-lg { padding: 12px 22px; font-size: 16px; border-radius: 12px; }
.btn-ghost { background: rgba(8,12,22,.6); backdrop-filter: blur(6px); }
.btn-good { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.5); color: #a7f3d0; }
.btn-bad { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.5); color: #fecaca; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { border-color: var(--line-2); background: var(--glass-2); }
.icon-btn.on { border-color: var(--role); box-shadow: inset 0 0 0 1px var(--role); }
.mini { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 6px; font-size: 11px; padding: 2px 7px; color: var(--muted); }
.mini:hover { color: var(--txt); border-color: var(--line-2); }

/* ---------- Spiel ---------- */
#game { position: fixed; inset: 0; }
#game.role-tower { --role: var(--tower); }
#game.role-ground { --role: var(--ground); }
#game.role-manager { --role: var(--manager); }
#map { position: absolute; inset: 0; display: block; touch-action: none; cursor: grab; }
#map.dragging { cursor: grabbing; }
#hud { position: absolute; left: 0; right: 0; top: 0; height: var(--hud-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; background: linear-gradient(180deg, rgba(8,12,22,.94), rgba(8,12,22,.82)); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); z-index: 10; }
.hud-l, .hud-c, .hud-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-logo { height: 30px; }
.hud-name { font-weight: 700; font-size: 14px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.clock { display: flex; flex-direction: column; align-items: center; line-height: 1.05; min-width: 64px; }
.clock span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.clock b { font-family: var(--mono); font-size: 20px; }
.speeds { display: flex; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.speeds button { border: 0; background: transparent; padding: 7px 9px; font-size: 12px; font-weight: 700; color: var(--muted); font-family: var(--mono); }
.speeds button.on { background: var(--role); color: #06121f; }
.speeds button:hover:not(.on) { color: var(--txt); background: rgba(255,255,255,.07); }
.wx, .rwy { font-size: 12px; color: #cbd5e1; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 9px; padding: 5px 9px; white-space: nowrap; }
.rwy b { font-family: var(--mono); color: var(--role); }
.rwy .pend { color: var(--warn); }
.kpi { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.kpi span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.kpi b { font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.kpi b.neg { color: var(--bad); }
.role-btn { border: 1px solid var(--role); background: color-mix(in srgb, var(--role) 16%, transparent); color: var(--txt); border-radius: 10px; padding: 7px 11px; font-weight: 700; font-size: 13px; white-space: nowrap; }

#panel { position: absolute; top: calc(var(--hud-h) + 8px); right: 8px; bottom: 8px; width: var(--panel-w); background: var(--glass); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px); z-index: 8; display: flex; flex-direction: column; overflow: hidden; transition: transform .25s; }
#panel.collapsed { transform: translateX(calc(100% + 12px)); }
#panel-toggle { position: absolute; top: calc(var(--hud-h) + 14px); right: calc(var(--panel-w) + 14px); z-index: 9; transition: right .25s; }
#panel-toggle.collapsed { right: 14px; }
.p-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-title { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.p-title small { font-weight: 500; color: var(--muted); font-size: 12px; }
.p-body { flex: 1; overflow: auto; padding: 8px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.3) transparent; }
.p-sec { margin: 10px 2px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.p-sec .cnt { background: rgba(255,255,255,.07); border-radius: 20px; padding: 1px 8px; color: var(--txt); }
.empty { color: var(--dim); font-size: 13px; padding: 8px 4px; font-style: italic; }
.tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px 8px 0 0; padding: 6px 10px; font-size: 12px; font-weight: 700; border-bottom: 0; }
.tabs button.on { color: var(--txt); background: rgba(255,255,255,.06); border-color: var(--line-2); box-shadow: inset 0 2px 0 var(--role); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 4px; }
/* Schalter: blau, mit weichem Knopf und Leuchten im eingeschalteten Zustand (überall gleich, unabhängig von der Rolle) */
.switch { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(4,8,16,.7); border: 1px solid rgba(148,178,214,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.55); flex-shrink: 0; transition: background .2s, border-color .2s, box-shadow .2s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #e2e8f0, #94a3b8); box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: left .22s cubic-bezier(.3,1.35,.5,1), background .2s; }
.switch.on { background: linear-gradient(90deg, #1d4ed8, #3b82f6 55%, #38bdf8); border-color: rgba(125,190,255,.85); box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 12px rgba(59,130,246,.45); }
.switch.on::after { left: 20px; background: linear-gradient(180deg, #ffffff, #dbeafe); box-shadow: 0 1px 4px rgba(15,23,42,.55), 0 0 0 1px rgba(255,255,255,.35); }
.mm-toggle:hover .switch, .mm-toggle:focus-visible .switch { border-color: rgba(125,190,255,.7); }
.mm-toggle:hover .switch.on { box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 16px rgba(56,189,248,.6); }

/* Markierungen */
.flag-btn { border: 1px solid var(--line-2); background: transparent; color: var(--dim); border-radius: 5px; font-size: 11px; line-height: 1; padding: 2px 4px; margin-right: 6px; vertical-align: 2px; }
.flag-btn:hover { color: var(--txt); border-color: var(--txt); }
.flag-btn.on { background: var(--m); border-color: var(--m); color: #0b1220; }
.mflag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, var(--m) 22%, transparent); border: 1px solid var(--m); color: #f8fafc; font-family: var(--sans); font-size: 10.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.markpop { position: fixed; z-index: 40; width: 236px; background: #101a2c; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.55); font-size: 12.5px; }
.mp-head { margin-bottom: 8px; }
.mp-sw { display: flex; gap: 6px; margin-bottom: 8px; }
.mp-sw button, .i-marks button[data-imark]:not([data-imark=x]) { width: 26px; height: 26px; border-radius: 50%; background: var(--m); border: 2px solid rgba(255,255,255,.2); padding: 0; }
.mp-sw button.cur, .i-marks button.cur { border-color: #fff; box-shadow: 0 0 0 2px var(--m); }
.mp-pre { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mp-pre button { border: 1px solid var(--line-2); background: rgba(255,255,255,.05); border-radius: 6px; font-size: 11px; padding: 3px 6px; }
.mp-pre button.cur, .mp-pre button:hover { border-color: var(--accent); }
.mp-in { display: flex; gap: 6px; }
.mp-in input { flex: 1; min-width: 0; background: rgba(255,255,255,.06); color: var(--txt); border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 7px; font-size: 12px; }
.mp-del { margin-top: 8px; width: 100%; }
.i-marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.i-marks button[data-imark]:not([data-imark=x]) { width: 20px; height: 20px; }
.rs-flag { display: inline-block; width: 8px; height: 10px; background: var(--f); clip-path: polygon(0 0, 100% 30%, 0 60%); margin-left: 2px; }
#radar-mf.on { color: #04121a; background: #fde047; border-color: #fde047; }

/* Tipps */
#hint.hint { margin: 8px 10px 0; padding: 8px 8px 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--role) 10%, transparent); border: 1px solid color-mix(in srgb, var(--role) 45%, transparent); font-size: 12.5px; line-height: 1.4; display: flex; gap: 8px; align-items: flex-start; }
#hint .hint-t { flex: 1; color: #e2e8f0; }
#hint .mini { flex-shrink: 0; }

/* Flugstreifen */
.strip { position: relative; display: grid; grid-template-columns: 6px 1fr; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; overflow: hidden; transition: border-color .15s, background .15s; }
.strip:hover { border-color: var(--line-2); }
.strip.sel { border-color: var(--accent); background: rgba(56,189,248,.08); }
.strip.req { border-color: rgba(251,191,36,.7); }
.strip.req .s-bar { animation: pulse 1.1s infinite; }
.strip.emg { border-color: #f43f5e; background: rgba(244,63,94,.1); }
.strip.conf { border-color: #ef4444; }
.s-bar { background: #64748b; }
.strip.arr .s-bar { background: #34d399; }
.strip.dep .s-bar { background: #60a5fa; }
.strip.gnd .s-bar { background: #fbbf24; }
.s-main { padding: 7px 9px 8px; min-width: 0; }
.s-info { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: baseline; }
.s-cs { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.s-cs small { font-family: var(--sans); font-weight: 500; font-size: 11px; color: var(--muted); margin-left: 5px; }
.s-alt { font-family: var(--mono); font-size: 13px; text-align: right; color: #cbd5e1; }
.s-sub { font-size: 12px; color: var(--muted); grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-state { font-size: 12px; grid-column: 1 / -1; color: #e2e8f0; }
.s-state .rq { color: var(--warn); font-weight: 700; }
.s-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.s-btns:empty { display: none; }
.cmd { border: 1px solid var(--line-2); background: rgba(255,255,255,.06); border-radius: 7px; padding: 5px 8px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.cmd:hover { background: rgba(255,255,255,.14); }
.cmd kbd { font-family: var(--mono); font-size: 10px; background: rgba(0,0,0,.35); border-radius: 4px; padding: 0 4px; color: var(--muted); }
.cmd.big { background: color-mix(in srgb, var(--role) 22%, transparent); border-color: color-mix(in srgb, var(--role) 70%, transparent); }
.cmd.big:hover { background: color-mix(in srgb, var(--role) 38%, transparent); }
.cmd.danger { background: rgba(244,63,94,.14); border-color: rgba(244,63,94,.6); }
.cmd.spd { font-family: var(--mono); font-weight: 600; padding: 4px 6px; }
.cmd.spd.on { border-color: var(--accent); color: var(--accent); }
.seq-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); margin: -2px 2px 4px; }
.seq-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.strip.seqs { grid-template-columns: 6px 34px 1fr 26px; cursor: grab; }
.strip.seqs.dragging { opacity: .45; }
.strip.seqs.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.strip.seqs.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.strip.seqs.k-land .s-bar { background: #fb923c; }
.strip.seqs.k-landclr .s-bar { background: #fed7aa; }
.strip.seqs.k-dep .s-bar { background: #38bdf8; }
.strip.seqs.k-depclr .s-bar { background: #bae6fd; }
.strip.seqs.k-depclr { border-color: rgba(186,230,253,.55); }
.s-num { display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; }
.s-num span { min-width: 24px; height: 24px; border-radius: 7px; color: #06121f; font-family: var(--mono); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.s-ctl { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 6px 0; }
.s-ctl .mini { padding: 1px 5px; font-size: 10px; }
.s-ctl .grip { color: var(--dim); font-size: 14px; line-height: 1; cursor: grab; user-select: none; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.rwy-box { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.rwy-box .state { font-weight: 700; }
.rwy-box .free { color: var(--good); }
.rwy-box .busy { color: var(--warn); }

/* Vorfeld */
.stand-row { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; margin: 6px 0; }
.stand-row.sel { border-color: var(--accent); }
.stand-row.late { border-color: rgba(248,113,113,.6); }
.sr-head { display: flex; align-items: center; gap: 8px; }
.sr-id { font-family: var(--mono); font-weight: 800; font-size: 13px; background: rgba(255,255,255,.08); border-radius: 6px; padding: 2px 6px; min-width: 34px; text-align: center; }
.sr-kind { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sr-ac { font-family: var(--mono); font-weight: 700; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-ac small { font-family: var(--sans); font-weight: 500; color: var(--muted); font-size: 11px; }
.sr-std { font-family: var(--mono); font-size: 12px; }
.sr-std.late { color: var(--bad); }
.sr-std.tight { color: var(--warn); }
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; margin-top: 7px; }
.task { position: relative; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.03); font-size: 11px; padding: 4px 4px 5px; text-align: center; overflow: hidden; line-height: 1.15; }
.task .ti { font-size: 14px; display: block; }
.task .tl { font-weight: 600; }
.task .pb { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--good); }
.task.wait { opacity: .45; }
.task.ready { border-color: var(--warn); background: rgba(251,191,36,.12); cursor: pointer; animation: glowy 1.4s infinite; }
.task.ready.auto { animation: none; cursor: default; }
.task.ready:hover { background: rgba(251,191,36,.25); }
.task.assigned { border-color: rgba(96,165,250,.7); background: rgba(96,165,250,.12); }
.task.active { border-color: rgba(52,211,153,.6); }
.task.done { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.35); color: #a7f3d0; }
@keyframes glowy { 0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.0) } 50% { box-shadow: 0 0 0 2px rgba(251,191,36,.35) } }
.inb-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; margin: 5px 0; font-size: 13px; }
.inb-row.need { border-color: rgba(251,191,36,.6); }
.inb-row select { background: rgba(255,255,255,.06); color: var(--txt); border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 6px; font-size: 12px; }
.inb-row .cs { font-family: var(--mono); font-weight: 700; }
.inb-e { margin-left: auto; }
.inb-row .eta { color: var(--muted); font-size: 12px; margin-left: auto; font-family: var(--mono); }
.fleet { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fleet-item { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 3px; align-items: center; }
.fleet-item .fn { font-weight: 700; }
.fleet-item .fc { font-family: var(--mono); color: var(--muted); }
.dots { display: flex; gap: 3px; grid-column: 1 / -1; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 3px; background: var(--good); }
.dot.busy { background: #60a5fa; }
.dot.broken { background: var(--bad); }

/* Manager */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kpis .k { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; }
.kpis .k span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpis .k b { font-family: var(--mono); font-size: 15px; }
.kpis .k b.pos { color: var(--good); }
.kpis .k b.neg { color: var(--bad); }
.card { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin: 6px 0; font-size: 13px; }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .t { font-weight: 700; }
.card .s { color: var(--muted); font-size: 12px; margin-top: 2px; }
.card .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.card.offer { border-color: rgba(251,191,36,.45); }
.al-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 5px; }
.bar i { display: block; height: 100%; background: var(--good); }
.fee-row { margin: 10px 2px 14px; }
.fee-row .row { display: flex; justify-content: space-between; font-size: 13px; }
.fee-row input[type=range] { width: 100%; accent-color: var(--manager); }
.fee-row .hint { font-size: 11px; color: var(--muted); }
.ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
.ledger td { padding: 3px 4px; border-bottom: 1px solid rgba(148,163,184,.08); }
.ledger td:last-child { text-align: right; font-family: var(--mono); }
.ledger tr.sum td { font-weight: 700; border-top: 1px solid var(--line-2); }
.chart { width: 100%; height: 150px; display: block; }
.legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin: 4px 2px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.up-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.lvl { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.lvl i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.15); }
.lvl i.on { background: var(--manager); }

/* Radar */
#radar-wrap { position: absolute; left: 8px; bottom: 8px; width: 400px; background: rgba(3,12,9,.92); border: 1px solid rgba(52,211,153,.35); border-radius: 14px; z-index: 7; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#radar-wrap.big { width: min(78vh, calc(100vw - var(--panel-w) - 40px)); }
.radar-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 12px; color: #a7f3d0; font-weight: 700; border-bottom: 1px solid rgba(52,211,153,.2); }
.radar-head small { color: #6ee7b7; font-weight: 500; font-family: var(--mono); }
.radar-btns { display: flex; gap: 5px; }
#radar { display: block; cursor: crosshair; }
.radar-seq { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 8px; border-bottom: 1px solid rgba(52,211,153,.2); min-height: 28px; align-items: center; }
.rs-chip { border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); color: #e6fff5; border-radius: 6px; font-family: var(--mono); font-size: 11px; padding: 1px 6px 1px 1px; display: inline-flex; align-items: center; gap: 5px; }
.rs-chip b { background: var(--c); color: #04121a; border-radius: 4px; padding: 0 5px; font-weight: 800; }
.rs-chip small { color: #9fe7cf; font-size: 10px; }
.rs-empty { color: #5fae90; font-size: 11px; font-style: italic; }

/* Log */
#log-wrap { position: absolute; left: 8px; top: calc(var(--hud-h) + 8px); width: 380px; max-height: 230px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); z-index: 7; display: flex; flex-direction: column; overflow: hidden; }
#log-wrap.min #log { display: none; }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #cbd5e1; border-bottom: 1px solid var(--line); }
#log { overflow: auto; padding: 5px 9px 8px; font-size: 12px; line-height: 1.4; scrollbar-width: thin; }
.lg { padding: 1px 0; color: #cbd5e1; }
.lg .t { font-family: var(--mono); color: var(--dim); margin-right: 6px; font-size: 11px; }
.lg.atc { color: #6ee7b7; }
.lg.pilot { color: #e2e8f0; }
.lg.pilot .fr { color: #93c5fd; font-family: var(--mono); font-weight: 700; margin-right: 4px; }
.lg.atc .fr { color: #34d399; font-family: var(--mono); font-weight: 700; margin-right: 4px; }
.lg .fr { margin-right: 5px; font-family: var(--mono); font-weight: 700; }
.lg.sys { color: #fcd34d; }
.lg.gnd { color: #fdba74; }
.lg.mgr { color: #fde68a; }

/* Karte Steuerung */
#map-ctrls { position: absolute; right: calc(var(--panel-w) + 16px); bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 7; transition: right .25s; }
#map-ctrls.full { right: 12px; }

/* Info-Karte */
#info { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-width: 300px; max-width: min(560px, calc(100vw - var(--panel-w) - 420px)); background: var(--glass-2); border: 1px solid var(--line-2); border-radius: 14px; backdrop-filter: blur(12px); z-index: 7; padding: 10px 12px; font-size: 13px; display: none; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
#info.show { display: block; }
.i-head { display: flex; align-items: center; gap: 10px; }
.i-cs { font-family: var(--mono); font-weight: 800; font-size: 18px; }
.i-sub { color: var(--muted); font-size: 12px; }
.i-close { margin-left: auto; }
.i-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 14px; margin-top: 8px; font-size: 12px; }
.i-grid span { color: var(--muted); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.i-grid b { font-family: var(--mono); font-size: 13px; }
.i-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* Toasts */
#toasts { position: absolute; top: calc(var(--hud-h) + 10px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 20; pointer-events: none; width: min(520px, 90vw); }
.toast { background: var(--glass-2); border: 1px solid var(--line-2); border-left: 4px solid var(--accent); border-radius: 10px; padding: 8px 12px; font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: tin .25s ease-out; max-width: 100%; }
.toast.good { border-left-color: var(--good); }
.toast.warn { border-left-color: var(--warn); }
.toast.bad { border-left-color: var(--bad); }
.toast.out { opacity: 0; transform: translateY(-6px); transition: all .4s; }
@keyframes tin { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
#tooltip { position: absolute; pointer-events: none; background: rgba(8,12,22,.92); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; font-size: 12px; z-index: 30; display: none; white-space: nowrap; }

/* Modal */
#modal { position: fixed; inset: 0; background: rgba(2,6,14,.62); backdrop-filter: blur(4px); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: #0f1729; border: 1px solid var(--line-2); border-radius: 16px; width: min(720px, 100%); max-height: 88vh; overflow: auto; padding: 18px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal-box h2 { margin: 0 0 10px; font-size: 20px; }
.modal-box h3 { margin: 16px 0 6px; font-size: 15px; color: var(--accent); }
.modal-box p, .modal-box li { font-size: 14px; line-height: 1.5; color: #cbd5e1; }
.modal-box kbd { font-family: var(--mono); background: rgba(255,255,255,.1); border-radius: 4px; padding: 0 5px; font-size: 12px; }
.modal-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.role-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.role-pick button { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255,255,255,.04); padding: 8px; }
.role-pick button:hover { border-color: var(--accent); }
.role-pick button.cur { border-color: var(--good); }
.role-pick img { width: 56px; height: 56px; object-fit: cover; object-position: top; border-radius: 9px; }
.role-pick .rp-t { font-weight: 800; }
.role-pick .rp-d { font-size: 12px; color: var(--muted); }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.report-grid div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.report-grid span { display: block; font-size: 11px; color: var(--muted); }
.report-grid b { font-family: var(--mono); font-size: 16px; }

/* ---------- Responsiv ---------- */
@media (max-width: 1280px) {
  :root { --panel-w: 360px; }
  #log-wrap { width: 320px; max-height: 180px; }
  #radar-wrap { width: 300px; }
  .hud-name { display: none; }
}
@media (max-width: 1000px) {
  .hide-sm { display: none !important; }
  .wx { display: none; }
  #info { max-width: calc(100vw - 24px); left: 12px; right: 12px; transform: none; bottom: 12px; }
}
@media (max-width: 760px) {
  :root { --hud-h: 96px; --panel-w: 100vw; }
  #hud { flex-wrap: wrap; height: auto; min-height: var(--hud-h); padding: 6px 8px; gap: 6px; }
  .hud-logo { height: 22px; }
  .hud-c { order: 3; width: 100%; justify-content: space-between; }
  .kpi b { font-size: 13px; }
  #panel { top: auto; left: 6px; right: 6px; width: auto; height: 46vh; bottom: 6px; }
  #panel.collapsed { transform: translateY(calc(100% + 12px)); }
  #panel-toggle { top: auto; bottom: calc(46vh + 12px); right: 10px; }
  #panel-toggle.collapsed { bottom: 12px; right: 10px; }
  #log-wrap { width: calc(100vw - 16px); max-height: 120px; }
  #radar-wrap, #radar-wrap.big { width: min(92vw, 360px); bottom: calc(46vh + 12px); }
  #map-ctrls { right: 10px; bottom: calc(46vh + 60px); }
  #map-ctrls.full { bottom: 60px; }
  .speeds button { padding: 6px 7px; }
  .rwy { font-size: 11px; }
}

/* Baustellen */
.card.site { border-color: rgba(251,191,36,.45); background: linear-gradient(135deg, rgba(251,191,36,.07), rgba(255,255,255,.03)); }
.card.site .rem { font-family: var(--mono); font-size: 12px; color: #fde68a; white-space: nowrap; }
.pbar { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 0 2px; }
.pbar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, #f59e0b 0 8px, #fbbf24 8px 16px); background-size: 22.6px 22.6px; animation: pbar-move 1.2s linear infinite; border-radius: 7px; transition: width .4s; }
.pbar.wait i { background: #64748b; animation: none; }
.pbar span { position: relative; display: block; text-align: center; font: 700 10px/14px var(--mono); color: #111827; text-shadow: 0 0 3px rgba(255,255,255,.6); }
@keyframes pbar-move { to { background-position: 22.6px 0; } }
@media (prefers-reduced-motion: reduce) { .pbar i { animation: none; } }
.p-inline { font-family: var(--mono); font-size: 11px; color: #fde68a; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45); border-radius: 6px; padding: 2px 7px; cursor: pointer; white-space: nowrap; }
.p-inline:hover { background: rgba(251,191,36,.22); }
.mini.warn { color: #fecaca; border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.14); }
.lvl i.bld { background: repeating-linear-gradient(-45deg, #f59e0b 0 2px, #1f2937 2px 4px); }
.i-site { margin-top: 8px; padding: 7px 8px; border: 1px solid rgba(251,191,36,.45); border-radius: 8px; background: rgba(251,191,36,.07); font-size: 12px; font-weight: 700; color: #fde68a; }
.i-site small { display: block; font-weight: 500; color: var(--muted); margin: 2px 0 6px; }

/* Glossar-Tooltips */
abbr.gl { text-decoration: underline dotted rgba(148,163,184,.55); text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: help; }
abbr.gl:hover { text-decoration-color: var(--txt); }
body.no-glossary abbr.gl { text-decoration: none; cursor: inherit; }
#gltip { position: fixed; z-index: 90; max-width: min(340px, calc(100vw - 16px)); background: rgba(8,12,22,.97); border: 1px solid rgba(148,163,184,.4); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--txt); box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; left: -999px; top: -999px; }
#gltip.show { opacity: 1; transform: none; }
#gltip b { color: #fde68a; }
#gltip .gl-d { color: #cbd5e1; margin-top: 3px; }
.qm { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(148,163,184,.5); background: rgba(255,255,255,.04); color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1; padding: 0; margin-left: 6px; vertical-align: 1px; cursor: help; flex-shrink: 0; }
.qm:hover { color: var(--txt); border-color: var(--txt); }
.explainpop { position: fixed; z-index: 85; width: min(330px, calc(100vw - 16px)); background: rgba(12,18,30,.98); border: 1px solid rgba(148,163,184,.45); border-radius: 12px; padding: 12px 34px 12px 13px; font-size: 13px; line-height: 1.5; color: #dbe4f0; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.explainpop.hidden { display: none; }
.explainpop b { color: #fde68a; }
.explainpop .ep-x { position: absolute; right: 8px; top: 8px; }
.gloss { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; margin: 4px 0 12px; font-size: 13px; }
.gloss dt { font-family: var(--mono); font-weight: 700; color: #fde68a; white-space: nowrap; }
.gloss dd { margin: 0; color: #cbd5e1; }
.help-tabs { display: flex; gap: 6px; margin: 2px 0 10px; flex-wrap: wrap; }
.help-tabs button { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); border-radius: 8px; padding: 5px 11px; font-weight: 700; }
.help-tabs button.on { color: var(--txt); border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.12); }
.gl-search { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--txt); font-size: 14px; margin-bottom: 8px; }
.help-scroll { max-height: min(62vh, 560px); overflow: auto; padding-right: 4px; }

/* Rang & Ziele */
.rank-btn { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.08); color: var(--txt); border-radius: 10px; padding: 4px 9px 4px 6px; font-size: 12px; max-width: 190px; }
.rank-btn:hover { background: rgba(251,191,36,.16); }
.rank-btn .rk-i { font-size: 16px; }
.rank-btn .rk-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rank-btn .rk-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.rank-btn .rk-t i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #fbbf24 var(--p), rgba(255,255,255,.12) var(--p)); }
.rank-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.rank-steps span { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.rank-steps span.on { color: #fde68a; border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.1); }
.card.goal .rem { font-family: var(--mono); font-size: 12px; color: #fde68a; }
@media (max-width: 900px) { .rank-btn .rk-t { display: none; } .rank-btn { padding: 4px 6px; } }

/* Tower: Treibstoff, A-CDM, Pistenzustand */
.fuelc { font-family: var(--mono); font-size: 11px; color: #a7f3d0; background: rgba(52,211,153,.1); border-radius: 5px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }
.fuelc.warn { color: #fde68a; background: rgba(251,191,36,.16); }
.fuelc.bad { color: #fecaca; background: rgba(248,113,113,.22); animation: blinkbg 1s steps(2) infinite; }
@keyframes blinkbg { 50% { background: rgba(248,113,113,.45); } }
.s-acdm { grid-column: 1 / -1; font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.s-acdm .acdm { font-family: var(--mono); color: #cbd5e1; background: rgba(255,255,255,.06); border-radius: 5px; padding: 0 5px; }
.s-acdm .acdm.late { color: #fde68a; background: rgba(251,191,36,.14); }
.s-acdm .slot { font-family: var(--mono); border-radius: 5px; padding: 0 5px; }
.slot.wait { color: #bfdbfe; background: rgba(59,130,246,.18); }
.slot.ok { color: #bbf7d0; background: rgba(34,197,94,.16); }
.slot.soon { color: #fde68a; background: rgba(251,191,36,.2); }
.slot.late { color: #fecaca; background: rgba(248,113,113,.22); }
.rwy-cond { font-size: 12px; color: var(--muted); }
.rwy-cond b { color: var(--txt); }
.rwy-cond .ba-good { color: var(--good); }
.rwy-cond .ba-medium { color: var(--warn); }
.rwy-cond .ba-poor { color: var(--bad); }
.rwy-closed { color: #fecaca; font-weight: 700; background: rgba(248,113,113,.14); border-radius: 6px; padding: 3px 6px; }
.trucks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.truck { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; font-size: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; cursor: pointer; }
.truck small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.truck .tl { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.truck .tl i { display: block; height: 100%; background: #ef4444; }
.stand-row .s-acdm { margin: 3px 0 0 0; }
.sr-head { flex-wrap: wrap; }
.sr-head .s-acdm { flex-basis: 100%; }
.ba-good { color: var(--good); }
.ba-medium { color: var(--warn); }
.ba-poor { color: var(--bad); }
.kpis2 { margin-top: 6px; }
.kpis2 .k b { font-size: 13px; }
.goalcard .s { margin-top: 6px; }
.i-slot { font-size: 12px; color: var(--muted); margin-top: 6px; }
.i-slot .slot { font-family: var(--mono); border-radius: 5px; padding: 1px 6px; }
.radar-legend { position: absolute; left: 8px; right: 8px; bottom: 8px; top: 60px; overflow: auto; background: rgba(4,12,10,.94); border: 1px solid rgba(52,211,153,.35); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #d1fae5; z-index: 3; }
.radar-legend.hidden { display: none; }
.radar-legend h4 { margin: 6px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6ee7b7; }
.radar-legend ul { margin: 0; padding-left: 16px; }
.radar-legend li { margin: 2px 0; }
.rl-block { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; align-items: baseline; }
.rl-block code { color: #34d399; font-family: var(--mono); }
.rl-x { position: sticky; float: right; top: 0; }
.ms-tile.rank b { white-space: normal; font-size: 14px; line-height: 1.2; }
#loading { background: radial-gradient(ellipse at 30% 40%, #0d1a2e 0%, #05080f 70%) !important; }
.load-title { align-items: center; }
.load-title .t1 { font-size: clamp(40px, 7vw, 86px); }
.load-title .t2 { font-size: clamp(34px, 6vw, 74px); }
#loading .load-bar { background: rgba(56,214,245,.12); border-radius: 0; height: 3px; }
#loading #load-fill { background: var(--mm-cyan); box-shadow: 0 0 12px var(--mm-cyan); }
#loading .load-txt { font-family: var(--mm-font); letter-spacing: .3em; text-transform: uppercase; color: var(--mm-amber); font-size: 12px; }

/* ---------- Management-Zentrale (Vollbild) ---------- */
#mgmt { position: absolute; inset: 0; z-index: 54; display: grid; grid-template-columns: minmax(300px, 360px) 1fr; font-family: var(--mm-font); animation: pz-in .2s ease-out; }
#mgmt.hidden { display: none; }
.mg-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,8,15,.96) 0%, rgba(4,8,15,.9) 28%, rgba(6,11,20,.84) 100%); backdrop-filter: blur(6px) saturate(.85); }
.mg-nav { position: relative; display: flex; flex-direction: column; padding: 26px 0 18px 26px; min-height: 0; overflow-y: auto; border-right: 1px solid rgba(56,214,245,.14); }
.mg-label { color: var(--mm-amber); font-weight: 700; letter-spacing: .3em; font-size: 12px; text-transform: uppercase; }
.mg-name { font-family: var(--mm-title); font-weight: 900; font-size: 26px; letter-spacing: .06em; color: #fff; margin-top: 8px; line-height: 1.1; }
.mg-time { font-family: var(--sans); font-size: 12.5px; color: rgba(203,213,225,.8); margin: 6px 0 16px; }
.mg-nav .mm-item { padding: 8px 14px 8px 16px; gap: 14px; }
.mg-nav .mm-item b { font-size: 16px; letter-spacing: .08em; }
.mg-nav .mm-item small { font-size: 11.5px; }
.mg-nav .mm-item.attn small { color: #fde68a; }
.mg-foot { margin-top: auto; padding: 16px 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.mg-foot .mm-toggle { padding: 6px 4px; }
.mg-foot .mm-toggle b { font-size: 12px; }
.mg-foot .mm-toggle small { font-size: 11px; }
.mg-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 30px 10px; }
.mg-kick { color: var(--mm-cyan); font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.mg-head h2 { margin: 4px 0 2px; font-size: 30px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.mg-head p { margin: 0; font-family: var(--sans); color: rgba(203,213,225,.8); font-size: 13.5px; }
/* Scrollen und Spalten getrennt: .mg-body scrollt, darin trägt .mg-flow die Spalten mit natürlicher Höhe (ein
   Spaltencontainer mit fester Höhe schiebt Inhalt sonst je nach Browser in unsichtbare Spalten nach rechts) */
.mg-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 30px 30px; font-family: var(--sans); }
.mg-flow { column-width: 380px; column-gap: 22px; }
.mg-flow > * { break-inside: avoid; }
.mg-flow > .p-sec, .rm-wrap > .p-sec { column-span: all; margin-top: 18px; font-size: 12px; color: var(--mm-cyan); font-family: var(--mm-font); font-weight: 700; letter-spacing: .2em; }
.mg-flow > .p-sec:first-child, .mg-flow > .rm-wrap:first-child > .p-sec { margin-top: 4px; }
.mg-flow > .kpis { column-span: all; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mg-flow > .kpis .k b { font-size: 18px; }
.mg-flow > .chart, .mg-flow > svg.chart { column-span: all; max-width: 900px; }
.mg-flow > .legend, .mg-flow > .ledger, .mg-flow > table { column-span: none; }
.mg-body .card { margin: 0 0 12px; background: rgba(12,20,34,.72); border-color: rgba(148,163,184,.2); }
.mg-body .card.bigcard { column-span: all; border-color: rgba(56,214,245,.35); background: linear-gradient(135deg, rgba(56,214,245,.1), rgba(12,20,34,.75)); }
.mg-body .card.bigcard .t { font-size: 16px; }
.mg-body .empty { column-span: all; }
.mg-body .fee-row { background: rgba(12,20,34,.6); border: 1px solid rgba(148,163,184,.16); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.mg-body .toggle-row { break-inside: avoid; }
/* Kompakter Leitstand */
#game.role-manager, #game.role-observer { --panel-w: 300px; }
#panel.dock .dock-body { padding-top: 6px; }
.dock-open { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 4px 0 10px; border-radius: 10px; border: 1px solid rgba(56,214,245,.5); background: linear-gradient(90deg, rgba(56,214,245,.2), rgba(56,214,245,.05)); color: #fff; font-family: var(--mm-font); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.dock-open b { flex: 1; }
.dock-open:hover { background: linear-gradient(90deg, rgba(56,214,245,.32), rgba(56,214,245,.08)); }
.dock-open kbd { font-family: var(--mono); font-size: 11px; background: rgba(255,255,255,.12); border-radius: 4px; padding: 1px 6px; }
.dock-kpis { grid-template-columns: repeat(2, 1fr) !important; }
.dock-kpis .k.link { cursor: pointer; }
.dock-kpis .k.link:hover { border-color: rgba(56,214,245,.5); }
.dock-kpis .k b { font-size: 13.5px; }
.dock-todo { width: 100%; display: grid; grid-template-columns: 22px 1fr 10px; align-items: center; gap: 6px; text-align: left; padding: 8px 9px; margin: 4px 0; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: #e2e8f0; font-size: 12.5px; }
.dock-todo i { font-style: normal; color: var(--muted); }
.dock-todo.warn { border-color: rgba(251,191,36,.5); }
.dock-todo.bad { border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.08); }
.dock-todo.good { border-color: rgba(52,211,153,.4); }
.dock-todo:hover { background: rgba(255,255,255,.08); }
.dock-site { padding: 6px 8px; margin: 4px 0; border-radius: 8px; background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.3); cursor: pointer; font-size: 12px; }
.dock-site .row { display: flex; justify-content: space-between; gap: 6px; }
.dock-site small { font-family: var(--mono); color: #fde68a; white-space: nowrap; }
.dock-rank { font-size: 12.5px; font-weight: 700; color: #fde68a; margin: 4px 0; cursor: pointer; }
.dock-goal { margin: 5px 0; }
.dock-goal small { font-size: 11.5px; color: #cbd5e1; }
@media (max-width: 900px) {
  #mgmt { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .mg-nav { max-height: 34vh; padding: 14px 10px 8px 14px; border-right: 0; border-bottom: 1px solid rgba(56,214,245,.18); }
  .mg-nav .mm-list { flex-direction: row; overflow-x: auto; border-left: 0; }
  .mg-nav .mm-item { flex: 0 0 auto; width: auto; }
  .mg-nav .mm-item small, .mg-name, .mg-foot .mm-toggle small { display: none; }
  .mg-head { padding: 12px 14px 4px; }
  .mg-head h2 { font-size: 20px; }
  .mg-body { padding: 4px 14px 20px; }
  .mg-flow { column-width: auto; columns: 1; }
}
.rwy-line { font-size: 12.5px; }
.rwy-line .rwy-id { font-family: var(--mono); background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 5px; margin-right: 4px; }

/* ---------- Tower: Radar + Funk rechts in einem Fenster, Flugstreifen-Leiste unten ---------- */
#game.tw-layout { --panel-w: 420px; --rail-h: 228px; }
#game.tw-layout.rail-min { --rail-h: 40px; }
#panel.tw-side .p-head { padding: 9px 12px 8px; }
.tw-radar-slot #radar-wrap { position: relative; left: auto; bottom: auto; width: 100%; border: 0; border-bottom: 1px solid rgba(52,211,153,.25); border-radius: 0; box-shadow: none; z-index: auto; }
.tw-rwy { margin: 8px 10px 0; font-size: 12px; padding: 6px 9px; gap: 4px 8px; }
.tw-rwy .cmd { padding: 3px 7px; font-size: 11px; }
.tw-rwy.closed { display: none; }
.tw-mm-slot { flex: 0 0 auto; margin: 8px 10px 0; }
.tw-mm-slot:empty, .tw-mm-slot:has(> .minimap.hidden) { display: none; }
.tw-mm-slot #minimap { --mm-max-h: inherit; }
.tw-mm-slot .mmap-leg { display: none; }
.tw-log-slot { min-height: 110px; }
.tw-mm-slot .minimap { box-shadow: none; background: rgba(4, 9, 16, 0.55); border: 1px solid var(--line); padding: 7px 9px 7px; }
.tw-mm-slot .minimap::before { display: none; }
.tw-log-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
.tw-log-slot #log-wrap { position: static; width: auto; max-height: none; flex: 1; min-height: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; backdrop-filter: none; }
.tw-log-slot #log-wrap.min { flex: 0 0 auto; }
#game.tw-layout #radar-wrap.big { top: calc(var(--hud-h) + 8px); bottom: auto; left: 8px; width: min(calc(100vh - var(--hud-h) - var(--rail-h) - 40px), calc(100vw - var(--panel-w) - 40px)); z-index: 12; }
#game.tw-layout #info { bottom: calc(var(--rail-h) + 16px); max-width: min(520px, calc(100vw - var(--panel-w) - 120px)); }
#game.tw-layout #map-ctrls { bottom: calc(var(--rail-h) + 16px); }
#rail { position: absolute; left: 8px; right: calc(var(--panel-w) + 16px); bottom: 8px; height: var(--rail-h); background: var(--glass); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px); z-index: 8; display: flex; flex-direction: column; overflow: hidden; transition: right .25s, height .2s; }
#panel.collapsed ~ #rail { right: 8px; }
#rail.min .rail-bays { display: none; }
.rail-head { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.rail-title { font-weight: 800; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.seg button { padding: 3px 9px; font-size: 11.5px; font-weight: 700; color: var(--muted); background: transparent; border: 0; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: color-mix(in srgb, var(--role) 32%, transparent); color: #fff; }
.rl-tg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #cbd5e1; white-space: nowrap; background: none; border: 0; padding: 0; flex-shrink: 0; }
.rl-tg .switch { width: 32px; height: 18px; }
.rl-tg .switch::after { width: 12px; height: 12px; }
.rl-tg .switch.on::after { left: 16px; }
.rl-legend { display: inline-flex; gap: 8px; font-size: 10.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.rl-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; }
.rl-auto { color: var(--dim); white-space: nowrap; }
#rl-sort .mini { white-space: nowrap; color: #fde68a; border-color: rgba(251,191,36,.5); }
.rl-legend .lg-arr { background: #fb923c; }
.rl-legend .lg-dep { background: #38bdf8; }
.rl-legend .lg-tick, .rl-legend .lg-due { width: auto; height: auto; font: 800 9px/1 var(--mono); padding: 1px 3px; font-style: normal; border-radius: 3px; vertical-align: 1px; }
.rl-legend .lg-tick { background: rgba(52,211,153,.2); color: #6ee7b7; }
.rl-legend .lg-due { background: rgba(251,191,36,.25); color: #fde68a; }
/* Streifentafel: Buchten nebeneinander, Streifen untereinander (oben = als Nächstes) */
.rail-bays { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr; transition: grid-template-columns .25s ease; }
.bay { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
.bay:last-child { border-right: 0; }
.bay-h { display: flex; align-items: center; gap: 6px; padding: 5px 8px 1px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; }
.bay-h .cnt { background: rgba(255,255,255,.07); border-radius: 20px; padding: 0 7px; color: var(--txt); text-transform: none; letter-spacing: 0; font-family: var(--mono); }
.bay-h .cnt.warn { background: rgba(251,191,36,.2); color: #fde68a; }
.bay-h small { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bay-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overflow-x: hidden; padding: 4px 6px 7px; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.3) transparent; container-type: inline-size; border-radius: 8px; transition: background .15s; }
.bay-list.drop-into { background: rgba(56,189,248,.08); box-shadow: inset 0 0 0 1px rgba(56,189,248,.5); }
.bay-list .empty { margin: auto 0; text-align: center; font-size: 11px; color: var(--dim); padding: 6px 4px; }
.fsep { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); padding: 3px 2px 0; border-top: 1px dashed var(--line-2); white-space: nowrap; overflow: hidden; }
.fsep:first-child { border-top: 0; padding-top: 0; }
.fsep b { color: var(--muted); font-family: var(--mono); }
/* Ein Kontrollstreifen: Farbkante | Nummer | Rufzeichen/Muster | Strecke/Lage | Piste/Zeit | Freigabe-Kästchen */
.fcard { flex: 0 0 auto; display: grid; grid-template-columns: 4px 22px minmax(88px, 1.05fr) minmax(0, 1.5fr) auto auto; grid-template-areas: "bar num cs mid rt tk" "bar act act act cmd cmd" "bar ext ext ext ext ext" "bar btns btns btns btns btns"; column-gap: 6px; align-items: center; padding-right: 5px; min-height: 36px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color .15s, background .15s; }
.fcard.k-arr { background: linear-gradient(90deg, rgba(251,146,60,.13), rgba(251,146,60,.04) 60%); }
.fcard.k-dep { background: linear-gradient(90deg, rgba(56,189,248,.13), rgba(56,189,248,.04) 60%); }
.fcard:hover { border-color: var(--line-2); }
.fcard[draggable=true] { cursor: grab; }
.fcard.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(56,189,248,.35); cursor: default; }
.fcard.req { border-color: rgba(251,191,36,.75); }
.fcard.req .c-bar { animation: pulse 1.1s infinite; }
.fcard.emg { border-color: #f43f5e; background: rgba(244,63,94,.12); }
/* aktiver Funkkontakt: Streifen leuchtet türkis, spricht er gerade, pulsiert er */
.fcard.talking { border-color: #67e8f9; box-shadow: 0 0 0 1px rgba(103,232,249,.6), 0 0 14px rgba(103,232,249,.22); }
.fcard.talking .fs-cs .fs-l1::after { content: ' 🔊'; font-size: .82em; }
.fcard.talking.live { animation: talkGlow 1s ease-in-out infinite; }
@keyframes talkGlow { 50% { box-shadow: 0 0 0 2px rgba(103,232,249,.95), 0 0 20px rgba(103,232,249,.45); } }
@media (prefers-reduced-motion: reduce) { .fcard.talking.live { animation: none; } }
.fcard.conf { border-color: #ef4444; }
.fcard.dragging { opacity: .4; }
.fcard.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.fcard.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.c-bar { grid-area: bar; align-self: stretch; background: #475569; }
.fcard.k-arr .c-bar { background: #fb923c; }
.fcard.k-dep .c-bar { background: #38bdf8; }
.fcard.k-arr.k-clr .c-bar { background: #fed7aa; }
.fcard.k-dep.k-clr .c-bar { background: #bae6fd; }
.fcard.g-air, .fcard.g-gnd:not(.req):not(.active) { opacity: .72; }
.fs-num { grid-area: num; }
.fs-cs { grid-area: cs; }
.fs-mid { grid-area: mid; }
.fs-rt { grid-area: rt; text-align: right; }
.fs-tk { grid-area: tk; display: grid; grid-template-columns: repeat(2, 21px); gap: 2px; }
.fs-act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-size: 11px; padding-bottom: 4px; }
.fs-ext { grid-area: ext; padding-bottom: 5px; }
.fs-cmd { grid-area: cmd; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; padding-bottom: 4px; }
.fs-btns { grid-area: btns; display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 6px; }
.fs-act:empty, .fs-ext:empty, .fs-cmd:empty, .fs-btns:empty { display: none; }
.fs-cmd .cmd { padding: 3px 8px; font-size: 11px; }
.fs-cs, .fs-mid, .fs-rt { display: flex; flex-direction: column; min-width: 0; padding: 3px 0; line-height: 1.2; }
.fs-l1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.fs-l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: var(--muted); }
.fs-cs .fs-l1 { font: 700 13px var(--mono); color: #f1f5f9; }
.fs-cs .bad { color: #fca5a5; }
.fs-cs .proto { color: #fde68a; }
.fs-mid .fs-l1 { font-family: var(--mono); color: #cbd5e1; }
.fs-rt .fs-l1 { font: 700 12px var(--mono); color: #e2e8f0; }
.fs-rt .fs-l2 { font-family: var(--mono); }
.c-num { min-width: 20px; height: 20px; border-radius: 5px; color: #06121f; font: 800 12px/20px var(--mono); text-align: center; padding: 0 3px; display: inline-block; }
.c-num.off { background: rgba(255,255,255,.08); color: var(--muted); }
.fs-tk i { font: 800 8.5px/13px var(--mono); font-style: normal; text-align: center; height: 13px; border-radius: 3px; border: 1px solid rgba(148,163,184,.3); color: var(--dim); letter-spacing: 0; }
.fs-tk i.on { background: rgba(52,211,153,.2); border-color: rgba(52,211,153,.5); color: #6ee7b7; }
.fs-tk i.due { background: rgba(251,191,36,.25); border-color: rgba(251,191,36,.8); color: #fde68a; animation: pulse 1.1s infinite; }
.fs-act .rq { color: var(--warn); font-weight: 700; }
.fs-act .spc { color: #a5b4fc; font-family: var(--mono); font-size: 10.5px; }
.fs-act .spc.ok { color: var(--good); }
.fs-act .cmd { padding: 3px 8px; font-size: 11px; }
.fs-act .cmd.big { margin-left: auto; }
.c-x { font-size: 11px; color: #cbd5e1; padding: 2px 0; }
.c-btns { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 3px; }
.c-mv { display: inline-flex; gap: 4px; margin-left: auto; }
@container (max-width: 300px) {
  .fcard { grid-template-columns: 4px 22px minmax(0, 1fr) auto auto; grid-template-areas: "bar num cs rt tk" "bar act act cmd cmd" "bar ext ext ext ext" "bar btns btns btns btns"; }
  .fcard .fs-mid { display: none; }
}
@container (max-width: 175px) {
  .fcard .fs-tk { display: none; }
}
@media (max-width: 1280px) { #game.tw-layout { --panel-w: 360px; } .rl-legend { display: none; } }
@media (max-width: 760px) {
  #game.tw-layout { --rail-h: 290px; }
  #rail { left: 6px; right: 6px; bottom: 6px; }
  #game.tw-layout #panel:not(.collapsed) ~ #rail { display: none; }
  /* Handy: Buchten untereinander in voller Breite, die Tafel scrollt; leere Buchten nur mit Kopfzeile */
  .rail-bays { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .bay { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .bay:last-child { border-bottom: 0; }
  .bay-list { flex: 0 0 auto; overflow: visible; }
  .bay-list > .empty { display: none; }
}
#game.tw-layout #radar-seq { display: none; }

/* Bilder in den Karten der Management-Zentrale */
.card.has-pic { overflow: hidden; }
.card-pic { position: relative; margin: -9px -10px 9px; height: 132px; background: #0b1220 center / cover no-repeat; border-bottom: 1px solid rgba(148,163,184,.18); }
.card-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,0) 55%, rgba(4,8,16,.6)); pointer-events: none; }
.pic-tag { position: absolute; left: 10px; bottom: 8px; z-index: 1; font: 700 11px var(--mono); color: #e2e8f0; background: rgba(4,10,20,.72); border: 1px solid rgba(148,163,184,.3); border-radius: 6px; padding: 2px 7px; }
.card.pic-only { padding: 0; }
.card.pic-only .card-pic { margin: 0; height: 150px; border: 0; }
.card.site .card-pic { filter: saturate(.75) brightness(.9); }
.mg-body .card.bigcard.has-pic { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; column-gap: 16px; align-items: start; }
.mg-body .card.bigcard.has-pic .card-pic { grid-row: 1 / span 4; margin: -9px 0 -9px -10px; height: auto; min-height: 160px; align-self: stretch; border: 0; border-right: 1px solid rgba(148,163,184,.18); }
@media (max-width: 760px) { .card-pic { height: 110px; } .mg-body .card.bigcard.has-pic { display: block; } .mg-body .card.bigcard.has-pic .card-pic { margin: -9px -10px 9px; min-height: 0; height: 120px; } }

/* Echter Funk: Sendelampe, gesprochene Zeile, Sprechtaste */
.log-tools { display: inline-flex; align-items: center; gap: 5px; }
.rx { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px var(--mono); color: var(--dim); min-width: 0; }
.rx.on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: pulse .7s infinite; }
.rx.on.pilot { color: #93c5fd; }
.rx.on.pilot::before { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; }
.rx.on.atc { color: #6ee7b7; }
#voice-t.on { color: #6ee7b7; border-color: rgba(52,211,153,.5); }
#ptt-btn.hidden { display: none; }
.lg.speaking { background: linear-gradient(90deg, rgba(52,211,153,.16), transparent 80%); border-radius: 4px; }
.lg.pilot.speaking { background: linear-gradient(90deg, rgba(96,165,250,.18), transparent 80%); }
#ptt { position: absolute; left: 50%; bottom: calc(var(--rail-h, 0px) + 22px); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(6,14,26,.92); border: 1px solid rgba(52,211,153,.5); color: #e2e8f0; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: min(720px, 90vw); }
#ptt.hidden { display: none; }
#ptt .ptt-dot { width: 12px; height: 12px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: pulse .6s infinite; flex-shrink: 0; }
#ptt.ok { border-color: rgba(52,211,153,.8); }
#ptt.ok .ptt-dot { background: #34d399; box-shadow: 0 0 10px #34d399; animation: none; }
#ptt.bad { border-color: rgba(248,113,113,.8); }
#ptt.bad .ptt-dot { background: #f87171; animation: none; }

/* Vorfeld: Zeitpuffer je Abfertigung, Alles bedienen */
.gp-bar { display: flex; align-items: center; gap: 10px; margin: 0 2px 6px; }
.gp-bar small { color: var(--dim); font-size: 11px; line-height: 1.25; }
.gp-bar .btn { white-space: nowrap; }
.gp-bar kbd { font-family: var(--mono); font-size: 10px; background: rgba(0,0,0,.35); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.sr-time { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.sr-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: visible; }
.sr-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, rgba(56,189,248,.35), rgba(56,189,248,.8)); }
.sr-bar b { position: absolute; top: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #4ade80; transform: translateX(-5px); }
.sr-bar b.warn { border-top-color: #fbbf24; }
.sr-bar b.bad { border-top-color: #f87171; }
.sr-slack { font: 700 11px var(--mono); white-space: nowrap; }
.sr-slack.good { color: #4ade80; }
.sr-slack.warn { color: #fbbf24; }
.sr-slack.bad { color: #f87171; }

/* Entscheidungskarte */
#decision { position: absolute; left: 8px; top: calc(var(--hud-h) + 248px); width: min(380px, calc(100vw - 16px)); z-index: 11; background: linear-gradient(160deg, rgba(30,24,8,.95), rgba(10,16,28,.95)); border: 1px solid rgba(251,191,36,.6); border-radius: 14px; padding: 12px 12px 10px; box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(251,191,36,.15); animation: dc-in .35s ease-out; }
#decision.hidden { display: none; }
#game.tw-layout #decision { top: calc(var(--hud-h) + 8px); }
#game.role-manager #decision, #game.role-observer #decision { top: calc(var(--hud-h) + 248px); }
@keyframes dc-in { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.dc-head { display: flex; gap: 10px; align-items: center; }
.dc-i { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.dc-k { font: 700 10px var(--mm-font, var(--sans)); letter-spacing: .2em; text-transform: uppercase; color: #fbbf24; }
.dc-t { font-weight: 800; font-size: 15px; color: #fff; }
.dc-x { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.45; color: #cbd5e1; }
.dc-opts { display: flex; flex-direction: column; gap: 6px; }
.dc-o { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.3); color: #f1f5f9; cursor: pointer; transition: background .15s, border-color .15s; }
.dc-o:hover { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.7); }
.dc-o b { font-size: 13px; }
.dc-o small { font-size: 11px; color: #94a3b8; text-align: right; }
.dc-o.def { border-color: rgba(251,191,36,.45); }
.dc-time { position: relative; margin-top: 9px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.dc-time i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(251,191,36,.35), rgba(251,191,36,.6)); transition: width .3s linear; }
.dc-time span { position: relative; display: block; font: 600 10px/16px var(--mono); color: #fde68a; text-align: center; }

/* Nachrichten-Ticker */
#ticker { position: absolute; left: 8px; right: calc(var(--panel-w) + 16px); bottom: 8px; height: 30px; z-index: 7; display: flex; align-items: center; background: rgba(6,12,22,.88); border: 1px solid rgba(148,163,184,.25); border-radius: 9px; overflow: hidden; cursor: pointer; backdrop-filter: blur(8px); transition: right .25s; }
#ticker.hidden { display: none; }
#panel.collapsed ~ #ticker { right: 8px; }
.tk-l { flex-shrink: 0; height: 100%; display: flex; align-items: center; padding: 0 10px; font: 800 11px var(--mm-font, var(--sans)); letter-spacing: .18em; color: #0b1220; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.tk-w { flex: 1; overflow: hidden; height: 100%; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.tk-r { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; animation: tk-run var(--tk-d, 60s) linear infinite; }
#ticker:hover .tk-r { animation-play-state: paused; }
@keyframes tk-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk-i { font-size: 12.5px; color: #e2e8f0; padding: 0 4px; }
.tk-i b { font: 600 11px var(--mono); color: #94a3b8; margin-right: 4px; }
.tk-i.good { color: #bbf7d0; }
.tk-i.bad { color: #fecaca; }
.tk-i.warn { color: #fde68a; }
.tk-s { color: #f59e0b; font-size: 9px; padding: 0 12px; }
#game.role-manager #map-ctrls, #game.role-observer #map-ctrls { bottom: 48px; }
#game.role-manager #info, #game.role-observer #info { bottom: 48px; }
@media (prefers-reduced-motion: reduce) { .tk-r { animation-duration: 240s; } }
/* Trends und Stimmen */
.trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; column-span: all; margin-bottom: 8px; }
.trend { background: rgba(12,20,34,.72); border: 1px solid rgba(148,163,184,.2); border-radius: 10px; padding: 7px 9px 4px; }
.tr-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--muted); }
.tr-h b { font: 700 13px var(--mono); color: #e2e8f0; }
.tr-h b.up { color: #4ade80; }
.tr-h b.down { color: #f87171; }
.spark { display: block; width: 100%; height: 34px; }
.card.voice .v-st { color: #fbbf24; font-size: 13px; letter-spacing: 1px; }
.card.voice .v-st span { color: rgba(148,163,184,.35); }
.card .v-t { font-size: 13px; color: #e2e8f0; line-height: 1.4; }
.card.news { display: flex; gap: 10px; align-items: flex-start; }
.card.news > span { font-size: 18px; line-height: 1.2; }
.card.news.good { border-color: rgba(74,222,128,.35); }
.card.news.bad { border-color: rgba(248,113,113,.4); }
.card.news.warn { border-color: rgba(251,191,36,.4); }

/* Kino-Modus */
#game.cinema #hud, #game.cinema #panel, #game.cinema #panel-toggle, #game.cinema #log-wrap, #game.cinema #radar-wrap, #game.cinema #rail, #game.cinema #map-ctrls, #game.cinema #info, #game.cinema #ticker, #game.cinema #hint, #game.cinema #decision, #game.cinema #toasts { display: none !important; }
#cinema { position: absolute; inset: 0; z-index: 40; pointer-events: auto; cursor: pointer; }
#cinema.hidden { display: none; }
.cn-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; }
.cn-bar.top { top: 0; animation: cn-top .8s ease-out; }
.cn-bar.bot { bottom: 0; animation: cn-bot .8s ease-out; }
@keyframes cn-top { from { transform: translateY(-100%); } }
@keyframes cn-bot { from { transform: translateY(100%); } }
.cn-cap { position: absolute; left: 5vw; bottom: calc(9vh + 26px); font-family: var(--mm-font, var(--sans)); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.8); opacity: 0; }
.cn-cap.in { animation: cn-cap 7s ease-out forwards; }
@keyframes cn-cap { 0% { opacity: 0; transform: translateX(-18px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.cn-k { font: 800 12px var(--mm-title, var(--sans)); letter-spacing: .35em; color: #38d6f5; }
.cn-t { font: 800 clamp(22px, 3.2vw, 40px) var(--mm-title, var(--sans)); letter-spacing: .04em; margin-top: 4px; }
.cn-s { font-size: clamp(13px, 1.3vw, 17px); color: #cbd5e1; margin-top: 2px; }
.cn-n { font-size: clamp(12px, 1.15vw, 15px); color: #fde68a; margin-top: 6px; font-style: italic; max-width: 560px; line-height: 1.35; }
.cn-n:empty { display: none; }
.cn-n::before { content: "🎙 "; font-style: normal; }
.cn-brand { position: absolute; right: 4vw; top: calc(9vh + 18px); font: 800 12px var(--mm-title, var(--sans)); letter-spacing: .3em; color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.cn-brand::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-right: 8px; animation: pulse 1.2s infinite; vertical-align: 1px; }
.cn-help { position: absolute; right: 4vw; bottom: calc(9vh - 26px); font-size: 11px; color: rgba(255,255,255,.4); }
.dock-open.cine { margin-top: 6px; background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(12,20,34,.7)); border-color: rgba(239,68,68,.45); }

/* Einführung */
#tut { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
#tut.hidden { display: none; }
.tut-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(2,6,14,.55), 0 0 0 2px #38d6f5, 0 0 24px rgba(56,214,245,.6); transition: all .35s ease; pointer-events: none; }
.tut-bub { position: fixed; width: 380px; max-width: calc(100vw - 24px); pointer-events: auto; background: linear-gradient(160deg, #0f1c30, #0a1322); border: 1px solid rgba(56,214,245,.6); border-radius: 14px; padding: 14px 16px 12px; color: #e2e8f0; box-shadow: 0 18px 50px rgba(0,0,0,.6); transition: left .35s ease, top .35s ease; }
.tut-k { font: 700 10px var(--mm-font, var(--sans)); letter-spacing: .2em; text-transform: uppercase; color: #38d6f5; }
.tut-t { font-weight: 800; font-size: 17px; margin: 4px 0 6px; color: #fff; }
.tut-x { font-size: 13.5px; line-height: 1.5; color: #cbd5e1; }
.tut-x kbd { font-family: var(--mono); font-size: 11px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 0 5px; }
.tut-do { margin-top: 8px; color: #fde68a; font-weight: 600; }
.tut-a { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tut-a .btn, .tut-a [data-tut=next] { margin-left: auto; }

/* Erfolge */
.ach-pop { position: absolute; left: 50%; top: calc(var(--hud-h) + 70px); transform: translateX(-50%); z-index: 50; display: flex; gap: 14px; align-items: center; min-width: 340px; max-width: min(480px, 92vw); padding: 12px 18px 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(60,40,6,.96), rgba(14,20,34,.96)); border: 1px solid rgba(253,224,71,.75); box-shadow: 0 0 40px rgba(253,224,71,.25), 0 18px 40px rgba(0,0,0,.55); animation: ach-in .5s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.ach-pop.out { animation: ach-out .5s ease-in forwards; }
@keyframes ach-in { from { transform: translate(-50%, -30px) scale(.9); opacity: 0; } }
@keyframes ach-out { to { transform: translate(-50%, -20px); opacity: 0; } }
.ach-i { font-size: 38px; line-height: 1; filter: drop-shadow(0 0 10px rgba(253,224,71,.6)); }
.ach-k { font: 800 10px var(--mm-font, var(--sans)); letter-spacing: .2em; text-transform: uppercase; color: #fde047; }
.ach-n { font-weight: 800; font-size: 17px; color: #fff; }
.ach-d { font-size: 12.5px; color: #cbd5e1; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; margin-bottom: 10px; column-span: all; }
.ach { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); opacity: .55; }
.ach.on { opacity: 1; background: linear-gradient(160deg, rgba(253,224,71,.12), rgba(12,20,34,.7)); border-color: rgba(253,224,71,.45); }
.ach .ai { font-size: 22px; }
.ach b { font-size: 12.5px; color: #f1f5f9; overflow-wrap: anywhere; hyphens: auto; }
.ach small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
#game.tw-layout.radar-big #info { left: auto; right: calc(var(--panel-w) + 70px); transform: none; max-width: min(460px, calc(100vw - var(--panel-w) - 120px - min(calc(100vh - var(--hud-h) - var(--rail-h) - 40px), calc(100vw - var(--panel-w) - 40px)))); }

/* Fotomodus */
#game.photo #hud, #game.photo #panel, #game.photo #panel-toggle, #game.photo #log-wrap, #game.photo #radar-wrap, #game.photo #rail, #game.photo #map-ctrls, #game.photo #info, #game.photo #ticker, #game.photo #hint, #game.photo #decision, #game.photo #toasts, #game.photo #tut { display: none !important; }
#photo { position: absolute; inset: 0; z-index: 42; pointer-events: none; }
#photo.hidden { display: none; }
.ph-frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; pointer-events: none; }
.ph-frame::before, .ph-frame::after { content: ''; position: absolute; left: 33.3%; right: 33.3%; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); }
.ph-frame::after { left: 0; right: 0; top: 33.3%; bottom: 33.3%; border: 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.ph-bar { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 40px); padding: 8px 10px; border-radius: 14px; background: rgba(6,12,22,.88); border: 1px solid rgba(148,163,184,.3); pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ph-k { font: 800 11px var(--mm-font, var(--sans)); letter-spacing: .18em; color: #e2e8f0; padding: 0 4px; }
.ph-f { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.ph-f button { padding: 5px 9px; font-size: 12px; color: var(--muted); background: transparent; border: 0; border-right: 1px solid var(--line); }
.ph-f button:last-child { border-right: 0; }
.ph-f button.on { background: rgba(56,189,248,.28); color: #fff; }
.ph-t { padding: 5px 9px; font-size: 12px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--muted); }
.ph-t.on { color: #fff; border-color: #38d6f5; background: rgba(56,214,245,.18); }
.ph-shot { padding: 7px 14px; border-radius: 20px; border: 0; background: #ef4444; color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 3px rgba(239,68,68,.3); }
.ph-x { padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); }
.ph-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ph-flash.go { animation: ph-flash .5s ease-out; }
@keyframes ph-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
#game.photo .ach-pop, #game.cinema .ach-pop { display: none; }

/* ---------- Herausforderungen ---------- */
.scn-total { font-family: var(--mm-font); font-size: 13px; letter-spacing: .18em; color: var(--mm-amber); padding: 8px 20px 0; }
#mm-scn .mm-sub { padding-top: 10px; }
#mm-scn .mm-item { padding-top: 6px; padding-bottom: 6px; }
#mm-scn .mm-item b { font-size: clamp(16px, 1.55vw, 21px); }
#mm-scn .mm-item small { font-size: 12px; }
.scn-item .scn-st { margin-left: auto; font-size: 18px; letter-spacing: 2px; color: rgba(148,163,184,.45); white-space: nowrap; }
.scn-item .scn-st.got { color: #fcd34d; text-shadow: 0 0 10px rgba(252,211,77,.45); }
.scn-item.locked { opacity: .5; }
.scn-item.shake { animation: scn-shake .4s; }
@keyframes scn-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.scn-card .ms-img { height: 190px; }
.scn-brief { font-size: 14px; line-height: 1.5; color: #dbe4ef; margin: 10px 0 4px; }
.scn-goals { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.scn-goals td { padding: 5px 6px; border-top: 1px solid rgba(148,163,184,.15); color: #cbd5e1; white-space: nowrap; }
.scn-goals td:first-child { white-space: normal; color: #fff; font-weight: 600; }
.scn-goals .st { color: #fcd34d; font-size: 11px; }
.scn-gold { color: #fcd34d; letter-spacing: 2px; }

#scn-bar { position: absolute; top: calc(var(--hud-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: stretch; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 12px; background: rgba(8,12,22,.86); border: 1px solid rgba(252,211,77,.35); box-shadow: 0 10px 30px rgba(0,0,0,.4); backdrop-filter: blur(8px); max-width: calc(100vw - 24px); pointer-events: auto; }
#scn-bar.hidden { display: none; }
.sb-t { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 128px; }
.sb-t b { font-size: 13px; color: #fff; white-space: nowrap; }
.sb-left { font-family: var(--mono); font-size: 11px; color: var(--warn); }
.sb-p { display: block; height: 3px; border-radius: 2px; background: rgba(148,163,184,.25); overflow: hidden; }
.sb-p i { display: block; height: 100%; background: linear-gradient(90deg, #fbbf24, #fde68a); }
.sb-g { display: flex; gap: 6px; }
.sb-c { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; padding: 3px 8px; border-radius: 8px; background: rgba(30,41,59,.7); border: 1px solid rgba(148,163,184,.18); }
.sb-c small { font-size: 10px; color: var(--muted); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.sb-c b { font-family: var(--mono); font-size: 14px; color: #fff; line-height: 1.1; }
.sb-c em { font-style: normal; font-size: 11px; letter-spacing: 1px; color: rgba(148,163,184,.5); }
.sb-c.s1 em, .sb-c.s2 em, .sb-c.s3 em { color: #fcd34d; }
.sb-c.s0 { border-color: rgba(248,113,113,.35); }
.sb-c.s3 { border-color: rgba(252,211,77,.55); background: rgba(66,50,10,.55); }
#game.photo #scn-bar, #game.cinema #scn-bar { display: none; }
@media (max-width: 760px) { .sb-c small { display: none; } .sb-c { min-width: 56px; padding: 2px 6px; } .sb-t { min-width: 0; } }

#scn-ov { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(5,10,20,.55), rgba(3,6,12,.88)); backdrop-filter: blur(3px); }
#scn-ov.hidden { display: none; }
.scn-box { width: min(880px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 16px; background: linear-gradient(180deg, rgba(12,20,34,.98), rgba(7,12,22,.98)); border: 1px solid rgba(56,214,245,.3); box-shadow: 0 30px 90px rgba(0,0,0,.6); animation: scn-in .45s cubic-bezier(.2,1.2,.4,1); font-family: var(--sans); }
@keyframes scn-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.scn-hero { position: relative; height: 230px; background-size: cover; background-position: center 35%; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 24px; }
.scn-hero.sm { height: 210px; align-items: center; justify-content: center; text-align: center; }
.scn-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,12,22,.1) 0%, rgba(7,12,22,.35) 45%, rgba(7,12,22,.97) 100%); }
.scn-hero > * { position: relative; }
.scn-k { font-family: var(--mm-font); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--mm-amber); }
.scn-hero h2 { margin: 4px 0 0; font-family: var(--mm-title); font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .06em; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.scn-in { padding: 16px 24px 20px; }
.scn-in .scn-brief { font-size: 15px; margin-top: 0; }
.scn-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-top: 10px; }
.scn-h { font-family: var(--mm-font); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--mm-cyan); margin-bottom: 6px; }
.scn-cols ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: #cbd5e1; }
.scn-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.scn-acts { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.scn-big { display: flex; gap: 10px; margin-top: 8px; }
.scn-big span { font-size: 58px; line-height: 1; color: rgba(148,163,184,.35); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.scn-big span.on { color: #fcd34d; text-shadow: 0 0 30px rgba(252,211,77,.7), 0 2px 10px rgba(0,0,0,.6); animation: scn-star .6s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes scn-star { from { opacity: 0; transform: scale(2.4) rotate(-30deg); } to { opacity: 1; transform: none; } }
.scn-res { width: 100%; border-collapse: collapse; font-size: 14px; }
.scn-res td { padding: 9px 8px; border-top: 1px solid rgba(148,163,184,.15); }
.scn-res td.v { font-family: var(--mono); font-weight: 700; color: #fff; text-align: right; }
.scn-res td.st { color: #fcd34d; letter-spacing: 2px; white-space: nowrap; }
.scn-res tr.s0 td.st { color: var(--bad); }
.scn-res td.nx { color: var(--muted); font-size: 12px; text-align: right; }
.scn-fail { color: var(--bad); font-weight: 600; margin: 0 0 8px; }
.scn-box.lose { border-color: rgba(248,113,113,.4); }
.scn-box.win { border-color: rgba(252,211,77,.45); }
@media (max-width: 700px) { .scn-cols { grid-template-columns: 1fr; } .scn-hero { height: 170px; } .scn-res td.nx { display: none; } }
#game.scn-on #toasts { top: calc(var(--hud-h) + 74px); }
#game.scn-on .ach-pop { top: calc(var(--hud-h) + 120px); }
#menu.scn-open .mm-title .t1 { font-size: clamp(26px, 3.4vw, 46px); }
#menu.scn-open .mm-title .t2 { font-size: clamp(24px, 3.2vw, 44px); }
#menu.scn-open .mm-tag { margin: 10px 0 10px; }
#menu.scn-open .mm-left { justify-content: flex-start; overflow-y: auto; }
.scn-item .lk { margin-left: 6px; }
.cmd.big.wait { cursor: default; background: rgba(51,65,85,.35); border-color: rgba(148,163,184,.35); color: #cbd5e1; font-weight: 600; }

/* ---------- Streckennetz ---------- */
.rm-slot { margin-bottom: 14px; }
.route-map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(56,214,245,.22); background: #06101c; }
.route-map canvas { display: block; width: 100%; }
.rm-legend { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: #cbd5e1; background: rgba(6,14,24,.7); padding: 4px 10px; border-radius: 8px; pointer-events: none; }
.rm-legend b { color: #fff; font-family: var(--mono); }
.rm-new { color: #fbbf24; }
.rm-tip { position: absolute; z-index: 2; width: 240px; padding: 8px 10px; border-radius: 10px; background: rgba(8,14,26,.95); border: 1px solid rgba(56,214,245,.35); font-size: 12px; color: #cbd5e1; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.rm-tip.hidden { display: none; }
.rm-tip b { color: #fff; font-size: 13px; }
.rm-tip small { display: block; color: var(--muted); margin: 2px 0 5px; }
.rm-tip div { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.rm-tip div i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rm-tip div.o { color: #fbbf24; }
.rm-tip div.n { color: var(--muted); }
.rm-wrap { column-span: all; }
.i-follow { margin-left: auto; white-space: nowrap; }
.i-follow + .i-close { margin-left: 6px; }
.i-follow.on { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); color: #fff; }

/* ---------- Speicherplätze ---------- */
.slot-row { display: flex; align-items: center; }
.slot-row .mm-item { flex: 1; min-width: 0; }
.slot-del { margin-right: 14px; flex: none; }
.slot-exp { margin-right: 6px; flex: none; }
.slot-imp b { color: var(--mm-cyan); }
.slot-del.armed { background: rgba(248,113,113,.25); border-color: var(--bad); color: #fff; }
.slot-item.locked b { color: rgba(203,213,225,.55); }
#mm-slots .mm-item small { white-space: normal; }
@media (max-width: 760px) {
  #scn-bar { top: 124px; left: 8px; right: 8px; transform: none; justify-content: space-between; }
  #game.scn-on #toasts { top: 180px; }
}
.wx-next { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(148,163,184,.14); color: #cbd5e1; font-size: 11px; white-space: nowrap; }
.wx-next.warn { background: rgba(251,191,36,.18); color: #fcd34d; }

/* ---------- Positionsplan ---------- */
.gp-plan { width: 100%; margin: 6px 0 4px; }
#splan { position: absolute; left: 12px; right: calc(var(--panel-w) + 24px); bottom: 12px; height: min(46vh, 430px); z-index: 12; display: flex; flex-direction: column; border-radius: 14px; background: rgba(8,13,24,.95); border: 1px solid rgba(251,146,60,.4); box-shadow: 0 20px 50px rgba(0,0,0,.55); backdrop-filter: blur(10px); overflow: hidden; }
#splan.hidden { display: none; }
#panel.collapsed ~ #splan, #game:has(#panel.collapsed) #splan { right: 12px; }
.sp-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.sp-head b { font-size: 14px; }
.sp-head small { color: var(--muted); font-size: 12px; }
.sp-head .icon-btn { margin-left: auto; }
.sp-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-left: 10px; }
.sp-legend i { width: 14px; height: 8px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.sp-legend i.occ { background: rgba(251,146,60,.85); }
.sp-legend i.res { background: transparent; border: 1.5px dashed rgba(56,189,248,.9); }
.sp-legend i.late { background: rgba(248,113,113,.9); }
.sp-body { flex: 1; display: flex; min-height: 0; }
.sp-grid { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.sp-side { width: 210px; border-left: 1px solid var(--line); overflow-y: auto; padding: 6px 8px; }
.sp-sh { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ground); margin: 6px 0 4px; }
.sp-row { display: flex; align-items: stretch; min-height: 30px; border-bottom: 1px solid rgba(148,163,184,.08); border-radius: 6px; }
.sp-row.drop-ok { background: rgba(52,211,153,.12); }
.sp-row.drop-no { opacity: .45; }
.sp-row.drop-hover.drop-ok { background: rgba(52,211,153,.3); outline: 1px solid var(--good); }
.sp-row.drop-hover.drop-no { background: rgba(248,113,113,.18); }
.sp-lab { width: 118px; flex: none; display: flex; flex-direction: column; justify-content: center; padding-right: 6px; }
.sp-lab b { font-size: 12px; }
.sp-lab small { font-size: 10px; color: var(--muted); }
.sp-lab em { font-style: normal; font-size: 10px; color: var(--good); }
.sp-track { position: relative; flex: 1; }
.sp-axis { min-height: 20px; border: 0; }
.sp-axis .sp-track span { position: absolute; top: 3px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--muted); }
.sp-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(148,163,184,.1); }
.sp-now { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(251,191,36,.8); box-shadow: 0 0 6px rgba(251,191,36,.6); z-index: 2; }
.sp-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; display: flex; align-items: center; gap: 4px; padding: 0 6px; overflow: hidden; font-size: 11px; white-space: nowrap; cursor: pointer; border-left: 4px solid var(--c); }
.sp-bar.occ { background: rgba(251,146,60,.28); border-top: 1px solid rgba(251,146,60,.6); border-bottom: 1px solid rgba(251,146,60,.6); }
.sp-bar.res { background: rgba(56,189,248,.12); border: 1.5px dashed rgba(56,189,248,.85); border-left: 4px solid var(--c); cursor: grab; }
.sp-bar.late { background: rgba(248,113,113,.3); border-color: var(--bad); }
.sp-bar span { font-weight: 700; color: #fff; }
.sp-bar small { color: #cbd5e1; font-size: 10px; }
.sp-bar b { color: #fff; background: var(--bad); border-radius: 50%; width: 14px; height: 14px; display: inline-grid; place-items: center; font-size: 10px; }
.sp-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 5px 7px; margin-bottom: 5px; border-radius: 8px; background: rgba(30,41,59,.8); border: 1px solid rgba(148,163,184,.2); cursor: grab; font-size: 12px; user-select: none; }
.sp-chip i { width: 8px; height: 8px; border-radius: 50%; }
.sp-chip small { width: 100%; font-size: 10.5px; color: var(--muted); }
.sp-chip.wait { border-color: var(--bad); background: rgba(127,29,29,.35); }
.sp-chip.ghost { opacity: .6; cursor: default; border-style: dashed; }
.sp-empty { font-size: 11.5px; color: var(--muted); padding: 4px 2px; }
.sp-ghost { position: fixed; z-index: 100; pointer-events: none; padding: 5px 10px; border-radius: 8px; background: rgba(251,146,60,.95); color: #111; font-weight: 700; font-size: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
@media (max-width: 760px) { #splan { right: 8px; left: 8px; height: 55vh; } .sp-side { width: 130px; } .sp-legend, .sp-head small { display: none; } .sp-lab { width: 70px; } }
.sp-row { min-height: 34px; }
.sp-lab em { color: var(--muted); }
.sp-lab em.free { color: var(--good); }
.btn.nego small { margin-left: 4px; font-size: 10.5px; opacity: .8; font-family: var(--mono); }
.prem { color: var(--good); font-family: var(--mono); font-size: 11px; }

/* ---------- Rang-Aufstieg ---------- */
#rankup { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(40,30,5,.55), rgba(3,6,12,.9)); overflow: hidden; }
#rankup.hidden { display: none; }
.ru-conf i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: ru-fall linear infinite; }
@keyframes ru-fall { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(110vh) rotate(var(--r)); } }
.ru-box { position: relative; width: min(520px, 92vw); padding: 26px 28px 24px; text-align: center; border-radius: 18px; background: linear-gradient(180deg, rgba(40,32,8,.97), rgba(10,14,24,.97)); border: 1px solid rgba(252,211,77,.6); box-shadow: 0 0 80px rgba(252,211,77,.25), 0 30px 80px rgba(0,0,0,.6); animation: scn-in .6s cubic-bezier(.2,1.4,.4,1); font-family: var(--sans); }
.ru-k { font-family: var(--mm-font); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-amber); }
.ru-medal { font-size: 84px; line-height: 1.1; margin: 8px 0 2px; animation: ru-pop 1s cubic-bezier(.2,1.8,.4,1) both .15s; filter: drop-shadow(0 0 24px rgba(252,211,77,.6)); }
@keyframes ru-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ru-box h2 { margin: 0; font-family: var(--mm-title); font-size: clamp(24px, 4vw, 34px); color: #fde68a; letter-spacing: .04em; text-shadow: 0 0 20px rgba(252,211,77,.5); }
.ru-steps { display: flex; justify-content: center; gap: 8px; margin: 14px 0 10px; }
.ru-steps span { width: 34px; height: 6px; border-radius: 3px; background: rgba(148,163,184,.3); }
.ru-steps span.done { background: rgba(252,211,77,.6); }
.ru-steps span.cur { background: #fcd34d; box-shadow: 0 0 10px rgba(252,211,77,.8); }
.ru-box ul { list-style: none; padding: 0; margin: 10px 0; text-align: left; display: inline-block; font-size: 14px; color: #e2e8f0; line-height: 1.7; }
.ru-box ul li::first-letter { color: #fcd34d; }
.ru-next { font-size: 12.5px; color: var(--muted); margin: 6px 0 16px; }
.day-chart { margin: 12px 0 2px; padding: 10px 12px; border-radius: 10px; background: rgba(15,23,42,.6); border: 1px solid var(--line); }
.dc-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.dc-h span { font-weight: 500; letter-spacing: 0; text-transform: none; display: flex; align-items: center; gap: 4px; }
.dc-h i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.day-chart svg { width: 100%; height: 90px; display: block; }
.dc-hi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dc-hi span { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(51,65,85,.55); color: #e2e8f0; }
.load-tip { max-width: min(560px, 86vw); text-align: center; font-size: 13.5px; line-height: 1.5; color: #cbd5e1; opacity: .85; min-height: 40px; }
.load-tip kbd { font-size: 11px; }
.cn-clock { position: absolute; left: 4vw; top: calc(4.5vh - 8px); font: 700 12px var(--mono); letter-spacing: .12em; color: rgba(255,255,255,.78); }
.cn-data { position: absolute; right: 4vw; top: calc(4.5vh - 8px); font: 600 12px var(--mono); letter-spacing: .06em; color: #7dd3fc; }
.cn-data b { color: #fff; }
.cn-sub { position: absolute; left: 50%; bottom: calc(4.5vh - 10px); transform: translateX(-50%); max-width: 80vw; text-align: center; font-size: clamp(12px, 1.2vw, 15px); color: #f1f5f9; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-sub b { color: #fbbf24; margin-right: 6px; font-family: var(--mono); }
.cn-sub.in { animation: cn-sub 6s ease-out forwards; }
@keyframes cn-sub { 0% { opacity: 0; } 6% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.cn-help { bottom: calc(4.5vh - 8px); }

/* ---------- Schichtpunkte ---------- */
.score-chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(66,50,10,.55); border: 1px solid rgba(252,211,77,.4); font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.score-chip.hidden { display: none; }
.sc-p { color: #fde68a; font-weight: 700; }
.sc-c { color: #cbd5e1; font-size: 11px; padding: 1px 5px; border-radius: 6px; background: rgba(15,23,42,.6); }
.sc-c.warm { color: #fbbf24; }
.sc-c.hot { color: #fff; background: linear-gradient(90deg, #f97316, #ef4444); animation: pulse 1.2s infinite; }
.rep-score { margin: 10px 0 0; color: #fde68a; }
.rep-score span { color: var(--good); font-weight: 700; }
@media (max-width: 760px) { .score-chip { font-size: 11px; padding: 2px 6px; } }
.scn-pts { margin: 10px 0 0; font-size: 15px; color: #fde68a; font-family: var(--mono); }
.scn-pts b { color: var(--good); font-family: var(--sans); }
.keys-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
.kh { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.kr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(148,163,184,.1); font-size: 13px; }
.kr span { white-space: nowrap; }
.kr em { font-style: normal; color: #cbd5e1; text-align: right; }
@media (max-width: 700px) { .keys-cols { grid-template-columns: 1fr; } }
.ms-card.wn ul { margin: 0 0 4px; padding-left: 16px; font-size: 13px; line-height: 1.55; }
.ms-card.wn, .ms-card.career { max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; }
.mm-scene { transition: opacity .3s; }
#menu:has(.ms-card.wn) .mm-scene, #menu:has(.ms-card.career) .mm-scene { opacity: 0; pointer-events: none; } /* langer Neu-Text reicht bis unten – Szenen-Titel ausblenden */

/* ---------- Anzeigetafel (Fallblatt) ---------- */
#fids { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(2,6,12,.55); }
#fids.hidden { display: none; }
.fd-box { width: min(1000px, 96vw); max-height: 86vh; overflow: auto; border-radius: 12px; background: #0a0d12; border: 1px solid #1f2937; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 4px #111827; padding: 12px 16px 16px; }
.fd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.fd-tabs { display: flex; gap: 6px; }
.fd-tabs button { background: #111827; border: 1px solid #1f2937; color: #9ca3af; padding: 8px 14px; border-radius: 6px; font: 700 15px var(--mm-font, var(--sans)); letter-spacing: .08em; cursor: pointer; }
.fd-tabs button small { font-weight: 400; font-size: 11px; opacity: .7; margin-left: 4px; }
.fd-tabs button.on { background: #fbbf24; color: #111; border-color: #fbbf24; }
.fd-clock { margin-left: auto; font: 700 26px var(--mono); color: #fbbf24; letter-spacing: .1em; }
.fd-cols, .fd-row { display: grid; grid-template-columns: 10px 5.6em 7.8em 1fr 3.6em 15em; gap: 10px; align-items: center; }
.fd-cols { padding: 4px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #6b7280; border-bottom: 1px solid #1f2937; }
.fd-cols span:first-child { grid-column: 2; }
.fd-row { padding: 5px 0; border-bottom: 1px solid #111827; cursor: pointer; }
.fd-row:hover { background: #0f172a; }
.fd-al { width: 6px; height: 22px; border-radius: 2px; }
.fd-c { display: flex; gap: 2px; font: 700 16px var(--mono); color: #f3f4f6; }
.fd-c i { font-style: normal; display: inline-block; width: 0.78em; text-align: center; background: linear-gradient(180deg, #1f2937 0 49%, #111827 51% 100%); border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.6); line-height: 1.45; }
.fd-c.flip i { animation: fd-flip .45s ease-out; }
@keyframes fd-flip { 0% { transform: rotateX(90deg); color: transparent; } 60% { transform: rotateX(-15deg); } 100% { transform: none; } }
.fd-c.status { color: #e5e7eb; }
.fd-c.go { color: #4ade80; }
.fd-c.ok { color: #93c5fd; }
.fd-c.warn { color: #fbbf24; }
.fd-c.bad { color: #f87171; }
.fd-c.go i, .fd-c.bad i { animation: fd-blink 1.6s steps(1) infinite; }
.fd-c.flip.go i, .fd-c.flip.bad i { animation: fd-flip .45s ease-out; }
@keyframes fd-blink { 50% { opacity: .55; } }
.fd-empty { padding: 20px; color: #6b7280; text-align: center; }
#game.cinema #fids, #game.photo #fids { display: none; }
@media (max-width: 760px) { .fd-box { padding: 8px; } .fd-cols { display: none !important; } .fd-cols, .fd-row { grid-template-columns: 5px auto auto 1fr auto auto; gap: 4px; } .fd-c { font-size: 10px; gap: 1px; } .fd-c i { width: 0.72em; } .fd-cols { font-size: 8px; letter-spacing: .08em; } .fd-clock { font-size: 18px; } .fd-tabs button { padding: 6px 8px; font-size: 13px; } .fd-tabs button small { display: none; } }

/* ---------- Spotterbuch ---------- */
.i-spot { margin-left: auto; white-space: nowrap; }
.i-spot + .i-follow { margin-left: 0; }
.i-spot.done { opacity: .7; }
.i-reg { font-size: 11.5px; color: var(--muted); margin: -2px 0 6px; }
.i-reg b { font-family: var(--mono); color: var(--txt); letter-spacing: .04em; }
.i-special { color: #fde68a; font-weight: 600; }
#spot-flash { position: absolute; inset: 0; z-index: 60; pointer-events: none; background: #fff; opacity: 0; }
#spot-flash.go { animation: spot-flash .5s ease-out; }
@keyframes spot-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
#spot-pol { position: absolute; left: 18px; bottom: 24px; z-index: 44; cursor: pointer; }
#spot-pol.in .sp-card { animation: spot-in .55s cubic-bezier(.2,1.3,.4,1); }
@keyframes spot-in { from { transform: translateY(40px) rotate(8deg) scale(.8); opacity: 0; } to { transform: rotate(-2.5deg); opacity: 1; } }
.sp-card { width: 250px; background: #f8f5ee; color: #1f2937; padding: 9px 9px 10px; border-radius: 3px; box-shadow: 0 14px 40px rgba(0,0,0,.55); transform: rotate(-2.5deg); }
.sp-card img, .sp-noimg { width: 100%; aspect-ratio: 16/10; display: block; object-fit: cover; background: #0b1220; border-radius: 1px; }
.sp-noimg { display: grid; place-items: center; font-size: 34px; }
.sp-cap { font: 600 13px 'Chakra Petch', var(--sans); margin-top: 7px; }
.sp-cap b { font-family: var(--mono); letter-spacing: .03em; }
.sp-cap small { display: block; font-weight: 500; color: #6b7280; font-size: 11px; }
.sp-lines { margin-top: 6px; border-top: 1px dashed #d1d5db; padding-top: 5px; }
.sp-l { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; line-height: 1.5; }
.sp-l b { color: #047857; }
.sp-tot { margin-top: 5px; font: 700 13px var(--sans); color: #b45309; }
.sp-tot small { display: block; font-weight: 500; font-size: 10.5px; color: #9ca3af; }
#spotbook { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(2,6,12,.6); }
#spotbook.hidden { display: none; }
.sb-box { width: min(1060px, 96vw); max-height: 88vh; overflow: auto; border-radius: 14px; background: linear-gradient(180deg, #2a2118, #1c1712); border: 1px solid #4b3a28; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 5px #231b13; padding: 14px 18px 18px; color: #f3ead8; }
.sb-head { display: flex; align-items: center; gap: 12px; }
.sb-title { font: 700 22px 'Chakra Petch', var(--sans); letter-spacing: .04em; flex: 1; }
.sb-title small { font: 500 12px var(--sans); color: #b8a88a; margin-left: 8px; letter-spacing: 0; }
.sb-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0; }
.sb-st { background: rgba(255,255,255,.05); border: 1px solid rgba(255,235,200,.12); border-radius: 9px; padding: 7px 10px; }
.sb-st b { display: block; font: 700 17px 'Chakra Petch', var(--sans); }
.sb-st b small { font-size: 12px; color: #b8a88a; }
.sb-st span { font-size: 11px; color: #b8a88a; }
.sb-tabs { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.sb-tabs button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,235,200,.15); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: #e8dcc4; }
.sb-tabs button.on { background: #f5a623; color: #1c1712; border-color: #f5a623; font-weight: 700; }
.sb-empty { padding: 30px 10px; text-align: center; color: #cdbf9f; line-height: 1.6; max-width: 620px; margin: 0 auto; }
.sb-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding: 4px; }
.sb-ph { margin: 0; background: #f8f5ee; color: #1f2937; padding: 7px 7px 9px; border-radius: 2px; box-shadow: 0 8px 20px rgba(0,0,0,.45); cursor: zoom-in; transition: transform .2s; }
.sb-ph:nth-child(3n+1) { transform: rotate(-1.6deg); }
.sb-ph:nth-child(3n+2) { transform: rotate(1.2deg); }
.sb-ph:hover { transform: rotate(0) scale(1.03); }
.sb-ph img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.sb-ph figcaption { font: 600 12px 'Chakra Petch', var(--sans); margin-top: 6px; position: relative; padding-right: 36px; }
.sb-ph figcaption b { font-family: var(--mono); }
.sb-ph figcaption small { display: block; font-weight: 500; color: #6b7280; font-size: 10.5px; }
.sb-ph figcaption em { position: absolute; right: 0; top: 0; font-style: normal; color: #b45309; font-weight: 700; }
.sb-ph.big { position: fixed; inset: 6vh 50% auto auto; transform: translateX(50%) !important; width: min(720px, 92vw); z-index: 70; cursor: zoom-out; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sb-type { background: #14110d; border: 1px solid rgba(255,235,200,.14); border-radius: 10px; overflow: hidden; }
.sb-type img, .sb-sil { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: #0f141c; }
.sb-sil { background-color: transparent !important; background-position: center; background-size: 40%; background-repeat: no-repeat; filter: brightness(0) invert(.32); opacity: .8; }
.sb-type:not(.locked) .sb-sil { filter: none; }
.sb-tn { padding: 6px 8px 8px; }
.sb-tn b { display: block; font-size: 12.5px; }
.sb-tn small { font-size: 10.5px; color: #b8a88a; }
.sb-type.r2 { border-color: rgba(96,165,250,.45); }
.sb-type.r3 { border-color: rgba(192,132,252,.55); }
.sb-type.r4 { border-color: rgba(245,166,35,.8); box-shadow: 0 0 0 1px rgba(245,166,35,.35), 0 0 18px rgba(245,166,35,.2); }
.sb-type.locked .sb-tn b { color: #8a7b62; }
.sb-box h4 { margin: 14px 0 8px; font: 700 14px 'Chakra Petch', var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #f5a623; }
.sb-box h4 small { text-transform: none; letter-spacing: 0; color: #b8a88a; font: 500 11px var(--sans); margin-left: 6px; }
.sb-livs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sb-liv { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,235,200,.12); border-radius: 9px; padding: 7px 9px; }
.sb-liv b { font-size: 12.5px; }
.sb-liv small { grid-column: 2; font-size: 10.5px; color: #b8a88a; }
.sb-fin { grid-row: 1 / span 2; width: 30px; height: 30px; clip-path: polygon(8% 100%, 40% 0, 78% 0, 100% 100%); }
.sb-liv.locked .sb-fin { filter: grayscale(1) brightness(.45); }
.sb-liv.locked b { color: #8a7b62; }
.sb-liv.sp:not(.locked) { border-color: rgba(245,166,35,.55); }
.sb-moms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sb-mom { background: rgba(255,255,255,.05); border: 1px solid rgba(255,235,200,.12); border-radius: 10px; padding: 10px; text-align: center; }
.sb-mom i { font-style: normal; font-size: 26px; display: block; }
.sb-mom b { display: block; font-size: 12.5px; margin-top: 4px; }
.sb-mom small { font-size: 10.5px; color: #b8a88a; }
.sb-mom.locked { opacity: .55; }
@media (max-width: 760px) {
  .sb-box { padding: 10px; }
  .sb-stats { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .sb-st { padding: 5px 7px; }
  .sb-st b { font-size: 14px; }
  .sb-album { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sb-grid, .sb-moms { grid-template-columns: repeat(2, 1fr); }
  .sb-livs { grid-template-columns: 1fr 1fr; }
  #spot-pol { left: 8px; bottom: 150px; }
  .sp-card { width: 200px; }
}
.dock-open.spot { margin-top: 0; background: linear-gradient(135deg, rgba(245,166,35,.18), rgba(12,20,34,.7)); border-color: rgba(245,166,35,.5); }
.dock-spot-tip { font-size: 11.5px; color: var(--muted); margin: -4px 2px 10px; line-height: 1.45; }
.dock-spot-tip kbd { font-family: var(--mono); font-size: 10px; background: rgba(255,255,255,.12); border-radius: 4px; padding: 0 5px; }

/* ---------- Readback-Fehler ---------- */
.cmd.big.rbfix { position: relative; overflow: hidden; background: rgba(239,68,68,.25); border-color: #f87171; color: #fee2e2; animation: rb-pulse 1s ease-in-out infinite; }
.cmd.big.rbfix:hover { background: rgba(239,68,68,.4); }
.cmd.big.rbfix i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: #fca5a5; transition: width .2s linear; }
@keyframes rb-pulse { 50% { box-shadow: 0 0 0 3px rgba(248,113,113,.35); } }
.fcard.rberr { box-shadow: 0 0 0 2px #f87171, 0 0 18px rgba(248,113,113,.35) !important; }
.i-rb { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(239,68,68,.15); border: 1px solid rgba(248,113,113,.6); color: #fecaca; font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.i-rb .btn { margin-left: auto; }
.btn-warn { background: rgba(239,68,68,.22); border-color: #f87171; color: #fee2e2; }
.btn-warn:hover { background: rgba(239,68,68,.38); }

/* ---------- Wettbewerb ---------- */
.rv-wrap { column-span: all; }
.rv-hero { display: grid; grid-template-columns: auto 1fr 200px; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(245,158,11,.08)); border: 1px solid var(--line-2); margin-bottom: 12px; }
.rv-big span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv-big b { font: 700 40px 'Chakra Petch', var(--sans); line-height: 1.05; }
.rv-big em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.rv-big em.up { color: var(--good); } .rv-big em.down { color: var(--bad); }
.rv-bar { position: relative; height: 30px; border-radius: 8px; background: linear-gradient(90deg, #b45309, #f59e0b); overflow: hidden; }
.rv-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #0369a1, #38bdf8); transition: width .6s; box-shadow: 2px 0 0 #0b1220; }
.rv-bar span { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }
.rv-bar .a { left: 10px; } .rv-bar .b { right: 10px; }
.rv-spark .spark { width: 100%; height: 40px; }
.rv-spark small { color: var(--dim); font-size: 11px; }
.rv-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 1.3fr; gap: 16px; align-items: start; }
.rv-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-tab th { text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 8px; }
.rv-tab td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: right; font-family: var(--mono); }
.rv-tab td:first-child { text-align: left; font-family: var(--sans); color: var(--muted); }
.rv-tab td.w { color: var(--good); font-weight: 700; } .rv-tab td.l { color: #fca5a5; }
.rv-fx .s { margin: 4px 0; font-size: 12.5px; }
.rv-fx .s.warn { color: var(--warn); } .rv-fx .s.good { color: var(--good); }
@media (max-width: 760px) { .rv-hero { grid-template-columns: 1fr; gap: 8px; } .rv-grid { grid-template-columns: 1fr; } .rv-big b { font-size: 32px; } }
.rv-lab { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.rv-lab .a { color: #7dd3fc; } .rv-lab .b { color: #fbbf24; }
.rv-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.rv-news .card { margin: 0; }
/* Betriebsfunk Vorfeld */
.lg.crew { color: #fde68a; }
.lg.crew .fr { color: #fb923c; font-family: var(--mono); font-weight: 700; margin-right: 5px; }
.lg.crew .fr::before { content: '📻 '; }
.lg.crew.speaking { background: linear-gradient(90deg, rgba(251,146,60,.2), transparent 80%); }

/* ---------- Schichtbriefing ---------- */
.modal-box:has(.brief) { width: min(860px, 100%); background: linear-gradient(180deg, #0f1a2e, #0b1220); }
.brief .br-top { position: relative; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.br-kick { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--role, var(--accent)); }
.brief h2 { font: 700 26px 'Chakra Petch', var(--sans); margin: 2px 0 0; }
.br-stamp { position: absolute; right: 4px; top: 6px; transform: rotate(-6deg); border: 2px solid rgba(248,113,113,.7); color: #fca5a5; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; opacity: .85; }
.br-cols { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; margin-bottom: 12px; }
.br-cols + .br-cols { grid-template-columns: 1fr 1fr; }
.br-h { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
.br-h span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dim); }
.br-wx, .br-traffic { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.br-now { display: flex; gap: 10px; align-items: center; }
.br-now .ic { font-size: 34px; }
.br-now b { display: block; font-size: 15px; }
.br-now small { color: var(--muted); font-size: 12px; }
.br-fc { margin-top: 8px; font-size: 12.5px; color: #cbd5e1; padding-top: 7px; border-top: 1px solid var(--line); }
.br-traffic svg { width: 100%; height: 80px; display: block; }
.br-leg { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.br-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.br-sp { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.br-sp span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(245,166,35,.14); border: 1px solid rgba(245,166,35,.45); color: #fde68a; }
.br-list { list-style: none; margin: 0; padding: 0; }
.br-list li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.br-list li i { font-style: normal; width: 20px; text-align: center; flex: none; }
.br-list li.warn span { color: #fcd34d; }
.br-tip { margin-top: 10px; font-size: 12.5px; color: #bae6fd; background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.25); border-radius: 8px; padding: 7px 10px; }
.brief .modal-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.br-off { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; cursor: pointer; }
@media (max-width: 760px) { .br-cols, .br-cols + .br-cols { grid-template-columns: 1fr; } .brief h2 { font-size: 21px; } .br-stamp { display: none; } }
.rq.nordo { color: #fdba74 !important; font-weight: 700; }

/* Tagesherausforderung */
.scn-item.daily { border: 1px solid rgba(245,166,35,.45); background: linear-gradient(90deg, rgba(245,166,35,.14), transparent 70%); }
.scn-muts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.scn-muts span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(245,166,35,.15); border: 1px solid rgba(245,166,35,.45); color: #fde68a; }
.scn-streak { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.scn-streak i { font-style: normal; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.06); color: var(--dim); font-size: 12px; }
.scn-streak i.on { background: rgba(245,166,35,.25); color: #fcd34d; }
.scn-streak small { color: var(--muted); margin-left: 6px; }

/* ---------- Karriere ---------- */
.career .cr-id { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(56,214,245,.16), rgba(245,166,35,.12)); border: 1px solid rgba(56,214,245,.35); }
.cr-badge { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 32px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(245,166,35,.5); }
.cr-k { font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mm-cyan); }
.cr-rank { font: 700 24px 'Chakra Petch', var(--sans); letter-spacing: .04em; }
.cr-pts { font-size: 12px; color: var(--muted); }
.cr-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); margin: 10px 0 4px; overflow: hidden; }
.cr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mm-cyan), var(--mm-amber)); }
.cr-next { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cr-grid div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.cr-grid span { display: block; font-size: 10.5px; color: var(--muted); }
.cr-grid b { font-size: 13px; }
.cr-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.cr-tab th { font-weight: 600; color: var(--muted); text-align: right; font-size: 10.5px; padding: 3px 4px; }
.cr-tab td { padding: 5px 4px; border-top: 1px solid var(--line); text-align: right; font-family: var(--mono); }
.cr-tab td:first-child { text-align: left; font-family: var(--sans); }
@media (max-width: 760px) { .cr-grid { grid-template-columns: 1fr 1fr; } }
/* Hauptmenü auf niedrigen Bildschirmen etwas kompakter (mehr Menüpunkte) */
@media (min-width: 761px) and (max-height: 960px) {
  .mm-title .t1 { font-size: clamp(40px, min(6.2vw, 9vh), 96px); }
  .mm-title .t2 { font-size: clamp(34px, min(5.4vw, 7.8vh), 82px); }
  .mm-tag { margin: 14px 0 16px; }
}
/* Momente des Tages im Tagesbericht */
.moments { margin-top: 12px; }
.mo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.mo-row figure { margin: 0; background: #f8f5ee; color: #1f2937; padding: 6px 6px 8px; border-radius: 2px; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.mo-row figure:nth-child(1) { transform: rotate(-1.5deg); } .mo-row figure:nth-child(3) { transform: rotate(1.3deg); }
.mo-row img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.mo-row figcaption { font: 600 11.5px var(--sans); margin-top: 5px; line-height: 1.3; }
.mo-row figcaption small { display: block; color: #6b7280; font-weight: 500; }
@media (max-width: 760px) { .mo-row { grid-template-columns: 1fr 1fr; } .mo-row figure:nth-child(3) { display: none; } }

/* Abflugrouten auf den Start-Streifen */
.sid { font-family: var(--mono); font-weight: 700; padding: 0 4px; border-radius: 4px; }
.sid-NOLTA { color: #7dd3fc; background: rgba(56,189,248,.14); }
.sid-SUDEN { color: #fcd34d; background: rgba(245,158,11,.14); }
.sid-RIMOS { color: #f9a8d4; background: rgba(236,72,153,.14); }
.sid-WELDA { color: #86efac; background: rgba(34,197,94,.14); }
@media (max-width: 760px) {
  .mm-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 0 12px 4px; }
  .mm-setup label { min-width: 0; font-size: 10px; letter-spacing: .12em; gap: 3px; }
  .mm-setup label:first-child { grid-column: 1 / -1; }
  .mm-setup input, .mm-setup select { min-width: 0; width: 100%; padding: 7px 8px; font-size: 14px; }
}

/* ---------- Wetterumflug ---------- */
.cmd.big.wxok { position: relative; overflow: hidden; background: rgba(245,158,11,.22); border-color: #fbbf24; color: #fef3c7; animation: wx-pulse 1.1s ease-in-out infinite; }
.cmd.big.wxok:hover { background: rgba(245,158,11,.38); }
.cmd.big.wxok i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: #fcd34d; transition: width .2s linear; }
.cmd.wxno { border-color: rgba(148,163,184,.5); }
@keyframes wx-pulse { 50% { box-shadow: 0 0 0 3px rgba(251,191,36,.35); } }
.fcard.wxreq { box-shadow: 0 0 0 2px #fbbf24, 0 0 16px rgba(251,191,36,.3) !important; }
.rq.wx { color: #fcd34d !important; font-weight: 700; }

/* ---------- Aufsichtsrat ---------- */
.bd h2 { margin-bottom: 10px; }
.bd-chair { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, rgba(56,189,248,.1), rgba(255,255,255,.03)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.bd-face { font-size: 34px; line-height: 1; }
.bd-chair > div:nth-child(2) { flex: 1; min-width: 0; }
.bd-chair b { display: block; }
.bd-chair small { color: var(--muted); font-size: 11px; }
.bd-chair p { margin: 4px 0 0; font-style: italic; color: #dbeafe; font-size: 13px; }
.bd-score { text-align: center; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.05); }
.bd-score b { display: block; font-family: var(--mono); font-size: 22px; }
.bd-score small { font-size: 10px; color: var(--muted); }
.bd-score.good b { color: var(--good); } .bd-score.mid b { color: var(--warn); } .bd-score.bad b { color: var(--bad); }
.bd-tab { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 10px; }
.bd-tab th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.bd-tab td { padding: 6px; border-bottom: 1px solid rgba(148,163,184,.08); font-family: var(--mono); }
.bd-tab td:first-child { font-family: var(--sans); }
.bd-tab td:last-child { text-align: center; font-weight: 800; }
.bd-tab tr.ok td:last-child { color: var(--good); } .bd-tab tr.no td:last-child { color: var(--bad); }
.bd-tab tr.ok td:nth-child(2) { color: #bbf7d0; }
.bd-conf { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; margin: 6px 0 10px; }
.bd-conf-l span { display: block; font-size: 11px; color: var(--muted); }
.bd-conf-l b { font-family: var(--mono); font-size: 22px; }
.bd-conf-l b em { font-style: normal; font-size: 12px; margin-left: 4px; }
.bd-conf-l b em.up { color: var(--good); } .bd-conf-l b em.down { color: var(--bad); }
.bd-conf-l small { display: block; font-size: 11px; color: var(--muted); }
.bd-bar { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.bd-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #f87171, #fbbf24 40%, #34d399 80%); background-size: 400px 100%; transition: width .4s; }
.bd-conf.mid .bd-bar i { background: #fbbf24; } .bd-conf.lo .bd-bar i { background: #f87171; } .bd-conf.hi .bd-bar i { background: #34d399; }
.bd-bar u { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.35); }
.bd-money { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.bd-money .good { color: #bbf7d0; } .bd-money .bad { color: #fecaca; }
.bd-strats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bd-strat { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px; color: var(--txt); cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; transition: border-color .15s, background .15s; }
.bd-strat:hover { border-color: var(--line-2); background: rgba(255,255,255,.07); }
.bd-strat.on { border-color: var(--accent); background: rgba(56,189,248,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.bd-strat .i { font-size: 22px; }
.bd-strat small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.bd-strat em { font-style: normal; font-size: 11.5px; color: #fde68a; font-weight: 600; }
.bd-strat small.t { color: #94a3b8; font-size: 10.5px; }
.bd-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 8px; }
.bd-head span, .bd-st span { display: block; font-size: 11px; color: var(--muted); }
.bd-head b { font-size: 18px; }
.bd-head small { color: var(--muted); font-size: 11px; }
.bd-st { text-align: right; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.bd-st b { font-size: 15px; }
.bd-rules { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.bd-rules .s { font-size: 12px; color: var(--muted); }
.bd-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.bd-hist div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; }
.bd-hist span { font-family: var(--mono); font-size: 18px; font-weight: 800; }
.bd-hist span.good { color: var(--good); } .bd-hist span.bad { color: var(--bad); }
.bd-hist small { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .bd-strats { grid-template-columns: 1fr 1fr; } .bd-conf { grid-template-columns: 1fr; } .bd-chair { flex-wrap: wrap; } }
.bd-page { column-span: all; }
.bd-head b, .bd-head small, .bd-st b, .bd-st small { display: block; }

/* ---------- Pistenkontrolle ---------- */
.insp-rq { font-size: 12.5px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(250,204,21,.45); background: rgba(250,204,21,.1); color: #fef9c3; }
.insp-rq small { display: block; font-size: 11px; margin-top: 2px; }
.insp-rq.ok small { color: #86efac; } .insp-rq.soft small { color: #fcd34d; } .insp-rq.hard small { color: #fca5a5; font-weight: 700; }
.insp-rq.hard { border-color: rgba(248,113,113,.6); background: rgba(239,68,68,.1); }
.insp-rq.act { border-color: rgba(250,204,21,.3); background: rgba(250,204,21,.06); animation: insp-blink 1.2s ease-in-out infinite; }
@keyframes insp-blink { 50% { border-color: rgba(250,204,21,.7); } }
.insp-b { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Barrierefreiheit ---------- */
/* Große Schrift: textlastige Fenster werden gezoomt, die Seitenleiste behält ihren Platz (Abstände ausgeglichen) */
/* --panel-w ist die gerenderte Breite: je Rolle um den Zoom vergrößert, das Panel selbst behält seine Innenbreite */
@media (min-width: 761px) {
  :root.a11y-big #game { --panel-w: 452px; }
  :root.a11y-big #game.role-manager, :root.a11y-big #game.role-observer { --panel-w: 339px; }
  :root.a11y-big #game.tw-layout { --panel-w: 475px; }
  .a11y-big #panel { zoom: 1.13; width: calc(var(--panel-w) / 1.13); top: calc((var(--hud-h) + 8px) / 1.13); right: calc(8px / 1.13); bottom: calc(8px / 1.13); }
  .a11y-big #log-wrap { zoom: 1.13; top: calc((var(--hud-h) + 8px) / 1.13); left: calc(8px / 1.13); }
}
@media (min-width: 761px) and (max-width: 1280px) {
  :root.a11y-big #game { --panel-w: 407px; }
  :root.a11y-big #game.tw-layout { --panel-w: 407px; }
}
.a11y-big #info { zoom: 1.13; max-width: calc(min(560px, 100vw - var(--panel-w) - 420px) / 1.13); bottom: calc(12px / 1.13); }
.a11y-big #game.tw-layout #info { max-width: calc(min(520px, 100vw - var(--panel-w) - 120px) / 1.13); bottom: calc((var(--rail-h) + 16px) / 1.13); }
.a11y-big #modal-box, .a11y-big .mg-main, .a11y-big #decision, .a11y-big #toasts { zoom: 1.12; }
.a11y-big .ms-panel, .a11y-big .mm-list { zoom: 1.08; }
/* Farbsehschwäche: Blau = gut/frei, Orange = schlecht/Konflikt (statt Grün/Rot) */
:root.a11y-cb { --good: #60a5fa; --bad: #fb923c; --tower: #60a5fa; }
.a11y-cb .ms-tile.neg b, .a11y-cb .c-t .bad, .a11y-cb .rv-tab td.l, .a11y-cb .insp-rq.hard small { color: #fdba74; }
.a11y-cb .strip.conf, .a11y-cb .fcard.conf { border-color: #f97316; }
.a11y-cb .strip.arr .s-bar { background: #60a5fa; }
.a11y-cb .sr-slack.good, .a11y-cb .tr-h b.up, .a11y-cb .fd-c.go, .a11y-cb .insp-rq.ok small, .a11y-cb .sid-WELDA { color: #93c5fd; }
.a11y-cb .sr-slack.bad, .a11y-cb .tr-h b.down, .a11y-cb .fd-c.bad { color: #fdba74; }
.a11y-cb .sr-bar b.bad { border-top-color: #fb923c; }
.a11y-cb .fcard.rberr { box-shadow: 0 0 0 2px #fb923c, 0 0 18px rgba(251,146,60,.35) !important; }
.a11y-cb .cmd.big.rbfix, .a11y-cb .btn-warn { border-color: #fb923c; background: rgba(249,115,22,.22); }
.a11y-cb .bd-bar i { background: linear-gradient(90deg, #fb923c, #fbbf24 40%, #60a5fa 80%); }
.a11y-cb .bd-conf.lo .bd-bar i { background: #fb923c; } .a11y-cb .bd-conf.hi .bd-bar i { background: #60a5fa; }
.a11y-cb .fcard.emg { border-color: #f97316; background: rgba(249,115,22,.12); }
/* Bewegung reduzieren */
.a11y-calm *, .a11y-calm *::before, .a11y-calm *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
.a11y-calm #menu-video { display: none; }

/* ---------- Kampagne ---------- */
.scn-story { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(255,255,255,.03)); border: 1px solid rgba(56,189,248,.35); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.scn-story .bd-face { font-size: 30px; line-height: 1; }
.scn-story small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.scn-story p { margin: 0; font-style: italic; color: #dbeafe; line-height: 1.45; font-size: 13.5px; }
.scn-item.camp.done .scn-st { color: var(--good); }
.scn-item.camp.cur { box-shadow: inset 3px 0 0 var(--mm-amber, #f5a623); }

/* ---------- Kino-Intro ---------- */
#game.intro-on > *:not(#map):not(#intro) { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
#intro { position: absolute; inset: 0; z-index: 60; cursor: pointer; }
#intro .in-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform .8s ease; }
#intro .in-bar.top { top: 0; } #intro .in-bar.bot { bottom: 0; }
#intro.out .in-bar.top { transform: translateY(-100%); } #intro.out .in-bar.bot { transform: translateY(100%); }
#intro .in-t { position: absolute; left: 6vw; bottom: calc(11vh + 5vh); color: #fff; opacity: 0; transform: translateY(12px); transition: opacity 1s, transform 1.2s; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
#intro.show .in-t { opacity: 1; transform: none; }
#intro.fade .in-t, #intro.out .in-t { opacity: 0; transition: opacity .9s; }
#intro .in-t small { display: block; font-family: var(--mm-font, var(--sans)); letter-spacing: .28em; text-transform: uppercase; font-size: 12px; color: var(--mm-cyan, #38d6f5); margin-bottom: 6px; }
#intro .in-t b { display: block; font-family: var(--mm-title, var(--sans)); font-size: clamp(30px, 5vw, 64px); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
#intro .in-t em { display: block; font-style: normal; font-family: var(--mm-font, var(--sans)); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--mm-amber, #f5a623); margin-top: 10px; }
#intro .in-skip { position: absolute; right: 3vw; bottom: calc(11vh / 2 - 14px); background: none; border: 1px solid rgba(255,255,255,.35); color: #e2e8f0; border-radius: 20px; padding: 5px 14px; font: 600 12px var(--sans); cursor: pointer; z-index: 2; }
#intro.out { pointer-events: none; }

/* ---------- Planezer Kurier ---------- */
.paper { margin: 12px 0 4px; background: #f3eedf; color: #1f2937; border-radius: 6px; padding: 10px 14px 12px; font-family: Georgia, 'Times New Roman', serif; box-shadow: 0 6px 20px rgba(0,0,0,.35); transform: rotate(-0.4deg); }
.pp-mast { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 3px double #1f2937; padding-bottom: 4px; margin-bottom: 8px; }
.pp-mast b { font-size: 22px; letter-spacing: .04em; font-variant: small-caps; }
.pp-mast span { font-size: 10.5px; color: #57534e; font-family: var(--sans); }
.pp-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.pp-main small { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #b91c1c; font-weight: 700; }
.paper.good .pp-main small { color: #047857; }
.pp-main h3 { margin: 2px 0 6px; font-size: 21px; line-height: 1.15; }
.pp-main p { margin: 0; font-size: 13px; line-height: 1.45; }
.pp-side { border-left: 1px solid #a8a29e; padding-left: 10px; font-size: 11.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; }
.pp-q { font-style: italic; color: #44403c; }
.pp-q i { display: block; font-style: normal; font-size: 10.5px; color: #78716c; }
.pp-wx { font-family: var(--sans); font-size: 10.5px; color: #57534e; border-top: 1px solid #d6d3d1; padding-top: 4px; }
@media (max-width: 760px) { .pp-grid { grid-template-columns: 1fr; } .pp-side { border-left: 0; padding-left: 0; border-top: 1px solid #a8a29e; padding-top: 6px; } }
.paper h3 { color: #111827 !important; font-family: Georgia, 'Times New Roman', serif; text-transform: none; letter-spacing: 0; }
.paper p, .paper .pp-side div { color: #292524 !important; }
.paper .pp-side .pp-q { color: #44403c !important; }
.paper .pp-wx { color: #57534e !important; }
.paper [data-gl], .paper .gl, .paper abbr { color: inherit !important; border-color: rgba(0,0,0,.3) !important; }

/* ---------- Notfall-Checkliste ---------- */
.emg-cl { border: 1px solid rgba(244,63,94,.6); background: rgba(244,63,94,.1); border-radius: 8px; padding: 6px 9px; font-size: 12px; animation: insp-blink 1.4s ease-in-out infinite; }
.emg-cl b { color: #fecdd3; }
.emg-cl ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.emg-cl li { color: #cbd5e1; }
.emg-cl li.ok { color: #86efac; }
.emg-cl li.warn { color: #fca5a5; font-weight: 700; }
.emg-cl kbd { font-family: var(--mono); font-size: 10px; background: rgba(255,255,255,.12); border-radius: 4px; padding: 0 4px; }
.a11y-cb .emg-cl li.ok { color: #93c5fd; } .a11y-cb .emg-cl li.warn { color: #fdba74; }
.sb-motif { font-size: 12px; color: #fde68a; background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.4); border-radius: 8px; padding: 3px 9px; margin-left: auto; margin-right: 8px; }
.sb-motif.done { color: #86efac; border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.1); }
.dock-motif { font-size: 12px; color: #fde68a; margin: -4px 2px 10px; }
.dock-motif .ok { color: var(--good); }
/* Kopfleiste bei Laptop-Breiten: Rang nur als Symbol, damit der Rollen-Knopf Platz hat */
@media (max-width: 1400px) { .rank-btn .rk-t { display: none; } .rank-btn { padding: 4px 6px; } }
.rwy-assist { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.rwy-assist .rl-tg { font-size: 11.5px; }

/* Spotter-Livestream */
#stream { position: absolute; left: 8px; bottom: 46px; width: 300px; z-index: 41; pointer-events: none; font-size: 12.5px; }
#stream.hidden { display: none; }
#game.cinema #stream { left: auto; right: 4vw; bottom: calc(9vh + 44px); }
.st-head { display: flex; align-items: center; gap: 7px; background: rgba(6,12,22,.82); border: 1px solid rgba(239,68,68,.45); border-radius: 10px 10px 0 0; padding: 6px 9px; pointer-events: auto; backdrop-filter: blur(8px); }
.st-live { background: #dc2626; color: #fff; font: 800 10px var(--sans); letter-spacing: .12em; padding: 2px 6px; border-radius: 4px; }
.st-live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; animation: pulse 1.2s infinite; vertical-align: 1px; }
.st-v { font: 700 15px var(--mono); color: #fff; }
.st-head small { color: #94a3b8; }
.st-pk { margin-left: auto; font-size: 10.5px; color: #fde68a; }
.st-x { background: none; border: 0; color: #94a3b8; cursor: pointer; font-size: 13px; padding: 0 2px; }
.st-x:hover { color: #fff; }
.st-meter { height: 4px; background: rgba(15,23,42,.85); }
.st-meter i { display: block; height: 100%; width: 0; transition: width .6s, background .6s; background: #64748b; }
.st-meter i.ok { background: #22c55e; }
.st-meter i.hot { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.st-hint { background: rgba(6,12,22,.82); color: #fbbf24; font-size: 11px; padding: 0 9px; }
.st-hint:not(:empty) { padding: 4px 9px; }
.st-chat { background: linear-gradient(180deg, rgba(6,12,22,.72), rgba(6,12,22,.55)); border-radius: 0 0 10px 10px; padding: 4px 9px 7px; min-height: 20px; }
.st-m { color: #e2e8f0; line-height: 1.38; padding: 1px 0; animation: st-in .35s ease-out; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.st-m b { font-weight: 700; margin-right: 3px; }
.st-m.sub { color: #c4b5fd; font-style: italic; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } }
.dock-open.stream { margin-top: 6px; background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(12,20,34,.7)); border-color: rgba(220,38,38,.4); }
@media (max-width: 700px) { #stream { width: min(260px, 70vw); bottom: 44px; } }

/* Tageshighlights im Tagesbericht */
.hl { margin: 10px 0 4px; padding: 8px 10px; border: 1px solid rgba(250,204,21,.28); border-radius: 10px; background: linear-gradient(135deg, rgba(250,204,21,.07), rgba(12,20,34,.4)); }
.hl-h { font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fde68a; margin-bottom: 6px; }
.hl-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-c { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(148,163,184,.14); border: 1px solid rgba(148,163,184,.25); color: #e2e8f0; white-space: nowrap; }
.hl-c.warn { border-color: rgba(251,146,60,.5); color: #fed7aa; }
.hl-best { display: block; margin-top: 6px; font-size: 12px; color: #cbd5e1; }
.hl-best b { color: #fff; }

/* Kino-Modus: Tilt-Shift (Miniatur-Look), Farbe und Regentropfen auf der Linse */
.cn-tilt { position: absolute; left: 0; right: 0; height: 26vh; pointer-events: none; backdrop-filter: blur(2.2px); -webkit-backdrop-filter: blur(2.2px); }
.cn-tilt.top { top: 9vh; mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
.cn-tilt.bot { bottom: 9vh; mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
.cn-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#game.cinema #map { filter: saturate(1.1) contrast(1.04); }
#cinema.lite .cn-tilt, .a11y-calm .cn-tilt { display: none; }
#game.cinema.lite #map { filter: none; }
#photo .ph-tilt { display: none; position: absolute; left: 0; right: 0; height: 32%; pointer-events: none; backdrop-filter: blur(2.5px) saturate(1.15); -webkit-backdrop-filter: blur(2.5px) saturate(1.15); }
#photo.tilt .ph-tilt { display: block; }
#photo .ph-tilt.top { top: 0; mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
#photo .ph-tilt.bot { bottom: 0; height: 38%; mask-image: linear-gradient(0deg, #000, transparent); -webkit-mask-image: linear-gradient(0deg, #000, transparent); }
.st-wish { background: rgba(30,27,75,.88); color: #e0e7ff; font-size: 12px; position: relative; overflow: hidden; }
.st-wish:not(:empty) { padding: 5px 9px 7px; border-top: 1px solid rgba(129,140,248,.4); }
.st-wish b { color: #a5b4fc; margin-right: 4px; }
.st-wish i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #818cf8, #c084fc); transition: width .3s linear; }

/* Wiederholung (Zeitlupe) */
#replay { position: absolute; inset: 0; z-index: 42; cursor: pointer; }
#replay.hidden { display: none; }
.rp-bar { position: absolute; left: 0; right: 0; height: 7vh; background: #000; }
.rp-bar.top { top: 0; animation: cn-top .5s ease-out; }
.rp-bar.bot { bottom: 0; animation: cn-bot .5s ease-out; }
.rp-badge { position: absolute; left: 4vw; top: calc(7vh + 16px); display: flex; flex-direction: column; gap: 3px; font-family: var(--mm-title, var(--sans)); text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.rp-badge b { font-size: clamp(16px, 2vw, 24px); letter-spacing: .18em; color: #fff; background: linear-gradient(90deg, #dc2626, #b91c1c); padding: 4px 12px; border-radius: 4px; align-self: flex-start; animation: pulse 1.6s infinite; }
.rp-badge span { color: #fde68a; font-size: 14px; letter-spacing: .06em; }
.rp-prog { position: absolute; left: 4vw; right: 4vw; bottom: calc(7vh + 14px); height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; }
.rp-prog i { display: block; height: 100%; width: 0; background: #ef4444; }
.rp-help { position: absolute; right: 4vw; bottom: calc(7vh - 24px); font-size: 11px; color: rgba(255,255,255,.45); }
#game.replaying #map { filter: saturate(.85) contrast(1.08) sepia(.08); }
#replay-offer { position: absolute; left: 50%; transform: translateX(-50%); bottom: 54px; z-index: 22; background: rgba(15,23,42,.92); color: #e2e8f0; border: 1px solid rgba(239,68,68,.55); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: st-in .3s ease-out; }
#replay-offer.hidden { display: none; }
#replay-offer b { color: #fca5a5; margin-right: 4px; }
#replay-offer kbd { margin-left: 6px; }
#game.cinema #replay-offer, #game.photo #replay-offer { display: none; }
#game.replaying #hud, #game.replaying #panel, #game.replaying #panel-toggle, #game.replaying #log-wrap, #game.replaying #radar-wrap, #game.replaying #rail, #game.replaying #map-ctrls, #game.replaying #info, #game.replaying #ticker, #game.replaying #hint, #game.replaying #decision, #game.replaying #toasts, #game.replaying #scn-bar, #game.replaying .ach-pop, #game.replaying #stream, #game.replaying #fids { display: none !important; }
@media (max-width: 700px) { #replay-offer { bottom: auto; top: calc(var(--hud-h) + 70px); max-width: 92vw; font-size: 12px; } .rp-badge b { font-size: 15px; } }
/* Fluggast-Zufriedenheit (Management-Zentrale) */
.card.sat .sat-st { color: #fbbf24; letter-spacing: 1px; font-size: 14px; }
.card.sat .sat-r { display: flex; justify-content: space-between; font-size: 12px; margin-top: 7px; }
.card.sat .sat-r b { font-variant-numeric: tabular-nums; }
.card.sat .s { margin-top: 8px; }
/* Spotter-Quiz im Livestream */
.st-quiz { background: rgba(6,40,48,.9); color: #ccfbf1; font-size: 12px; position: relative; overflow: hidden; }
.st-quiz:not(:empty) { padding: 6px 9px 8px; border-top: 1px solid rgba(45,212,191,.4); pointer-events: auto; }
.st-quiz > b:first-child { color: #5eead4; margin-right: 4px; }
.st-qo { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.st-qo button { flex: 1 1 auto; background: rgba(20,184,166,.18); border: 1px solid rgba(45,212,191,.45); color: #f0fdfa; border-radius: 6px; padding: 4px 6px; font-size: 11.5px; cursor: pointer; }
.st-qo button:hover { background: rgba(20,184,166,.38); }
.st-quiz i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #2dd4bf, #38bdf8); transition: width .3s linear; }
/* Sicherheitsnetz: gefährliche Freigabe sichtbar machen */
.cmd.risk { background: rgba(244,63,94,.2) !important; border-color: #f43f5e !important; color: #fecdd3; animation: riskPulse 1.2s ease-in-out infinite; }
@keyframes riskPulse { 50% { box-shadow: 0 0 0 3px rgba(244,63,94,.25); } }
@media (prefers-reduced-motion: reduce) { .cmd.risk { animation: none; } }
/* Eigene Icons (js/ui/icons.js): Linien in Textfarbe, Akzent in der Rollenfarbe */
.ico { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.24em; flex: none; }
.ico .a { fill: var(--role, #38d6f5); stroke: var(--role, #38d6f5); stroke-width: 1.2; }
.icon-btn .ico { width: 20px; height: 20px; vertical-align: 0; }
.icon-btn { color: var(--text, #e2e8f0); }
.icon-btn.on .ico { color: #fff; }
[data-ico] { display: inline-flex; align-items: center; font-style: normal; }
.dock-open span .ico { width: 22px; height: 22px; vertical-align: -5px; }
.p-title .ico, .rail-title .ico { color: var(--role, #38d6f5); }
.p-title .ico .a, .rail-title .ico .a { fill: #fff; stroke: #fff; }
#hud-wx .ico .a { fill: #fcd34d; stroke: #fcd34d; }
#hud-wx .ico.se { opacity: .9; }
.sc-p .ico .a { fill: #fbbf24; stroke: #fbbf24; }
.rk-i .ico { color: #fbbf24; width: 18px; height: 18px; }
.rk-i .ico .a { fill: #fde68a; stroke: #fde68a; }
#voice-t .ico, #ptt-btn .ico { width: 14px; height: 14px; vertical-align: -2px; }
.ph-t .ico, .ph-k .ico { width: 15px; height: 15px; vertical-align: -3px; }
.i-head .mini .ico { width: 13px; height: 13px; vertical-align: -2px; }
.task .ti .ico { width: 16px; height: 16px; vertical-align: -3px; }
#gp-all .ico .a { fill: #fde047; stroke: #fde047; }
/* Mitfliegen: Fensterplatz und Cockpit */
#game.riding #panel, #game.riding #panel-toggle, #game.riding #log-wrap, #game.riding #radar-wrap, #game.riding #rail, #game.riding #map-ctrls, #game.riding #info, #game.riding #ticker, #game.riding #hint, #game.riding #stream, #game.riding #fids { display: none !important; }
#ride { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
#ride.hidden { display: none; }
#ride .rd-win, #ride .rd-cockpit { display: none; }
#ride.window .rd-win { display: block; position: absolute; left: 50%; top: 47%; width: min(46vmin, 62vw); height: min(62vmin, 66vh); transform: translate(-50%, -50%); border-radius: 46% / 40%; box-shadow: 0 0 0 14px #cfc8bc, 0 0 0 22px #b9b1a3, 0 0 0 200vmax #e4dfd6, inset 0 0 40px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.35); overflow: hidden; }
#ride .rd-shade { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(#d7d1c6, #c4bcae); border-bottom: 2px solid #a69d8d; }
#ride.cockpit .rd-cockpit { display: block; position: absolute; inset: 0; }
#ride .rd-pillar { position: absolute; top: 0; bottom: 26%; background: linear-gradient(90deg, #1b1f26, #2b313b); }
#ride .rd-pillar.l { left: 0; width: 9%; clip-path: polygon(0 0, 100% 0, 40% 100%, 0 100%); }
#ride .rd-pillar.r { right: 0; width: 9%; clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%); }
#ride .rd-pillar.c { left: 49.4%; width: 1.2%; }
#ride .rd-glare { position: absolute; left: 0; right: 0; bottom: 0; height: 27%; background: linear-gradient(#1a1d23, #0d0f13); border-top: 3px solid #2f3540; display: flex; justify-content: center; align-items: center; gap: 3vw; }
#ride .rd-pfd, #ride .rd-nd { height: 78%; aspect-ratio: 1.15; background: #05070a; border: 2px solid #3a414d; border-radius: 6px; position: relative; overflow: hidden; font: 700 13px ui-monospace, monospace; color: #e5e7eb; }
#ride .rd-pfd { display: flex; align-items: stretch; }
#ride .rd-tape { width: 24%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #1f2937; gap: 2px; }
#ride .rd-tape b { font-size: 17px; color: #fff; background: #000; padding: 1px 4px; border: 1px solid #fde047; }
#ride .rd-tape small { color: #9ca3af; font-size: 10px; }
#ride .rd-tape em { color: #67e8f9; font-style: normal; font-size: 11px; min-height: 13px; }
#ride .rd-ai { flex: 1; position: relative; overflow: hidden; }
#ride .rd-hor { position: absolute; left: -20%; right: -20%; top: -50%; bottom: -50%; background: linear-gradient(#2563eb 50%, #92400e 50%); transition: transform .4s; }
#ride .rd-ai i { position: absolute; left: 30%; right: 30%; top: 50%; height: 3px; background: #fde047; transform: translateY(-50%); box-shadow: 0 0 0 1px #000; }
#ride .rd-ai span { position: absolute; top: 4px; left: 0; right: 0; text-align: center; color: #4ade80; font-size: 11px; text-shadow: 0 1px 2px #000; }
#ride .rd-nd { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#ride .rd-rose { position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #475569; top: 30%; background: repeating-conic-gradient(from -1deg, #64748b 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); transition: transform .3s; }
#ride .rd-nd b { position: relative; font-size: 20px; color: #fff; z-index: 1; }
#ride .rd-nd small { position: relative; color: #c084fc; z-index: 1; margin-top: 4px; }
#ride .rd-bar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(6,12,22,.85); border: 1px solid rgba(148,163,184,.3); pointer-events: auto; color: #e2e8f0; font-size: 13px; max-width: calc(100vw - 24px); }
#ride .rd-belt { opacity: .35; color: #fde047; display: inline-flex; }
#ride .rd-belt.on { opacity: 1; filter: drop-shadow(0 0 4px #fde047); }
#ride .rd-sw, #ride .rd-x { border: 1px solid var(--line-2, #475569); background: rgba(255,255,255,.06); color: #e2e8f0; border-radius: 8px; padding: 4px 9px; font-size: 12px; white-space: nowrap; }
#ride .rd-sw .ico { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 700px) { #ride .rd-bar { top: auto; bottom: 10px; flex-wrap: wrap; justify-content: center; } #ride .rd-t { font-size: 11.5px; text-align: center; } #ride .rd-pfd, #ride .rd-nd { font-size: 10px; } }
@media (max-width: 700px) { #ride.cockpit .rd-bar { top: 70px; bottom: auto; } #ride .rd-glare { gap: 2vw; } #ride .rd-pfd, #ride .rd-nd { height: 70%; } }
.bay-h .ico, #rl-filter .ico, .fs-act .ico, .cmd.wait .ico { width: 15px; height: 15px; vertical-align: -3px; }
.rwy-cond .ico .a { fill: #fcd34d; stroke: #fcd34d; }
.dc-i .ico { width: 28px; height: 28px; color: #fde68a; vertical-align: 0; }
.dc-i .ico .a { fill: #fbbf24; stroke: #fbbf24; }
/* 3D-Kamera beim Mitfliegen */
#game.riding { background: var(--rd-sky, #9cc3e6); }
#game.riding #map { will-change: transform; }
#ride .rd-drag { position: absolute; inset: 0; pointer-events: auto; cursor: grab; touch-action: none; }
#ride .rd-drag:active { cursor: grabbing; }
#ride .rd-haze { position: absolute; left: 0; right: 0; pointer-events: none; }
#ride .rd-modes { display: inline-flex; gap: 4px; }
#ride .rd-modes button { border: 1px solid var(--line-2, #475569); background: rgba(255,255,255,.06); color: #cbd5e1; border-radius: 8px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
#ride .rd-modes button.on { color: #fff; border-color: #38d6f5; background: rgba(56,214,245,.18); }
#ride .rd-modes .ico { width: 14px; height: 14px; vertical-align: -2px; }
#ride .rd-help { position: absolute; left: 50%; transform: translateX(-50%); top: 58px; font-size: 11px; color: rgba(226,232,240,.85); background: rgba(6,12,22,.55); padding: 3px 9px; border-radius: 8px; pointer-events: none; }
#ride.cockpit .rd-help { top: auto; bottom: calc(27% + 8px); }
#ride.window .rd-win { pointer-events: none; }
@media (max-width: 700px) { #ride .rd-help { display: none; } #ride .rd-modes button { padding: 3px 6px; font-size: 11px; } }
#view3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 44; display: block; }
#view3d.hidden { display: none; }
#ride.v3d .rd-haze { display: none; }
#ride.v3d.window .rd-win { width: min(58vmin, 72vw); height: min(76vmin, 76vh); }
/* beim Mitfliegen: Kopfleiste (Uhr, Tempo) über der 3D-Ansicht, Mitflug-Leiste darunter */
#game.riding #hud { z-index: 46; }
#ride .rd-bar { top: 64px; }
#ride .rd-help { top: 110px; }
@media (max-width: 700px) { #game.riding #hud { z-index: 46; } #ride.cockpit .rd-bar { top: 118px; } }

/* Turmblick 3D: 3D-Sicht hinter Panel, Funk, Radar und Streifen – das Spiel bleibt bedienbar */
#game.towerview #view3d { z-index: 1; }
#game.towerview #ride { z-index: 2; }
#game.towerview #map { visibility: hidden; }
#ride .rd-tw, #ride .rd-labels { display: none; }
#ride.tower .rd-tw { display: inline-flex; }
#ride.tower .rd-labels { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#ride.tower .rd-modes, #ride.tower .rd-belt { display: none; }
#ride.tower .rd-bar { top: calc(var(--hud-h, 56px) + 8px); }
#ride.tower .rd-help { top: calc(var(--hud-h, 56px) + 54px); transition: opacity .6s; }
#ride.tower.nohelp .rd-help { opacity: 0; }
#ride .rd-tw button { border: 1px solid var(--line-2, #475569); background: rgba(255,255,255,.06); color: #cbd5e1; border-radius: 8px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
#ride .rd-tw button.on { color: #fff; border-color: #38d6f5; background: rgba(56,214,245,.18); }
#ride .rd-tw .ico { width: 14px; height: 14px; vertical-align: -2px; }
#ride .rl { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; font: 600 11px var(--mono, ui-monospace, monospace); color: #e2e8f0; background: rgba(6,12,22,.72); border: 1px solid rgba(148,163,184,.45); border-radius: 6px; padding: 1px 6px; white-space: nowrap; margin-top: -8px; }
#ride .rl::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: rgba(226,232,240,.6); }
#ride .rl small { color: #94a3b8; font-weight: 500; margin-left: 5px; }
#ride .rl.sel { border-color: #38d6f5; color: #fff; box-shadow: 0 0 0 1px #38d6f5, 0 0 12px rgba(56,214,245,.45); z-index: 2; }
#ride .rl.emg { border-color: #f87171; color: #fecaca; }
#ride .rl.ga { border-color: rgba(250,204,21,.6); color: #fde68a; cursor: pointer; }
#ride .rl.ga:hover { background: rgba(250,204,21,.18); }
#map-ctrls #t-tower3d.on { color: #38d6f5; border-color: #38d6f5; }
@media (max-width: 700px) { #ride.tower .rd-bar { top: auto; bottom: 10px; } }

/* Kino 3D: Breitbild-Balken, Einblendung unten links */
#ride .rd-cn, #ride .rd-cap { display: none; }
#ride.cine3d .rd-cn { display: inline-flex; gap: 4px; }
#ride.cine3d .rd-modes, #ride.cine3d .rd-belt, #ride.cine3d .rd-tw, #ride.cine3d .rd-help { display: none; }
#ride .rd-cn button { border: 1px solid var(--line-2, #475569); background: rgba(255,255,255,.06); color: #cbd5e1; border-radius: 8px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
#ride .rd-cn .ico { width: 14px; height: 14px; vertical-align: -2px; }
#ride.cine3d::before, #ride.cine3d::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; background: #000; pointer-events: none; z-index: 0; }
#ride.cine3d::before { top: 0; }
#ride.cine3d::after { bottom: 0; }
#ride.cine3d .rd-bar { top: calc(9vh + 8px); opacity: .25; transition: opacity .3s; z-index: 1; }
#ride.cine3d .rd-bar:hover { opacity: 1; }
#ride.cine3d .rd-cap { display: flex; flex-direction: column; position: absolute; left: 4vw; bottom: calc(9vh + 26px); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); pointer-events: none; z-index: 1; border-left: 3px solid #38d6f5; padding-left: 12px; }
#ride.cine3d .rd-cap b { font: 800 28px/1.1 var(--display, inherit); letter-spacing: .04em; }
#ride.cine3d .rd-cap span { font-size: 15px; opacity: .92; margin-top: 2px; }
#ride.cine3d .rd-cap small { font-size: 12px; opacity: .75; margin-top: 3px; text-transform: uppercase; letter-spacing: .12em; }
#ride.cine3d .rd-cap.in { animation: capIn .7s ease-out; }
@keyframes capIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
#game.riding #ride.cine3d ~ #hud, #game.riding:has(#ride.cine3d) #hud { opacity: 0; pointer-events: none; transition: opacity .4s; }
@media (max-width: 700px) { #ride.cine3d .rd-cap b { font-size: 20px; } #ride.cine3d .rd-bar { top: auto; bottom: calc(9vh + 6px); } }

/* Cockpit: Regen auf der Scheibe mit Scheibenwischern */
#ride .rd-rain { position: absolute; left: 0; right: 0; top: 0; height: 74%; width: 100%; pointer-events: none; }

/* Foto in 3D-Ansichten: Polaroid und Spotterbuch über der 3D-Ansicht */
#game.riding #spot-pol { z-index: 47; }
#game.riding #spotbook { z-index: 48; }
#ride .rd-photo { border: 1px solid var(--line-2, #475569); background: rgba(255,255,255,.06); color: #e2e8f0; border-radius: 8px; padding: 3px 7px; display: inline-flex; align-items: center; }
#ride .rd-photo .ico { width: 15px; height: 15px; }
#ride .rd-photo:hover { border-color: #38d6f5; }

/* Einwinken: Kellen, STOPP-Knopf, Ergebnis */
#ride .rd-marshal { display: none; }
#ride.marshal .rd-marshal { display: block; position: absolute; inset: 0; pointer-events: none; }
#ride.marshal .rd-modes, #ride.marshal .rd-belt, #ride.marshal .rd-help, #ride.marshal .rd-photo { display: none; }
#ride .rd-wand { position: absolute; bottom: -4vh; width: 2.6vh; height: 34vh; border-radius: 1.3vh; background: linear-gradient(#ff8a1e 0%, #ffb15c 60%, #3b3b3b 61%, #1f1f1f 100%); box-shadow: 0 0 22px rgba(255,140,30,.7); transform-origin: 50% 100%; }
#ride .rd-wand.l { left: 22%; animation: wandL 1.1s ease-in-out infinite; }
#ride .rd-wand.r { right: 22%; animation: wandR 1.1s ease-in-out infinite; }
@keyframes wandL { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-38deg) translateY(-3vh); } }
@keyframes wandR { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(38deg) translateY(-3vh); } }
#ride.mstop .rd-wand { animation: none; }
#ride.mstop .rd-wand.l { transform: translateX(14vw) rotate(38deg) translateY(-12vh); }
#ride.mstop .rd-wand.r { transform: translateX(-14vw) rotate(-38deg) translateY(-12vh); }
#ride .rd-stop { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); pointer-events: auto; font: 800 22px/1 var(--display, inherit); letter-spacing: .1em; color: #fff; background: #dc2626; border: 3px solid #fecaca; border-radius: 14px; padding: 12px 26px; box-shadow: 0 8px 24px rgba(0,0,0,.4); cursor: pointer; }
#ride .rd-stop small { display: block; font-size: 10px; letter-spacing: .08em; opacity: .8; margin-top: 3px; }
#ride.mstop .rd-stop { opacity: .35; pointer-events: none; }
#ride .rd-mres { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
#ride .rd-mres b { display: block; font: 800 34px/1.1 var(--display, inherit); }
#ride .rd-mres b.ok { color: #4ade80; }
#ride .rd-mres b.mid { color: #fde047; }
#ride .rd-mres b.bad { color: #f87171; }
#ride .rd-mres span { font-size: 14px; opacity: .9; }

/* ======================================================================================================
   OBERFLÄCHE 2.0 – einheitlicher Look im Spiel: Glasflächen mit Verlauf und Lichtkante, Überschriften in der
   Menüschrift (Chakra Petch), Zahlen in Mono, Rollenfarbe als Akzent. Überschreibt die älteren Regeln oben.
   ====================================================================================================== */
:root {
  --ui-bg: linear-gradient(180deg, rgba(20, 30, 50, 0.9), rgba(9, 14, 26, 0.92));
  --ui-bg-2: linear-gradient(180deg, rgba(28, 40, 64, 0.94), rgba(13, 20, 36, 0.95));
  --ui-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(148, 178, 214, 0.16);
  --ui-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  --ui-font: 'Chakra Petch', var(--sans);
  --ui-r: 14px;
}

/* ---------- Kopfleiste ---------- */
#hud { padding: 0 10px 0 8px; gap: 8px; background: linear-gradient(180deg, rgba(10, 16, 30, 0.97), rgba(8, 13, 24, 0.9)); border-bottom: 0; box-shadow: 0 1px 0 rgba(148, 178, 214, 0.14), 0 8px 24px rgba(0, 0, 0, 0.35); }
#hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--role) 85%, transparent) 30%, color-mix(in srgb, var(--role) 85%, transparent) 70%, transparent 100%); opacity: 0.55; pointer-events: none; }
.hud-l, .hud-c, .hud-r { gap: 8px; }
.hud-c { flex-shrink: 1; }
.hud-r { flex-shrink: 0; }
.hud-logo { height: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.hud-name { font-family: var(--ui-font); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: #dbe4ef; max-width: 170px; padding-left: 10px; border-left: 1px solid rgba(148, 178, 214, 0.2); }
#btn-menu { width: 34px; height: 34px; }
.clock { min-width: 58px; padding: 0 4px; }
.clock span { font-family: var(--ui-font); font-size: 10px; letter-spacing: 0.18em; color: #8ea3bd; }
.clock b { font-size: 21px; letter-spacing: 0.02em; color: #f8fafc; text-shadow: 0 0 14px color-mix(in srgb, var(--role) 35%, transparent); }
.speeds { border-radius: 9px; background: rgba(4, 8, 16, 0.6); border: 1px solid rgba(148, 178, 214, 0.18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); padding: 2px; gap: 2px; }
.speeds button { border-radius: 7px; padding: 5px 8px; font-size: 11.5px; }
.speeds button.on { box-shadow: 0 0 12px color-mix(in srgb, var(--role) 55%, transparent); }
.wx, .rwy { font-size: 12px; color: #d5deea; background: rgba(4, 8, 16, 0.45); border: 1px solid rgba(148, 178, 214, 0.16); border-radius: 9px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 4px; }
.wx .ico, .rwy .ico { width: 15px; height: 15px; }
.rwy { font-family: var(--ui-font); font-weight: 600; letter-spacing: 0.06em; }
.kpi { padding: 0 8px; border-left: 1px solid rgba(148, 178, 214, 0.14); }
.kpi:first-child { border-left: 0; }
.kpi span { font-family: var(--ui-font); font-size: 9.5px; letter-spacing: 0.16em; color: #8ea3bd; }
.kpi b { font-size: 15px; color: #f1f5f9; }
.rank-btn { max-width: 190px; }
.role-btn { font-family: var(--ui-font); letter-spacing: 0.06em; border-radius: 9px; padding: 6px 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--role) 26%, transparent), color-mix(in srgb, var(--role) 10%, transparent)); box-shadow: 0 0 14px color-mix(in srgb, var(--role) 22%, transparent); display: inline-flex; align-items: center; gap: 6px; }
.role-btn .ico { width: 16px; height: 16px; }
@media (max-width: 1680px) { .hud-name { display: none; } }
@media (max-width: 1540px) { .wx-next { display: none; } }
@media (max-width: 1400px) { .kpi.hide-sm { display: none; } }
@media (max-width: 1360px) { .rank-btn .rk-t { display: none; } .speeds button { padding: 5px 6px; } }

/* ---------- Glasflächen: Panel, Funk, Radar, Streifenleiste, Info-Karte ---------- */
#panel, #log-wrap, #radar-wrap, #rail, #info, #decision, .markpop { border: 0; box-shadow: var(--ui-edge), var(--ui-shadow); }
#panel, #log-wrap, #rail { background: var(--ui-bg); border-radius: var(--ui-r); }
#panel { overflow: hidden; }
#panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--role), transparent 80%); opacity: 0.9; z-index: 2; pointer-events: none; }
.p-head { padding: 12px 14px 10px; border-bottom: 1px solid rgba(148, 178, 214, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent); }
.p-title { font-family: var(--ui-font); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; flex-wrap: wrap; row-gap: 0; }
.p-title small { white-space: nowrap; }
.p-title .ico { color: var(--role); }
.p-title small { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 500; }
.p-sec { font-family: var(--ui-font); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; color: #8ea3bd; margin: 14px 2px 7px; justify-content: flex-start; gap: 0; }
.p-sec::before { content: ''; flex: 0 0 3px; height: 11px; border-radius: 2px; background: var(--role); margin-right: 8px; opacity: 0.85; }
.p-sec > :last-child:not(:first-child), .p-sec > .cnt { margin-left: auto; }
.p-sec > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.p-sec .cnt { font-family: var(--mono); font-size: 11px; background: rgba(148, 178, 214, 0.12); }
.p-body { scrollbar-color: rgba(148, 178, 214, 0.28) transparent; }
.p-body::-webkit-scrollbar, #log::-webkit-scrollbar { width: 6px; }
.p-body::-webkit-scrollbar-thumb, #log::-webkit-scrollbar-thumb { background: rgba(148, 178, 214, 0.25); border-radius: 4px; }

/* Funk & Meldungen */
#log-wrap { width: 372px; }
.log-head { padding: 7px 10px; font-family: var(--ui-font); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #dbe4ef; border-bottom: 1px solid rgba(148, 178, 214, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent); }
.log-head .ico { color: var(--role); }
#log { font-size: 12px; line-height: 1.45; }
.lg { padding: 2px 0 2px 8px; border-left: 2px solid transparent; }
.lg + .lg { border-top: 1px solid rgba(148, 178, 214, 0.05); }
.lg.atc { border-left-color: rgba(52, 211, 153, 0.55); }
.lg.pilot { border-left-color: rgba(56, 189, 248, 0.45); }
.lg.crew { border-left-color: rgba(251, 146, 60, 0.45); }
.lg.mgr { border-left-color: rgba(253, 230, 138, 0.5); }
.lg.sys { border-left-color: rgba(252, 211, 77, 0.55); }
.lg.gnd { border-left-color: rgba(253, 186, 116, 0.55); }

/* Kartensteuerung als Dock */
#map-ctrls { gap: 4px; padding: 5px; border-radius: 14px; background: linear-gradient(180deg, rgba(20, 30, 50, 0.82), rgba(9, 14, 26, 0.86)); box-shadow: var(--ui-edge), 0 10px 26px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); }
#map-ctrls .icon-btn { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 9px; backdrop-filter: none; color: #cbd5e1; transition: background 0.15s, color 0.15s; }
#map-ctrls .icon-btn:hover { background: rgba(148, 178, 214, 0.14); color: #fff; }
#map-ctrls .icon-btn.on { background: color-mix(in srgb, var(--role) 22%, transparent); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 70%, transparent); }
#map-ctrls #z-out { margin-bottom: 5px; }
#map-ctrls #z-out::after, #map-ctrls #t-noise::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 1px; background: rgba(148, 178, 214, 0.18); }
#map-ctrls #t-noise { margin-bottom: 5px; position: relative; }
#map-ctrls #z-out { position: relative; }
#panel-toggle { border: 0; box-shadow: var(--ui-edge); background: linear-gradient(180deg, rgba(20, 30, 50, 0.9), rgba(9, 14, 26, 0.9)); }

/* Knöpfe */
.icon-btn { border: 0; box-shadow: var(--ui-edge); background: linear-gradient(180deg, rgba(24, 34, 56, 0.9), rgba(12, 18, 32, 0.92)); }
.mini { border-color: rgba(148, 178, 214, 0.22); background: rgba(148, 178, 214, 0.07); border-radius: 7px; color: #b8c6d8; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.mini:hover { background: rgba(148, 178, 214, 0.16); color: #fff; border-color: rgba(148, 178, 214, 0.4); }
.btn { border-color: rgba(148, 178, 214, 0.28); background: linear-gradient(180deg, rgba(148, 178, 214, 0.12), rgba(148, 178, 214, 0.05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.btn:hover { background: linear-gradient(180deg, rgba(148, 178, 214, 0.2), rgba(148, 178, 214, 0.08)); }
.btn-primary { background: linear-gradient(180deg, #22b8f0, #0369a1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(14, 165, 233, 0.3); }

/* ---------- Info-Karte ---------- */
#info { background: var(--ui-bg-2); border-radius: 16px; padding: 12px 14px 12px; overflow: hidden; }
/* Kontextspalte: Entscheidungskarte und Info-Karte zum Gewählten liegen übereinander statt sich zu überdecken; die
   Info-Karte gibt nach, wenn beides zusammen nicht passt, und scrollt dann. Desktop: rechts über der Seitenleiste
   (gleiche Lage und Breite), so bleibt die Kartenmitte mit dem ausgewählten Flugzeug frei. Schmal: unten. */
#ctx { display: flex; flex-direction: column; gap: 8px; position: absolute; z-index: 11; pointer-events: none; }
#ctx > * { pointer-events: auto; }
#game #ctx > #info, #game #ctx > #decision { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: auto; min-width: 0; max-width: none; z-index: auto; }
#game #ctx > #info { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
#game #ctx > #decision { flex: 0 0 auto; }
#game #info .i-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1001px) {
  #ctx { right: 8px; top: calc(var(--hud-h) + 8px); width: var(--panel-w); max-height: calc(100vh - var(--hud-h) - 16px); }
  #game #ctx > #info, #game #ctx > #decision { animation: info-in .18s ease-out; }
  /* über der Seitenleiste deckend, sonst scheint deren Text durch */
  #ctx > #info { background: linear-gradient(180deg, rgb(28, 40, 64), rgb(13, 20, 36)); }
  #ctx > #decision { background: linear-gradient(160deg, rgb(34, 27, 10), rgb(10, 16, 28)); }
  #game #info .i-btns { justify-content: flex-start; margin-left: 0; }
  .a11y-big #ctx { zoom: 1.13; width: calc(var(--panel-w) / 1.13); top: calc((var(--hud-h) + 8px) / 1.13); right: calc(8px / 1.13); max-height: calc((100vh - var(--hud-h) - 16px) / 1.13); }
  .a11y-big #ctx > #info, .a11y-big #ctx > #decision { zoom: 1; }
}
@keyframes info-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* schmale Bildschirme: unten über der Seitenleiste, die Info-Karte höchstens 46 % hoch */
@media (max-width: 1000px) {
  #ctx { left: 12px; right: 12px; bottom: 12px; max-height: calc(100% - var(--hud-h) - 70px); gap: 6px; }
  #game.tw-layout #ctx { bottom: calc(var(--rail-h) + 16px); }
  #game.role-manager #ctx, #game.role-observer #ctx { bottom: 48px; }
  #game #ctx > #info { max-height: 46vh; min-height: min(140px, 30vh); }
}
#info .i-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.i-head { flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
.i-head > div:first-child { flex: 1 1 170px; min-width: 0; }
.i-cs { font-size: 19px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 7px; }
.i-cs .al-dot { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 10px currentColor; }
.i-sub { font-size: 12px; line-height: 1.35; margin-top: 2px; }
.i-reg { margin: 6px 0 4px; }
.i-head .mini { padding: 3px 7px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.i-btns { gap: 4px; }
.i-head .mini .ico { width: 14px; height: 14px; }
.i-spot, .i-follow { margin-left: 0; }
.i-close { width: 30px; height: 30px; }
.i-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(148, 178, 214, 0.12); }
.i-grid span { font-family: var(--ui-font); font-size: 9.5px; letter-spacing: 0.14em; color: #8ea3bd; }
.i-grid b { font-size: 13px; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ---------- Meldungen (Toasts) ---------- */
#toasts { width: min(440px, 90vw); align-items: stretch; gap: 6px; transition: top 0.3s; z-index: 6; }
.toast.bump { animation: tbump 0.45s ease-out; }
@keyframes tbump { 0% { transform: scale(1); } 40% { transform: scale(1.03); box-shadow: var(--ui-edge), 0 0 0 2px rgba(56, 189, 248, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45); } 100% { transform: scale(1); } }
#game.ach-on #toasts { top: calc(var(--hud-h) + 160px); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px 8px 9px; border: 0; border-radius: 11px; background: linear-gradient(180deg, rgba(26, 38, 62, 0.95), rgba(12, 19, 34, 0.96)); box-shadow: var(--ui-edge), 0 10px 26px rgba(0, 0, 0, 0.45); font-size: 13px; line-height: 1.4; color: #e8eef6; position: relative; overflow: hidden; }
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.toast.good::before { background: var(--good); }
.toast.warn::before { background: var(--warn); }
.toast.bad::before { background: var(--bad); }
.tst-i { flex: 0 0 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(148, 178, 214, 0.1); }
.tst-i.sym { font: 700 12px var(--ui-font); color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.toast.good .tst-i.sym { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.toast.warn .tst-i.sym { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.toast.bad .tst-i.sym { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.tst-t { padding-top: 2px; min-width: 0; }
.toast.bad { box-shadow: var(--ui-edge), 0 0 0 1px rgba(248, 113, 113, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45); }

/* ---------- Erfolgs-Popup, Entscheidung ---------- */
.ach-pop { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(253, 224, 71, 0.6), 0 0 40px rgba(253, 224, 71, 0.22), 0 18px 40px rgba(0, 0, 0, 0.55); }
#decision { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(251, 191, 36, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5); }
.dc-t { font-family: var(--ui-font); font-size: 16px; letter-spacing: 0.02em; }

/* ---------- Kleinkram ---------- */
.tabs button { font-family: var(--ui-font); letter-spacing: 0.06em; }
.i-btns { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

/* dezente Vignette über der Karte – gibt dem Bild Tiefe (unter allen Bedienelementen) */
#game::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 52%, transparent 55%, rgba(2, 6, 14, 0.38) 100%); }
#game.riding::before, #game.photo::before, #game.cinema::before { display: none; }
@media (max-width: 1000px) { #hud { padding: 6px 8px; gap: 6px; height: auto; min-height: 58px; } #info .i-btns { justify-content: flex-start; margin-left: 0; } }

/* ---------- Dialoge im neuen Look (Ziele, Tagesbericht, Station, Hilfe …) ---------- */
#modal { background: radial-gradient(ellipse at 50% 40%, rgba(6, 12, 24, 0.55), rgba(2, 5, 12, 0.78)); backdrop-filter: blur(6px) saturate(0.9); }
.modal-box { position: relative; border: 0; background: linear-gradient(180deg, rgba(24, 35, 58, 0.97), rgba(10, 16, 30, 0.98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(148, 178, 214, 0.2), 0 30px 80px rgba(0, 0, 0, 0.65); border-radius: 18px; padding: 20px 22px; animation: modalIn 0.28s cubic-bezier(0.2, 1.1, 0.4, 1); scrollbar-width: thin; scrollbar-color: rgba(148, 178, 214, 0.28) transparent; }
.modal-box::before { content: ''; position: sticky; display: block; top: -20px; margin: -20px -22px 16px; height: 3px; background: linear-gradient(90deg, var(--mm-cyan, #38d6f5), color-mix(in srgb, var(--mm-cyan, #38d6f5) 20%, transparent) 70%, transparent); border-radius: 18px 18px 0 0; z-index: 2; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-box h2 { font-family: var(--ui-font); font-weight: 700; font-size: 22px; letter-spacing: 0.03em; color: #f8fafc; }
.modal-box h3 { font-family: var(--ui-font); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; color: var(--mm-cyan, #38d6f5); margin-top: 20px; }
.report-grid { gap: 8px; }
.report-grid div { border: 0; background: linear-gradient(180deg, rgba(148, 178, 214, 0.09), rgba(148, 178, 214, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(148, 178, 214, 0.14); border-radius: 11px; padding: 9px 11px; }
.report-grid span { font-family: var(--ui-font); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8ea3bd; }
.report-grid b { font-size: 17px; color: #f1f5f9; }
.role-pick button { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(148, 178, 214, 0.18); background: linear-gradient(180deg, rgba(148, 178, 214, 0.08), rgba(148, 178, 214, 0.02)); transition: transform 0.15s, box-shadow 0.15s; }
.role-pick button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--mm-cyan, #38d6f5), 0 8px 20px rgba(0, 0, 0, 0.35); }
.role-pick button.cur { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--good), 0 0 18px rgba(52, 211, 153, 0.2); }
.role-pick .rp-t { font-family: var(--ui-font); letter-spacing: 0.03em; font-size: 15px; }
.ach { border: 0; box-shadow: 0 0 0 1px rgba(148, 178, 214, 0.14); background: linear-gradient(180deg, rgba(148, 178, 214, 0.06), rgba(148, 178, 214, 0.02)); }
.ach.on { box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.5), 0 0 16px rgba(253, 224, 71, 0.12); }
.ach b { font-family: var(--ui-font); letter-spacing: 0.02em; }
.modal-acts .btn { font-family: var(--ui-font); letter-spacing: 0.06em; }

/* Drohne: Steuerkreuz (Touch), Leiste */
#ride .rd-pad, #ride .rd-dr { display: none; }
#ride.drone .rd-dr { display: inline-flex; }
#ride.drone .rd-modes, #ride.drone .rd-belt { display: none; }
#ride.drone .rd-bar { top: calc(var(--hud-h, 56px) + 8px); }
#ride.drone .rd-help { top: calc(var(--hud-h, 56px) + 54px); transition: opacity .6s; }
#ride.drone.nohelp .rd-help { opacity: 0; }
#ride .rd-dr button { border: 1px solid var(--line-2, #475569); background: rgba(255,255,255,.06); color: #cbd5e1; border-radius: 8px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
#ride .rd-dr .ico { width: 14px; height: 14px; vertical-align: -2px; }
#ride.drone .rd-pad { display: grid; position: absolute; left: 18px; bottom: 22px; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 6px; pointer-events: auto; }
#ride .rd-pad button { border: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(24, 34, 56, 0.85), rgba(10, 16, 30, 0.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(148,178,214,.22); color: #e2e8f0; font-size: 17px; touch-action: none; user-select: none; }
#ride .rd-pad button:active { background: rgba(56, 214, 245, 0.3); }
#ride .rd-pad [data-k=up] { grid-column: 2; grid-row: 1; }
#ride .rd-pad [data-k=left] { grid-column: 1; grid-row: 2; }
#ride .rd-pad [data-k=down] { grid-column: 2; grid-row: 2; }
#ride .rd-pad [data-k=right] { grid-column: 3; grid-row: 2; }
#ride .rd-pad [data-k=rise] { grid-column: 3; grid-row: 1; font-size: 15px; }
#ride .rd-pad [data-k=sink] { grid-column: 1; grid-row: 1; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { #ride.drone .rd-pad { opacity: .55; } #ride.drone .rd-pad:hover { opacity: 1; } }

/* ---------- Karten in den Panels: einheitlich mit Glas-Verlauf und Lichtkante ---------- */
.card, .stand-row, .rwy-box, .kpis .k, .strip, .fcard { border: 0; background: linear-gradient(180deg, rgba(148, 178, 214, 0.085), rgba(148, 178, 214, 0.025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(148, 178, 214, 0.15); }
.card:hover, .stand-row:hover, .strip:hover, .fcard:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(148, 178, 214, 0.32); }
.stand-row { border-radius: 12px; padding: 8px 10px 9px; }
.stand-row.sel, .strip.sel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px var(--accent), 0 0 16px rgba(56, 189, 248, 0.18); }
.stand-row.late { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(248, 113, 113, 0.6), 0 0 14px rgba(248, 113, 113, 0.12); }
.sr-id { background: color-mix(in srgb, var(--role) 18%, rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 45%, transparent); color: #f8fafc; }
.task { border: 0; box-shadow: inset 0 0 0 1px rgba(148, 178, 214, 0.18); background: rgba(4, 8, 16, 0.35); border-radius: 8px; transition: box-shadow 0.15s, background 0.15s; }
.task .pb { height: 3px; border-radius: 0 2px 0 0; box-shadow: 0 0 8px var(--good); }
.kpis .k { border-radius: 11px; padding: 8px 10px; }
.kpis .k span { font-family: var(--ui-font); font-size: 9.5px; letter-spacing: 0.14em; color: #8ea3bd; }
.kpis .k b { font-size: 15.5px; color: #f1f5f9; }
.kpis .k b.pos { color: var(--good); }
.kpis .k b.neg { color: var(--bad); }
.rwy-box { border-radius: 12px; }
.strip.req, .fcard.req { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(251, 191, 36, 0.75), 0 0 14px rgba(251, 191, 36, 0.15); }
.strip.emg, .fcard.emg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px #f43f5e, 0 0 16px rgba(244, 63, 94, 0.25); background: linear-gradient(180deg, rgba(244, 63, 94, 0.16), rgba(244, 63, 94, 0.06)); }
.strip.conf, .fcard.conf { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px #ef4444; }
.fcard { border-radius: 7px; }
/* Streifen in der Farbe des Halters: Anflug orange, Abflug blau */
.fcard.k-arr:not(.emg) { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(148, 178, 214, 0.03) 70%); }
.fcard.k-dep:not(.emg) { background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), rgba(148, 178, 214, 0.03) 70%); }
.fcard.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--accent), 0 0 18px rgba(56, 189, 248, 0.22); }
.fcard.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.fcard.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.c-cs, .sr-ac { letter-spacing: 0.02em; }
/* Tipp-Box oben im Panel */
#hint.hint { border: 0; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--role) 16%, transparent), color-mix(in srgb, var(--role) 6%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px color-mix(in srgb, var(--role) 40%, transparent); padding: 9px 9px 9px 11px; }
/* Fortschrittsbalken */
.bar { background: rgba(4, 8, 16, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); border-radius: 4px; overflow: hidden; }
.bar i { box-shadow: 0 0 8px currentColor; }

/* Turmblick: Fernglas-Rand beim starken Zoomen */
#ride .rd-bino { display: none; }
#ride.tower .rd-bino { display: block; position: absolute; inset: 0; pointer-events: none; opacity: var(--bino, 0); transition: opacity .3s; background: radial-gradient(ellipse 46vmin 42vmin at 38% 50%, transparent 92%, rgba(0,0,0,.92) 100%), radial-gradient(ellipse 46vmin 42vmin at 62% 50%, transparent 92%, rgba(0,0,0,.92) 100%); -webkit-mask: radial-gradient(ellipse 46vmin 42vmin at 38% 50%, transparent 97%, #000 100%), radial-gradient(ellipse 46vmin 42vmin at 62% 50%, transparent 97%, #000 100%); -webkit-mask-composite: source-in; mask: radial-gradient(ellipse 46vmin 42vmin at 38% 50%, transparent 97%, #000 100%) intersect, radial-gradient(ellipse 46vmin 42vmin at 62% 50%, transparent 97%, #000 100%); background-color: rgba(0,0,0,.94); }
#ride .rd-bar, #ride .rd-help { z-index: 3; }
#ride .rd-labels { z-index: 2; }
#ride .rd-bino { z-index: 1; }

/* 3D-Ansicht lädt: Hinweis über der (noch sichtbaren) 2D-Karte */
#ride .rd-load { display: none; }
#ride.loading3d .rd-load { display: flex; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; background: linear-gradient(180deg, rgba(24, 35, 58, 0.95), rgba(10, 16, 30, 0.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(148,178,214,.22), 0 16px 40px rgba(0,0,0,.5); color: #e2e8f0; font: 600 14px var(--ui-font, inherit); letter-spacing: .04em; z-index: 4; pointer-events: none; }
#ride .rd-load i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(56,214,245,.25); border-top-color: #38d6f5; animation: rdspin .8s linear infinite; }
@keyframes rdspin { to { transform: rotate(360deg); } }
/* Turmblick: Meldungen unter der Turmblick-Leiste */
#game.towerview #toasts { top: calc(var(--hud-h) + 108px); }
#game.towerview.ach-on #toasts { top: calc(var(--hud-h) + 200px); }

/* Funk-Untertitel in Cockpit und Kino 3D */
#ride .rd-sub { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(27% + 54px); width: min(760px, 90vw); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 3; }
#ride.cine3d .rd-sub { bottom: calc(9vh + 20px); }
#ride .rs { background: rgba(4, 8, 16, 0.72); color: #f1f5f9; border-radius: 8px; padding: 6px 12px; font-size: 15px; line-height: 1.35; text-align: center; text-shadow: 0 1px 2px #000; animation: rsIn .25s ease-out; transition: opacity .5s; box-shadow: 0 0 0 1px rgba(148,178,214,.16); }
#ride .rs b { font: 700 11px var(--ui-font, inherit); letter-spacing: .14em; margin-right: 8px; color: #67e8f9; }
#ride .rs.atc b { color: #6ee7b7; }
#ride .rs.out { opacity: 0; }
@keyframes rsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { #ride .rs { font-size: 13px; } }

/* KI-Pilot: Knopf in der Kopfleiste, Protokoll unten links */
.ai-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 6px 10px; font: 600 12.5px var(--ui-font, inherit); letter-spacing: .06em; color: #cbd5e1; background: linear-gradient(180deg, rgba(148,178,214,.12), rgba(148,178,214,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(148,178,214,.24); white-space: nowrap; }
.ai-btn .ico { width: 17px; height: 17px; }
.ai-btn:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(167,139,250,.7); }
.ai-btn.on { color: #fff; background: linear-gradient(180deg, rgba(139,92,246,.45), rgba(91,33,182,.35)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px #a78bfa, 0 0 16px rgba(139,92,246,.45); animation: aiGlow 2.4s ease-in-out infinite; }
.ai-btn.on .ico .a { fill: #c4b5fd; stroke: #c4b5fd; }
@keyframes aiGlow { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px #c4b5fd, 0 0 24px rgba(139,92,246,.7); } }
#ai-box { position: absolute; left: 8px; bottom: 48px; z-index: 9; width: min(340px, calc(100vw - 16px)); border-radius: 14px; padding: 10px 12px 10px; background: linear-gradient(180deg, rgba(40, 28, 72, 0.94), rgba(14, 16, 32, 0.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(167,139,250,.55), 0 14px 34px rgba(0,0,0,.45); font-size: 12.5px; }
#game.tw-layout #ai-box { bottom: calc(var(--rail-h) + 16px); }
#game.role-ground #ai-box { bottom: 12px; }
.ai-h { display: flex; align-items: center; gap: 8px; }
.ai-h .ico { width: 20px; height: 20px; color: #c4b5fd; }
.ai-h .ico .a { fill: #c4b5fd; stroke: #c4b5fd; animation: aiBlink 1.6s steps(2) infinite; }
@keyframes aiBlink { 50% { opacity: .35; } }
.ai-h b { font: 700 14px var(--ui-font, inherit); letter-spacing: .05em; text-transform: uppercase; color: #ede9fe; flex: 1; }
.ai-h .mini { color: #fff; border-color: rgba(196,181,253,.6); background: rgba(139,92,246,.25); padding: 4px 9px; font-size: 11.5px; }
.ai-h .mini:hover { background: rgba(139,92,246,.45); }
.ai-sub { color: #a5b4cb; font-size: 11.5px; line-height: 1.4; margin: 5px 0 7px; }
.ai-own { color: #fde68a; }
.ai-feed { display: flex; flex-direction: column; gap: 3px; }
.ai-l { padding: 4px 7px; border-radius: 7px; background: rgba(148,178,214,.07); color: #e2e8f0; line-height: 1.35; animation: aiIn .35s ease-out; }
.ai-l:first-child { background: rgba(139,92,246,.2); box-shadow: inset 2px 0 0 #a78bfa; }
.ai-l[data-ai-ac] { cursor: pointer; }
.ai-l[data-ai-ac]:hover { background: rgba(139,92,246,.3); }
.ai-l span { font-family: var(--mono); font-size: 10.5px; color: #8b9ab3; margin-right: 6px; }
.ai-l.you { box-shadow: inset 2px 0 0 #fbbf24; color: #fde68a; }
.ai-l.dec { box-shadow: inset 2px 0 0 #fbbf24; }
.ai-l.idle { color: #94a3b8; font-style: italic; }
@keyframes aiIn { from { opacity: 0; transform: translateX(-6px); } }
#game.cinema #ai-box, #game.photo #ai-box, #game.riding #ai-box, #game.replaying #ai-box { display: none !important; }
@media (max-width: 1000px) { .ai-btn span { display: none; } #ai-box { bottom: 52px; } }
.ai-watch { display: flex; align-items: center; gap: 6px; font: 600 11px var(--mono); color: #c4b5fd; background: rgba(139,92,246,.12); border-radius: 7px; padding: 4px 7px; margin-bottom: 5px; }
.ai-watch .ico { width: 14px; height: 14px; flex-shrink: 0; }
.ai-watch > span { flex: 1; min-width: 0; line-height: 1.35; }

/* ===== Aufbau-Modus: Bildkarten in Leitstand und Management-Zentrale ===== */
@keyframes kb0 { 0% { transform: scale(1.06) translate(0, 0); } 50% { transform: scale(1.16) translate(-3%, -2%); } 100% { transform: scale(1.06) translate(0, 0); } }
@keyframes kb1 { 0% { transform: scale(1.14) translate(-2%, 0); } 50% { transform: scale(1.05) translate(2%, -2%); } 100% { transform: scale(1.14) translate(-2%, 0); } }
@keyframes crGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(52,211,153,.55), 0 0 14px rgba(52,211,153,.25); } 50% { box-shadow: 0 0 0 1px rgba(52,211,153,.9), 0 0 22px rgba(52,211,153,.5); } }
.cr-hero { position: relative; height: 128px; margin: 2px 0 8px; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(148,178,214,.22); }
.cr-hero-img { position: absolute; inset: -6%; background: #0b1220 center / cover no-repeat; animation: kb0 38s ease-in-out infinite; will-change: transform; }
.cr-hero-img.kb1 { animation-name: kb1; }
.cr-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,0) 35%, rgba(4,8,16,.85)), linear-gradient(90deg, rgba(56,214,245,.18), transparent 60%); }
.cr-hero-t { position: absolute; left: 12px; right: 12px; bottom: 9px; display: flex; flex-direction: column; color: #fff; font-family: var(--mm-font); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.cr-hero-t small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #a5f3fc; }
.cr-hero-t b { font-size: 19px; letter-spacing: .04em; }
.cr-hero:hover .cr-hero-img { animation-duration: 18s; }
.cr-next { margin: 4px 0 8px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(148,178,214,.18); cursor: pointer; }
.cr-next-pic { position: relative; height: 84px; background: center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 10px; color: #fff; font-family: var(--mm-font); }
.cr-next-pic::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,.05), rgba(4,8,16,.82)); }
.cr-next-pic > * { position: relative; }
.cr-next-pic span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--manager); }
.cr-next-pic b { font-size: 15px; letter-spacing: .03em; }
.cr-reqs { list-style: none; margin: 0; padding: 6px 10px 2px; display: grid; gap: 3px; }
.cr-reqs li { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; font-size: 12px; color: #cbd5e1; }
.cr-reqs li i { font-style: normal; color: var(--muted); text-align: center; }
.cr-reqs li b { font: 600 11.5px var(--mono); color: #94a3b8; }
.cr-reqs li.ok i, .cr-reqs li.ok b { color: var(--good); }
.cr-go { display: block; width: calc(100% - 20px); margin: 6px 10px 10px; }
.cr-go:not([disabled]) { animation: crGlow 2.4s ease-in-out infinite; }
.cr-build { padding: 6px 10px 10px; }
.cr-build .bar i { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.cr-build small { display: block; margin-top: 4px; color: #fde68a; font-size: 11.5px; }
.cr-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
.cr-act { position: relative; height: 92px; border: 0; border-radius: 10px; overflow: hidden; background: #0b1220 center / cover no-repeat; color: #fff; text-align: left; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(148,178,214,.22); transition: transform .15s, box-shadow .15s; }
.cr-act::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,0) 30%, rgba(4,8,16,.9)); }
.cr-act:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(251,191,36,.7), 0 8px 18px rgba(0,0,0,.4); }
.cr-act.off { filter: grayscale(.75) brightness(.7); cursor: default; }
.cr-act-t { position: absolute; left: 7px; right: 6px; bottom: 6px; display: flex; flex-direction: column; font-family: var(--mm-font); }
.cr-act-t b { font-size: 11.5px; line-height: 1.15; }
.cr-act-t small { font: 600 10.5px var(--mono); color: #fde68a; margin-top: 2px; }
.cr-act.off .cr-act-t small { color: #cbd5e1; font-family: var(--sans); font-weight: 500; }
.cr-live { position: absolute; top: 6px; right: 6px; font: 700 9.5px var(--mono); color: #fff; background: rgba(220,38,38,.85); padding: 1px 5px; border-radius: 4px; letter-spacing: .05em; }
.cr-act-d { display: none; }
.cr-acts.big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cr-acts.big .cr-act { height: 170px; }
.cr-acts.big .cr-act-t b { font-size: 15px; }
.cr-acts.big .cr-act-t small { font-size: 12px; }
.cr-acts.big .cr-act-d { display: block; position: absolute; left: 10px; right: 10px; top: 10px; font-size: 11.5px; color: #e2e8f0; text-shadow: 0 1px 4px rgba(0,0,0,.9); opacity: 0; transition: opacity .2s; }
.cr-acts.big .cr-act:hover .cr-act-d { opacity: 1; }
.cr-acts.big .cr-act:hover::before { background: linear-gradient(180deg, rgba(4,8,16,.75), rgba(4,8,16,.9)); }
.cr-partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 4px 0 8px; }
.cr-partner { position: relative; height: 70px; border-radius: 10px; overflow: hidden; background: #0b1220 center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; color: #fff; box-shadow: 0 0 0 1px rgba(148,178,214,.2); }
.cr-partner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,0) 20%, rgba(4,8,16,.9)); }
.cr-partner > * { position: relative; }
.cr-partner b { font: 600 12px var(--mm-font); }
.cr-partner small { font-size: 10.5px; color: #cbd5e1; }
.cr-partner.on { box-shadow: 0 0 0 1.5px rgba(52,211,153,.7); }
.cr-p-d { display: none; }
.cr-partners .empty { grid-column: 1 / -1; }
.cr-partners.big { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cr-partners.big .cr-partner { height: 150px; padding: 10px 12px; }
.cr-partners.big .cr-partner b { font-size: 14px; }
.cr-partners.big .cr-partner small { font-size: 12px; color: #e2e8f0; }
.cr-partners.big .cr-p-d { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
.cr-partners.big .cr-partner:not(.on) { filter: saturate(.75); }
/* Zentrale › Aufbau */
.cr-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 2px 0 14px; }
.cr-step { position: relative; height: 92px; border-radius: 10px; overflow: hidden; background: center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; color: #fff; box-shadow: 0 0 0 1px rgba(148,178,214,.2); filter: grayscale(.85) brightness(.55); }
.cr-step::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,0) 30%, rgba(4,8,16,.9)); }
.cr-step > * { position: relative; }
.cr-step span { position: absolute; top: -50px; left: 0; font: 700 11px var(--mono); background: rgba(4,8,16,.7); border-radius: 4px; padding: 1px 6px; }
.cr-step b { font: 600 12.5px var(--mm-font); }
.cr-step.done { filter: none; opacity: .8; }
.cr-step.done span::after { content: ' ✓'; color: var(--good); }
.cr-step.now { filter: none; box-shadow: 0 0 0 2px var(--manager), 0 8px 22px rgba(251,191,36,.25); }
.cr-now { display: grid; grid-template-columns: minmax(220px, 1.1fr) 1.4fr; gap: 14px; margin-bottom: 12px; }
/* Ken Burns nur im Inneren: die Box selbst bleibt fest, sonst wächst sie über die Spalte mit dem Text */
.cr-now-pic { position: relative; min-height: 210px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(148,178,214,.22); }
.cr-now-pic > i { position: absolute; inset: -6%; background: #0b1220 center / cover no-repeat; animation: kb0 40s ease-in-out infinite; will-change: transform; }
.cr-now-b small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--manager); }
.cr-now-b h3 { margin: 2px 0 6px; font: 600 24px var(--mm-font); }
.cr-now-b p { margin: 0 0 10px; color: #cbd5e1; }
.cr-up { display: grid; grid-template-columns: minmax(220px, 1fr) 1.5fr; gap: 14px; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(148,178,214,.16); overflow: hidden; margin-bottom: 12px; }
.cr-up-pic { min-height: 240px; background: center / cover no-repeat; display: flex; align-items: flex-end; padding: 12px; color: #fff; position: relative; }
.cr-up-pic::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,0) 50%, rgba(4,8,16,.85)); }
.cr-up-pic b { position: relative; font: 600 18px var(--mm-font); }
.cr-up-b { padding: 12px 14px 4px 0; }
.cr-up-b p { margin: 0 0 8px; color: #cbd5e1; }
.cr-up-b .cr-reqs { padding-left: 0; }
.cr-up-b .cr-go { width: 100%; margin: 8px 0 12px; padding: 10px; font-size: 14px; }
.cr-up-b .cr-build { padding-left: 0; }
.cr-money { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; margin: 4px 0 8px; font-size: 12px; color: #94a3b8; }
.cr-money b { display: block; font: 600 14px var(--mono); color: #e2e8f0; }
.cr-hint { font-size: 11.5px; color: #94a3b8 !important; }
@media (max-width: 900px) { .cr-now, .cr-up { grid-template-columns: 1fr; } .cr-up-b { padding: 0 12px; } .cr-line { grid-template-columns: repeat(5, minmax(90px, 1fr)); overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .cr-hero-img, .cr-now-pic > i, .cr-go { animation: none !important; } }
.rk-stage { font-size: 15px; }
.mg-flow > .cr-line, .mg-flow > .cr-now, .mg-flow > .cr-up, .mg-flow > .cr-acts, .mg-flow > .cr-partners { column-span: all; }

/* Aufbau-Modus: Wiesenplätze als Raster, gesperrte Ausbauten, langsam bewegte Bilder */
.ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.ga-slot { border: 1px solid rgba(132, 204, 22, 0.28); background: linear-gradient(160deg, rgba(77, 124, 15, 0.22), rgba(20, 30, 20, 0.5)); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-height: 48px; }
.ga-slot b { font-family: var(--mono); font-size: 12px; color: #bef264; letter-spacing: 0.06em; }
.ga-slot small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-slot.on { border-color: rgba(250, 204, 21, 0.55); background: linear-gradient(160deg, rgba(202, 138, 4, 0.25), rgba(30, 27, 15, 0.55)); }
.ga-slot.on small { color: #fde68a; }
.ga-slot.resv { border-style: dashed; }
.card.lockcard { border-style: dashed; background: rgba(15, 23, 42, 0.35); }
.card.lockcard .t { color: var(--muted); font-weight: 500; }
@keyframes kbpos { from { background-position: 20% 45%; background-size: 116% auto; } to { background-position: 80% 55%; background-size: 124% auto; } }
.card-pic.kb-slow { animation: kbpos 24s ease-in-out infinite alternate; background-size: 116% auto; }
@media (prefers-reduced-motion: reduce) { .card-pic.kb-slow { animation: none; } }

/* ---------- Leitstand: Live am Platz ---------- */
.p-sec.live span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 0 0 rgba(244,63,94,.6); animation: liveDot 1.8s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(244,63,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(244,63,94,0); } 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); } }
.p-sec.live .cnt { margin-left: auto; background: none; padding: 0; font-family: var(--mono); letter-spacing: 0; }
.p-sec.live .cnt b { font-weight: 700; margin-left: 6px; }
.p-sec.live .cnt b.in { color: #67e8f9; }
.p-sec.live .cnt b.out { color: #fbbf24; }
.sl { position: relative; height: 158px; border-radius: 12px; overflow: hidden; cursor: pointer; background: #0b1220; box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(148,178,214,.22); }
.sl-img { position: absolute; inset: -8%; background: #0b1220 center / cover no-repeat; opacity: 0; transition: opacity 1.4s ease; animation: kb0 22s ease-in-out infinite; will-change: transform, opacity; }
.sl-img.kb1 { animation-name: kb1; }
.sl-img.on { opacity: 1; }
.sl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,8,16,.15) 0%, rgba(3,8,16,0) 30%, rgba(3,8,16,.35) 55%, rgba(3,8,16,.92) 100%); pointer-events: none; }
.sl-t { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 1px; color: #f8fafc; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.sl-kick { font: 700 10px var(--ui-font, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #7dd3fc; }
.sl[data-kind=stand] .sl-kick { color: #86efac; }
.sl[data-kind=dep] .sl-kick { color: #fcd34d; }
.sl[data-kind=amb] .sl-kick { color: #c4b5fd; }
.sl-title { font: 800 19px var(--ui-font, sans-serif); letter-spacing: .02em; }
.sl-sub { font-size: 12px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-live { font: 600 11.5px var(--mono); color: #e2e8f0; margin-top: 2px; }
.sl-tag { position: absolute; top: 10px; left: 10px; font: 700 10.5px var(--ui-font, sans-serif); letter-spacing: .06em; color: #0b1220; background: rgba(248,250,252,.9); border-radius: 20px; padding: 3px 9px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.sl-prog { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.sl-prog i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #a3e635); transition: width .6s ease; }
.sl-run { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.06); }
.sl-run i { display: block; height: 100%; width: 0; background: rgba(125,211,252,.85); animation: slRun 8s linear forwards; }
@keyframes slRun { to { width: 100%; } }
.sl.pulse .sl-t { animation: slIn .7s ease both; }
@keyframes slIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sl:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(56,214,245,.6); }
.dk-radar { position: relative; height: 132px; margin: 8px 0 4px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(94,234,212,.22), 0 6px 18px rgba(0,0,0,.35); }
.dk-radar canvas { display: block; width: 100%; height: 100%; }
.dk-radar-l { position: absolute; left: 10px; top: 8px; font: 700 9.5px var(--ui-font, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: rgba(94,234,212,.75); pointer-events: none; }
/* Kennzahlen mit Verlauf */
.dock-kpis .k { position: relative; overflow: hidden; }
.dock-kpis .k > span, .dock-kpis .k > b { position: relative; z-index: 1; }
.dock-kpis .k .spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40%; pointer-events: none; opacity: .85; }
.spark .l { fill: none; stroke: rgba(56,189,248,.75); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark .f { fill: rgba(56,189,248,.12); }
.dock-kpis .k:has(b.neg) .spark .l { stroke: rgba(248,113,113,.8); }
.dock-kpis .k:has(b.neg) .spark .f { fill: rgba(248,113,113,.12); }
.dock-kpis .k:has(b.pos) .spark .l { stroke: rgba(52,211,153,.8); }
.dock-kpis .k:has(b.pos) .spark .f { fill: rgba(52,211,153,.12); }
/* Aufgaben und Baustellen mit Bild */
.dock-todo.has-pic { grid-template-columns: 46px 1fr 10px; padding: 5px 9px 5px 5px; }
.dock-todo .tp, .dock-site .tp { position: relative; display: block; width: 46px; height: 34px; border-radius: 6px; background: #0b1220 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(148,163,184,.25); }
.dock-todo .tp em { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.dock-site.has-pic { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; padding: 5px 8px 6px 5px; }
.dock-site .ds-b { min-width: 0; }
.dock-site .ds-b .row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar.stripes i { background: repeating-linear-gradient(-45deg, #fbbf24 0 6px, #f59e0b 6px 12px); background-size: 17px 17px; animation: stripes 1.2s linear infinite; }
@keyframes stripes { to { background-position: 17px 0; } }
@media (prefers-reduced-motion: reduce) { .sl-img, .live-dot, .bar.stripes i, .sl-run i { animation: none !important; } }

/* Demo-Ende */
.demo-end { max-width: 640px; }
.demo-end .de-pic { position: relative; height: 170px; margin: -6px -6px 14px; border-radius: 12px; background: #0b1220 center / cover no-repeat; box-shadow: inset 0 -60px 60px -20px rgba(4,8,16,.85); animation: kb0 30s ease-in-out infinite; }
.demo-end .de-pic span { position: absolute; top: 12px; left: 12px; font: 800 12px var(--mm-title, sans-serif); letter-spacing: .3em; color: #0b1220; background: #fbbf24; border-radius: 6px; padding: 4px 9px; }
.demo-end h2 { margin: 0 0 6px; }
.demo-end .de-sub { margin: 0 0 14px; color: var(--muted); }
.de-feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.de-feat > div { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.18); }
.de-feat span { grid-row: 1 / span 2; font-size: 20px; }
.de-feat small { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .de-feat { grid-template-columns: 1fr; } }
.mm-demo { display: inline-block; margin: 10px 0 4px; align-self: flex-start; font: 800 13px var(--mm-title, sans-serif); letter-spacing: .3em; color: #0b1220; background: #fbbf24; border-radius: 6px; padding: 4px 10px; box-shadow: 0 4px 14px rgba(251,191,36,.35); }

/* Ausbau-Bonus: einer von drei Vorteilen nach einer neuen Stufe */
.pk-k { font-family: var(--mm-font, inherit); color: var(--mm-amber, #f5a623); letter-spacing: .2em; font-weight: 700; font-size: 12px; text-transform: uppercase; }
.pk h2 { margin: 4px 0 6px; }
.pk-sub { color: var(--muted); margin: 0 0 14px; }
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px 14px; border-radius: 12px; border: 1px solid rgba(56,214,245,.25); background: linear-gradient(160deg, rgba(56,214,245,.10), rgba(15,23,42,.6)); color: inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pk-card:hover { transform: translateY(-3px); border-color: rgba(56,214,245,.7); box-shadow: 0 10px 28px rgba(56,214,245,.15); }
.pk-card b { font-size: 16px; }
.pk-card small { color: var(--muted); line-height: 1.4; }
.pk-ic { font-size: 30px; }
.pk-own { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; font-size: 12px; }
.pk-own span { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.pk-own em { font-style: normal; padding: 3px 9px; border-radius: 999px; background: rgba(56,214,245,.12); border: 1px solid rgba(56,214,245,.3); }
@media (max-width: 760px) { .pk-grid { grid-template-columns: 1fr; } }

/* ======================================================================================================
   HANDY: kompakte Kopfleiste (Hochformat zwei Zeilen, Querformat eine), Tempo als Pause + aktuelle Stufe,
   Funk eingeklappt als eine Zeile mit der letzten Meldung, Werkzeugleiste eingeklappt hinter „Mehr“,
   Zoom per Fingergeste statt Knöpfen.
   ====================================================================================================== */
#map-more, #speeds-pop { display: none; }
@media (max-width: 760px), (max-height: 500px) {
  /* Kopfleiste: Menü · Uhr · Tempo · Wetter · Bahn | Kasse · Ansehen · Punkte · KI · Rang · Rolle */
  #hud { flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 6px; row-gap: 5px; padding: 5px 8px 6px; height: auto; min-height: 0; }
  .hud-l, .hud-c, .hud-r { display: contents; }
  .hud-logo, .hud-name, .kpi.hide-sm { display: none; }
  #hud::before { content: ''; order: 6; flex: 0 0 100%; height: 0; }
  #btn-menu { order: 1; width: 32px; height: 32px; }
  .clock { order: 2; min-width: 0; padding: 0 2px; }
  .clock span { font-size: 8.5px; letter-spacing: 0.12em; }
  .clock b { font-size: 17px; }
  .speeds { order: 3; }
  .speeds button { padding: 5px 7px; font-size: 11px; min-width: 30px; }
  #speeds button:not(.on):not(.last):not([data-speed="0"]) { display: none; }
  #speeds button.on:not([data-speed="0"])::after { content: ' ▾'; font-size: 9px; opacity: 0.8; }
  #speeds button.last { color: var(--txt); }
  #speeds button.last::before { content: '▶ '; font-size: 9px; }
  #speeds-pop:not(.hidden) { display: flex; position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); z-index: 30; justify-content: space-between; padding: 4px; box-shadow: var(--ui-edge), 0 10px 26px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, rgba(20, 30, 50, 0.97), rgba(9, 14, 26, 0.97)); }
  #speeds-pop button { flex: 1; padding: 9px 0; font-size: 13px; }
  .wx { order: 4; margin-left: auto; padding: 4px 7px; font-size: 11.5px; }
  .wx .se, .wx .wx-n, .wx .wx-next { display: none; }
  .rwy { order: 5; padding: 4px 7px; font-size: 11.5px; }
  .kpi { order: 7; padding: 0 7px; }
  .kpi:first-child { padding-left: 2px; }
  .hud-r > .kpi:nth-child(2) { margin-right: auto; }
  .kpi span { font-size: 8.5px; letter-spacing: 0.12em; }
  .kpi b { font-size: 13px; }
  .score-chip { order: 8; }
  .ai-btn { order: 9; padding: 5px 7px; }
  .rank-btn { order: 10; padding: 3px 6px; }
  .role-btn { order: 11; padding: 5px 8px; gap: 3px; font-size: 11px; }
  .role-btn .rb-t { display: none; }

  /* Funk eingeklappt: eine Zeile mit der neuesten Meldung – antippen klappt ihn auf */
  #log-wrap.min { flex-direction: row; align-items: center; }
  #log-wrap.min .log-head { order: 2; flex: 0 0 auto; border: 0; padding: 3px 5px 3px 0; background: none; }
  #log-wrap.min .log-head > span:first-child, #log-wrap.min #ptt-btn { display: none; }
  #log-wrap.min #log { order: 1; display: block; flex: 1; min-width: 0; overflow: hidden; padding: 6px 4px 6px 9px; cursor: pointer; }
  #log-wrap.min .lg { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 0; padding-left: 0; }
  #log-wrap.min .lg:last-child { display: block; }

  /* Werkzeugleiste: eingeklappt nur „Mehr“ und Beschriftungen, aufgeklappt als Raster */
  #map-ctrls { padding: 4px; gap: 4px; border-radius: 12px; }
  #map-ctrls .icon-btn { width: 36px; height: 36px; }
  #map-more { display: inline-flex; order: -1; }
  #map-ctrls #z-in, #map-ctrls #z-out { display: none; }
  #map-ctrls #z-out::after, #map-ctrls #t-noise::after { display: none; }
  #map-ctrls #z-out, #map-ctrls #t-noise { margin-bottom: 0; }
  #map-ctrls:not(.open) .icon-btn:not(#map-more):not(#t-labels) { display: none; }
  #map-ctrls.open { display: grid; grid-template-columns: repeat(3, 36px); }
  #map-ctrls.open #map-more { color: #fff; background: color-mix(in srgb, var(--role) 22%, transparent); }
  .tk-l { padding: 0 8px; letter-spacing: 0.1em; font-size: 10px; }
}
/* Hochformat: zweite Zeile der Kopfleiste, Werkzeugleiste oben rechts, Panel als Blatt von unten */
@media (max-width: 760px) {
  #log-wrap { left: 6px; right: 52px; width: auto; top: calc(var(--hud-h) + 6px); max-height: 38vh; }
  #game #map-ctrls, #game.tw-layout #map-ctrls, #game.role-manager #map-ctrls, #game.role-observer #map-ctrls { top: calc(var(--hud-h) + 6px); bottom: auto; right: 6px; }
  /* Meldungen unter dem Funkstreifen, nicht über der Werkzeugleiste */
  #toasts { left: 8px; right: 52px; width: auto; transform: none; top: calc(var(--hud-h) + 50px); }
  #game.tw-layout #toasts { top: calc(var(--hud-h) + 10px); }
  /* unten: Panel-Knopf als Pfeil nach oben/unten, Ticker lässt ihm Platz */
  #panel-toggle { transform: rotate(90deg); }
  #game.tw-layout #panel-toggle.collapsed { bottom: calc(var(--rail-h) + 12px); }
  #ticker { left: 6px; right: 6px; bottom: 6px; height: 28px; }
  #panel.collapsed ~ #ticker { right: 52px; }
  #game.tw-layout { --rail-h: 262px; }
  .bay-h { padding-top: 3px; }
}
/* kleine Handys (iPhone SE, Mini): enger setzen, damit die zweite Zeile nicht umbricht */
@media (max-width: 400px) {
  #hud { column-gap: 4px; padding-left: 6px; padding-right: 6px; }
  .kpi { padding: 0 5px; }
  .score-chip { gap: 4px; padding: 2px 5px; }
}
/* Querformat am Handy: Kopfleiste in einer Zeile, flachere Streifenleiste, schmaler Funk */
@media (max-height: 500px) and (min-width: 761px) {
  #hud::before { display: none; }
  .wx { margin-left: 0; }
  .hud-r > .kpi:nth-child(2) { margin-right: 0; }
  .hud-r > .kpi:first-child { margin-left: auto; }
  #log-wrap { width: 340px; max-height: 46vh; }
  #game.tw-layout { --rail-h: 168px; }
  #ticker { height: 26px; }
}
/* Mitfliegen am Handy: die Leiste liegt als schmaler Streifen in voller Breite am Rand, statt sich über das ganze
   Bild zu ziehen (oben und unten gleichzeitig gesetzt); Cockpit, Drohne und Einwinken oben, sonst unten */
@media (max-width: 760px) {
  #ride .rd-bar { left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: wrap; justify-content: center; gap: 6px 8px; padding: 6px 8px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  #ride .rd-t { flex: 1 1 calc(100% - 40px); min-width: 0; text-align: left; font-size: 12px; line-height: 1.35; }
  /* Turmblick: Spiel-Oberfläche bleibt sichtbar (Ticker, Panel-Knopf, Streifen unten) – Leiste oben unter dem Funk */
  #ride.tower .rd-bar { top: calc(var(--hud-h, 56px) + 48px); bottom: auto; right: 52px; }
  #game.towerview #toasts { top: calc(var(--hud-h) + 118px); }
  #ride.cine3d .rd-bar { top: calc(9vh + 8px); bottom: auto; }
  #ride.cockpit .rd-bar, #ride.drone .rd-bar, #ride.marshal .rd-bar { top: calc(var(--hud-h, 56px) + 6px); bottom: auto; }
  /* Fensterplatz im Hochformat: größeres Fenster in Flugzeugform */
  #ride.window .rd-win, #ride.v3d.window .rd-win { top: 46%; width: min(78vw, 340px); height: min(calc(min(78vw, 340px) * 1.38), 56vh); }
}
/* Mitfliegen im Querformat am Handy: Leiste einzeilig (Text gekürzt), Fenster passt zwischen Kopfleiste und Leiste */
@media (max-height: 500px) and (min-width: 761px) {
  #ride .rd-bar { left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: nowrap; gap: 8px; padding: 5px 8px; top: auto; bottom: 8px; }
  #ride .rd-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  #ride .rd-help { display: none; }
  #ride.cockpit .rd-bar, #ride.drone .rd-bar, #ride.marshal .rd-bar { top: calc(var(--hud-h, 44px) + 6px); bottom: auto; }
  #ride.tower .rd-bar { top: calc(var(--hud-h, 44px) + 8px); bottom: auto; left: 356px; right: 56px; }
  #ride.cine3d .rd-bar { top: calc(9vh + 8px); bottom: auto; }
  #ride.window .rd-win, #ride.v3d.window .rd-win { top: calc((var(--hud-h, 44px) + 100vh - 48px) / 2); height: calc(100vh - var(--hud-h, 44px) - 100px); width: calc((100vh - var(--hud-h, 44px) - 100px) / 1.38); }
}

/* Wettermenü (Tipp auf die Wetteranzeige) */
#hud-wx { cursor: pointer; }
#hud-wx:hover { border-color: rgba(148, 178, 214, 0.4); background: rgba(148, 178, 214, 0.1); }
.wxm { font-size: 13px; color: #d5deea; }
.wxm-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; align-items: stretch; }
.wxm-now, .wxm-wind { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(148, 178, 214, 0.06); box-shadow: inset 0 0 0 1px rgba(148, 178, 214, 0.14); }
.wxm-now > div, .wxm-wind > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wxm-now b { font: 700 22px var(--ui-font, inherit); color: #f8fafc; }
.wxm-wind b { font: 700 18px var(--mono); color: #f8fafc; }
.wxm-now span, .wxm-wind span { color: #cbd5e1; }
.wxm small { color: #8ea3bd; font-size: 12px; line-height: 1.35; }
.wxm .wxm-cells { color: #fca5a5; }
.wxm-ico { width: 46px; height: 46px; flex-shrink: 0; color: #e2e8f0; }
.wxm-ico .a { fill: #fcd34d; stroke: #fcd34d; }
.wr { width: 118px; height: 118px; flex-shrink: 0; }
.wr-ring { fill: rgba(4, 8, 16, 0.5); stroke: rgba(148, 178, 214, 0.28); stroke-width: 1; }
.wr-tick { stroke: rgba(148, 178, 214, 0.5); stroke-width: 1.2; }
.wr-l { fill: #8ea3bd; font: 700 9px var(--ui-font, sans-serif); text-anchor: middle; }
.wr-cell { fill: rgba(239, 68, 68, 0.35); stroke: rgba(248, 113, 113, 0.8); stroke-width: 1; }
.wr-shower { fill: rgba(56, 189, 248, 0.22); stroke: rgba(125, 211, 252, 0.6); stroke-width: 1; }
.wr-rwy { fill: #334155; stroke: #64748b; stroke-width: 0.8; }
.wr-cl { stroke: #e2e8f0; stroke-width: 0.8; stroke-dasharray: 3 2.5; }
.wr-rn { fill: #8ea3bd; font: 700 8.5px var(--mono, monospace); text-anchor: middle; }
.wr-rn.on { fill: var(--role, #38d6f5); }
.wr-arrow { stroke: #38d6f5; stroke-width: 3; stroke-linecap: round; }
.wr-head { fill: #38d6f5; }
.wxm-warn { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(251, 191, 36, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4); color: #fde68a; font-size: 12.5px; line-height: 1.4; }
.wxm-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wxm-tab th { text-align: left; font: 600 10px var(--ui-font, inherit); letter-spacing: 0.12em; text-transform: uppercase; color: #8ea3bd; padding: 0 8px 4px 0; }
.wxm-tab td { padding: 6px 8px 6px 0; border-top: 1px solid rgba(148, 178, 214, 0.1); font-family: var(--mono); white-space: nowrap; }
.wxm-tab td:first-child { font-family: inherit; white-space: normal; }
.wxm-tab tr.on td { color: #f8fafc; }
.wxm-tab tr.on td:first-child b { color: var(--role, #38d6f5); }
.wxm-tab small { color: #8ea3bd; }
.wxm-tab td.bad { color: #fca5a5; }
.wxm-lims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wxm-lim { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 9px; background: rgba(148, 178, 214, 0.06); box-shadow: inset 0 0 0 1px rgba(148, 178, 214, 0.14); }
.wxm-lim span { font-size: 11px; color: #8ea3bd; line-height: 1.2; }
.wxm-lim b { font-family: var(--mono); font-size: 14px; color: #f1f5f9; }
.wxm-lim i { font-style: normal; font-size: 11px; font-weight: 700; }
.wxm-lim.good i { color: var(--good, #4ade80); }
.wxm-lim.warn { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5); }
.wxm-lim.warn i { color: #fcd34d; }
.wxm-lim.bad { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.6); background: rgba(248, 113, 113, 0.08); }
.wxm-lim.bad i { color: #fca5a5; }
.wxm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.wxm-grid .wide { grid-column: 1 / -1; }
.wxm-grid span { display: block; font: 600 10px var(--ui-font, inherit); letter-spacing: 0.12em; text-transform: uppercase; color: #8ea3bd; }
.wxm-grid b { font-size: 13.5px; color: #f1f5f9; }
.modal-box p.wxm-atis { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: #a7f3d0; background: rgba(4, 8, 16, 0.5); border-radius: 8px; padding: 8px 10px; margin: 0; }
@media (max-width: 760px) {
  .wxm-top { grid-template-columns: 1fr; gap: 8px; }
  .wxm-lims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr { width: 104px; height: 104px; }
  .wxm-tab { font-size: 11.5px; }
  .wxm-tab td { padding-right: 6px; }
}

/* Info-Karte am Handy: eingeklappt Kopf, Kurzzeile und Aktionen – Daten, Kennzeichen und Markieren unter „Details“ */
.i-brief, .i-moreb { display: none; }
@media (max-width: 760px), (max-height: 500px) {
  #game #info.acinfo:not(.more) .i-reg, #game #info.acinfo:not(.more) .i-grid, #game #info.acinfo:not(.more) .i-slot, #game #info.acinfo:not(.more) .i-marks, #game #info.acinfo:not(.more) .i-fee, #game #info.acinfo:not(.more) .i-folnote { display: none; }
  #game #info.acinfo:not(.more) .i-brief { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: #dbe4ef; }
  #game #info.acinfo .i-moreb { display: block; width: 100%; margin-top: 8px; padding: 5px 0 1px; border: 0; border-top: 1px solid rgba(148, 178, 214, 0.14); background: none; color: #8ea3bd; font: 600 11.5px var(--ui-font, inherit); letter-spacing: 0.08em; }
  #game #ctx > #info.acinfo:not(.more) { min-height: 0; }
  #game #info.acinfo .i-head .i-sub { font-size: 11.5px; }
  #game #info.acinfo .i-cs { font-size: 17px; }
  /* Schließen oben rechts in der Ecke statt in einer eigenen Zeile */
  #game #info.acinfo .i-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }
  #game #info.acinfo .i-head > div:first-child { padding-right: 34px; }
  #game #info.acinfo .i-btns { flex-basis: 100%; }
}

/* Wetter bestimmen (im Wettermenü) */
.wxc { margin-top: 12px; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(56, 214, 245, 0.07), rgba(56, 214, 245, 0.02)); box-shadow: inset 0 0 0 1px rgba(56, 214, 245, 0.25); display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: #d5deea; }
.wxc.locked { background: rgba(148, 178, 214, 0.06); box-shadow: inset 0 0 0 1px rgba(148, 178, 214, 0.18); color: #8ea3bd; }
.wxc-h { display: flex; align-items: center; gap: 8px; }
.wxc-h b { white-space: nowrap; font: 700 13px var(--ui-font, inherit); letter-spacing: 0.1em; text-transform: uppercase; color: #38d6f5; }
.wxc-mode { white-space: nowrap; font-size: 11.5px; padding: 1px 8px; border-radius: 20px; background: rgba(148, 178, 214, 0.12); color: #cbd5e1; }
.wxc-mode.man { background: rgba(251, 191, 36, 0.18); color: #fde68a; }
.wxc-h .mini { margin-left: auto; }
.wxc-kinds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.wxc-k { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 0; border-radius: 10px; background: rgba(4, 8, 16, 0.45); box-shadow: inset 0 0 0 1px rgba(148, 178, 214, 0.18); color: #cbd5e1; font-size: 11.5px; cursor: pointer; }
.wxc-k .ico { width: 24px; height: 24px; }
.wxc-k .ico .a { fill: #fcd34d; stroke: #fcd34d; }
.wxc-k:hover { box-shadow: inset 0 0 0 1px rgba(56, 214, 245, 0.55); color: #fff; }
.wxc-k.on { background: rgba(56, 214, 245, 0.18); box-shadow: inset 0 0 0 2px #38d6f5; color: #fff; }
.wxc-rvr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #8ea3bd; }
.wxc-rvr .mini.on { color: #fff; border-color: #38d6f5; background: rgba(56, 214, 245, 0.18); }
.wxc-row { display: grid; grid-template-columns: 70px 1fr 62px; align-items: center; gap: 10px; }
.wxc-row span { font-size: 12px; color: #8ea3bd; }
.wxc-row b { font-family: var(--mono); color: #f1f5f9; text-align: right; }
.wxc-row input[type=range] { width: 100%; accent-color: #38d6f5; height: 28px; }
.wxc small { color: #8ea3bd; font-size: 11.5px; line-height: 1.4; }
.wx-hold { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 2px; background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.8); }
@media (max-width: 760px) {
  .wxc-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wxc-row { grid-template-columns: 58px 1fr 54px; gap: 8px; }
  .wxc-h b { font-size: 12px; letter-spacing: 0.06em; }
}

/* ======================================================================================================
   RECHTE SEITE IM MENÜ-STIL: Panel, Auswahl und Entscheidung wie die Karten im Hauptmenü – dunkle Fläche mit
   feiner Kante, leuchtender Akzentbalken oben links, Abschnitte in gesperrten Großbuchstaben mit auslaufender
   Linie, Werte als Kacheln mit Akzentkante. Desktop: eine Auswahl ersetzt das Panel als eigene Ansicht über die
   volle Höhe („‹ Zurück“ führt zum Leitstand), statt als Karte darüber zu liegen.
   ====================================================================================================== */
#panel, #game #ctx > #info, #game #ctx > #decision { border-radius: 6px; }
#panel, #game #ctx > #info { background: linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(6, 12, 22, 0.95)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 24%, rgba(148, 178, 214, 0.1)), 0 20px 60px rgba(0, 0, 0, 0.5); }
#panel::before { right: auto; width: 96px; height: 3px; background: var(--role); box-shadow: 0 0 12px var(--role); opacity: 1; }
#game #ctx > #info::before { content: ''; position: absolute; left: 0; top: 0; width: 96px; height: 3px; background: var(--role); box-shadow: 0 0 12px var(--role); z-index: 2; pointer-events: none; }
#panel-toggle { border-radius: 6px; }
/* Kopf und Abschnitte */
.p-head { padding: 14px 16px 11px; background: none; border-bottom: 1px solid rgba(148, 178, 214, 0.1); }
.p-title { font-family: var(--mm-font); font-weight: 700; font-size: 16px; letter-spacing: 0.14em; }
.p-title small { letter-spacing: 0.02em; }
.p-sec { font-family: var(--mm-font); font-weight: 700; font-size: 10.5px; letter-spacing: 0.24em; color: var(--role); margin: 16px 2px 8px; align-items: center; }
.p-sec::before { display: none; }
.p-sec::after { content: ''; order: 1; flex: 1 1 auto; height: 1px; margin-left: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--role) 55%, transparent), transparent); }
.p-sec > :not(:first-child) { order: 2; margin-left: 8px; }
.p-sec > :last-child:not(:first-child), .p-sec > .cnt { margin-left: 8px; }
/* Kacheln und Karten: eckiger, Akzentkante links */
.kpis .k { background: rgba(255, 255, 255, 0.04); border: 0; border-left: 2px solid color-mix(in srgb, var(--role) 65%, transparent); border-radius: 0 4px 4px 0; box-shadow: none; }
.kpis .k span { font-family: var(--mm-font); letter-spacing: 0.18em; }
#panel .card, #panel .cr-hero, #panel .dock-open, #panel .sl, #panel .dk-radar, #panel .rwy-box, #panel .stand-row, #panel .fleet-item, #panel .hint, #panel #hint { border-radius: 4px; }
#panel .btn, #game #ctx .btn { border-radius: 4px; }

/* Auswahl: Titel wie im Menü, Abschnitte, Datenkacheln */
.i-top { display: none; }
#info .i-cs { font-family: var(--mm-font); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.i-sec { display: flex; align-items: center; gap: 10px; margin: 14px 0 7px; font: 700 10.5px var(--mm-font); letter-spacing: 0.24em; text-transform: uppercase; color: var(--role); }
.i-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--role) 50%, transparent), transparent); }
#info .i-grid { border-top: 0; padding-top: 0; gap: 6px; }
#info .i-sec + .i-grid { margin-top: 0; }
#info .i-grid > div { background: rgba(255, 255, 255, 0.04); border-left: 2px solid color-mix(in srgb, var(--role) 60%, transparent); padding: 6px 9px; min-width: 0; }
#info .i-marks { margin-top: 12px; }
@media (max-width: 760px), (max-height: 500px) {
  #game #info.acinfo:not(.more) .i-sec { display: none; }
}
@media (min-width: 1001px) {
  /* Kopfzeile wie im Menü (Art der Auswahl, Schließen), das ✕ im Kopf entfällt */
  #game #ctx > #info .i-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 2px 0 8px; border-bottom: 1px solid rgba(148, 178, 214, 0.12); }
  .i-back { background: none; border: 0; padding: 2px 0; color: var(--role); font: 700 12px var(--mm-font); letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
  .i-back:hover { color: #fff; text-shadow: 0 0 10px var(--role); }
  .i-kind { font: 600 10.5px var(--mm-font); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(203, 213, 225, 0.6); }
  #game #ctx > #info .i-close { display: none; }
  #game #ctx > #info { padding: 14px 16px 14px 18px; background: linear-gradient(180deg, rgb(12, 20, 35), rgb(7, 12, 22)); }
  #game #ctx > #info .i-cs { font-size: 22px; }
  #game #ctx > #info .i-grid > div { padding: 5px 8px; }
  #game #ctx > #info .i-grid b { font-size: 12.5px; }
  #game #ctx { container-type: inline-size; }
  /* Auswahl und Entscheidung oben in der rechten Spalte, das Panel rückt darunter (nichts liegt verdeckt darunter);
     das Panel behält mindestens 260 px, die Auswahl scrollt bei Bedarf in sich */
  #game.ctx-on #panel { top: calc(var(--hud-h) + 16px + var(--ctx-h, 0px)); transition: transform 0.25s, top 0.18s; }
  #game #ctx { max-height: calc(100vh - var(--hud-h) - 16px - 268px); }
  #game.no-panel #ctx, #game:has(#panel.collapsed) #ctx { max-height: calc(100vh - var(--hud-h) - 16px); }
  /* eingeklapptes Panel: Werkzeuge, Ticker und Streifen rücken neben die Auswahl */
  #game.ctx-on #map-ctrls.full { right: calc(var(--panel-w) + 16px); }
  #game.ctx-on #panel.collapsed ~ #ticker, #game.ctx-on #panel.collapsed ~ #rail { right: calc(var(--panel-w) + 16px); }
}
/* breite rechte Spalte (Tower): Flugdaten in drei Spalten, Strecke doppelt breit – mehr Platz fürs Panel darunter */
@container (min-width: 380px) {
  #game #ctx > #info.acinfo .i-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #game #ctx > #info.acinfo .i-gmain > div:nth-child(2) { grid-column: span 2; }
}

/* Verträge als kompakte Zeilen (Airline-Farbe links, Strecke, Zufriedenheit, Restlaufzeit, Kündigen) */
.ct-list { column-span: all; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 6px 14px; margin-bottom: 14px; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 64px auto; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; background: rgba(12, 20, 34, 0.66); border-left: 3px solid var(--al, #64748b); border-radius: 0 4px 4px 0; font-size: 13px; }
.ct-row:hover { background: rgba(22, 34, 56, 0.8); }
.ct-main { min-width: 0; }
.ct-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f1f5f9; }
.ct-main small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-sat { display: flex; flex-direction: column; gap: 3px; }
.ct-sat .bar { margin: 0; }
.ct-sat small { font-size: 10.5px; color: var(--muted); }
.ct-days { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.ct-days.warn { color: var(--warn); }
.ct-row .mini { white-space: nowrap; }
@media (max-width: 760px) {
  .ct-list { grid-template-columns: 1fr; }
  .ct-row { grid-template-columns: minmax(0, 1fr) 64px auto; }
  .ct-sat { display: none; }
}

/* Startdialog: Stadt mit Würfel */
.mm-city { display: flex; gap: 6px; align-items: stretch; }
.mm-city input { flex: 1; min-width: 0; }
.mm-dice { flex: none; width: 40px; border-radius: 4px; border: 1px solid rgba(56, 214, 245, 0.3); background: rgba(8, 14, 26, 0.75); color: #fff; font-size: 17px; cursor: pointer; }
.mm-dice:hover { border-color: var(--mm-cyan); box-shadow: 0 0 0 2px rgba(56, 214, 245, 0.2); }

/* ===================== GROSSFLUGHÄFEN (Hub-Modus) ===================== */
#hub { position: fixed; inset: 0; z-index: 30; background: #0b1220; --hb-side: 400px; --hb-top: 56px; font-family: var(--sans); }
#hub.noside { --hb-side: 0px; }
#hb-map { position: absolute; left: 0; top: 0; touch-action: none; cursor: grab; }
#hb-map:active { cursor: grabbing; }
.hb-top { position: absolute; left: 0; right: 0; top: 0; height: var(--hb-top); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: linear-gradient(180deg, rgba(8,12,22,.95), rgba(8,12,22,.84)); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); z-index: 5; font-family: var(--mm-font); }
.hb-top::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px; background: var(--mm-cyan); box-shadow: 0 0 10px var(--mm-cyan); }
.hb-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.hb-btn:hover { background: rgba(56,214,245,.14); border-color: var(--mm-cyan); }
.hb-title { display: flex; flex-direction: column; min-width: 0; }
.hb-title b { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-title small { font-family: var(--sans); font-size: 11px; color: var(--muted); white-space: nowrap; }
.hb-clock { display: flex; flex-direction: column; align-items: center; padding: 0 6px; }
.hb-clock b { font-family: var(--mono); font-size: 20px; color: #fff; }
.hb-clock small { font-size: 11px; color: var(--mm-amber); font-family: var(--sans); }
.hb-speeds { display: flex; gap: 2px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.hb-speeds button { border: 0; background: transparent; border-radius: 7px; padding: 5px 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hb-speeds button.on { background: rgba(56,214,245,.2); color: #fff; box-shadow: inset 0 0 0 1px rgba(56,214,245,.5); }
.hb-chip { border: 1px solid var(--line-2); background: rgba(255,255,255,.05); border-radius: 9px; padding: 6px 10px; font-size: 12.5px; font-family: var(--mono); white-space: nowrap; }
button.hb-chip:hover { border-color: var(--mm-cyan); background: rgba(56,214,245,.1); }
.hb-chip.bad { border-color: var(--bad); color: #fecaca; animation: hb-blink 1.4s infinite; }
@keyframes hb-blink { 50% { box-shadow: 0 0 0 3px rgba(248,113,113,.25); } }
.hb-score { display: flex; gap: 10px; margin-left: auto; font-family: var(--mono); font-size: 13px; }
.hb-score .bad { color: var(--bad); }
.hb-side { position: absolute; top: calc(var(--hb-top) + 8px); right: 8px; bottom: 8px; width: calc(var(--hb-side) - 8px); display: flex; flex-direction: column; gap: 8px; z-index: 4; transition: transform .25s; }
#hub.noside .hb-side { transform: translateX(calc(100% + 20px)); }
.hb-radarbox { position: relative; height: 230px; flex: none; border-radius: 12px; overflow: hidden; border: 1px solid rgba(52,211,153,.35); background: #031410; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
#hb-radar { width: 100%; height: 100%; display: block; cursor: crosshair; }
.hb-rzoom { position: absolute; right: 7px; top: 6px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(52,211,153,.4); background: rgba(3,20,16,.8); color: rgba(167,243,208,.9); font: 600 10.5px 'JetBrains Mono', monospace; cursor: pointer; }
.hb-rzoom.on { border-color: rgba(103,232,249,.7); color: #a5f3fc; }
.hb-rlabel { position: absolute; left: 10px; top: 7px; font-family: var(--mm-font); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(110,231,183,.8); pointer-events: none; }
.hb-strips { flex: 1; min-height: 0; overflow-y: auto; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); padding: 6px 8px 8px; }
.hs-sec { margin-bottom: 6px; }
.hs-h { font-family: var(--mm-font); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-cyan); padding: 6px 2px 4px; border-bottom: 1px solid rgba(56,214,245,.25); margin-bottom: 4px; }
.hs-h span { color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.hs-row { border: 1px solid var(--line); border-left: 3px solid #475569; border-radius: 8px; padding: 5px 7px; margin: 4px 0; background: rgba(15,23,42,.6); font-size: 12px; }
.hs-row.arr { border-left-color: var(--good); }
.hs-row.dep { border-left-color: #38bdf8; }
.hs-row.x { border-left-color: #c084fc; }
.hs-row.g { border-left-color: var(--ground); }
.hs-row.ga { border-left-color: var(--bad); opacity: .8; }
.hs-row.req { box-shadow: inset 0 0 0 1px rgba(245,166,35,.55); background: rgba(66,45,10,.35); }
.hs-row.sel { box-shadow: inset 0 0 0 1px var(--mm-cyan); background: rgba(8,47,73,.55); }
.hs-row.talking { border-color: #67e8f9; box-shadow: 0 0 0 1px rgba(103,232,249,.6), 0 0 12px rgba(103,232,249,.22); }
.hs-row.talking .hs-main b::after { content: ' 🔊'; font-size: .85em; }
.hs-row.talking.live { animation: talkGlow 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hs-row.talking.live { animation: none; } }
.hr-l.speaking { background: linear-gradient(90deg, rgba(103,232,249,.16), transparent 80%); border-radius: 4px; }
.hs-main { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.hs-main b { font-family: var(--mono); font-size: 13px; color: #fff; }
.hs-ty { font-family: var(--mono); color: var(--muted); font-size: 11px; }
.hs-rw { font-family: var(--mono); background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 5px; font-size: 11px; }
.hs-d { margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: 11px; }
.hs-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.hs-sub .good, .hb-goals .ok { color: var(--good); }
.hs-sub .warn { color: var(--warn); }
.hs-sub .bad { color: var(--bad); }
.hs-sub .dim { color: var(--dim); }
.hs-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
.hs-b { border: 1px solid var(--line-2); background: rgba(255,255,255,.07); border-radius: 7px; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.hs-b.go { background: linear-gradient(180deg, rgba(14,165,233,.35), rgba(3,105,161,.35)); border-color: rgba(56,189,248,.7); color: #e0f2fe; }
.hs-b.go:hover { background: linear-gradient(180deg, rgba(56,189,248,.55), rgba(2,132,199,.5)); }
.hs-b.ghost { color: #fecaca; border-color: rgba(248,113,113,.45); }
.hs-b kbd, .hb-help kbd { font-family: var(--mono); font-size: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 0 4px; margin-left: 3px; }
.hs-ok { color: var(--good); font-size: 11.5px; font-weight: 600; }
.hs-foot { color: var(--dim); font-size: 11px; padding: 4px 2px 0; }
.hb-radio { flex: none; height: 150px; overflow-y: auto; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; font-size: 11.5px; font-family: var(--mono); backdrop-filter: blur(10px); }
.hr-l { padding: 1px 0; color: #cbd5e1; cursor: default; }
.hr-l.atc { color: #a7f3d0; }
.hr-l b { color: #fff; margin-right: 4px; }
.hr-t { color: var(--dim); margin-right: 6px; }
.hb-goal { position: absolute; left: 10px; top: calc(var(--hb-top) + 10px); z-index: 4; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 12px; backdrop-filter: blur(10px); max-width: 300px; }
.hb-goal > b { font-family: var(--mm-font); letter-spacing: .06em; font-size: 13px; }
.hb-goals { color: var(--muted); margin-top: 4px; display: grid; gap: 2px; }
.hb-info { position: absolute; left: 10px; bottom: 12px; z-index: 4; width: min(420px, calc(100vw - var(--hb-side) - 80px)); background: var(--glass-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; backdrop-filter: blur(10px); display: none; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.hb-info.show { display: block; }
.hb-info::before { content: ''; position: absolute; left: 12px; top: -1px; width: 80px; height: 2px; background: var(--mm-cyan); }
.hi-h { display: flex; align-items: baseline; gap: 8px; }
.hi-h b { font-family: var(--mono); font-size: 15px; }
.hi-h span { color: var(--muted); flex: 1; }
.hb-x { border: 0; background: transparent; color: var(--muted); font-size: 14px; }
.hi-r { color: #cbd5e1; margin-top: 3px; }
.hb-ctrls { position: absolute; right: calc(var(--hb-side) + 12px); bottom: 14px; z-index: 4; display: flex; flex-direction: column; gap: 6px; transition: right .25s; }
.hb-toasts { position: absolute; left: 50%; top: calc(var(--hb-top) + 10px); transform: translateX(calc(-50% - var(--hb-side) / 2)); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(560px, 90vw); }
.hb-toast { background: rgba(15,23,42,.94); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 10px; padding: 7px 12px; font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: hb-in .25s ease-out; transition: opacity .35s, transform .35s; }
.hb-toast.warn { border-left-color: var(--warn); }
.hb-toast.bad { border-left-color: var(--bad); background: rgba(69,10,10,.92); }
.hb-toast.good { border-left-color: var(--good); }
.hb-toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes hb-in { from { opacity: 0; transform: translateY(-8px); } }
.hb-modal h2 { font-family: var(--mm-font); letter-spacing: .08em; text-transform: uppercase; }
.hb-msub { color: var(--muted); margin: -4px 0 12px; }
.hb-mbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hb-help { padding-left: 18px; line-height: 1.5; font-size: 14px; }
.hb-help li { margin: 6px 0; }
.hb-cfgrow { display: block; width: 100%; text-align: left; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); border-radius: 10px; padding: 9px 12px; margin: 6px 0; }
.hb-cfgrow.on { border-color: var(--mm-cyan); background: rgba(56,214,245,.1); }
.hb-cfgrow b { display: block; font-size: 14px; }
.hb-cfgrow small { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.hb-cfgrow .bad { color: var(--bad); }
.hb-cfgrow .good { color: var(--good); }
.hb-stars { font-size: 44px; letter-spacing: 8px; text-align: center; margin: 4px 0 10px; }
.hb-stars span { color: rgba(148,163,184,.3); }
.hb-stars span.on { color: #fbbf24; text-shadow: 0 0 18px rgba(251,191,36,.6); }
.hb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hb-stats div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; }
.hb-stats b { display: block; font-family: var(--mono); font-size: 22px; }
.hb-stats b.bad { color: var(--bad); }
.hb-stats small { color: var(--muted); font-size: 11.5px; }
.hb-new { text-align: center; color: #fde68a; font-weight: 700; }
/* Menü: Liste und Seitenkarte */
.hub-st i { font-style: normal; color: rgba(148,163,184,.35); }
.hub-st i.on { color: #fbbf24; }
.hub-card .hub-map { background: #0b1626; border-bottom: 1px solid var(--line); padding: 8px; }
.hub-svg { width: 100%; height: auto; display: block; }
.hub-sub { color: rgba(226,232,240,.8); font-size: 13px; margin: 6px 0; }
/* Handy */
@media (max-width: 760px), (max-height: 500px) {
  #hub { --hb-top: 50px; --hb-side: 0px; }
  .hb-top { gap: 6px; padding: 0 6px; overflow-x: auto; }
  .hb-title small, #hb-wind, .hb-goal .hb-goals { display: none; }
  .hb-title b { font-size: 12px; max-width: 120px; }
  .hb-side { left: 6px; right: 6px; width: auto; top: auto; height: 42vh; bottom: 6px; }
  .hb-radarbox { display: none; }
  .hb-radio { height: 64px; }
  #hub.noside .hb-side { transform: translateY(calc(100% + 20px)); }
  .hb-ctrls { right: 10px; bottom: calc(42vh + 14px); }
  #hub.noside .hb-ctrls { bottom: 14px; }
  .hb-info { bottom: calc(42vh + 12px); width: calc(100vw - 70px); }
  #hub.noside .hb-info { bottom: 12px; }
  .hb-goal { top: calc(var(--hb-top) + 6px); padding: 5px 8px; }
  .hb-toasts { transform: translateX(-50%); }
}
/* Handy hochkant: Kopfleiste zweizeilig – oben Menü, Uhr, Tempo, KI; unten Betriebsrichtung und Zähler */
@media (max-width: 560px) {
  #hub { --hb-top: 84px; }
  .hb-top { flex-wrap: wrap; align-content: center; row-gap: 5px; overflow: visible; padding: 4px 6px; }
  .hb-top::before { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .hb-title { display: none; }
  .hb-clock { flex-direction: row; align-items: baseline; gap: 6px; padding: 0 2px; }
  .hb-clock b { font-size: 17px; }
  .hb-clock small { font-size: 10px; white-space: nowrap; }
  .hb-speeds { margin-left: auto; }
  .hb-speeds button { padding: 4px 5px; }
  #hb-cfg { order: 2; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; padding: 5px 8px; }
  #hb-score { order: 2; margin-left: 0; gap: 7px; font-size: 12px; }
  #hb-ai { order: 2; padding: 5px 8px; }
  .hb-toasts { top: calc(var(--hb-top) + 46px); }
}

/* ===================== Minikarte (alle Modi) ===================== */
/* bei Bedarf oben in der rechten Spalte: Hauptspiel in #ctx (das Panel rückt darunter), Großflughäfen in .hb-side */
.minimap { position: relative; flex: 0 0 auto; order: -1; padding: 9px 12px 9px; border-radius: 6px; background: linear-gradient(180deg, rgb(16, 22, 34), rgb(8, 12, 20)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role, #38d6f5) 24%, rgba(148, 178, 214, 0.1)), 0 16px 40px rgba(0, 0, 0, 0.45); user-select: none; -webkit-user-select: none; }
.minimap::before { content: ''; position: absolute; left: 0; top: 0; width: 96px; height: 3px; background: var(--role, #38d6f5); box-shadow: 0 0 12px var(--role, #38d6f5); pointer-events: none; }
.minimap.hidden { display: none; }
.minimap canvas { display: block; margin: 0 auto; border-radius: 4px; cursor: crosshair; touch-action: none; }
.mmap-h { display: flex; justify-content: space-between; align-items: center; padding: 0 0 7px; font-family: var(--mm-font, inherit); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(203, 213, 225, 0.75); }
.mmap-x { border: 0; background: transparent; color: rgba(203, 213, 225, 0.7); font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 5px; cursor: pointer; }
.mmap-x:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.mmap-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 7px 0 0; font-size: 11px; color: rgba(203, 213, 225, 0.78); }
.mmap-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
#game.cinema #minimap, #game.photo #minimap, #game.replaying #minimap, #game.riding #minimap { display: none !important; }
/* schmal: #ctx liegt unten über dem Panel – Minikarte flacher */
@media (max-width: 1000px) {
  #minimap { --mm-max-h: 150px; }
}
@media (max-width: 760px) {
  #minimap { --mm-max-h: 120px; padding: 7px 9px; }
  .mmap-leg { display: none; }
}
/* Großflughäfen: oben in der Seitenleiste über dem Anflugradar */
.hb-side .minimap { order: 0; background: var(--glass); border-radius: 12px; box-shadow: none; border: 1px solid var(--line); }
.hb-side .minimap::before { display: none; }
.hb-btn.on { border-color: rgba(56, 214, 245, 0.6); background: rgba(56, 214, 245, 0.16); }
@media (max-width: 760px), (max-height: 500px) {
  #hb-minimap { --mm-max-h: 110px; }
}
/* Tower-Arbeitsplatz („Radar groß“): großes Radar, rechts Übersicht, Pistenstatus und Funk, darunter die Streifentafel */
#cwp { position: absolute; left: 8px; right: 8px; top: calc(var(--hud-h) + 8px); bottom: 8px; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 25vw, 380px); grid-template-rows: minmax(0, 1fr) clamp(210px, 31vh, 330px); grid-template-areas: "radar side" "rail side"; gap: 8px; }
#game.cwp-on #panel, #game.cwp-on #panel-toggle { visibility: hidden; }
#game.rail-min #cwp { grid-template-rows: minmax(0, 1fr) auto; }
#game.cwp-on #info, #game.cwp-on #map-ctrls { display: none !important; }
#game.cwp-on #toasts { z-index: 13; }
.cwp-radar { grid-area: radar; min-width: 0; min-height: 0; display: flex; }
.cwp-side { grid-area: side; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 0; background: var(--ui-bg); border-radius: var(--ui-r); box-shadow: var(--ui-edge), var(--ui-shadow); overflow: hidden; }
.cwp-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.cwp-head .ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--role, #38d6f5); }
.cwp-head small { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cwp-head .cwp-x { margin-left: auto; }
.cwp-mm { flex: 0 0 auto; }
.cwp-mm .minimap { --mm-max-h: 230px; order: 0; box-shadow: none; border: 1px solid var(--line); background: rgba(4, 9, 16, 0.55); padding: 7px 9px; }
.cwp-mm .minimap::before, .cwp-mm .mmap-x { display: none; }
.cwp-rwy { flex: 0 0 auto; }
.cwp-rwy .rwy-box { margin: 0; }
.cwp-log { flex: 1; min-height: 90px; display: flex; flex-direction: column; margin: 0 -10px; }
#cwp #log-wrap { position: static; width: auto; max-height: none; flex: 1; min-height: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
#cwp #radar-wrap { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: 100%; z-index: auto; display: flex; flex-direction: column; border-radius: var(--ui-r); background: rgba(3, 12, 9, 0.97); }
#cwp #radar-wrap canvas { flex: 0 0 auto; }
.cwp-rail { grid-area: rail; min-width: 0; min-height: 0; display: flex; }
#cwp #rail { position: relative; left: auto; right: auto; bottom: auto; flex: 1; height: auto; min-width: 0; z-index: auto; }
@media (max-width: 760px) {
  #cwp { left: 4px; right: 4px; top: calc(var(--hud-h) + 4px); bottom: 4px; gap: 6px; grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content 330px; grid-template-areas: "radar" "side" "rail"; overflow-y: auto; overscroll-behavior: contain; }
  #game.rail-min #cwp { grid-template-rows: max-content max-content max-content; }
  .cwp-radar, .cwp-side { min-height: auto; }
  .cwp-side { padding-bottom: 8px; }
  .cwp-mm .minimap { --mm-max-h: 130px; }
  .cwp-log { flex: 0 0 160px; margin-bottom: -8px; }
}
/* Querformat am Handy: Radar, Streifentafel und Übersicht nebeneinander (Pistenstatus und Funk bleiben im Panel-Platz aus) */
@media (max-height: 500px) and (min-width: 761px) {
  #cwp { top: calc(var(--hud-h) + 4px); bottom: 4px; left: 4px; right: 4px; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 200px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "radar rail side"; }
  #game.rail-min #cwp { grid-template-rows: minmax(0, 1fr); }
  .cwp-rwy, .cwp-log { display: none; }
  .cwp-mm .minimap { --mm-max-h: 150px; }
  #cwp .rail-bays { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  #cwp .bay { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--line); }
  #cwp .bay-list { flex: 0 0 auto; overflow: visible; }
  #cwp .bay-list > .empty { display: none; }
}
/* Spiel statt Webseite: kein Markieren von Text, kein Kopier-/Lupenmenü beim langen Drücken (Eingabefelder ausgenommen) */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Freigabe-Rückmeldung: Streifen leuchtet grün auf, das neue Häkchen springt; Stempel der gültigen Freigabe */
@keyframes clrflash { 0% { box-shadow: 0 0 0 2px #4ade80, 0 0 26px rgba(74, 222, 128, 0.7); background: rgba(74, 222, 128, 0.28); } 100% { box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35), 0 0 0 rgba(74, 222, 128, 0); } }
@keyframes tickpop { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
.fcard.flash { animation: clrflash 1.4s ease-out; }
.fcard.flash .fs-tk i.on { animation: tickpop 0.5s ease-out; }
.fcard.k-clr:not(.active):not(.emg) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(74, 222, 128, 0.45); }
.stamp { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 4px; font: 800 10.5px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: #052e16; background: #4ade80; }
.stamp.lu { background: #bae6fd; color: #082f49; }
/* Abstand zum Vordermann auf dem Streifen */
.gap { font: 700 10.5px var(--mono); padding: 0 3px; border-radius: 3px; }
.gap.g-ok { color: #86efac; }
.gap.g-tight { color: #fde68a; background: rgba(251, 191, 36, 0.16); }
.gap.g-bad { color: #fecaca; background: rgba(248, 113, 113, 0.3); animation: pulse 1.1s infinite; }
.fcard.gapbad .c-bar { background: #f87171 !important; }
/* Bahn reserviert (Lande- oder Startfreigabe erteilt) */
.rwy-box .state.resv { color: #86efac; }
/* Streifen am Finger */
.fcard[data-drag="1"] { cursor: grab; touch-action: pan-y; }
.drag-ghost { position: fixed; z-index: 70; pointer-events: none; opacity: 0.94; transform: scale(1.03) rotate(-0.6deg); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--accent) !important; margin: 0; }
/* Befehlsknöpfe: Symbol + kurzes Verb */
.cmd .ico { width: 14px; height: 14px; vertical-align: -2px; }
.stamp.hold { background: #fbbf24; color: #422006; }
.drag-ghost { background: linear-gradient(90deg, rgba(30, 45, 70, 0.98), rgba(14, 22, 38, 0.98)) !important; }
@media (max-width: 760px) { .bay-list { min-height: 30px; } }
.fs-act .rq.blk { color: #fecaca; background: rgba(248, 113, 113, 0.22); padding: 0 6px; border-radius: 4px; }
/* Pause gut sichtbar */
#pause-badge { position: absolute; left: 50%; top: calc(var(--hud-h) + 14px); transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border: 0; border-radius: 999px; background: rgba(120, 53, 15, 0.92); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.7), 0 10px 26px rgba(0, 0, 0, 0.45); color: #fef3c7; font: 600 13px var(--sans); cursor: pointer; animation: pausepulse 2s ease-in-out infinite; }
#pause-badge b { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fde68a; }
#pause-badge.hidden { display: none; }
@keyframes pausepulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.7), 0 10px 26px rgba(0, 0, 0, 0.45); } 50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45); } }
#game.cinema #pause-badge, #game.photo #pause-badge, #game.riding #pause-badge { display: none !important; }
@media (max-width: 760px) { #pause-badge span { display: none; } }

/* Großflughäfen: Mitfliegen in 3D */
.hb-ride { position: absolute; inset: 0; z-index: 3; }
.hb-ride.hidden { display: none; }
.hb-ride .hb-3d { position: absolute; left: 0; top: 0; width: calc(100% - var(--hb-side)); height: 100%; display: block; }
.hb-ride .hr-drag { position: absolute; left: 0; top: var(--hb-top); bottom: 0; width: calc(100% - var(--hb-side)); touch-action: none; cursor: grab; z-index: 1; }
.hb-ride .hr-drag:active { cursor: grabbing; }
.hb-ride .hr-bar { position: absolute; left: 10px; top: calc(var(--hb-top) + 10px); max-width: calc(100% - var(--hb-side) - 20px); z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--glass-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px 8px; font-size: 12.5px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hb-ride .hr-modes { display: flex; gap: 4px; }
.hb-ride .hr-bar button { background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 4px 9px; font: inherit; cursor: pointer; }
.hb-ride .hr-bar button.on { background: var(--mm-cyan); color: #04121a; border-color: transparent; font-weight: 700; }
.hb-ride .hr-t { color: var(--muted); }
.hb-ride .hr-t b { color: var(--text); }
.hb-ride .hr-load { position: absolute; left: calc(50% - var(--hb-side) / 2); top: 50%; transform: translate(-50%, -50%); background: var(--glass-2); padding: 10px 16px; border-radius: 10px; display: none; z-index: 3; }
.hb-ride.loading .hr-load { display: block; }
.hb-ride .hr-cockpit { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% - var(--hb-side)); pointer-events: none; z-index: 2; }
.hb-ride.cockpit .hr-cockpit { display: block; }
.hb-ride .hr-pl { position: absolute; top: 0; bottom: 24%; width: 7%; background: linear-gradient(90deg, #1b1f26, #2b313b); }
.hb-ride .hr-pl.l { left: 0; clip-path: polygon(0 0, 100% 0, 40% 100%, 0 100%); }
.hb-ride .hr-pl.r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%); }
.hb-ride .hr-glare { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(#1a1d23, #0d0f13); border-top: 3px solid #2f3540; display: flex; justify-content: center; align-items: center; }
.hb-ride .hr-pfd { display: flex; gap: 18px; align-items: center; background: #05070a; border: 2px solid #3a414d; border-radius: 8px; padding: 10px 16px; font: 700 13px ui-monospace, monospace; color: #e5e7eb; }
.hb-ride .hr-pfd span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 54px; }
.hb-ride .hr-pfd small { color: #9ca3af; font-size: 10px; }
.hb-ride .hr-pfd b { font-size: 18px; color: #fff; background: #000; padding: 1px 6px; border: 1px solid #fde047; }
.hb-ride .hr-fma { color: #4ade80; font-size: 14px; min-width: 90px !important; }
/* Fensterplatz: ovales Kabinenfenster in der hellen Kabinenwand */
.hb-ride .hr-winbox { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% - var(--hb-side)); overflow: hidden; pointer-events: none; z-index: 2; }
.hb-ride.window .hr-winbox { display: block; }
.hb-ride .hr-win { position: absolute; left: 50%; top: 50%; width: min(52vmin, 50vw); height: min(68vmin, 70vh); transform: translate(-50%, -48%); border-radius: 46% / 40%; box-shadow: 0 0 0 14px #cfc8bc, 0 0 0 22px #b9b1a3, 0 0 0 200vmax #e4dfd6, inset 0 0 40px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.35); pointer-events: none; z-index: 2; }
#hub.hb-riding .hb-goal, #hub.hb-riding .hb-info, #hub.hb-riding .hb-ctrls { display: none; }
#hub.hb-riding #hb-map { visibility: hidden; }
@media (max-width: 760px) {
  .hb-ride .hb-3d, .hb-ride .hr-drag, .hb-ride .hr-cockpit, .hb-ride .hr-winbox { width: 100%; }
  .hb-ride .hr-bar { max-width: calc(100% - 20px); }
  .hb-ride .hr-pfd { gap: 8px; padding: 6px 8px; }
  .hb-ride .hr-cockpit { bottom: 42vh; }
  #hub.noside .hb-ride .hr-cockpit { bottom: 0; }
}