:root {
  --bg: #0f1720; --panel: #16212e; --fg: #e7eef5; --muted: #9fb0c0;
  --line: #26364a; --accent: #4aa3ff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* schlägt display:flex der .btngroup */
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
header { padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
header h1 { margin: 0 0 .4rem; font-size: 1.3rem; letter-spacing: .5px; }
.controls { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.btngroup { display: flex; gap: .3rem; flex-wrap: wrap; }
.btngroup button {
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: .3rem .7rem; cursor: pointer; font-size: .9rem;
}
.btngroup button.active { background: var(--accent); border-color: var(--accent); color: #05213d; font-weight: 600; }
.runinfo { color: var(--muted); font-size: .8rem; margin-top: .35rem; }

main { display: flex; flex: 1; min-height: 0; }
#mapwrap { position: relative; flex: 1 1 52%; min-width: 0; }
#map { position: absolute; inset: 0; }
.legend {
  position: absolute; top: 12px; right: 12px; z-index: 500;
  background: rgba(16,23,32,.9); border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .7rem; font-size: .82rem;
}
.legend .row { display: flex; align-items: center; gap: .5rem; margin: .15rem 0; }
.legend .sw { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.3); }
.legend .ldeg { margin-top: .35rem; color: #ffcf8a; font-size: .78rem; max-width: 200px; }

.layer-note {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600;
  background: rgba(60,42,16,.95); border: 1px solid #7a5a1a; color: #ffcf8a;
  padding: .4rem .8rem; border-radius: 8px; font-size: .82rem; max-width: 80%;
}
.v2 { background: #7a5a1a; color: #ffe4b5; padding: 0 .4rem; border-radius: 4px; font-size: .78rem; }

.detail { flex: 1 1 48%; max-width: 920px; overflow-y: auto; padding: 1rem;
  border-left: 1px solid var(--line); background: var(--panel); }
.detail h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.detail .cat { display: inline-block; padding: .15rem .55rem; border-radius: 6px;
  font-weight: 600; color: #05213d; }
.detail table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .85rem; }
.detail th, .detail td { text-align: right; padding: .2rem .35rem; border-bottom: 1px solid var(--line); }
.detail th:first-child, .detail td:first-child { text-align: left; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; margin: .5rem 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.hint { color: var(--muted); }
.chart { width: 100%; height: 160px; background: #0c141d; border: 1px solid var(--line); border-radius: 8px; }
/* Airgramm proportional skalieren (entzerrt), dunkles Theme; helle Wolkenflächen */
#airgram { width: 100%; height: auto; display: block; background: #0c141d;
  border: 1px solid var(--line); border-radius: 8px; }
.chart text { fill: var(--muted); font-size: 10px; }

.ag-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .5rem 0 .2rem;
  font-size: .78rem; color: var(--muted); align-items: center; }
.ag-legend .it { display: flex; align-items: center; gap: .35rem; }
.ag-legend .sw { width: 14px; height: 14px; border-radius: 3px; }
.ag-legend .ramp { width: 90px; height: 12px; border-radius: 3px;
  background: linear-gradient(90deg,#cfd8dc,#90caf9,#66bb6a,#ffa726,#e53935); }
.ag-legend .ln { width: 20px; border-top: 1.5px dashed #fff; height: 0; }
.ag-legend .grey-l { background: #c6ced8; border: 1px solid #fff; }
.ag-legend .grey-d { background: #464f5a; border: 1px solid #fff; }
.ag-legend { gap: .5rem 1.2rem; }
.ag-group { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.ag-group .ag-gt { color: #7f8f9f; font-weight: 600; margin-right: .2rem; }
.ag-group svg { vertical-align: middle; }
.ac2 { font-family: monospace; letter-spacing: 1px; color: #b9c6d4; }
.blue-badge { color: #7ec8ff; font-weight: 600; }
.window { margin: .3rem 0; color: var(--fg); }
.usable-key { display: inline-block; width: 22px; height: 4px; background: #39d353;
  border-radius: 2px; vertical-align: middle; margin-left: .3rem; }

footer { padding: .5rem 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; }
footer p { margin: .15rem 0; }

/* Responsive: Desktop-Querformat zweispaltig (Karte + Detail nebeneinander),
   Smartphone-Hochformat gestapelt (Karte oben, Detail darunter, volle Breite). */
@media (max-width: 820px) {
  main { flex-direction: column; }
  #mapwrap { flex: 0 0 auto; height: 46vh; min-height: 260px; }
  .detail { flex: 1 1 auto; max-width: none; border-left: none;
    border-top: 1px solid var(--line); font-size: 14px; }
  header { padding: .5rem .6rem; }
  header h1 { font-size: 1.1rem; margin-bottom: .3rem; }
  .controls { gap: .5rem .7rem; }
  .btngroup { gap: .25rem; }
  .btngroup button { padding: .28rem .5rem; font-size: .8rem; }
  .runinfo { font-size: .72rem; }
  .legend { font-size: .74rem; padding: .35rem .5rem; top: 8px; right: 8px; }
  .legend .sw { width: 13px; height: 13px; }
  .ag-legend { font-size: .72rem; gap: .35rem .7rem; }
  .detail h2 { font-size: 1.05rem; }
  footer { font-size: .72rem; }
}