/* ORBIT – „Observatorium": Globus/Karte als Bühne, ruhige Glasflächen darüber. Tiefsee-Petrol + Mint. Präfix ob- */
.ob-body { margin: 0; background: #070d12; }
.ob-root, .ob-root *, .ob-root *::before, .ob-root *::after { box-sizing: border-box; } /* gemessen (26.09.): vor mount() galt content-box → Panel 466 statt 420 px breit, CLS 0,13 unter file:// */
.ob-root [hidden] { display: none !important; }
.ob-root {
  --tf-bg: #070d12; --tf-surface: #0e181f; --tf-surface-2: #14232b; --tf-text: #e8f0ee; --tf-muted: #9db0b6;
  --tf-accent: #7fe3bd; --tf-accent-ink: #06261b; --tf-line: #22343d; --tf-control: #6b8893; --tf-radius: 10px; --tf-focus: #b8ffe0;
  --tf-font: "Segoe UI Variable Text", "Segoe UI", "SF Pro Text", "Inter", system-ui, -apple-system, sans-serif;
  --tf-font-display: "Segoe UI Variable Display", "Segoe UI", "SF Pro Display", "Inter", system-ui, sans-serif;
  --tf-font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", ui-monospace, monospace;
  --tf-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --ob-glass: rgba(12, 22, 29, .78); --ob-rail: 76px; --ob-panel: 420px; --ob-side: 292px; --ob-top: 64px;
  --ob-side-w: var(--ob-side); --ob-panel-w: var(--ob-panel); /* wirksame Breiten – 0 bei ausgeklappter Leiste (data-side/data-panel="closed") */
  position: relative; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(1200px 800px at 38% 45%, #0d2029 0%, #070d12 62%) #070d12;
}
.ob-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: .5rem .9rem; border-radius: 8px; background: var(--tf-accent); color: var(--tf-accent-ink) !important; font-weight: 700; }
.ob-skip:focus { top: 12px; }
.ob-noscript { padding: 2rem; }
.ob-side .tf-lgroup-label { letter-spacing: .07em; font-size: .72rem; } /* Gruppentitel bleiben bei 292 px einzeilig */
.ob-glass, .ob-top, .ob-panel, .ob-side, .ob-dock, .ob-topiccard, .ob-comparebar, .ob-tableview, .ob-sheet-in { background: var(--tf-surface); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ob-top, .ob-panel, .ob-side, .ob-dock, .ob-topiccard, .ob-comparebar { background: var(--ob-glass); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
}
.ob-root[data-side="closed"] { --ob-side-w: 0px; }
.ob-root[data-panel="closed"] { --ob-panel-w: 0px; }

/* Seitenleiste links: Ebenen in Gruppen + Ebeneninfo */
.ob-side { z-index: 18; display: block; padding: .9rem .9rem 1.2rem; } /* block statt grid: Chrome bemaß die Grid-Zeile des Ebenen-Slots ohne den Inhalt geöffneter details – Überlappung mit „Über diese Ebene" (26.09.) */
.ob-side > * + * { margin-top: .8rem; }
.ob-side-info > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; min-height: 32px; }
.ob-side-info > summary::-webkit-details-marker { display: none; }
.ob-side-info > summary::before { content: '\25B8'; font-size: .8rem; color: var(--tf-accent); transition: transform .15s ease; }
.ob-side-info[open] > summary::before { transform: rotate(90deg); }
.ob-side-info [data-slot="layerinfo"] { display: grid; gap: .4rem; padding-top: .4rem; font-size: .9rem; }
.ob-side-info .tf-h { font-size: .95rem; }
.ob-side-info .tf-text { font-size: .9rem; }
/* Randschaltflächen zum Ein-/Ausklappen (nur Desktop) */
.ob-edge { display: none; }

/* Kopf */
.ob-top { display: flex; align-items: center; gap: 1rem; min-height: var(--ob-top); padding: .6rem 1rem; border-bottom: 1px solid var(--tf-line); position: relative; z-index: 20; }
.ob-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--tf-text) !important; text-decoration: none; flex: none; }
.ob-mark { width: 30px; height: 30px; fill: none; stroke: var(--tf-accent); stroke-width: 1.3; }
.ob-brand-text { font-family: var(--tf-font-display); font-weight: 700; letter-spacing: .04em; font-size: 1.05rem; }
.ob-brand-text b { font-weight: 400; letter-spacing: .22em; font-size: .78rem; color: var(--tf-muted); margin-left: .45rem; }
.ob-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--tf-control); background: rgba(7, 13, 18, .6); color: var(--tf-muted) !important; text-align: left; font-size: .95rem; }
.ob-search:hover { border-color: var(--tf-accent); color: var(--tf-text) !important; }
.ob-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.ob-search { min-width: 0; overflow: hidden; } /* gemessen bei 320 px: Button schrumpfte nicht unter die Textbreite (313/318 px) und zog den Viewport auf 329/334 px */
.ob-search span { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-search kbd { font-family: var(--tf-font-mono); font-size: .72rem; padding: .1rem .4rem; border: 1px solid var(--tf-control); border-radius: 4px; }
.ob-top-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.ob-lang { min-width: 48px; justify-content: center; font-family: var(--tf-font-mono); }

/* Schiene */
.ob-rail { display: flex; z-index: 19; }
.ob-rail button { display: grid; justify-items: center; gap: .2rem; padding: .55rem .25rem; border: 0; border-radius: 10px; background: none; color: var(--tf-muted); font-size: .72rem; font-weight: 600; line-height: 1.15; text-align: center; }
.ob-rail button:hover { color: var(--tf-text); background: rgba(127, 227, 189, .06); }
.ob-rail button[aria-current="page"] { color: var(--tf-accent); background: rgba(127, 227, 189, .1); }
.ob-rail button { width: 100%; min-width: 0; }
.ob-rail button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-only-sm { display: none; }
.ob-rail svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Themenleiste */
.ob-topicbar { position: relative; z-index: 15; padding: .5rem 1rem; overflow-x: auto; scrollbar-width: thin; }
.ob-topicbar .tf-topics { flex-wrap: nowrap; }
.ob-topicbar .tf-topic { white-space: nowrap; background: rgba(7, 13, 18, .55); }

/* Bühne */
.ob-stage { z-index: 1; }
.ob-stage canvas { outline-offset: -4px; }

/* Panel */
.ob-panel { z-index: 18; display: grid; gap: 1.1rem; align-content: start; padding: 1.4rem; }
.ob-panel .tf-h-xl { font-weight: 300; }
.ob-panel[data-state="briefing"] .tf-h-xl { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; }
.ob-panel .tf-num { color: var(--tf-accent); }
.ob-topiccard { z-index: 17; display: grid; gap: .5rem; padding: 1rem 1.1rem; border: 1px solid var(--tf-line); border-radius: 14px; font-size: .92rem; }
.ob-topiccard:empty { display: none; }
/* Warenströme & Handelsrouten – Steuerkarte (Inhalt: core/tfip-tradeflows.js, Grundstil: shared/app/tfip-tradeflows.css) */
.ob-tfcard { z-index: 17; padding: .9rem 1rem; border: 1px solid var(--tf-line); border-radius: 14px; font-size: .92rem; background: var(--tf-surface); scrollbar-width: thin; }
.ob-tfcard:empty, .ob-tfcard:not([data-on="1"]) { display: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ob-tfcard { background: var(--ob-glass); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); } }
.ob-comparebar { z-index: 21; display: flex; align-items: center; gap: .9rem; padding: .5rem .6rem .5rem 1.1rem; border: 1px solid var(--tf-control); border-radius: 999px; font-size: .9rem; }

/* Dock */
.ob-dock { z-index: 17; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .6rem .8rem; border: 1px solid var(--tf-line); border-radius: 16px; }
.ob-dock-legend { flex: 1 1 100%; order: 3; min-width: 0; } /* eigene Zeile; auf dem Desktop umbrechend (26.09.: bei 6 Kategorien und offenen Leisten verschwanden Chips hinter dem Scrollbalken), mobil einzeilig scrollbar */
.ob-dock-legend .tf-legend { flex-wrap: wrap; } .ob-dock-legend .tf-legend-btn { white-space: nowrap; }
.ob-dock-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-left: auto; }
.ob-dock .tf-seg, .ob-dock .tf-legend-btn, .ob-dock .tf-icon-btn { background: rgba(7, 13, 18, .5); }

/* Tabellenansicht + Seiten */
.ob-tableview { display: none; z-index: 16; padding: 1.1rem; border: 1px solid var(--tf-line); border-radius: 16px; }
.ob-root[data-view="table"] .ob-tableview { display: block; }
.ob-root[data-view="table"] .ob-stage .tf-map { visibility: hidden; }
.ob-sheet { position: relative; z-index: 16; }
.ob-sheet-in > * { min-width: 0; } /* Grid-Kinder: sonst zieht breiter Inhalt (Quellentabelle) die ganze Seite auf */
.ob-sheet-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; max-width: 1360px; /* Quellentabelle mit 8 Spalten: 1180 px erzwangen horizontales Scrollen auf 1440-px-Bildschirmen (27.09.) */ margin: 0 auto; padding: clamp(1.1rem, 3vw, 2.2rem); border: 1px solid var(--tf-line); border-radius: 18px; }

/* ---------- Desktop: feste Bühne, alles schwebt ---------- */
@media (min-width: 1000px) {
  .ob-root { height: 100vh; height: 100dvh; overflow: hidden; }
  .ob-stage { position: absolute; inset: var(--ob-top) var(--ob-panel-w) 0 calc(var(--ob-rail) + var(--ob-side-w)); }
  .ob-stage .tf-map { inset: 56px 0 140px 0; } /* Globus zwischen Themenleiste und zweizeiligem Dock einpassen */
  .ob-root:not([data-page="atlas"]) .ob-stage { opacity: .25; pointer-events: none; }
  .ob-rail { position: absolute; left: 0; top: var(--ob-top); bottom: 0; width: var(--ob-rail); flex-direction: column; gap: .25rem; padding: .75rem .4rem; border-right: 1px solid var(--tf-line); background: rgba(7, 13, 18, .6); }
  .ob-rail-gap { flex: 1; }
  .ob-topicbar { position: absolute; left: calc(var(--ob-rail) + var(--ob-side-w)); right: var(--ob-panel-w); top: var(--ob-top); }
  .ob-side { position: absolute; left: var(--ob-rail); top: var(--ob-top); bottom: 0; width: var(--ob-side); overflow-y: auto; border-right: 1px solid var(--tf-line); scrollbar-width: thin; transition: transform .22s ease, visibility .22s; }
  .ob-root[data-side="closed"] .ob-side { transform: translateX(-100%); visibility: hidden; }
  .ob-panel { position: absolute; right: 0; top: var(--ob-top); bottom: 0; width: var(--ob-panel); overflow-y: auto; border-left: 1px solid var(--tf-line); scrollbar-width: thin; transition: transform .22s ease, visibility .22s; }
  .ob-root[data-panel="closed"] .ob-panel { transform: translateX(100%); visibility: hidden; }
  .ob-edge { display: grid; place-items: center; position: absolute; z-index: 23; top: 50%; width: 26px; height: 72px; margin-top: -36px; padding: 0; border: 1px solid var(--tf-control); background: var(--ob-glass); color: var(--tf-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: left .22s ease, right .22s ease; }
  .ob-edge:hover { color: var(--tf-accent); border-color: var(--tf-accent); }
  .ob-edge-l { left: calc(var(--ob-rail) + var(--ob-side-w)); border-left: 0; border-radius: 0 10px 10px 0; }
  .ob-edge-r { right: var(--ob-panel-w); border-right: 0; border-radius: 10px 0 0 10px; }
  .ob-edge-l::before { content: '\2039'; } .ob-root[data-side="closed"] .ob-edge-l::before { content: '\203A'; }
  .ob-edge-r::before { content: '\203A'; } .ob-root[data-panel="closed"] .ob-edge-r::before { content: '\2039'; }
  .ob-dock { position: absolute; left: calc(var(--ob-rail) + var(--ob-side-w) + 16px); right: calc(var(--ob-panel-w) + 16px); bottom: 16px; min-height: 152px; } /* Höhe des gefüllten Docks (zweizeilige Legende + Werkzeuge, gemessen 152 px) schon vor dem Rendern – kein Sprung der Themenkarte */
  .ob-side [data-slot="layers"] { min-height: 470px; } /* Ebenenliste rendert nach dem ersten Bild: Platz reservieren, damit „Über diese Ebene" nicht springt (gemessen 474 px) */
  .ob-region { min-width: 190px; } /* Regionsauswahl rendert nach dem ersten Bild: Breite reservieren (Kopfzeile springt sonst 189 px) */
  .ob-topiccard { position: absolute; left: calc(var(--ob-rail) + var(--ob-side-w) + 16px); bottom: calc(var(--ob-dock-h, 132px) + 28px); width: min(380px, 32vw); max-height: 46vh; overflow-y: auto; }
  .ob-tfcard { position: absolute; right: calc(var(--ob-panel-w) + 16px); top: calc(var(--ob-top) + 60px); bottom: calc(var(--ob-dock-h, 132px) + 28px); width: min(370px, 30vw); overflow-y: auto; align-content: start; }
  .ob-root[data-tf="1"][data-page="atlas"] .ob-stage .tf-map { right: calc(min(370px, 30vw) + 24px); } /* Globus rückt neben die offene Steuerkarte statt darunter */
  .ob-comparebar { position: absolute; left: calc(var(--ob-rail) + var(--ob-side-w) + (100vw - var(--ob-rail) - var(--ob-side-w) - var(--ob-panel-w)) / 2); transform: translateX(-50%); top: calc(var(--ob-top) + 60px); }
  .ob-tableview { position: absolute; left: calc(var(--ob-rail) + var(--ob-side-w) + 16px); right: calc(var(--ob-panel-w) + 16px); top: calc(var(--ob-top) + 60px); bottom: calc(var(--ob-dock-h, 132px) + 28px); overflow: hidden; --tf-matrix-h: calc(100vh - var(--ob-top) - var(--ob-dock-h, 132px) - 190px); }
  .ob-sheet { position: absolute; left: var(--ob-rail); right: 0; top: var(--ob-top); bottom: 0; overflow-y: auto; padding: 1.5rem; }
}
@media (min-width: 1000px) and (max-width: 1280px) { .ob-root { --ob-panel: 360px; --ob-side: 250px; } .ob-hide-sm { display: none; } }
@media (min-width: 1000px) and (max-height: 760px) { .ob-topiccard { display: none; } }

/* ---------- Tablet/Mobil: normaler Seitenfluss, Bühne oben ---------- */
@media (max-width: 999.98px) {
  .ob-root { display: flex; flex-direction: column; padding-bottom: 72px; }
  .ob-root[data-compare]:not([data-compare="0"]) { padding-bottom: 150px; } /* Q-08: feste Vergleichsleiste (bottom 84 px, ~58 px hoch) verdeckte sonst die letzten Bedienelemente */
  .ob-sheet-in > *, [data-slot="packages"], [data-slot="changes"], [data-slot="tfnews"] { scroll-margin-top: 140px; } /* Q-12: Sprungziele landen sonst unter dem klebenden Kopf */
  .ob-top { flex-wrap: wrap; position: sticky; top: 0; }
  .ob-brand-text b, .ob-search kbd, .ob-hide-sm, .ob-region, .ob-only-lg { display: none; }
  .ob-only-sm { display: inline; }
  .ob-top { gap: .5rem; } .ob-top-actions { gap: .35rem; min-width: 0; }
  .ob-search { order: 3; flex: 1 1 100%; max-width: none; }
  .ob-stage { position: relative; height: 56vh; min-height: 340px; max-height: 620px; }
  .ob-root:not([data-page="atlas"]) .ob-stage, .ob-root[data-view="table"] .ob-stage { display: none; }
  .ob-topicbar { order: 0; }
  .ob-dock { margin: .75rem; border-radius: 14px; }
  .ob-dock-layers, .ob-dock-legend { flex: 1 1 100%; overflow-x: auto; scrollbar-width: thin; }
  .ob-dock-legend .tf-legend { flex-wrap: nowrap; } .ob-dock-legend .tf-legend-btn { white-space: nowrap; }
  .ob-dock-tools { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
  .ob-panel { margin: 0 .75rem .75rem; border: 1px solid var(--tf-line); border-radius: 16px; }
  .ob-side { margin: 0 .75rem .75rem; border: 1px solid var(--tf-line); border-radius: 16px; order: -1; } /* im Fluss nach dem Dock, vor der Tabelle; Randschaltflächen gibt es hier nicht */
  .ob-topiccard, .ob-tableview, .ob-tfcard { margin: 0 .75rem .75rem; }
  .ob-tfcard { order: -1; }
  .ob-comparebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; white-space: nowrap; }
  .ob-sheet { padding: .75rem; }
  .ob-rail { position: fixed; left: 0; right: 0; bottom: 0; justify-content: space-around; padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--tf-line); background: #0a141a; z-index: 40; }
  .ob-rail button { flex: 1; min-height: 56px; font-size: .72rem; } /* 5 Tabs (Methodik/Kürzel auf Mobil ausgeblendet). Bewusste Ausnahme von der 14-px-Regel: Tab-Leisten-Beschriftung unter Icon, siehe docs/05 */
  .ob-rail button.ob-hide-sm { display: none; } /* Tastenkürzel-Tab auf Touch-Geräten sinnlos; ".ob-rail button{display:grid}" hätte .ob-hide-sm sonst überstimmt (gesehen bei echten 390 px) */
  .ob-rail-gap { display: none; }
  /* Reihenfolge im Fluss: Kopf, Themen, Bühne, Dock, Panel */
  .ob-top { order: -5; } .ob-topicbar { order: -4; } .ob-stage { order: -3; } .ob-dock { order: -2; } .ob-tableview { order: -1; }
}
.ob-root[data-embed="1"] .ob-brand-text b { display: none; }
@media print { .ob-body { background: #fff; } .ob-root { height: auto !important; overflow: visible !important; background: #fff !important; } .ob-panel { position: static !important; width: auto !important; } }

/* Gateway: Screening-Schaltfläche (nur sichtbar, wenn ein Gateway konfiguriert ist) */
.ob-gw { gap: .4rem; }
.ob-gw svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .ob-gw { min-width: 44px; padding-inline: .5rem; justify-content: center; } }