/* Satelliten-Tracker – dunkel und nüchtern.
   Neutrale Grautöne ohne Farbstich, eckige Formen, Trennlinien statt Karten.
   Eine einzige Akzentfarbe (Bernstein) für Auswahl, aktive Reiter und Simulation. */
:root {
  --bg: #161616;
  --panel: #1d1d1d;
  --raised: #262626;
  --line: #303030;
  --line-2: #3d3d3d;
  --text: #e2e2e2;
  --muted: #9a9a9a;
  --faint: #6a6a6a;
  --accent: #e8a83d;
  --accent-bg: #2b2418;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
@supports (height: 100dvh) { body { height: 100dvh; } }
button { touch-action: manipulation; }
button, input, select { font: inherit; color: inherit; border-radius: 0; }
a { color: var(--text); text-decoration-color: var(--faint); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--text); }
small { color: var(--muted); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.warn-text { color: var(--accent); }
.up { color: #fff; font-weight: 600; }
.down { color: var(--muted); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* Eingabefelder und Schaltflächen: flache Rechtecke */
input, select {
  background: var(--bg); border: 1px solid var(--line-2); padding: 4px 8px;
}
input:focus, select:focus { border-color: var(--muted); outline: none; }
.tbtn, .icon-btn, .toggle, .tool, .time-buttons .tbtn, .rates button {
  background: var(--raised); border: 1px solid var(--line-2); cursor: pointer;
}
.tbtn:hover:not(:disabled), .icon-btn:hover, .toggle:hover, .tool:hover, .rates button:hover { border-color: var(--faint); }

/* ------------------------------------------------------------- Kopfzeile */
.topbar {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 7px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand strong { display: block; font-size: 15px; font-weight: 600; }
.brand span { display: block; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.brand .ver { font-weight: 400; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 2px; }

.qth { display: flex; align-items: center; gap: 6px; }
.qth label, .minel { font-size: 13px; color: var(--muted); }
.qth input { width: 180px; font-family: var(--mono); font-size: 13px; }
.qth-info { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.minel { display: flex; align-items: center; gap: 6px; }
.minel select { color: var(--text); font-size: 13px; padding: 3px 6px; }
.data-status { margin-left: auto; font-size: 12px; color: var(--muted); }
.data-status.warn { color: var(--accent); }

.icon-btn { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); font-size: 14px; padding: 0; }
.icon-btn:hover { color: var(--text); }
.only-mobile { display: none; }

.flash { animation: flash .6s; }
@keyframes flash { 30% { border-color: var(--accent); } }

/* ------------------------------------------------------------- Layout */
.layout { display: grid; grid-template-columns: 320px minmax(0, 1fr) 370px; min-height: 0; }
.panel { background: var(--panel); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel.left { border-right: 1px solid var(--line); }
.panel.right { border-left: 1px solid var(--line); overflow-y: auto; }

.tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 9px 12px 7px; cursor: pointer; color: var(--muted);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab small { color: var(--faint); font-size: 11px; margin-left: 2px; }
.tabs.small { position: sticky; top: 0; background: var(--panel); z-index: 2; }
.tabs.small { padding: 0 4px; }
.tabs.small .tab { padding: 8px 10px 6px; font-size: 13.5px; white-space: nowrap; }

/* ------------------------------------------------------------- Satellitenliste */
.ltab { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.search { padding: 10px 10px 8px; }
.search input { width: 100%; }

/* Filter als zusammenhängende Leiste statt einzelner Pillen */
.chips { display: flex; flex-wrap: wrap; padding: 0 10px 10px; }
.chip {
  padding: 3px 8px; margin: 0 -1px -1px 0; cursor: pointer; font-size: 12.5px;
  background: none; border: 1px solid var(--line-2); color: var(--muted);
}
.chip:hover { color: var(--text); }
.chip.active { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--accent); }
.list-meta { font-size: 11.5px; color: var(--faint); padding: 0 12px 6px; }

.sat-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; border-top: 1px solid var(--line); }
.sat-list li {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 4px;
  padding: 6px 12px 6px 8px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.sat-list li:hover { background: var(--raised); }
.sat-list li.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.sat-list li.empty { display: block; color: var(--muted); cursor: default; }
.li-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 1px; }
.norad { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.li-live { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.li-live small { display: block; font-size: 11px; }

.fav { background: none; border: 0; cursor: pointer; color: var(--faint); font-size: 14px; padding: 0; line-height: 1; }
.fav.on { color: var(--accent); }
.fav.big { font-size: 19px; }

/* Kennzeichen: nur Text, durch Schrägstriche getrennt wirkt ruhiger als Rahmen */
.badge { font-size: 11px; color: var(--muted); white-space: nowrap; }
.badge + .badge::before { content: "/"; color: var(--faint); margin-right: 6px; }
.badge.dead { color: var(--faint); }
.badge.warn { color: var(--accent); }

/* ------------------------------------------------------------- Überflugplan */
.plan-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; }
.plan-head .list-meta { padding: 0; }
.inline { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.inline input { accent-color: var(--accent); }
.progress { height: 2px; background: var(--line); }
.progress > div { height: 100%; width: 0; background: var(--muted); transition: width .2s; }
.plan { overflow-y: auto; flex: 1; border-top: 1px solid var(--line); }
.plan-day {
  position: sticky; top: 0; z-index: 1;
  background: var(--raised); padding: 4px 12px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.plan-row {
  width: 100%; display: grid; grid-template-columns: 50px 1fr 60px; gap: 8px; align-items: center;
  padding: 5px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer;
}
.plan-row:hover { background: var(--raised); }
.plan-row.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.plan-row.running .pr-time { color: #fff; font-weight: 600; }
.plan-row small { display: block; font-size: 11px; }
.pr-time { font-variant-numeric: tabular-nums; }
.pr-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pr-name small { display: flex; gap: 6px; margin-top: 1px; }
.pr-el { text-align: right; font-variant-numeric: tabular-nums; }
.pr-el b { font-weight: 400; }
.pr-el b.hi { font-weight: 600; color: #fff; }

/* ------------------------------------------------------------- Globus */
.viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0e0e0e; }
#globe { position: absolute; inset: 0; }
#globe canvas { display: block; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sat-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 11px; color: var(--muted); text-shadow: 0 0 3px #000, 0 0 3px #000;
  will-change: transform;
}
.sat-label.sel { color: var(--accent); font-size: 12px; }

.view-tools {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 0; pointer-events: none;
}
.view-tools > * { pointer-events: auto; }
.vt-toggles, .vt-tools { display: flex; flex-wrap: wrap; }
.vt-tools { margin-left: auto; }
.vt-menu { display: none; }
.toggle, .tool {
  padding: 3px 9px; margin-right: -1px; font-size: 12.5px;
  background: rgba(29, 29, 29, .9); color: var(--faint);
}
.toggle.on { color: var(--text); background: rgba(38, 38, 38, .95); }
.toggle:hover, .tool:hover { color: var(--text); }
.tool { margin-left: auto; margin-right: 0; color: var(--muted); }
.tool + .tool { margin-left: -1px; }

.hud {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  padding: 5px 10px;
  background: rgba(29, 29, 29, .9); border: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted);
}
.hud:empty { display: none; }
/* Platz für die Zoom-Knöpfe rechts unten lassen */
.hud { max-width: calc(100% - 136px); }
@media (max-width: 900px) { .hud { max-width: none; } }
.hud b { color: var(--accent); font-weight: 600; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

/* ------------------------------------------------------------- EME (eigener Bildschirm) */
#btn-eme.on { color: var(--text); background: var(--accent-bg); box-shadow: inset 0 -2px 0 var(--accent); }
body.eme .hud, body.eme .panel.left, body.eme .minel, body.eme #btn-left, body.eme #btn-right { display: none; }
body.eme .vt-toggles > :not([data-opt="night"]), body.eme .vt-tools > :not(#btn-qth), body.eme .vt-menu { display: none !important; }
body.eme .vt-toggles { display: flex !important; position: static !important; min-width: 0 !important; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
body.eme .layout { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
body.eme .panel.right { border-left: 1px solid var(--line); background: var(--bg); }

.eme-dash { padding: 0 22px 26px; container-type: inline-size; }
.ed-bar {
  position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 14px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 18px;
  font-size: 13px; color: var(--muted);
}
.ed-bar h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: .02em; }
.ed-bar label { display: inline-flex; align-items: center; gap: 7px; }
.ed-bar select { color: var(--text); font-size: 14px; padding: 4px 8px; }
.ed-qth { font-family: var(--mono); font-size: 13px; }
.ed-bar .tbtn { margin-left: auto; }
.ed-label { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }

/* Kopfbereich: Mondstand und Bedingungen */
.ed-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.ed-moon, .ed-cond, .ed-panel, .tile { background: var(--panel); border: 1px solid var(--line); padding: 16px 18px; }
.ed-moon { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label label" "azel compass" "state compass"; column-gap: 12px; align-items: start; }
.ed-moon .ed-label { grid-area: label; }
.ed-azel { grid-area: azel; display: flex; gap: 26px; }
.ed-azel small, .tile small, .dg-parts small, .dx-grid small { display: block; font-size: 12px; color: var(--muted); }
.ed-azel span { font: 600 46px/1.05 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ed-azel .up { color: #fff; }
.ed-state { grid-area: state; margin-top: 12px; font-size: 15px; }
.ed-state b { display: block; font-size: 17px; font-weight: 600; }
.ed-state b.up { color: #fff; }
.ed-state span { color: var(--muted); }
.ed-compass { grid-area: compass; display: flex; align-items: center; gap: 2px; }
.cp { width: 168px; height: 168px; }
.cp-el { width: 52px; height: 168px; }
.cp-ring { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.cp-tick { stroke: var(--faint); stroke-width: 1; }
.cp-dir { fill: var(--muted); font-size: 13px; text-anchor: middle; font-family: var(--font); }
.cp-needle { stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.cp-needle.up { stroke: var(--accent); }
.cp-moon { fill: var(--faint); }
.cp-moon.up { fill: #f2efe6; stroke: var(--accent); stroke-width: 1.5; }
.cp-hub { fill: var(--muted); }
.el-track { fill: var(--line); }
.el-fill { fill: var(--faint); }
.el-fill.up { fill: var(--accent); }
.el-lbl { fill: var(--faint); font-size: 10px; font-family: var(--font); }
.el-min { stroke: var(--muted); stroke-dasharray: 3 2; }

.dg-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dg-val { font: 600 58px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dg-val small { font-size: 22px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.dg-rate { font-size: 14px; padding: 3px 10px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.dg-rate.r-excellent, .dg-rate.r-verygood { color: var(--accent); border-color: var(--accent); }
.dg-rate.r-good { color: var(--text); border-color: var(--muted); }
.dg-rate.r-poor, .dg-rate.r-verypoor { color: var(--faint); border-style: dashed; }
.dg-scale { margin: 16px 0 14px; }
.dg-bar { height: 6px; background: var(--line); }
.dg-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), #8a6a33 45%, #555); }
.dg-ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.dg-ticks span:nth-child(2) { margin-left: -4%; } .dg-ticks span:nth-child(3) { margin-left: 2%; }
.dg-parts { display: flex; gap: 22px; flex-wrap: wrap; }
.dg-parts b { font: 600 19px var(--mono); font-variant-numeric: tabular-nums; }
.dg-warn { margin-top: 10px; font-size: 13.5px; }

/* Kacheln */
.ed-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { padding: 13px 15px 12px; }
.t-val { font: 600 30px/1.15 var(--mono); font-variant-numeric: tabular-nums; margin-top: 4px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.t-val small { font-size: 15px; font-weight: 400; color: var(--muted); }
.t-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.t-range { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--faint); }
.t-range i { position: relative; flex: 1; height: 3px; background: var(--line-2); }
.t-range i b { position: absolute; top: -4px; width: 3px; height: 11px; margin-left: -1px; background: var(--accent); }
.ph { width: 26px; height: 26px; flex: none; }
.ph-dark { fill: #2a2a2a; stroke: var(--line-2); }
.ph-lit { fill: #e9e6dc; }

/* Gegenstation und Regionen */
.ed-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.eme-dx { display: flex; margin-bottom: 12px; }
.eme-dx input { flex: 1; font: 15px var(--mono); padding: 6px 10px; }
.eme-dx .tbtn { margin-left: -1px; }
.dx-state { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); margin-bottom: 12px; }
.dx-state b { font-size: 22px; font-weight: 600; color: var(--muted); }
.dx-state.open { border-color: var(--accent); }
.dx-state.open b { color: var(--accent); }
.dx-state span { color: var(--muted); font-size: 13px; }
.dx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.dx-grid b { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; }
.eme-win td, .eme-win th { font-size: 13.5px; }
.eme-regions { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.eme-regions li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); }
.eme-regions li b { font: 400 15px var(--mono); font-variant-numeric: tabular-nums; }
.eme-regions li.ok { color: var(--text); }
.eme-regions li.ok b { color: #fff; font-weight: 600; }
.eme-regions li.low { color: var(--muted); }
.eme-regions li.no { color: var(--faint); }

/* Kalender als Balken */
.ed-cal { margin-bottom: 14px; }
.cal-svg { width: 100%; height: auto; display: block; }
.cal-hit { fill: transparent; cursor: pointer; }
.cal-bar :not(.cal-hit) { pointer-events: none; }
.cal-bar:hover .cal-hit { fill: rgba(255, 255, 255, .05); }
.cal-we { fill: rgba(255, 255, 255, .035); }
.cal-grid { stroke: var(--line); stroke-dasharray: 2 3; }
.cal-fill { fill: #555; }
.cal-fill.r-excellent { fill: var(--accent); }
.cal-fill.r-verygood { fill: #c99545; }
.cal-fill.r-good { fill: #cfcfcf; }
.cal-fill.r-moderate { fill: #8c8c8c; }
.cal-fill.r-poor { fill: #555; }
.cal-fill.r-verypoor { fill: #3a3a3a; }
.cal-bar.today .cal-fill { stroke: #fff; stroke-width: 1.2; }
.cal-val { fill: var(--muted); font: 10px var(--mono); text-anchor: middle; }
.cal-nm { fill: var(--accent); font: 600 9.5px var(--font); text-anchor: middle; }
.cal-day { fill: var(--muted); font: 11px var(--font); text-anchor: middle; }
.cal-bar.we .cal-day { fill: var(--text); font-weight: 600; }
.cal-date { fill: var(--faint); font: 10px var(--font); text-anchor: middle; }
.ed-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ed-legend .lg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; background: #555; }
.ed-legend .lg.r-excellent::before { background: var(--accent); }
.ed-legend .lg.r-verygood::before { background: #c99545; }
.ed-legend .lg.r-good::before { background: #cfcfcf; }
.ed-legend .lg.r-moderate::before { background: #8c8c8c; }
.ed-legend .lg.r-verypoor::before { background: #3a3a3a; }
.lg-note { flex-basis: 100%; color: var(--faint); }

/* Sehr breite Anzeige: Gegenstation, Regionen und Kalender nebeneinander */
@container (min-width: 1500px) {
  .ed-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .eme-dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .ed-bar, .ed-hero, .ed-tiles, .eme-dash > .source { grid-column: 1 / -1; }
  .ed-two { grid-column: 1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ed-cal { grid-column: 2; align-self: start; }
  .ed-azel span { font-size: 58px; }
  .dg-val { font-size: 72px; }
  .cp { width: 200px; height: 200px; } .cp-el { height: 200px; }
}
/* Umbruch nach der Breite der EME-Anzeige selbst */
@container (max-width: 1000px) {
  .ed-hero, .ed-two { grid-template-columns: 1fr; }
}
@container (max-width: 560px) {
  .ed-moon { grid-template-columns: 1fr; grid-template-areas: "label" "azel" "state" "compass"; }
  .ed-compass { margin-top: 12px; }
}
@media (max-width: 900px) {
  body.eme .layout { grid-template-columns: 1fr; grid-template-rows: 38vh minmax(0, 1fr); }
  body.eme .viewport { grid-row: 1; }
  body.eme .panel.right { position: static; grid-row: 2; transform: none; width: auto; box-shadow: none; border-left: 0; border-top: 1px solid var(--line); }
  .eme-dash { padding: 0 12px 20px; }
  .ed-azel span { font-size: 36px; }
  .dg-val { font-size: 44px; }
  .cp { width: 130px; height: 130px; } .cp-el { height: 130px; }
  .dx-grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------- Zoom */
.zoom-tools { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; align-items: stretch; }
.zoom-tools .tool { margin: 0 0 -1px; min-width: 38px; padding: 5px 9px; font-size: 13px; text-align: center; }
.zoom-tools #zoom-in, .zoom-tools #zoom-out { font-size: 18px; line-height: 1; padding: 6px 0 7px; }
.zh-short { display: none; }
body.presenting .zoom-tools { display: none; }

/* ------------------------------------------------------------- Präsentation */
.pres { display: none; }
body.presenting { grid-template-rows: 1fr; }
body.presenting .topbar, body.presenting .timebar, body.presenting .panel,
body.presenting .view-tools, body.presenting .hud { display: none; }
body.presenting .layout { grid-template-columns: 1fr; }
body.presenting .pres { display: block; }
body.presenting:not(.pres-awake) .viewport { cursor: none; }

.pres::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 3;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none;
}
.pres-caption {
  position: absolute; left: 36px; bottom: 32px; z-index: 4;
  width: min(720px, calc(100% - 72px));
}
.pres-caption.in { animation: pres-in 1.2s ease-out; }
@keyframes pres-in { from { opacity: 0; } to { opacity: 1; } }
.pres-title { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.pres-sub { font-size: 15px; color: var(--text); opacity: .8; margin-top: 4px; min-height: 1.45em; font-variant-numeric: tabular-nums; }
.pres-meta { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pres-bar { height: 1px; background: rgba(255, 255, 255, .15); margin-top: 6px; }
.pres-bar > div { height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.pres-exit {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  opacity: 0; transition: opacity .3s;
}
body.pres-awake .pres-exit { opacity: 1; }
.sat-label { transition: none; }
/* Mitfliegende Beschriftung im Rundgang */
body.pres-co .pres-title, body.pres-co .pres-sub { display: none; }
body.pres-co .pres::before { height: 90px; }
body.pres-tour .sat-label.sel { display: none; }
.callout { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity .5s ease; }
.callout[hidden] { display: none; }
.callout.occl { opacity: 0; }
.co-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.co-lines path {
  fill: none; stroke: rgba(240, 186, 96, .85); stroke-width: 1.6; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(232, 168, 61, .55));
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.3, .6, .2, 1) .15s;
}
.callout.s1 .co-lines path { stroke-dashoffset: 0; }
.co-dot {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  border: 1.5px solid rgba(240, 186, 96, .7);
  box-shadow: 0 0 14px rgba(232, 168, 61, .35), inset 0 0 14px rgba(232, 168, 61, .15);
  opacity: 0; transform-origin: center; transition: opacity .8s ease;
}
.callout.s1 .co-dot { opacity: 1; }
.co-box {
  position: absolute; width: 400px; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(20, 20, 22, .74);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateX(-14px) scale(.98);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.co-box.l { transform: translateX(14px) scale(.98); }
.co-box.up { flex-direction: column-reverse; }
.callout.s2 .co-box { opacity: 1; transform: none; }
.co-head { padding: 14px 18px 15px; }
.co-name { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.co-op { font-size: 16px; color: rgba(255, 255, 255, .72); margin-top: 4px; }
.co-live { display: flex; flex-wrap: wrap; column-gap: 14px; font: 14px var(--mono); color: rgba(255, 255, 255, .7); margin-top: 9px; font-variant-numeric: tabular-nums; }
.co-live span { white-space: nowrap; }
.co-more {
  max-height: 0; overflow: hidden; padding: 0 18px; font-size: 15px; line-height: 1.45;
  opacity: 0; transition: max-height 1.1s cubic-bezier(.3, .6, .2, 1), padding 1.1s ease, opacity .9s ease .2s;
}
.callout.s3 .co-more { max-height: 640px; padding: 12px 18px 16px; opacity: 1; }
.co-box:not(.up) .co-more { border-top: 1px solid rgba(255, 255, 255, .08); }
.co-box.up .co-more { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.co-more .pc-rows dt, .co-more .pc-rows dd { padding: 5px 0; border-bottom-color: rgba(255, 255, 255, .07); }
.co-more .pc-rows dt { padding-right: 16px; }
.co-more .pc-rows dt { color: rgba(255, 255, 255, .55); }
.co-more h4 { font-size: 14px; color: rgba(255, 255, 255, .55); margin: 14px 0 4px; font-weight: 600; }
.co-more .pc-img { margin: 0 0 12px; border: 0; background: none; }
.co-more .pc-img img { max-height: 150px; border-radius: 8px; }
.co-more .pc-pass { margin: 0 0 10px; color: rgba(240, 186, 96, .95); }
.co-more .pc-freq li { grid-template-columns: 1fr; padding: 5px 0; border-bottom-color: rgba(255, 255, 255, .07); }
.co-more .pc-freq li span { white-space: normal; color: rgba(255, 255, 255, .6); }
.co-more .pc-freq li b { white-space: normal; text-align: left; font-size: 14px; }
.co-more .pc-freq li small { font-size: 12.5px; }
@media (max-width: 700px) {
  .co-box { width: 280px; }
  .co-name { font-size: 22px; }
  .co-more { font-size: 13.5px; }
  .co-more .pc-img, .co-more .pc-freq small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .co-lines path, .co-box, .co-more, .co-dot { transition: none; }
}

/* Steckbrief im Rundgang */
.pres-card {
  position: absolute; right: 36px; bottom: 32px; z-index: 4;
  width: 360px; max-height: calc(100% - 90px); overflow: hidden;
  background: rgba(22, 22, 22, .86); border: 1px solid var(--line-2);
  padding: 14px 16px; font-size: 13px;
}
.pres-card[hidden] { display: none; }
.pres-card.in { animation: pres-in 1.2s ease-out; }
body.pres-tour .pres-caption { width: min(640px, calc(100% - 470px)); }
.pc-img { margin: -14px -16px 12px; background: #0e0e0e; text-align: center; border-bottom: 1px solid var(--line); }
.pc-img img { display: block; margin: 0 auto; max-width: 100%; max-height: 160px; object-fit: contain; }
.pc-rows { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.pc-rows dt, .pc-rows dd { padding: 3px 0; border-bottom: 1px solid var(--line); }
.pc-rows dt { color: var(--muted); padding-right: 12px; }
.pc-rows dd { margin: 0; }
.pres-card h4 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 4px; }
.pc-freq { list-style: none; margin: 0; padding: 0; }
.pc-freq li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.pc-freq li span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-freq li b { font: 400 12.5px var(--mono); white-space: pre; text-align: right; }
.pc-freq li small { grid-column: 1 / -1; font-size: 11px; color: var(--faint); }
.pc-freq li.more { display: block; color: var(--faint); font-size: 12px; }
.pc-pass { margin: 12px 0 0; color: var(--text); }
.pres-card h4.pc-first { margin-top: 0; }
.pc-ops { list-style: none; margin: 0; padding: 0; }
.pc-ops li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.pc-ops li b { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-more { margin: 8px 0 0; color: var(--faint); font-size: 12px; }

@media (max-width: 900px) {
  .pres-card { top: 16px; right: 16px; left: auto; bottom: auto; width: min(340px, calc(100% - 32px)); max-height: 55%; }
  body.pres-tour .pres-caption { width: calc(100% - 72px); }
  .pc-img { display: none; }
}
@media (max-width: 600px) {
  .pres-caption { left: 16px; bottom: 18px; width: calc(100% - 32px); }
  .pres-title { font-size: 21px; }
  .pres-sub { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pres-caption.in, .pres-card.in { animation: none; }
}

/* ------------------------------------------------------------- Details */
.detail .empty, .empty { color: var(--muted); padding: 24px 16px; text-align: center; }
.d-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.d-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d-title h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.d-sub { color: var(--muted); font-size: 12.5px; }
.d-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; }
.d-actions { display: flex; flex-wrap: wrap; margin-top: 10px; }
.d-actions .tbtn { margin-right: -1px; }
.d-body { padding: 12px 14px 20px; }
.d-body h3 { font-size: 13px; font-weight: 600; margin: 18px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }

.tbtn { padding: 4px 10px; font-size: 13px; }
.tbtn:disabled { opacity: .4; cursor: default; }
.tbtn.primary { border-color: var(--muted); }

.live-state { padding: 7px 10px; border: 1px solid var(--line-2); font-size: 13px; margin-bottom: 10px; }
.live-state b { font-weight: 600; }
.live-state.up { border-color: var(--muted); }

.kv { display: grid; grid-template-columns: auto 1fr; margin: 0; font-size: 13.5px; }
.kv dt, .kv dd { padding: 4px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); padding-right: 14px; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv dd small { margin-left: 4px; }

.polar-wrap { display: flex; flex-direction: column; align-items: center; margin: 2px 0 10px; }
.polar { width: 100%; max-width: 250px; }
.polar-cap { font-size: 12px; color: var(--muted); text-align: center; }
.p-grid { fill: none; stroke: #3a3a3a; stroke-width: 1; }
.p-lbl { fill: var(--faint); font-size: 9px; }
.p-dir { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.p-track { fill: none; stroke: var(--text); stroke-width: 1.6; }
.p-aos { fill: var(--text); }
.p-los { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.p-max { fill: var(--muted); font-size: 11px; }
.p-cur { fill: var(--accent); }
.p-cur-halo { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-width: 1.5; }

.pass-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.pass-actions .tbtn { margin-right: -1px; }
table.passes { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.passes th { text-align: left; color: var(--faint); font-weight: 400; font-size: 11.5px; padding: 4px 6px; border-bottom: 1px solid var(--line-2); }
.passes td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.passes td small { display: block; font-size: 11px; }
.passes td b { font-weight: 600; }
.passes tr[data-aos] { cursor: pointer; }
.passes tr[data-aos]:hover { background: var(--raised); }
.passes tr.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.passes tr.running td:first-child { color: #fff; font-weight: 600; }
.passes tr.past { opacity: .45; }
.passes tr.day td { color: var(--muted); font-size: 12px; padding-top: 12px; }
.geo-note { padding: 9px 10px; border: 1px solid var(--line-2); margin-bottom: 10px; }
.geo-note b { font-weight: 600; }

.hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.source { font-size: 11.5px; color: var(--faint); margin-top: 14px; }
.tx-list { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--line-2); }
.tx { padding: 8px 0; border-bottom: 1px solid var(--line); }
.tx.inactive { opacity: .5; }
.tx-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 2px; }
.tx-head b { font-weight: 600; margin-right: 4px; }
.f-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; padding: 1px 0; }
.f-dir { font-size: 11px; color: var(--faint); }
.f-nom { color: var(--muted); font-size: 12.5px; }
.f-dop { text-align: right; }
.f-dop b { font-family: var(--mono); font-size: 13px; font-weight: 400; }
.f-dop small { display: block; font-size: 11px; }
.f-dop.dim b { color: var(--muted); }
.tx-meta { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

.sat-img { margin: 0 0 6px; text-align: center; }
.sat-img img { max-width: 100%; max-height: 170px; }
pre.tle {
  font: 11px/1.5 var(--mono); background: var(--bg); border: 1px solid var(--line);
  padding: 8px 10px; overflow-x: auto; color: var(--muted); margin-top: 14px;
}

/* ------------------------------------------------------------- Zeitleiste */
.timebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 14px; background: var(--panel); border-top: 1px solid var(--line);
}
.clock { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-width: 200px; font-variant-numeric: tabular-nums; }
.clock-main { display: block; font: 600 18px/1.15 var(--mono); }
.clock-sub { display: block; font-size: 11.5px; color: var(--muted); }
.live-badge { font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--line-2); color: var(--muted); }
.live-badge.sim { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 600; }
body.simulating .clock-main { color: var(--accent); }
.time-buttons { display: flex; }
.time-buttons .tbtn { min-width: 46px; margin-right: -1px; }
.rates { display: flex; }
.rates button { padding: 4px 9px; margin-right: -1px; font-size: 12.5px; color: var(--muted); }
.rates button.active { color: var(--text); background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent); }
#time-slider { flex: 1; min-width: 140px; accent-color: var(--accent); padding: 0; border: 0; background: none; }
#time-input { font-size: 13px; padding: 3px 8px; }

/* ------------------------------------------------------------- Dialog, Meldung */
dialog {
  max-width: 560px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--text); border: 1px solid var(--line-2);
  padding: 18px 22px;
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
dialog h3 { font-size: 13px; font-weight: 600; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
dialog p { margin: 0 0 8px; }
.credits { padding-left: 18px; margin: 0; font-size: 13px; }
.credits li { margin: 3px 0; }
.dialog-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }

.toast {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%);
  background: var(--raised); border: 1px solid var(--line-2); border-left: 2px solid var(--accent);
  padding: 8px 14px; max-width: min(560px, calc(100% - 32px));
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50;
}
.toast.show { opacity: 1; }

/* ------------------------------------------------------------- Responsiv */
@media (max-width: 1250px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr) 330px; }
  .qth-info { display: none; }
}
@media (max-width: 900px) {
  .only-mobile { display: grid; }
  .topbar { gap: 8px; padding: 7px 10px; }
  .qth input { width: 130px; }
  .qth label, .data-status { display: none; }
  .minel { font-size: 0; }
  /* Ausgeblendete Schubladen abschneiden, sonst verbreitert der Handy-Browser die Seite */
  .layout { grid-template-columns: 1fr; position: relative; overflow: hidden; overflow: clip; }
  .panel { position: absolute; top: 0; bottom: 0; z-index: 10; width: min(380px, 92vw); transition: transform .2s; box-shadow: 0 0 24px #000a; }
  .panel.left { left: 0; transform: translateX(-105%); }
  .panel.right { right: 0; transform: translateX(105%); }
  body.show-left .panel.left, body.show-right .panel.right { transform: none; }
  .view-tools { top: 8px; left: 8px; right: 8px; }
  .toggle, .tool { padding: 3px 7px; font-size: 12px; }
  .timebar { gap: 8px; padding: 7px 10px; }
  .clock { min-width: 0; }
  #time-input { display: none; }
  .rates button { padding: 4px 7px; }
}
@media (max-width: 520px) {
  .time-buttons [data-step="-3600"], .time-buttons [data-step="3600"] { display: none; }
  .clock-sub { display: none; }
  #time-slider { order: 10; flex-basis: 100%; }
  .hud { font-size: 12px; gap: 8px; right: 8px; }
}

/* Rechtliche Links in der Kopfzeile */
.legal { display: flex; gap: 12px; margin-right: 8px; font-size: 11px; }
.legal a { color: var(--muted, #8a8a8a); text-decoration: none; }
.legal a:hover { color: var(--accent); }
.legal-links a { color: var(--accent); }
@media (max-width: 900px) { .legal { display: none; } }

/* Eigene Links im Info-Dialog */
.my-links { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.my-links li { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.my-links a { color: var(--accent); text-decoration: none; }
.my-links a:hover { text-decoration: underline; }
.my-links span { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* =============================================================== Handy und Tablet */

/* Kleine Bildschirme: Anzeigeoptionen hinter „Ansicht ▾“ */
@media (max-width: 900px) {
  .vt-menu { display: block; margin: 0 8px 0 0; }
  .vt-toggles {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 6;
    flex-direction: column; min-width: 200px;
    background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 8px 24px #000a;
  }
  .view-tools.open .vt-toggles { display: flex; }
  .view-tools.open { z-index: 7; }
  .view-tools.open .vt-menu { color: var(--text); border-color: var(--muted); }
  .vt-toggles .toggle { margin: 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; padding: 9px 14px; font-size: 14px; background: none; }
  .vt-toggles .toggle:last-child { border-bottom: 0; }
  .vt-toggles .toggle::before { content: ""; display: inline-block; width: 22px; color: var(--accent); }
  .vt-toggles .toggle.on::before { content: "✓"; }
  body.eme .vt-toggles .toggle { border: 1px solid var(--line-2); background: rgba(38, 38, 38, .95); padding: 3px 9px; }
  body.eme .vt-toggles .toggle::before { display: none; }

  /* Zoom kompakt rechts, Infozeile links daneben */
  .zh-long { display: none; }
  .zh-short { display: inline; font-size: 12px; }
  .zoom-tools .tool { min-width: 44px; }
  .hud { right: 66px; }
  body.eme .zoom-tools { display: none; }
}

/* Touch-Bedienung (Handy, Tablet): größere Tippflächen, kein Zoomen beim Antippen von Feldern */
@media (pointer: coarse) {
  input, select { font-size: 16px !important; min-height: 40px; }
  .qth input { font-size: 16px; }
  .icon-btn { width: 40px; height: 40px; font-size: 16px; }
  .toggle, .tool, .tbtn, .rates button, .chip { min-height: 40px; }
  .chip { padding: 6px 12px; font-size: 14px; }
  .tab { padding: 12px 14px 10px; }
  .tabs.small .tab { padding: 12px 10px 10px; font-size: 14.5px; }
  .sat-list li { grid-template-columns: 40px 1fr auto; padding: 9px 12px 9px 2px; }
  .fav { width: 40px; height: 40px; font-size: 18px; }
  .fav.big { width: 44px; height: 44px; font-size: 22px; }
  .passes td { padding: 9px 6px; }
  .time-buttons .tbtn { min-width: 48px; }
  .rates button { min-width: 44px; }
  .zoom-tools .tool { min-height: 44px; }
  .zoom-tools .tool.tool { font-size: 13px; }
  .dialog-actions .tbtn { padding: 0 14px; }
  .my-links li { padding: 9px 0; }
  .clock-main { font-size: 19px; }
  .clock { min-height: 40px; }
  #time-slider { min-height: 32px; }
}

/* Aussparungen von Notch, Dynamic Island und Home-Leiste (iPhone, iPad, Vollbild vom Home-Bildschirm) */
@media (max-width: 900px), (pointer: coarse) {
  .topbar {
    padding-top: max(7px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .timebar {
    padding-bottom: max(7px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .view-tools { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
  .hud { left: max(8px, env(safe-area-inset-left)); }
  .zoom-tools { right: max(8px, env(safe-area-inset-right)); bottom: 8px; }
  .panel.left { padding-left: env(safe-area-inset-left); }
  .panel.right { padding-right: env(safe-area-inset-right); }
  .pres-exit { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
  .pres-caption { left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* Handy hochkant: Kopfzeile in zwei klaren Zeilen */
@media (max-width: 600px) {
  .topbar {
    display: grid; gap: 6px 8px; align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "left brand about right" "qth qth qth minel";
  }
  #btn-left { grid-area: left; }
  .brand { grid-area: brand; min-width: 0; }
  #btn-about { grid-area: about; }
  #btn-right { grid-area: right; }
  .qth { grid-area: qth; min-width: 0; }
  .qth input { flex: 1; min-width: 0; width: auto; }
  .minel { grid-area: minel; }
  .data-status, .legal { display: none; }
  .view-tools .tool { padding: 3px 8px; }
  .hud { gap: 2px 10px; font-size: 12px; padding: 4px 8px; }
  .panel { width: 100vw; }
}

/* Handy quer und andere flache Bildschirme: alles auf eine Zeile verdichten */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { flex-wrap: nowrap; gap: 8px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .qth input { width: 140px; }
  .qth-info, .data-status, .legal { display: none; }
  .timebar { flex-wrap: nowrap; gap: 6px; padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .clock { min-width: 0; }
  .clock-main { font-size: 16px; }
  .clock-sub, .live-badge, #time-input { display: none; }
  .time-buttons [data-step="-3600"], .time-buttons [data-step="3600"] { display: none; }
  .rates button[data-rate="10"], .rates button[data-rate="300"] { display: none; }
  #time-slider { min-width: 80px; order: 0; flex-basis: auto; }
  .view-tools.open .vt-toggles { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .vt-toggles .toggle { padding: 6px 12px; border-right: 1px solid var(--line); }
  .vt-toggles .toggle:last-child { border-bottom: 1px solid var(--line); }
  .panel { width: min(400px, 60vw); }
  .hud span:nth-child(n+5) { display: none; }
  /* EME quer: Globus links, Daten rechts wie am großen Bildschirm */
  body.eme .layout { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: 1fr; }
  body.eme .viewport { grid-row: 1; grid-column: 1; }
  body.eme .panel.right { grid-row: 1; grid-column: 2; border-top: 0; border-left: 1px solid var(--line); }
}

/* EME auf dem Handy hochkant: Globus kleiner, mehr Platz für die Werte */
@media (max-width: 900px) and (orientation: portrait) {
  body.eme .layout { grid-template-rows: 30vh minmax(0, 1fr); }
}

/* Modusumschalter in der Kopfzeile: Satelliten | EME */
.mode-switch { display: flex; border: 1px solid var(--line-2); }
.mode {
  background: none; border: 0; border-right: 1px solid var(--line-2); cursor: pointer;
  padding: 5px 14px; color: var(--muted); font-size: 13.5px; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.mode:last-child { border-right: 0; }
.mode:hover { color: var(--text); }
.mode.on { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--accent); }
.mode .m-moon { color: var(--accent); }
.m-short, .b-short { display: none; }
@media (pointer: coarse) { .mode { min-height: 40px; } }
@media (max-width: 1100px) { .mode .m-long:not(:first-child) { display: none; } }
@media (max-width: 600px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "left brand mode about right" "qth qth qth qth minel"; }
  .mode-switch { grid-area: mode; }
  .mode { padding: 5px 10px; }
  .mode .m-long { display: none; }
  .mode .m-short { display: inline; }
  .brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .mode { padding: 5px 10px; }
  .mode .m-long { display: none; }
  .mode .m-short { display: inline; }
  .qth input { width: 120px; }
  .brand strong { font-size: 14px; }
}
@media (max-width: 600px) {
  .brand strong { font-size: 14px; }
  .brand > span { overflow: hidden; text-overflow: ellipsis; }
  .topbar .brand span.b-sub { display: none; }
}
.brand strong span, .brand span.b-sub { font-size: inherit; color: inherit; }
.brand span.b-sub { display: inline; }
.brand strong .b-full { display: inline; }
.brand strong .b-short { display: none; }
@media (max-width: 600px) { .brand strong .b-full { display: none; } .brand strong .b-short { display: inline; } }

/* ------------------------------------------------------------- Suche und Kategorien */
.search { display: flex; gap: 0; padding: 10px 10px 6px; }
.search input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 14px; border-color: var(--line-2); }
.search input:focus { border-color: var(--accent); }
.search .tbtn { margin-left: -1px; padding: 0 12px; }
.search-info { margin: 0 10px 8px; padding: 6px 8px; border: 1px solid var(--line-2); border-left: 2px solid var(--accent); background: var(--bg); font-size: 12.5px; }
.si-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.si-sub { margin-top: 4px; color: var(--muted); gap: 8px; }
.si-sub b { color: var(--text); font-weight: 600; }
.si-lbl { color: var(--muted); margin-right: 2px; }
.si-chip { padding: 1px 6px; background: var(--raised); border: 1px solid var(--line-2); color: var(--text); }
.si-pick { color: var(--accent); }
.si-ign { color: var(--faint); }
.si-clear { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 13px; }
.si-clear:hover { color: var(--text); }
.search-examples { margin: 0 10px 8px; padding: 8px; border: 1px solid var(--line-2); background: var(--bg); display: flex; flex-wrap: wrap; gap: 4px; }
.search-examples[hidden] { display: none; }
.se-lbl { width: 100%; font-size: 11.5px; color: var(--faint); margin-bottom: 2px; }
.se-ex { background: var(--raised); border: 1px solid var(--line-2); color: var(--muted); padding: 3px 8px; font-size: 12.5px; cursor: pointer; text-align: left; }
.se-ex:hover { color: var(--text); border-color: var(--faint); }
.catbar { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 10px 8px; border: 1px solid var(--line-2); }
.cat { background: none; border: 0; border-right: 1px solid var(--line-2); padding: 6px 4px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cat:last-child { border-right: 0; }
.cat:hover { color: var(--text); }
.cat.on { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--accent); }
.badge.cat-b { color: var(--text); }
@media (pointer: coarse) {
  .cat { min-height: 40px; font-size: 14px; }
  .se-ex { min-height: 36px; font-size: 14px; }
  .si-clear { min-width: 36px; min-height: 32px; }
  .search .tbtn { min-width: 52px; }
}
/* Flache Bildschirme (Handy quer): Liste mitsamt Suche scrollen, Filter in einer wischbaren Zeile */
@media (max-height: 520px) and (orientation: landscape) {
  #ltab-list { overflow-y: auto; overscroll-behavior: contain; }
  #ltab-list > * { flex-shrink: 0; }
  #ltab-list .sat-list { flex: none; overflow: visible; }
  #filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #filters::-webkit-scrollbar { display: none; }
  #filters .chip { flex: none; }
  .search { padding-top: 6px; }
}

/* =============================================================== Raumsonden */
.solar { position: absolute; inset: 0; }
.solar canvas { display: block; touch-action: none; }
.solar-labels .sl-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font-size: 11.5px; color: var(--muted); text-shadow: 0 0 3px #000, 0 0 3px #000; will-change: transform;
}
.solar-labels .sl-planet { color: #c8c8c8; font-size: 12px; }
.solar-labels .sl-probe.ended { color: var(--faint); }
.solar-labels .sl-label.sel { color: var(--accent); font-weight: 600; }

body.probes .layout { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
body.probes .panel.left, body.probes #globe, body.probes #labels, body.probes .hud, body.probes .view-tools,
body.probes .timebar, body.probes .minel, body.probes #btn-left, body.probes #btn-right, body.probes .qth { display: none !important; }
body.probes { grid-template-rows: auto 1fr; }
body.probes .panel.right { border-left: 1px solid var(--line); background: var(--bg); }

.pd { padding: 0 18px 24px; container-type: inline-size; }
.pd-bar { flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg-b { background: none; border: 0; border-right: 1px solid var(--line-2); color: var(--muted); padding: 4px 10px; cursor: pointer; font-size: 13px; }
.seg-b:last-child { border-right: 0; }
.seg-b.on { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--accent); }
.pd-time { border: 1px solid var(--line-2); background: var(--panel); padding: 12px 14px 10px; margin: 14px 0; }
.pd-date { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-date span { font: 600 22px/1.2 var(--mono); }
.pd-date small { color: var(--muted); font-size: 12.5px; }
#pd-slider { width: 100%; accent-color: var(--accent); margin: 10px 0 0; padding: 0; border: 0; background: none; }
.pd-scale { position: relative; height: 14px; font-size: 10.5px; color: var(--faint); margin: 0 7px; }
.pd-scale span { position: absolute; transform: translateX(-50%); }
.pd-ctrl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.pd-ctrl .tbtn.primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.pd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pd-head h3 { margin: 0; font-size: 22px; font-weight: 600; }
.pd-st { font-size: 12px; padding: 1px 7px; border: 1px solid var(--line-2); color: var(--muted); }
.pd-st.on { color: var(--text); }
.pd-st.ended, .pd-st.future, .pd-st.none { color: var(--faint); }
.pd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pd-tile { border: 1px solid var(--line-2); background: var(--panel); padding: 8px 10px; min-width: 0; }
.pd-tile small { display: block; color: var(--muted); font-size: 11.5px; }
.pd-tile b { display: block; font: 600 20px/1.25 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-tile span { display: block; color: var(--faint); font-size: 11.5px; }
.pd-desc { color: var(--text); margin: 0 0 10px; }
.pd-sel { margin-bottom: 8px; }
.pd-list-wrap h3 { font-size: 13px; font-weight: 600; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.pd-list { display: grid; grid-template-columns: 1fr; }
@container (min-width: 620px) { .pd-list { grid-template-columns: 1fr 1fr; column-gap: 14px; } }
.pd-row {
  display: flex; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 6px 4px; color: var(--text);
}
.pd-row:hover { background: var(--raised); }
.pd-row.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.pd-row small { display: block; color: var(--faint); font-size: 11px; }
.pd-row .pr-r { text-align: right; font-variant-numeric: tabular-nums; }
.pd-row.st-ended .pr-n, .pd-row.st-future .pr-n, .pd-row.st-none .pr-n { color: var(--muted); }
.pd-planets { display: flex; flex-wrap: wrap; }

@media (max-width: 900px) {
  body.probes .layout { grid-template-columns: 1fr; grid-template-rows: 46vh minmax(0, 1fr); }
  body.probes .viewport { grid-row: 1; }
  body.probes .panel.right { position: static; grid-row: 2; transform: none; width: auto; box-shadow: none; border-left: 0; border-top: 1px solid var(--line); }
  .pd { padding: 0 12px 20px; }
  .pd-tile b { font-size: 17px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body.probes .layout { grid-template-columns: 50% minmax(0, 1fr); grid-template-rows: 1fr; }
  body.probes .viewport { grid-row: 1; grid-column: 1; }
  body.probes .panel.right { grid-row: 1; grid-column: 2; border-top: 0; border-left: 1px solid var(--line); }
}
@media (pointer: coarse) { .seg-b, .pd-row { min-height: 40px; } }
/* Handy hochkant: Modusumschalter in eigener Zeile (Satelliten | EME | Sonden) */
@media (max-width: 600px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "left brand lang about right" "mode mode mode mode mode" "qth qth qth qth minel"; }
  .mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); }
  .mode { padding: 5px 6px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { gap: 6px; }
  .qth input { width: 100px; }
  .mode { padding: 5px 8px; }
}
.pd-progress { grid-column: 1 / -1; margin: 6px 0 8px; }

.pd-group { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; padding: 10px 4px 3px; grid-column: 1 / -1; }
.pd-row .pr-r b { font-weight: 400; display: block; }
.pd-progress b { color: var(--text); }

/* Weitere Namen in der Liste, SSTV-Kennzeichen */
.li-alias { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge.sstv { color: var(--accent); }
/* Kopfzeile mit drei Modus-Knöpfen: Koordinaten neben dem QTH früher ausblenden */
@media (max-width: 1520px) { .qth-info { display: none; } }
.m-ico { width: 15px; height: 15px; vertical-align: -2px; fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; }

/* Sprachumschalter DE / EN */
.lang-switch { display: flex; border: 1px solid var(--line-2); margin-right: 6px; }
.lang-b { background: none; border: 0; color: var(--faint); font: 600 11px var(--mono); padding: 4px 7px; cursor: pointer; }
.lang-b + .lang-b { border-left: 1px solid var(--line-2); }
.lang-b.on { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--accent); }
@media (pointer: coarse) { .lang-b { min-height: 40px; min-width: 36px; } }
@media (max-width: 600px) { .lang-switch { grid-area: lang; margin: 0; } }
/* Kopfzeile mit Sprachumschalter: Datenstand unter 1600 px nur im Info-Fenster */
@media (max-width: 1600px) { .data-status { display: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  /* Platz für den Sprachumschalter: Beschriftung „Min. Elevation“ weglassen, Auswahl bleibt */
  .minel { font-size: 0; gap: 0; }
  .minel select { font-size: 16px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .brand strong .b-full { display: none; }
  .brand strong .b-short { display: inline; }
  /* nur die jeweils andere Sprache als Knopf */
  .lang-b.on { display: none; }
  .lang-b + .lang-b { border-left: 0; }
}
@media (max-height: 520px) and (orientation: landscape) { .topbar .brand span.b-sub { display: none; } }