/* ============================================================ Onimai AI — Zusatz-Ebene "Storm" Ergaenzt die bestehende onimai.css, ohne sie zu veraendern: ein scrollgebundener Pfad mit fliessenden Punkten, eine Stations-Anzeige am Rand und magnetische Knoepfe. Entfernen = die beiden Zeilen fuer ai-storm.css/.js in index.html loeschen. Sonst aendert sich nichts. ============================================================ */ /* --- Der Pfad --- */ .storm-road{ position:absolute; left:50%; transform:translateX(-50%); width:min(460px,72vw); z-index:-1; /* hinter den Inhalt. Wichtig: hat keinen eigenen Hintergrund, deshalb wandert der von auf die Zeichenflaeche - negative Ebenen bleiben sichtbar. Noetig, weil datenschutz.html keinen .page-Rahmen hat und der Pfad sonst ueber dem Text laege. */ pointer-events:none; opacity:0; transition:opacity .8s var(--ease); } .storm-road.ready{opacity:1} .storm-road svg{width:100%;height:100%;overflow:visible;display:block} .storm-road .sr-base{fill:none;stroke:rgba(255,255,255,.05);stroke-width:2} .storm-road .sr-glow{fill:none;stroke:url(#srGrad);stroke-width:2.6} .storm-road .sr-dash{fill:none;stroke:url(#srGrad);stroke-width:1.3;stroke-dasharray:2 22;opacity:.85} /* --- Stations-Anzeige --- */ .storm-hud{ position:fixed; left:2.2vw; top:50%; transform:translateY(-50%); z-index:900; font-family:var(--font-m); font-size:11px; color:var(--text-3); display:flex; flex-direction:column; gap:8px; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); } .storm-hud.visible{opacity:1} .storm-hud .sh-num{font-family:var(--font-d);font-size:30px;color:var(--text);line-height:1;letter-spacing:.03em} .storm-hud .sh-num span{font-size:14px;color:var(--text-3)} .storm-hud .sh-name{letter-spacing:.2em;color:var(--accent);text-transform:uppercase} .storm-hud .sh-bar{width:1px;height:56px;background:var(--border-h);position:relative;margin-top:4px} .storm-hud .sh-bar>i{ position:absolute;top:0;left:-1.5px;width:4px;height:0; background:linear-gradient(var(--accent),var(--purple)); box-shadow:0 0 10px var(--accent-glow); transition:height .35s var(--ease); } /* --- Magnetische Knoepfe --- */ .btn,.nav-cta{will-change:transform} @media (max-width:1100px){ .storm-hud{display:none} .storm-road{opacity:0 !important} } @media (prefers-reduced-motion:reduce){ .storm-road,.storm-hud{display:none} } /* --- Studio: Statusbalken lesbar machen --- .g-status sitzt im festen Balken unten (.chatdock) und hat nur eine 7-Prozent-Fuellung. Der Text der Karte dahinter schlug dadurch durch und beide Meldungen waren uebereinander nicht mehr lesbar. Hier bekommt er einen deckenden Grund - Farben und Rahmen aus onimai.css bleiben unveraendert. */ .chatdock .g-status{ background-color:rgba(8,10,19,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .chatdock .g-status.down{background-color:rgba(31,25,10,.94)} .chatdock .g-status.up{background-color:rgba(7,24,18,.94)} /* Der weiche Verlauf hinter dem festen Balken reichte nur 40px hoch — direkt ueber dem Statusbalken blitzte der Kartentext noch durch. */ .chatdock::before{inset:-110px 0 0 0}