...
Version: 3 (2026-08-01) - Rueckweg-Knopf ohne Pfeil, Globus ohne
Orbit-Punkt und jetzt auf jeder Unterseite.
===================================================================== */
/* =====================================================================
T-ROCKET "VISOR-HUD": DESIGN-BASIS
Idee: Der Besucher blickt wie durch ein Helmvisier auf die Daten.
Ein FIXER, rein dekorativer Rahmen (".visor") liegt am Viewport-Rand,
der Inhalt scrollt dahinter wie eine Projektion auf dem Glas.
Wiederverwendung fuer alle Unterseiten:
Abschnitte [1] Tokens, [2] Basis, [3] Visor-Chrome und [4] Komponenten
sind seitenunabhaengig und koennen 1:1 in eine gemeinsame hud.css
wandern. Nur [5] enthaelt Kleinigkeiten dieser Seite.
Pro Seite anzupassen: die Texte im Visor (SECTOR-Zeile unten) und die
.ptag-Beschriftungen der Panels.
Leitplanken:
- Saemtliche Deko ist aria-hidden + pointer-events:none. Inhalt,
Semantik, JSON-LD und cron-Marker bleiben unangetastet -> SEO safe.
- Animationen nur subtil, komplett aus bei prefers-reduced-motion.
- Unter 900px verschwinden Seitenmarken/Scanline: Lesbarkeit vor Show.
===================================================================== */
/* ---------- [1] Tokens ---------- */
:root{
--bg:#071626;
--panel:linear-gradient(160deg,rgba(30,64,96,.5),rgba(13,36,58,.66));
--line:rgba(150,205,240,.24); --line2:rgba(150,205,240,.5);
--frame:rgba(230,245,255,.8); /* weisse Visierlinien wie im Referenzbild */
--frame-dim:rgba(230,245,255,.32);
--cy:#39d6ff; --cy-dim:rgba(57,214,255,.6);
--tx:#f2f8fd; --mut:#9db8cc; --amb:#ff8a3c; --red:#ff5c6a; --grn:#52e07c;
--font-b:'Plus Jakarta Sans',sans-serif;
--font-m:ui-monospace,'Cascadia Mono','SF Mono',Consolas,'Liberation Mono',monospace;
/* Radien folgen der Hauptseite (runde Karten, Pills) statt gekappter Ecken */
--r:14px; --r-s:10px;
}
/* ---------- [2] Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{color:var(--tx);font-family:var(--font-b);font-size:14.5px;line-height:1.6;
/* Glas-Grundstimmung: Lichtschein oben, Gegenlicht unten, feines Gitter */
background:
radial-gradient(90% 60% at 50% -5%, rgba(64,150,210,.16), transparent 60%),
radial-gradient(70% 50% at 50% 115%, rgba(40,110,170,.12), transparent 65%),
repeating-linear-gradient(0deg, rgba(120,190,235,.035) 0 1px, transparent 1px 56px),
repeating-linear-gradient(90deg, rgba(120,190,235,.035) 0 1px, transparent 1px 56px),
var(--bg)}
img{max-width:100%;display:block}
a{color:var(--cy)}
/* Die "Projektionsflaeche": ALLER Inhalt scrollt in dieser fixen Flaeche INNERHALB
des Visier-Rahmens. Ausserhalb wird hart abgeschnitten -> nichts ueberlappt
je die Rahmenlinien, Kerben oder Instrumente. */
.vp{position:fixed;top:46px;bottom:46px;left:20px;right:20px;z-index:1;
overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
/* Platz fuer die Bildlaufleiste immer reservieren. Ohne das ruecken kurze Seiten
ohne Leiste die zentrierte Spalte um rund 5px zur Seite, und beim Wechsel
zwischen einer kurzen und einer langen Seite springt der ganze Kopfbereich. */
scrollbar-gutter:stable;
scrollbar-width:thin;scrollbar-color:rgba(57,214,255,.3) rgba(150,205,240,.06);
/* Weicher Uebergang statt harter Kante: Inhalt loest sich zum Rahmen hin auf */
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%)}
.vp::-webkit-scrollbar{width:9px}
.vp::-webkit-scrollbar-track{background:rgba(150,205,240,.05);border-radius:99px}
.vp::-webkit-scrollbar-thumb{background:rgba(57,214,255,.28);border-radius:99px}
.vp::-webkit-scrollbar-thumb:hover{background:rgba(57,214,255,.45)}
.wrap{max-width:1180px;margin:0 auto;padding:26px 24px 44px;
animation:rise .6s .2s cubic-bezier(.2,.7,.3,1) both}
/* ---------- [3] Visor-Chrome (fix, rein dekorativ) ---------- */
.visor{position:fixed;inset:0;z-index:40;pointer-events:none}
/* Glaskruemmung: Randabdunklung + hauchduenner Cyan-Schimmer + Reflex oben links */
.v-vig{position:absolute;inset:0;border-radius:26px;
background:radial-gradient(115% 88% at 50% 46%, transparent 58%, rgba(3,10,19,.34) 86%, rgba(1,5,11,.6) 100%);
box-shadow:inset 0 0 140px rgba(57,214,255,.05)}
.v-vig::before{content:'';position:absolute;inset:0;
background:radial-gradient(55% 28% at 20% 4%, rgba(150,220,255,.06), transparent 70%)}
/* Oberkante: Linie - Kerbe - Linie. Beginnt erst NACH den Eckklammern (44px),
damit keine Linie durch eine Ecke laeuft. */
.v-top{position:absolute;top:0;left:44px;right:44px;height:44px;display:flex}
.v-top .ln{flex:1;height:1px;margin-top:16px;animation:vline .7s cubic-bezier(.25,.8,.3,1) both}
.v-top .ln.l{background:linear-gradient(90deg,transparent,var(--frame) 24px);transform-origin:left}
.v-top .ln.r{background:linear-gradient(270deg,transparent,var(--frame) 24px);transform-origin:right}
.v-notch{width:300px;height:44px;flex:none;animation:vfade .6s .25s both}
/* Unterkante gespiegelt; die Instrumenten-Ringe sitzen IM Flex-Lauf der Leiste,
die Linien enden also vor ihnen statt durch sie hindurchzulaufen. */
.v-bot{position:absolute;bottom:0;left:44px;right:44px;height:44px;display:flex;align-items:flex-end;gap:14px}
.v-bot .ln{flex:1;height:1px;margin-bottom:16px;animation:vline .7s cubic-bezier(.25,.8,.3,1) both}
.v-bot .ln.l{background:linear-gradient(90deg,transparent,var(--frame) 24px);transform-origin:left}
.v-bot .ln.r{background:linear-gradient(270deg,transparent,var(--frame) 24px);transform-origin:right}
.v-bnotch{width:340px;height:44px;flex:none;animation:vfade .6s .25s both}
/* Eckklammern: abgerundet wie die Kartenecken der Hauptseite */
.v-c{position:absolute;width:26px;height:26px;border:1.25px solid var(--frame);opacity:.9;animation:vfade .6s .3s both}
.v-c.tl{top:9px;left:9px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.v-c.tr{top:9px;right:9px;border-left:0;border-bottom:0;border-top-right-radius:14px}
.v-c.bl{bottom:9px;left:9px;border-right:0;border-top:0;border-bottom-left-radius:14px}
.v-c.br{bottom:9px;right:9px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.v-c::after{content:'';position:absolute;width:11px;height:11px;border:1px solid var(--cy-dim)}
.v-c.tl::after{top:4px;left:4px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.v-c.tr::after{top:4px;right:4px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.v-c.bl::after{bottom:4px;left:4px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.v-c.br::after{bottom:4px;right:4px;border-left:0;border-top:0;border-bottom-right-radius:8px}
/* Vertikale Rahmenkanten links/rechts. Der Verlauf hat eine LUECKE dort, wo die
Signalmarken sitzen -> die Linie endet vor ihnen, nichts ueberlappt. */
.v-edge{position:absolute;top:44px;bottom:44px;width:1px;animation:vfade .6s .3s both;
background:linear-gradient(180deg,transparent,
var(--frame-dim) 12%,var(--frame-dim) calc(42% - 30px),transparent calc(42% - 20px),
transparent calc(42% + 150px),var(--frame-dim) calc(42% + 160px),var(--frame-dim) 88%,transparent)}
.v-edge.l{left:16px}.v-edge.r{right:16px}
/* Signalmarken: mittig AUF der Kantenachse, in der Luecke der Linie */
.v-side{position:absolute;top:42%;width:32px;display:flex;flex-direction:column;gap:6px;align-items:center;animation:vfade .6s .35s both}
.v-side.l{left:0}.v-side.r{right:0}
.v-side i{display:block;width:12px;height:1px;background:var(--frame-dim)}
.v-side i.hot{width:18px;background:var(--cy-dim);animation:pulse 2.4s ease-in-out infinite alternate}
.v-side span{font:700 8px/1 var(--font-m);letter-spacing:.3em;color:rgba(170,215,245,.42);writing-mode:vertical-rl;margin:7px 0}
/* Instrumenten-Ringe: Teil der unteren Leiste (kein absolutes Overlay mehr) */
.v-dial{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex:none;
font:700 8px/1 var(--font-m);letter-spacing:.22em;color:rgba(170,215,245,.5);animation:vfade .6s .4s both}
.v-dial svg{width:22px;height:22px;animation:spin 36s linear infinite}
/* Mikro-Readouts in der oberen Chrome-Zone (echte Seitendaten, pro Seite anpassbar) */
.v-read{position:absolute;top:6px;display:flex;gap:12px;font:700 8px/1 var(--font-m);
letter-spacing:.22em;color:rgba(170,215,245,.55);animation:vfade .6s .45s both}
.v-read.tl{left:46px}.v-read.tr{right:46px}
.v-read .dim{color:rgba(170,215,245,.3)}
/* Zentrales Fadenkreuz: fast unsichtbar, gibt dem Glas Tiefe (liegt UNTER dem Inhalt) */
.v-ret{position:fixed;top:50%;left:50%;width:560px;height:560px;z-index:0;pointer-events:none;
transform:translate(-50%,-50%);border:1px solid rgba(57,214,255,.05);border-radius:50%}
.v-ret::before{content:'';position:absolute;inset:36px;border:1px dashed rgba(57,214,255,.07);
border-radius:50%;animation:spin 80s linear infinite}
.v-ret::after{content:'';position:absolute;inset:0;
background:
linear-gradient(90deg,transparent calc(50% - .5px),rgba(57,214,255,.05) 50%,transparent calc(50% + .5px)),
linear-gradient(0deg,transparent calc(50% - .5px),rgba(57,214,255,.05) 50%,transparent calc(50% + .5px))}
/* Scanline: die "Elektronik" des Glases, statisch und sehr fein.
Liegt exakt ueber der Projektionsflaeche (.vp) und clippt an ihr. */
.v-fx{position:fixed;top:46px;bottom:46px;left:20px;right:20px;z-index:2;
pointer-events:none;overflow:hidden}
.v-scan{position:absolute;inset:0;
background:repeating-linear-gradient(0deg, rgba(200,235,255,.016) 0 1px, transparent 1px 3px)}
/* ---------- [4] Komponenten (fuer alle Unterseiten identisch) ---------- */
/* Topbar + Breadcrumb */
.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:22px}
/* Der Rueckweg zur Live-Map: bewusst prominent, weil Besucher aus der Suche
direkt auf Unterseiten landen. Wireframe-Globus mit rotierender Umlaufbahn
als Mini-Zitat der Hauptseite, auf jeder Unterseite gleich. */
.back{display:inline-flex;align-items:center;gap:11px;padding:10px 20px 10px 12px;
border:1px solid var(--line2);background:rgba(57,214,255,.12);color:var(--cy);text-decoration:none;
font-weight:800;font-size:12px;letter-spacing:.12em;box-shadow:0 0 16px rgba(57,214,255,.12);
transition:background .18s,border-color .18s,box-shadow .18s;border-radius:99px}
.back:hover{background:rgba(57,214,255,.22);border-color:var(--cy);box-shadow:0 0 26px rgba(57,214,255,.35)}
.globe{width:30px;height:30px;flex:none;color:var(--cy)}
.globe .orb{animation:spin 9s linear infinite;transform-origin:16px 16px}
.brandmini{font-size:11px;letter-spacing:.14em;color:#fff;font-weight:800;white-space:nowrap}
.brandmini img{display:inline-block}
.crumb{font-size:10.5px;font-family:var(--font-m);color:var(--mut);letter-spacing:.14em;margin-bottom:10px;text-transform:uppercase}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
/* Titel + Sektionstitel mit dekorativem Index */
.pageTitle{font-size:26px;font-weight:800;letter-spacing:.02em;color:#fff;line-height:1.25;margin:2px 0 4px;
text-shadow:0 0 24px rgba(57,214,255,.18)}
.pageSub{font-size:13px;color:var(--mut);margin-bottom:18px;max-width:880px}
.secHead{font-size:17px;font-weight:800;color:#fff;letter-spacing:.02em;margin-top:30px}
.secHead::before{content:attr(data-n) ' /';font:800 11px var(--font-m);color:var(--cy-dim);
letter-spacing:.18em;margin-right:9px;vertical-align:2px}
/* Statusleiste: Kopfzeilen-Readout des Helms (echter Inhalt, kein Deko) */
.hudstrip{display:flex;flex-wrap:wrap;border:1px solid var(--line);margin:0 0 22px;
font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;color:var(--mut);
background:rgba(13,36,58,.55);backdrop-filter:blur(8px);
border-radius:var(--r-s);overflow:hidden}
.hudstrip div{padding:9px 14px;border-right:1px solid rgba(150,205,240,.14);white-space:nowrap}
.hudstrip div:last-child{border-right:0}
.hudstrip b{color:#fff;font-weight:800}
.hudstrip .go{color:var(--cy);animation:pulse 2.8s ease-in-out infinite alternate}
/* Runde Karten (wie die Hauptseite) mit Winkelmarken und Kennung (.ptag) */
.panel,.tframe{position:relative;background:var(--panel);border:1px solid var(--line);
backdrop-filter:blur(14px);border-radius:var(--r)}
.panel{padding:22px 22px 20px;margin-top:24px}
.tframe{margin-top:16px;overflow:hidden}
.panel::before,.panel::after,.tframe::before,.tframe::after{
content:'';position:absolute;width:12px;height:12px;border:1px solid var(--cy);opacity:.8;pointer-events:none}
.panel::before,.tframe::before{top:5px;right:5px;border-left:0;border-bottom:0;border-top-right-radius:9px}
.panel::after,.tframe::after{bottom:5px;left:5px;border-right:0;border-top:0;border-bottom-left-radius:9px}
/* Kennung als schlichtes Label ueber der Karte: kein eigener Kasten,
dadurch homogen mit dem Feld darunter (wie die Bracket-Labels im HUD-Vorbild) */
.ptag{display:block;margin:24px 0 7px;padding:0 2px;white-space:nowrap;
font:800 8.5px/1.4 var(--font-m);letter-spacing:.24em;color:var(--cy-dim)}
.ptag.t{margin-top:16px}
.ptag + .panel,.ptag + .tframe{margin-top:0}
/* Ueberschrift als Ableseleiste */
.panel h2{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;font-family:var(--font-m);
letter-spacing:.22em;color:var(--cy);margin-bottom:14px;border:0;padding:0}
.panel h2::before{content:'';width:1px;height:8px;background:var(--line2);flex:none;order:2}
.panel h2::after{content:'';flex:1;height:1px;order:3;
background:linear-gradient(90deg,rgba(150,205,240,.45),rgba(150,205,240,.03))}
.panel h3{font-size:13.5px;font-weight:800;color:#fff;margin:16px 0 4px}
.panel h3:first-of-type{margin-top:0}
.panel p{font-size:13px;color:#c3d7e7;margin-bottom:10px;max-width:880px}
.panel p:last-child{margin-bottom:0}
/* Tabelle als Instrument */
.tableWrap{overflow-x:auto}
table{width:100%;min-width:680px;border-collapse:collapse;font-size:12.5px}
thead th{text-align:left;font:800 9.5px var(--font-m);letter-spacing:.18em;color:var(--cy);
padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:rgba(57,214,255,.04)}
tbody td{padding:11px 14px;border-bottom:1px solid rgba(150,205,240,.14);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
/* Statusschiene links an der Zeile */
tbody tr td:first-child{border-left:3px solid rgba(150,205,240,.28)}
tbody tr:has(.chip.go) td:first-child{border-left-color:var(--grn)}
tbody tr:has(.chip.amb) td:first-child{border-left-color:var(--amb)}
tbody tr:has(.chip.red) td:first-child{border-left-color:var(--red)}
tbody tr:hover td{background:rgba(57,214,255,.05)}
td .r{font-weight:700;color:#fff}
td .m{color:var(--mut);font-size:11.5px}
td.tloc{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:#fff}
.chip{display:inline-block;font:800 9.5px var(--font-m);letter-spacing:.08em;padding:2.5px 10px;
border:1px solid var(--line);color:var(--mut);white-space:nowrap;border-radius:99px}
.chip.go{color:var(--grn);border-color:rgba(82,224,124,.55);text-shadow:0 0 10px rgba(82,224,124,.35)}
.chip.red{color:var(--red);border-color:rgba(255,92,106,.55)}
.chip.amb{color:var(--amb);border-color:rgba(255,138,60,.55)}
.updated{font:400 10.5px var(--font-m);color:var(--mut);margin-top:10px;letter-spacing:.06em}
/* Rampen als Spines */
.padGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:6px}
.pad{border-left:2px solid var(--cy);padding:2px 0 2px 13px}
.pad .n{font-weight:800;color:#fff;font-size:15px;letter-spacing:.04em}
.pad .who{font:800 10px var(--font-m);color:var(--cy);letter-spacing:.16em;margin:1px 0 7px}
.pad p{font-size:12.5px;color:#c3d7e7;margin:0}
/* Aussichtspunkte */
.spot{border-bottom:1px solid rgba(150,205,240,.14);padding:14px 0 14px 13px;border-left:2px solid rgba(150,205,240,.22)}
.spot:last-child{border-bottom:none;padding-bottom:0}
.spot .n{font-weight:800;color:#fff;font-size:13.5px}
.spot .d{font:800 10px var(--font-m);color:var(--cy);letter-spacing:.14em;margin:3px 0 6px}
.spot p{font-size:12.5px;color:#c3d7e7;margin:0}
.spot .q{font-size:10.5px;color:var(--mut);margin-top:6px;letter-spacing:.04em}
.warn{background:rgba(255,138,60,.09);border:1px solid rgba(255,138,60,.35);
padding:13px 16px;color:#ffd0ab;font-size:12.5px;margin-top:16px;border-radius:var(--r-s)}
/* Knoepfe + Quellenzeile */
.cta{display:inline-block;margin-top:26px;background:linear-gradient(180deg,#4db2f9,#2c8cd9);color:#fff;
font-weight:800;font-size:12.5px;letter-spacing:.1em;padding:12px 26px;text-decoration:none;
transition:box-shadow .18s,filter .18s;border-radius:99px}
.cta:hover{box-shadow:0 0 22px rgba(57,214,255,.3);filter:brightness(1.07)}
.cta.alt{background:none;border:1px solid var(--line2);color:var(--cy);margin-left:10px}
.srcline{margin-top:28px;font-size:10.5px;color:var(--mut);border-top:1px solid var(--line);
padding-top:14px;line-height:1.9;letter-spacing:.03em}
/* Fokusrahmen innenliegend: bleibt auch in der geclippten Scroll-Flaeche sichtbar */
:focus-visible{outline:2px solid var(--cy);outline-offset:-3px;border-radius:inherit}
/* ---------- [6] Motion ---------- */
@keyframes vline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vfade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{from{opacity:1}to{opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.visor *,.v-fx *,.v-ret::before,.wrap,.back,.hudstrip .go,.cta,.globe .orb{animation:none!important;transition:none!important}
}
/* ---------- [7] Responsive: Lesbarkeit vor Show ----------
1100px: Tablet quer - Flanken-Deko weicht dem Inhalt
900px: Tablet hoch - schlankes Chrome, teure Effekte aus
640px: Smartphone - kompakte Typo, Buttons in voller Breite */
@media (max-width:1100px){
.v-side,.v-edge,.v-ret{display:none}
.vp{left:16px;right:16px}
}
@media (max-width:900px){
.v-dial,.v-fx,.v-read{display:none}
.v-top,.v-bot{left:30px;right:30px}
.v-notch,.v-bnotch{width:190px;height:36px}
.v-notch text,.v-bnotch text{display:none}
/* 16.5 * 36/44 = 13.5 -> 1px-Linie bei 13px trifft den skalierten Pfad exakt */
.v-top .ln{margin-top:13px}
.v-bot .ln{margin-bottom:13px}
.v-c{width:20px;height:20px}
.vp{top:38px;bottom:38px;
left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right))}
.wrap{padding:16px 14px 32px}
.panel{padding:18px 14px 16px}
/* backdrop-filter ist auf Mobilgeraeten der teuerste Posten -> aus */
.panel,.tframe,.hudstrip{backdrop-filter:none}
}
@media (max-width:640px){
body{font-size:14px}
.pageTitle{font-size:21px}
.secHead{font-size:15.5px}
.pageSub{font-size:12.5px}
.hudstrip{font-size:9.5px}
.hudstrip div{padding:8px 10px;flex:1 1 auto;text-align:center}
.globe{width:24px;height:24px}
.back{font-size:11px;gap:8px;padding:9px 15px 9px 10px}
.topbar{margin-bottom:16px}
.cta{display:block;text-align:center;margin-top:14px}
.cta.alt{margin-left:0;margin-top:10px}
.padGrid{gap:14px}
}
@media print{
.visor,.v-fx{display:none}
html,body{height:auto;overflow:visible}
.vp{position:static;overflow:visible}
}