/* ============================================================================
   DMBXK-Hub – Marathon-UI-Stil (Runner-Interface + Kontrakt-Board), alle Seiten und die Konsole
   Anthrazit + Akzent (--neon, per js/theme.js wählbar), helle „Papier“-Karten mit Akzent-Kopfband, dunkle Fenster mit
   Eckklammern, Rasterchips, Pixel-/Schraffurmuster, Topografie in Weiß, ASCII-Planet.
   Aufbau: js/site.js (Seiten), js/admin.js (Konsole), js/ui.js (Gerüst). Bewegung reduzieren → alles steht.
   ========================================================================== */

:root {
  --bg: #0e1012;
  --bg-2: #131619;
  --panel: #16191c;
  --panel-2: #1c2024;
  --line: #262c31;
  --line-2: #3a4248;
  --text: #e6e9eb;
  --muted: #8d969c;
  --dim: #5c666c;
  --paper: #c9cdd0;
  --paper-2: #b7bcbf;
  --ink: #131619;
  --ink-2: #3c4348;
  --neon: #a6ff2e;
  --neon-hi: #d8ff86;
  --glow: rgba(166, 255, 46, .42);
  --glow-soft: rgba(166, 255, 46, .10);
  --neon-line: rgba(166, 255, 46, .30);
  --bg-deep: #0a0c0d;
  --on-neon: #0e1012;
  --warn: #ffd23f;
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --snap: cubic-bezier(.7, 0, .2, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image: radial-gradient(1100px 700px at 70% 30%, var(--glow-soft), transparent 65%), linear-gradient(180deg, var(--bg-2), var(--bg) 45%);
  background-attachment: fixed;
  color: var(--text);
  font: 400 13px/1.55 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Scanlines + Vignette über allem, ohne Zeiger */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(130% 90% at 50% 40%, transparent 58%, rgba(0, 0, 0, .55) 100%);
  opacity: .5;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--neon); color: var(--on-neon); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------- Boot -- */
/* statisch im HTML: steht, bis v2.js gezeichnet hat; danach blendet der Wischer auf */
.boot {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--bg);
  transition: opacity .35s var(--ease) .15s, visibility 0s linear .5s;
}
.boot-mark { font: 900 22px/1 var(--display); font-stretch: 125%; letter-spacing: .02em; }
.boot-mark em, .hud-logo em, .rank-mark em, .bx { font-style: normal; color: var(--neon); }   /* .bx = X in „DMBXK“ (ui.js brandify) */
.orr-tag .bx { fill: var(--neon); }
/* X auf Akzent-Flächen: Akzent auf dunklem Feld (wie .rank-mark em) */
:is(.btn-go, .card-band, .hud-nav a.is-on, .card:hover .card-btn) .bx { padding: 0 .06em; background: var(--on-neon); color: var(--neon); }
.boot-bar { width: 160px; height: 3px; background: var(--line); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 40%; background: var(--neon); animation: boot 1s var(--snap) infinite; }
.boot-txt { font-size: 10px; letter-spacing: .24em; color: var(--muted); }
@keyframes boot { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.is-ready .boot { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------- Wischer -- */
.wipe { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 1fr 1fr 1fr; pointer-events: none; }
.wipe i { background: var(--neon); transform-origin: right; transition: transform .42s var(--snap); }
.wipe i:nth-child(2) { background: var(--panel-2); transition-delay: .05s; }
.wipe i:nth-child(3) { transition-delay: .1s; }
.is-ready .wipe i { transform: scaleX(0); }
.is-leaving .wipe i { transform: scaleX(1); transform-origin: left; transition-duration: .3s; }

/* ------------------------------------------------------- Hintergrund -- */
.topo {
  position: fixed;
  inset: -24px;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 55%, transparent 100%);
}
.topo svg { display: block; width: 100%; height: 100%; }
.topo path { fill: none; stroke: #e9edef; stroke-opacity: .065; stroke-width: 1; }
.topo path.maj { stroke: var(--neon); stroke-opacity: .13; stroke-width: 1.5; }
.topo path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease) forwards; animation-delay: calc(.25s + var(--td)); }
.topo path.dash { stroke-dasharray: 4 6; opacity: 0; animation: fade 1.4s var(--ease) forwards; animation-delay: calc(.6s + var(--td)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

.planet {
  margin: 0;
  font-family: var(--mono);
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  text-align: left;
  color: var(--neon);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
/* Planet im Hintergrund der Unterseiten (rechts angeschnitten, gedämpft) */
.planet-bg { position: fixed; z-index: 1; top: 50%; right: -16vmin; width: 88vmin; height: 88vmin; translate: 0 -50%; opacity: .2; pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }

/* ------------------------------------------------------------ Rahmen -- */
.frame { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; padding: 0 22px; }   /* Kopf und Fuß über die ganze Breite */
.frame > main { flex: 1; width: 100%; max-width: 1436px; margin: 0 auto; }

/* Einlauf: Blöcke wischen von oben auf (Clip) und gleiten ein, gestaffelt über --d */
[data-rv] {
  opacity: 0;
  translate: 0 16px;
  clip-path: inset(0 0 100% 0);
  transition: opacity .5s var(--ease), translate .8s var(--ease), clip-path .8s var(--snap);
  transition-delay: var(--d, 0ms);
}
.is-ready [data-rv] { opacity: 1; translate: 0 0; clip-path: inset(-80px); }
.is-settled [data-rv] { clip-path: none; translate: none; }   /* nach dem Einlauf: nichts beschneiden (Planet rückt bei Auswahl nach links), kein Transform (sonst hängt position:fixed am Block) */
/* Entschlüsseln: unsichtbare Kopie hält die Größe, Zufallszeichen liegen darüber und werden beschnitten */
.dec { position: relative; display: inline-block; max-width: 100%; }
.dec-g { visibility: hidden; }
.dec-a { position: absolute; inset: 0; overflow: hidden; word-break: break-all; }

/* --------------------------------------------------------------- Kopf -- */
.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  margin: 0 -22px;
  padding: 0 22px;
  background: rgba(14, 16, 18, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  animation: hud-in .7s var(--ease) both .1s;
}
@keyframes hud-in { from { opacity: 0; transform: translateY(-100%); } }
.hud-logo { display: inline-flex; align-items: center; gap: 9px; font: 900 15px/1 var(--display); font-stretch: 125%; letter-spacing: .02em; flex: none; }
.eye { position: relative; display: grid; place-items: center; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, var(--neon-hi) 0 30%, var(--neon) 60%); box-shadow: 0 0 12px var(--glow), inset 0 0 0 2px rgba(0, 0, 0, .25); animation: blink 7s infinite; }
.eye-pupil { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); transition: transform .14s ease-out, width .25s var(--ease), height .25s var(--ease); }
.eye-pupil::after { content: ""; position: absolute; left: 2px; top: 2px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.hud-logo:hover .eye-pupil { width: 12px; height: 12px; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } 97% { transform: scaleY(1); } }
.hud-burger { display: none; margin-left: auto; width: 36px; height: 32px; padding: 6px; border: 1px solid var(--line-2); background: none; border-radius: 3px; cursor: pointer; }
.hud-burger svg { width: 100%; height: 100%; }

.hud-nav { display: flex; gap: 4px; margin-left: 10px; }
.hud-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border-radius: 3px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s, background .2s;
}
.hud-nav a i { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 3px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 9px; color: var(--dim); transition: inherit; }
.hud-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--neon); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hud-nav a:hover { color: var(--text); }
.hud-nav a:hover::after { transform: scaleX(1); }
.hud-nav a.is-on { background: var(--neon); color: var(--on-neon); }
.hud-nav a.is-on i { border-color: currentColor; color: inherit; background: rgba(0, 0, 0, .12); }
.hud-nav a.is-on::after { display: none; }

.hud-status { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: rgba(0, 0, 0, .25);
  font: 600 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--sys { color: var(--neon); border-color: var(--neon-line); }
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--glow); flex: none; }
.pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--neon); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.chip--meter .lbl { color: var(--muted); }
.seg { display: inline-flex; gap: 2px; }
.seg i { width: 5px; height: 12px; background: var(--line-2); transition: background .4s, box-shadow .4s; }
.seg i.is-on { background: var(--neon); box-shadow: 0 0 6px var(--glow); }
.chip--meter b { font-weight: 700; min-width: 26px; text-align: right; }
.chip--clock { font-variant-numeric: tabular-nums; color: var(--text); min-width: 82px; justify-content: center; }

.hud-theme { display: flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid var(--line); }
.sw { position: relative; width: 16px; height: 16px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 2px; background: var(--sw); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.sw:hover { transform: translateY(-2px); }
.sw.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--sw); }
.sw--own { background: conic-gradient(from 90deg, #ff3d4f, #ffd23f, #a6ff2e, #35e0ff, #b36bff, #ff3d4f); }
.sw--own::after { content: ""; position: absolute; inset: 4px; border-radius: 1px; background: var(--sw); }
.sw--own input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* ---------------------------------------------------------- Bausteine -- */
.kicker { font: 600 11px/1 var(--mono); letter-spacing: .16em; color: var(--neon); text-transform: uppercase; }
.tag { display: inline-block; padding: 3px 7px; border: 1px solid currentColor; border-radius: 2px; font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.wip {
  display: inline-grid;
  place-items: end center;
  flex: none;
  width: 17px;
  height: 15px;
  margin-left: 8px;
  padding-bottom: 1px;
  background: var(--warn);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  color: #14161a;
  font: 700 10px/1 var(--mono);
  vertical-align: -2px;
  animation: wip 2.4s ease-in-out infinite;
}
@keyframes wip { 50% { filter: brightness(1.25); } }
.btn-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--neon);
  border-radius: 3px;
  background: var(--neon);
  color: var(--on-neon);
  font: 800 13px/1 var(--display);
  font-stretch: 112%;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .25s, transform .2s var(--ease);
}
.btn-go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.btn-go:hover { background: transparent; color: var(--neon); box-shadow: 0 0 22px var(--glow); }
.btn-go:hover svg { transform: translate(3px, -3px); }
.btn-go:active { transform: scale(.97); }
.btn-go--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-go--light:hover { background: transparent; color: var(--paper); box-shadow: none; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; margin: 34px 0 22px; }
.page-head .kicker { flex-basis: 100%; }
.page-title, .run-title { margin: 0; font: 900 clamp(34px, 5.2vw, 66px)/.92 var(--display); font-stretch: 125%; letter-spacing: -.005em; text-transform: uppercase; }
.page-count { margin-bottom: 6px; font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }

/* ------------------------------------------------- Start: Runner-Interface -- */
.frame > main.run { flex: none; }
.run { position: relative; display: flex; flex-direction: column; height: calc(100vh - 98px); height: calc(100svh - 98px); min-height: 600px; padding-bottom: 16px; }   /* Startseite ohne Scrollen (Kopf 52 + Fuß 46) */
.run-head { display: grid; gap: 8px; margin: 18px 0 8px; }
.run-title { font-size: clamp(22px, 2.9vw, 40px); }
.run-title em { font-style: normal; color: var(--neon); }
.run-sub { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.run-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 14px minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr); gap: 22px; }   /* Zeile fest: rechte Spalte schrumpft (ORBIT), statt die Seite zu verlängern */
.run-bar { position: relative; background: repeating-linear-gradient(-45deg, var(--line) 0 3px, transparent 3px 7px); }
.run-bar i { position: absolute; inset: 0; background: var(--neon); box-shadow: 0 0 16px var(--glow); transform-origin: top; animation: bar-in 1.6s var(--snap) .5s both; }
.run-bar i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18%; height: 30%; background: repeating-linear-gradient(0deg, var(--on-neon) 0 2px, transparent 2px 6px); opacity: .5; }
@keyframes bar-in { from { transform: scaleY(0); } }

.stage { position: relative; min-height: 0; }
.globe { position: absolute; inset: 0; transition: transform 1.1s var(--snap); }
.stage.is-focus .globe { transform: translateX(-21%) scale(1.05); }
/* Planetenkörper: dunkle Scheibe (Topografie scheint nicht durch), Lichtfleck oben links, Atmosphären-Leuchten am Rand */
.globe-atmo { position: absolute; left: calc(var(--cx, 50%) - var(--r, 200px) * 1.4); top: calc(var(--cy, 50%) - var(--r, 200px) * 1.4); width: calc(var(--r, 200px) * 2.8); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 34%, var(--glow-soft), transparent 28%), radial-gradient(closest-side, var(--bg-deep) 0 70.5%, var(--glow) 71.4%, var(--glow-soft) 76%, transparent 100%); }
.planet { position: absolute; inset: 0; display: grid; place-items: center; }
.planet > span { grid-area: 1 / 1; white-space: pre; }
.pl-sea { color: var(--neon); opacity: .3; }
.pl-land { color: var(--neon); text-shadow: 0 0 6px var(--glow); }
.pl-ice { color: #eef3f5; opacity: .82; text-shadow: 0 0 5px rgba(255, 255, 255, .3); }
.stage-lead { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage-lead path { fill: none; stroke: var(--neon); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 4px var(--glow)); }
.stage-lead.is-on path { opacity: 1; animation: draw .5s var(--ease) .15s forwards; }
.stage-orbit { position: absolute; left: 50%; top: 52%; width: min(112%, 1000px); aspect-ratio: 2.6; translate: -50% -50%; rotate: -12deg; overflow: visible; pointer-events: none; }
.stage-orbit ellipse { fill: none; stroke: rgba(233, 237, 239, .22); stroke-width: 1.2; stroke-dasharray: 2 7; animation: orbit 30s linear infinite; }
.stage-orbit circle { fill: var(--neon); filter: drop-shadow(0 0 6px var(--glow)); }
@keyframes orbit { to { stroke-dashoffset: -180; } }
.stage-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage-links path { fill: none; stroke-width: 1.2; }
.stage-tag { position: absolute; font: 600 10px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }
.stage-tag--tl { left: 4px; top: 6px; }
.stage-tag--br { right: 4px; bottom: 6px; }

.pois { position: absolute; inset: 0; pointer-events: none; }
.poi { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .3s; will-change: transform; }
.poi-ring { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; background: var(--bg); box-shadow: 0 0 0 3px rgba(0, 0, 0, .5); transition: transform .25s var(--ease), border-color .2s; }
.poi-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--acc); }
.poi-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--acc); animation: pulse 2.4s var(--ease) infinite; }
.poi-lbl {
  position: absolute;
  top: -22px;
  left: 52px;
  display: inline-flex;
  align-items: center;
  translate: 0 -50%;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 2px;
  background: rgba(8, 10, 11, .82);
  font: 700 12px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  transition: background .2s, color .2s, border-color .2s;
}
.poi.is-left .poi-lbl { left: auto; right: 52px; }
.poi:hover .poi-ring, .poi.is-hot .poi-ring, .poi.is-sel .poi-ring { transform: scale(1.35); border-color: var(--neon); }
.poi:hover .poi-lbl, .poi.is-hot .poi-lbl, .poi.is-sel .poi-lbl { background: var(--neon); border-color: var(--neon); color: var(--on-neon); }
.poi.is-off .poi-ring::before { background: var(--dim); }
.poi.is-off .poi-ring::after { display: none; }
.poi.is-off .poi-lbl { color: var(--muted); }
/* Ziel erfasst: Fadenkreuz-Ecken rasten auf den Marker in der Mitte ein */
.poi::before { content: ""; position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; opacity: 0; pointer-events: none; transform: scale(2.4) rotate(45deg);
  background: linear-gradient(var(--neon), var(--neon)) left top / 14px 2px no-repeat, linear-gradient(var(--neon), var(--neon)) left top / 2px 14px no-repeat,
    linear-gradient(var(--neon), var(--neon)) right top / 14px 2px no-repeat, linear-gradient(var(--neon), var(--neon)) right top / 2px 14px no-repeat,
    linear-gradient(var(--neon), var(--neon)) left bottom / 14px 2px no-repeat, linear-gradient(var(--neon), var(--neon)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--neon), var(--neon)) right bottom / 14px 2px no-repeat, linear-gradient(var(--neon), var(--neon)) right bottom / 2px 14px no-repeat;
  filter: drop-shadow(0 0 5px var(--glow)); transition: opacity .3s, transform .9s var(--snap); }
.poi.is-sel::before { opacity: 1; transform: none; }
.poi.is-sel .poi-ring { transform: scale(1.5); border-color: var(--neon); }
.stage.is-focus .poi.is-sel .poi-lbl { opacity: 0; }

.run-side { display: flex; flex-direction: column; gap: 20px; min-height: 0; padding-top: 6px; }
.side-h { margin: 0 0 12px; font: 900 19px/1 var(--display); font-stretch: 125%; letter-spacing: .02em; }
.contracts { display: grid; grid-template-columns: repeat(4, 54px); gap: 8px; }
.ct {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--acc);
  color: var(--ink);
  cursor: pointer;
  transform: perspective(400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: box-shadow .25s;   /* Neigung glättet ui.js (tilt) */
  animation: ct-in .5s var(--snap) both;
  animation-delay: calc(.7s + var(--i) * 70ms);
}
.ct svg { width: 28px; height: 28px; }
.ct .wip { position: absolute; right: -5px; top: -6px; margin: 0; }
.ct::after { content: ""; position: absolute; inset: -5px; border: 1px solid #fff; opacity: 0; transform: scale(1.15); transition: opacity .2s, transform .25s var(--ease); clip-path: polygon(0 0, 30% 0, 30% 2px, 2px 2px, 2px 30%, 0 30%, 0 0, 100% 0, 100% 30%, calc(100% - 2px) 30%, calc(100% - 2px) 2px, 70% 2px, 70% 0, 100% 0, 100% 100%, 70% 100%, 70% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 70%, 100% 70%, 100% 100%, 0 100%, 0 70%, 2px 70%, 2px calc(100% - 2px), 30% calc(100% - 2px), 30% 100%, 0 100%); }
.ct:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.ct:hover::after { opacity: 1; transform: none; }
@keyframes ct-in { from { opacity: 0; transform: scale(.4); } }
.readout { display: grid; border-top: 1px solid var(--line); }
.ro { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.ro span { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.ro b { font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.ro--acc b { color: var(--neon); text-shadow: 0 0 12px var(--glow); }
.side-h small { margin-left: 6px; font: 600 9.5px/1 var(--mono); letter-spacing: .16em; vertical-align: 3px; color: var(--dim); }
/* ORBIT: Mini-Planetensystem (Bahnen gekippt, Radar-Schwenk, DMBXK mit Spur + Etikett) und Telemetrie der Kugel */
.orbit { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: auto; }
.orbit .side-h { flex: none; }
.orrery { display: block; flex: 1 1 auto; width: 100%; min-height: 54px; max-height: 128px; margin: 0 0 10px; overflow: visible; }   /* schrumpft auf niedrigen Bildschirmen */
.orr-path { fill: none; stroke: rgba(233, 237, 239, .16); stroke-width: .6; }
.orr-path.is-me { stroke: var(--neon); stroke-opacity: .5; stroke-dasharray: 2 2.5; }
.orr-sweep { transform-origin: 0 0; animation: orr-spin 9s linear infinite; }
.orr-sweep path { fill: var(--neon); opacity: .09; }
.orr-trail { fill: none; stroke: var(--neon); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.orr-glow { fill: var(--glow-soft); transform-origin: 0 0; animation: orr-star 3.2s ease-in-out infinite; }
.orr-star { fill: #fff3cf; filter: drop-shadow(0 0 4px #ffcf6e); }
.orr-pl { fill: #c9cdd0; opacity: .75; }
.orr-me circle { fill: var(--neon); filter: drop-shadow(0 0 3px var(--glow)); }
.orr-me ellipse { fill: none; stroke: var(--neon); stroke-width: .6; opacity: .7; }
.orr-tag path { fill: none; stroke: var(--neon); stroke-width: .6; }
.orr-tag text { font: 700 6.5px var(--mono); letter-spacing: .1em; fill: var(--text); }
@keyframes orr-spin { to { transform: rotate(360deg); } }
@keyframes orr-star { 50% { transform: scale(1.25); opacity: .7; } }
.telemetry { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.telemetry div { min-width: 0; padding: 7px 9px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.telemetry dt { font: 600 9px/1 var(--mono); letter-spacing: .16em; color: var(--dim); }
.telemetry dd { margin: 5px 0 0; overflow: hidden; font: 700 11.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.telemetry dd.is-lock { color: var(--neon); }

/* Fenster (Ziel, Akte, Formular): dunkles Glas, Eckklammern; öffnet als Linie, die erst in die Breite, dann in die Höhe aufgeht */
.win { position: relative; padding: 18px 20px 20px; border: 1px solid rgba(233, 237, 239, .2); background: linear-gradient(180deg, rgba(22, 25, 28, .95), rgba(11, 13, 15, .95)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.win::before, .win::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--neon); pointer-events: none; }
.win::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.win::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.win-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-2); font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--muted); }
.win-x { width: 30px; height: 30px; padding: 6px; border: 1px solid var(--line-2); border-radius: 2px; background: none; cursor: pointer; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.win-x:hover { border-color: var(--neon); color: var(--neon); transform: rotate(90deg); }
.win-x svg { width: 100%; height: 100%; }
.win-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font: 900 clamp(24px, 2.6vw, 34px)/1.02 var(--display); font-stretch: 120%; text-transform: uppercase; }
.win-sub { margin-bottom: 16px; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.win-body { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; }
.win-body p { margin: 0; font-size: 12.5px; color: #c6cbce; }
.win-emb { display: grid; place-items: center; aspect-ratio: 1; background: var(--acc); color: var(--ink); background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 6px); }
.win-emb svg { width: 44px; height: 44px; }
.win-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.win-stats div { padding: 9px 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.win-stats .win-tags { grid-column: 1 / -1; }
.win-stats dt { font-size: 9.5px; letter-spacing: .14em; color: var(--muted); }
.win-stats dd { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; font: 800 15px/1.2 var(--display); }
.win-go { width: 100%; }
/* Baustellen-Hinweis im Ziel-Fenster (WIP-Häkchen in der Konsole) */
.win-wip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 16px; padding: 10px 12px; border: 1px solid rgba(255, 210, 63, .45); background: repeating-linear-gradient(-45deg, rgba(255, 210, 63, .1) 0 8px, transparent 8px 16px), rgba(255, 210, 63, .04); }
.win-wip .wip { width: 24px; height: 21px; margin: 0; font-size: 12px; }
.win-wip p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #ddd6b4; }
.win-wip b { display: block; margin-bottom: 3px; font: 800 11px/1 var(--mono); letter-spacing: .18em; color: var(--warn); }
@keyframes win-open { 0% { opacity: 1; clip-path: inset(calc(50% - 1px) 100% calc(50% - 1px) 0); } 42% { opacity: 1; clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); } 100% { opacity: 1; clip-path: inset(-30px); } }
@keyframes win-close { 0% { opacity: 1; clip-path: inset(-30px); } 55% { opacity: 1; clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); } 100% { opacity: 0; clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 100%); } }
@keyframes win-in { from { opacity: 0; transform: translateY(8px); } }
.win > :nth-child(2) { --k: 1; } .win > :nth-child(3) { --k: 2; } .win > :nth-child(4) { --k: 3; } .win > :nth-child(5) { --k: 4; } .win > :nth-child(6) { --k: 5; } .win > :nth-child(7) { --k: 6; }
/* Ziel-Fenster rechts auf der Bühne (Planet rückt dafür nach links) */
.poi-panel { position: absolute; z-index: 5; top: 50%; right: 14px; width: min(420px, 46%); translate: 0 -50%; pointer-events: none; }
.poi-panel .win { opacity: 0; }
.poi-panel.is-open { pointer-events: auto; }
.poi-panel.is-open .win { animation: win-open .72s var(--snap) both; }
.poi-panel.is-open .win > *, .dossier.is-swap .win > * { animation: win-in .45s var(--ease) both; animation-delay: calc(.4s + var(--k, 0) * 60ms); }
.poi-panel.is-closing .win { animation: win-close .28s var(--snap) both; }

/* --------------------------------------------------- Spiele: Kontrakt-Board -- */
.board { padding-bottom: 40px; }
.board-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.board-side { position: sticky; top: 74px; display: grid; gap: 18px; }
.mini-planet { padding: 14px; }
.mini-on { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.mini-globe { position: relative; aspect-ratio: 1; margin: 6px 0 12px; }
.mini-globe .planet { position: absolute; inset: 0; }
.board-side .orbit { margin: 0; }
.rank {
  position: relative;
  padding: 0 0 12px;
  background: var(--neon);
  color: var(--on-neon);
  background-image: radial-gradient(circle, rgba(0, 0, 0, .14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s var(--ease);
}
.rank-band { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; background: rgba(0, 0, 0, .1); font: 800 13px/1 var(--display); font-stretch: 118%; letter-spacing: .04em; }
.rank-band b { font-variant-numeric: tabular-nums; }
.rank-mark { padding: 34px 12px 26px; font: 900 34px/1 var(--display); font-stretch: 125%; text-align: center; }
.rank-mark em { padding: 0 .06em; background: var(--on-neon); color: var(--neon); }   /* auf Akzent-Fläche: X im Akzent auf dunklem Feld */
.rank-meta { display: flex; justify-content: space-between; padding: 0 12px; font: 600 10px/1 var(--mono); letter-spacing: .1em; }
.menu { display: grid; gap: 4px; }
.menu a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); border-radius: 2px; transition: background .2s, color .2s, padding .25s var(--ease); }
.menu a i { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 18px; border: 1px solid currentColor; border-radius: 2px; font-size: 10px; }
.menu a:hover { color: var(--text); padding-left: 16px; }
.menu a.is-on { background: var(--paper); color: var(--ink); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px; }
.card.is-wide { grid-column: span 2; }
.card.is-wide .card-desc { font-size: 13px; max-width: 46ch; }
.card.is-wide .card-emb { width: 44px; height: 44px; }
.card.is-wide .card-emb svg { width: 26px; height: 26px; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ly, 0px));   /* --rx/--ry/--ly glättet ui.js (tilt), Ziel fürs Anheben: --lift */
  transition: box-shadow .35s var(--ease), opacity .5s var(--ease), translate .8s var(--ease), clip-path .8s var(--snap);
  transition-delay: 0s, var(--d), var(--d), var(--d);
}
/* Lichtfleck folgt dem Zeiger */
.card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .28), transparent 60%); opacity: 0; transition: opacity .3s; }
.card:hover { --lift: -5px; box-shadow: 0 0 0 1px var(--neon), 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px var(--glow-soft); }
.card:hover::before { opacity: 1; }
/* Auswahlrahmen (weiße Ecken wie der Marathon-Cursor) */
.sel { position: absolute; inset: -9px; z-index: 2; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .2s, transform .3s var(--ease);
  background:
    linear-gradient(#fff, #fff) left top / 18px 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) right top / 18px 2px no-repeat, linear-gradient(#fff, #fff) right top / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 18px 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 18px 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px 18px no-repeat; }
.card:hover .sel { opacity: 1; transform: none; }
.card-band { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 12px; overflow: hidden; background: var(--neon); color: var(--on-neon); font: 900 14px/1.1 var(--display); font-stretch: 112%; letter-spacing: .03em; text-transform: uppercase; }
.card-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-110%); }
.card:hover .card-band::after { transform: translateX(110%); transition: transform .7s var(--ease); }
.card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-idx { font: 700 11px/1 var(--mono); opacity: .7; }
.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 12px; }
.card-row { display: flex; align-items: center; gap: 8px; }
.card-emb { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: var(--acc); color: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); }
.card-emb svg { width: 20px; height: 20px; }
.card:hover .card-emb { transform: rotate(-8deg) scale(1.08); }
.card-tag { padding: 4px 7px; background: var(--ink); color: var(--paper); font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-desc { font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.card-stripe { height: 10px; margin: 2px 0; background: repeating-linear-gradient(90deg, var(--paper-2) 0 14px, transparent 14px 20px), repeating-linear-gradient(90deg, transparent 0 6px, var(--paper-2) 6px 8px); background-size: 100% 4px, 100% 2px; background-position: 0 0, 0 8px; background-repeat: no-repeat; }
.card-obj-h { margin-top: auto; font: 700 11px/1 var(--mono); letter-spacing: .1em; }
.obj { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; padding: 6px 8px; background: rgba(0, 0, 0, .06); font-size: 11px; }
.obj-k { color: var(--ink-2); }
.obj-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.obj-bar { grid-column: 1 / -1; height: 4px; background: rgba(0, 0, 0, .14); }
.obj-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 1s var(--ease); }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; color: var(--ink-2); }
.card-btn { display: flex; justify-content: space-between; align-items: center; margin: 0 12px 12px; padding: 9px 11px; border-radius: 2px; background: var(--ink); color: var(--paper); font: 600 11px/1 var(--mono); letter-spacing: .06em; transition: background .2s, color .2s; }
.card-btn svg { width: 15px; height: 15px; }
.card:hover .card-btn { background: var(--neon); color: var(--on-neon); }

/* ------------------------------------------------------------ Socials -- */
/* Kanalliste links (Fraktions-Liste), rechts die Akte als Fenster mit ASCII-Logo */
.soc { padding-bottom: 40px; }
.soc-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: stretch; }   /* Akte so hoch wie die Kanalliste */
.chans { display: grid; gap: 14px; align-content: start; }
.chan { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 2px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); transform: translate(var(--sx, 0), var(--lift, 0)); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  animation: ct-in .5s var(--snap) both; animation-delay: calc(.35s + var(--i) * 60ms); }
.chan::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%) -120% 0 / 220% 100% no-repeat; opacity: 0; transition: opacity .2s; }
.chan:hover { --lift: -3px; box-shadow: 0 0 0 1px var(--neon), 0 14px 30px rgba(0, 0, 0, .5), 0 0 26px var(--glow-soft); }
.chan:hover::before { opacity: 1; animation: chan-sheen .8s var(--ease); }
@keyframes chan-sheen { to { background-position: 120% 0; } }
.chan:hover .sel, .chan.is-on .sel { opacity: 1; transform: none; }
.chan-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--neon); color: var(--on-neon); font: 900 14px/1 var(--display); font-stretch: 115%; letter-spacing: .03em; text-transform: uppercase; }
.chan-idx { font: 700 10px/1 var(--mono); letter-spacing: .1em; opacity: .7; }
.chan-body { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 8px; }
.chan-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 2px; background: var(--ink); color: var(--neon); transition: transform .35s var(--ease); }
.chan-ico svg { width: 20px; height: 20px; }
.chan:hover .chan-ico { transform: rotate(-8deg) scale(1.08); }
.chan-txt { min-width: 0; }
.chan-txt small { display: block; font: 600 9px/1 var(--mono); letter-spacing: .16em; color: var(--ink-2); }
.chan-txt b { display: block; margin-top: 5px; overflow: hidden; font: 700 13px/1.1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.chan-sig { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.chan-sig i { width: 4px; background: rgba(0, 0, 0, .18); }
.chan-sig i:nth-child(1) { height: 25%; } .chan-sig i:nth-child(2) { height: 50%; } .chan-sig i:nth-child(3) { height: 75%; } .chan-sig i:nth-child(4) { height: 100%; }
.chan-sig.is-live i { background: var(--ink); animation: sig 1.6s steps(1) infinite; }
.chan-sig.is-live i:nth-child(4) { animation-delay: .4s; }
@keyframes sig { 50% { opacity: .35; } }
.chan-foot { display: flex; justify-content: space-between; gap: 8px; margin: 0 12px 10px; padding-top: 7px; border-top: 1px dashed var(--paper-2); font: 600 9.5px/1 var(--mono); letter-spacing: .1em; color: var(--ink-2); }
.chan-state { font-weight: 700; color: var(--ink); }
.chan.is-on { --sx: 8px; box-shadow: 0 0 0 1px var(--neon), 0 0 30px var(--glow-soft); }
.chan.is-on::after { content: ""; position: absolute; top: 50%; right: -10px; width: 0; height: 0; translate: 0 -50%; border: 10px solid transparent; border-right: 0; border-left-color: var(--neon); filter: drop-shadow(0 0 6px var(--glow)); }   /* Spitze zur Akte */
.dossier { display: flex; min-width: 0; }
.dossier > .win { flex: 1; display: flex; flex-direction: column; }
.dossier .dos-grid { flex: 1; }
.dossier .dos-foot { margin-top: auto; }
.dossier.is-swap .win { animation: win-open .6s var(--snap) both; }
.dos-flag { padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 2px; font: 700 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.dos-flag.is-live { border-color: var(--neon); background: var(--neon); color: var(--on-neon); }
.dos-grid { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 24px; margin-top: 16px; }
.dos-art { display: grid; justify-items: center; align-content: center; gap: 12px; margin: 0; padding: 16px 10px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, var(--glow-soft), transparent 70%), rgba(0, 0, 0, .25); }
.ascii-logo { margin: 0; min-height: 234px; font: 600 9px/1 var(--mono); letter-spacing: 0; white-space: pre; color: var(--neon); text-shadow: 0 0 6px var(--glow); }
.ascii-logo.is-svg { display: grid; place-items: center; }
.ascii-logo.is-svg svg { width: 130px; height: 130px; filter: drop-shadow(0 0 12px var(--glow)); }
.dos-art figcaption { font: 700 12px/1 var(--mono); color: var(--text); }
.dos-rows { display: grid; align-content: start; margin: 0; }
.dos-row { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dos-row dt { font: 600 10px/1 var(--mono); letter-spacing: .16em; white-space: nowrap; color: var(--muted); }
.dos-lead { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px); }
.dos-row dd { max-width: 62%; margin: 0; font: 700 13px/1.3 var(--mono); text-align: right; overflow-wrap: anywhere; }
.redact { display: inline-block; width: 110px; max-width: 100%; height: 12px; vertical-align: middle; background: repeating-linear-gradient(90deg, var(--line-2) 0 7px, #2a3136 7px 10px); animation: redact 2.6s steps(5) infinite; }
@keyframes redact { 50% { opacity: .5; } }
.dos-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.dos-none { font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.dos-meta { display: inline-flex; align-items: center; gap: 8px; font: 600 10px/1 var(--mono); letter-spacing: .12em; color: var(--dim); }
.dos-meta .pulse { width: 6px; height: 6px; }

/* ------------------------------------------------------------ Kontakt -- */
.con { padding-bottom: 40px; }
.con-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }   /* Adresse und Formular gleich groß */
.crypt { position: relative; display: grid; align-content: center; min-height: 440px; overflow: hidden; background: var(--paper); border-radius: 2px; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
/* Pixelrauschen (Canvas aus v2.js, hochskaliert ohne Glättung); Mitte frei für das Kopfband */
.crypt-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: .9;
  mask-image: linear-gradient(180deg, #000 0 26%, transparent 36% 64%, #000 74%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 26%, transparent 36% 64%, #000 74%);
}
.crypt-band { position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 18px; background: var(--neon); color: var(--on-neon); text-align: center; box-shadow: 0 0 40px var(--glow); }
.crypt-h { font: 900 clamp(20px, 2.5vw, 34px)/1.05 var(--display); font-stretch: 120%; }
.crypt-sub { font: 700 11px/1 var(--mono); letter-spacing: .2em; }
.crypt-btn { margin-top: 8px; padding: 11px 18px; border: 0; border-radius: 3px; background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.crypt-btn:hover { transform: scale(1.03); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--paper); }
.crypt-mail { font: 700 clamp(13px, 1.6vw, 17px)/1 var(--mono); letter-spacing: .08em; }
.crypt-btn.is-open { cursor: default; }
.crypt-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; animation: fade .4s var(--ease) both; opacity: 0; }
.crypt-acts .btn-go { background: var(--ink); border-color: var(--ink); color: var(--neon); }
.crypt-acts .btn-go--light { background: transparent; color: var(--ink); border-color: var(--ink); }
.crypt-acts .btn-go:hover { background: transparent; color: var(--ink); box-shadow: none; }
.crypt-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--neon); color: var(--on-neon); font: 700 11px/1 var(--mono); letter-spacing: .14em; }
.crypt-foot svg { width: 15px; height: 15px; }
/* Direktnachricht */
.form-win .win-head .pulse { margin-right: 4px; }
.cform { display: grid; gap: 14px; margin-top: 14px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > span { display: flex; justify-content: space-between; gap: 8px; font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--muted); }
.fld small { font-size: 10px; letter-spacing: .04em; color: var(--dim); }
.inp { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(8, 10, 11, .6); color: var(--text); font: 500 13px/1.4 var(--mono); transition: border-color .2s, box-shadow .2s; }
.inp:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 0 22px -6px var(--glow); }
.inp::placeholder { color: var(--dim); }
textarea.inp { min-height: 150px; resize: vertical; }
select.inp { cursor: pointer; }
.topics { display: flex; flex-wrap: wrap; gap: 6px; }
.topic { position: relative; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic span { display: inline-block; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 3px; font: 700 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.topic span:hover { color: var(--text); border-color: var(--neon-line); }
.topic input:checked + span { border-color: var(--neon); background: var(--neon); color: var(--on-neon); }
.topic input:focus-visible + span { outline: 2px solid var(--neon); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-msg { font: 600 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
.cform.is-sending .btn-go { position: relative; overflow: hidden; pointer-events: none; }
.cform.is-sending .btn-go::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--on-neon); transform-origin: left; animation: sendbar .9s var(--ease) forwards; }
@keyframes sendbar { from { transform: scaleX(0); } }
.sent { display: grid; justify-items: start; gap: 12px; padding: 26px 0 6px; animation: win-in .4s var(--ease) both; }
.sent-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--neon); color: var(--on-neon); font: 900 26px/1 var(--display); box-shadow: 0 0 30px var(--glow); animation: ct-in .5s var(--snap) both; }
.sent h3 { margin: 0; font: 900 30px/1 var(--display); font-stretch: 120%; }
.sent p { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- Fuß -- */
.hud-foot { display: flex; align-items: center; gap: 14px; height: 46px; margin: 0 -22px; padding: 0 22px; border-top: 1px solid var(--line); background: rgba(14, 16, 18, .7); font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.foot-socs { display: flex; gap: 6px; }
.foot-soc { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); transition: color .2s, border-color .2s, transform .2s var(--ease); }
.foot-soc svg { width: 13px; height: 13px; }
.foot-soc:hover { color: var(--neon); border-color: var(--neon-line); transform: translateY(-2px); }
.foot-sep { flex: 1; }
.foot-item { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.foot-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); transition: background .2s, color .2s; }
.foot-icon svg { width: 14px; height: 14px; }
.foot-icon:hover { background: var(--neon); color: var(--on-neon); }
.foot-ver { color: var(--dim); }

/* ------------------------------------------------------------ Hinweis -- */
.toast { position: fixed; left: 50%; bottom: 64px; z-index: 96; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid var(--neon-line); border-radius: 3px; background: rgba(14, 16, 18, .96); color: var(--neon); font: 700 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); opacity: 0; translate: -50% 16px; pointer-events: none; transition: opacity .25s, translate .35s var(--ease); }
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ------------------------------------------------------------ Konsole -- */
.adm { padding-bottom: 40px; --rar-consumer: #b0c3d9; --rar-industrial: #5e98d9; --rar-milspec: #4b69ff; --rar-restricted: #8847ff; --rar-classified: #d32ce6; --rar-covert: #eb4b4b; --rar-mythic: #1affd0; --rar-gold: #e4ae39; }
.adm .page-head .btn { margin: 0 0 6px auto; }
/* Sperre: verschlüsseltes Fenster wie auf /kontakt */
.gate { max-width: 760px; min-height: 430px; margin: 40px auto 60px; }
.gate-k { font: 700 11px/1 var(--mono); letter-spacing: .2em; }
.gate-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.gate-form .inp { width: 260px; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.gate-form .btn-go { background: var(--ink); border-color: var(--ink); color: var(--neon); }
.gate-form .btn-go:hover { background: transparent; color: var(--ink); box-shadow: none; }
.gate-err { min-height: 14px; font: 700 11px/1 var(--mono); letter-spacing: .14em; }
.gate.is-denied { animation: shake .45s; }
@keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.adm-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.adm-side { position: sticky; top: 74px; display: grid; gap: 12px; }
.adm-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 12px; border: 0; border-radius: 2px; background: none; color: var(--muted); font: 700 11px/1 var(--mono); letter-spacing: .14em; text-align: left; cursor: pointer; transition: background .2s, color .2s, padding .25s var(--ease); }
.adm-menu button:hover { color: var(--text); padding-left: 16px; }
.adm-menu button.is-on { background: var(--paper); color: var(--ink); }
.adm-menu i[data-badge][hidden] { display: none; }
.adm-menu i[data-badge] { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--neon); color: var(--on-neon); font-size: 10px; font-style: normal; box-shadow: 0 0 10px var(--glow); }
.adm-main { min-width: 0; }
.adm-pane { display: grid; gap: 14px; }
.adm-pane.is-swap { animation: win-in .4s var(--ease); }
.acard { position: relative; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 3px; background: linear-gradient(180deg, rgba(22, 25, 28, .92), rgba(13, 15, 17, .92)); }
.acard::before { content: ""; position: absolute; left: -1px; top: -1px; width: 12px; height: 12px; border-left: 2px solid var(--neon); border-top: 2px solid var(--neon); }
.acard-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font: 700 11px/1 var(--mono); letter-spacing: .18em; }
.acard-h .hint { letter-spacing: .04em; }
.acard-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.acard-f--start { justify-content: flex-start; }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fld--wide { grid-column: span 3; }
.colorfld input { display: block; width: 100%; height: 43px; padding: 3px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(8, 10, 11, .6); cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(14, 16, 18, .6); color: var(--muted); font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.btn:hover { border-color: var(--neon-line); color: var(--neon); }
.btn--acc, .btn.is-on { border-color: var(--neon); background: var(--neon); color: var(--on-neon); }
.btn--acc:hover { background: transparent; color: var(--neon); }
.btn--danger:hover { border-color: #7a3a40; color: #ff8f8f; }
.btn.is-dirty { box-shadow: 0 0 0 1px var(--neon), 0 0 18px -4px var(--glow); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.chk { display: inline-flex; align-items: center; gap: 8px; font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.chk input { width: 15px; height: 15px; accent-color: var(--neon); }
.hint { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--dim); }
.dim { color: var(--dim); }
.acc { color: var(--neon); }
.ridx { font: 600 10.5px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; color: var(--dim); }
.rname { overflow: hidden; font: 800 13px/1.2 var(--display); font-stretch: 112%; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.abar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.abar--sticky { position: sticky; bottom: 0; z-index: 3; padding: 14px 0; background: linear-gradient(transparent, var(--bg) 45%); }
.segbtn { display: inline-flex; }
.segbtn .btn:first-child { border-radius: 3px 0 0 3px; }
.segbtn .btn:last-child { margin-left: -1px; border-radius: 0 3px 3px 0; }
.svcs { display: grid; gap: 6px; }
.svc { display: grid; grid-template-columns: 46px 34px minmax(0, 1.2fr) minmax(0, 1fr) 100px 96px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 10, 11, .4); font: 12px/1.2 var(--mono); }
.svc-emb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 2px; background: var(--acc); color: var(--ink); }
.svc-emb svg { width: 20px; height: 20px; }
.svc a.dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc a.dim:hover { color: var(--neon); }
.svc-st { font: 700 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }
.svc-st[data-state="on"] { color: var(--neon); }
.svc-st[data-state="off"] { color: #e08484; }
.svc-pl { font-size: 10.5px; letter-spacing: .08em; color: var(--dim); }
.svc-pl b { color: var(--text); }
.readout--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; border-top: 0; }
.trows { display: grid; gap: 12px; }
.trow .x { margin-left: auto; }
.swatch { width: 14px; height: 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 2px; background: var(--acc); }
.x { display: grid; place-items: center; width: 30px; height: 30px; padding: 6px; border: 1px solid var(--line-2); border-radius: 3px; background: none; color: var(--dim); cursor: pointer; transition: color .2s, border-color .2s; }
.x:hover { border-color: #7a3a40; color: #ff8f8f; }
.x svg { width: 100%; height: 100%; }
.soc-ico { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--neon); }
.soc-ico svg { width: 16px; height: 16px; }
.stat-rows { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font: 12px/1.2 var(--mono); }
.stat-row:last-child { border-bottom: 0; }
.stat-row--h { font-size: 10px; letter-spacing: .16em; color: var(--dim); }
.stat-row--vis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 64px 92px; }
.stat-row--vis > span { overflow-wrap: anywhere; }
.msgs { display: grid; gap: 10px; }
.msg { padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--line-2); border-radius: 3px; background: rgba(14, 16, 18, .78); }
.msg.is-new { border-left-color: var(--neon); box-shadow: inset 0 0 0 1px var(--neon-line); }
.msg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 12px/1.3 var(--mono); }
.msg-h time { margin-left: auto; }
.msg-text { margin: 10px 0 12px; font: 13px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-f { display: flex; flex-wrap: wrap; gap: 8px; }

/* Live-Konsole (Tab KONTEN, js/admin-live.js) */
.lv-bar { gap: 12px; margin-bottom: 12px; }
.lv-live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 3px; font: 700 10.5px/1 var(--mono); letter-spacing: .2em; color: var(--dim); }
.lv-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.lv-live[data-state="on"] { border-color: var(--neon-line); color: var(--neon); }
.lv-live[data-state="on"] i { background: var(--neon); box-shadow: 0 0 9px var(--glow); animation: lv-pulse 1s ease-in-out infinite; }
.lv-live[data-state="off"] { border-color: #54393f; color: #e08484; }
.lv-live[data-state="off"] i { background: #e08484; }
@keyframes lv-pulse { 50% { opacity: .35; } }
.lv-search { width: 220px; margin-left: auto; }
.lv-list { display: grid; overflow: hidden; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(13, 15, 17, .9); }
.lv-list > .hint { padding: 14px 16px; }
.lv-row { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) 120px minmax(0, 1fr) 210px minmax(0, 1.1fr); gap: 12px; align-items: center; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: 12px/1.3 var(--mono); text-align: left; cursor: pointer; transition: background .15s; }
.lv-row:hover { background: rgba(255, 255, 255, .025); }
.lv-row.is-open { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--neon); }
.lv-row.is-on .rname { color: var(--neon); }
.lv-money { font-weight: 700; font-variant-numeric: tabular-nums; }
.lv-svc { display: flex; gap: 4px; }
.lv-svc i { padding: 3px 5px; border: 1px solid var(--line); border-radius: 2px; font: 600 9px/1 var(--mono); font-style: normal; letter-spacing: .1em; color: var(--line-2); }
.lv-svc i.is-link { border-color: var(--line-2); color: var(--dim); }
.lv-svc i.is-on { border-color: var(--neon); background: var(--neon); color: var(--on-neon); box-shadow: 0 0 10px -2px var(--glow); }
.lv-info { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.lv-ban { display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 2px; background: #5a1e24; color: #ffb3b3; font: 700 9px/1.2 var(--mono); letter-spacing: .12em; vertical-align: 1px; }
.lv-det { padding: 14px 16px 18px; border-bottom: 1px solid var(--line-2); background: linear-gradient(180deg, var(--panel-2), var(--panel)); animation: win-in .3s var(--ease); }
.lv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lv-card { display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(8, 10, 11, .5); }
.lv-card--wide { grid-column: 1 / -1; }
.lv-card h4 { margin: 0; font: 700 10.5px/1 var(--mono); letter-spacing: .2em; color: var(--dim); }
.lv-big { font: 900 26px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--neon); text-shadow: 0 0 14px var(--glow); }
.lv-state { font: 12px/1.4 var(--mono); color: var(--muted); }
.lv-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lv-form .inp { flex: 0 1 180px; width: auto; }
.lv-form .lv-grow { flex: 1 1 220px; }
.lv-form .lv-n { flex: 0 0 74px; }
.lv-vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.lv-vit { display: grid; grid-template-columns: 74px 1fr 34px; gap: 8px; align-items: center; font: 11px/1.3 var(--mono); }
.lv-vit > span { font-size: 9.5px; letter-spacing: .16em; color: var(--dim); }
.lv-vit i { height: 6px; border-radius: 1px; background: linear-gradient(90deg, var(--neon) var(--v), var(--line) var(--v)); }
.lv-vit b { text-align: right; font-variant-numeric: tabular-nums; }
.lv-vit--t { grid-template-columns: 74px 1fr; }
.lv-vit--t b { font-weight: 400; text-align: left; color: var(--muted); }
.lv-inv { display: grid; max-height: 340px; overflow: auto; border-top: 1px solid var(--line); }
.lv-item { display: grid; grid-template-columns: 4px minmax(0, 1.6fr) 110px 90px minmax(0, .8fr) 26px; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line); font: 11.5px/1.3 var(--mono); }
.lv-rar { align-self: stretch; border-radius: 1px; background: var(--rar); }
.lv-iname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-lock { padding: 1px 4px; border-radius: 2px; background: var(--line-2); color: var(--text); font-size: 9px; letter-spacing: .1em; }
.lv-x { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 3px; background: none; color: var(--dim); cursor: pointer; }
.lv-x:hover:not(:disabled) { border-color: #7a3a40; color: #ff8f8f; }
.lv-x:disabled { opacity: .3; cursor: not-allowed; }
.lv-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-key { padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 2px; font: 11px/1.2 var(--mono); }
.lv-key b { color: var(--neon); }
.lv-log { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.lv-lrow { display: grid; grid-template-columns: 62px 64px 104px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font: 11px/1.35 var(--mono); }
.lv-lrow[data-done="-1"] .lv-res { color: #e08484; }
.lv-lrow[data-done="0"] .lv-res { color: var(--neon); }
.lv-res { overflow-wrap: anywhere; color: var(--muted); }

@media (max-height: 820px) and (min-width: 901px) {
  .run-side { gap: 14px; }
  .ro { padding: 7px 2px; }
  .contracts { grid-template-columns: repeat(5, 44px); gap: 6px; }
  .ct { width: 44px; height: 44px; }
  .ct svg { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------ Schmal -- */
@media (max-width: 1180px) {
  .hud-theme { padding-left: 6px; }
  .chip--meter .lbl, .chip--sys { display: none; }
  .run-grid { grid-template-columns: 10px minmax(0, 1fr) 260px; }
  .soc-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .frame { padding: 0 16px; overflow-x: clip; }   /* Planeten-Schein ragt seitlich raus; clip statt hidden, damit der Kopf klebt */
  .hud, .hud-foot { margin: 0 -16px; padding: 0 16px; }
  .hud { flex-wrap: wrap; height: auto; min-height: 52px; row-gap: 0; }
  .hud-logo { height: 52px; }
  .hud-burger { display: block; }
  .hud-nav, .hud-status, .hud-theme { display: none; }
  .hud.is-open .hud-nav, .hud.is-open .hud-status, .hud.is-open .hud-theme { display: flex; flex-basis: 100%; }
  .hud.is-open .hud-nav { flex-direction: column; margin: 0 0 10px; gap: 2px; }
  .hud.is-open .hud-nav a { padding: 12px; }
  .hud.is-open .hud-status { margin: 0 0 10px; flex-wrap: wrap; }
  .hud.is-open .chip--sys, .hud.is-open .chip--meter .lbl { display: inline-flex; }
  .hud.is-open .hud-theme { border: 0; padding: 0 0 14px; gap: 10px; }
  .hud.is-open .sw { width: 26px; height: 26px; }
  .run-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .run-bar { display: none; }
  .stage { min-height: 0; aspect-ratio: 1; }
  .stage-orbit { display: none; }
  .stage.is-focus .globe { transform: none; }
  .poi-panel { position: fixed; z-index: 30; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; translate: none; }
  .stage-lead { display: none; }
  .board-grid, .con-grid, .soc-grid, .adm-grid { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; }
  .chan.is-on { --sx: 0; }
  .chan.is-on::after { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card.is-wide { grid-column: auto; }
  .run { height: auto; min-height: 0; }
  .frame > main.run { flex: 1; }
  .run-grid { grid-template-rows: none; }
  .f2 { grid-template-columns: minmax(0, 1fr); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fld--wide { grid-column: auto; }
  .ascii-logo { min-height: 182px; font-size: 7px; }
  .svc { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .svc .ridx, .svc a.dim { display: none; }
  .svc-pl { grid-column: 2 / -1; }
  .readout--4 { grid-template-columns: 1fr 1fr; }
  .stat-row--vis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat-row--vis.stat-row--h { display: none; }
  .lv-search { width: 100%; margin-left: 0; }
  .lv-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .lv-row > :nth-child(n+4) { grid-column: 2 / -1; }
  .lv-grid { grid-template-columns: minmax(0, 1fr); }
  .lv-item { grid-template-columns: 4px minmax(0, 1fr) 80px 26px; }
  .lv-item > :nth-child(3), .lv-item > :nth-child(5) { display: none; }
  .gate-form .inp { width: 100%; }
  .board-side { position: static; order: 2; grid-template-columns: 1fr 1fr; align-items: start; }   /* Handy: erst die Spiele, dann Planet + ORBIT */
  .rank-mark { padding: 18px 12px 14px; font-size: 26px; }
  .crypt { min-height: 380px; }
  .foot-ver { display: none; }
  .planet-bg { right: -30vmin; opacity: .12; }
}
@media (max-width: 520px) {
  .poi-lbl { font-size: 10px; padding: 4px 6px; }
  .poi-lbl { left: 44px; }
  .poi.is-left .poi-lbl { right: 44px; }
  .board-side { grid-template-columns: minmax(0, 1fr); }
  .contracts { grid-template-columns: repeat(5, 1fr); }
  .ct { width: 100%; height: auto; aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-rv] { opacity: 1; translate: none; clip-path: none; }
  .wipe { display: none; }
  .topo path[pathLength] { stroke-dashoffset: 0; }
  .topo path.dash, .crypt-acts { opacity: 1; }
  .poi-panel.is-open .win, .dossier .win { opacity: 1; clip-path: none; }
}

/* Chrome, große Bildschirme: was sich ständig neu zeichnet (Planet, Orbit-Ellipse, Leitlinien, ORBIT, Rauschen) bekommt eine eigene GPU-Ebene.
   Sonst rastert Chrome bei jedem Planeten-Bild die ganze Seite darunter neu (Topo mit Maske, Verläufe) und kommt auf WQHD nicht nach
   (gemessen 2026-10-21, Start bei 2560×1440: GPU-Last ÷3, verworfene Bilder 1307 → ~410). Sieht gleich aus. */
.planet, .stage-orbit, .stage-links, .orrery, .crypt-noise { will-change: transform; }

/* Touch-Geräte (theme.js setzt .lite): keine Unschärfe-Filter, kein fester Hintergrund, keine Scanline-Ebene, keine Linien-Animation,
   kein Leuchten auf dem sich ständig ändernden Planeten-Text, keine Kipp-Ebenen, Einlauf ohne Clip – das flackerte auf Handys */
.lite body { background-attachment: scroll; }
.lite body::after { display: none; }
.lite .hud, .lite .win { backdrop-filter: none; -webkit-backdrop-filter: none; }
.lite .hud { background: rgba(14, 16, 18, .97); }
.lite .win { background: #121518; }
.lite .topo path[pathLength] { stroke-dashoffset: 0; animation: none; }
.lite .topo path.dash { opacity: 1; animation: none; }
.lite .pl-land, .lite .pl-ice { text-shadow: none; }
.lite .redact, .lite .wip, .lite .poi-ring::after { animation: none; }
.lite .card, .lite .ct, .lite .crypt, .lite .rank, .lite .dos { transform: none; }
.lite .chan-sig.is-live i, .lite .eye { animation: none; }
.lite [data-rv] { clip-path: none; }